feat(svelte): add nodesConnectable, nodesDraggable and elementsSelectable

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte

@@ -7,15 +7,6 @@
 
 <defs>
   {#each $markers as marker(marker.id)}
-    <Marker
-      id={marker.id}
-      type={marker.type}
-      color={marker.color}
-      width={marker.width}
-      height={marker.height}
-      markerUnits={marker.markerUnits}
-      strokeWidth={marker.strokeWidth}
-      orient={marker.orient}
-    />
+    <Marker {...marker} />
   {/each}
 </defs>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -6,7 +6,7 @@
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
 
-  const { nodes, updateNodeDimensions } = useStore();
+  const { nodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'
@@ -38,9 +38,9 @@
       id={node.id}
       data={node.data}
       selected={node.selected}
-      draggable={node.draggable || node.draggable === undefined}
-      selectable={node.selectable || node.selectable === undefined}
-      connectable={node.connectable || node.connectable === undefined}
+      draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
+      selectable={!!(node.selectable || ($elementsSelectable && typeof node.selectable === 'undefined'))}
+      connectable={!!(node.connectable || ($nodesConnectable && typeof node.connectable === 'undefined'))}
       positionAbsolute={node.positionAbsolute}
       positionOrigin={posOrigin}
       isParent={!!node[internalsSymbol]?.isParent}

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -26,6 +26,9 @@
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
   export let selectionMode: $$Props['selectionMode'] = undefined;
+  export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
+  export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
+  export let elementsSelectable: $$Props['elementsSelectable'] = undefined;
   export let snapGrid: $$Props['snapGrid'] = undefined;
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
@@ -60,7 +63,10 @@
       selectionMode,
       snapGrid,
       isValidConnection,
-      defaultMarkerColor
+      defaultMarkerColor,
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
     };
 
     Object.keys(updatableProps).forEach(prop => {

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -33,6 +33,9 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   selectionMode?: SelectionMode;
   snapGrid?: SnapGrid;
   defaultMarkerColor?: string;
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  elementsSelectable?: boolean;
 
   class?: string;
   style?: string;