svelte-dnd-action 0.9.60 → 0.9.62

package/dist/index.js

@@ -2629,10 +2629,10 @@
   }
 
   var isItemsDragDisabled = createStore(true);
+  var userDragDisabled = createStore(false);
   function getAddedOptions() {
-    var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     return {
-      dragDisabled: isItemsDragDisabled,
+      dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
       zoneItemTabIndex: -1
     };
   }
@@ -2647,12 +2647,22 @@
    * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
    */
   function dragHandleZone(node, options) {
+    var _options$dragDisabled;
+    // Initialise stores from initial options
+    userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
     var currentOptions = options;
     var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
-    function isItemDisabledCB(isItemsDragDisabled) {
-      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+    function updateZone() {
+      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
     }
-    isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+    // Subscribe to internal store so finishing a drag updates the zone
+    isItemsDragDisabled.subscribe(updateZone);
+
+    // We don't need to subscribe to userDragDisabled here because updates to
+    // it always come through the `update` lifecycle and will call `updateZone`
+    // anyway.
+
     function consider(e) {
       var _e$detail$info = e.detail.info,
         source = _e$detail$info.source,
@@ -2673,13 +2683,16 @@
     node.addEventListener("finalize", finalize);
     return {
       update: function update(newOptions) {
+        var _currentOptions$dragD, _currentOptions;
         currentOptions = newOptions;
-        zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+        // keep store in sync with external prop
+        userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
+        updateZone();
       },
       destroy: function destroy() {
         node.removeEventListener("consider", consider);
         node.removeEventListener("finalize", finalize);
-        isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+        isItemsDragDisabled.unsubscribe(updateZone);
       }
     };
   }
@@ -2695,14 +2708,34 @@
       // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
       e.preventDefault();
       isItemsDragDisabled.set(false);
+
+      // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
+      window.addEventListener("mouseup", resetStartDrag);
+      window.addEventListener("touchend", resetStartDrag);
     }
     function handleKeyDown(e) {
       if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
     }
-    isItemsDragDisabled.subscribe(function (disabled) {
-      handle.tabIndex = disabled ? 0 : -1;
-      handle.style.cursor = disabled ? "grab" : "grabbing";
-    });
+    function resetStartDrag() {
+      isItemsDragDisabled.set(true);
+      window.removeEventListener("mouseup", resetStartDrag);
+      window.removeEventListener("touchend", resetStartDrag);
+    }
+    var recomputeHandleState = function recomputeHandleState() {
+      var userDisabled = userDragDisabled.get();
+      var internalDisabled = isItemsDragDisabled.get();
+      if (userDisabled) {
+        handle.tabIndex = -1;
+        handle.style.cursor = ""; // default cursor
+      } else {
+        handle.tabIndex = internalDisabled ? 0 : -1;
+        handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+      }
+    };
+
+    // Subscribe to both stores
+    userDragDisabled.subscribe(recomputeHandleState);
+    isItemsDragDisabled.subscribe(recomputeHandleState);
     handle.addEventListener("mousedown", startDrag);
     handle.addEventListener("touchstart", startDrag);
     handle.addEventListener("keydown", handleKeyDown);
@@ -2712,6 +2745,8 @@
         handle.removeEventListener("mousedown", startDrag);
         handle.removeEventListener("touchstart", startDrag);
         handle.removeEventListener("keydown", handleKeyDown);
+        userDragDisabled.unsubscribe(recomputeHandleState);
+        isItemsDragDisabled.unsubscribe(recomputeHandleState);
       }
     };
   }

package/dist/index.mjs

@@ -2623,10 +2623,10 @@ function createStore(initialValue) {
 }
 
 var isItemsDragDisabled = createStore(true);
+var userDragDisabled = createStore(false);
 function getAddedOptions() {
-  var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
   return {
-    dragDisabled: isItemsDragDisabled,
+    dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
     zoneItemTabIndex: -1
   };
 }
