@dflex/core-instance - npm Package Compare versions

Comparing version 3.8.1 to 3.8.2

./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 extends s{increase(t){this.x+=t.x,this.y+=t.y}multiplyAll(t){this.x*=t,this.y*=t}getMultiplied(t){return{x:this.x*t,y:this.y*t}}}class h extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class e{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class n extends e{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}getPosition(){return{x:this.left,y:this.top}}}class r extends n{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 o extends n{isNotIntersect(t){return this.top>t.bottom||this.right<t.left||this.bottom<t.top||this.left>t.right}isIntersect(t){return!this.isNotIntersect(t)}isInside(t){return this.top>=t.top&&this.right<=t.right&&this.bottom<=t.bottom&&this.left>=t.left}isOutside(t){return!this.isInside(t)}}class l extends o{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}}}function c(t,s){const{top:i,left:h,right:e,bottom:n}=s;h<t.left&&(t.left=h),i<t.top&&(t.top=i),e>t.right&&(t.right=e),n>t.bottom&&(t.bottom=n)}let u=new WeakMap;const a=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function d(t,s){const i=t.getPropertyValue(s).match(a);return i?parseFloat(i[1]):0}function g(t){const s=function(t){if(u.has(t))return u.get(t);const s=getComputedStyle(t);return u.set(t,s),s}(t);return{width:d(s,"width"),height:d(s,"height")}}class f{constructor(t){this.t=t,this.thresholds={},this.isOut={}}i({width:t,height:s}){const h=Math.round(this.t.horizontal*t/100),e=Math.round(this.t.vertical*s/100);this.h=new i(h,e)}o(t,s){const{x:i,y:h}=this.h,{top:e,left:n,bottom:r,right:o}=t;return s?{left:n+i,right:o-i,top:e+h,bottom:r-h}:{left:n-i,right:o+i,top:e-h,bottom:r+h}}l(t,s,i){const h=this.o(s,i);this.thresholds[t]=Object.seal(h),this.isOut[t]=new r(!1,!1,!1,!1)}u(t,s){const i=`${s}`;if(!this.thresholds[i])return void this.l(i,{...this.thresholds[t]},!1);c(this.thresholds[s],this.thresholds[t])}setMainThreshold(t,s,i){this.i(s),this.l(t,s,i)}updateMainThreshold(t,s,i){const h=this.o(s,i);Object.assign(this.thresholds[t],h),this.isOut[t].setFalsy()}setContainerThreshold(t,s,i,h,e){this.l(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.l(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.u(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 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=!0}initTranslate(){this.translate||(this.translate=new i(0,0)),this.g=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.g.has(s)||(t.setAttribute(p[s],`${i}`),this.g.add(s)):t.setAttribute(p[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.g.has(s)&&(t.removeAttribute(p[s]),this.g.delete(s))}clearAttributes(t){this.g.forEach((s=>{this.removeAttribute(t,s)})),this.g.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:h,depth:e,readonly:n,id:r}=t;super(r),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...h}),this.depth=e,this.readonly=n,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.p=null,this.m=new i(0,0),this.rect=new l(0,0,0,0),this.DOMGrid=new i(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.m.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}T(t){this.translate.increase(t),this.rect.setAxes(this.m.x+this.translate.x,this.m.y+this.translate.y),this.isVisible||(this.hasPendingTransform=!0)}getDimensions(t){if(this.p)return this.p;const{width:s,height:h}=g(t);return this.p=new i(s,h),this.p}getInitialPosition(){return this.m}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this.transform(t),this.hasPendingTransform=!1))}transform(t){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}O(t,s){const{self:i}=this.VDOMOrder,h=i+s;return this.updateIndex(t,h),{oldIndex:i,newIndex:h}}assignNewPosition(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}I(t,s,i){t[i]="",t[s]=this.id}v(t,s,i,h,e=!1){if(h){const s={ID:h,axis:t,translate:{x:this.translate.x,y:this.translate.y}};Array.isArray(this._)?this._.push(s):this._=[s]}if(this.T(i),e)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this.transform(s);this.isVisible?this.transform(s):this.hasPendingTransform=!0}reconcilePosition(t,s,i,h,e,n){"z"===t?e.multiplyAll(s):e[t]*=s,this.v(t,i,e,n);const{oldIndex:r,newIndex:o}=this.O(i,1*s);if("z"===t){const t=1*s;this.DOMGrid.increase({x:t,y:t})}else this.DOMGrid[t]+=1*s;this.I(h,o,r)}hasTransformed(){return Array.isArray(this._)&&this._.length>0}hasTransformedFromOrigin(){return this.m.isNotEqual(this.rect.left,this.rect.top)}needReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}rollBack(t,s){if(!this.hasTransformed()||this._[this._.length-1].ID!==s)return;const i=this._.pop(),{translate:h,axis:e}=i,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.v(e,t,n,void 0,!0),this.O(t,r),this.rollBack(t,s)}refreshIndicators(t){this._=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style"),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 i?this.translate:null,order:this.VDOMOrder,initialPosition:this.m.getInstance(),rect:this.rect.getRect(),hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let y=m;y.transform=x.transform;class w extends y{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=w.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return w.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return w.getDistance(this.rect.getPosition(),t,s)}}class b{constructor(t,s,h){this.id=h,this.grid=new i(1,1),this.originLength=s,this.A={},this.D=!1,this.S=null,this.C(t),this.lastElmPosition=null}C(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.j=new l(i,h,e,s)}N(t){if(!this.A[this.grid.x])return void(this.A[this.grid.x]=Object.seal({bottom:t.bottom,left:t.left,right:t.right,top:t.top}));const s=this.A[this.grid.x];(t.bottom>s.bottom||t.top<s.top)&&(this.grid.y+=1,this.D=!0,s.left=0,s.right=0),(t.left>s.right||t.right<s.left)&&(this.D?(this.grid.x=1,this.D=!1):this.grid.x+=1),c(s,t)}registerNewElm(t,s){this.S?c(this.S,t):this.S={bottom:t.bottom,left:t.left,right:t.right,top:t.top},this.N(t);const i=this.S,h=s;if(!h)return;const e=i.bottom-i.top,n=i.right-i.left;h.height<e&&(h.height=e),h.width<n&&(h.width=e)}getBoundaries(){return this.S||this.j.getBox()}resetIndicators(t){this.grid.setAxes(1,1),this.originLength=t,this.A={},this.D=!1,this.S=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new i(t.x,t.y)}}b.OUT_OF_RANGE=-1;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 I(t){return"x"===t?"width":"height"}function v(t,s,i){const h=I(i);return t[h]>s[h]}function _(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,e,n){this.animatedScrollListener=()=>{this.P.call(this,this.R.bind(this),this.F)},this.animatedResizeListener=()=>{this.P.call(this,this.M.bind(this),null)},this.hasOverflow=new h(!1,!1),this.invisibleDistance=new o(0,0,0,0),this.scrollRect=new l(0,0,0,0),this.scrollContainerRect=new l(0,0,0,0),this.allowDynamicVisibility=!1,this.B=null,this.L=null,this.$=s,this.V=`scroll_inner_${s}`,this.q=`scroll_outer_${s}`,this.k=`dflexScrollListener_${s}`,this.X=null,this.F=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.M();const{scrollLeft:r,scrollTop:c}=this.scrollContainerDOM;this.G(r,c,!1),this.W(),i>A.H&&this.allowDynamicVisibility&&(this.F=n,this.L=new f(A.U),this.L.setMainThreshold(this.q,this.scrollContainerRect,!1)),this.J(),e&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}M(){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)}}W(){this.hasOverflow.setAxes(v(this.scrollRect,this.scrollContainerRect,"x"),v(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&_(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&_(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}R(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.G(t,s,!1),i)}G(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.F&&this.F(this.$)}scrollTo(t,s,i){this.G(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}K(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.k]=`${s}`:delete i.dataset[this.k]}J(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.K(t,!0);this.hasDocumentAsContainer||this.K(t,!1)}pauseListeners(t){this.X=t?1:null}Y(){null!==this.B&&(this.B.destroy(),this.B=null)}setInnerThreshold(t){this.Y(),this.B=new f(t),this.B.setMainThreshold(this.V,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.B.isOutThresholdByDirection(t,s,this.V,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.q,r,o+h,r+i,o)}P(t,s){null!==this.X&&cancelAnimationFrame(this.X),this.X=requestAnimationFrame((()=>{t()&&s&&s(this.$),this.X=null}))}Z(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.$,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.Z()}}destroy(){this.Y(),this.F=null,this.J(!1),this.scrollContainerDOM=null}};let D=A;D.U={horizontal:25,vertical:25},D.H=10,exports.DFlexBaseElement=x,exports.DFlexElement=w,exports.DFlexParentContainer=b,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{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;

dist/dev.js

@@ -72,56 +72,2 @@ 'use strict';
 
-class PointNum extends Point {
-  /**
-   * Increase the current point by the given another point.
-   *
-   * @param point
-   */
-  increase(point) {
-    this.x += point.x;
-    this.y += point.y;
-  }
-  /**
-   * Multiplies the point by the given value.
-   *
-   * @param val
-   */
-  multiplyAll(val) {
-    this.x *= val;
-    this.y *= val;
-  }
-  /**
-   * Gets new instance of PointNum multiplied by the given value.
-   *
-   * @param val
-   * @returns
-   */
-  getMultiplied(val) {
-    return { x: this.x * val, y: this.y * val };
-  }
-}
-
-class PointBool extends Point {
-  /**
-   * True when both points X and Y are true.
-   * @returns
-   */
-  isOneTruthy() {
-    return this.x || this.y;
-  }
-  /**
-   * True when one point is false.
-   * @returns
-   */
-  isAllFalsy() {
-    return !(this.x || this.y);
-  }
-  /**
-   * Set both x and y to false.
-   */
-  setFalsy() {
-    this.x = false;
-    this.y = false;
-  }
-}
-
 class AbstractBox {
@@ -233,2 +179,10 @@ /**
   }
+  setPositionInstance(point) {
+    this.top = point.y;
+    this.left = point.x;
+  }
+  setPosition(x, y) {
+    this.top = y;
+    this.left = x;
+  }
   /**
@@ -286,2 +240,14 @@ * Get starting point instance.
 class BoxNum extends Box {
+  _isUnder(box) {
+    return this.top >= box.bottom;
+  }
+  _isAbove(box) {
+    return this.bottom <= box.top;
+  }
+  _isOnLeft(box) {
+    return this.right <= box.left;
+  }
+  _isOneRight(box) {
+    return this.left >= box.right;
+  }
   /**
@@ -294,3 +260,3 @@ * True when it's not intersected with other box.
   isNotIntersect(box) {
-    return this.top > box.bottom || this.right < box.left || this.bottom < box.top || this.left > box.right;
+    return this._isUnder(box) || this._isOnLeft(box) || this._isAbove(box) || this._isOneRight(box);
   }
@@ -312,13 +278,27 @@ /**
    */
-  isInside(box) {
-    return this.top >= box.top && this.right <= box.right && this.bottom <= box.bottom && this.left >= box.left;
+  // isInside(box: AbstractBox): boolean {
+  //   return (
+  //     this.top >= box.top &&
+  //     this.right <= box.right &&
+  //     this.bottom <= box.bottom &&
+  //     this.left >= box.left
+  //   );
+  // }
+  isPositionedY(box) {
+    return this._isUnder(box) || this._isAbove(box);
   }
-  /**
-   * True when it's outside of other box.
-   *
-   * @param box
-   * @returns
-   */
-  isOutside(box) {
-    return !this.isInside(box);
+  assignBiggestBox(box) {
+    const { top, left, right, bottom } = box;
+    if (left < this.left) {
+      this.left = left;
+    }
+    if (top < this.top) {
+      this.top = top;
+    }
+    if (right > this.right) {
+      this.right = right;
+    }
+    if (bottom > this.bottom) {
+      this.bottom = bottom;
+    }
   }
@@ -408,56 +388,48 @@ }
 
-function dirtyAssignBiggestRect($, elm) {
-  const { top, left, right, bottom } = elm;
-  if (left < $.left) {
-    $.left = left;
+class PointNum extends Point {
+  /**
+   * Increase the current point by the given another point.
+   *
+   * @param point
+   */
+  increase(point) {
+    this.x += point.x;
+    this.y += point.y;
   }
-  if (top < $.top) {
-    $.top = top;
+  composeBox(box, isInner) {
+    const { top, left, bottom, right } = box;
+    return isInner ? new BoxNum(top + this.y, right - this.x, bottom - this.y, left + this.x) : new BoxNum(
+      top - this.y,
+      right + this.x,
+      bottom + this.y,
+      left - this.x
+    );
   }
-  if (right > $.right) {
-    $.right = right;
+  onSameAxis(axis, point) {
+    return axis === "y" ? point.x === this.x : point.y === this.y;
   }
-  if (bottom > $.bottom) {
-    $.bottom = bottom;
-  }
 }
 
-const log = {};
-function warnOnce(caller, ...message) {
-  if (!log[caller]) {
-    log[caller] = true;
-    console.warn(...message);
+class PointBool extends Point {
+  /**
+   * True when both points X and Y are true.
+   * @returns
+   */
+  isOneTruthy() {
+    return this.x || this.y;
   }
-}
-
-let computedStyleMap = /* @__PURE__ */ new WeakMap();
-function getElmComputedStyle(DOM) {
-  if (computedStyleMap.has(DOM)) {
-    return computedStyleMap.get(DOM);
+  /**
+   * True when one point is false.
+   * @returns
+   */
+  isAllFalsy() {
+    return !(this.x || this.y);
   }
-  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."
-      );
-    }
+  /**
+   * Set both x and y to false.
+   */
+  setFalsy() {
+    this.x = false;
+    this.y = false;
   }
-  const width = getComputedDimension(computedStyle, "width");
-  const height = getComputedDimension(computedStyle, "height");
-  return { width, height };
 }
@@ -471,3 +443,3 @@
   }
-  _setPixels({ width, height }) {
+  _createPixels({ width, height }) {
     const x = Math.round(this._percentages.horizontal * width / 100);
@@ -477,42 +449,19 @@ const y = Math.round(this._percentages.vertical * height / 100);
   }
-  _getThreshold(rect, isInner) {
-    const { x, y } = this._pixels;
-    const { top, left, bottom, right } = rect;
-    return isInner ? {
-      left: left + x,
-      right: right - x,
-      top: top + y,
-      bottom: bottom - y
-    } : {
-      left: left - x,
-      right: right + x,
-      top: top - y,
-      bottom: bottom + y
-    };
-  }
   /** Assign threshold property and create new instance for is out indicators */
   _createThreshold(key, rect, isInner) {
-    const threshold = this._getThreshold(rect, isInner);
     {
-      if (this.thresholds[key]) {
-        throw new Error(`Threshold ${key} already exists`);
+      if (this.thresholds[key] || this.isOut[key]) {
+        throw new Error(`Threshold with key: ${key} already exists`);
       }
     }
-    this.thresholds[key] = Object.seal(threshold);
+    this.thresholds[key] = this._pixels.composeBox(rect, isInner);
     this.isOut[key] = new BoxBool(false, false, false, false);
   }
-  _addDepthThreshold(key, depth) {
+  _setDepthThreshold(key, depth) {
     const dp = `${depth}`;
     if (!this.thresholds[dp]) {
-      this._createThreshold(
-        dp,
-        {
-          ...this.thresholds[key]
-        },
-        false
-      );
+      this._createThreshold(dp, this.thresholds[key], false);
       return;
     }
-    const $ = this.thresholds[depth];
-    dirtyAssignBiggestRect($, this.thresholds[key]);
+    this.thresholds[depth].assignBiggestBox(this.thresholds[key]);
   }
@@ -530,3 +479,3 @@ /**
   setMainThreshold(key, boxRect, isInner) {
-    this._setPixels(boxRect);
+    this._createPixels(boxRect);
     this._createThreshold(key, boxRect, isInner);
@@ -542,3 +491,2 @@ }
   updateMainThreshold(key, rect, isInner) {
-    const threshold = this._getThreshold(rect, isInner);
     {
@@ -549,3 +497,3 @@ if (!this.thresholds[key]) {
     }
-    Object.assign(this.thresholds[key], threshold);
+    this.thresholds[key] = this._pixels.composeBox(rect, isInner);
     this.isOut[key].setFalsy();
@@ -579,3 +527,3 @@ }
     );
-    this._addDepthThreshold(insertionLayerKey, childDepth);
+    this._setDepthThreshold(insertionLayerKey, childDepth);
   }
@@ -671,2 +619,44 @@ /**
 
+const BOTH_AXIS = Object.freeze(["x", "y"]);
+
+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;
@@ -766,2 +756,8 @@ function getParentElm(baseElement, cb) {
 
+function resetDOMStyle(DOM) {
+  DOM.style.removeProperty("transform");
+  if (!DOM.getAttribute("style")) {
+    DOM.removeAttribute("style");
+  }
+}
 const _DFlexCoreElement = class extends DFlexBaseElement {
@@ -793,12 +789,2 @@ constructor(eleWithPointer) {
   }
-  _updateCurrentIndicators(newPos) {
-    this.translate.increase(newPos);
-    this.rect.setAxes(
-      this._initialPosition.x + this.translate.x,
-      this._initialPosition.y + this.translate.y
-    );
-    if (!this.isVisible) {
-      this.hasPendingTransform = true;
-    }
-  }
   getDimensions(DOM) {
@@ -833,7 +819,7 @@ if (this._computedDimensions) {
     if (this.hasPendingTransform && this.isVisible) {
-      this.transform(DOM);
+      this._transform(DOM);
       this.hasPendingTransform = false;
     }
   }
-  transform(DOM) {
+  _transform(DOM, cb) {
     if (this.animatedFrame !== null) {
@@ -847,2 +833,5 @@ cancelAnimationFrame(this.animatedFrame);
       }
+      if (cb) {
+        cb();
+      }
       this.animatedFrame = null;
@@ -854,10 +843,8 @@ });
     this.VDOMOrder.self = i;
+    {
+      DOM.dataset.x = `${this.DOMGrid.x}`;
+      DOM.dataset.y = `${this.DOMGrid.y}`;
+    }
   }
-  _updateOrderIndexing(DOM, i) {
-    const { self: oldIndex } = this.VDOMOrder;
-    const newIndex = oldIndex + i;
-    this.updateIndex(DOM, newIndex);
-    return { oldIndex, newIndex };
-  }
-  assignNewPosition(branchIDsOrder, newIndex) {
+  assignNewIndex(branchIDsOrder, newIndex) {
     if (newIndex < 0 || newIndex > branchIDsOrder.length - 1) {
@@ -888,23 +875,19 @@ {
   }
-  _leaveToNewPosition(branchIDsOrder, newIndex, oldIndex) {
+  _leaveToNewIndex(branchIDsOrder, newIndex, oldIndex) {
     branchIDsOrder[oldIndex] = "";
     branchIDsOrder[newIndex] = this.id;
   }
-  /**
-   *  Set a new translate position and store the old one.
-   */
-  _seTranslate(axis, DOM, elmPos, operationID, hasToFlushTransform = false) {
-    if (operationID) {
-      const elmAxesHistory = {
-        ID: operationID,
-        axis,
-        translate: { x: this.translate.x, y: this.translate.y }
-      };
-      if (Array.isArray(this._translateHistory)) {
-        this._translateHistory.push(elmAxesHistory);
-      } else {
-        this._translateHistory = [elmAxesHistory];
-      }
+  _pushToTranslateHistory(axis, operationID) {
+    const translate = this.translate.getInstance();
+    const elmAxesHistory = {
+      ID: operationID,
+      axis,
+      translate
+    };
+    if (!Array.isArray(this._translateHistory)) {
+      this._translateHistory = [];
     }
-    this._updateCurrentIndicators(elmPos);
+    this._translateHistory.push(elmAxesHistory);
+  }
+  _transformOrPend(DOM, hasToFlushTransform) {
     if (hasToFlushTransform) {
@@ -915,3 +898,3 @@ if (!this.isVisible && this.hasPendingTransform) {
       }
-      this.transform(DOM);
+      this._transform(DOM);
       return;
@@ -923,4 +906,16 @@ }
     }
-    this.transform(DOM);
+    this._transform(DOM);
   }
+  _transformationProcess(DOM, newPos, hasToFlushTransform, increment) {
+    this.translate.increase(newPos);
+    this.rect.setAxes(
+      this._initialPosition.x + this.translate.x,
+      this._initialPosition.y + this.translate.y
+    );
+    this._transformOrPend(DOM, hasToFlushTransform);
+    const { self: oldIndex } = this.VDOMOrder;
+    const newIndex = oldIndex + increment;
+    this.updateIndex(DOM, newIndex);
+    return { oldIndex, newIndex };
+  }
   /**
@@ -930,3 +925,3 @@ *
    * @param siblings
-   * @param direction
+   * @param mainAxisDirection
    * @param elmPos
@@ -936,31 +931,31 @@ * @param operationID
    */
-  reconcilePosition(axis, direction, DOM, siblings, elmPos, operationID) {
+  reconcilePosition(axis, mainAxisDirection, DOM, siblings, elmPos, operationID) {
     const numberOfPassedElm = 1;
     if (axis === "z") {
-      elmPos.multiplyAll(direction);
+      BOTH_AXIS.forEach((_axis, i) => {
+        const direction = i === 0 ? mainAxisDirection === 1 ? -1 : 1 : mainAxisDirection;
+        elmPos[_axis] *= direction;
+        this.DOMGrid[_axis] += mainAxisDirection * numberOfPassedElm;
+      });
     } else {
-      elmPos[axis] *= direction;
+      elmPos[axis] *= mainAxisDirection;
+      this.DOMGrid[axis] += mainAxisDirection * numberOfPassedElm;
     }
-    this._seTranslate(axis, DOM, elmPos, operationID);
-    const { oldIndex, newIndex } = this._updateOrderIndexing(
+    this._pushToTranslateHistory(axis, operationID);
+    const { oldIndex, newIndex } = this._transformationProcess(
       DOM,
-      direction * numberOfPassedElm
+      elmPos,
+      false,
+      mainAxisDirection * numberOfPassedElm
     );
-    if (axis === "z") {
-      const inc = direction * numberOfPassedElm;
-      this.DOMGrid.increase({ x: inc, y: inc });
-    } else {
-      this.DOMGrid[axis] += direction * numberOfPassedElm;
-    }
-    this._leaveToNewPosition(siblings, newIndex, oldIndex);
+    this._leaveToNewIndex(siblings, newIndex, oldIndex);
   }
-  hasTransformed() {
-    return Array.isArray(this._translateHistory) && this._translateHistory.length > 0;
+  restorePosition(DOM) {
+    this._transform(DOM);
+    this.setAttribute(DOM, "INDEX", this.VDOMOrder.self);
   }
-  hasTransformedFromOrigin() {
-    return this._initialPosition.isNotEqual(this.rect.left, this.rect.top);
+  assignNewPosition(DOM, t) {
+    this.translate.clone(t);
+    this._transform(DOM);
   }
-  needReconciliation() {
-    return this.VDOMOrder.self !== this.DOMOrder.self;
-  }
   /**
@@ -971,8 +966,12 @@ * Roll back element position.
    */
-  rollBack(DOM, cycleID) {
-    if (!this.hasTransformed() || this._translateHistory[this._translateHistory.length - 1].ID !== cycleID) {
+  rollBackPosition(DOM, cycleID) {
+    if (!Array.isArray(this._translateHistory)) {
       return;
     }
-    const lastMovement = this._translateHistory.pop();
-    const { translate: preTranslate, axis } = lastMovement;
+    const { length } = this._translateHistory;
+    const stillInSameCycle = this._translateHistory[length - 1].ID === cycleID;
+    if (!stillInSameCycle) {
+      return;
+    }
+    const { translate: preTranslate, axis } = this._translateHistory.pop();
     const elmPos = {
@@ -990,6 +989,15 @@ x: preTranslate.x - this.translate.x,
     }
-    this._seTranslate(axis, DOM, elmPos, void 0, true);
-    this._updateOrderIndexing(DOM, increment);
-    this.rollBack(DOM, cycleID);
+    this._transformationProcess(DOM, elmPos, true, increment);
+    if (this._translateHistory.length === 0) {
+      this._translateHistory = void 0;
+      return;
+    }
+    this.rollBackPosition(DOM, cycleID);
   }
+  hasTransformedFromOrigin() {
+    return this._initialPosition.isNotEqual(this.rect.left, this.rect.top);
+  }
+  needDOMReconciliation() {
+    return this.VDOMOrder.self !== this.DOMOrder.self;
+  }
   refreshIndicators(DOM) {
@@ -1000,6 +1008,3 @@ this._translateHistory = void 0;
     this.DOMOrder.self = this.VDOMOrder.self;
-    DOM.style.removeProperty("transform");
-    if (!DOM.getAttribute("style")) {
-      DOM.removeAttribute("style");
-    }
+    resetDOMStyle(DOM);
     this.initElmRect(DOM);
@@ -1055,6 +1060,5 @@ this.DOMGrid.setAxes(0, 0);
     this.id = id;
-    this.grid = new PointNum(1, 1);
+    this.grid = new PointNum(-1, -1);
     this.originLength = originLength;
-    this._boundariesByRow = {};
-    this._gridSiblingsHasNewRow = false;
+    this._boundariesByRow = new BoxNum(0, 0, 0, 0);
     this._siblingBoundaries = null;
@@ -1069,27 +1073,12 @@ this._initRect(DOM);
   _addNewElmToGridIndicator(rect) {
-    if (!this._boundariesByRow[this.grid.x]) {
-      this._boundariesByRow[this.grid.x] = Object.seal({
-        bottom: rect.bottom,
-        left: rect.left,
-        right: rect.right,
-        top: rect.top
-      });
-      return;
-    }
-    const $ = this._boundariesByRow[this.grid.x];
-    if (rect.bottom > $.bottom || rect.top < $.top) {
+    const $ = this._boundariesByRow;
+    const isNewRow = $.isPositionedY(rect);
+    if (isNewRow) {
       this.grid.y += 1;
-      this._gridSiblingsHasNewRow = true;
-      $.left = 0;
-      $.right = 0;
+      this.grid.x = 0;
+      this._boundariesByRow.setBox(0, 0, 0, 0);
+    } else {
+      this.grid.x += 1;
     }
-    if (rect.left > $.right || rect.right < $.left) {
-      if (this._gridSiblingsHasNewRow) {
-        this.grid.x = 1;
-        this._gridSiblingsHasNewRow = false;
-      } else {
-        this.grid.x += 1;
-      }
-    }
-    dirtyAssignBiggestRect($, rect);
+    $.assignBiggestBox(rect);
   }
@@ -1100,10 +1089,10 @@ // TODO: How to unregister element from the edge of the container? Currently
     if (this._siblingBoundaries) {
-      dirtyAssignBiggestRect(this._siblingBoundaries, rect);
+      this._siblingBoundaries.assignBiggestBox(rect);
     } else {
-      this._siblingBoundaries = {
-        bottom: rect.bottom,
-        left: rect.left,
-        right: rect.right,
-        top: rect.top
-      };
+      this._siblingBoundaries = new BoxNum(
+        rect.top,
+        rect.right,
+        rect.bottom,
+        rect.left
+      );
     }
@@ -1138,6 +1127,5 @@ this._addNewElmToGridIndicator(rect);
   resetIndicators(originLength) {
-    this.grid.setAxes(1, 1);
+    this.grid.setAxes(-1, -1);
     this.originLength = originLength;
-    this._boundariesByRow = {};
-    this._gridSiblingsHasNewRow = false;
+    this._boundariesByRow.setBox(0, 0, 0, 0);
     this._siblingBoundaries = null;
@@ -1144,0 +1132,0 @@ this.lastElmPosition = null;

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 extends s{increase(t){this.x+=t.x,this.y+=t.y}multiplyAll(t){this.x*=t,this.y*=t}getMultiplied(t){return{x:this.x*t,y:this.y*t}}}class h extends s{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!(this.x||this.y)}setFalsy(){this.x=!1,this.y=!1}}class e{constructor(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}}class n extends e{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}getPosition(){return{x:this.left,y:this.top}}}class r extends n{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 o extends n{isNotIntersect(t){return this.top>t.bottom||this.right<t.left||this.bottom<t.top||this.left>t.right}isIntersect(t){return!this.isNotIntersect(t)}isInside(t){return this.top>=t.top&&this.right<=t.right&&this.bottom<=t.bottom&&this.left>=t.left}isOutside(t){return!this.isInside(t)}}class l extends o{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}}}function c(t,s){const{top:i,left:h,right:e,bottom:n}=s;h<t.left&&(t.left=h),i<t.top&&(t.top=i),e>t.right&&(t.right=e),n>t.bottom&&(t.bottom=n)}let u=new WeakMap;const a=/^([0-9]*\.[0-9]*|[0-9]*)(px)$/;function d(t,s){const i=t.getPropertyValue(s).match(a);return i?parseFloat(i[1]):0}function g(t){const s=function(t){if(u.has(t))return u.get(t);const s=getComputedStyle(t);return u.set(t,s),s}(t);return{width:d(s,"width"),height:d(s,"height")}}class f{constructor(t){this.t=t,this.thresholds={},this.isOut={}}i({width:t,height:s}){const h=Math.round(this.t.horizontal*t/100),e=Math.round(this.t.vertical*s/100);this.h=new i(h,e)}o(t,s){const{x:i,y:h}=this.h,{top:e,left:n,bottom:r,right:o}=t;return s?{left:n+i,right:o-i,top:e+h,bottom:r-h}:{left:n-i,right:o+i,top:e-h,bottom:r+h}}l(t,s,i){const h=this.o(s,i);this.thresholds[t]=Object.seal(h),this.isOut[t]=new r(!1,!1,!1,!1)}u(t,s){const i=`${s}`;if(!this.thresholds[i])return void this.l(i,{...this.thresholds[t]},!1);c(this.thresholds[s],this.thresholds[t])}setMainThreshold(t,s,i){this.i(s),this.l(t,s,i)}updateMainThreshold(t,s,i){const h=this.o(s,i);Object.assign(this.thresholds[t],h),this.isOut[t].setFalsy()}setContainerThreshold(t,s,i,h,e){this.l(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.l(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.u(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 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=!0}initTranslate(){this.translate||(this.translate=new i(0,0)),this.g=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.g.has(s)||(t.setAttribute(p[s],`${i}`),this.g.add(s)):t.setAttribute(p[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.g.has(s)&&(t.removeAttribute(p[s]),this.g.delete(s))}clearAttributes(t){this.g.forEach((s=>{this.removeAttribute(t,s)})),this.g.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:h,depth:e,readonly:n,id:r}=t;super(r),this.VDOMOrder=Object.seal({...s}),this.DOMOrder=Object.seal({...s}),this.keys=Object.seal({...h}),this.depth=e,this.readonly=n,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null,this.hasPendingTransform=!1,this.p=null,this.m=new i(0,0),this.rect=new l(0,0,0,0),this.DOMGrid=new i(0,0)}static getType(){return"core:element"}initElmRect(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.m.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i)}T(t){this.translate.increase(t),this.rect.setAxes(this.m.x+this.translate.x,this.m.y+this.translate.y),this.isVisible||(this.hasPendingTransform=!0)}getDimensions(t){if(this.p)return this.p;const{width:s,height:h}=g(t);return this.p=new i(s,h),this.p}getInitialPosition(){return this.m}resume(t){this.initTranslate(),this.initElmRect(t)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this.transform(t),this.hasPendingTransform=!1))}transform(t){null!==this.animatedFrame&&cancelAnimationFrame(this.animatedFrame),this.animatedFrame=requestAnimationFrame((()=>{m.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),this.animatedFrame=null}))}updateIndex(t,s){this.setAttribute(t,"INDEX",s),this.VDOMOrder.self=s}O(t,s){const{self:i}=this.VDOMOrder,h=i+s;return this.updateIndex(t,h),{oldIndex:i,newIndex:h}}assignNewPosition(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}I(t,s,i){t[i]="",t[s]=this.id}v(t,s,i,h,e=!1){if(h){const s={ID:h,axis:t,translate:{x:this.translate.x,y:this.translate.y}};Array.isArray(this._)?this._.push(s):this._=[s]}if(this.T(i),e)return!this.isVisible&&this.hasPendingTransform?void(this.hasPendingTransform=!1):void this.transform(s);this.isVisible?this.transform(s):this.hasPendingTransform=!0}reconcilePosition(t,s,i,h,e,n){"z"===t?e.multiplyAll(s):e[t]*=s,this.v(t,i,e,n);const{oldIndex:r,newIndex:o}=this.O(i,1*s);if("z"===t){const t=1*s;this.DOMGrid.increase({x:t,y:t})}else this.DOMGrid[t]+=1*s;this.I(h,o,r)}hasTransformed(){return Array.isArray(this._)&&this._.length>0}hasTransformedFromOrigin(){return this.m.isNotEqual(this.rect.left,this.rect.top)}needReconciliation(){return this.VDOMOrder.self!==this.DOMOrder.self}rollBack(t,s){if(!this.hasTransformed()||this._[this._.length-1].ID!==s)return;const i=this._.pop(),{translate:h,axis:e}=i,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.v(e,t,n,void 0,!0),this.O(t,r),this.rollBack(t,s)}refreshIndicators(t){this._=void 0,this.translate.setAxes(0,0),this.hasPendingTransform=!1,this.DOMOrder.self=this.VDOMOrder.self,t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style"),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 i?this.translate:null,order:this.VDOMOrder,initialPosition:this.m.getInstance(),rect:this.rect.getRect(),hasTransformedFromOrigin:this.hasTransformedFromOrigin(),hasPendingTransformation:this.hasPendingTransform,isVisible:this.isVisible}}};let y=m;y.transform=x.transform;class w extends y{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=w.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return w.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return w.getDistance(this.rect.getPosition(),t,s)}}class b{constructor(t,s,h){this.id=h,this.grid=new i(1,1),this.originLength=s,this.A={},this.D=!1,this.S=null,this.C(t),this.lastElmPosition=null}C(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.j=new l(i,h,e,s)}N(t){if(!this.A[this.grid.x])return void(this.A[this.grid.x]=Object.seal({bottom:t.bottom,left:t.left,right:t.right,top:t.top}));const s=this.A[this.grid.x];(t.bottom>s.bottom||t.top<s.top)&&(this.grid.y+=1,this.D=!0,s.left=0,s.right=0),(t.left>s.right||t.right<s.left)&&(this.D?(this.grid.x=1,this.D=!1):this.grid.x+=1),c(s,t)}registerNewElm(t,s){this.S?c(this.S,t):this.S={bottom:t.bottom,left:t.left,right:t.right,top:t.top},this.N(t);const i=this.S,h=s;if(!h)return;const e=i.bottom-i.top,n=i.right-i.left;h.height<e&&(h.height=e),h.width<n&&(h.width=e)}getBoundaries(){return this.S||this.j.getBox()}resetIndicators(t){this.grid.setAxes(1,1),this.originLength=t,this.A={},this.D=!1,this.S=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new i(t.x,t.y)}}b.OUT_OF_RANGE=-1;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 I(t){return"x"===t?"width":"height"}function v(t,s,i){const h=I(i);return t[h]>s[h]}function _(t,s,i){const h=I(i);return t[h]/2>s[h]}const A=class{constructor(t,s,i,e,n){this.animatedScrollListener=()=>{this.P.call(this,this.R.bind(this),this.F)},this.animatedResizeListener=()=>{this.P.call(this,this.M.bind(this),null)},this.hasOverflow=new h(!1,!1),this.invisibleDistance=new o(0,0,0,0),this.scrollRect=new l(0,0,0,0),this.scrollContainerRect=new l(0,0,0,0),this.allowDynamicVisibility=!1,this.B=null,this.L=null,this.$=s,this.V=`scroll_inner_${s}`,this.q=`scroll_outer_${s}`,this.k=`dflexScrollListener_${s}`,this.X=null,this.F=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=O(t),this.M();const{scrollLeft:r,scrollTop:c}=this.scrollContainerDOM;this.G(r,c,!1),this.W(),i>A.H&&this.allowDynamicVisibility&&(this.F=n,this.L=new f(A.U),this.L.setMainThreshold(this.q,this.scrollContainerRect,!1)),this.J(),e&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}M(){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)}}W(){this.hasOverflow.setAxes(v(this.scrollRect,this.scrollContainerRect,"x"),v(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&_(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&_(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}R(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.G(t,s,!1),i)}G(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.F&&this.F(this.$)}scrollTo(t,s,i){this.G(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}K(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.k]=`${s}`:delete i.dataset[this.k]}J(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.K(t,!0);this.hasDocumentAsContainer||this.K(t,!1)}pauseListeners(t){this.X=t?1:null}Y(){null!==this.B&&(this.B.destroy(),this.B=null)}setInnerThreshold(t){this.Y(),this.B=new f(t),this.B.setMainThreshold(this.V,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.B.isOutThresholdByDirection(t,s,this.V,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.q,r,o+h,r+i,o)}P(t,s){null!==this.X&&cancelAnimationFrame(this.X),this.X=requestAnimationFrame((()=>{t()&&s&&s(this.$),this.X=null}))}Z(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:A.getType(),version:3,key:this.$,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.Z()}}destroy(){this.Y(),this.F=null,this.J(!1),this.scrollContainerDOM=null}};let D=A;D.U={horizontal:25,vertical:25},D.H=10,exports.DFlexBaseElement=x,exports.DFlexElement=w,exports.DFlexParentContainer=b,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{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;

package.json

 {
   "name": "@dflex/core-instance",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "Core instance is a DFlex package for interactive DOM element",
@@ -29,3 +29,3 @@ "author": "Jalal Maskoun",
   "devDependencies": {
-    "@dflex/utils": "^3.8.1"
+    "@dflex/utils": "^3.8.2"
   },
@@ -32,0 +32,0 @@ "keywords": [

types/Container/DFlexParentContainer.d.ts

@@ -16,3 +16,2 @@ import { PointNum, AbstractBox } from "@dflex/utils";
     id: string;
-    private _gridSiblingsHasNewRow;
     /**
@@ -19,0 +18,0 @@ * Preserve the last element position in the list .

types/Element/DFlexCoreElement.d.ts

@@ -58,3 +58,2 @@ import { BoxRect, BoxRectAbstract, PointNum } from "@dflex/utils";
     initElmRect(DOM: HTMLElement): void;
-    private _updateCurrentIndicators;
     getDimensions(DOM: HTMLElement): PointNum;
@@ -64,16 +63,14 @@ getInitialPosition(): PointNum;
     changeVisibility(DOM: HTMLElement, isVisible: boolean): void;
-    transform(DOM: HTMLElement): void;
+    private _transform;
     updateIndex(DOM: HTMLElement, i: number): void;
-    private _updateOrderIndexing;
-    assignNewPosition(branchIDsOrder: string[], newIndex: number): void;
-    private _leaveToNewPosition;
+    assignNewIndex(branchIDsOrder: string[], newIndex: number): void;
+    private _leaveToNewIndex;
+    private _pushToTranslateHistory;
+    private _transformOrPend;
+    private _transformationProcess;
     /**
-     *  Set a new translate position and store the old one.
-     */
-    private _seTranslate;
-    /**
      *
      * @param DOM
      * @param siblings
-     * @param direction
+     * @param mainAxisDirection
      * @param elmPos
@@ -83,6 +80,5 @@ * @param operationID
      */
-    reconcilePosition(axis: Axes, direction: Direction, DOM: HTMLElement, siblings: string[], elmPos: PointNum, operationID: string): void;
-    hasTransformed(): boolean;
-    hasTransformedFromOrigin(): boolean;
-    needReconciliation(): boolean;
+    reconcilePosition(axis: Axes, mainAxisDirection: Direction, DOM: HTMLElement, siblings: string[], elmPos: PointNum, operationID: string): void;
+    restorePosition(DOM: HTMLElement): void;
+    assignNewPosition(DOM: HTMLElement, t: PointNum): void;
     /**
@@ -93,3 +89,5 @@ * Roll back element position.
      */
-    rollBack(DOM: HTMLElement, cycleID: string): void;
+    rollBackPosition(DOM: HTMLElement, cycleID: string): void;
+    hasTransformedFromOrigin(): boolean;
+    needDOMReconciliation(): boolean;
     refreshIndicators(DOM: HTMLElement): void;
@@ -96,0 +94,0 @@ getSerializedInstance(): DFlexSerializedElement;

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

Worsened metrics

Total package byte prevSize

139698

decreased by-0.2%

Lines of code

3340

decreased by-0.86%

No dependency changes