Merge pull request #3783 from xyflow/svelte-fix-selection-drag

Fix dragging in Svelte when draggable=false

packages/svelte/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bugfix
 
 - fix `deleteElements`
+- fix dragging when draggable=false
 
 ### ⚠️ Breaking
 

packages/svelte/src/lib/store/index.ts

@@ -178,34 +178,23 @@ export function createStore({
     }
   }
 
-  function resetSelectedItem<T extends Node | Edge>(ids: string[]) {
+  function resetSelectedElements(elements: Node[] | Edge[]) {
-    return (item: T) => {
+    let elementsChanged = false;
-      if (item.selected && ids.includes(item.id)) {
+    elements.forEach((element) => {
-        return {
+      if (element.selected) {
-          ...item,
+        element.selected = false;
-          selected: false
+        elementsChanged = true;
-        };
       }
-
+    });
-      return item;
+    return elementsChanged;
-    };
   }
 
   function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
-    const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes))
+    const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
-      .filter((node) => node.selected)
+    if (resetNodes) store.nodes.set(get(store.nodes));
-      .map((node) => node.id);
-    const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges))
-      .filter((edge) => edge.selected)
-      .map((edge) => edge.id);
 
-    if (selectedNodeIds.length) {
+    const resetEdges = resetSelectedElements(params?.edges || get(store.edges));
-      store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds)));
+    if (resetEdges) store.edges.set(get(store.edges));
-    }
-
-    if (selectedEdgeIds.length) {
-      store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds)));
-    }
   }
 
   store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => {

packages/svelte/src/lib/store/initial-store.ts

@@ -23,7 +23,8 @@ import {
   type OnConnectStart,
   type OnConnectEnd,
   type NodeLookup,
-  type OnBeforeDelete
+  type OnBeforeDelete,
+  type EdgeLookup
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -99,6 +100,7 @@ export const getInitialStore = ({
     flowId: writable<string | null>(null),
     nodes: createNodesStore(nextNodes, nodeLookup),
     nodeLookup: readable<NodeLookup>(nodeLookup),
+    edgeLookup: readable<EdgeLookup>(edgeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),
     visibleEdges: readable<EdgeLayouted[]>([]),