svelte-dnd-action 0.9.63 → 0.9.65

package/README.md

@@ -1,5 +1,7 @@
 # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 
+> Shameless plug: If you are making AI Apps check out my brand-new, open source [dev tool](https://github.com/pragmaticfish/sushify)
+
 This is a feature-complete implementation of drag and drop for Svelte using a custom action. It supports almost every imaginable drag and drop use-case, any input device and is fully accessible. <br />
 It requires very minimal configuration, while offering a rich set of primitives that allow overriding basically any of its default behaviours (using the handler functions). <br /><br />
 See full features list below. <br />
@@ -262,7 +264,7 @@ Notes:
 -   [Unsortable lists with custom aria instructions](https://svelte.dev/playground/e020ea1051dc4ae3ac2b697064f234bc?version=3)
 -   [Crazy nesting](https://svelte.dev/playground/fe8c9eca04f9417a94a8b6041df77139?version=3), courtesy of @zahachtah
 -   [Generic List Component (Alternative to Slots)](https://svelte.dev/playground/028674733f67409c94bd52995d5906f1?version=3)
--   [Maitaining internal scroll poisition on scrollable dragabble](https://svelte.dev/playground/eb2f5988bd2f46488810606c1fb13392?version=3)
+-   [Maintaining internal scroll poisition on scrollable dragabble](https://svelte.dev/playground/eb2f5988bd2f46488810606c1fb13392?version=3)
 -   [Scrabble like board using over a 100 single slot dnd-zones](https://svelte.dev/playground/ed2e138417094281be6db1aef23d7859?version=3)
 -   [Select multiple elements to drag (multi-drag) with mouse or keyboard](https://svelte.dev/playground/c4eb917bb8df42c4b17402a7dda54856?version=3)
 

package/dist/index.js

@@ -647,6 +647,32 @@
         indexOfMin = _i;
       }
     }
+
+    // -------- Phantom slot check --------
+    // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+    // visually closest drop target can be *after* the current last **real** child.
+    // In simple layouts the would be index from the existing children would always be the last index
+    // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+    // The problem is we can't predict where an additional element would be rendered in the general case,
+    // We therefore create a temporary, invisible clone of that last element, let
+    // the browser position it, measure the distance, and remove it immediately
+    // (same task → no paint).  This leaves `children` back in its original state
+    // before we exit the function, so existing index-caching logic and shadow-
+    // element bookkeeping continue to work unchanged.
+    if (children.length > 0) {
+      var originalLen = children.length; // before we append the phantom
+      var template = children[originalLen - 1];
+      var phantom = template.cloneNode(false); // shallow clone is enough for size
+      phantom.style.visibility = "hidden";
+      phantom.style.pointerEvents = "none";
+      collectionBelowEl.appendChild(phantom);
+      var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+      if (phantomDistance < minDistanceSoFar) {
+        indexOfMin = originalLen; // index of phantom slot in original list
+      }
+
+      collectionBelowEl.removeChild(phantom);
+    }
     return {
       index: indexOfMin,
       isProximityBased: true
@@ -1485,10 +1511,7 @@
         source: SOURCES.POINTER
       });
     }
-    var _e$detail$indexObj = e.detail.indexObj,
-      index = _e$detail$indexObj.index,
-      isProximityBased = _e$detail$indexObj.isProximityBased;
-    var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+    var shadowElIdx = e.detail.indexObj.index;
     shadowElDropZone = e.currentTarget;
     items.splice(shadowElIdx, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {

package/dist/index.mjs

@@ -641,6 +641,32 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
       indexOfMin = _i;
     }
   }
+
+  // -------- Phantom slot check --------
+  // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+  // visually closest drop target can be *after* the current last **real** child.
+  // In simple layouts the would be index from the existing children would always be the last index
+  // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+  // The problem is we can't predict where an additional element would be rendered in the general case,
+  // We therefore create a temporary, invisible clone of that last element, let
+  // the browser position it, measure the distance, and remove it immediately
+  // (same task → no paint).  This leaves `children` back in its original state
+  // before we exit the function, so existing index-caching logic and shadow-
+  // element bookkeeping continue to work unchanged.
+  if (children.length > 0) {
+    var originalLen = children.length; // before we append the phantom
+    var template = children[originalLen - 1];
+    var phantom = template.cloneNode(false); // shallow clone is enough for size
+    phantom.style.visibility = "hidden";
+    phantom.style.pointerEvents = "none";
+    collectionBelowEl.appendChild(phantom);
+    var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+    if (phantomDistance < minDistanceSoFar) {
+      indexOfMin = originalLen; // index of phantom slot in original list
+    }
+
+    collectionBelowEl.removeChild(phantom);
+  }
   return {
     index: indexOfMin,
     isProximityBased: true
@@ -1479,10 +1505,7 @@ function handleDraggedEntered(e) {
       source: SOURCES.POINTER
     });
   }
-  var _e$detail$indexObj = e.detail.indexObj,
-    index = _e$detail$indexObj.index,
-    isProximityBased = _e$detail$indexObj.isProximityBased;
-  var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+  var shadowElIdx = e.detail.indexObj.index;
   shadowElDropZone = e.currentTarget;
   items.splice(shadowElIdx, 0, shadowElData);
   dispatchConsiderEvent(e.currentTarget, items, {

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.63",
+    "version": "0.9.65",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/listUtil.js

@@ -77,5 +77,33 @@ export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
             indexOfMin = i;
         }
     }
+
+    // -------- Phantom slot check --------
+    // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
+    // visually closest drop target can be *after* the current last **real** child.
+    // In simple layouts the would be index from the existing children would always be the last index
+    // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
+    // The problem is we can't predict where an additional element would be rendered in the general case,
+    // We therefore create a temporary, invisible clone of that last element, let
+    // the browser position it, measure the distance, and remove it immediately
+    // (same task → no paint).  This leaves `children` back in its original state
+    // before we exit the function, so existing index-caching logic and shadow-
+    // element bookkeeping continue to work unchanged.
+    if (children.length > 0) {
+        const originalLen = children.length; // before we append the phantom
+        const template = children[originalLen - 1];
+        const phantom = template.cloneNode(false); // shallow clone is enough for size
+        phantom.style.visibility = "hidden";
+        phantom.style.pointerEvents = "none";
+        collectionBelowEl.appendChild(phantom);
+
+        const phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+        if (phantomDistance < minDistanceSoFar) {
+            indexOfMin = originalLen; // index of phantom slot in original list
+        }
+
+        collectionBelowEl.removeChild(phantom);
+    }
+
     return {index: indexOfMin, isProximityBased: true};
 }

package/src/pointerAction.js

@@ -154,8 +154,7 @@ function handleDraggedEntered(e) {
             source: SOURCES.POINTER
         });
     }
-    const {index, isProximityBased} = e.detail.indexObj;
-    const shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
+    const {index: shadowElIdx} = e.detail.indexObj;
     shadowElDropZone = e.currentTarget;
     items.splice(shadowElIdx, 0, shadowElData);
     dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData[ITEM_ID_KEY], source: SOURCES.POINTER});