From 879d6c0ba3c2107e067b2d2ad76b115841aa614d Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 17 Mar 2025 09:57:30 +0100
Subject: [PATCH] make nodesDraggable, nodesConnectable and elementsSelectable
 bindable props

---
 .../container/SvelteFlow/SvelteFlow.svelte    | 21 +++++++++++++++++
 .../src/lib/store/initial-store.svelte.ts     | 23 ++++++++++++++++---
 packages/svelte/src/lib/store/types.ts        |  3 +++
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index f10aef43..05fb224f 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -65,6 +65,9 @@
     nodes = $bindable([]),
     edges = $bindable([]),
     viewport = $bindable(undefined),
+    nodesDraggable = $bindable(true),
+    nodesConnectable = $bindable(true),
+    elementsSelectable = $bindable(true),
     ...props
   }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
 
@@ -89,6 +92,24 @@
     },
     set viewport(newViewport) {
       viewport = newViewport;
+    },
+    get nodesDraggable() {
+      return nodesDraggable;
+    },
+    set nodesDraggable(newNodesDraggable) {
+      nodesDraggable = newNodesDraggable;
+    },
+    get nodesConnectable() {
+      return nodesConnectable;
+    },
+    set nodesConnectable(newNodesConnectable) {
+      nodesConnectable = newNodesConnectable;
+    },
+    get elementsSelectable() {
+      return elementsSelectable;
+    },
+    set elementsSelectable(newElementsSelectable) {
+      elementsSelectable = newElementsSelectable;
     }
   });
 
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index 1a55f222..03cdba63 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -155,6 +155,25 @@ export const getInitialStore = (signals: StoreSignals) => {
       };
     });
 
+    get nodesDraggable() {
+      return signals.nodesDraggable;
+    }
+    set nodesDraggable(value: boolean) {
+      signals.nodesDraggable = value;
+    }
+    get nodesConnectable() {
+      return signals.nodesConnectable;
+    }
+    set nodesConnectable(value: boolean) {
+      signals.nodesConnectable = value;
+    }
+    get elementsSelectable() {
+      return signals.elementsSelectable;
+    }
+    set elementsSelectable(value: boolean) {
+      signals.elementsSelectable = value;
+    }
+
     domNode = $state<HTMLDivElement | null>(null);
     width = $state<number>(signals.width ?? 0);
     height = $state<number>(signals.height ?? 0);
@@ -231,9 +250,7 @@ export const getInitialStore = (signals: StoreSignals) => {
     isValidConnection: IsValidConnection = $derived(
       signals.props.isValidConnection ?? (() => true)
     );
-    nodesDraggable: boolean = $derived(signals.props.nodesDraggable ?? true);
-    nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
-    elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
+
     selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? true);
 
     defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts
index f53fedbf..b8401111 100644
--- a/packages/svelte/src/lib/store/types.ts
+++ b/packages/svelte/src/lib/store/types.ts
@@ -95,6 +95,9 @@ export type StoreSignals = {
   nodes: Node[];
   edges: Edge[];
   viewport?: Viewport;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  elementsSelectable: boolean;
 };
 
 export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;