@dflex/core-instance - npm Package Compare versions

Comparing version 3.8.2 to 3.8.3

./dist/dflex-core.js

@@ -1,1 +0,1 @@
-"use strict";class t{constructor(t,s){this.x=t,this.y=s,Object.seal(this)}}class s extends t{setAxes(t,s){this.x=t,this.y=s}clone(t){this.setAxes(t.x,t.y)}getInstance(){return{x:this.x,y:this.y}}isInstanceEqual(t){return this.x===t.x&&this.y===t.y}isEqual(t,s){return this.x===t&&this.y===s}isNotEqual(t,s){return this.x!==t||this.y!==s}}class i{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class h extends i{setBox(t,s,i,h){return this.top=t,this.right=s,this.bottom=i,this.left=h,this}getBox(){return{top:this.top,right:this.right,bottom:this.bottom,left:this.left}}setByAxis(t,s,i){if("x"===t)this.left=s,this.right=i;else this.top=s,this.bottom=i}setOne(t,s,i){if("x"===t)-1===s?this.left=i:this.right=i;else-1===s?this.top=i:this.bottom=i}getOne(t,s){return"x"===t?-1===s?this.left:this.right:-1===s?this.top:this.bottom}setPositionInstance(t){this.top=t.y,this.left=t.x}setPosition(t,s){this.top=s,this.left=t}getPosition(){return{x:this.left,y:this.top}}}class e extends h{constructor(t,s,i,h){super(t,s,i,h),Object.seal(this)}setFalsy(){return this.setBox(!1,!1,!1,!1),this}isOneTruthyByAxis(t){return"x"===t?this.left||this.right:this.top||this.bottom}isOneTruthy(){return this.left||this.right||this.top||this.bottom}}class n extends h{t(t){return this.top>=t.bottom}i(t){return this.bottom<=t.top}h(t){return this.right<=t.left}o(t){return this.left>=t.right}isNotIntersect(t){return this.t(t)||this.h(t)||this.i(t)||this.o(t)}isIntersect(t){return!this.isNotIntersect(t)}isPositionedY(t){return this.t(t)||this.i(t)}assignBiggestBox(t){const{top:s,left:i,right:h,bottom:e}=t;i<this.left&&(this.left=i),s<this.top&&(this.top=s),h>this.right&&(this.right=h),e>this.bottom&&(this.bottom=e)}}class r extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t,Object.seal(this)}setByPointAndDimensions(t,s,i,h){return this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i,this}setAxis(t,s){if("x"===t)this.left=s,this.right=this.width+s;else this.top=s,this.bottom=this.height+s;return this}setAxes(t,s){return this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s,this}getRect(){return{...this.getBox(),height:this.height,width:this.width}}}class o extends s{increase(t){this.x+=t.x,this.y+=t.y}composeBox(t,s){const{top:i,left:h,bottom:e,right:r}=t;return s?new n(i+this.y,r-this.x,e-this.y,h+this.x):new n(i-this.y,r+this.x,e+this.y,h-this.x)}onSameAxis(t,s){return"y"===t?s.x===this.x:s.y===this.y}}class l extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class c{constructor(t){this.l=t,this.thresholds={},this.isOut={}}u({width:t,height:s}){const i=Math.round(this.l.horizontal*t/100),h=Math.round(this.l.vertical*s/100);this.g=new o(i,h)}p(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t]=new e(!1,!1,!1,!1)}m(t,s){const i=`${s}`;this.thresholds[i]?this.thresholds[s].assignBiggestBox(this.thresholds[t]):this.p(i,this.thresholds[t],!1)}setMainThreshold(t,s,i){this.u(s),this.p(t,s,i)}updateMainThreshold(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t].setFalsy()}setContainerThreshold(t,s,i,h,e){this.p(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.p(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.m(s,i)}isOutThresholdByAxis(t,s,i,h){const{left:e,right:n,top:r,bottom:o}=this.thresholds[s];return"x"===t&&this.isOut[s].setByAxis(t,i<e,h>n),"y"===t&&this.isOut[s].setByAxis(t,i<r,h>o),this.isOut[s].isOneTruthyByAxis(t)}isOutThresholdByDirection(t,s,i,h,e){const{left:n,right:r,top:o,bottom:l}=this.thresholds[i],c="x"===t?-1===s?h<n:e>r:-1===s?h<o:e>l;return this.isOut[i].setOne(t,s,c),c}isOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return this.isOut[t].setBox(s<n.top,i>n.right,h>n.bottom,e<n.left),this.isOut[t].isOneTruthy()}isShallowOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return s<n.top||i>n.right||h>n.bottom||e<n.left}destroy(){Object.keys(this.thresholds).forEach((t=>{delete this.thresholds[t]})),Object.keys(this.isOut).forEach((t=>{delete this.isOut[t]}))}}const u=Object.freeze(["x","y"]);let a=new WeakMap;const d=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function g(t,s){const i=t.getPropertyValue(s).match(d);return i?parseFloat(i[1]):0}function x(t){const s=function(t){if(a.has(t))return a.get(t);const s=getComputedStyle(t);return a.set(t,s),s}(t);return{width:g(s,"width"),height:g(s,"height")}}const f=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class p{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new o(0,0)),this.T=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(f[s],`${i}`),this.T.add(s)):t.setAttribute(f[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(f[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}p.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends p{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...i}),this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=null,this.I=new o(0,0),this.rect=new r(0,0,0,0),this.DOMGrid=new o(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.I.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this.O)return this.O;const{width:s,height:i}=x(t);return this.O=new o(s,i),this.O}getInitialPosition(){return this.I}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this._(t),this.hasPendingTransform=!1))}_(t,s){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),s&&s(),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}assignNewIndex(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}v(t,s,i){t[i]="",t[s]=this.id}A(t,s){const i={ID:s,axis:t,translate:this.translate.getInstance()};Array.isArray(this.D)||(this.D=[]),this.D.push(i)}S(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this._(t);this.isVisible?this._(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.I.x+this.translate.x,this.I.y+this.translate.y),this.S(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),{oldIndex:e,newIndex:n}}reconcilePosition(t,s,i,h,e,n){"z"===t?u.forEach(((t,i)=>{const h=0===i?1===s?-1:1:s;e[t]*=h,this.DOMGrid[t]+=1*s})):(e[t]*=s,this.DOMGrid[t]+=1*s),this.A(t,n);const{oldIndex:r,newIndex:o}=this.P(i,e,!1,1*s);this.v(h,o,r)}restorePosition(t){this._(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this._(t)}rollBackPosition(t,s){if(!Array.isArray(this.D))return;const{length:i}=this.D;if(!(this.D[i-1].ID===s))return;const{translate:h,axis:e}=this.D.pop(),n={x:h.x-this.translate.x,y:h.y-this.translate.y};let r=0;"z"===e?(r=n.x>0||n.y>0?1:-1,this.DOMGrid.increase({x:r,y:r})):(r=n[e]>0?1:-1,this.DOMGrid[e]+=r),this.P(t,n,!0,r),0!==this.D.length?this.rollBackPosition(t,s):this.D=void 0}hasTransformedFromOrigin(){return this.I.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.D=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,function(t){t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style")}(t),this.initElmRect(t),this.DOMGrid.setAxes(0,0)}getSerializedInstance(){return{type:m.getType(),version:3,id:this.id,grid:this.DOMGrid,translate:this.translate instanceof o?this.translate:null,order:this.VDOMOrder,initialPosition:this.I.getInstance(),rect:this.rect.getRect(),hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=p.transform;class y extends w{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.rect["x"===i?"left":"top"];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.rect.right:s.rect.bottom;return t[i]-h}getRectDiff(t,s){const i=y.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}class T{constructor(t,s,i){this.id=i,this.grid=new o(-1,-1),this.originLength=s,this.N=new n(0,0,0,0),this.B=null,this.R(t),this.lastElmPosition=null}R(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.C=new r(i,h,e,s)}F(t){const s=this.N;s.isPositionedY(t)?(this.grid.y+=1,this.grid.x=0,this.N.setBox(0,0,0,0)):this.grid.x+=1,s.assignBiggestBox(t)}registerNewElm(t,s){this.B?this.B.assignBiggestBox(t):this.B=new n(t.top,t.right,t.bottom,t.left),this.F(t);const i=this.B,h=s;if(!h)return;const e=i.bottom-i.top,r=i.right-i.left;h.height<e&&(h.height=e),h.width<r&&(h.width=e)}getBoundaries(){return this.B||this.C.getBox()}resetIndicators(t){this.grid.setAxes(-1,-1),this.originLength=t,this.N.setBox(0,0,0,0),this.B=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new o(t.x,t.y)}}T.OUT_OF_RANGE=-1;const O=/(auto|scroll|overlay)/;function b(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;try{do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body))}catch(t){}finally{i=0}return null}(t,(t=>{if(h&&"static"===getComputedStyle(t).getPropertyValue("position"))return!1;const i=getComputedStyle(t),e=t.getBoundingClientRect(),n=i.getPropertyValue("overflow-y");if(O.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!O.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function I(t){return"x"===t?"width":"height"}function _(t,s,i){const h=I(i);return t[h]>s[h]}function v(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.L.call(this,this.M.bind(this),this.j)},this.animatedResizeListener=()=>{this.L.call(this,this.$.bind(this),null)},this.hasOverflow=new l(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new r(0,0,0,0),this.scrollContainerRect=new r(0,0,0,0),this.allowDynamicVisibility=!1,this.V=null,this.q=null,this.X=s,this.k=`scroll_inner_${s}`,this.G=`scroll_outer_${s}`,this.H=`dflexScrollListener_${s}`,this.U=null,this.j=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=b(t),this.$();const{scrollLeft:o,scrollTop:u}=this.scrollContainerDOM;this.W(o,u,!1),this.Y(),i>A.J&&this.allowDynamicVisibility&&(this.j=e,this.q=new c(A.K),this.q.setMainThreshold(this.G,this.scrollContainerRect,!1)),this.Z(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}$(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;this.scrollRect.setByPointAndDimensions(h,i,t,s);const{clientHeight:e,clientWidth:n}=this.scrollContainerDOM;if(this.scrollContainerRect.setByPointAndDimensions(0,0,e,n),!this.hasDocumentAsContainer){const{left:t,top:s}=this.scrollContainerDOM.getBoundingClientRect();this.scrollContainerRect.setByPointAndDimensions(s,t,e,n)}}Y(){this.hasOverflow.setAxes(_(this.scrollRect,this.scrollContainerRect,"x"),_(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&v(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&v(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}M(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.W(t,s,!1),i)}W(t,s,i){this.scrollRect.top=s,this.scrollRect.left=t;const h=this.scrollRect.height-s,e=this.scrollRect.width-t;this.invisibleDistance.setBox(s,e-this.scrollContainerRect.width,h-this.scrollContainerRect.height,t),i&&null!==this.j&&this.j(this.X)}scrollTo(t,s,i){this.W(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}tt(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.H]=`${s}`:delete i.dataset[this.H]}Z(t=!0){const s=t?"addEventListener":"removeEventListener",i=this.hasDocumentAsContainer?window:this.scrollContainerDOM,h={passive:!0};if(i[s]("resize",this.animatedResizeListener,h),this.hasOverflow.isOneTruthy())return i[s]("scroll",this.animatedScrollListener,h),void this.tt(t,!0);this.hasDocumentAsContainer||this.tt(t,!1)}pauseListeners(t){this.U=t?1:null}st(){null!==this.V&&(this.V.destroy(),this.V=null)}setInnerThreshold(t){this.st(),this.V=new c(t),this.V.setMainThreshold(this.k,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.V.isOutThresholdByDirection(t,s,this.k,i-e,h-e)}getMaximumScrollContainerLeft(){const{left:t,width:s}=this.scrollContainerRect;return t+s+this.scrollRect.left}getMaximumScrollContainerTop(){const{top:t,height:s}=this.scrollContainerRect;return t+s+this.scrollRect.top}getElmPositionInViewport(t,s){const{top:i,left:h}=this.scrollRect;return[t-i,s-h]}isElmVisibleViewport(t,s,i,h){const[e,n]=this.getElmPositionInViewport(t,s),r=e,o=n;return!this.q.isShallowOutThreshold(this.G,r,o+h,r+i,o)}L(t,s){null!==this.U&&cancelAnimationFrame(this.U),this.U=requestAnimationFrame((()=>{t()&&s&&s(this.X),this.U=null}))}it(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.X,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.it()}}destroy(){this.st(),this.j=null,this.Z(!1),this.scrollContainerDOM=null}};let D=A;D.K={horizontal:25,vertical:25},D.J=10,exports.DFlexBaseElement=p,exports.DFlexElement=y,exports.DFlexParentContainer=T,exports.DFlexScrollContainer=D;
+"use strict";class t{constructor(t,s){this.x=t,this.y=s,Object.seal(this)}}class s extends t{setAxes(t,s){this.x=t,this.y=s}clone(t){this.setAxes(t.x,t.y)}getInstance(){return{x:this.x,y:this.y}}isInstanceEqual(t){return this.x===t.x&&this.y===t.y}isEqual(t,s){return this.x===t&&this.y===s}isNotEqual(t,s){return this.x!==t||this.y!==s}}class i{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class h extends i{clone(t){this.top=t.top,this.right=t.right,this.bottom=t.bottom,this.left=t.left}setBox(t,s,i,h){return this.top=t,this.right=s,this.bottom=i,this.left=h,this}getBox(){return{top:this.top,right:this.right,bottom:this.bottom,left:this.left}}setByAxis(t,s,i){if("x"===t)this.left=s,this.right=i;else this.top=s,this.bottom=i}setOne(t,s,i){if("x"===t)-1===s?this.left=i:this.right=i;else-1===s?this.top=i:this.bottom=i}getOne(t,s){return"x"===t?-1===s?this.left:this.right:-1===s?this.top:this.bottom}setPositionInstance(t){this.top=t.y,this.left=t.x}setPosition(t,s){this.top=s,this.left=t}getPosition(){return{x:this.left,y:this.top}}}class e extends h{constructor(t,s,i,h){super(t,s,i,h),Object.seal(this)}setFalsy(){return this.setBox(!1,!1,!1,!1),this}isOneTruthyByAxis(t){return"x"===t?this.left||this.right:this.top||this.bottom}isOneTruthy(){return this.left||this.right||this.top||this.bottom}}class n extends h{t(t){return this.top>=t.bottom}i(t){return this.bottom<=t.top}h(t){return this.right<=t.left}o(t){return this.left>=t.right}isNotIntersect(t){return this.t(t)||this.h(t)||this.i(t)||this.o(t)}isIntersect(t){return!this.isNotIntersect(t)}getSurroundingBox(t){return{left:Math.min(t.left,this.left),top:Math.min(t.top,this.top),right:Math.max(t.right,this.right),bottom:Math.max(t.bottom,this.bottom)}}isInside(t){return this.top>=t.top&&this.right<=t.right&&this.bottom<=t.bottom&&this.left>=t.left}isPositionedY(t){return this.t(t)||this.i(t)}assignBiggestBox(t){const{top:s,left:i,right:h,bottom:e}=t;i<this.left&&(this.left=i),s<this.top&&(this.top=s),h>this.right&&(this.right=h),e>this.bottom&&(this.bottom=e)}}class r extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t,Object.seal(this)}setByPointAndDimensions(t,s,i,h){return this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i,this}setAxis(t,s){if("x"===t)this.left=s,this.right=this.width+s;else this.top=s,this.bottom=this.height+s;return this}setAxes(t,s){return this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s,this}getRect(){return{...this.getBox(),height:this.height,width:this.width}}}class o extends s{increase(t){this.x+=t.x,this.y+=t.y}composeBox(t,s){const{top:i,left:h,bottom:e,right:r}=t;return s?new n(i+this.y,r-this.x,e-this.y,h+this.x):new n(i-this.y,r+this.x,e+this.y,h-this.x)}onSameAxis(t,s){return"y"===t?s.x===this.x:s.y===this.y}}class l extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class c{constructor(t){this.l=t,this.thresholds={},this.isOut={}}u({width:t,height:s}){const i=Math.round(this.l.horizontal*t/100),h=Math.round(this.l.vertical*s/100);this.g=new o(i,h)}p(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t]=new e(!1,!1,!1,!1)}m(t,s){const i=`${s}`;this.thresholds[i]?this.thresholds[s].assignBiggestBox(this.thresholds[t]):this.p(i,this.thresholds[t],!1)}setMainThreshold(t,s,i){this.u(s),this.p(t,s,i)}updateMainThreshold(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t].setFalsy()}getElmMainThreshold(t){return this.g.composeBox(t,!1)}setContainerThreshold(t,s,i,h,e){this.p(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.p(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.m(s,i)}isOutThresholdByAxis(t,s,i,h){const{left:e,right:n,top:r,bottom:o}=this.thresholds[s];return"x"===t&&this.isOut[s].setByAxis(t,i<e,h>n),"y"===t&&this.isOut[s].setByAxis(t,i<r,h>o),this.isOut[s].isOneTruthyByAxis(t)}isOutThresholdByDirection(t,s,i,h,e){const{left:n,right:r,top:o,bottom:l}=this.thresholds[i],c="x"===t?-1===s?h<n:e>r:-1===s?h<o:e>l;return this.isOut[i].setOne(t,s,c),c}isOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return this.isOut[t].setBox(s<n.top,i>n.right,h>n.bottom,e<n.left),this.isOut[t].isOneTruthy()}isShallowOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return s<n.top||i>n.right||h>n.bottom||e<n.left}destroy(){Object.keys(this.thresholds).forEach((t=>{delete this.thresholds[t]})),Object.keys(this.isOut).forEach((t=>{delete this.isOut[t]}))}}const u=Object.freeze(["x","y"]);let a=new WeakMap;const d=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function g(t,s){const i=t.getPropertyValue(s).match(d);return i?parseFloat(i[1]):0}function f(t){const s=function(t){if(a.has(t))return a.get(t);const s=getComputedStyle(t);return a.set(t,s),s}(t);return{width:g(s,"width"),height:g(s,"height")}}const x=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class p{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new o(0,0)),this.T=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(x[s],`${i}`),this.T.add(s)):t.setAttribute(x[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(x[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}p.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends p{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...i}),this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=null,this.I=new o(0,0),this.rect=new r(0,0,0,0),this.DOMGrid=new o(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.I.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this.O)return this.O;const{width:s,height:i}=f(t);return this.O=new o(s,i),this.O}getInitialPosition(){return this.I}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this._(t),this.hasPendingTransform=!1))}_(t,s){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),s&&s(),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}assignNewIndex(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}v(t,s,i){t[i]="",t[s]=this.id}A(t,s){const i={ID:s,axis:t,translate:this.translate.getInstance()};Array.isArray(this.D)||(this.D=[]),this.D.push(i)}S(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this._(t);this.isVisible?this._(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.I.x+this.translate.x,this.I.y+this.translate.y),this.S(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),{oldIndex:e,newIndex:n}}reconcilePosition(t,s,i,h,e,n,r,o){if("z"===t)u.forEach(((t,i)=>{const h=0===i?1===s?-1:1:s;e[t]*=h,this.DOMGrid[t]+=s*n}));else if(e[t]*=s,-1===s)for(let t=0;t<n;t+=1)this.DOMGrid.x-=1,this.DOMGrid.x<0&&(this.DOMGrid.x=r.x,this.DOMGrid.y-=1);else for(let t=0;t<n;t+=1)this.DOMGrid.x+=1,this.DOMGrid.x>r.x&&(this.DOMGrid.x=0,this.DOMGrid.y+=1);this.A(t,o);const{oldIndex:l,newIndex:c}=this.P(i,e,!1,s*n);this.v(h,c,l)}restorePosition(t){this._(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this._(t)}rollBackPosition(t,s){if(!Array.isArray(this.D))return;const{length:i}=this.D;if(!(this.D[i-1].ID===s))return;const{translate:h,axis:e}=this.D.pop(),n={x:h.x-this.translate.x,y:h.y-this.translate.y};let r=0;"z"===e?(r=n.x>0||n.y>0?1:-1,this.DOMGrid.increase({x:r,y:r})):(r=n[e]>0?1:-1,this.DOMGrid[e]+=r),this.P(t,n,!0,r),0!==this.D.length?this.rollBackPosition(t,s):this.D=void 0}hasTransformedFromOrigin(){return this.I.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.D=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,function(t){t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style")}(t),this.initElmRect(t),this.DOMGrid.setAxes(0,0)}getSerializedInstance(){return{type:m.getType(),version:3,id:this.id,grid:this.DOMGrid,translate:this.translate instanceof o?this.translate:null,order:this.VDOMOrder,initialPosition:this.I.getInstance(),rect:this.rect,hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=p.transform;class y extends w{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.rect["x"===i?"left":"top"];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.rect.right:s.rect.bottom;return t[i]-h}getRectDiff(t,s){const i=y.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}class T{constructor(t,s,i){this.id=i,this.M=new o(-1,-1),this.grid=new o(-1,-1),this.originLength=s,this.B=new n(0,0,0,0),this.N=null,this.R(t),this.lastElmPosition=null}R(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.C=new r(i,h,e,s)}F(t){const s=this.B;return s.isPositionedY(t)?(this.M.y+=1,this.M.x=0,this.B.setBox(0,0,0,0)):this.M.x+=1,this.M.x>this.grid.x&&(this.grid.x=this.M.x),this.M.y>this.grid.y&&(this.grid.y=this.M.y),s.assignBiggestBox(t),this.M}register(t,s){this.N?this.N.assignBiggestBox(t):this.N=new n(t.top,t.right,t.bottom,t.left);const i=this.F(t),h=this.N,e=s;if(!e)return i;const r=h.bottom-h.top,o=h.right-h.left;return e.height<r&&(e.height=r),e.width<o&&(e.width=r),i}getBoundaries(){return this.N||this.C.getBox()}resetIndicators(t){this.M.setAxes(-1,-1),this.grid.setAxes(-1,-1),this.originLength=t,this.B.setBox(0,0,0,0),this.N=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new o(t.x,t.y)}}T.OUT_OF_RANGE=-1;const b=/(auto|scroll|overlay)/;function O(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;try{do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body))}catch(t){}finally{i=0}return null}(t,(t=>{if(h&&"static"===getComputedStyle(t).getPropertyValue("position"))return!1;const i=getComputedStyle(t),e=t.getBoundingClientRect(),n=i.getPropertyValue("overflow-y");if(b.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!b.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function I(t){return"x"===t?"width":"height"}function _(t,s,i){const h=I(i);return t[h]>s[h]}function v(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.L.call(this,this.j.bind(this),this.$)},this.animatedResizeListener=()=>{this.L.call(this,this.V.bind(this),null)},this.hasOverflow=new l(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new r(0,0,0,0),this.scrollContainerRect=new r(0,0,0,0),this.allowDynamicVisibility=!1,this.q=null,this.X=null,this.k=s,this.G=`scroll_inner_${s}`,this.H=`scroll_outer_${s}`,this.U=`dflexScrollListener_${s}`,this.W=null,this.$=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.V();const{scrollLeft:o,scrollTop:u}=this.scrollContainerDOM;this.Y(o,u,!1),this.J(),i>A.K&&this.allowDynamicVisibility&&(this.$=e,this.X=new c(A.Z),this.X.setMainThreshold(this.H,this.scrollContainerRect,!1)),this.tt(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}V(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;this.scrollRect.setByPointAndDimensions(h,i,t,s);const{clientHeight:e,clientWidth:n}=this.scrollContainerDOM;if(this.scrollContainerRect.setByPointAndDimensions(0,0,e,n),!this.hasDocumentAsContainer){const{left:t,top:s}=this.scrollContainerDOM.getBoundingClientRect();this.scrollContainerRect.setByPointAndDimensions(s,t,e,n)}}J(){this.hasOverflow.setAxes(_(this.scrollRect,this.scrollContainerRect,"x"),_(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&v(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&v(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}j(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.Y(t,s,!1),i)}Y(t,s,i){this.scrollRect.top=s,this.scrollRect.left=t;const h=this.scrollRect.height-s,e=this.scrollRect.width-t;this.invisibleDistance.setBox(s,e-this.scrollContainerRect.width,h-this.scrollContainerRect.height,t),i&&null!==this.$&&this.$(this.k)}scrollTo(t,s,i){this.Y(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}st(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.U]=`${s}`:delete i.dataset[this.U]}tt(t=!0){const s=t?"addEventListener":"removeEventListener",i=this.hasDocumentAsContainer?window:this.scrollContainerDOM,h={passive:!0};if(i[s]("resize",this.animatedResizeListener,h),this.hasOverflow.isOneTruthy())return i[s]("scroll",this.animatedScrollListener,h),void this.st(t,!0);this.hasDocumentAsContainer||this.st(t,!1)}pauseListeners(t){this.W=t?1:null}it(){null!==this.q&&(this.q.destroy(),this.q=null)}setInnerThreshold(t){this.it(),this.q=new c(t),this.q.setMainThreshold(this.G,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.q.isOutThresholdByDirection(t,s,this.G,i-e,h-e)}getMaximumScrollContainerLeft(){const{left:t,width:s}=this.scrollContainerRect;return t+s+this.scrollRect.left}getMaximumScrollContainerTop(){const{top:t,height:s}=this.scrollContainerRect;return t+s+this.scrollRect.top}getElmPositionInViewport(t,s){const{top:i,left:h}=this.scrollRect;return[t-i,s-h]}isElmVisibleViewport(t,s,i,h){const[e,n]=this.getElmPositionInViewport(t,s),r=e,o=n;return!this.X.isShallowOutThreshold(this.H,r,o+h,r+i,o)}L(t,s){null!==this.W&&cancelAnimationFrame(this.W),this.W=requestAnimationFrame((()=>{t()&&s&&s(this.k),this.W=null}))}ht(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.k,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.ht()}}destroy(){this.it(),this.$=null,this.tt(!1),this.scrollContainerDOM=null}};let D=A;D.Z={horizontal:25,vertical:25},D.K=10,exports.DFlexBaseElement=p,exports.DFlexElement=y,exports.DFlexParentContainer=T,exports.DFlexScrollContainer=D;

dist/dev.js

@@ -89,2 +89,8 @@ 'use strict';
 class Box extends AbstractBox {
+  clone(box) {
+    this.top = box.top;
+    this.right = box.right;
+    this.bottom = box.bottom;
+    this.left = box.left;
+  }
   /**
@@ -269,2 +275,14 @@ * Set all directions.
   }
+  getSurroundingBox(box) {
+    const left = Math.min(box.left, this.left);
+    const top = Math.min(box.top, this.top);
+    const right = Math.max(box.right, this.right);
+    const bottom = Math.max(box.bottom, this.bottom);
+    return {
+      left,
+      top,
+      right,
+      bottom
+    };
+  }
   /**
@@ -276,10 +294,5 @@ * True when it's inside of other box.
    */
-  // isInside(box: AbstractBox): boolean {
-  //   return (
-  //     this.top >= box.top &&
-  //     this.right <= box.right &&
-  //     this.bottom <= box.bottom &&
-  //     this.left >= box.left
-  //   );
-  // }
+  isInside(box) {
+    return this.top >= box.top && this.right <= box.right && this.bottom <= box.bottom && this.left >= box.left;
+  }
   isPositionedY(box) {
@@ -493,2 +506,5 @@ return this._isUnder(box) || this._isAbove(box);
   }
+  getElmMainThreshold(rect) {
+    return this._pixels.composeBox(rect, false);
+  }
   /**
@@ -913,4 +929,3 @@ * Assign outer threshold for the container. Along with another threshold
    */
-  reconcilePosition(axis, mainAxisDirection, DOM, siblings, elmPos, operationID) {
-    const numberOfPassedElm = 1;
+  reconcilePosition(axis, mainAxisDirection, DOM, siblings, elmPos, numberOfPassedElm, maxContainerGridBoundaries, operationID) {
     if (axis === "z") {
@@ -924,3 +939,19 @@ BOTH_AXIS.forEach((_axis, i) => {
       elmPos[axis] *= mainAxisDirection;
-      this.DOMGrid[axis] += mainAxisDirection * numberOfPassedElm;
+      if (mainAxisDirection === -1) {
+        for (let i = 0; i < numberOfPassedElm; i += 1) {
+          this.DOMGrid.x -= 1;
+          if (this.DOMGrid.x < 0) {
+            this.DOMGrid.x = maxContainerGridBoundaries.x;
+            this.DOMGrid.y -= 1;
+          }
+        }
+      } else {
+        for (let i = 0; i < numberOfPassedElm; i += 1) {
+          this.DOMGrid.x += 1;
+          if (this.DOMGrid.x > maxContainerGridBoundaries.x) {
+            this.DOMGrid.x = 0;
+            this.DOMGrid.y += 1;
+          }
+        }
+      }
     }
@@ -1002,3 +1033,3 @@ this._pushToTranslateHistory(axis, operationID);
       initialPosition: this._initialPosition.getInstance(),
-      rect: this.rect.getRect(),
+      rect: this.rect,
       hasTransformedFromOrigin: this.hasTransformedFromOrigin(),
@@ -1041,2 +1072,3 @@ hasPendingTransformation: this.hasPendingTransform,
     this.id = id;
+    this._gridIndex = new PointNum(-1, -1);
     this.grid = new PointNum(-1, -1);
@@ -1057,13 +1089,20 @@ this.originLength = originLength;
     if (isNewRow) {
-      this.grid.y += 1;
-      this.grid.x = 0;
+      this._gridIndex.y += 1;
+      this._gridIndex.x = 0;
       this._boundariesByRow.setBox(0, 0, 0, 0);
     } else {
-      this.grid.x += 1;
+      this._gridIndex.x += 1;
     }
+    if (this._gridIndex.x > this.grid.x) {
+      this.grid.x = this._gridIndex.x;
+    }
+    if (this._gridIndex.y > this.grid.y) {
+      this.grid.y = this._gridIndex.y;
+    }
     $.assignBiggestBox(rect);
+    return this._gridIndex;
   }
   // TODO: How to unregister element from the edge of the container? Currently
   // we reset and accumulate, it's inefficient. removeElmFromEdge() is a better.
-  registerNewElm(rect, unifiedContainerDimensions) {
+  register(rect, unifiedContainerDimensions) {
     if (this._siblingBoundaries) {
@@ -1079,7 +1118,7 @@ this._siblingBoundaries.assignBiggestBox(rect);
     }
-    this._addNewElmToGridIndicator(rect);
+    const gridIndex = this._addNewElmToGridIndicator(rect);
     const $ = this._siblingBoundaries;
     const uni = unifiedContainerDimensions;
     if (!uni) {
-      return;
+      return gridIndex;
     }
@@ -1094,2 +1133,3 @@ const $height = $.bottom - $.top;
     }
+    return gridIndex;
   }
@@ -1109,2 +1149,3 @@ /**
   resetIndicators(originLength) {
+    this._gridIndex.setAxes(-1, -1);
     this.grid.setAxes(-1, -1);
@@ -1111,0 +1152,0 @@ this.originLength = originLength;

dist/dflex-core.js

@@ -1,1 +0,1 @@
-"use strict";class t{constructor(t,s){this.x=t,this.y=s,Object.seal(this)}}class s extends t{setAxes(t,s){this.x=t,this.y=s}clone(t){this.setAxes(t.x,t.y)}getInstance(){return{x:this.x,y:this.y}}isInstanceEqual(t){return this.x===t.x&&this.y===t.y}isEqual(t,s){return this.x===t&&this.y===s}isNotEqual(t,s){return this.x!==t||this.y!==s}}class i{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class h extends i{setBox(t,s,i,h){return this.top=t,this.right=s,this.bottom=i,this.left=h,this}getBox(){return{top:this.top,right:this.right,bottom:this.bottom,left:this.left}}setByAxis(t,s,i){if("x"===t)this.left=s,this.right=i;else this.top=s,this.bottom=i}setOne(t,s,i){if("x"===t)-1===s?this.left=i:this.right=i;else-1===s?this.top=i:this.bottom=i}getOne(t,s){return"x"===t?-1===s?this.left:this.right:-1===s?this.top:this.bottom}setPositionInstance(t){this.top=t.y,this.left=t.x}setPosition(t,s){this.top=s,this.left=t}getPosition(){return{x:this.left,y:this.top}}}class e extends h{constructor(t,s,i,h){super(t,s,i,h),Object.seal(this)}setFalsy(){return this.setBox(!1,!1,!1,!1),this}isOneTruthyByAxis(t){return"x"===t?this.left||this.right:this.top||this.bottom}isOneTruthy(){return this.left||this.right||this.top||this.bottom}}class n extends h{t(t){return this.top>=t.bottom}i(t){return this.bottom<=t.top}h(t){return this.right<=t.left}o(t){return this.left>=t.right}isNotIntersect(t){return this.t(t)||this.h(t)||this.i(t)||this.o(t)}isIntersect(t){return!this.isNotIntersect(t)}isPositionedY(t){return this.t(t)||this.i(t)}assignBiggestBox(t){const{top:s,left:i,right:h,bottom:e}=t;i<this.left&&(this.left=i),s<this.top&&(this.top=s),h>this.right&&(this.right=h),e>this.bottom&&(this.bottom=e)}}class r extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t,Object.seal(this)}setByPointAndDimensions(t,s,i,h){return this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i,this}setAxis(t,s){if("x"===t)this.left=s,this.right=this.width+s;else this.top=s,this.bottom=this.height+s;return this}setAxes(t,s){return this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s,this}getRect(){return{...this.getBox(),height:this.height,width:this.width}}}class o extends s{increase(t){this.x+=t.x,this.y+=t.y}composeBox(t,s){const{top:i,left:h,bottom:e,right:r}=t;return s?new n(i+this.y,r-this.x,e-this.y,h+this.x):new n(i-this.y,r+this.x,e+this.y,h-this.x)}onSameAxis(t,s){return"y"===t?s.x===this.x:s.y===this.y}}class l extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class c{constructor(t){this.l=t,this.thresholds={},this.isOut={}}u({width:t,height:s}){const i=Math.round(this.l.horizontal*t/100),h=Math.round(this.l.vertical*s/100);this.g=new o(i,h)}p(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t]=new e(!1,!1,!1,!1)}m(t,s){const i=`${s}`;this.thresholds[i]?this.thresholds[s].assignBiggestBox(this.thresholds[t]):this.p(i,this.thresholds[t],!1)}setMainThreshold(t,s,i){this.u(s),this.p(t,s,i)}updateMainThreshold(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t].setFalsy()}setContainerThreshold(t,s,i,h,e){this.p(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.p(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.m(s,i)}isOutThresholdByAxis(t,s,i,h){const{left:e,right:n,top:r,bottom:o}=this.thresholds[s];return"x"===t&&this.isOut[s].setByAxis(t,i<e,h>n),"y"===t&&this.isOut[s].setByAxis(t,i<r,h>o),this.isOut[s].isOneTruthyByAxis(t)}isOutThresholdByDirection(t,s,i,h,e){const{left:n,right:r,top:o,bottom:l}=this.thresholds[i],c="x"===t?-1===s?h<n:e>r:-1===s?h<o:e>l;return this.isOut[i].setOne(t,s,c),c}isOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return this.isOut[t].setBox(s<n.top,i>n.right,h>n.bottom,e<n.left),this.isOut[t].isOneTruthy()}isShallowOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return s<n.top||i>n.right||h>n.bottom||e<n.left}destroy(){Object.keys(this.thresholds).forEach((t=>{delete this.thresholds[t]})),Object.keys(this.isOut).forEach((t=>{delete this.isOut[t]}))}}const u=Object.freeze(["x","y"]);let a=new WeakMap;const d=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function g(t,s){const i=t.getPropertyValue(s).match(d);return i?parseFloat(i[1]):0}function x(t){const s=function(t){if(a.has(t))return a.get(t);const s=getComputedStyle(t);return a.set(t,s),s}(t);return{width:g(s,"width"),height:g(s,"height")}}const f=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class p{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new o(0,0)),this.T=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(f[s],`${i}`),this.T.add(s)):t.setAttribute(f[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(f[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}p.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends p{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...i}),this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=null,this.I=new o(0,0),this.rect=new r(0,0,0,0),this.DOMGrid=new o(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.I.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this.O)return this.O;const{width:s,height:i}=x(t);return this.O=new o(s,i),this.O}getInitialPosition(){return this.I}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this._(t),this.hasPendingTransform=!1))}_(t,s){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),s&&s(),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}assignNewIndex(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}v(t,s,i){t[i]="",t[s]=this.id}A(t,s){const i={ID:s,axis:t,translate:this.translate.getInstance()};Array.isArray(this.D)||(this.D=[]),this.D.push(i)}S(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this._(t);this.isVisible?this._(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.I.x+this.translate.x,this.I.y+this.translate.y),this.S(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),{oldIndex:e,newIndex:n}}reconcilePosition(t,s,i,h,e,n){"z"===t?u.forEach(((t,i)=>{const h=0===i?1===s?-1:1:s;e[t]*=h,this.DOMGrid[t]+=1*s})):(e[t]*=s,this.DOMGrid[t]+=1*s),this.A(t,n);const{oldIndex:r,newIndex:o}=this.P(i,e,!1,1*s);this.v(h,o,r)}restorePosition(t){this._(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this._(t)}rollBackPosition(t,s){if(!Array.isArray(this.D))return;const{length:i}=this.D;if(!(this.D[i-1].ID===s))return;const{translate:h,axis:e}=this.D.pop(),n={x:h.x-this.translate.x,y:h.y-this.translate.y};let r=0;"z"===e?(r=n.x>0||n.y>0?1:-1,this.DOMGrid.increase({x:r,y:r})):(r=n[e]>0?1:-1,this.DOMGrid[e]+=r),this.P(t,n,!0,r),0!==this.D.length?this.rollBackPosition(t,s):this.D=void 0}hasTransformedFromOrigin(){return this.I.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.D=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,function(t){t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style")}(t),this.initElmRect(t),this.DOMGrid.setAxes(0,0)}getSerializedInstance(){return{type:m.getType(),version:3,id:this.id,grid:this.DOMGrid,translate:this.translate instanceof o?this.translate:null,order:this.VDOMOrder,initialPosition:this.I.getInstance(),rect:this.rect.getRect(),hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=p.transform;class y extends w{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.rect["x"===i?"left":"top"];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.rect.right:s.rect.bottom;return t[i]-h}getRectDiff(t,s){const i=y.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}class T{constructor(t,s,i){this.id=i,this.grid=new o(-1,-1),this.originLength=s,this.N=new n(0,0,0,0),this.B=null,this.R(t),this.lastElmPosition=null}R(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.C=new r(i,h,e,s)}F(t){const s=this.N;s.isPositionedY(t)?(this.grid.y+=1,this.grid.x=0,this.N.setBox(0,0,0,0)):this.grid.x+=1,s.assignBiggestBox(t)}registerNewElm(t,s){this.B?this.B.assignBiggestBox(t):this.B=new n(t.top,t.right,t.bottom,t.left),this.F(t);const i=this.B,h=s;if(!h)return;const e=i.bottom-i.top,r=i.right-i.left;h.height<e&&(h.height=e),h.width<r&&(h.width=e)}getBoundaries(){return this.B||this.C.getBox()}resetIndicators(t){this.grid.setAxes(-1,-1),this.originLength=t,this.N.setBox(0,0,0,0),this.B=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new o(t.x,t.y)}}T.OUT_OF_RANGE=-1;const O=/(auto|scroll|overlay)/;function b(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;try{do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body))}catch(t){}finally{i=0}return null}(t,(t=>{if(h&&"static"===getComputedStyle(t).getPropertyValue("position"))return!1;const i=getComputedStyle(t),e=t.getBoundingClientRect(),n=i.getPropertyValue("overflow-y");if(O.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!O.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function I(t){return"x"===t?"width":"height"}function _(t,s,i){const h=I(i);return t[h]>s[h]}function v(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.L.call(this,this.M.bind(this),this.j)},this.animatedResizeListener=()=>{this.L.call(this,this.$.bind(this),null)},this.hasOverflow=new l(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new r(0,0,0,0),this.scrollContainerRect=new r(0,0,0,0),this.allowDynamicVisibility=!1,this.V=null,this.q=null,this.X=s,this.k=`scroll_inner_${s}`,this.G=`scroll_outer_${s}`,this.H=`dflexScrollListener_${s}`,this.U=null,this.j=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=b(t),this.$();const{scrollLeft:o,scrollTop:u}=this.scrollContainerDOM;this.W(o,u,!1),this.Y(),i>A.J&&this.allowDynamicVisibility&&(this.j=e,this.q=new c(A.K),this.q.setMainThreshold(this.G,this.scrollContainerRect,!1)),this.Z(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}$(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;this.scrollRect.setByPointAndDimensions(h,i,t,s);const{clientHeight:e,clientWidth:n}=this.scrollContainerDOM;if(this.scrollContainerRect.setByPointAndDimensions(0,0,e,n),!this.hasDocumentAsContainer){const{left:t,top:s}=this.scrollContainerDOM.getBoundingClientRect();this.scrollContainerRect.setByPointAndDimensions(s,t,e,n)}}Y(){this.hasOverflow.setAxes(_(this.scrollRect,this.scrollContainerRect,"x"),_(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&v(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&v(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}M(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.W(t,s,!1),i)}W(t,s,i){this.scrollRect.top=s,this.scrollRect.left=t;const h=this.scrollRect.height-s,e=this.scrollRect.width-t;this.invisibleDistance.setBox(s,e-this.scrollContainerRect.width,h-this.scrollContainerRect.height,t),i&&null!==this.j&&this.j(this.X)}scrollTo(t,s,i){this.W(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}tt(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.H]=`${s}`:delete i.dataset[this.H]}Z(t=!0){const s=t?"addEventListener":"removeEventListener",i=this.hasDocumentAsContainer?window:this.scrollContainerDOM,h={passive:!0};if(i[s]("resize",this.animatedResizeListener,h),this.hasOverflow.isOneTruthy())return i[s]("scroll",this.animatedScrollListener,h),void this.tt(t,!0);this.hasDocumentAsContainer||this.tt(t,!1)}pauseListeners(t){this.U=t?1:null}st(){null!==this.V&&(this.V.destroy(),this.V=null)}setInnerThreshold(t){this.st(),this.V=new c(t),this.V.setMainThreshold(this.k,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.V.isOutThresholdByDirection(t,s,this.k,i-e,h-e)}getMaximumScrollContainerLeft(){const{left:t,width:s}=this.scrollContainerRect;return t+s+this.scrollRect.left}getMaximumScrollContainerTop(){const{top:t,height:s}=this.scrollContainerRect;return t+s+this.scrollRect.top}getElmPositionInViewport(t,s){const{top:i,left:h}=this.scrollRect;return[t-i,s-h]}isElmVisibleViewport(t,s,i,h){const[e,n]=this.getElmPositionInViewport(t,s),r=e,o=n;return!this.q.isShallowOutThreshold(this.G,r,o+h,r+i,o)}L(t,s){null!==this.U&&cancelAnimationFrame(this.U),this.U=requestAnimationFrame((()=>{t()&&s&&s(this.X),this.U=null}))}it(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.X,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.it()}}destroy(){this.st(),this.j=null,this.Z(!1),this.scrollContainerDOM=null}};let D=A;D.K={horizontal:25,vertical:25},D.J=10,exports.DFlexBaseElement=p,exports.DFlexElement=y,exports.DFlexParentContainer=T,exports.DFlexScrollContainer=D;
+"use strict";class t{constructor(t,s){this.x=t,this.y=s,Object.seal(this)}}class s extends t{setAxes(t,s){this.x=t,this.y=s}clone(t){this.setAxes(t.x,t.y)}getInstance(){return{x:this.x,y:this.y}}isInstanceEqual(t){return this.x===t.x&&this.y===t.y}isEqual(t,s){return this.x===t&&this.y===s}isNotEqual(t,s){return this.x!==t||this.y!==s}}class i{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class h extends i{clone(t){this.top=t.top,this.right=t.right,this.bottom=t.bottom,this.left=t.left}setBox(t,s,i,h){return this.top=t,this.right=s,this.bottom=i,this.left=h,this}getBox(){return{top:this.top,right:this.right,bottom:this.bottom,left:this.left}}setByAxis(t,s,i){if("x"===t)this.left=s,this.right=i;else this.top=s,this.bottom=i}setOne(t,s,i){if("x"===t)-1===s?this.left=i:this.right=i;else-1===s?this.top=i:this.bottom=i}getOne(t,s){return"x"===t?-1===s?this.left:this.right:-1===s?this.top:this.bottom}setPositionInstance(t){this.top=t.y,this.left=t.x}setPosition(t,s){this.top=s,this.left=t}getPosition(){return{x:this.left,y:this.top}}}class e extends h{constructor(t,s,i,h){super(t,s,i,h),Object.seal(this)}setFalsy(){return this.setBox(!1,!1,!1,!1),this}isOneTruthyByAxis(t){return"x"===t?this.left||this.right:this.top||this.bottom}isOneTruthy(){return this.left||this.right||this.top||this.bottom}}class n extends h{t(t){return this.top>=t.bottom}i(t){return this.bottom<=t.top}h(t){return this.right<=t.left}o(t){return this.left>=t.right}isNotIntersect(t){return this.t(t)||this.h(t)||this.i(t)||this.o(t)}isIntersect(t){return!this.isNotIntersect(t)}getSurroundingBox(t){return{left:Math.min(t.left,this.left),top:Math.min(t.top,this.top),right:Math.max(t.right,this.right),bottom:Math.max(t.bottom,this.bottom)}}isInside(t){return this.top>=t.top&&this.right<=t.right&&this.bottom<=t.bottom&&this.left>=t.left}isPositionedY(t){return this.t(t)||this.i(t)}assignBiggestBox(t){const{top:s,left:i,right:h,bottom:e}=t;i<this.left&&(this.left=i),s<this.top&&(this.top=s),h>this.right&&(this.right=h),e>this.bottom&&(this.bottom=e)}}class r extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t,Object.seal(this)}setByPointAndDimensions(t,s,i,h){return this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i,this}setAxis(t,s){if("x"===t)this.left=s,this.right=this.width+s;else this.top=s,this.bottom=this.height+s;return this}setAxes(t,s){return this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s,this}getRect(){return{...this.getBox(),height:this.height,width:this.width}}}class o extends s{increase(t){this.x+=t.x,this.y+=t.y}composeBox(t,s){const{top:i,left:h,bottom:e,right:r}=t;return s?new n(i+this.y,r-this.x,e-this.y,h+this.x):new n(i-this.y,r+this.x,e+this.y,h-this.x)}onSameAxis(t,s){return"y"===t?s.x===this.x:s.y===this.y}}class l extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class c{constructor(t){this.l=t,this.thresholds={},this.isOut={}}u({width:t,height:s}){const i=Math.round(this.l.horizontal*t/100),h=Math.round(this.l.vertical*s/100);this.g=new o(i,h)}p(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t]=new e(!1,!1,!1,!1)}m(t,s){const i=`${s}`;this.thresholds[i]?this.thresholds[s].assignBiggestBox(this.thresholds[t]):this.p(i,this.thresholds[t],!1)}setMainThreshold(t,s,i){this.u(s),this.p(t,s,i)}updateMainThreshold(t,s,i){this.thresholds[t]=this.g.composeBox(s,i),this.isOut[t].setFalsy()}getElmMainThreshold(t){return this.g.composeBox(t,!1)}setContainerThreshold(t,s,i,h,e){this.p(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.p(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.m(s,i)}isOutThresholdByAxis(t,s,i,h){const{left:e,right:n,top:r,bottom:o}=this.thresholds[s];return"x"===t&&this.isOut[s].setByAxis(t,i<e,h>n),"y"===t&&this.isOut[s].setByAxis(t,i<r,h>o),this.isOut[s].isOneTruthyByAxis(t)}isOutThresholdByDirection(t,s,i,h,e){const{left:n,right:r,top:o,bottom:l}=this.thresholds[i],c="x"===t?-1===s?h<n:e>r:-1===s?h<o:e>l;return this.isOut[i].setOne(t,s,c),c}isOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return this.isOut[t].setBox(s<n.top,i>n.right,h>n.bottom,e<n.left),this.isOut[t].isOneTruthy()}isShallowOutThreshold(t,s,i,h,e){const n=this.thresholds[t];return s<n.top||i>n.right||h>n.bottom||e<n.left}destroy(){Object.keys(this.thresholds).forEach((t=>{delete this.thresholds[t]})),Object.keys(this.isOut).forEach((t=>{delete this.isOut[t]}))}}const u=Object.freeze(["x","y"]);let a=new WeakMap;const d=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function g(t,s){const i=t.getPropertyValue(s).match(d);return i?parseFloat(i[1]):0}function f(t){const s=function(t){if(a.has(t))return a.get(t);const s=getComputedStyle(t);return a.set(t,s),s}(t);return{width:g(s,"width"),height:g(s,"height")}}const x=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class p{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new o(0,0)),this.T=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(x[s],`${i}`),this.T.add(s)):t.setAttribute(x[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(x[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}p.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends p{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...i}),this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=null,this.I=new o(0,0),this.rect=new r(0,0,0,0),this.DOMGrid=new o(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.I.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this.O)return this.O;const{width:s,height:i}=f(t);return this.O=new o(s,i),this.O}getInitialPosition(){return this.I}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this._(t),this.hasPendingTransform=!1))}_(t,s){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),s&&s(),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}assignNewIndex(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}v(t,s,i){t[i]="",t[s]=this.id}A(t,s){const i={ID:s,axis:t,translate:this.translate.getInstance()};Array.isArray(this.D)||(this.D=[]),this.D.push(i)}S(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this._(t);this.isVisible?this._(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.I.x+this.translate.x,this.I.y+this.translate.y),this.S(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),{oldIndex:e,newIndex:n}}reconcilePosition(t,s,i,h,e,n,r,o){if("z"===t)u.forEach(((t,i)=>{const h=0===i?1===s?-1:1:s;e[t]*=h,this.DOMGrid[t]+=s*n}));else if(e[t]*=s,-1===s)for(let t=0;t<n;t+=1)this.DOMGrid.x-=1,this.DOMGrid.x<0&&(this.DOMGrid.x=r.x,this.DOMGrid.y-=1);else for(let t=0;t<n;t+=1)this.DOMGrid.x+=1,this.DOMGrid.x>r.x&&(this.DOMGrid.x=0,this.DOMGrid.y+=1);this.A(t,o);const{oldIndex:l,newIndex:c}=this.P(i,e,!1,s*n);this.v(h,c,l)}restorePosition(t){this._(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this._(t)}rollBackPosition(t,s){if(!Array.isArray(this.D))return;const{length:i}=this.D;if(!(this.D[i-1].ID===s))return;const{translate:h,axis:e}=this.D.pop(),n={x:h.x-this.translate.x,y:h.y-this.translate.y};let r=0;"z"===e?(r=n.x>0||n.y>0?1:-1,this.DOMGrid.increase({x:r,y:r})):(r=n[e]>0?1:-1,this.DOMGrid[e]+=r),this.P(t,n,!0,r),0!==this.D.length?this.rollBackPosition(t,s):this.D=void 0}hasTransformedFromOrigin(){return this.I.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.D=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,function(t){t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style")}(t),this.initElmRect(t),this.DOMGrid.setAxes(0,0)}getSerializedInstance(){return{type:m.getType(),version:3,id:this.id,grid:this.DOMGrid,translate:this.translate instanceof o?this.translate:null,order:this.VDOMOrder,initialPosition:this.I.getInstance(),rect:this.rect,hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=p.transform;class y extends w{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.rect["x"===i?"left":"top"];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.rect.right:s.rect.bottom;return t[i]-h}getRectDiff(t,s){const i=y.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}class T{constructor(t,s,i){this.id=i,this.M=new o(-1,-1),this.grid=new o(-1,-1),this.originLength=s,this.B=new n(0,0,0,0),this.N=null,this.R(t),this.lastElmPosition=null}R(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.C=new r(i,h,e,s)}F(t){const s=this.B;return s.isPositionedY(t)?(this.M.y+=1,this.M.x=0,this.B.setBox(0,0,0,0)):this.M.x+=1,this.M.x>this.grid.x&&(this.grid.x=this.M.x),this.M.y>this.grid.y&&(this.grid.y=this.M.y),s.assignBiggestBox(t),this.M}register(t,s){this.N?this.N.assignBiggestBox(t):this.N=new n(t.top,t.right,t.bottom,t.left);const i=this.F(t),h=this.N,e=s;if(!e)return i;const r=h.bottom-h.top,o=h.right-h.left;return e.height<r&&(e.height=r),e.width<o&&(e.width=r),i}getBoundaries(){return this.N||this.C.getBox()}resetIndicators(t){this.M.setAxes(-1,-1),this.grid.setAxes(-1,-1),this.originLength=t,this.B.setBox(0,0,0,0),this.N=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new o(t.x,t.y)}}T.OUT_OF_RANGE=-1;const b=/(auto|scroll|overlay)/;function O(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;try{do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body))}catch(t){}finally{i=0}return null}(t,(t=>{if(h&&"static"===getComputedStyle(t).getPropertyValue("position"))return!1;const i=getComputedStyle(t),e=t.getBoundingClientRect(),n=i.getPropertyValue("overflow-y");if(b.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!b.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function I(t){return"x"===t?"width":"height"}function _(t,s,i){const h=I(i);return t[h]>s[h]}function v(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.L.call(this,this.j.bind(this),this.$)},this.animatedResizeListener=()=>{this.L.call(this,this.V.bind(this),null)},this.hasOverflow=new l(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new r(0,0,0,0),this.scrollContainerRect=new r(0,0,0,0),this.allowDynamicVisibility=!1,this.q=null,this.X=null,this.k=s,this.G=`scroll_inner_${s}`,this.H=`scroll_outer_${s}`,this.U=`dflexScrollListener_${s}`,this.W=null,this.$=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.V();const{scrollLeft:o,scrollTop:u}=this.scrollContainerDOM;this.Y(o,u,!1),this.J(),i>A.K&&this.allowDynamicVisibility&&(this.$=e,this.X=new c(A.Z),this.X.setMainThreshold(this.H,this.scrollContainerRect,!1)),this.tt(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}V(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;this.scrollRect.setByPointAndDimensions(h,i,t,s);const{clientHeight:e,clientWidth:n}=this.scrollContainerDOM;if(this.scrollContainerRect.setByPointAndDimensions(0,0,e,n),!this.hasDocumentAsContainer){const{left:t,top:s}=this.scrollContainerDOM.getBoundingClientRect();this.scrollContainerRect.setByPointAndDimensions(s,t,e,n)}}J(){this.hasOverflow.setAxes(_(this.scrollRect,this.scrollContainerRect,"x"),_(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&v(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&v(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}j(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.Y(t,s,!1),i)}Y(t,s,i){this.scrollRect.top=s,this.scrollRect.left=t;const h=this.scrollRect.height-s,e=this.scrollRect.width-t;this.invisibleDistance.setBox(s,e-this.scrollContainerRect.width,h-this.scrollContainerRect.height,t),i&&null!==this.$&&this.$(this.k)}scrollTo(t,s,i){this.Y(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}st(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.U]=`${s}`:delete i.dataset[this.U]}tt(t=!0){const s=t?"addEventListener":"removeEventListener",i=this.hasDocumentAsContainer?window:this.scrollContainerDOM,h={passive:!0};if(i[s]("resize",this.animatedResizeListener,h),this.hasOverflow.isOneTruthy())return i[s]("scroll",this.animatedScrollListener,h),void this.st(t,!0);this.hasDocumentAsContainer||this.st(t,!1)}pauseListeners(t){this.W=t?1:null}it(){null!==this.q&&(this.q.destroy(),this.q=null)}setInnerThreshold(t){this.it(),this.q=new c(t),this.q.setMainThreshold(this.G,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.q.isOutThresholdByDirection(t,s,this.G,i-e,h-e)}getMaximumScrollContainerLeft(){const{left:t,width:s}=this.scrollContainerRect;return t+s+this.scrollRect.left}getMaximumScrollContainerTop(){const{top:t,height:s}=this.scrollContainerRect;return t+s+this.scrollRect.top}getElmPositionInViewport(t,s){const{top:i,left:h}=this.scrollRect;return[t-i,s-h]}isElmVisibleViewport(t,s,i,h){const[e,n]=this.getElmPositionInViewport(t,s),r=e,o=n;return!this.X.isShallowOutThreshold(this.H,r,o+h,r+i,o)}L(t,s){null!==this.W&&cancelAnimationFrame(this.W),this.W=requestAnimationFrame((()=>{t()&&s&&s(this.k),this.W=null}))}ht(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.k,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.ht()}}destroy(){this.it(),this.$=null,this.tt(!1),this.scrollContainerDOM=null}};let D=A;D.Z={horizontal:25,vertical:25},D.K=10,exports.DFlexBaseElement=p,exports.DFlexElement=y,exports.DFlexParentContainer=T,exports.DFlexScrollContainer=D;

package.json

 {
   "name": "@dflex/core-instance",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "description": "Core instance is a DFlex package for interactive DOM element",
@@ -21,3 +21,3 @@ "author": "Jalal Maskoun",
   "repository": "https://github.com/dflex-js/dflex",
-  "homepage": "https://github.com/dflex-js/dflex/tree/master/packages/core-instance",
+  "homepage": "https://github.com/dflex-js/dflex/tree/main/packages/core-instance",
   "license": "MIT",
@@ -30,3 +30,3 @@ "files": [
   "devDependencies": {
-    "@dflex/utils": "^3.8.2"
+    "@dflex/utils": "^3.8.3"
   },
@@ -33,0 +33,0 @@ "keywords": [

types/Container/DFlexParentContainer.d.ts

@@ -9,2 +9,3 @@ import { PointNum, AbstractBox } from "@dflex/utils";
     /** Numbers of total columns and rows each container has.  */
+    private _gridIndex;
     grid: PointNum;
@@ -26,3 +27,3 @@ /**
     private _addNewElmToGridIndicator;
-    registerNewElm(rect: AbstractBox, unifiedContainerDimensions?: Dimensions): void;
+    register(rect: AbstractBox, unifiedContainerDimensions?: Dimensions): PointNum;
     /**
@@ -29,0 +30,0 @@ * If container doesn't have siblings then it returns the container rect.

types/Element/DFlexCoreElement.d.ts

@@ -78,3 +78,3 @@ import { BoxRect, BoxRectAbstract, PointNum } from "@dflex/utils";
      */
-    reconcilePosition(axis: Axes, mainAxisDirection: Direction, DOM: HTMLElement, siblings: string[], elmPos: PointNum, operationID: string): void;
+    reconcilePosition(axis: Axes, mainAxisDirection: Direction, DOM: HTMLElement, siblings: string[], elmPos: PointNum, numberOfPassedElm: number, maxContainerGridBoundaries: PointNum, operationID: string): void;
     restorePosition(DOM: HTMLElement): void;
@@ -81,0 +81,0 @@ assignNewPosition(DOM: HTMLElement, t: PointNum): void;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144472

increased by3.42%

Lines of code

3432

increased by2.75%

No dependency changes