refactor(svelte): simplify nodes and edges store handling

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

@@ -1,4 +1,4 @@
-import { getContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { derived, get } from 'svelte/store';
 import {
   internalsSymbol,
@@ -25,19 +25,15 @@ import {
   initConnectionData,
   initialEdgeTypes,
   initialNodeTypes,
-  initialStoreState
+  getInitialStore
 } from './initial-store';
 import type { SvelteFlowStore } from './types';
+import { syncNodeStores, syncEdgeStores } from './utils';
 
 export const key = Symbol();
 
-type CreateStoreParams = Pick<SvelteFlowStore, 'nodes' | 'edges'>;
-
-export function createStore(params: CreateStoreParams): SvelteFlowStore {
-  const store = {
-    ...initialStoreState,
-    ...params
-  };
+export function createStore(): SvelteFlowStore {
+  const store = getInitialStore();
 
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
@@ -55,6 +51,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
 
   function addEdge(edgeParams: Edge | Connection) {
     const edges = get(store.edges);
+
     store.edges.set(addEdgeUtil(edgeParams, edges));
   }
 
@@ -348,6 +345,8 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     ),
 
     // actions
+    syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
+    syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
     setNodeTypes,
     setEdgeTypes,
     addEdge,
@@ -380,3 +379,13 @@ export function useStore(): SvelteFlowStore {
 
   return store.getStore();
 }
+
+export function createStoreContext() {
+  const store = createStore();
+
+  setContext(key, {
+    getStore: () => store
+  });
+
+  return store;
+}

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

@@ -20,7 +20,8 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Edge, Node } from '$lib/types';
+import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
+import { createNodes, createEdges } from './utils';
 
 export const initConnectionData = {
   connectionStartHandle: null,
@@ -42,10 +43,10 @@ export const initialEdgeTypes = {
   step: StepEdge
 };
 
-export const initialStoreState = {
+export const getInitialStore = () => ({
   flowId: writable<string | null>(null),
-  nodes: writable<Node[]>([]),
-  edges: writable<Edge[]>([]),
+  nodes: createNodes([]),
+  edges: createEdges([]),
   edgesLayouted: readable<EdgeLayouted[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
@@ -82,4 +83,4 @@ export const initialStoreState = {
   markers: readable<MarkerProps[]>([]),
   defaultMarkerColor: writable<string>('#b1b1b7'),
   lib: readable<string>('svelte')
-};
+});

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

@@ -9,10 +9,12 @@ import type {
   UpdateConnection
 } from '@xyflow/system';
 
-import type { initialStoreState } from './initial-store';
+import type { getInitialStore } from './initial-store';
 import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';
 
 export type SvelteFlowStoreActions = {
+  syncNodeStores: (nodesStore: Writable<Node[]>) => void;
+  syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
   setNodeTypes: (nodeTypes: NodeTypes) => void;
   setEdgeTypes: (edgeTypes: EdgeTypes) => void;
   addEdge: (edge: Edge | Connection) => void;
@@ -33,9 +35,6 @@ export type SvelteFlowStoreActions = {
   reset(): void;
 };
 
-export type SvelteFlowStoreState = typeof initialStoreState & {
-  nodes: Writable<Node[]>;
-  edges: Writable<Edge[]>;
-};
+export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
 
 export type SvelteFlowStore = SvelteFlowStoreState & SvelteFlowStoreActions;

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

@@ -0,0 +1,188 @@
+import {
+  writable,
+  type Unsubscriber,
+  type Subscriber,
+  type Updater,
+  type Writable,
+  get
+} from 'svelte/store';
+import {
+  isNumeric,
+  getNodePositionWithOrigin,
+  internalsSymbol,
+  type XYZPosition
+} from '@xyflow/system';
+
+import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
+
+export function syncNodeStores(
+  nodesStore: ReturnType<typeof createNodes>,
+  userNodesStore: Writable<Node[]>
+) {
+  const nodesStoreSetter = nodesStore.set;
+  const userNodesStoreSetter = userNodesStore.set;
+
+  let val = get(userNodesStore);
+  nodesStore.set(val);
+
+  const _set = (nds: Node[]) => {
+    const updatedNodes = nodesStoreSetter(nds);
+    val = updatedNodes;
+
+    userNodesStoreSetter(val);
+
+    return updatedNodes;
+  };
+
+  nodesStore.set = userNodesStore.set = _set;
+  nodesStore.update = userNodesStore.update = (fn: (nds: Node[]) => Node[]) => _set(fn(val));
+}
+
+export function syncEdgeStores(
+  edgesStore: ReturnType<typeof createEdges>,
+  userEdgesStore: Writable<Edge[]>
+) {
+  const nodesStoreSetter = edgesStore.set;
+  const userEdgesStoreSetter = userEdgesStore.set;
+
+  let val = get(userEdgesStore);
+  edgesStore.set(val);
+
+  const _set = (eds: Edge[]) => {
+    nodesStoreSetter(eds);
+    userEdgesStoreSetter(eds);
+    val = eds;
+  };
+
+  edgesStore.set = userEdgesStore.set = _set;
+  edgesStore.update = userEdgesStore.update = (fn: (nds: Edge[]) => Edge[]) => _set(fn(val));
+}
+
+export const createNodes = (
+  nodes: Node[]
+): {
+  subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
+  update: (this: void, updater: Updater<Node[]>) => void;
+  set: (this: void, value: Node[]) => Node[];
+  setDefaultOptions: (opts: DefaultNodeOptions) => void;
+} => {
+  const { subscribe, set, update } = writable<Node[]>([]);
+  let value = nodes;
+  let defaults = {};
+
+  const _set = (nds: Node[]): Node[] => {
+    const parentNodes: Record<string, boolean> = {};
+
+    const nextNodes = nds.map((n) => {
+      const node: Node = { ...defaults, ...n, positionAbsolute: n.position };
+      const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1 : 0);
+
+      if (node.parentNode) {
+        parentNodes[node.parentNode] = true;
+      }
+
+      Object.defineProperty(node, internalsSymbol, {
+        value: {
+          handleBounds: node?.[internalsSymbol]?.handleBounds,
+          z
+        }
+      });
+
+      return node;
+    });
+
+    const nodesWithPositions = nextNodes.map((node) => {
+      if (node.parentNode && !parentNodes[node.parentNode]) {
+        throw new Error(`Parent node ${node.parentNode} not found`);
+      }
+
+      if (node.parentNode || parentNodes?.[node.id]) {
+        const { x, y, z } = calculateXYZPosition(node, nextNodes, {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0
+        });
+
+        node.positionAbsolute = {
+          x,
+          y
+        };
+
+        node[internalsSymbol]!.z = z;
+
+        if (parentNodes?.[node.id]) {
+          node[internalsSymbol]!.isParent = true;
+        }
+      }
+
+      return node;
+    });
+
+    value = nodesWithPositions;
+
+    set(value);
+
+    return value;
+  };
+
+  const _update: typeof update = (fn: (nds: Node[]) => Node[]) => _set(fn(value));
+
+  const setDefaultOptions = (options: DefaultNodeOptions) => {
+    defaults = options;
+  };
+
+  _set(value);
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update,
+    setDefaultOptions
+  };
+};
+
+export const createEdges = (
+  edges: Edge[],
+  defaultOptions?: DefaultEdgeOptions
+): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
+  const { subscribe, set, update } = writable<Edge[]>([]);
+  let value = edges;
+  let defaults = defaultOptions || {};
+
+  const _set: typeof set = (eds: Edge[]) => {
+    const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
+    value = nextEdges;
+    set(value);
+  };
+
+  const _update: typeof update = (fn: (eds: Edge[]) => Edge[]) => _set(fn(value));
+
+  const setDefaultOptions = (options: DefaultEdgeOptions) => {
+    defaults = options;
+  };
+
+  _set(value);
+
+  return {
+    subscribe,
+    set: _set,
+    update: _update,
+    setDefaultOptions
+  };
+};
+
+function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition): XYZPosition {
+  if (!node.parentNode) {
+    return result;
+  }
+  const parentNode = nodes.find((n) => n.id === node.parentNode)!;
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin);
+
+  return calculateXYZPosition(parentNode, nodes, {
+    x: (result.x ?? 0) + parentNodePosition.x,
+    y: (result.y ?? 0) + parentNodePosition.y,
+    z:
+      (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0)
+        ? parentNode[internalsSymbol]?.z ?? 0
+        : result.z ?? 0
+  });
+}