@dflex/core-instance - npm Package Compare versions

Comparing version 3.8.3 to 3.8.4

./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{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;
+"use strict";class t{constructor(t,s){this.x=t,this.y=s}}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)}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)}}let r=new WeakMap;const o=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function l(t,s){const i=t.getPropertyValue(s).match(o);return i?parseFloat(i[1]):0}function c(t){const s=function(t){if(r.has(t))return r.get(t);const s=getComputedStyle(t);return r.set(t,s),s}(t);return{width:l(s,"width"),height:l(s,"height")}}class u extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t}setByPointAndDimensions(t,s,i,h){this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i}setAxes(t,s){this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s}getDimensionDiff(t,s){const i=function(t){return"x"===t?"width":"height"}(t);return this[i]-s[i]}getPositionDiff(t,s){const i=function(t){return"x"===t?"left":"top"}(t);return this[i]-s[t]}}class a 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 d extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class g{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 a(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 f=Object.freeze(["x","y"]);const p=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class x{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!1,this.translate=new a(0,0),this.T=new Set}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(p[s],`${i}`),this.T.add(s)):t.setAttribute(p[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(p[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}x.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends x{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder={...s},this.DOMOrder={...s},this.keys={...i},this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=void 0,this._=null,this.v=new a(0,0),this.rect=new u(0,0,0,0),this.DOMGrid=new a(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.v.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this._)return this._;const{width:s,height:i}=c(t);return this._=new a(s,i),this._}getInitialPosition(){return this.v}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this.I(t),this.hasPendingTransform=!1))}I(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){t[s]=this.id}D(t,s,i){const h={axes:t,numberOfPassedElm:i,translate:this.translate.getInstance()};void 0===this.O&&(this.O=new Map),this.O.has(s)||this.O.set(s,[]),this.O.get(s).push(h)}A(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this.I(t);this.isVisible?this.I(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.v.x+this.translate.x,this.v.y+this.translate.y),this.A(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),[e,n]}S(t,s,i){if(-1!==t)for(let t=0;t<s;t+=1)this.DOMGrid.x+=1,this.DOMGrid.x>i.x&&(this.DOMGrid.x=0,this.DOMGrid.y+=1);else for(let t=0;t<s;t+=1)this.DOMGrid.x-=1,this.DOMGrid.x<0&&(this.DOMGrid.x=i.x,this.DOMGrid.y-=1)}reconcilePosition(t,s,i,h,e,n,r,o){let l;const c={x:1===s?-1:1,y:s};"z"===t?l=f:(l=[t],c[t]=s),l.forEach((t=>{e[t]*=c[t],this.S(c[t],n,r)})),this.D(t,o,n);const u=s*n,[a,d]=this.P(i,e,!1,u);h[a]="",h[d]=this.id}restorePosition(t){this.I(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this.I(t)}rollBackPosition(t,s){if(void 0===this.O||!this.O.has(s))return;const i=this.O.get(s),{translate:h,axes:e,numberOfPassedElm:n}=i.pop(),r={x:h.x-this.translate.x,y:h.y-this.translate.y};let o=0;const l={x:r.x>0?1:-1,y:r.y>0?1:-1};if("z"===e?(o=r.x>0||r.y>0?1:-1,this.DOMGrid.increase({x:l.x*n,y:l.y*n})):(o=l[e]*n,this.DOMGrid[e]+=o),this.P(t,r,!0,o),0===i.length)return this.O.delete(s),void(0===this.O.size&&(this.O=void 0));this.rollBackPosition(t,s)}hasTransformedFromOrigin(){return this.v.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.O=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 a?this.translate:null,order:this.VDOMOrder,initialPosition:this.v.getInstance(),rect:this.rect,hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=x.transform;class y extends w{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}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}const T=/(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(T.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!T.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function _(t){return"x"===t?"width":"height"}function b(t,s,i){const h=_(i);return t[h]>s[h]}function v(t,s,i){const h=_(i);return t[h]/2>s[h]}const I=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.M.call(this,this.B.bind(this),this.C)},this.animatedResizeListener=()=>{this.M.call(this,this.N.bind(this),null)},this.hasOverflow=new d(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new u(0,0,0,0),this.scrollContainerRect=new u(0,0,0,0),this.allowDynamicVisibility=!1,this.F=null,this.L=null,this.R=s,this.$=`scroll_inner_${s}`,this.G=`scroll_outer_${s}`,this.V=`dflexScrollListener_${s}`,this.q=null,this.C=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.N();const{scrollLeft:r,scrollTop:o}=this.scrollContainerDOM;this.X(r,o,!1),this.j(),i>I.k&&this.allowDynamicVisibility&&(this.C=e,this.L=new g(I.H),this.L.setMainThreshold(this.G,this.scrollContainerRect,!1)),this.U(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}N(){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(b(this.scrollRect,this.scrollContainerRect,"x"),b(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)}B(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.X(t,s,!1),i)}X(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.C&&this.C(this.R)}scrollTo(t,s,i){this.X(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}W(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.V]=`${s}`:delete i.dataset[this.V]}U(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.W(t,!0);this.hasDocumentAsContainer||this.W(t,!1)}pauseListeners(t){this.q=t?1:null}Y(){null!==this.F&&(this.F.destroy(),this.F=null)}setInnerThreshold(t){this.Y(),this.F=new g(t),this.F.setMainThreshold(this.$,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.F.isOutThresholdByDirection(t,s,this.$,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.L.isShallowOutThreshold(this.G,r,o+h,r+i,o)}M(t,s){null!==this.q&&cancelAnimationFrame(this.q),this.q=requestAnimationFrame((()=>{t()&&s&&s(this.R),this.q=null}))}J(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:I.getType(),version:3,key:this.R,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.J()}}destroy(){this.Y(),this.C=null,this.U(!1),this.scrollContainerDOM=null}};let D=I;D.H={horizontal:25,vertical:25},D.k=10,exports.DFlexBaseElement=x,exports.DFlexElement=y,exports.DFlexParentContainer=class{constructor(t,s,i){this.id=i,this.K=new a(-1,-1),this.grid=new a(-1,-1),this.originLength=s,this.Z=new n(0,0,0,0),this.tt=null,this.st(t),this.lastElmPosition=null}st(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.it=new u(i,h,e,s)}ht(t){const s=this.Z;return s.isPositionedY(t)?(this.K.y+=1,this.K.x=0,this.Z.setBox(0,0,0,0)):this.K.x+=1,this.K.x>this.grid.x&&(this.grid.x=this.K.x),this.K.y>this.grid.y&&(this.grid.y=this.K.y),s.assignBiggestBox(t),this.K}register(t,s){this.tt?this.tt.assignBiggestBox(t):this.tt=new n(t.top,t.right,t.bottom,t.left);const i=this.ht(t),h=this.tt,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}extendGrid(t){this.grid[t]+=1}reduceGrid(t){this.grid[t]-=1}getBoundaries(){return this.tt||this.it.getBox()}resetIndicators(t){this.K.setAxes(-1,-1),this.grid.setAxes(-1,-1),this.originLength=t,this.Z.setBox(0,0,0,0),this.tt=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new a(t.x,t.y)}},exports.DFlexScrollContainer=D;

dist/dev.js

@@ -7,3 +7,5 @@ 'use strict';
     this.y = y;
-    Object.seal(this);
+    {
+      Object.seal(this);
+    }
   }
@@ -209,3 +211,5 @@ }
     super(top, right, bottom, left);
-    Object.seal(this);
+    {
+      Object.seal(this);
+    }
   }
@@ -317,2 +321,58 @@ /**
 
+const log = {};
+function warnOnce(caller, ...message) {
+  if (!log[caller]) {
+    log[caller] = true;
+    console.warn(...message);
+  }
+}
+
+function updateELmDOMGrid(DOM, grid) {
+  DOM.dataset.devX = `${grid.x}`;
+  DOM.dataset.devY = `${grid.y}`;
+}
+
+const WIDTH = "width";
+const HEIGHT = "height";
+const LEFT = "left";
+const TOP = "top";
+function getDimensionTypeByAxis(axis) {
+  return axis === "x" ? WIDTH : HEIGHT;
+}
+function getDirectionTypeByAxis(axis) {
+  return axis === "x" ? LEFT : TOP;
+}
+
+let computedStyleMap = /* @__PURE__ */ new WeakMap();
+function getElmComputedStyle(DOM) {
+  if (computedStyleMap.has(DOM)) {
+    return computedStyleMap.get(DOM);
+  }
+  const computedStyle = getComputedStyle(DOM);
+  computedStyleMap.set(DOM, computedStyle);
+  return computedStyle;
+}
+const CSS_VAL_REGEX = /^([0-9]*\.[0-9]*|[0-9]*)(px)$/;
+function getComputedDimension(computedStyle, dimension) {
+  const computedUnit = computedStyle.getPropertyValue(dimension);
+  const match = computedUnit.match(CSS_VAL_REGEX);
+  return match ? parseFloat(match[1]) : 0;
+}
+function getElmComputedDimensions(DOM) {
+  const computedStyle = getElmComputedStyle(DOM);
+  {
+    const computedWidth = computedStyle.getPropertyValue("width");
+    const computedHeight = computedStyle.getPropertyValue("height");
+    if (computedWidth.includes("%") || computedHeight.includes("%")) {
+      warnOnce(
+        "getElementStyle",
+        "Element cannot have a percentage width and/or height.If you are expecting the element to cross multiple scroll containers, then this will cause unexpected dimension when the element is cloned."
+      );
+    }
+  }
+  const width = getComputedDimension(computedStyle, "width");
+  const height = getComputedDimension(computedStyle, "height");
+  return { width, height };
+}
+
 class BoxRect extends BoxNum {
@@ -331,3 +391,5 @@ /**
     this.height = bottom - top;
-    Object.seal(this);
+    {
+      Object.seal(this);
+    }
   }
@@ -349,29 +411,6 @@ /**
     this.bottom = top + height;
-    return this;
   }
   /**
-   * Update the box offset by axis.
+   * Update the box point position.
    *
-   * @param axis
-   * @param value
-   * @returns
-   */
-  setAxis(axis, value) {
-    switch (axis) {
-      case "x": {
-        this.left = value;
-        this.right = this.width + value;
-        break;
-      }
-      default: {
-        this.top = value;
-        this.bottom = this.height + value;
-        break;
-      }
-    }
-    return this;
-  }
-  /**
-   * Update the box offset.
-   *
    * @param x
@@ -386,15 +425,25 @@ * @param y
     this.bottom = this.height + y;
-    return this;
   }
   /**
+   * Gets the width/height difference between two boxes based on axis.
    *
+   * @param axis
+   * @param box
    * @returns
    */
-  getRect() {
-    return {
-      ...this.getBox(),
-      height: this.height,
-      width: this.width
-    };
+  getDimensionDiff(axis, box) {
+    const dimensionType = getDimensionTypeByAxis(axis);
+    return this[dimensionType] - box[dimensionType];
   }
+  /**
+   * Gets the  left/top difference between two points based on axis.
+   *
+   * @param axis
+   * @param point
+   * @returns
+   */
+  getPositionDiff(axis, point) {
+    const directionType = getDirectionTypeByAxis(axis);
+    return this[directionType] - point[axis];
+  }
 }
@@ -631,42 +680,2 @@
 
-const log = {};
-function warnOnce(caller, ...message) {
-  if (!log[caller]) {
-    log[caller] = true;
-    console.warn(...message);
-  }
-}
-
-let computedStyleMap = /* @__PURE__ */ new WeakMap();
-function getElmComputedStyle(DOM) {
-  if (computedStyleMap.has(DOM)) {
-    return computedStyleMap.get(DOM);
-  }
-  const computedStyle = getComputedStyle(DOM);
-  computedStyleMap.set(DOM, computedStyle);
-  return computedStyle;
-}
-const CSS_VAL_REGEX = /^([0-9]*\.[0-9]*|[0-9]*)(px)$/;
-function getComputedDimension(computedStyle, dimension) {
-  const computedUnit = computedStyle.getPropertyValue(dimension);
-  const match = computedUnit.match(CSS_VAL_REGEX);
-  return match ? parseFloat(match[1]) : 0;
-}
-function getElmComputedDimensions(DOM) {
-  const computedStyle = getElmComputedStyle(DOM);
-  {
-    const computedWidth = computedStyle.getPropertyValue("width");
-    const computedHeight = computedStyle.getPropertyValue("height");
-    if (computedWidth.includes("%") || computedHeight.includes("%")) {
-      warnOnce(
-        "getElementStyle",
-        "Element cannot have a percentage width and/or height.If you are expecting the element to cross multiple scroll containers, then this will cause unexpected dimension when the element is cloned."
-      );
-    }
-  }
-  const width = getComputedDimension(computedStyle, "width");
-  const height = getComputedDimension(computedStyle, "height");
-  return { width, height };
-}
-
 const MAX_LOOP_ELEMENTS_TO_WARN = 49;
@@ -726,14 +735,5 @@ function getParentElm(baseElement, cb) {
     this.id = id;
-    this.isPaused = true;
-  }
-  /**
-   * Initialize the translate AxesCoordinates as part of abstract instance and
-   * necessary for darg only movement.
-   */
-  initTranslate() {
-    if (!this.translate) {
-      this.translate = new PointNum(0, 0);
-    }
+    this.isPaused = false;
+    this.translate = new PointNum(0, 0);
     this._hasAttribute = /* @__PURE__ */ new Set();
-    this.isPaused = false;
   }
@@ -773,2 +773,18 @@ setAttribute(DOM, key, value) {
 }
+function assertGridBoundaries(id, DOMGrid, maxContainerGridBoundaries) {
+  if (DOMGrid.x < 0 || DOMGrid.y < 0) {
+    throw new Error(
+      `assertGridBoundaries: DOMGrid for ${id} element can't be below zero. Found ${JSON.stringify(
+        DOMGrid
+      )}`
+    );
+  }
+  if (DOMGrid.x > maxContainerGridBoundaries.x || DOMGrid.y > maxContainerGridBoundaries.y) {
+    throw new Error(
+      `assertGridBoundaries: DOMGrid for ${id} element can't be above grid container boundaries. Found ${JSON.stringify(
+        DOMGrid
+      )} for container ${JSON.stringify(maxContainerGridBoundaries)}.`
+    );
+  }
+}
 const _DFlexCoreElement = class extends DFlexBaseElement {
@@ -778,5 +794,5 @@ constructor(eleWithPointer) {
     super(id);
-    this.VDOMOrder = Object.seal({ ...order });
-    this.DOMOrder = Object.seal({ ...order });
-    this.keys = Object.seal({ ...keys });
+    this.VDOMOrder = { ...order };
+    this.DOMOrder = { ...order };
+    this.keys = { ...keys };
     this.depth = depth;
@@ -788,2 +804,3 @@ this.readonly = readonly;
     this.hasPendingTransform = false;
+    this._translateHistory = void 0;
     this._computedDimensions = null;
@@ -793,2 +810,5 @@ this._initialPosition = new PointNum(0, 0);
     this.DOMGrid = new PointNum(0, 0);
+    {
+      Object.seal(this);
+    }
   }
@@ -822,6 +842,2 @@ static getType() {
   }
-  resume(DOM) {
-    this.initTranslate();
-    this.initElmRect(DOM);
-  }
   changeVisibility(DOM, isVisible) {
@@ -856,50 +872,39 @@ if (isVisible === this.isVisible) {
     {
-      DOM.dataset.x = `${this.DOMGrid.x}`;
-      DOM.dataset.y = `${this.DOMGrid.y}`;
+      updateELmDOMGrid(DOM, this.DOMGrid);
     }
   }
-  assignNewIndex(branchIDsOrder, newIndex) {
-    if (newIndex < 0 || newIndex > branchIDsOrder.length - 1) {
-      {
-        console.error(
-          `Illegal Attempt: Received an index:${newIndex} on siblings list:${branchIDsOrder.length - 1}.
-`
+  assignNewIndex(siblings, newIndex) {
+    {
+      if (newIndex < 0 || newIndex > siblings.length - 1) {
+        throw new Error(
+          `assignNewIndex: new index: ${newIndex} is outside siblings bound ${JSON.stringify(
+            siblings
+          )}`
         );
       }
-      return;
-    }
-    if (branchIDsOrder[newIndex].length > 0) {
-      {
-        console.error(
-          "Illegal Attempt: Colliding in positions.\n",
-          `Element id: ${this.id}
-`,
-          `Collided at index: ${newIndex}
-`,
-          `Siblings list: ${branchIDsOrder}
-`
+      if (siblings[newIndex].length > 0) {
+        throw new Error(
+          `assignNewIndex: new index should occupy empty element at index: ${newIndex} but found ${siblings[newIndex]}`
         );
       }
-      return;
     }
-    branchIDsOrder[newIndex] = this.id;
+    siblings[newIndex] = this.id;
   }
-  _leaveToNewIndex(branchIDsOrder, newIndex, oldIndex) {
-    branchIDsOrder[oldIndex] = "";
-    branchIDsOrder[newIndex] = this.id;
-  }
-  _pushToTranslateHistory(axis, operationID) {
+  _pushToTranslateHistory(axes, cycleID, numberOfPassedElm) {
     const translate = this.translate.getInstance();
     const elmAxesHistory = {
-      ID: operationID,
-      axis,
+      axes,
+      numberOfPassedElm,
       translate
     };
-    if (!Array.isArray(this._translateHistory)) {
-      this._translateHistory = [];
+    if (this._translateHistory === void 0) {
+      this._translateHistory = /* @__PURE__ */ new Map();
     }
-    this._translateHistory.push(elmAxesHistory);
+    if (!this._translateHistory.has(cycleID)) {
+      this._translateHistory.set(cycleID, []);
+    }
+    this._translateHistory.get(cycleID).push(elmAxesHistory);
   }
-  _transformOrPend(DOM, hasToFlushTransform) {
-    if (hasToFlushTransform) {
+  _transformOrPend(DOM, enforceTransform) {
+    if (enforceTransform) {
       if (!this.isVisible && this.hasPendingTransform) {
@@ -918,4 +923,4 @@ this.hasPendingTransform = false;
   }
-  _transformationProcess(DOM, newPos, hasToFlushTransform, increment) {
-    this.translate.increase(newPos);
+  _transformationProcess(DOM, elmTransition, enforceTransform, indexIncrement) {
+    this.translate.increase(elmTransition);
     this.rect.setAxes(
@@ -925,8 +930,27 @@ this._initialPosition.x + this.translate.x,
     );
-    this._transformOrPend(DOM, hasToFlushTransform);
+    this._transformOrPend(DOM, enforceTransform);
     const { self: oldIndex } = this.VDOMOrder;
-    const newIndex = oldIndex + increment;
+    const newIndex = oldIndex + indexIncrement;
     this.updateIndex(DOM, newIndex);
-    return { oldIndex, newIndex };
+    return [oldIndex, newIndex];
   }
+  _updateDOMGridOnAxes(direction, numberOfPassedElm, maxContainerGridBoundaries) {
+    if (direction === -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;
+        }
+      }
+      return;
+    }
+    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;
+      }
+    }
+  }
   /**
@@ -937,41 +961,39 @@ *
    * @param mainAxisDirection
-   * @param elmPos
-   * @param operationID
+   * @param elmTransition
+   * @param cycleID
    * @param axis
    */
-  reconcilePosition(axis, mainAxisDirection, DOM, siblings, elmPos, numberOfPassedElm, maxContainerGridBoundaries, operationID) {
+  reconcilePosition(axis, mainAxisDirection, DOM, siblings, elmTransition, numberOfPassedElm, maxContainerGridBoundaries, cycleID) {
+    let axisToProcess;
+    const direction = {
+      x: mainAxisDirection === 1 ? -1 : 1,
+      y: mainAxisDirection
+    };
     if (axis === "z") {
-      BOTH_AXIS.forEach((_axis, i) => {
-        const direction = i === 0 ? mainAxisDirection === 1 ? -1 : 1 : mainAxisDirection;
-        elmPos[_axis] *= direction;
-        this.DOMGrid[_axis] += mainAxisDirection * numberOfPassedElm;
-      });
+      axisToProcess = BOTH_AXIS;
     } else {
-      elmPos[axis] *= mainAxisDirection;
-      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;
-          }
-        }
-      }
+      axisToProcess = [axis];
+      direction[axis] = mainAxisDirection;
     }
-    this._pushToTranslateHistory(axis, operationID);
-    const { oldIndex, newIndex } = this._transformationProcess(
+    axisToProcess.forEach((_axis) => {
+      elmTransition[_axis] *= direction[_axis];
+      this._updateDOMGridOnAxes(
+        direction[_axis],
+        numberOfPassedElm,
+        maxContainerGridBoundaries
+      );
+    });
+    {
+      assertGridBoundaries(this.id, this.DOMGrid, maxContainerGridBoundaries);
+    }
+    this._pushToTranslateHistory(axis, cycleID, numberOfPassedElm);
+    const indexIncrement = mainAxisDirection * numberOfPassedElm;
+    const [oldIndex, newIndex] = this._transformationProcess(
       DOM,
-      elmPos,
+      elmTransition,
       false,
-      mainAxisDirection * numberOfPassedElm
+      indexIncrement
     );
-    this._leaveToNewIndex(siblings, newIndex, oldIndex);
+    siblings[oldIndex] = "";
+    siblings[newIndex] = this.id;
   }
@@ -992,26 +1014,43 @@ restorePosition(DOM) {
   rollBackPosition(DOM, cycleID) {
-    if (!Array.isArray(this._translateHistory)) {
+    if (this._translateHistory === void 0 || !this._translateHistory.has(cycleID)) {
       return;
     }
-    const { length } = this._translateHistory;
-    const stillInSameCycle = this._translateHistory[length - 1].ID === cycleID;
-    if (!stillInSameCycle) {
-      return;
+    {
+      if (!Array.isArray(this._translateHistory.get(cycleID))) {
+        throw new Error(
+          `rollBackPosition: cycleID: ${cycleID} doesn't have a valid array history`
+        );
+      }
     }
-    const { translate: preTranslate, axis } = this._translateHistory.pop();
-    const elmPos = {
+    const lastMovement = this._translateHistory.get(cycleID);
+    const {
+      translate: preTranslate,
+      axes,
+      numberOfPassedElm
+    } = lastMovement.pop();
+    const elmTransition = {
       x: preTranslate.x - this.translate.x,
       y: preTranslate.y - this.translate.y
     };
-    let increment = 0;
-    if (axis === "z") {
-      increment = elmPos.x > 0 || elmPos.y > 0 ? 1 : -1;
-      this.DOMGrid.increase({ x: increment, y: increment });
+    let indexIncrement = 0;
+    const direction = {
+      x: elmTransition.x > 0 ? 1 : -1,
+      y: elmTransition.y > 0 ? 1 : -1
+    };
+    if (axes === "z") {
+      indexIncrement = elmTransition.x > 0 || elmTransition.y > 0 ? 1 : -1;
+      this.DOMGrid.increase({
+        x: direction.x * numberOfPassedElm,
+        y: direction.y * numberOfPassedElm
+      });
     } else {
-      increment = elmPos[axis] > 0 ? 1 : -1;
-      this.DOMGrid[axis] += increment;
+      indexIncrement = direction[axes] * numberOfPassedElm;
+      this.DOMGrid[axes] += indexIncrement;
     }
-    this._transformationProcess(DOM, elmPos, true, increment);
-    if (this._translateHistory.length === 0) {
-      this._translateHistory = void 0;
+    this._transformationProcess(DOM, elmTransition, true, indexIncrement);
+    if (lastMovement.length === 0) {
+      this._translateHistory.delete(cycleID);
+      if (this._translateHistory.size === 0) {
+        this._translateHistory = void 0;
+      }
       return;
@@ -1056,5 +1095,2 @@ }
 class DFlexElement extends DFlexCoreElement {
-  static getRectByAxis(axis) {
-    return axis === "x" ? "width" : "height";
-  }
   static getDistance(currentPosition, elm, axis) {
@@ -1069,6 +1105,2 @@ let diff = currentPosition[axis] - elm.rect[axis === "x" ? "left" : "top"];
   }
-  getRectDiff(elm, axis) {
-    const rectType = DFlexElement.getRectByAxis(axis);
-    return this.rect[rectType] - elm.rect[rectType];
-  }
   getDisplacement(elm, axis) {
@@ -1082,7 +1114,8 @@ return DFlexElement.getDisplacement(this.rect.getPosition(), elm, axis);
 
+const EMPTY_GRID_INDEX = -1;
 class DFlexParentContainer {
   constructor(DOM, originLength, id) {
     this.id = id;
-    this._gridIndex = new PointNum(-1, -1);
-    this.grid = new PointNum(-1, -1);
+    this._gridIndex = new PointNum(EMPTY_GRID_INDEX, EMPTY_GRID_INDEX);
+    this.grid = new PointNum(EMPTY_GRID_INDEX, EMPTY_GRID_INDEX);
     this.originLength = originLength;
@@ -1093,2 +1126,5 @@ this._boundariesByRow = new BoxNum(0, 0, 0, 0);
     this.lastElmPosition = null;
+    {
+      Object.seal(this);
+    }
   }
@@ -1147,2 +1183,15 @@ _initRect(DOM) {
   }
+  extendGrid(axis) {
+    this.grid[axis] += 1;
+  }
+  reduceGrid(axis) {
+    this.grid[axis] -= 1;
+    {
+      if (this.grid[axis] < EMPTY_GRID_INDEX) {
+        throw new Error(
+          `reduceGrid: Cannot reduce grid on axis:${axis} to below ${EMPTY_GRID_INDEX}`
+        );
+      }
+    }
+  }
   /**
@@ -1176,3 +1225,2 @@ * If container doesn't have siblings then it returns the container rect.
 }
-DFlexParentContainer.OUT_OF_RANGE = -1;
 
@@ -1179,0 +1227,0 @@ const OVERFLOW_REGEX = /(auto|scroll|overlay)/;

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{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;
+"use strict";class t{constructor(t,s){this.x=t,this.y=s}}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)}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)}}let r=new WeakMap;const o=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function l(t,s){const i=t.getPropertyValue(s).match(o);return i?parseFloat(i[1]):0}function c(t){const s=function(t){if(r.has(t))return r.get(t);const s=getComputedStyle(t);return r.set(t,s),s}(t);return{width:l(s,"width"),height:l(s,"height")}}class u extends n{constructor(t,s,i,h){super(t,s,i,h),this.width=s-h,this.height=i-t}setByPointAndDimensions(t,s,i,h){this.top=t,this.left=s,this.width=h,this.height=i,this.right=s+h,this.bottom=t+i}setAxes(t,s){this.left=t,this.right=this.width+t,this.top=s,this.bottom=this.height+s}getDimensionDiff(t,s){const i=function(t){return"x"===t?"width":"height"}(t);return this[i]-s[i]}getPositionDiff(t,s){const i=function(t){return"x"===t?"left":"top"}(t);return this[i]-s[t]}}class a 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 d extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class g{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 a(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 f=Object.freeze(["x","y"]);const p=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class x{static getType(){return"base:element"}constructor(t){this.id=t,this.isPaused=!1,this.translate=new a(0,0),this.T=new Set}setAttribute(t,s,i){"INDEX"!==s?this.T.has(s)||(t.setAttribute(p[s],`${i}`),this.T.add(s)):t.setAttribute(p[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.T.has(s)&&(t.removeAttribute(p[s]),this.T.delete(s))}clearAttributes(t){this.T.forEach((s=>{this.removeAttribute(t,s)})),this.T.clear()}}x.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const m=class extends x{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.VDOMOrder={...s},this.DOMOrder={...s},this.keys={...i},this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.O=void 0,this._=null,this.v=new a(0,0),this.rect=new u(0,0,0,0),this.DOMGrid=new a(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.v.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}getDimensions(t){if(this._)return this._;const{width:s,height:i}=c(t);return this._=new a(s,i),this._}getInitialPosition(){return this.v}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this.I(t),this.hasPendingTransform=!1))}I(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){t[s]=this.id}D(t,s,i){const h={axes:t,numberOfPassedElm:i,translate:this.translate.getInstance()};void 0===this.O&&(this.O=new Map),this.O.has(s)||this.O.set(s,[]),this.O.get(s).push(h)}A(t,s){if(s)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this.I(t);this.isVisible?this.I(t):this.hasPendingTransform=!0}P(t,s,i,h){this.translate.increase(s),this.rect.setAxes(this.v.x+this.translate.x,this.v.y+this.translate.y),this.A(t,i);const{self:e}=this.VDOMOrder,n=e+h;return this.updateIndex(t,n),[e,n]}S(t,s,i){if(-1!==t)for(let t=0;t<s;t+=1)this.DOMGrid.x+=1,this.DOMGrid.x>i.x&&(this.DOMGrid.x=0,this.DOMGrid.y+=1);else for(let t=0;t<s;t+=1)this.DOMGrid.x-=1,this.DOMGrid.x<0&&(this.DOMGrid.x=i.x,this.DOMGrid.y-=1)}reconcilePosition(t,s,i,h,e,n,r,o){let l;const c={x:1===s?-1:1,y:s};"z"===t?l=f:(l=[t],c[t]=s),l.forEach((t=>{e[t]*=c[t],this.S(c[t],n,r)})),this.D(t,o,n);const u=s*n,[a,d]=this.P(i,e,!1,u);h[a]="",h[d]=this.id}restorePosition(t){this.I(t),this.setAttribute(t,"INDEX",this.VDOMOrder.self)}assignNewPosition(t,s){this.translate.clone(s),this.I(t)}rollBackPosition(t,s){if(void 0===this.O||!this.O.has(s))return;const i=this.O.get(s),{translate:h,axes:e,numberOfPassedElm:n}=i.pop(),r={x:h.x-this.translate.x,y:h.y-this.translate.y};let o=0;const l={x:r.x>0?1:-1,y:r.y>0?1:-1};if("z"===e?(o=r.x>0||r.y>0?1:-1,this.DOMGrid.increase({x:l.x*n,y:l.y*n})):(o=l[e]*n,this.DOMGrid[e]+=o),this.P(t,r,!0,o),0===i.length)return this.O.delete(s),void(0===this.O.size&&(this.O=void 0));this.rollBackPosition(t,s)}hasTransformedFromOrigin(){return this.v.isNotEqual(this.rect.left,this.rect.top)}needDOMReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}refreshIndicators(t){this.O=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 a?this.translate:null,order:this.VDOMOrder,initialPosition:this.v.getInstance(),rect:this.rect,hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let w=m;w.transform=x.transform;class y extends w{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}getDisplacement(t,s){return y.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return y.getDistance(this.rect.getPosition(),t,s)}}const T=/(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(T.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!T.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function _(t){return"x"===t?"width":"height"}function b(t,s,i){const h=_(i);return t[h]>s[h]}function v(t,s,i){const h=_(i);return t[h]/2>s[h]}const I=class{constructor(t,s,i,h,e){this.animatedScrollListener=()=>{this.M.call(this,this.B.bind(this),this.C)},this.animatedResizeListener=()=>{this.M.call(this,this.N.bind(this),null)},this.hasOverflow=new d(!1,!1),this.invisibleDistance=new n(0,0,0,0),this.scrollRect=new u(0,0,0,0),this.scrollContainerRect=new u(0,0,0,0),this.allowDynamicVisibility=!1,this.F=null,this.L=null,this.R=s,this.$=`scroll_inner_${s}`,this.G=`scroll_outer_${s}`,this.V=`dflexScrollListener_${s}`,this.q=null,this.C=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.N();const{scrollLeft:r,scrollTop:o}=this.scrollContainerDOM;this.X(r,o,!1),this.j(),i>I.k&&this.allowDynamicVisibility&&(this.C=e,this.L=new g(I.H),this.L.setMainThreshold(this.G,this.scrollContainerRect,!1)),this.U(),h&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}N(){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(b(this.scrollRect,this.scrollContainerRect,"x"),b(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)}B(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.X(t,s,!1),i)}X(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.C&&this.C(this.R)}scrollTo(t,s,i){this.X(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}W(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.V]=`${s}`:delete i.dataset[this.V]}U(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.W(t,!0);this.hasDocumentAsContainer||this.W(t,!1)}pauseListeners(t){this.q=t?1:null}Y(){null!==this.F&&(this.F.destroy(),this.F=null)}setInnerThreshold(t){this.Y(),this.F=new g(t),this.F.setMainThreshold(this.$,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.F.isOutThresholdByDirection(t,s,this.$,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.L.isShallowOutThreshold(this.G,r,o+h,r+i,o)}M(t,s){null!==this.q&&cancelAnimationFrame(this.q),this.q=requestAnimationFrame((()=>{t()&&s&&s(this.R),this.q=null}))}J(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:I.getType(),version:3,key:this.R,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.J()}}destroy(){this.Y(),this.C=null,this.U(!1),this.scrollContainerDOM=null}};let D=I;D.H={horizontal:25,vertical:25},D.k=10,exports.DFlexBaseElement=x,exports.DFlexElement=y,exports.DFlexParentContainer=class{constructor(t,s,i){this.id=i,this.K=new a(-1,-1),this.grid=new a(-1,-1),this.originLength=s,this.Z=new n(0,0,0,0),this.tt=null,this.st(t),this.lastElmPosition=null}st(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.it=new u(i,h,e,s)}ht(t){const s=this.Z;return s.isPositionedY(t)?(this.K.y+=1,this.K.x=0,this.Z.setBox(0,0,0,0)):this.K.x+=1,this.K.x>this.grid.x&&(this.grid.x=this.K.x),this.K.y>this.grid.y&&(this.grid.y=this.K.y),s.assignBiggestBox(t),this.K}register(t,s){this.tt?this.tt.assignBiggestBox(t):this.tt=new n(t.top,t.right,t.bottom,t.left);const i=this.ht(t),h=this.tt,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}extendGrid(t){this.grid[t]+=1}reduceGrid(t){this.grid[t]-=1}getBoundaries(){return this.tt||this.it.getBox()}resetIndicators(t){this.K.setAxes(-1,-1),this.grid.setAxes(-1,-1),this.originLength=t,this.Z.setBox(0,0,0,0),this.tt=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new a(t.x,t.y)}},exports.DFlexScrollContainer=D;

package.json

 {
   "name": "@dflex/core-instance",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "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/main/packages/core-instance",
+  "homepage": "https://github.com/dflex-js/dflex/tree/main/packages/dflex-core-instance",
   "license": "MIT",
@@ -30,3 +30,3 @@ "files": [
   "devDependencies": {
-    "@dflex/utils": "^3.8.3"
+    "@dflex/utils": "^3.8.4"
   },
@@ -33,0 +33,0 @@ "keywords": [

types/Container/DFlexParentContainer.d.ts

@@ -1,2 +0,2 @@
-import { PointNum, AbstractBox } from "@dflex/utils";
+import { PointNum, AbstractBox, Axis } from "@dflex/utils";
 import type { Dimensions, AxesPoint } from "@dflex/utils";
@@ -16,3 +16,3 @@ declare class DFlexParentContainer {
     originLength: number;
-    id: string;
+    readonly id: string;
     /**
@@ -23,3 +23,2 @@ * Preserve the last element position in the list .
     lastElmPosition: PointNum;
-    static OUT_OF_RANGE: number;
     constructor(DOM: HTMLElement, originLength: number, id: string);
@@ -29,2 +28,4 @@ private _initRect;
     register(rect: AbstractBox, unifiedContainerDimensions?: Dimensions): PointNum;
+    extendGrid(axis: Axis): void;
+    reduceGrid(axis: Axis): void;
     /**
@@ -31,0 +32,0 @@ * If container doesn't have siblings then it returns the container rect.

types/Element/DFlexBaseElement.d.ts

@@ -12,7 +12,2 @@ import { PointNum } from "@dflex/utils";
     constructor(id: string);
-    /**
-     * Initialize the translate AxesCoordinates as part of abstract instance and
-     * necessary for darg only movement.
-     */
-    initTranslate(): void;
     setAttribute(DOM: HTMLElement, key: AllowedAttributes, value: string | number): void;
@@ -19,0 +14,0 @@ removeAttribute(DOM: HTMLElement, key: AllowedAttributes): void;

types/Element/DFlexCoreElement.d.ts

@@ -1,2 +0,2 @@
-import { BoxRect, BoxRectAbstract, PointNum } from "@dflex/utils";
+import { BoxRect, AbstractBoxRect, PointNum } from "@dflex/utils";
 import type { Direction, Axes, AxesPoint } from "@dflex/utils";
@@ -12,3 +12,3 @@ import DFlexBaseElement from "./DFlexBaseElement";
     initialPosition: AxesPoint;
-    rect: BoxRectAbstract;
+    rect: AbstractBoxRect;
     hasTransformedFromOrigin: boolean;
@@ -61,11 +61,10 @@ hasPendingTransformation: boolean;
     getInitialPosition(): PointNum;
-    resume(DOM: HTMLElement): void;
     changeVisibility(DOM: HTMLElement, isVisible: boolean): void;
     private _transform;
     updateIndex(DOM: HTMLElement, i: number): void;
-    assignNewIndex(branchIDsOrder: string[], newIndex: number): void;
-    private _leaveToNewIndex;
+    assignNewIndex(siblings: string[], newIndex: number): void;
     private _pushToTranslateHistory;
     private _transformOrPend;
     private _transformationProcess;
+    private _updateDOMGridOnAxes;
     /**
@@ -76,7 +75,7 @@ *
      * @param mainAxisDirection
-     * @param elmPos
-     * @param operationID
+     * @param elmTransition
+     * @param cycleID
      * @param axis
      */
-    reconcilePosition(axis: Axes, mainAxisDirection: Direction, DOM: HTMLElement, siblings: string[], elmPos: PointNum, numberOfPassedElm: number, maxContainerGridBoundaries: PointNum, operationID: string): void;
+    reconcilePosition(axis: Axes, mainAxisDirection: Direction, DOM: HTMLElement, siblings: string[], elmTransition: AxesPoint, numberOfPassedElm: number, maxContainerGridBoundaries: PointNum, cycleID: string): void;
     restorePosition(DOM: HTMLElement): void;
@@ -83,0 +82,0 @@ assignNewPosition(DOM: HTMLElement, t: PointNum): void;

types/Element/DFlexElement.d.ts

 import type { Axis, AxesPoint } from "@dflex/utils";
 import DFlexCoreNode from "./DFlexCoreElement";
 declare class DFlexElement extends DFlexCoreNode {
-    static getRectByAxis(axis: Axis): "width" | "height";
     static getDistance(currentPosition: AxesPoint, elm: DFlexElement, axis: Axis): number;
     static getDisplacement(currentPosition: AxesPoint, elm: DFlexElement, axis: Axis): number;
-    getRectDiff(elm: this, axis: Axis): number;
     getDisplacement(elm: this, axis: Axis): number;
@@ -9,0 +7,0 @@ getDistance(elm: this, axis: Axis): number;

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

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

149789

increased by3.68%

Number of package files

18

increased by5.88%

Lines of code

3606

increased by5.07%

Number of low quality alerts

0

decreased by-100%

No dependency changes