@dflex/core-instance - npm Package Compare versions

Comparing version 3.7.1 to 3.8.0

dist/dev.js

@@ -427,2 +427,34 @@ 'use strict';
 
+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 DFlexThreshold {
@@ -722,32 +754,2 @@ constructor(percentages) {
 
-function setRelativePosition(DOM) {
-  const computedStyle = getComputedStyle(DOM);
-  const position = computedStyle.getPropertyValue("position");
-  if (position === "absolute" || position === "fixed") {
-    {
-      throw new Error(
-        `Element ${DOM.id}, must be positioned as relative. Received: ${position}.`
-      );
-    }
-  }
-}
-function getElementStyle(DOM) {
-  const computedStyle = getComputedStyle(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 regex = /^([0-9]*\.[0-9]*|[0-9]*)(px|em|rem|vw|vh)$/;
-  const widthMatch = computedWidth.match(regex);
-  const heightMatch = computedHeight.match(regex);
-  const width = widthMatch ? parseFloat(widthMatch[1]) : 0;
-  const height = heightMatch ? parseFloat(heightMatch[1]) : 0;
-  return { width, height };
-}
 const _DFlexCoreElement = class extends DFlexBaseElement {
@@ -774,7 +776,6 @@ constructor(eleWithPointer) {
   }
-  _initIndicators(DOM) {
+  initElmRect(DOM) {
     const { height, width, left, top } = DOM.getBoundingClientRect();
     this._initialPosition.setAxes(left, top);
     this.rect.setByPointAndDimensions(top, left, height, width);
-    this.DOMGrid.setAxes(0, 0);
   }
@@ -795,6 +796,14 @@ _updateCurrentIndicators(newPos) {
     }
-    const { width, height } = _DFlexCoreElement.getElementStyle(DOM);
+    const { width, height } = getElmComputedDimensions(DOM);
     this._computedDimensions = new PointNum(width, height);
     return this._computedDimensions;
   }
+  // getMargin(DOM: HTMLElement): BoxRect {
+  //   if (this.margin) {
+  //     return this.margin;
+  //   }
+  //   const { width, height } = getElmComputedDimensions(DOM);
+  //   this.margin = new BoxRect(width, height, height, height);
+  //   return this.margin;
+  // }
   getInitialPosition() {
@@ -805,3 +814,3 @@ return this._initialPosition;
     this.initTranslate();
-    this._initIndicators(DOM);
+    this.initElmRect(DOM);
   }
@@ -963,8 +972,7 @@ changeVisibility(DOM, isVisible) {
   }
-  flushIndicators(DOM) {
+  refreshIndicators(DOM) {
     this._translateHistory = void 0;
     this.translate.setAxes(0, 0);
-    this._initialPosition.setAxes(this.rect.left, this.rect.top);
+    this.hasPendingTransform = false;
     this.DOMOrder.self = this.VDOMOrder.self;
-    this.hasPendingTransform = false;
     DOM.style.removeProperty("transform");
@@ -974,2 +982,4 @@ if (!DOM.getAttribute("style")) {
     }
+    this.initElmRect(DOM);
+    this.DOMGrid.setAxes(0, 0);
   }
@@ -994,4 +1004,2 @@ getSerializedInstance() {
 DFlexCoreElement.transform = DFlexBaseElement.transform;
-DFlexCoreElement.getElementStyle = getElementStyle;
-DFlexCoreElement.setRelativePosition = setRelativePosition;
 
@@ -1195,3 +1203,3 @@ class DFlexElement extends DFlexCoreElement {
     this._threshold_outer_key = `scroll_outer_${SK}`;
-    this._listenerDataset = `dflexScrollListener-${SK}`;
+    this._listenerDataset = `dflexScrollListener_${SK}`;
     this._hasThrottledFrame = null;
@@ -1198,0 +1206,0 @@ this._scrollEventCallback = 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)}class u{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 a=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class d{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(a[s],`${i}`),this.g.add(s)):t.setAttribute(a[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.g.has(s)&&(t.removeAttribute(a[s]),this.g.delete(s))}clearAttributes(t){this.g.forEach((s=>{this.removeAttribute(t,s)})),this.g.clear()}}d.transform=function(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`};const g=class extends d{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"}T(t){const{height:s,width:i,left:h,top:e}=t.getBoundingClientRect();this.m.setAxes(h,e),this.rect.setByPointAndDimensions(e,h,s,i),this.DOMGrid.setAxes(0,0)}O(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.getElementStyle(t);return this.p=new i(s,h),this.p}getInitialPosition(){return this.m}resume(t){this.initTranslate(),this.T(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((()=>{g.transform(t,this.translate.x,this.translate.y),this.hasPendingTransform&&(this.hasPendingTransform=!1),this.animatedFrame=null}))}v(t,s){const{self:i}=this.VDOMOrder,h=i+s;return this.VDOMOrder.self=h,this.setAttribute(t,"INDEX",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}_(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.A)?this.A.push(s):this.A=[s]}if(this.O(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._(t,i,e,n);const{oldIndex:r,newIndex:o}=this.v(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.A)&&this.A.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.A[this.A.length-1].ID!==s)return;const i=this.A.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._(e,t,n,void 0,!0),this.v(t,r),this.rollBack(t,s)}flushIndicators(t){this.A=void 0,this.translate.setAxes(0,0),this.m.setAxes(this.rect.left,this.rect.top),this.DOMOrder.self=this.VDOMOrder.self,this.hasPendingTransform=!1,t.style.removeProperty("transform"),t.getAttribute("style")||t.removeAttribute("style")}getSerializedInstance(){return{type:g.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 f=g;f.transform=d.transform,f.getElementStyle=function(t){const s=getComputedStyle(t),i=s.getPropertyValue("width"),h=s.getPropertyValue("height");i.includes("%")||h.includes("%");const e=/^([0-9]*\.[0-9]*|[0-9]*)(px|em|rem|vw|vh)$/,n=i.match(e),r=h.match(e);return{width:n?parseFloat(n[1]):0,height:r?parseFloat(r[1]):0}},f.setRelativePosition=function(t){const s=getComputedStyle(t).getPropertyValue("position");"absolute"!==s&&"fixed"!==s||(t.style.position="relative")};class p extends f{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=p.getRectByAxis(s);return this.rect[i]-t.rect[i]}getDisplacement(t,s){return p.getDisplacement(this.rect.getPosition(),t,s)}getDistance(t,s){return p.getDistance(this.rect.getPosition(),t,s)}}class x{constructor(t,s,h){this.id=h,this.grid=new i(1,1),this.originLength=s,this.D={},this.S=!1,this.C=null,this.j(t),this.lastElmPosition=null}j(t){const{left:s,top:i,right:h,bottom:e}=t.getBoundingClientRect();this.F=new l(i,h,e,s)}N(t){if(!this.D[this.grid.x])return void(this.D[this.grid.x]=Object.seal({bottom:t.bottom,left:t.left,right:t.right,top:t.top}));const s=this.D[this.grid.x];(t.bottom>s.bottom||t.top<s.top)&&(this.grid.y+=1,this.S=!0,s.left=0,s.right=0),(t.left>s.right||t.right<s.left)&&(this.S?(this.grid.x=1,this.S=!1):this.grid.x+=1),c(s,t)}registerNewElm(t,s){this.C?c(this.C,t):this.C={bottom:t.bottom,left:t.left,right:t.right,top:t.top},this.N(t);const i=this.C,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.C||this.F.getBox()}resetIndicators(t){this.grid.setAxes(1,1),this.originLength=t,this.D={},this.S=!1,this.C=null,this.lastElmPosition=null}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new i(t.x,t.y)}}x.OUT_OF_RANGE=-1;const m=/(auto|scroll|overlay)/;function y(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(m.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!m.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function w(t){return"x"===t?"width":"height"}function b(t,s,i){const h=w(i);return t[h]>s[h]}function T(t,s,i){const h=w(i);return t[h]/2>s[h]}const O=class{constructor(t,s,i,e,n){this.animatedScrollListener=()=>{this.P.call(this,this.R.bind(this),this.B)},this.animatedResizeListener=()=>{this.P.call(this,this.L.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.M=null,this.$=null,this.V=s,this.q=`scroll_inner_${s}`,this.X=`scroll_outer_${s}`,this.k=`dflexScrollListener-${s}`,this.G=null,this.B=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=y(t),this.L();const{scrollLeft:r,scrollTop:c}=this.scrollContainerDOM;this.H(r,c,!1),this.U(),i>O.W&&this.allowDynamicVisibility&&(this.B=n,this.$=new u(O.J),this.$.setMainThreshold(this.X,this.scrollContainerRect,!1)),this.K(),e&&(this.scrollRect.top>0||this.scrollRect.left>0)&&this.scrollTo(0,0,!1)}static getType(){return"scroll:container"}L(){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)}}U(){this.hasOverflow.setAxes(b(this.scrollRect,this.scrollContainerRect,"x"),b(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&T(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&T(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.H(t,s,!1),i)}H(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.B&&this.B(this.V)}scrollTo(t,s,i){this.H(t,s,i),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}Y(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.k]=`${s}`:delete i.dataset[this.k]}K(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.Y(t,!0);this.hasDocumentAsContainer||this.Y(t,!1)}pauseListeners(t){this.G=t?1:null}Z(){null!==this.M&&(this.M.destroy(),this.M=null)}setInnerThreshold(t){this.Z(),this.M=new u(t),this.M.setMainThreshold(this.q,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.M.isOutThresholdByDirection(t,s,this.q,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.$.isShallowOutThreshold(this.X,r,o+h,r+i,o)}P(t,s){null!==this.G&&cancelAnimationFrame(this.G),this.G=requestAnimationFrame((()=>{t()&&s&&s(this.V),this.G=null}))}tt(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:O.getType(),version:3,key:this.V,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect.getBox(),scrollContainerRect:this.scrollContainerRect.getBox(),invisibleDistance:this.invisibleDistance.getBox(),visibleScreen:this.tt()}}destroy(){this.Z(),this.B=null,this.K(!1),this.scrollContainerDOM=null}};let v=O;v.J={horizontal:25,vertical:25},v.W=10,exports.DFlexBaseElement=d,exports.DFlexElement=p,exports.DFlexParentContainer=x,exports.DFlexScrollContainer=v;
+"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}))}O(t,s){const{self:i}=this.VDOMOrder,h=i+s;return this.VDOMOrder.self=h,this.setAttribute(t,"INDEX",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;

package.json

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

types/Element/DFlexCoreElement.d.ts

@@ -1,2 +0,2 @@
-import { BoxRect, BoxRectAbstract, Dimensions, PointNum } from "@dflex/utils";
+import { BoxRect, BoxRectAbstract, PointNum } from "@dflex/utils";
 import type { Direction, Axes, AxesPoint } from "@dflex/utils";
@@ -39,4 +39,2 @@ import DFlexBaseElement from "./DFlexBaseElement";
 }
-declare function setRelativePosition(DOM: HTMLElement): void;
-declare function getElementStyle(DOM: HTMLElement): Dimensions;
 declare class DFlexCoreElement extends DFlexBaseElement {
@@ -58,6 +56,4 @@ private _initialPosition;
     static transform: (DOM: HTMLElement, x: number, y: number) => void;
-    static getElementStyle: typeof getElementStyle;
-    static setRelativePosition: typeof setRelativePosition;
     constructor(eleWithPointer: DFlexElementInput);
-    private _initIndicators;
+    initElmRect(DOM: HTMLElement): void;
     private _updateCurrentIndicators;
@@ -95,5 +91,5 @@ getDimensions(DOM: HTMLElement): PointNum;
     rollBack(DOM: HTMLElement, cycleID: string): void;
-    flushIndicators(DOM: HTMLElement): void;
+    refreshIndicators(DOM: HTMLElement): void;
     getSerializedInstance(): DFlexSerializedElement;
 }
 export default DFlexCoreElement;

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

Improved metrics

Total package byte prevSize

139690

increased by11.85%

Number of package files

17

increased by6.25%

Lines of code

3359

increased by2%

No dependency changes