@dflex/core-instance - npm Package Compare versions

Comparing version 3.6.1 to 3.6.2

dist/dev.js

@@ -8,2 +8,3 @@ 'use strict';
     this.setAxes(x, y);
+    Object.seal(this);
   }
@@ -23,5 +24,8 @@ setAxes(x, y) {
   }
-  isEqual(target) {
+  isInstanceEqual(target) {
     return this.x === target.x && this.y === target.y;
   }
+  isEqual(x, y) {
+    return this.x === x && this.y === y;
+  }
 }
@@ -34,6 +38,2 @@
   }
-  decrease(point) {
-    this.x -= point.x;
-    this.y -= point.y;
-  }
   multiplyAll(val) {
@@ -48,36 +48,94 @@ this.x *= val;
 
-class FourDirectionsBool {
-  constructor() {
-    this.reset();
+class PointBool extends Point {
+  isOneTruthy() {
+    return this.x || this.y;
   }
-  reset() {
-    this.isLeftFromTop = false;
-    this.isLeftFromBottom = false;
-    this.isLeftFromLeft = false;
-    this.isLeftFromRight = false;
+  isAllFalsy() {
+    return !this.x && !this.y;
   }
-  isOutY() {
-    return this.isLeftFromTop || this.isLeftFromBottom;
+  setFalsy() {
+    this.x = false;
+    this.y = false;
   }
-  setOutY(up, down) {
-    this.isLeftFromTop = up;
-    this.isLeftFromBottom = down;
+}
+
+class FourDirections {
+  constructor(top, right, bottom, left) {
+    this.setAll(top, right, bottom, left);
+    Object.seal(this);
   }
-  setOutYFalsy() {
-    this.isLeftFromTop = false;
-    this.isLeftFromBottom = false;
+  setAll(top, right, bottom, left) {
+    this.top = top;
+    this.right = right;
+    this.bottom = bottom;
+    this.left = left;
   }
-  isOutX() {
-    return this.isLeftFromLeft || this.isLeftFromRight;
+  getAll() {
+    return {
+      up: this.top,
+      right: this.right,
+      bottom: this.bottom,
+      left: this.left
+    };
   }
-  setOutX(left, right) {
-    this.isLeftFromLeft = left;
-    this.isLeftFromRight = right;
+  setByAxis(axis, x, y) {
+    switch (axis) {
+      case "x":
+        this.left = x;
+        this.right = y;
+        break;
+      default:
+        this.top = x;
+        this.bottom = y;
+        break;
+    }
   }
-  setOutXFalsy() {
-    this.isLeftFromLeft = false;
-    this.isLeftFromRight = false;
+  setOne(axis, direction, value) {
+    switch (axis) {
+      case "x":
+        if (direction === -1) {
+          this.left = value;
+        } else {
+          this.right = value;
+        }
+        break;
+      default:
+        if (direction === -1) {
+          this.top = value;
+        } else {
+          this.bottom = value;
+        }
+        break;
+    }
   }
+  getOne(axis, direction) {
+    switch (axis) {
+      case "x":
+        return direction === -1 ? this.left : this.right;
+      default:
+        return direction === -1 ? this.top : this.bottom;
+    }
+  }
 }
 
+class FourDirectionsBool extends FourDirections {
+  constructor() {
+    super(false, false, false, false);
+  }
+  reset() {
+    this.setAll(false, false, false, false);
+  }
+  isOneTruthyByAxis(axis) {
+    switch (axis) {
+      case "x":
+        return this.left || this.right;
+      default:
+        return this.top || this.bottom;
+    }
+  }
+  isOneTruthy() {
+    return this.left || this.right || this.top || this.bottom;
+  }
+}
+
 function dirtyAssignBiggestRect($, elm) {
@@ -146,5 +204,9 @@ const { top, left, right, bottom } = elm;
     if (!this.thresholds[dp]) {
-      this._createThreshold(dp, {
-        ...this.thresholds[key]
-      }, false);
+      this._createThreshold(
+        dp,
+        {
+          ...this.thresholds[key]
+        },
+        false
+      );
       return;
@@ -160,3 +222,6 @@ }
   updateMainThreshold(key, rect, isInner) {
-    const threshold = this._getThreshold(getBoundariesFromDimensions(rect), isInner);
+    const threshold = this._getThreshold(
+      getBoundariesFromDimensions(rect),
+      isInner
+    );
     {
@@ -174,20 +239,44 @@ if (!this.thresholds[key]) {
     const { height, width } = unifiedContainerDimensions;
-    this._createThreshold(insertionLayerKey, {
-      left,
-      top,
-      right: left + width,
-      bottom: top + height
-    }, false);
+    this._createThreshold(
+      insertionLayerKey,
+      {
+        left,
+        top,
+        right: left + width,
+        bottom: top + height
+      },
+      false
+    );
     this._addDepthThreshold(insertionLayerKey, childDepth);
   }
-  isOutThresholdH(key, XLeft, XRight) {
-    const { left, right } = this.thresholds[key];
-    this.isOut[key].setOutX(XLeft < left, XRight > right);
-    return this.isOut[key].isOutX();
+  isOutThresholdByAxis(axis, key, startingPos, endingPos) {
+    const { left, right, top, bottom } = this.thresholds[key];
+    if (axis === "x") {
+      this.isOut[key].setByAxis(axis, startingPos < left, endingPos > right);
+    }
+    if (axis === "y") {
+      this.isOut[key].setByAxis(axis, startingPos < top, endingPos > bottom);
+    }
+    return this.isOut[key].isOneTruthyByAxis(axis);
   }
-  isOutThresholdV(key, YTop, YBottom) {
-    const { top, bottom } = this.thresholds[key];
-    this.isOut[key].setOutY(YTop < top, YBottom > bottom);
-    return this.isOut[key].isOutY();
+  isOutThresholdByDirection(axis, direction, key, startingPos, endingPos) {
+    const { left, right, top, bottom } = this.thresholds[key];
+    const is = axis === "x" ? direction === -1 ? startingPos < left : endingPos > right : direction === -1 ? startingPos < top : endingPos > bottom;
+    this.isOut[key].setOne(axis, direction, is);
+    return is;
   }
+  isOutThreshold(key, top, right, bottom, left) {
+    const ref = this.thresholds[key];
+    this.isOut[key].setAll(
+      top < ref.top,
+      right > ref.right,
+      bottom > ref.bottom,
+      left < ref.left
+    );
+    return this.isOut[key].isOneTruthy();
+  }
+  isShallowOutThreshold(key, top, right, bottom, left) {
+    const ref = this.thresholds[key];
+    return top < ref.top || right > ref.right || bottom > ref.bottom || left < ref.left;
+  }
   destroy() {
@@ -211,3 +300,5 @@ Object.keys(this.thresholds).forEach((key) => {
       if (iterationCounter > MAX_LOOP_ELEMENTS_TO_WARN) {
-        throw new Error(`getParentElm: DFlex detects performance issues during iterating for nearest parent element.Please check your registered interactive element at id:${baseElement.id}.`);
+        throw new Error(
+          `getParentElm: DFlex detects performance issues during iterating for nearest parent element.Please check your registered interactive element at id:${baseElement.id}.`
+        );
       }
@@ -302,3 +393,6 @@ }
     });
-    this.currentPosition = new PointNum(this.initialOffset.left, this.initialOffset.top);
+    this.currentPosition = new PointNum(
+      this.initialOffset.left,
+      this.initialOffset.top
+    );
     this.grid = new PointNum(0, 0);
@@ -310,3 +404,6 @@ this.hasPendingTransform = false;
     const { left, top } = this.initialOffset;
-    this.currentPosition.setAxes(left + this.translate.x, top + this.translate.y);
+    this.currentPosition.setAxes(
+      left + this.translate.x,
+      top + this.translate.y
+    );
     if (!this.isVisible)
@@ -330,5 +427,5 @@ this.hasPendingTransform = true;
     if (this.animatedFrame !== null) {
-      window.cancelAnimationFrame(this.animatedFrame);
+      cancelAnimationFrame(this.animatedFrame);
     }
-    this.animatedFrame = window.requestAnimationFrame(() => {
+    this.animatedFrame = requestAnimationFrame(() => {
       _DFlexCoreNode.transform(DOM, this.translate.x, this.translate.y);
@@ -348,4 +445,6 @@ this.animatedFrame = null;
       {
-        console.error(`Illegal Attempt: Received an index:${newIndex} on siblings list:${branchIDsOrder.length - 1}.
-`);
+        console.error(
+          `Illegal Attempt: Received an index:${newIndex} on siblings list:${branchIDsOrder.length - 1}.
+`
+        );
       }
@@ -356,6 +455,11 @@ return;
       {
-        console.error("Illegal Attempt: Colliding in positions.\n", `Element id: ${this.id}
-`, `Collided at index: ${newIndex}
-`, `Siblings list: ${branchIDsOrder}
-`);
+        console.error(
+          "Illegal Attempt: Colliding in positions.\n",
+          `Element id: ${this.id}
+`,
+          `Collided at index: ${newIndex}
+`,
+          `Siblings list: ${branchIDsOrder}
+`
+        );
       }
@@ -399,3 +503,6 @@ return;
     this._seTranslate(DOM, elmSpace, axis, operationID);
-    const { oldIndex, newIndex } = this._updateOrderIndexing(DOM, direction * numberOfPassedElm);
+    const { oldIndex, newIndex } = this._updateOrderIndexing(
+      DOM,
+      direction * numberOfPassedElm
+    );
     if (axis === "z") {
@@ -451,3 +558,3 @@ const inc = direction * numberOfPassedElm;
   }
-  getSerializedElm() {
+  getSerializedInstance() {
     return {
@@ -511,6 +618,6 @@ type: _DFlexCoreNode.getType(),
 
-const _DFlexParentContainer = class {
-  constructor() {
+class DFlexParentContainer {
+  constructor(originLength) {
     this.grid = new PointNum(1, 1);
-    this.originLength = _DFlexParentContainer.OUT_OF_RANGE;
+    this.originLength = originLength;
     this._boundariesByRow = {};
@@ -521,5 +628,3 @@ this._gridSiblingsHasNewRow = false;
     if (!this._boundariesByRow[this.grid.x]) {
-      this._boundariesByRow[this.grid.x] = {
-        ...rect
-      };
+      this._boundariesByRow[this.grid.x] = Object.seal({ ...rect });
       return;
@@ -580,6 +685,9 @@ }
   preservePosition(position) {
-    this.lastElmPosition = new PointNum(position.x, position.y);
+    if (!this.lastElmPosition) {
+      this.lastElmPosition = new PointNum(position.x, position.y);
+    } else {
+      this.lastElmPosition.setAxes(position.x, position.y);
+    }
   }
-};
-let DFlexParentContainer = _DFlexParentContainer;
+}
 DFlexParentContainer.OUT_OF_RANGE = -1;
@@ -640,12 +748,16 @@
     this.animatedScrollListener = () => {
-      this.animatedListener.call(this, "_updateScrollCoordinates", this._scrollEventCallback);
+      this.animatedListener.call(
+        this,
+        "_updateScrollCoordinates",
+        this._scrollEventCallback
+      );
     };
     this.animatedResizeListener = () => {
-      this.animatedListener.call(this, "_setScrollRects", null);
+      this.animatedListener.call(this, "_setScrollRect", null);
     };
     this.allowDynamicVisibility = false;
-    this.hasOverflowX = false;
-    this.hasOverflowY = false;
-    this._innerThreshold = null;
-    this._outerThreshold = null;
+    this.hasOverflow = new PointBool(false, false);
+    this.invisibleDistance = new FourDirections(0, 0, 0, 0);
+    this._innerThresholdInViewport = null;
+    this._outerThresholdInViewport = null;
     this._SK = SK;
@@ -658,9 +770,17 @@ this._threshold_inner_key = `scroll_inner_${SK}`;
     [this.scrollContainerDOM, this.hasDocumentAsContainer] = getScrollContainer(element);
-    this._setScrollRects();
+    this._setScrollRect();
+    const { scrollLeft, scrollTop } = this.scrollContainerDOM;
+    this._updateInvisibleDistance(scrollLeft, scrollTop, false);
+    this._setOverflow();
     if (branchLength > _DFlexScrollContainer._MAX_NUM_OF_SIBLINGS_BEFORE_DYNAMIC_VISIBILITY) {
-      this._setOverflow();
       if (this.allowDynamicVisibility) {
         this._scrollEventCallback = scrollEventCallback;
-        this._outerThreshold = new DFlexThreshold(_DFlexScrollContainer._OUTER_THRESHOLD);
-        this._outerThreshold.setMainThreshold(this._threshold_outer_key, this.scrollContainerRect, false);
+        this._outerThresholdInViewport = new DFlexThreshold(
+          _DFlexScrollContainer._OUTER_THRESHOLD
+        );
+        this._outerThresholdInViewport.setMainThreshold(
+          this._threshold_outer_key,
+          this.scrollContainerRect,
+          false
+        );
       }
@@ -670,3 +790,6 @@ }
   }
-  _setScrollRects() {
+  static getType() {
+    return "scroll:container";
+  }
+  _setScrollRect() {
     const { scrollHeight, scrollWidth, scrollLeft, scrollTop } = this.scrollContainerDOM;
@@ -680,13 +803,16 @@ this.scrollRect = Object.seal({
     let scrollContainerRect;
+    const { clientHeight, clientWidth } = this.scrollContainerDOM;
+    scrollContainerRect = {
+      height: clientHeight,
+      width: clientWidth,
+      left: 0,
+      top: 0
+    };
     if (!this.hasDocumentAsContainer) {
-      const { height, width, left, top } = this.scrollContainerDOM.getBoundingClientRect();
-      scrollContainerRect = { height, width, left, top };
-    } else {
-      const viewportHeight = Math.max(this.scrollContainerDOM.clientHeight || 0, window.innerHeight || 0);
-      const viewportWidth = Math.max(this.scrollContainerDOM.clientWidth || 0, window.innerWidth || 0);
+      const { left, top } = this.scrollContainerDOM.getBoundingClientRect();
       scrollContainerRect = {
-        height: viewportHeight,
-        width: viewportWidth,
-        left: 0,
-        top: 0
+        height: clientHeight,
+        width: clientWidth,
+        left,
+        top
       };
@@ -697,10 +823,12 @@ }
   _setOverflow() {
-    this.hasOverflowY = hasOverFlow(this.scrollRect, this.scrollContainerRect, "y");
-    this.hasOverflowX = hasOverFlow(this.scrollRect, this.scrollContainerRect, "x");
+    this.hasOverflow.setAxes(
+      hasOverFlow(this.scrollRect, this.scrollContainerRect, "x"),
+      hasOverFlow(this.scrollRect, this.scrollContainerRect, "y")
+    );
     this.allowDynamicVisibility = false;
-    if (this.hasOverflowY && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "y")) {
+    if (this.hasOverflow.y && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "y")) {
       this.allowDynamicVisibility = true;
       return;
     }
-    if (this.hasOverflowX && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "x")) {
+    if (this.hasOverflow.x && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "x")) {
       this.allowDynamicVisibility = true;
@@ -712,8 +840,42 @@ }
     const isUpdated = scrollTop !== this.scrollRect.top || scrollLeft !== this.scrollRect.left;
+    if (!isUpdated) {
+      return false;
+    }
+    this._updateInvisibleDistance(scrollLeft, scrollTop, false);
+    return isUpdated;
+  }
+  _updateInvisibleDistance(scrollLeft, scrollTop, triggerScrollEventCallback) {
     this.scrollRect.top = scrollTop;
     this.scrollRect.left = scrollLeft;
-    return isUpdated;
+    const invisibleYTop = this.scrollRect.height - scrollTop;
+    const invisibleXLeft = this.scrollRect.width - scrollLeft;
+    this.invisibleDistance.setAll(
+      scrollTop,
+      invisibleXLeft - this.scrollContainerRect.width,
+      invisibleYTop - this.scrollContainerRect.height,
+      scrollLeft
+    );
+    if (triggerScrollEventCallback && this._scrollEventCallback !== null) {
+      this._scrollEventCallback(this._SK);
+    }
   }
+  scrollTo(x, y) {
+    this._updateInvisibleDistance(x, y, true);
+    this.scrollContainerDOM.scrollTop = y;
+    this.scrollContainerDOM.scrollLeft = x;
+  }
+  hasInvisibleSpace(axis, direction) {
+    const val = this.invisibleDistance.getOne(axis, direction);
+    return val > 0;
+  }
+  _tagDOMString(isAttachListener, hasScrollListener) {
+    const elmHoldDataset = this.hasDocumentAsContainer ? document.body : this.scrollContainerDOM;
+    if (isAttachListener) {
+      elmHoldDataset.dataset[this._listenerDataset] = `${hasScrollListener}`;
+    } else {
+      delete elmHoldDataset.dataset[this._listenerDataset];
+    }
+  }
   _setResizeAndScrollListeners(isAttachListener = true) {
-    const hasScrollListener = this.hasOverflowX || this.hasOverflowY;
+    const hasScrollListener = this.hasOverflow.isOneTruthy() && this.allowDynamicVisibility;
     const type = isAttachListener ? "addEventListener" : "removeEventListener";
@@ -723,10 +885,9 @@ const container = this.hasDocumentAsContainer ? window : this.scrollContainerDOM;
     container[type]("resize", this.animatedResizeListener, opts);
-    if (hasScrollListener && this.allowDynamicVisibility) {
+    if (hasScrollListener) {
       container[type]("scroll", this.animatedScrollListener, opts);
+      this._tagDOMString(isAttachListener, true);
+      return;
     }
-    const elmHoldDataset = this.hasDocumentAsContainer ? document.body : this.scrollContainerDOM;
-    if (isAttachListener) {
-      elmHoldDataset.dataset[this._listenerDataset] = `${this.allowDynamicVisibility}`;
-    } else {
-      delete elmHoldDataset.dataset[this._listenerDataset];
+    if (!this.hasDocumentAsContainer) {
+      this._tagDOMString(isAttachListener, false);
     }
@@ -737,19 +898,26 @@ }
   }
-  setInnerThreshold(threshold) {
-    this._innerThreshold = new DFlexThreshold(threshold);
-    this._innerThreshold.setMainThreshold(this._threshold_inner_key, this.scrollContainerRect, true);
-  }
-  _isScrollAvailable(isVertical) {
-    {
-      if (this._innerThreshold === null) {
-        throw new Error("Scroll threshold is not set.");
-      }
+  _garbageCollectInnerThreshold() {
+    if (this._innerThresholdInViewport !== null) {
+      this._innerThresholdInViewport.destroy();
+      this._innerThresholdInViewport = null;
     }
-    return this._hasThrottledFrame === null && isVertical ? this.hasOverflowY : this.hasOverflowX;
   }
-  isOutThresholdV(y) {
-    return this._isScrollAvailable(true) && this._innerThreshold.isOutThresholdV(this._threshold_inner_key, y, y);
+  setInnerThreshold(threshold) {
+    this._garbageCollectInnerThreshold();
+    this._innerThresholdInViewport = new DFlexThreshold(threshold);
+    this._innerThresholdInViewport.setMainThreshold(
+      this._threshold_inner_key,
+      this.scrollContainerRect,
+      true
+    );
   }
-  isOutThresholdH(x) {
-    return this._isScrollAvailable(false) && this._innerThreshold.isOutThresholdV(this._threshold_inner_key, x, x);
+  isOutThreshold(axis, direction, startingPos, endingPos) {
+    const adjustToViewport = axis === "y" ? this.scrollRect.top : this.scrollRect.left;
+    return this.hasOverflow[axis] && this._innerThresholdInViewport.isOutThresholdByDirection(
+      axis,
+      direction,
+      this._threshold_inner_key,
+      startingPos - adjustToViewport,
+      endingPos - adjustToViewport
+    );
   }
@@ -764,12 +932,19 @@ getMaximumScrollContainerLeft() {
   }
-  isElementVisibleViewportX(currentLeft) {
-    return currentLeft <= this.getMaximumScrollContainerLeft() && currentLeft >= this.scrollRect.left;
+  isElementVisibleViewport(topPos, leftPos, height, width) {
+    const currentTopWithScroll = topPos - this.scrollRect.top;
+    const currentLeftWithScroll = leftPos - this.scrollRect.left;
+    const isOutThreshold = this._outerThresholdInViewport.isShallowOutThreshold(
+      this._threshold_outer_key,
+      currentTopWithScroll,
+      currentLeftWithScroll + width,
+      currentTopWithScroll + height,
+      currentLeftWithScroll
+    );
+    return !isOutThreshold;
   }
-  isElementVisibleViewportY(currentTop) {
-    return currentTop <= this.getMaximumScrollContainerTop() && currentTop >= this.scrollRect.top;
-  }
   animatedListener(setter, cb) {
-    if (this._hasThrottledFrame !== null)
-      return;
-    this._hasThrottledFrame = window.requestAnimationFrame(() => {
+    if (this._hasThrottledFrame !== null) {
+      cancelAnimationFrame(this._hasThrottledFrame);
+    }
+    this._hasThrottledFrame = requestAnimationFrame(() => {
       const isUpdated = this[setter]();
@@ -782,7 +957,24 @@ if (isUpdated && cb) {
   }
+  _getVisibleScreen() {
+    const { height, width } = this.scrollContainerRect;
+    return {
+      height,
+      width
+    };
+  }
+  getSerializedInstance() {
+    return {
+      type: _DFlexScrollContainer.getType(),
+      version: 3,
+      key: this._SK,
+      hasOverFlow: this.hasOverflow.getInstance(),
+      hasDocumentAsContainer: this.hasDocumentAsContainer,
+      scrollRect: this.scrollRect,
+      scrollContainerRect: this.scrollContainerRect,
+      invisibleDistance: this.invisibleDistance.getAll(),
+      visibleScreen: this._getVisibleScreen()
+    };
+  }
   destroy() {
-    if (this._innerThreshold !== null) {
-      this._innerThreshold.destroy();
-      this._innerThreshold = null;
-    }
+    this._garbageCollectInnerThreshold();
     this._scrollEventCallback = null;
@@ -795,4 +987,4 @@ this._setResizeAndScrollListeners(false);
 DFlexScrollContainer._OUTER_THRESHOLD = {
-  horizontal: 35,
-  vertical: 35
+  horizontal: 25,
+  vertical: 25
 };
@@ -799,0 +991,0 @@ DFlexScrollContainer._MAX_NUM_OF_SIBLINGS_BEFORE_DYNAMIC_VISIBILITY = 10;

dist/dflex-core.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"t",{value:!0});class t extends class{constructor(t,s){this.setAxes(t,s)}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}}isEqual(t){return this.x===t.x&&this.y===t.y}}{increase(t){this.x+=t.x,this.y+=t.y}decrease(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 s{constructor(){this.reset()}reset(){this.isLeftFromTop=!1,this.isLeftFromBottom=!1,this.isLeftFromLeft=!1,this.isLeftFromRight=!1}isOutY(){return this.isLeftFromTop||this.isLeftFromBottom}setOutY(t,s){this.isLeftFromTop=t,this.isLeftFromBottom=s}setOutYFalsy(){this.isLeftFromTop=!1,this.isLeftFromBottom=!1}isOutX(){return this.isLeftFromLeft||this.isLeftFromRight}setOutX(t,s){this.isLeftFromLeft=t,this.isLeftFromRight=s}setOutXFalsy(){this.isLeftFromLeft=!1,this.isLeftFromRight=!1}}function i(t,s){const{top:i,left:h,right:e,bottom:r}=s;h<t.left&&(t.left=h),i<t.top&&(t.top=i),e>t.right&&(t.right=e),r>t.bottom&&(t.bottom=r)}function h(t){return{top:t.top,left:t.left,bottom:t.top+t.height,right:t.left+t.width}}class e{constructor(t){this.i=t,this.thresholds={},this.isOut={}}h({width:s,height:i}){const h=Math.round(this.i.horizontal*s/100),e=Math.round(this.i.vertical*i/100);this.o=new t(h,e)}l(t,s){const{x:i,y:h}=this.o,{top:e,left:r,bottom:n,right:o}=t;return s?{left:r+i,right:o-i,top:e+h,bottom:n-h}:{left:r-i,right:o+i,top:e-h,bottom:n+h}}u(t,i,h){const e=this.l(i,h);this.thresholds[t]=Object.seal(e),this.isOut[t]=new s}p(t,s){const h=`${s}`;if(!this.thresholds[h])return void this.u(h,{...this.thresholds[t]},!1);i(this.thresholds[s],this.thresholds[t])}setMainThreshold(t,s,i){this.h(s),this.u(t,h(s),i)}updateMainThreshold(t,s,i){const e=this.l(h(s),i);Object.assign(this.thresholds[t],e),this.isOut[t].reset()}setContainerThreshold(t,s,i,h,e){this.u(t,h,!1);const{top:r,left:n}=h,{height:o,width:l}=e;this.u(s,{left:n,top:r,right:n+l,bottom:r+o},!1),this.p(s,i)}isOutThresholdH(t,s,i){const{left:h,right:e}=this.thresholds[t];return this.isOut[t].setOutX(s<h,i>e),this.isOut[t].isOutX()}isOutThresholdV(t,s,i){const{top:h,bottom:e}=this.thresholds[t];return this.isOut[t].setOutY(s<h,i>e),this.isOut[t].isOutY()}destroy(){Object.keys(this.thresholds).forEach((t=>{delete this.thresholds[t]})),Object.keys(this.isOut).forEach((t=>{delete this.isOut[t]}))}}const r=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class n{static getType(){return"base:node"}static transform(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new t(0,0)),this.g=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.g.has(s)||(t.setAttribute(r[s],`${i}`),this.g.add(s)):t.setAttribute(r[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.g.has(s)&&(t.removeAttribute(r[s]),this.g.delete(s))}clearAttributes(t){this.g.forEach((s=>{this.removeAttribute(t,s)})),this.g.clear()}}const o=class extends n{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:r}=t;super(r),this.order=s,this.keys=i,this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null}static getType(){return"core:node"}m(s,i,h){const{height:e,width:r,left:n,top:o}=s.getBoundingClientRect();this.initialOffset=Object.freeze({height:e,width:r,left:n+i,top:o+h}),this.currentPosition=new t(this.initialOffset.left,this.initialOffset.top),this.grid=new t(0,0),this.hasPendingTransform=!1}O(t){this.translate.increase(t);const{left:s,top:i}=this.initialOffset;this.currentPosition.setAxes(s+this.translate.x,i+this.translate.y),this.isVisible||(this.hasPendingTransform=!0)}resume(t,s,i){this.initTranslate(),this.m(t,s,i)}changeVisibility(t,s){s!==this.isVisible&&(this.isVisible=s,this.hasPendingTransform&&this.isVisible&&(this.transform(t),this.hasPendingTransform=!1))}transform(t){null!==this.animatedFrame&&window.cancelAnimationFrame(this.animatedFrame),this.animatedFrame=window.requestAnimationFrame((()=>{o.transform(t,this.translate.x,this.translate.y),this.animatedFrame=null}))}T(t,s){const{self:i}=this.order,h=i+s;return this.order.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)}_(t,s,i){t[i]="",t[s]=this.id}v(t,s,i,h,e=!1){if(h){const t={ID:h,axis:i,translate:{x:this.translate.x,y:this.translate.y}};Array.isArray(this.I)?this.I.push(t):this.I=[t]}this.O(s),e||this.isVisible?(this.transform(t),this.hasPendingTransform=!1):this.hasPendingTransform=!0}setPosition(t,s,i,h,e,r){"z"===r?h.multiplyAll(i):h[r]*=i,this.v(t,h,r,e);const{oldIndex:n,newIndex:o}=this.T(t,1*i);if("z"===r){const t=1*i;this.grid.increase({x:t,y:t})}else this.grid[r]+=1*i;this._(s,o,n)}rollBack(t,s,i){if(!Array.isArray(this.I)||0===this.I.length||this.I[this.I.length-1].ID!==s)return;const h=this.I.pop(),{translate:e,axis:r}=h,n={x:e.x-this.translate.x,y:e.y-this.translate.y};let o=0;"z"===r?(o=n.x>0||n.y>0?1:-1,this.grid.increase({x:o,y:o})):(o=n[r]>0?1:-1,this.grid[r]+=o),this.v(t,n,r,void 0,i),this.T(t,o),this.rollBack(t,s,i)}flushIndicators(s){Array.isArray(this.I)&&(this.I=[]),this.translate instanceof t&&this.translate.setAxes(0,0),this.m(s,0,0)}hasTransformed(){return this.translate instanceof t&&(0!==this.translate.x||0!==this.translate.y)}getOffset(){return{width:this.initialOffset.width,height:this.initialOffset.height,top:this.currentPosition.y,left:this.currentPosition.x}}getSerializedElm(){return{type:o.getType(),version:3,id:this.id,grid:this.grid,translate:this.translate instanceof t?this.translate:null,order:this.order,initialOffset:this.initialOffset,currentOffset:this.getOffset(),hasTransformed:this.hasTransformed(),isVisible:this.isVisible,pendingTransform:this.hasPendingTransform}}};let l=o;l.transform=n.transform;class c extends l{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.currentPosition[i];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.getRectRight():s.getRectBottom();return t[i]-h}isPositionedUnder(t){return t<=this.currentPosition.y}isPositionedLeft(t){return t<=this.currentPosition.x}hasSamePosition(t,s){return this.currentPosition[s]===t.currentPosition[s]}getRectBottom(){return this.currentPosition.y+this.initialOffset.height}getRectRight(){return this.currentPosition.x+this.initialOffset.width}getRectDiff(t,s){const i=c.getRectByAxis(s);return this.initialOffset[i]-t.initialOffset[i]}getDisplacement(t,s){return c.getDisplacement(this.currentPosition,t,s)}getDistance(t,s){return c.getDistance(this.currentPosition,t,s)}}const u=class{constructor(){this.grid=new t(1,1),this.originLength=u.OUT_OF_RANGE,this.S={},this.A=!1}D(t){if(!this.S[this.grid.x])return void(this.S[this.grid.x]={...t});const s=this.S[this.grid.x];(t.bottom>s.bottom||t.top<s.top)&&(this.grid.y+=1,this.A=!0,s.left=0,s.right=0),(t.left>s.right||t.right<s.left)&&(this.A?(this.grid.x=1,this.A=!1):this.grid.x+=1),i(s,t)}registerNewElm(t,s){const{height:h,left:e,top:r,width:n}=t,o={top:r,left:e,right:e+n,bottom:r+h};this.boundaries?i(this.boundaries,o):this.boundaries=o,this.D(o);const l=this.boundaries,c=s;if(!c)return;const u=l.bottom-l.top,a=l.right-l.left;c.height<u&&(c.height=u),c.width<a&&(c.width=u)}resetIndicators(){this.boundaries=null,this.grid.setAxes(1,1),this.S={},this.A=!1}preservePosition(s){this.lastElmPosition=new t(s.x,s.y)}};let a=u;a.OUT_OF_RANGE=-1;const d=/(auto|scroll|overlay)/;function f(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body));return null}(t,(t=>{if(h&&"static"===getComputedStyle(t).getPropertyValue("position"))return!1;const i=getComputedStyle(t),e=t.getBoundingClientRect(),r=i.getPropertyValue("overflow-y");if(d.test(r))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const n=i.getPropertyValue("overflow-x");return!!d.test(n)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function p(t){return"x"===t?"width":"height"}function g(t,s,i){const h=p(i);return t[h]>s[h]}function w(t,s,i){const h=p(i);return t[h]/2>s[h]}const x=class{constructor(t,s,i,h){this.animatedScrollListener=()=>{this.animatedListener.call(this,"_updateScrollCoordinates",this.M)},this.animatedResizeListener=()=>{this.animatedListener.call(this,"_setScrollRects",null)},this.allowDynamicVisibility=!1,this.hasOverflowX=!1,this.hasOverflowY=!1,this.C=null,this.L=null,this.N=s,this.R=`scroll_inner_${s}`,this.j=`scroll_outer_${s}`,this.P=`dflexScrollListener-${s}`,this.$=null,this.M=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=f(t),this.V(),i>x.X&&(this.Y(),this.allowDynamicVisibility&&(this.M=h,this.L=new e(x.B),this.L.setMainThreshold(this.j,this.scrollContainerRect,!1))),this.G()}V(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;let e;if(this.scrollRect=Object.seal({left:i,top:h,width:s,height:t}),this.hasDocumentAsContainer){e={height:Math.max(this.scrollContainerDOM.clientHeight||0,window.innerHeight||0),width:Math.max(this.scrollContainerDOM.clientWidth||0,window.innerWidth||0),left:0,top:0}}else{const{height:t,width:s,left:i,top:h}=this.scrollContainerDOM.getBoundingClientRect();e={height:t,width:s,left:i,top:h}}this.scrollContainerRect=Object.seal(e)}Y(){this.hasOverflowY=g(this.scrollRect,this.scrollContainerRect,"y"),this.hasOverflowX=g(this.scrollRect,this.scrollContainerRect,"x"),this.allowDynamicVisibility=!1,(this.hasOverflowY&&w(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflowX&&w(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}H(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return this.scrollRect.top=s,this.scrollRect.left=t,i}G(t=!0){const s=this.hasOverflowX||this.hasOverflowY,i=t?"addEventListener":"removeEventListener",h=this.hasDocumentAsContainer?window:this.scrollContainerDOM,e={passive:!0};h[i]("resize",this.animatedResizeListener,e),s&&this.allowDynamicVisibility&&h[i]("scroll",this.animatedScrollListener,e);const r=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?r.dataset[this.P]=`${this.allowDynamicVisibility}`:delete r.dataset[this.P]}pauseListeners(t){this.$=t?1:null}setInnerThreshold(t){this.C=new e(t),this.C.setMainThreshold(this.R,this.scrollContainerRect,!0)}U(t){return null===this.$&&t?this.hasOverflowY:this.hasOverflowX}isOutThresholdV(t){return this.U(!0)&&this.C.isOutThresholdV(this.R,t,t)}isOutThresholdH(t){return this.U(!1)&&this.C.isOutThresholdV(this.R,t,t)}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}isElementVisibleViewportX(t){return t<=this.getMaximumScrollContainerLeft()&&t>=this.scrollRect.left}isElementVisibleViewportY(t){return t<=this.getMaximumScrollContainerTop()&&t>=this.scrollRect.top}animatedListener(t,s){null===this.$&&(this.$=window.requestAnimationFrame((()=>{this[t]()&&s&&s(this.N),this.$=null})))}destroy(){null!==this.C&&(this.C.destroy(),this.C=null),this.M=null,this.G(!1),this.scrollContainerDOM=null}};let m=x;m.B={horizontal:35,vertical:35},m.X=10,exports.DFlexBaseNode=n,exports.DFlexNode=c,exports.DFlexParentContainer=a,exports.DFlexScrollContainer=m;
+"use strict";Object.defineProperty(exports,"t",{value:!0});class t{constructor(t,s){this.setAxes(t,s),Object.seal(this)}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}}class s extends t{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 i extends t{isOneTruthy(){return this.x||this.y}isAllFalsy(){return!this.x&&!this.y}setFalsy(){this.x=!1,this.y=!1}}class h{constructor(t,s,i,h){this.setAll(t,s,i,h),Object.seal(this)}setAll(t,s,i,h){this.top=t,this.right=s,this.bottom=i,this.left=h}getAll(){return{up: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}}class e extends h{constructor(){super(!1,!1,!1,!1)}reset(){this.setAll(!1,!1,!1,!1)}isOneTruthyByAxis(t){return"x"===t?this.left||this.right:this.top||this.bottom}isOneTruthy(){return this.left||this.right||this.top||this.bottom}}function n(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)}function r(t){return{top:t.top,left:t.left,bottom:t.top+t.height,right:t.left+t.width}}class o{constructor(t){this.i=t,this.thresholds={},this.isOut={}}h({width:t,height:i}){const h=Math.round(this.i.horizontal*t/100),e=Math.round(this.i.vertical*i/100);this.o=new s(h,e)}l(t,s){const{x:i,y:h}=this.o,{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}}u(t,s,i){const h=this.l(s,i);this.thresholds[t]=Object.seal(h),this.isOut[t]=new e}g(t,s){const i=`${s}`;if(!this.thresholds[i])return void this.u(i,{...this.thresholds[t]},!1);n(this.thresholds[s],this.thresholds[t])}setMainThreshold(t,s,i){this.h(s),this.u(t,r(s),i)}updateMainThreshold(t,s,i){const h=this.l(r(s),i);Object.assign(this.thresholds[t],h),this.isOut[t].reset()}setContainerThreshold(t,s,i,h,e){this.u(t,h,!1);const{top:n,left:r}=h,{height:o,width:l}=e;this.u(s,{left:r,top:n,right:r+l,bottom:n+o},!1),this.g(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].setAll(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 l=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class c{static getType(){return"base:node"}static transform(t,s,i){t.style.transform=`translate3d(${s}px,${i}px, 0)`}constructor(t){this.id=t,this.isPaused=!0}initTranslate(){this.translate||(this.translate=new s(0,0)),this.p=new Set,this.isPaused=!1}setAttribute(t,s,i){"INDEX"!==s?this.p.has(s)||(t.setAttribute(l[s],`${i}`),this.p.add(s)):t.setAttribute(l[s],`${i}`)}removeAttribute(t,s){"INDEX"!==s&&this.p.has(s)&&(t.removeAttribute(l[s]),this.p.delete(s))}clearAttributes(t){this.p.forEach((s=>{this.removeAttribute(t,s)})),this.p.clear()}}const a=class extends c{constructor(t){const{order:s,keys:i,depth:h,readonly:e,id:n}=t;super(n),this.order=s,this.keys=i,this.depth=h,this.readonly=e,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null}static getType(){return"core:node"}m(t,i,h){const{height:e,width:n,left:r,top:o}=t.getBoundingClientRect();this.initialOffset=Object.freeze({height:e,width:n,left:r+i,top:o+h}),this.currentPosition=new s(this.initialOffset.left,this.initialOffset.top),this.grid=new s(0,0),this.hasPendingTransform=!1}T(t){this.translate.increase(t);const{left:s,top:i}=this.initialOffset;this.currentPosition.setAxes(s+this.translate.x,i+this.translate.y),this.isVisible||(this.hasPendingTransform=!0)}resume(t,s,i){this.initTranslate(),this.m(t,s,i)}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((()=>{a.transform(t,this.translate.x,this.translate.y),this.animatedFrame=null}))}O(t,s){const{self:i}=this.order,h=i+s;return this.order.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)}_(t,s,i){t[i]="",t[s]=this.id}v(t,s,i,h,e=!1){if(h){const t={ID:h,axis:i,translate:{x:this.translate.x,y:this.translate.y}};Array.isArray(this.I)?this.I.push(t):this.I=[t]}this.T(s),e||this.isVisible?(this.transform(t),this.hasPendingTransform=!1):this.hasPendingTransform=!0}setPosition(t,s,i,h,e,n){"z"===n?h.multiplyAll(i):h[n]*=i,this.v(t,h,n,e);const{oldIndex:r,newIndex:o}=this.O(t,1*i);if("z"===n){const t=1*i;this.grid.increase({x:t,y:t})}else this.grid[n]+=1*i;this._(s,o,r)}rollBack(t,s,i){if(!Array.isArray(this.I)||0===this.I.length||this.I[this.I.length-1].ID!==s)return;const h=this.I.pop(),{translate:e,axis:n}=h,r={x:e.x-this.translate.x,y:e.y-this.translate.y};let o=0;"z"===n?(o=r.x>0||r.y>0?1:-1,this.grid.increase({x:o,y:o})):(o=r[n]>0?1:-1,this.grid[n]+=o),this.v(t,r,n,void 0,i),this.O(t,o),this.rollBack(t,s,i)}flushIndicators(t){Array.isArray(this.I)&&(this.I=[]),this.translate instanceof s&&this.translate.setAxes(0,0),this.m(t,0,0)}hasTransformed(){return this.translate instanceof s&&(0!==this.translate.x||0!==this.translate.y)}getOffset(){return{width:this.initialOffset.width,height:this.initialOffset.height,top:this.currentPosition.y,left:this.currentPosition.x}}getSerializedInstance(){return{type:a.getType(),version:3,id:this.id,grid:this.grid,translate:this.translate instanceof s?this.translate:null,order:this.order,initialOffset:this.initialOffset,currentOffset:this.getOffset(),hasTransformed:this.hasTransformed(),isVisible:this.isVisible,pendingTransform:this.hasPendingTransform}}};let u=a;u.transform=c.transform;class d extends u{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let h=t[i]-s.currentPosition[i];return h+=s.translate[i],h}static getDisplacement(t,s,i){const h="x"===i?s.getRectRight():s.getRectBottom();return t[i]-h}isPositionedUnder(t){return t<=this.currentPosition.y}isPositionedLeft(t){return t<=this.currentPosition.x}hasSamePosition(t,s){return this.currentPosition[s]===t.currentPosition[s]}getRectBottom(){return this.currentPosition.y+this.initialOffset.height}getRectRight(){return this.currentPosition.x+this.initialOffset.width}getRectDiff(t,s){const i=d.getRectByAxis(s);return this.initialOffset[i]-t.initialOffset[i]}getDisplacement(t,s){return d.getDisplacement(this.currentPosition,t,s)}getDistance(t,s){return d.getDistance(this.currentPosition,t,s)}}class f{constructor(t){this.grid=new s(1,1),this.originLength=t,this.A={},this.S=!1}D(t){if(!this.A[this.grid.x])return void(this.A[this.grid.x]=Object.seal({...t}));const s=this.A[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),n(s,t)}registerNewElm(t,s){const{height:i,left:h,top:e,width:r}=t,o={top:e,left:h,right:h+r,bottom:e+i};this.boundaries?n(this.boundaries,o):this.boundaries=o,this.D(o);const l=this.boundaries,c=s;if(!c)return;const a=l.bottom-l.top,u=l.right-l.left;c.height<a&&(c.height=a),c.width<u&&(c.width=a)}resetIndicators(){this.boundaries=null,this.grid.setAxes(1,1),this.A={},this.S=!1}preservePosition(t){this.lastElmPosition?this.lastElmPosition.setAxes(t.x,t.y):this.lastElmPosition=new s(t.x,t.y)}}f.OUT_OF_RANGE=-1;const g=/(auto|scroll|overlay)/;function p(t){let s=!1;const i=getComputedStyle(t).getPropertyValue("position"),h="absolute"===i,e=function(t,s){let i=0,h=t;do{if(i+=1,i>1&&s(h))return i=0,h;h=h.parentElement}while(null!==h&&!h.isSameNode(document.body));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(g.test(n))return t.scrollHeight===Math.round(e.height)&&(s=!0),!0;const r=i.getPropertyValue("overflow-x");return!!g.test(r)&&(t.scrollWidth===Math.round(e.width)&&(s=!0),!0)}));return s||"fixed"===i||!e?(s=!0,[document.documentElement,!0]):[e,s]}function x(t){return"x"===t?"width":"height"}function m(t,s,i){const h=x(i);return t[h]>s[h]}function w(t,s,i){const h=x(i);return t[h]/2>s[h]}const y=class{constructor(t,s,e,n){this.animatedScrollListener=()=>{this.animatedListener.call(this,"_updateScrollCoordinates",this.C)},this.animatedResizeListener=()=>{this.animatedListener.call(this,"_setScrollRect",null)},this.allowDynamicVisibility=!1,this.hasOverflow=new i(!1,!1),this.invisibleDistance=new h(0,0,0,0),this.j=null,this.R=null,this.L=s,this.M=`scroll_inner_${s}`,this.N=`scroll_outer_${s}`,this.P=`dflexScrollListener-${s}`,this.$=null,this.C=null,[this.scrollContainerDOM,this.hasDocumentAsContainer]=p(t),this.B();const{scrollLeft:r,scrollTop:l}=this.scrollContainerDOM;this.F(r,l,!1),this.V(),e>y.q&&this.allowDynamicVisibility&&(this.C=n,this.R=new o(y.X),this.R.setMainThreshold(this.N,this.scrollContainerRect,!1)),this.k()}static getType(){return"scroll:container"}B(){const{scrollHeight:t,scrollWidth:s,scrollLeft:i,scrollTop:h}=this.scrollContainerDOM;let e;this.scrollRect=Object.seal({left:i,top:h,width:s,height:t});const{clientHeight:n,clientWidth:r}=this.scrollContainerDOM;if(e={height:n,width:r,left:0,top:0},!this.hasDocumentAsContainer){const{left:t,top:s}=this.scrollContainerDOM.getBoundingClientRect();e={height:n,width:r,left:t,top:s}}this.scrollContainerRect=Object.seal(e)}V(){this.hasOverflow.setAxes(m(this.scrollRect,this.scrollContainerRect,"x"),m(this.scrollRect,this.scrollContainerRect,"y")),this.allowDynamicVisibility=!1,(this.hasOverflow.y&&w(this.scrollRect,this.scrollContainerRect,"y")||this.hasOverflow.x&&w(this.scrollRect,this.scrollContainerRect,"x"))&&(this.allowDynamicVisibility=!0)}G(){const{scrollLeft:t,scrollTop:s}=this.scrollContainerDOM,i=s!==this.scrollRect.top||t!==this.scrollRect.left;return!!i&&(this.F(t,s,!1),i)}F(t,s,i){this.scrollRect.top=s,this.scrollRect.left=t;const h=this.scrollRect.height-s,e=this.scrollRect.width-t;this.invisibleDistance.setAll(s,e-this.scrollContainerRect.width,h-this.scrollContainerRect.height,t),i&&null!==this.C&&this.C(this.L)}scrollTo(t,s){this.F(t,s,!0),this.scrollContainerDOM.scrollTop=s,this.scrollContainerDOM.scrollLeft=t}hasInvisibleSpace(t,s){return this.invisibleDistance.getOne(t,s)>0}U(t,s){const i=this.hasDocumentAsContainer?document.body:this.scrollContainerDOM;t?i.dataset[this.P]=`${s}`:delete i.dataset[this.P]}k(t=!0){const s=this.hasOverflow.isOneTruthy()&&this.allowDynamicVisibility,i=t?"addEventListener":"removeEventListener",h=this.hasDocumentAsContainer?window:this.scrollContainerDOM,e={passive:!0};if(h[i]("resize",this.animatedResizeListener,e),s)return h[i]("scroll",this.animatedScrollListener,e),void this.U(t,!0);this.hasDocumentAsContainer||this.U(t,!1)}pauseListeners(t){this.$=t?1:null}H(){null!==this.j&&(this.j.destroy(),this.j=null)}setInnerThreshold(t){this.H(),this.j=new o(t),this.j.setMainThreshold(this.M,this.scrollContainerRect,!0)}isOutThreshold(t,s,i,h){const e="y"===t?this.scrollRect.top:this.scrollRect.left;return this.hasOverflow[t]&&this.j.isOutThresholdByDirection(t,s,this.M,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}isElementVisibleViewport(t,s,i,h){const e=t-this.scrollRect.top,n=s-this.scrollRect.left;return!this.R.isShallowOutThreshold(this.N,e,n+h,e+i,n)}animatedListener(t,s){null!==this.$&&cancelAnimationFrame(this.$),this.$=requestAnimationFrame((()=>{this[t]()&&s&&s(this.L),this.$=null}))}W(){const{height:t,width:s}=this.scrollContainerRect;return{height:t,width:s}}getSerializedInstance(){return{type:y.getType(),version:3,key:this.L,hasOverFlow:this.hasOverflow.getInstance(),hasDocumentAsContainer:this.hasDocumentAsContainer,scrollRect:this.scrollRect,scrollContainerRect:this.scrollContainerRect,invisibleDistance:this.invisibleDistance.getAll(),visibleScreen:this.W()}}destroy(){this.H(),this.C=null,this.k(!1),this.scrollContainerDOM=null}};let b=y;b.X={horizontal:25,vertical:25},b.q=10,exports.DFlexBaseNode=c,exports.DFlexNode=d,exports.DFlexParentContainer=f,exports.DFlexScrollContainer=b;

package.json

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

types/Container/DFlexParentContainer.d.ts

@@ -1,2 +0,3 @@
-import type { Dimensions, IPointNum, IPointAxes, RectBoundaries, RectDimensions } from "@dflex/utils";
+import { PointNum } from "@dflex/utils";
+import type { Dimensions, AxesPoint, RectBoundaries, RectDimensions } from "@dflex/utils";
 declare class DFlexParentContainer {
@@ -7,3 +8,3 @@ private _boundariesByRow;
     /** Numbers of total columns and rows each container has.  */
-    grid: IPointNum;
+    grid: PointNum;
     /**
@@ -19,10 +20,10 @@ * Origin length for container before being transformed used to prevent
      */
-    lastElmPosition: IPointNum;
+    lastElmPosition: PointNum;
     static OUT_OF_RANGE: number;
-    constructor();
+    constructor(originLength: number);
     private _addNewElmToGridIndicator;
     registerNewElm(offset: RectDimensions, unifiedContainerDimensions?: Dimensions): void;
     resetIndicators(): void;
-    preservePosition(position: IPointAxes): void;
+    preservePosition(position: AxesPoint): void;
 }
 export default DFlexParentContainer;

types/Container/DFlexScrollContainer.d.ts

@@ -0,6 +1,26 @@
+import { AxesPoint, Axis, Dimensions, Direction, FourDirections, PointBool } from "@dflex/utils";
 import type { ThresholdPercentages, RectDimensions } from "@dflex/utils";
 declare type ScrollEventCallback = (SK: string) => void;
+declare type OutputInvisibleDistance = {
+    up: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export declare type SerializedScrollContainer = {
+    type: string;
+    version: 3;
+    key: string;
+    hasOverFlow: AxesPoint<boolean>;
+    hasDocumentAsContainer: boolean;
+    scrollRect: RectDimensions;
+    scrollContainerRect: RectDimensions;
+    invisibleDistance: OutputInvisibleDistance;
+    visibleScreen: Dimensions;
+};
 declare class DFlexScrollContainer {
-    private _innerThreshold;
-    private _outerThreshold;
+    private _innerThresholdInViewport;
+    private _outerThresholdInViewport;
+    private _threshold_inner_key;
+    private _threshold_outer_key;
     private _SK;
@@ -16,4 +36,4 @@ private _scrollEventCallback;
     scrollRect: RectDimensions;
-    hasOverflowX: boolean;
-    hasOverflowY: boolean;
+    hasOverflow: PointBool;
+    invisibleDistance: FourDirections<number>;
     /**
@@ -31,26 +51,75 @@ * Some containers are overflown but in small percentages of the container
     hasDocumentAsContainer: boolean;
-    private _threshold_inner_key;
-    private _threshold_outer_key;
     private _listenerDataset;
     private static _OUTER_THRESHOLD;
     private static _MAX_NUM_OF_SIBLINGS_BEFORE_DYNAMIC_VISIBILITY;
+    static getType(): string;
     constructor(element: HTMLElement, SK: string, branchLength: number, scrollEventCallback: ScrollEventCallback);
-    private _setScrollRects;
+    private _setScrollRect;
     private _setOverflow;
     private _updateScrollCoordinates;
+    /**
+     * When the scroll container is scrolling, the invisible distance is updated
+     * with synthetic values instead of DOM listener values.
+     *
+     * One way binding, because when the scroll container is scrolled then the
+     * is not dragging anymore.
+     *
+     * @param scrollLeft
+     * @param scrollTop
+     */
+    private _updateInvisibleDistance;
+    scrollTo(x: number, y: number): void;
+    /**
+     *
+     * @param axis
+     * @param direction
+     * @returns
+     */
+    hasInvisibleSpace(axis: Axis, direction: Direction): boolean;
+    private _tagDOMString;
     private _setResizeAndScrollListeners;
+    /**
+     * Pausing and resuming the scroll listener. This method should be associated
+     * with scrolling animation to prevent the scroll listener from being called
+     * while scrolling which is causing latency and performance issues.
+     *
+     * Note: when listener is off make sure you call `updateInvisibleDistance` to
+     * keep the the container in sync with the scrollable instance.
+     *
+     * @param pausePlease
+     */
     pauseListeners(pausePlease: boolean): void;
+    private _garbageCollectInnerThreshold;
+    /**
+     * Cerate and set inner threshold for the scroll container that is responsible
+     * for checking if dragged element is out of the scroll container or not.
+     *
+     * Note: this method is called when dragged is triggered so it gives the user
+     * more flexibility to choose the threshold in relation to the dragged element.
+     *
+     * @param threshold
+     */
     setInnerThreshold(threshold: ThresholdPercentages): void;
-    private _isScrollAvailable;
-    isOutThresholdV(y: number): boolean;
-    isOutThresholdH(x: number): boolean;
+    isOutThreshold(axis: Axis, direction: Direction, startingPos: number, endingPos: number): boolean;
+    /**
+     * @deprecated - Should be removed when refactoring retractions.
+     * @returns
+     */
     getMaximumScrollContainerLeft(): number;
+    /**
+     * @deprecated - Should be removed when refactoring retractions.
+     * @returns
+     */
     getMaximumScrollContainerTop(): number;
-    isElementVisibleViewportX(currentLeft: number): boolean;
-    isElementVisibleViewportY(currentTop: number): boolean;
+    isElementVisibleViewport(topPos: number, leftPos: number, height: number, width: number): boolean;
     private animatedListener;
     private animatedScrollListener;
     private animatedResizeListener;
+    private _getVisibleScreen;
+    getSerializedInstance(): SerializedScrollContainer;
+    /**
+     * Clean up the container instances.
+     */
     destroy(): void;
 }
 export default DFlexScrollContainer;

types/Node/DFlexBaseNode.d.ts

@@ -1,6 +0,6 @@
-import type { IPointNum } from "@dflex/utils";
+import { PointNum } from "@dflex/utils";
 import type { AllowedAttributes } from "./constants";
 declare class DFlexBaseNode {
     id: string;
-    translate: IPointNum;
+    translate: PointNum;
     isPaused: boolean;
@@ -7,0 +7,0 @@ private _hasAttribute?;

types/Node/DFlexCoreNode.d.ts

@@ -1,2 +0,3 @@
-import type { RectDimensions, Direction, Axes, IPointNum } from "@dflex/utils";
+import { PointNum } from "@dflex/utils";
+import type { RectDimensions, Direction, Axes } from "@dflex/utils";
 import DFlexBaseNode from "./DFlexBaseNode";
@@ -7,4 +8,4 @@ export declare type SerializedDFlexCoreNode = {
     id: string;
-    translate: IPointNum | null;
-    grid: IPointNum;
+    translate: PointNum | null;
+    grid: PointNum;
     order: DOMGenOrder;
@@ -41,7 +42,7 @@ initialOffset: RectDimensions;
     readonly initialOffset: RectDimensions;
-    currentPosition: IPointNum;
+    currentPosition: PointNum;
     order: DOMGenOrder;
     keys: Keys;
     depth: number;
-    grid: IPointNum;
+    grid: PointNum;
     isVisible: boolean;
@@ -74,3 +75,3 @@ hasPendingTransform: boolean;
      */
-    setPosition(DOM: HTMLElement, iDsInOrder: string[], direction: Direction, elmSpace: IPointNum, operationID: string, axis: Axes): void;
+    setPosition(DOM: HTMLElement, iDsInOrder: string[], direction: Direction, elmSpace: PointNum, operationID: string, axis: Axes): void;
     /**
@@ -86,4 +87,4 @@ * Roll back element position.
     getOffset(): RectDimensions;
-    getSerializedElm(): SerializedDFlexCoreNode;
+    getSerializedInstance(): SerializedDFlexCoreNode;
 }
 export default DFlexCoreNode;

types/Node/DFlexNode.d.ts

@@ -1,7 +0,7 @@
-import type { Axis, IPointAxes } from "@dflex/utils";
+import type { Axis, AxesPoint } from "@dflex/utils";
 import DFlexCoreNode from "./DFlexCoreNode";
 declare class DFlexNode extends DFlexCoreNode {
     static getRectByAxis(axis: Axis): "width" | "height";
-    static getDistance(currentPosition: IPointAxes, elm: DFlexNode, axis: Axis): number;
-    static getDisplacement(currentPosition: IPointAxes, elm: DFlexNode, axis: Axis): number;
+    static getDistance(currentPosition: AxesPoint, elm: DFlexNode, axis: Axis): number;
+    static getDisplacement(currentPosition: AxesPoint, elm: DFlexNode, axis: Axis): number;
     isPositionedUnder(elmY: number): boolean;
@@ -8,0 +8,0 @@ isPositionedLeft(elmX: number): boolean;

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

97602

increased by17.28%

Lines of code

2288

increased by25.44%

No dependency changes