svelte-dnd-action 0.9.17 → 0.9.18

package/dist/index.js

@@ -1235,7 +1235,7 @@
    * @param {HTMLElement} dragTarget
    */
 
-  function hideOriginalDragTarget(dragTarget) {
+  function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";
@@ -1338,7 +1338,8 @@
   var isWorkingOnPreviousDrag = false;
   var finalizingPreviousDrag = false;
   var unlockOriginDzMinDimensions;
-  var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+  var isDraggedOutsideOfAnyDz = false;
+  var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
   var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1674,12 +1675,37 @@
     draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
     window.setTimeout(callback, dropAnimationDurationMs);
   }
+
+  function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({
+      dz: dz,
+      destroy: destroy
+    });
+    window.requestAnimationFrame(function () {
+      hideElement(dz);
+      document.body.appendChild(dz);
+    });
+  }
   /* cleanup */
 
 
   function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+
+    if (scheduledForRemovalAfterDrop.length) {
+      printDebug(function () {
+        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+      });
+      scheduledForRemovalAfterDrop.forEach(function (_ref) {
+        var dz = _ref.dz,
+            destroy = _ref.destroy;
+        destroy();
+        dz.remove();
+      });
+      scheduledForRemovalAfterDrop = [];
+    }
+
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -1827,7 +1853,7 @@
 
           draggedEl.focus();
           watchDraggedElement();
-          hideOriginalDragTarget(originalDragTarget);
+          hideElement(originalDragTarget);
           originDropZoneRoot.appendChild(originalDragTarget);
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1866,27 +1892,27 @@
       });
     }
 
-    function configure(_ref) {
-      var _ref$items = _ref.items,
-          items = _ref$items === void 0 ? undefined : _ref$items,
-          _ref$flipDurationMs = _ref.flipDurationMs,
-          dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-          _ref$type = _ref.type,
-          newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-          _ref$dragDisabled = _ref.dragDisabled,
-          dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-          _ref$morphDisabled = _ref.morphDisabled,
-          morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-          _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-          dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-          _ref$dropTargetStyle = _ref.dropTargetStyle,
-          dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-          _ref$dropTargetClasse = _ref.dropTargetClasses,
-          dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-          _ref$transformDragged = _ref.transformDraggedElement,
-          transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-          _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-          centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+    function configure(_ref2) {
+      var _ref2$items = _ref2.items,
+          items = _ref2$items === void 0 ? undefined : _ref2$items,
+          _ref2$flipDurationMs = _ref2.flipDurationMs,
+          dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+          _ref2$type = _ref2.type,
+          newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+          _ref2$dragDisabled = _ref2.dragDisabled,
+          dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+          _ref2$morphDisabled = _ref2.morphDisabled,
+          morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+          _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+          dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+          _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+          dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+          _ref2$dropTargetClass = _ref2.dropTargetClasses,
+          dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+          _ref2$transformDragge = _ref2.transformDraggedElement,
+          transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+          _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+          centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
       config.dropAnimationDurationMs = dropAnimationDurationMs;
 
       if (config.type && newType !== config.type) {
@@ -1989,11 +2015,22 @@
         configure(newOptions);
       },
       destroy: function destroy() {
-        printDebug(function () {
-          return "pointer dndzone will destroy";
-        });
-        unregisterDropZone(node, config.type);
-        dzToConfig["delete"](node);
+        function destroyDz() {
+          printDebug(function () {
+            return "pointer dndzone will destroy";
+          });
+          unregisterDropZone(node, dzToConfig.get(node).type);
+          dzToConfig["delete"](node);
+        }
+
+        if (isWorkingOnPreviousDrag) {
+          printDebug(function () {
+            return "pointer dndzone will be scheduled for destruction";
+          });
+          scheduleDZForRemovalAfterDrop(node, destroyDz);
+        } else {
+          destroyDz();
+        }
       }
     };
   }

package/dist/index.mjs

