svelte-dnd-action 0.9.28 → 0.9.29

package/README.md

@@ -347,6 +347,32 @@ You can use generics to set the type of `items` you are expecting in `DndEvent`.
 </script>
 ```
 
+### Nested Zones Optional Optimization (experimental)
+
+This is an experimental feature added in version 0.9.29. If you have multiple levels of nesting, the lib might do unnecessary work when dragging an element that has nested zones inside.
+Specifically, it allows nested zones within the shadow element (the placeholder under the dragged element) to register and destroy.
+This is because Svelte calls nested actions before the parent action (opposite to the rendering order).
+You can use a data attribute **on the items** to help the lib prevent this: `data-is-dnd-shadow-item-hint={item[SHADOW_ITEM_MARKER_PROPERTY_NAME]} `
+
+#### Simplified Example (just shows where to place the attribute):
+
+```html
+<script>
+    import {dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME} from 'svelte-dnd-action';
+    let items = [];
+</script>
+<section>
+    <div use:dndzone={{items}} on:consider={e => items = e.detail.items} on:finalize={e => items = e.detail.items}>
+        {#each items as item (item.id)}
+            <div data-is-dnd-shadow-item-hint={item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}>
+                <h1>{item.title}</h1>
+                <!--more nested zones go here, can include the attribute on their items as demonstrated above-->
+            </div>
+        {/each}
+    </div>
+</section>
+```
+
 ### Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/isaacHagoel/svelte-dnd-action/issues)
 
 There is still quite a lot to do. If you'd like to contribute please get in touch (raise an issue or comment on an existing one).

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export type DndEvent<T = Item> = {
 export declare const SHADOW_ITEM_MARKER_PROPERTY_NAME: "isDndShadowItem";
 export declare const SHADOW_PLACEHOLDER_ITEM_ID: "id:dnd-shadow-placeholder-0000";
 export declare const DRAGGED_ELEMENT_ID: "dnd-action-dragged-el";
+export declare const SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 
 /**
  * Allows the user to show/hide console debug output

package/dist/index.js

@@ -294,7 +294,8 @@
     KEYBOARD: "keyboard"
   };
   var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+  var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
   var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
   var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
   var ITEM_ID_KEY = "id";
@@ -1229,6 +1230,7 @@
   var DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
   };
+  var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
   var originalDragTarget;
   var draggedEl;
   var draggedElData;
@@ -1324,17 +1326,9 @@
     window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
     unobserve();
   }
-
-  // finds the initial placeholder that is placed there on drag start
-  function findShadowPlaceHolderIdx(items) {
-    return items.findIndex(function (item) {
-      return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-    });
-  }
   function findShadowElementIdx(items) {
-    // checking that the id is not the placeholder's for Dragula like usecases
     return items.findIndex(function (item) {
-      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
+      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
     });
   }
 
@@ -1370,15 +1364,6 @@
         id: draggedElData[ITEM_ID_KEY],
         source: SOURCES.POINTER
       });
-    } else {
-      var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-      if (shadowPlaceHolderIdx !== -1) {
-        // only happens right after drag start, on the first drag entered event
-        printDebug(function () {
-          return "removing placeholder item from origin dz";
-        });
-        items.splice(shadowPlaceHolderIdx, 1);
-      }
     }
     var _e$detail$indexObj = e.detail.indexObj,
       index = _e$detail$indexObj.index,
@@ -1671,6 +1656,7 @@
       addMaybeListeners();
     }
     function handleDragStart() {
+      var _objectSpread2$1;
       printDebug(function () {
         return ["drag start config: ".concat(toString(config)), originalDragTarget];
       });
@@ -1688,12 +1674,12 @@
         centreDraggedOnCursor = config.centreDraggedOnCursor;
       draggedElData = _objectSpread2({}, items[currentIdx]);
       draggedElType = type;
-      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-      // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-      var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
+      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
 
       // creating the draggable element
       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+      originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
       // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
       function keepOriginalElementInDom() {
         if (!draggedEl.parentElement) {
@@ -1717,7 +1703,7 @@
       });
 
       // removing the original element by removing its data entry
-      items.splice(currentIdx, 1, placeHolderElData);
+      items.splice(currentIdx, 1, shadowElData);
       unlockOriginDzMinDimensions = preventShrinking(originDropZone);
       dispatchConsiderEvent(originDropZone, items, {
         trigger: TRIGGERS.DRAG_STARTED,
@@ -1852,7 +1838,7 @@
           unregisterDropZone(node, dzToConfig.get(node).type);
           dzToConfig["delete"](node);
         }
-        if (isWorkingOnPreviousDrag) {
+        if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
           printDebug(function () {
             return "pointer dndzone will be scheduled for destruction";
           });
@@ -2382,6 +2368,12 @@
    * @return {{update: function, destroy: function}}
    */
   function dndzone$2(node, options) {
+    if (shouldIgnoreZone(node)) {
+      return {
+        update: function update() {},
+        destroy: function destroy() {}
+      };
+    }
     validateOptions(options);
     var pointerZone = dndzone(node, options);
     var keyboardZone = dndzone$1(node, options);
@@ -2397,6 +2389,16 @@
       }
     };
   }
+
+  /**
+   * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+   * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+   * @param {HTMLElement} node
+   * @return {boolean}
+   */
+  function shouldIgnoreZone(node) {
+    return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
+  }
   function validateOptions(options) {
     /*eslint-disable*/
     var items = options.items,

package/dist/index.mjs

@@ -288,7 +288,8 @@ var SOURCES = {
   KEYBOARD: "keyboard"
 };
 var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
 var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
 var ITEM_ID_KEY = "id";
@@ -1223,6 +1224,7 @@ var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
 var DEFAULT_DROP_TARGET_STYLE = {
   outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
+var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
 var originalDragTarget;
 var draggedEl;
 var draggedElData;
@@ -1318,17 +1320,9 @@ function unWatchDraggedElement() {
   window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
   unobserve();
 }
-
-// finds the initial placeholder that is placed there on drag start
-function findShadowPlaceHolderIdx(items) {
-  return items.findIndex(function (item) {
-    return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-  });
-}
 function findShadowElementIdx(items) {
-  // checking that the id is not the placeholder's for Dragula like usecases
   return items.findIndex(function (item) {
-    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
+    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
   });
 }
 
@@ -1364,15 +1358,6 @@ function handleDraggedEntered(e) {
       id: draggedElData[ITEM_ID_KEY],
       source: SOURCES.POINTER
     });
-  } else {
-    var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-    if (shadowPlaceHolderIdx !== -1) {
-      // only happens right after drag start, on the first drag entered event
-      printDebug(function () {
-        return "removing placeholder item from origin dz";
-      });
-      items.splice(shadowPlaceHolderIdx, 1);
-    }
   }
   var _e$detail$indexObj = e.detail.indexObj,
     index = _e$detail$indexObj.index,
@@ -1665,6 +1650,7 @@ function dndzone(node, options) {
     addMaybeListeners();
   }
   function handleDragStart() {
+    var _objectSpread2$1;
     printDebug(function () {
       return ["drag start config: ".concat(toString(config)), originalDragTarget];
     });
@@ -1682,12 +1668,12 @@ function dndzone(node, options) {
       centreDraggedOnCursor = config.centreDraggedOnCursor;
     draggedElData = _objectSpread2({}, items[currentIdx]);
     draggedElType = type;
-    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-    // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-    var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
+    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
 
     // creating the draggable element
     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+    originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
     // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
     function keepOriginalElementInDom() {
       if (!draggedEl.parentElement) {
@@ -1711,7 +1697,7 @@ function dndzone(node, options) {
     });
 
     // removing the original element by removing its data entry
-    items.splice(currentIdx, 1, placeHolderElData);
+    items.splice(currentIdx, 1, shadowElData);
     unlockOriginDzMinDimensions = preventShrinking(originDropZone);
     dispatchConsiderEvent(originDropZone, items, {
       trigger: TRIGGERS.DRAG_STARTED,
@@ -1846,7 +1832,7 @@ function dndzone(node, options) {
         unregisterDropZone(node, dzToConfig.get(node).type);
         dzToConfig["delete"](node);
       }
-      if (isWorkingOnPreviousDrag) {
+      if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
         printDebug(function () {
           return "pointer dndzone will be scheduled for destruction";
         });
@@ -2376,6 +2362,12 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @return {{update: function, destroy: function}}
  */
 function dndzone$2(node, options) {
+  if (shouldIgnoreZone(node)) {
+    return {
+      update: function update() {},
+      destroy: function destroy() {}
+    };
+  }
   validateOptions(options);
   var pointerZone = dndzone(node, options);
   var keyboardZone = dndzone$1(node, options);
@@ -2391,6 +2383,16 @@ function dndzone$2(node, options) {
     }
   };
 }
+
+/**
+ * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+ * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+ * @param {HTMLElement} node
+ * @return {boolean}
+ */
+function shouldIgnoreZone(node) {
+  return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
+}
 function validateOptions(options) {
   /*eslint-disable*/
   var items = options.items,

package/package.json

@@ -42,8 +42,8 @@
         "src",
         "dist"
     ],
-    "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.28",
+    "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.29",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -1,6 +1,6 @@
 import {dndzone as pointerDndZone} from "./pointerAction";
 import {dndzone as keyboardDndZone} from "./keyboardAction";
-import {ITEM_ID_KEY} from "./constants";
+import {ITEM_ID_KEY, SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME} from "./constants";
 import {toString} from "./helpers/util";
 
 /**
@@ -25,6 +25,12 @@ import {toString} from "./helpers/util";
  * @return {{update: function, destroy: function}}
  */
 export function dndzone(node, options) {
+    if (shouldIgnoreZone(node)) {
+        return {
+            update: () => {},
+            destroy: () => {}
+        };
+    }
     validateOptions(options);
     const pointerZone = pointerDndZone(node, options);
     const keyboardZone = keyboardDndZone(node, options);
@@ -41,6 +47,16 @@ export function dndzone(node, options) {
     };
 }
 
+/**
+ * If the user marked something in the ancestry of our node as shadow element, we can ignore it
+ * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
+ * @param {HTMLElement} node
+ * @return {boolean}
+ */
+function shouldIgnoreZone(node) {
+    return !!node.closest(`[${SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME}="true"]`);
+}
+
 function validateOptions(options) {
     /*eslint-disable*/
     const {

package/src/constants.js

@@ -19,7 +19,8 @@ export const SOURCES = {
 };
 
 export const SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
-export const SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+export const SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
+export const SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
 export const SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
 export const DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
 

package/src/pointerAction.js

@@ -40,6 +40,7 @@ const MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
 const DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
 };
+const ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
 
 let originalDragTarget;
 let draggedEl;
@@ -114,13 +115,8 @@ function unWatchDraggedElement() {
     unobserve();
 }
 
-// finds the initial placeholder that is placed there on drag start
-function findShadowPlaceHolderIdx(items) {
-    return items.findIndex(item => item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID);
-}
 function findShadowElementIdx(items) {
-    // checking that the id is not the placeholder's for Dragula like usecases
-    return items.findIndex(item => !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID);
+    return items.findIndex(item => !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
 }
 
 /* custom drag-events handlers */
@@ -144,15 +140,7 @@ function handleDraggedEntered(e) {
             id: draggedElData[ITEM_ID_KEY],
             source: SOURCES.POINTER
         });
-    } else {
-        const shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-        if (shadowPlaceHolderIdx !== -1) {
-            // only happens right after drag start, on the first drag entered event
-            printDebug(() => "removing placeholder item from origin dz");
-            items.splice(shadowPlaceHolderIdx, 1);
-        }
     }
-
     const {index, isProximityBased} = e.detail.indexObj;
     const shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
     shadowElDropZone = e.currentTarget;
@@ -245,6 +233,7 @@ function handleDrop() {
     let shadowElIdx = findShadowElementIdx(items);
     // the handler might remove the shadow element, ex: dragula like copy on drag
     if (shadowElIdx === -1) shadowElIdx = originIndex;
+
     items = items.map(item => (item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item));
     function finalizeWithinZone() {
         unlockOriginDzMinDimensions();
@@ -401,12 +390,12 @@ export function dndzone(node, options) {
         const {items, type, centreDraggedOnCursor} = config;
         draggedElData = {...items[currentIdx]};
         draggedElType = type;
-        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true};
-        // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-        const placeHolderElData = {...shadowElData, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
+        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true, [ITEM_ID_KEY]: SHADOW_PLACEHOLDER_ITEM_ID};
 
         // creating the draggable element
         draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
+        originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
+
         // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
         function keepOriginalElementInDom() {
             if (!draggedEl.parentElement) {
@@ -429,7 +418,7 @@ export function dndzone(node, options) {
         );
 
         // removing the original element by removing its data entry
-        items.splice(currentIdx, 1, placeHolderElData);
+        items.splice(currentIdx, 1, shadowElData);
         unlockOriginDzMinDimensions = preventShrinking(originDropZone);
 
         dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData[ITEM_ID_KEY], source: SOURCES.POINTER});
@@ -549,7 +538,7 @@ export function dndzone(node, options) {
                 unregisterDropZone(node, dzToConfig.get(node).type);
                 dzToConfig.delete(node);
             }
-            if (isWorkingOnPreviousDrag) {
+            if (isWorkingOnPreviousDrag && !node.closest(`[${ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE}]`)) {
                 printDebug(() => "pointer dndzone will be scheduled for destruction");
                 scheduleDZForRemovalAfterDrop(node, destroyDz);
             } else {