feat(svelte): add nodesConnectable, nodesDraggable and elementsSelectable

packages/svelte/src/lib/store/edges-layouted.ts

@@ -7,57 +7,64 @@ import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
 export function getEdgesLayouted(store: SvelteFlowStoreState) {
-  return derived([store.edges, store.nodes], ([edges, nodes]) => {
-    return edges.reduce<EdgeLayouted[]>((res, edge) => {
-      const sourceNode = nodes.find((node) => node.id === edge.source);
-      const targetNode = nodes.find((node) => node.id === edge.target);
-      const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
-      const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
+  return derived(
+    [store.edges, store.nodes, store.elementsSelectable],
+    ([edges, nodes, elementsSelectable]) => {
+      return edges.reduce<EdgeLayouted[]>((res, edge) => {
+        const sourceNode = nodes.find((node) => node.id === edge.source);
+        const targetNode = nodes.find((node) => node.id === edge.target);
+        const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
+        const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
+
+        if (!sourceIsValid || !targetIsValid) {
+          return res;
+        }
+
+        const edgeType = edge.type || 'default';
+
+        const targetNodeHandles = targetHandleBounds!.target;
+        const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
+        const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
+        const sourcePosition = sourceHandle?.position || Position.Bottom;
+        const targetPosition = targetHandle?.position || Position.Top;
+
+        if (!sourceHandle || !targetHandle) {
+          return res;
+        }
+
+        const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
+          sourceNodeRect,
+          sourceHandle,
+          sourcePosition,
+          targetNodeRect,
+          targetHandle,
+          targetPosition
+        );
+
+        // we nee to do this to match the types
+        const sourceHandleId = edge.sourceHandle;
+        const targetHandleId = edge.targetHandle;
+        const selectable = !!(
+          edge.selectable ||
+          (elementsSelectable && typeof edge.selectable === 'undefined')
+        );
+
+        res.push({
+          ...edge,
+          selectable,
+          type: edgeType,
+          sourceX,
+          sourceY,
+          targetX,
+          targetY,
+          sourcePosition,
+          targetPosition,
+          sourceHandleId,
+          targetHandleId
+        } as EdgeLayouted);
 
-      if (!sourceIsValid || !targetIsValid) {
         return res;
-      }
-
-      const edgeType = edge.type || 'default';
-
-      const targetNodeHandles = targetHandleBounds!.target;
-      const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
-      const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
-      const sourcePosition = sourceHandle?.position || Position.Bottom;
-      const targetPosition = targetHandle?.position || Position.Top;
-
-      if (!sourceHandle || !targetHandle) {
-        return res;
-      }
-
-      const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
-        sourceNodeRect,
-        sourceHandle,
-        sourcePosition,
-        targetNodeRect,
-        targetHandle,
-        targetPosition
-      );
-
-      // we nee to do this to match the types
-      const sourceHandleId = edge.sourceHandle;
-      const targetHandleId = edge.targetHandle;
-
-      res.push({
-        ...edge,
-        selectable: edge.selectable || typeof edge.selectable === 'undefined',
-        type: edgeType,
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-        sourcePosition,
-        targetPosition,
-        sourceHandleId,
-        targetHandleId
-      } as EdgeLayouted);
-
-      return res;
-    }, []);
-  });
+      }, []);
+    }
+  );
 }

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

@@ -332,9 +332,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     connectionPath: getConnectionPath(store),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],
-      ([edges, defaultColor, id]) => {
-        return createMarkerIds(edges, { defaultColor, id });
-      }
+      ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
     ),
 
     // actions

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

@@ -82,6 +82,9 @@ export const initialStoreState = {
   connectionRadius: writable<number>(25),
   connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
   isValidConnection: writable<IsValidConnection>(() => true),
+  nodesDraggable: writable<boolean>(true),
+  nodesConnectable: writable<boolean>(true),
+  elementsSelectable: writable<boolean>(true),
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7')
 };