@dflex/core-instance - npm Package Compare versions

Comparing version 3.6.0 to 3.6.1

dist/dev.js

@@ -45,2 +45,36 @@ 'use strict';
 
+class FourDirectionsBool {
+  constructor() {
+    this.reset();
+  }
+  reset() {
+    this.isLeftFromTop = false;
+    this.isLeftFromBottom = false;
+    this.isLeftFromLeft = false;
+    this.isLeftFromRight = false;
+  }
+  isOutY() {
+    return this.isLeftFromTop || this.isLeftFromBottom;
+  }
+  setOutY(up, down) {
+    this.isLeftFromTop = up;
+    this.isLeftFromBottom = down;
+  }
+  setOutYFalsy() {
+    this.isLeftFromTop = false;
+    this.isLeftFromBottom = false;
+  }
+  isOutX() {
+    return this.isLeftFromLeft || this.isLeftFromRight;
+  }
+  setOutX(left, right) {
+    this.isLeftFromLeft = left;
+    this.isLeftFromRight = right;
+  }
+  setOutXFalsy() {
+    this.isLeftFromLeft = false;
+    this.isLeftFromRight = false;
+  }
+}
+
 function dirtyAssignBiggestRect($, elm) {
@@ -62,2 +96,125 @@ const { top, left, right, bottom } = elm;
 
+function getBoundariesFromDimensions(rect) {
+  return {
+    top: rect.top,
+    left: rect.left,
+    bottom: rect.top + rect.height,
+    right: rect.left + rect.width
+  };
+}
+class DFlexThreshold {
+  constructor(percentages) {
+    this._percentages = percentages;
+    this.thresholds = {};
+    this.isOut = {};
+  }
+  _setPixels({ width, height }) {
+    const x = Math.round(this._percentages.horizontal * width / 100);
+    const y = Math.round(this._percentages.vertical * height / 100);
+    this._pixels = new PointNum(x, y);
+  }
+  _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
+    };
+  }
+  _createThreshold(key, rect, isInner) {
+    const threshold = this._getThreshold(rect, isInner);
+    {
+      if (this.thresholds[key]) {
+        throw new Error(`Threshold ${key} already exists`);
+      }
+    }
+    this.thresholds[key] = Object.seal(threshold);
+    this.isOut[key] = new FourDirectionsBool();
+  }
+  _addDepthThreshold(key, depth) {
+    const dp = `${depth}`;
+    if (!this.thresholds[dp]) {
+      this._createThreshold(dp, {
+        ...this.thresholds[key]
+      }, false);
+      return;
+    }
+    const $ = this.thresholds[depth];
+    dirtyAssignBiggestRect($, this.thresholds[key]);
+  }
+  setMainThreshold(key, rect, isInner) {
+    this._setPixels(rect);
+    this._createThreshold(key, getBoundariesFromDimensions(rect), isInner);
+  }
+  updateMainThreshold(key, rect, isInner) {
+    const threshold = this._getThreshold(getBoundariesFromDimensions(rect), isInner);
+    {
+      if (!this.thresholds[key]) {
+        throw new Error(`Threshold ${key} does not exist.`);
+      }
+    }
+    Object.assign(this.thresholds[key], threshold);
+    this.isOut[key].reset();
+  }
+  setContainerThreshold(SK, insertionLayerKey, childDepth, containerRect, unifiedContainerDimensions) {
+    this._createThreshold(SK, containerRect, false);
+    const { top, left } = containerRect;
+    const { height, width } = unifiedContainerDimensions;
+    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();
+  }
+  isOutThresholdV(key, YTop, YBottom) {
+    const { top, bottom } = this.thresholds[key];
+    this.isOut[key].setOutY(YTop < top, YBottom > bottom);
+    return this.isOut[key].isOutY();
+  }
+  destroy() {
+    Object.keys(this.thresholds).forEach((key) => {
+      delete this.thresholds[key];
+    });
+    Object.keys(this.isOut).forEach((key) => {
+      delete this.isOut[key];
+    });
+  }
+}
+
+const MAX_LOOP_ELEMENTS_TO_WARN = 49;
+function getParentElm(baseElement, cb) {
+  let iterationCounter = 0;
+  let current = baseElement;
+  do {
+    iterationCounter += 1;
+    {
+      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}.`);
+      }
+    }
+    if (iterationCounter > 1) {
+      if (cb(current)) {
+        iterationCounter = 0;
+        return current;
+      }
+    }
+    current = current.parentElement;
+  } while (current !== null && !current.isSameNode(document.body));
+  return null;
+}
+
 const OUT_POS = "data-dragged-out-position";
@@ -74,16 +231,2 @@ const OUT_CONTAINER = "data-dragged-out-container";
 
-function getElmDOMOrThrow(id) {
-  let DOM = document.getElementById(id);
-  if (!DOM) {
-    {
-      throw new Error(`Attach: Element with ID: ${id} is not found.This could be due wrong ID or missing DOM element.`);
-    }
-  }
-  if (!DOM || DOM.nodeType !== Node.ELEMENT_NODE) {
-    {
-      throw new Error(`Attach: Invalid HTMLElement ${DOM} is passed to registry.`);
-    }
-  }
-  return DOM;
-}
 class DFlexBaseNode {
@@ -100,5 +243,2 @@ static getType() {
   }
-  getElmDOMOrThrow() {
-    return getElmDOMOrThrow(this.id);
-  }
   initTranslate() {
@@ -360,6 +500,6 @@ if (!this.translate) {
 
-const _DFlexContainer = class {
+const _DFlexParentContainer = class {
   constructor() {
     this.grid = new PointNum(1, 1);
-    this.originLength = _DFlexContainer.OUT_OF_RANGE;
+    this.originLength = _DFlexParentContainer.OUT_OF_RANGE;
     this._boundariesByRow = {};
@@ -431,7 +571,211 @@ this._gridSiblingsHasNewRow = false;
 };
-let DFlexContainer = _DFlexContainer;
-DFlexContainer.OUT_OF_RANGE = -1;
+let DFlexParentContainer = _DFlexParentContainer;
+DFlexParentContainer.OUT_OF_RANGE = -1;
 
+const OVERFLOW_REGEX = /(auto|scroll|overlay)/;
+function isStaticallyPositioned(DOM) {
+  const computedStyle = getComputedStyle(DOM);
+  const position = computedStyle.getPropertyValue("position");
+  return position === "static";
+}
+function getScrollContainer(baseDOMElm) {
+  let hasDocumentAsContainer = false;
+  const baseComputedStyle = getComputedStyle(baseDOMElm);
+  const baseELmPosition = baseComputedStyle.getPropertyValue("position");
+  const excludeStaticParents = baseELmPosition === "absolute";
+  const scrollContainerDOM = getParentElm(baseDOMElm, (parentDOM) => {
+    if (excludeStaticParents && isStaticallyPositioned(parentDOM)) {
+      return false;
+    }
+    const parentComputedStyle = getComputedStyle(parentDOM);
+    const parentRect = parentDOM.getBoundingClientRect();
+    const overflowY = parentComputedStyle.getPropertyValue("overflow-y");
+    if (OVERFLOW_REGEX.test(overflowY)) {
+      if (parentDOM.scrollHeight === Math.round(parentRect.height)) {
+        hasDocumentAsContainer = true;
+      }
+      return true;
+    }
+    const overflowX = parentComputedStyle.getPropertyValue("overflow-x");
+    if (OVERFLOW_REGEX.test(overflowX)) {
+      if (parentDOM.scrollWidth === Math.round(parentRect.width)) {
+        hasDocumentAsContainer = true;
+      }
+      return true;
+    }
+    return false;
+  });
+  if (hasDocumentAsContainer || baseELmPosition === "fixed" || !scrollContainerDOM) {
+    hasDocumentAsContainer = true;
+    return [document.documentElement, true];
+  }
+  return [scrollContainerDOM, hasDocumentAsContainer];
+}
+function widthOrHeight(direction) {
+  return direction === "x" ? "width" : "height";
+}
+function hasOverFlow(scrollRect, scrollContainerRect, direction) {
+  const dir = widthOrHeight(direction);
+  return scrollRect[dir] > scrollContainerRect[dir];
+}
+function hasMoreThanHalfOverFlow(scrollRect, scrollContainerRect, direction) {
+  const dir = widthOrHeight(direction);
+  return scrollRect[dir] / 2 > scrollContainerRect[dir];
+}
+const _DFlexScrollContainer = class {
+  constructor(element, SK, branchLength, scrollEventCallback) {
+    this.animatedScrollListener = () => {
+      this.animatedListener.call(this, "_updateScrollCoordinates", this._scrollEventCallback);
+    };
+    this.animatedResizeListener = () => {
+      this.animatedListener.call(this, "_setScrollRects", null);
+    };
+    this.allowDynamicVisibility = false;
+    this.hasOverflowX = false;
+    this.hasOverflowY = false;
+    this._innerThreshold = null;
+    this._outerThreshold = null;
+    this._SK = SK;
+    this._threshold_inner_key = `scroll_inner_${SK}`;
+    this._threshold_outer_key = `scroll_outer_${SK}`;
+    this._listenerDataset = `dflexScrollListener-${SK}`;
+    this._hasThrottledFrame = null;
+    this._scrollEventCallback = null;
+    [this.scrollContainerDOM, this.hasDocumentAsContainer] = getScrollContainer(element);
+    this._setScrollRects();
+    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._setResizeAndScrollListeners();
+  }
+  _setScrollRects() {
+    const { scrollHeight, scrollWidth, scrollLeft, scrollTop } = this.scrollContainerDOM;
+    this.scrollRect = Object.seal({
+      left: scrollLeft,
+      top: scrollTop,
+      width: scrollWidth,
+      height: scrollHeight
+    });
+    let scrollContainerRect;
+    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);
+      scrollContainerRect = {
+        height: viewportHeight,
+        width: viewportWidth,
+        left: 0,
+        top: 0
+      };
+    }
+    this.scrollContainerRect = Object.seal(scrollContainerRect);
+  }
+  _setOverflow() {
+    this.hasOverflowY = hasOverFlow(this.scrollRect, this.scrollContainerRect, "y");
+    this.hasOverflowX = hasOverFlow(this.scrollRect, this.scrollContainerRect, "x");
+    this.allowDynamicVisibility = false;
+    if (this.hasOverflowY && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "y")) {
+      this.allowDynamicVisibility = true;
+      return;
+    }
+    if (this.hasOverflowX && hasMoreThanHalfOverFlow(this.scrollRect, this.scrollContainerRect, "x")) {
+      this.allowDynamicVisibility = true;
+    }
+  }
+  _updateScrollCoordinates() {
+    const { scrollLeft, scrollTop } = this.scrollContainerDOM;
+    const isUpdated = scrollTop !== this.scrollRect.top || scrollLeft !== this.scrollRect.left;
+    this.scrollRect.top = scrollTop;
+    this.scrollRect.left = scrollLeft;
+    return isUpdated;
+  }
+  _setResizeAndScrollListeners(isAttachListener = true) {
+    const hasScrollListener = this.hasOverflowX || this.hasOverflowY;
+    const type = isAttachListener ? "addEventListener" : "removeEventListener";
+    const container = this.hasDocumentAsContainer ? window : this.scrollContainerDOM;
+    const opts = { passive: true };
+    container[type]("resize", this.animatedResizeListener, opts);
+    if (hasScrollListener && this.allowDynamicVisibility) {
+      container[type]("scroll", this.animatedScrollListener, opts);
+    }
+    const elmHoldDataset = this.hasDocumentAsContainer ? document.body : this.scrollContainerDOM;
+    if (isAttachListener) {
+      elmHoldDataset.dataset[this._listenerDataset] = `${this.allowDynamicVisibility}`;
+    } else {
+      delete elmHoldDataset.dataset[this._listenerDataset];
+    }
+  }
+  pauseListeners(pausePlease) {
+    this._hasThrottledFrame = pausePlease ? 1 : null;
+  }
+  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.");
+      }
+    }
+    return this._hasThrottledFrame === null && isVertical ? this.hasOverflowY : this.hasOverflowX;
+  }
+  isOutThresholdV(y) {
+    return this._isScrollAvailable(true) && this._innerThreshold.isOutThresholdV(this._threshold_inner_key, y, y);
+  }
+  isOutThresholdH(x) {
+    return this._isScrollAvailable(false) && this._innerThreshold.isOutThresholdV(this._threshold_inner_key, x, x);
+  }
+  getMaximumScrollContainerLeft() {
+    const { left, width } = this.scrollContainerRect;
+    return left + width + this.scrollRect.left;
+  }
+  getMaximumScrollContainerTop() {
+    const { top, height } = this.scrollContainerRect;
+    return top + height + this.scrollRect.top;
+  }
+  isElementVisibleViewportX(currentLeft) {
+    return currentLeft <= this.getMaximumScrollContainerLeft() && currentLeft >= this.scrollRect.left;
+  }
+  isElementVisibleViewportY(currentTop) {
+    return currentTop <= this.getMaximumScrollContainerTop() && currentTop >= this.scrollRect.top;
+  }
+  animatedListener(setter, cb) {
+    if (this._hasThrottledFrame !== null)
+      return;
+    this._hasThrottledFrame = window.requestAnimationFrame(() => {
+      const isUpdated = this[setter]();
+      if (isUpdated && cb) {
+        cb(this._SK);
+      }
+      this._hasThrottledFrame = null;
+    });
+  }
+  destroy() {
+    if (this._innerThreshold !== null) {
+      this._innerThreshold.destroy();
+      this._innerThreshold = null;
+    }
+    this._scrollEventCallback = null;
+    this._setResizeAndScrollListeners(false);
+    this.scrollContainerDOM = null;
+  }
+};
+let DFlexScrollContainer = _DFlexScrollContainer;
+DFlexScrollContainer._OUTER_THRESHOLD = {
+  horizontal: 35,
+  vertical: 35
+};
+DFlexScrollContainer._MAX_NUM_OF_SIBLINGS_BEFORE_DYNAMIC_VISIBILITY = 10;
+
 exports.DFlexBaseNode = DFlexBaseNode;
-exports.DFlexContainer = DFlexContainer;
 exports.DFlexNode = DFlexNode;
+exports.DFlexParentContainer = DFlexParentContainer;
+exports.DFlexScrollContainer = DFlexScrollContainer;

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}}}function s(t,s){const{top:i,left:e,right:h,bottom:n}=s;e<t.left&&(t.left=e),i<t.top&&(t.top=i),h>t.right&&(t.right=h),n>t.bottom&&(t.bottom=n)}const i=Object.freeze({DRAGGED:"dragged",INDEX:"data-index",OUT_POS:"data-dragged-out-position",OUT_CONTAINER:"data-dragged-out-container"});class e{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}getElmDOMOrThrow(){return function(t){let s=document.getElementById(t);return s&&s.nodeType===Node.ELEMENT_NODE||(s=null),s}(this.id)}initTranslate(){this.translate||(this.translate=new t(0,0)),this.i=new Set,this.isPaused=!1}setAttribute(t,s,e){"INDEX"!==s?this.i.has(s)||(t.setAttribute(i[s],`${e}`),this.i.add(s)):t.setAttribute(i[s],`${e}`)}removeAttribute(t,s){"INDEX"!==s&&this.i.has(s)&&(t.removeAttribute(i[s]),this.i.delete(s))}clearAttributes(t){this.i.forEach((s=>{this.removeAttribute(t,s)})),this.i.clear()}}const h=class extends e{constructor(t){const{order:s,keys:i,depth:e,readonly:h,id:n}=t;super(n),this.order=s,this.keys=i,this.depth=e,this.readonly=h,this.isPaused=!1,this.isVisible=!this.isPaused,this.animatedFrame=null}static getType(){return"core:node"}h(s,i,e){const{height:h,width:n,left:r,top:o}=s.getBoundingClientRect();this.initialOffset=Object.freeze({height:h,width:n,left:r+i,top:o+e}),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.h(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((()=>{h.transform(t,this.translate.x,this.translate.y),this.animatedFrame=null}))}l(t,s){const{self:i}=this.order,e=i+s;return this.order.self=e,this.setAttribute(t,"INDEX",e),{oldIndex:i,newIndex:e}}assignNewPosition(t,s){s<0||s>t.length-1||t[s].length>0||(t[s]=this.id)}u(t,s,i){t[i]="",t[s]=this.id}g(t,s,i,e,h=!1){if(e){const t={ID:e,axis:i,translate:{x:this.translate.x,y:this.translate.y}};Array.isArray(this.p)?this.p.push(t):this.p=[t]}this.o(s),h||this.isVisible?(this.transform(t),this.hasPendingTransform=!1):this.hasPendingTransform=!0}setPosition(t,s,i,e,h,n){"z"===n?e.multiplyAll(i):e[n]*=i,this.g(t,e,n,h);const{oldIndex:r,newIndex:o}=this.l(t,1*i);if("z"===n){const t=1*i;this.grid.increase({x:t,y:t})}else this.grid[n]+=1*i;this.u(s,o,r)}rollBack(t,s,i){if(!Array.isArray(this.p)||0===this.p.length||this.p[this.p.length-1].ID!==s)return;const e=this.p.pop(),{translate:h,axis:n}=e,r={x:h.x-this.translate.x,y:h.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.g(t,r,n,void 0,i),this.l(t,o),this.rollBack(t,s,i)}flushIndicators(s){Array.isArray(this.p)&&(this.p=[]),this.translate instanceof t&&this.translate.setAxes(0,0),this.h(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:h.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 n=h;n.transform=e.transform;class r extends n{static getRectByAxis(t){return"x"===t?"width":"height"}static getDistance(t,s,i){let e=t[i]-s.currentPosition[i];return e+=s.translate[i],e}static getDisplacement(t,s,i){const e="x"===i?s.getRectRight():s.getRectBottom();return t[i]-e}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=r.getRectByAxis(s);return this.initialOffset[i]-t.initialOffset[i]}getDisplacement(t,s){return r.getDisplacement(this.currentPosition,t,s)}getDistance(t,s){return r.getDistance(this.currentPosition,t,s)}}const o=class{constructor(){this.grid=new t(1,1),this.originLength=o.OUT_OF_RANGE,this.m={},this.I=!1}D(t){if(!this.m[this.grid.x])return void(this.m[this.grid.x]={...t});const i=this.m[this.grid.x];(t.bottom>i.bottom||t.top<i.top)&&(this.grid.y+=1,this.I=!0,i.left=0,i.right=0),(t.left>i.right||t.right<i.left)&&(this.I?(this.grid.x=1,this.I=!1):this.grid.x+=1),s(i,t)}registerNewElm(t,i){const{height:e,left:h,top:n,width:r}=t,o={top:n,left:h,right:h+r,bottom:n+e};this.boundaries?s(this.boundaries,o):this.boundaries=o,this.D(o);const a=this.boundaries,c=i;if(!c)return;const l=a.bottom-a.top,d=a.right-a.left;c.height<l&&(c.height=l),c.width<d&&(c.width=l)}resetIndicators(){this.boundaries=null,this.grid.setAxes(1,1),this.m={},this.I=!1}preservePosition(s){this.lastElmPosition=new t(s.x,s.y)}};let a=o;a.OUT_OF_RANGE=-1,exports.DFlexBaseNode=e,exports.DFlexContainer=a,exports.DFlexNode=r;
+"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;

package.json

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

types/Container/index.d.ts

@@ -1,2 +0,2 @@
-import DFlexContainer from "./DFlexContainer";
-export default DFlexContainer;
+export { default as DFlexParentContainer } from "./DFlexParentContainer";
+export { default as DFlexScrollContainer } from "./DFlexScrollContainer";

types/index.d.ts

 export type { SerializedDFlexCoreNode, DFlexNodeInput } from "./Node";
 export { DFlexNode, DFlexBaseNode } from "./Node";
-export { default as DFlexContainer } from "./Container";
+export { DFlexParentContainer, DFlexScrollContainer } from "./Container";

types/Node/DFlexBaseNode.d.ts

@@ -11,3 +11,2 @@ import type { IPointNum } from "@dflex/utils";
     constructor(id: string);
-    getElmDOMOrThrow(): HTMLElement | null;
     /**
@@ -14,0 +13,0 @@ * Initialize the translate AxesCoordinates as part of abstract instance and

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

83224

increased by83.64%

Number of package files

16

increased by6.67%

Lines of code

1824

increased by74.05%

No dependency changes