svelte-dnd-action 0.9.63 → 0.9.64

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.64",
     "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});