make nodesDraggable, nodesConnectable and elementsSelectable bindable props

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;
     }
   });
 

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');

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>;