svelte-dnd-action 0.9.10 → 0.9.14

package/README.md

@@ -189,6 +189,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   [Generic List Component (Alternative to Slots)](https://svelte.dev/repl/028674733f67409c94bd52995d5906f1?version=3.31.0)
 -   [Maitaining internal scroll poisition on scrollable dragabble](https://svelte.dev/repl/eb2f5988bd2f46488810606c1fb13392?version=3.29.4)
 -   [Scrabble like board using over a 100 single slot dnd-zones](https://svelte.dev/repl/ed2e138417094281be6db1aef23d7859?version=3.37.0)
+-   [Select multiple elements to drag (multi-drag) with mouse or keyboard](https://svelte.dev/repl/c4eb917bb8df42c4b17402a7dda54856?version=3.24.1)
 
 -   [Fade in/out but without using Svelte transitions](https://svelte.dev/repl/3f1e68203ef140969a8240eba3475a8d?version=3.24.1)
 -   [Nested fade in/out without using Svelte transitions](https://svelte.dev/repl/49b09aedfe0543b4bc8f575c8dbf9a53?version=3.24.1)

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export interface Options {
     morphDisabled?: boolean;
     dropFromOthersDisabled?: boolean;
     zoneTabIndex?: number; // set the tabindex of the list container when not dragging
-    dropTargetClasses?: [string];
+    dropTargetClasses?: string[];
     dropTargetStyle?: Record<string, string>;
     transformDraggedElement?: TransformDraggedElementFunction;
     autoAriaDisabled?: boolean;

package/dist/index.js

@@ -599,6 +599,17 @@
     dzToShadowIndexToRect = new Map();
   }
   resetIndexesCache();
+  /**
+   * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+   * @param {HTMLElement} dz
+   */
+
+  function resetIndexesCacheForDz(dz) {
+    printDebug(function () {
+      return "resetting indexes cache for dz";
+    });
+    dzToShadowIndexToRect["delete"](dz);
+  }
   /**
    * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
    * Helpful in order to determine "would be index" more effectively
@@ -931,6 +942,7 @@
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var dz = _step.value;
+          if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
           var indexObj = findWouldBeIndex(draggedEl, dz);
 
           if (indexObj === null) {
@@ -1008,7 +1020,8 @@
 
   function loop() {
     if (mousePosition) {
-      scrollIfNeeded$1(mousePosition, document.documentElement);
+      var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
+      if (scrolled) resetIndexesCache();
     }
 
     next$1 = window.setTimeout(loop, INTERVAL_MS$1);
@@ -1530,7 +1543,7 @@
       x: c.clientX,
       y: c.clientY
     };
-    draggedEl.style.transform = "translate3d(0, ".concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
+    draggedEl.style.transform = "translate3d(".concat(currentMousePosition.x - dragStartMousePosition.x, "px, ").concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
   }
 
   function handleDrop() {

package/dist/index.mjs

@@ -593,6 +593,17 @@ function resetIndexesCache() {
   dzToShadowIndexToRect = new Map();
 }
 resetIndexesCache();
+/**
+ * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+ * @param {HTMLElement} dz
+ */
+
+function resetIndexesCacheForDz(dz) {
+  printDebug(function () {
+    return "resetting indexes cache for dz";
+  });
+  dzToShadowIndexToRect["delete"](dz);
+}
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively
@@ -925,6 +936,7 @@ function observe(draggedEl, dropZones) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
+        if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
         var indexObj = findWouldBeIndex(draggedEl, dz);
 
         if (indexObj === null) {
@@ -1002,7 +1014,8 @@ var next$1;
 
 function loop() {
   if (mousePosition) {
-    scrollIfNeeded$1(mousePosition, document.documentElement);
+    var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
+    if (scrolled) resetIndexesCache();
   }
 
   next$1 = window.setTimeout(loop, INTERVAL_MS$1);
@@ -1524,7 +1537,7 @@ function handleMouseMove(e) {
     x: c.clientX,
     y: c.clientY
   };
-  draggedEl.style.transform = "translate3d(0, ".concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
+  draggedEl.style.transform = "translate3d(".concat(currentMousePosition.x - dragStartMousePosition.x, "px, ").concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
 }
 
 function handleDrop() {

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

package/src/helpers/listUtil.js

@@ -12,6 +12,15 @@ export function resetIndexesCache() {
 }
 resetIndexesCache();
 
+/**
+ * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+ * @param {HTMLElement} dz
+ */
+export function resetIndexesCacheForDz(dz) {
+    printDebug(() => "resetting indexes cache for dz");
+    dzToShadowIndexToRect.delete(dz);
+}
+
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively

package/src/helpers/observer.js

@@ -1,4 +1,4 @@
-import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
+import {findWouldBeIndex, resetIndexesCache, resetIndexesCacheForDz} from "./listUtil";
 import {findCenterOfElement, isElementOffDocument} from "./intersection";
 import {
     dispatchDraggedElementEnteredContainer,
@@ -57,6 +57,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
         // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
         let isDraggedInADropZone = false;
         for (const dz of dropZonesFromDeepToShallow) {
+            if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
             const indexObj = findWouldBeIndex(draggedEl, dz);
             if (indexObj === null) {
                 // it is not inside

package/src/helpers/windowScroller.js

@@ -1,5 +1,6 @@
 import {makeScroller} from "./scroller";
 import {printDebug} from "../constants";
+import {resetIndexesCache} from "./listUtil";
 
 const INTERVAL_MS = 300;
 let mousePosition;
@@ -18,7 +19,8 @@ let next;
 
 function loop() {
     if (mousePosition) {
-        scrollIfNeeded(mousePosition, document.documentElement);
+        const scrolled = scrollIfNeeded(mousePosition, document.documentElement);
+        if (scrolled) resetIndexesCache();
     }
     next = window.setTimeout(loop, INTERVAL_MS);
 }

package/src/pointerAction.js

@@ -214,7 +214,9 @@ function handleMouseMove(e) {
     e.preventDefault();
     const c = e.touches ? e.touches[0] : e;
     currentMousePosition = {x: c.clientX, y: c.clientY};
-    draggedEl.style.transform = `translate3d(0, ${currentMousePosition.y - dragStartMousePosition.y}px, 0)`;
+    draggedEl.style.transform = `translate3d(${currentMousePosition.x - dragStartMousePosition.x}px, ${
+        currentMousePosition.y - dragStartMousePosition.y
+    }px, 0)`;
 }
 
 function handleDrop() {