@@ -1229,7 +1229,7 @@ function styleDraggable(draggableEl, dragDisabled) {
  * @param {HTMLElement} dragTarget
  */
 
-function hideOriginalDragTarget(dragTarget) {
+function hideElement(dragTarget) {
   dragTarget.style.display = "none";
   dragTarget.style.position = "fixed";
   dragTarget.style.zIndex = "-5";
@@ -1332,7 +1332,8 @@ var currentMousePosition;
 var isWorkingOnPreviousDrag = false;
 var finalizingPreviousDrag = false;
 var unlockOriginDzMinDimensions;
-var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+var isDraggedOutsideOfAnyDz = false;
+var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
 var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1668,12 +1669,37 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
   draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
   window.setTimeout(callback, dropAnimationDurationMs);
 }
+
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+  scheduledForRemovalAfterDrop.push({
+    dz: dz,
+    destroy: destroy
+  });
+  window.requestAnimationFrame(function () {
+    hideElement(dz);
+    document.body.appendChild(dz);
+  });
+}
 /* cleanup */
 
 
 function cleanupPostDrop() {
   draggedEl.remove();
   originalDragTarget.remove();
+
+  if (scheduledForRemovalAfterDrop.length) {
+    printDebug(function () {
+      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+    });
+    scheduledForRemovalAfterDrop.forEach(function (_ref) {
+      var dz = _ref.dz,
+          destroy = _ref.destroy;
+      destroy();
+      dz.remove();
+    });
+    scheduledForRemovalAfterDrop = [];
+  }
+
   draggedEl = undefined;
   originalDragTarget = undefined;
   draggedElData = undefined;
@@ -1821,7 +1847,7 @@ function dndzone(node, options) {
 
         draggedEl.focus();
         watchDraggedElement();
-        hideOriginalDragTarget(originalDragTarget);
+        hideElement(originalDragTarget);
         originDropZoneRoot.appendChild(originalDragTarget);
       } else {
         window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1860,27 +1886,27 @@ function dndzone(node, options) {
     });
   }
 
-  function configure(_ref) {
-    var _ref$items = _ref.items,
-        items = _ref$items === void 0 ? undefined : _ref$items,
-        _ref$flipDurationMs = _ref.flipDurationMs,
-        dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-        _ref$type = _ref.type,
-        newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-        _ref$dragDisabled = _ref.dragDisabled,
-        dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-        _ref$morphDisabled = _ref.morphDisabled,
-        morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-        _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-        _ref$dropTargetStyle = _ref.dropTargetStyle,
-        dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-        _ref$dropTargetClasse = _ref.dropTargetClasses,
-        dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-        _ref$transformDragged = _ref.transformDraggedElement,
-        transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-        _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-        centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+  function configure(_ref2) {
+    var _ref2$items = _ref2.items,
+        items = _ref2$items === void 0 ? undefined : _ref2$items,
+        _ref2$flipDurationMs = _ref2.flipDurationMs,
+        dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+        _ref2$type = _ref2.type,
+        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+        _ref2$dragDisabled = _ref2.dragDisabled,
+        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+        _ref2$morphDisabled = _ref2.morphDisabled,
+        morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+        _ref2$dropTargetClass = _ref2.dropTargetClasses,
+        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+        _ref2$transformDragge = _ref2.transformDraggedElement,
+        transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+        _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
     config.dropAnimationDurationMs = dropAnimationDurationMs;
 
     if (config.type && newType !== config.type) {
@@ -1983,11 +2009,22 @@ function dndzone(node, options) {
       configure(newOptions);
     },
     destroy: function destroy() {
-      printDebug(function () {
-        return "pointer dndzone will destroy";
-      });
-      unregisterDropZone(node, config.type);
-      dzToConfig["delete"](node);
+      function destroyDz() {
+        printDebug(function () {
+          return "pointer dndzone will destroy";
+        });
+        unregisterDropZone(node, dzToConfig.get(node).type);
+        dzToConfig["delete"](node);
+      }
+
+      if (isWorkingOnPreviousDrag) {
+        printDebug(function () {
+          return "pointer dndzone will be scheduled for destruction";
+        });
+        scheduleDZForRemovalAfterDrop(node, destroyDz);
+      } else {
+        destroyDz();
+      }
     }
   };
 }

package/package.json

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

package/src/helpers/styler.js

@@ -136,7 +136,7 @@ export function styleDraggable(draggableEl, dragDisabled) {
  * Hides the provided element so that it can stay in the dom without interrupting
  * @param {HTMLElement} dragTarget
  */
-export function hideOriginalDragTarget(dragTarget) {
+export function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";

package/src/pointerAction.js

@@ -13,7 +13,7 @@ import {armWindowScroller, disarmWindowScroller} from "./helpers/windowScroller"
 import {
     createDraggedElementFrom,
     decorateShadowEl,
-    hideOriginalDragTarget,
+    hideElement,
     morphDraggedElementToBeLike,
     moveDraggedElementToWasDroppedState,
     preventShrinking,
@@ -55,6 +55,7 @@ let isWorkingOnPreviousDrag = false;
 let finalizingPreviousDrag = false;
 let unlockOriginDzMinDimensions;
 let isDraggedOutsideOfAnyDz = false;
+let scheduledForRemovalAfterDrop = [];
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -280,10 +281,25 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
     window.setTimeout(callback, dropAnimationDurationMs);
 }
 
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({dz, destroy});
+    window.requestAnimationFrame(() => {
+        hideElement(dz);
+        document.body.appendChild(dz);
+    });
+}
 /* cleanup */
 function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+    if (scheduledForRemovalAfterDrop.length) {
+        printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
+        scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
+            destroy();
+            dz.remove();
+        })
+        scheduledForRemovalAfterDrop = [];
+    }
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -398,7 +414,7 @@ export function dndzone(node, options) {
                 // to prevent the outline from disappearing
                 draggedEl.focus();
                 watchDraggedElement();
-                hideOriginalDragTarget(originalDragTarget);
+                hideElement(originalDragTarget);
                 originDropZoneRoot.appendChild(originalDragTarget);
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
@@ -529,9 +545,17 @@ export function dndzone(node, options) {
             configure(newOptions);
         },
         destroy: () => {
-            printDebug(() => "pointer dndzone will destroy");
-            unregisterDropZone(node, config.type);
-            dzToConfig.delete(node);
+            function destroyDz() {
+                printDebug(() => "pointer dndzone will destroy");
+                unregisterDropZone(node, dzToConfig.get(node).type);
+                dzToConfig.delete(node);
+            }
+            if (isWorkingOnPreviousDrag) {
+                printDebug(() => "pointer dndzone will be scheduled for destruction");
+                scheduleDZForRemovalAfterDrop(node, destroyDz);
+            } else {
+               destroyDz();
+            }
         }
     };
 }