@@ -2641,12 +2641,22 @@ function getAddedOptions() {
  * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
  */
 function dragHandleZone(node, options) {
+  var _options$dragDisabled;
+  // Initialise stores from initial options
+  userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
   var currentOptions = options;
   var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
-  function isItemDisabledCB(isItemsDragDisabled) {
-    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+  function updateZone() {
+    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
   }
-  isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+  // Subscribe to internal store so finishing a drag updates the zone
+  isItemsDragDisabled.subscribe(updateZone);
+
+  // We don't need to subscribe to userDragDisabled here because updates to
+  // it always come through the `update` lifecycle and will call `updateZone`
+  // anyway.
+
   function consider(e) {
     var _e$detail$info = e.detail.info,
       source = _e$detail$info.source,
@@ -2667,13 +2677,16 @@ function dragHandleZone(node, options) {
   node.addEventListener("finalize", finalize);
   return {
     update: function update(newOptions) {
+      var _currentOptions$dragD, _currentOptions;
       currentOptions = newOptions;
-      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+      // keep store in sync with external prop
+      userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
+      updateZone();
     },
     destroy: function destroy() {
       node.removeEventListener("consider", consider);
       node.removeEventListener("finalize", finalize);
-      isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+      isItemsDragDisabled.unsubscribe(updateZone);
     }
   };
 }
@@ -2689,14 +2702,34 @@ function dragHandle(handle) {
     // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
     e.preventDefault();
     isItemsDragDisabled.set(false);
+
+    // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
+    window.addEventListener("mouseup", resetStartDrag);
+    window.addEventListener("touchend", resetStartDrag);
   }
   function handleKeyDown(e) {
     if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
   }
-  isItemsDragDisabled.subscribe(function (disabled) {
-    handle.tabIndex = disabled ? 0 : -1;
-    handle.style.cursor = disabled ? "grab" : "grabbing";
-  });
+  function resetStartDrag() {
+    isItemsDragDisabled.set(true);
+    window.removeEventListener("mouseup", resetStartDrag);
+    window.removeEventListener("touchend", resetStartDrag);
+  }
+  var recomputeHandleState = function recomputeHandleState() {
+    var userDisabled = userDragDisabled.get();
+    var internalDisabled = isItemsDragDisabled.get();
+    if (userDisabled) {
+      handle.tabIndex = -1;
+      handle.style.cursor = ""; // default cursor
+    } else {
+      handle.tabIndex = internalDisabled ? 0 : -1;
+      handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+    }
+  };
+
+  // Subscribe to both stores
+  userDragDisabled.subscribe(recomputeHandleState);
+  isItemsDragDisabled.subscribe(recomputeHandleState);
   handle.addEventListener("mousedown", startDrag);
   handle.addEventListener("touchstart", startDrag);
   handle.addEventListener("keydown", handleKeyDown);
@@ -2706,6 +2739,8 @@ function dragHandle(handle) {
       handle.removeEventListener("mousedown", startDrag);
       handle.removeEventListener("touchstart", startDrag);
       handle.removeEventListener("keydown", handleKeyDown);
+      userDragDisabled.unsubscribe(recomputeHandleState);
+      isItemsDragDisabled.unsubscribe(recomputeHandleState);
     }
   };
 }

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

package/src/wrappers/withDragHandles.js

@@ -3,10 +3,11 @@ import {dndzone} from "../action";
 import {createStore} from "./simpleStore";
 
 const isItemsDragDisabled = createStore(true);
+const userDragDisabled = createStore(false);
 
-function getAddedOptions(isItemsDragDisabled = true) {
+function getAddedOptions() {
     return {
-        dragDisabled: isItemsDragDisabled,
+        dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
         zoneItemTabIndex: -1
     };
 }
@@ -21,18 +22,30 @@ function getAddedOptions(isItemsDragDisabled = true) {
  * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
  */
 export function dragHandleZone(node, options) {
+    // Initialise stores from initial options
+    userDragDisabled.set(options?.dragDisabled ?? false);
+
     let currentOptions = options;
+
     const zone = dndzone(node, {
         ...currentOptions,
         ...getAddedOptions()
     });
-    function isItemDisabledCB(isItemsDragDisabled) {
+
+    function updateZone() {
         zone.update({
             ...currentOptions,
-            ...getAddedOptions(isItemsDragDisabled)
+            ...getAddedOptions()
         });
     }
-    isItemsDragDisabled.subscribe(isItemDisabledCB);
+
+    // Subscribe to internal store so finishing a drag updates the zone
+    isItemsDragDisabled.subscribe(updateZone);
+
+    // We don't need to subscribe to userDragDisabled here because updates to
+    // it always come through the `update` lifecycle and will call `updateZone`
+    // anyway.
+
     function consider(e) {
         const {
             info: {source, trigger}
@@ -59,15 +72,14 @@ export function dragHandleZone(node, options) {
     return {
         update: newOptions => {
             currentOptions = newOptions;
-            zone.update({
-                ...currentOptions,
-                ...getAddedOptions(isItemsDragDisabled.get())
-            });
+            // keep store in sync with external prop
+            userDragDisabled.set(currentOptions?.dragDisabled ?? false);
+            updateZone();
         },
         destroy: () => {
             node.removeEventListener("consider", consider);
             node.removeEventListener("finalize", finalize);
-            isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+            isItemsDragDisabled.unsubscribe(updateZone);
         }
     };
 }
@@ -84,15 +96,38 @@ export function dragHandle(handle) {
         // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
         e.preventDefault();
         isItemsDragDisabled.set(false);
+
+        // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
+        window.addEventListener("mouseup", resetStartDrag);
+        window.addEventListener("touchend", resetStartDrag);
     }
+
     function handleKeyDown(e) {
         if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
     }
 
-    isItemsDragDisabled.subscribe(disabled => {
-        handle.tabIndex = disabled ? 0 : -1;
-        handle.style.cursor = disabled ? "grab" : "grabbing";
-    });
+    function resetStartDrag() {
+        isItemsDragDisabled.set(true);
+        window.removeEventListener("mouseup", resetStartDrag);
+        window.removeEventListener("touchend", resetStartDrag);
+    }
+
+    const recomputeHandleState = () => {
+        const userDisabled = userDragDisabled.get();
+        const internalDisabled = isItemsDragDisabled.get();
+
+        if (userDisabled) {
+            handle.tabIndex = -1;
+            handle.style.cursor = ""; // default cursor
+        } else {
+            handle.tabIndex = internalDisabled ? 0 : -1;
+            handle.style.cursor = internalDisabled ? "grab" : "grabbing";
+        }
+    };
+
+    // Subscribe to both stores
+    userDragDisabled.subscribe(recomputeHandleState);
+    isItemsDragDisabled.subscribe(recomputeHandleState);
 
     handle.addEventListener("mousedown", startDrag);
     handle.addEventListener("touchstart", startDrag);
@@ -103,6 +138,8 @@ export function dragHandle(handle) {
             handle.removeEventListener("mousedown", startDrag);
             handle.removeEventListener("touchstart", startDrag);
             handle.removeEventListener("keydown", handleKeyDown);
+            userDragDisabled.unsubscribe(recomputeHandleState);
+            isItemsDragDisabled.unsubscribe(recomputeHandleState);
         }
     };
 }