svelte-dnd-action 0.9.51 → 0.9.52

package/dist/index.js

@@ -356,11 +356,13 @@
   /**
    * Gets the bounding rect but removes transforms (ex: flip animation)
    * @param {HTMLElement} el
+   * @param {boolean} [onlyVisible] - use the visible rect defaults to true
    * @return {{top: number, left: number, bottom: number, right: number}}
    */
   function getBoundingRectNoTransforms(el) {
+    var onlyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var ta;
-    var rect = el.getBoundingClientRect();
+    var rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
     var style = getComputedStyle(el);
     var tx = style.transform;
     if (tx) {
@@ -507,6 +509,54 @@
     var rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
   }
+  function getVisibleRectRecursive(element) {
+    var rect = element.getBoundingClientRect();
+    var visibleRect = {
+      top: rect.top,
+      bottom: rect.bottom,
+      left: rect.left,
+      right: rect.right
+    };
+
+    // Traverse up the DOM hierarchy, checking for scrollable ancestors
+    var parent = element.parentElement;
+    while (parent && parent !== document.body) {
+      var parentRect = parent.getBoundingClientRect();
+
+      // Check if the parent has a scrollable overflow
+      var overflowY = window.getComputedStyle(parent).overflowY;
+      var overflowX = window.getComputedStyle(parent).overflowX;
+      var isScrollableY = overflowY === "scroll" || overflowY === "auto";
+      var isScrollableX = overflowX === "scroll" || overflowX === "auto";
+
+      // Constrain the visible area to the parent's visible area
+      if (isScrollableY) {
+        visibleRect.top = Math.max(visibleRect.top, parentRect.top);
+        visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
+      }
+      if (isScrollableX) {
+        visibleRect.left = Math.max(visibleRect.left, parentRect.left);
+        visibleRect.right = Math.min(visibleRect.right, parentRect.right);
+      }
+      parent = parent.parentElement;
+    }
+
+    // Finally, constrain the visible rect to the viewport
+    visibleRect.top = Math.max(visibleRect.top, 0);
+    visibleRect.bottom = Math.min(visibleRect.bottom, window.innerHeight);
+    visibleRect.left = Math.max(visibleRect.left, 0);
+    visibleRect.right = Math.min(visibleRect.right, window.innerWidth);
+
+    // Return the visible rectangle, ensuring that all values are valid
+    return {
+      top: visibleRect.top,
+      bottom: visibleRect.bottom,
+      left: visibleRect.left,
+      right: visibleRect.right,
+      width: Math.max(0, visibleRect.right - visibleRect.left),
+      height: Math.max(0, visibleRect.bottom - visibleRect.top)
+    };
+  }
 
   var dzToShadowIndexToRect;
 
@@ -1592,7 +1642,7 @@
 
   // helper function for handleDrop
   function animateDraggedToFinalPosition(shadowElIdx, callback) {
-    var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
+    var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx], false) : getBoundingRectNoTransforms(shadowElDropZone, false);
     var newTransform = {
       x: shadowElRect.left - parseFloat(draggedEl.style.left),
       y: shadowElRect.top - parseFloat(draggedEl.style.top)

package/dist/index.mjs

@@ -350,11 +350,13 @@ function setDebugMode(isDebug) {
 /**
  * Gets the bounding rect but removes transforms (ex: flip animation)
  * @param {HTMLElement} el
+ * @param {boolean} [onlyVisible] - use the visible rect defaults to true
  * @return {{top: number, left: number, bottom: number, right: number}}
  */
 function getBoundingRectNoTransforms(el) {
+  var onlyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var ta;
-  var rect = el.getBoundingClientRect();
+  var rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
   var style = getComputedStyle(el);
   var tx = style.transform;
   if (tx) {
@@ -501,6 +503,54 @@ function isElementOffDocument(el) {
   var rect = getAbsoluteRect(el);
   return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
+function getVisibleRectRecursive(element) {
+  var rect = element.getBoundingClientRect();
+  var visibleRect = {
+    top: rect.top,
+    bottom: rect.bottom,
+    left: rect.left,
+    right: rect.right
+  };
+
+  // Traverse up the DOM hierarchy, checking for scrollable ancestors
+  var parent = element.parentElement;
+  while (parent && parent !== document.body) {
+    var parentRect = parent.getBoundingClientRect();
+
+    // Check if the parent has a scrollable overflow
+    var overflowY = window.getComputedStyle(parent).overflowY;
+    var overflowX = window.getComputedStyle(parent).overflowX;
+    var isScrollableY = overflowY === "scroll" || overflowY === "auto";
+    var isScrollableX = overflowX === "scroll" || overflowX === "auto";
+
+    // Constrain the visible area to the parent's visible area
+    if (isScrollableY) {
+      visibleRect.top = Math.max(visibleRect.top, parentRect.top);
+      visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
+    }
+    if (isScrollableX) {
+      visibleRect.left = Math.max(visibleRect.left, parentRect.left);
+      visibleRect.right = Math.min(visibleRect.right, parentRect.right);
+    }
+    parent = parent.parentElement;
+  }
+
+  // Finally, constrain the visible rect to the viewport
+  visibleRect.top = Math.max(visibleRect.top, 0);
+  visibleRect.bottom = Math.min(visibleRect.bottom, window.innerHeight);
+  visibleRect.left = Math.max(visibleRect.left, 0);
+  visibleRect.right = Math.min(visibleRect.right, window.innerWidth);
+
+  // Return the visible rectangle, ensuring that all values are valid
+  return {
+    top: visibleRect.top,
+    bottom: visibleRect.bottom,
+    left: visibleRect.left,
+    right: visibleRect.right,
+    width: Math.max(0, visibleRect.right - visibleRect.left),
+    height: Math.max(0, visibleRect.bottom - visibleRect.top)
+  };
+}
 
 var dzToShadowIndexToRect;
 
@@ -1586,7 +1636,7 @@ function handleDrop$1() {
 
 // helper function for handleDrop
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
-  var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
+  var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx], false) : getBoundingRectNoTransforms(shadowElDropZone, false);
   var newTransform = {
     x: shadowElRect.left - parseFloat(draggedEl.style.left),
     y: shadowElRect.top - parseFloat(draggedEl.style.top)

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.51",
+    "version": "0.9.52",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/intersection.js

@@ -3,11 +3,12 @@
 /**
  * Gets the bounding rect but removes transforms (ex: flip animation)
  * @param {HTMLElement} el
+ * @param {boolean} [onlyVisible] - use the visible rect defaults to true
  * @return {{top: number, left: number, bottom: number, right: number}}
  */
-export function getBoundingRectNoTransforms(el) {
+export function getBoundingRectNoTransforms(el, onlyVisible = true) {
     let ta;
-    const rect = el.getBoundingClientRect();
+    const rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
     const style = getComputedStyle(el);
     const tx = style.transform;
 
@@ -156,3 +157,53 @@ export function isElementOffDocument(el) {
     const rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
+
+function getVisibleRectRecursive(element) {
+    let rect = element.getBoundingClientRect();
+    let visibleRect = {
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right
+    };
+
+    // Traverse up the DOM hierarchy, checking for scrollable ancestors
+    let parent = element.parentElement;
+    while (parent && parent !== document.body) {
+        let parentRect = parent.getBoundingClientRect();
+
+        // Check if the parent has a scrollable overflow
+        const overflowY = window.getComputedStyle(parent).overflowY;
+        const overflowX = window.getComputedStyle(parent).overflowX;
+        const isScrollableY = overflowY === "scroll" || overflowY === "auto";
+        const isScrollableX = overflowX === "scroll" || overflowX === "auto";
+
+        // Constrain the visible area to the parent's visible area
+        if (isScrollableY) {
+            visibleRect.top = Math.max(visibleRect.top, parentRect.top);
+            visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
+        }
+        if (isScrollableX) {
+            visibleRect.left = Math.max(visibleRect.left, parentRect.left);
+            visibleRect.right = Math.min(visibleRect.right, parentRect.right);
+        }
+
+        parent = parent.parentElement;
+    }
+
+    // Finally, constrain the visible rect to the viewport
+    visibleRect.top = Math.max(visibleRect.top, 0);
+    visibleRect.bottom = Math.min(visibleRect.bottom, window.innerHeight);
+    visibleRect.left = Math.max(visibleRect.left, 0);
+    visibleRect.right = Math.min(visibleRect.right, window.innerWidth);
+
+    // Return the visible rectangle, ensuring that all values are valid
+    return {
+        top: visibleRect.top,
+        bottom: visibleRect.bottom,
+        left: visibleRect.left,
+        right: visibleRect.right,
+        width: Math.max(0, visibleRect.right - visibleRect.left),
+        height: Math.max(0, visibleRect.bottom - visibleRect.top)
+    };
+}

package/src/pointerAction.js

@@ -281,7 +281,9 @@ function handleDrop() {
 // helper function for handleDrop
 function animateDraggedToFinalPosition(shadowElIdx, callback) {
     const shadowElRect =
-        shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]) : getBoundingRectNoTransforms(shadowElDropZone);
+        shadowElIdx > -1
+            ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx], false)
+            : getBoundingRectNoTransforms(shadowElDropZone, false);
     const newTransform = {
         x: shadowElRect.left - parseFloat(draggedEl.style.left),
         y: shadowElRect.top - parseFloat(draggedEl.style.top)