refactor(svelte): use custom stores for nodes and edges

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

@@ -30,10 +30,13 @@ import {
   initialStoreState
 } from './initial-store';
 import type { SvelteFlowStore } from './types';
+import type { SvelteFlowProps } from '$lib/container/SvelteFlow/types';
 
 export const key = Symbol();
 
 type CreateStoreProps = {
+  nodes: SvelteFlowProps['nodes'];
+  edges: SvelteFlowProps['edges'];
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
   transform?: Transform;
@@ -42,9 +45,15 @@ type CreateStoreProps = {
   id?: string;
 };
 
-export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps): SvelteFlowStore {
+export function createStore({
+  fitView: fitViewOnInit = false,
+  nodes,
+  edges
+}: CreateStoreProps): SvelteFlowStore {
   const store = {
-    ...initialStoreState
+    ...initialStoreState,
+    nodes,
+    edges
   };
 
   let fitViewOnInitDone = false;
@@ -63,36 +72,9 @@ export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps
     });
   }
 
-  function setEdges(edges: Edge[]) {
-    const defaultEdgeOptions = get(store.defaultEdgeOptions);
-    const nextEdges = defaultEdgeOptions
-      ? edges.map((e) => ({ ...defaultEdgeOptions, ...e }))
-      : edges;
-    store.edges.set(nextEdges);
-  }
-
   function addEdge(edgeParams: Edge | Connection) {
     const edges = get(store.edges);
-    setEdges(addEdgeUtil(edgeParams, edges));
-  }
-
-  function setNodes(nodes: Node[]) {
-    const defaultNodeOptions = get(store.defaultNodeOptions) || {};
-
-    store.nodes.update((currentNodes) => {
-      const nextNodes = nodes.map((n) => {
-        const currentNode = currentNodes.find((cn) => cn.id === n.id) || {};
-
-        return {
-          ...defaultNodeOptions,
-          ...currentNode,
-          ...n,
-          positionAbsolute: n.position
-        };
-      });
-
-      return nextNodes;
-    });
+    store.edges.set(addEdgeUtil(edgeParams, edges));
   }
 
   function updateNodePositions(nodeDragItems: NodeDragItem[], dragging = false) {
@@ -332,8 +314,6 @@ export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps
     connectionPath: getConnectionPath(store),
 
     // actions
-    setNodes,
-    setEdges,
     setNodeTypes,
     setEdgeTypes,
     addEdge,

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

@@ -16,16 +16,7 @@ import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 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 type {
-  Node,
-  Edge,
-  ConnectionData,
-  NodeTypes,
-  EdgeTypes,
-  EdgeLayouted,
-  DefaultEdgeOptions,
-  DefaultNodeOptions
-} from '$lib/types';
+import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
 
 export const initConnectionData = {
   nodeId: null,
@@ -49,8 +40,6 @@ export const initialEdgeTypes = {
 
 export const initialStoreState = {
   id: writable<string | null>(null),
-  nodes: writable<Node[]>([]),
-  edges: writable<Edge[]>([]),
   edgesLayouted: readable<EdgeLayouted[]>([]),
   height: writable<number>(500),
   width: writable<number>(500),
@@ -61,8 +50,6 @@ export const initialStoreState = {
     zoom: null,
     selection: null
   }),
-  defaultNodeOptions: writable<DefaultNodeOptions | null>(null),
-  defaultEdgeOptions: writable<DefaultEdgeOptions | null>(null),
   dragging: writable<boolean>(false),
   selectionRect: writable<SelectionRect | null>(null),
   selectionKeyPressed: writable<boolean>(false),

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

@@ -8,10 +8,9 @@ import type {
 
 import type { initialStoreState } from './initial-store';
 import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes } from '$lib/types';
+import type { Writable } from 'svelte/store';
 
 export type SvelteFlowStoreActions = {
-  setNodes: (nodes: Node[]) => void;
-  setEdges: (edges: Edge[]) => void;
   setNodeTypes: (nodeTypes: NodeTypes) => void;
   setEdgeTypes: (edgeTypes: EdgeTypes) => void;
   addEdge: (edge: Edge | Connection) => void;
@@ -33,6 +32,9 @@ export type SvelteFlowStoreActions = {
   cancelConnection: () => void;
 };
 
-export type SvelteFlowStoreState = typeof initialStoreState;
+export type SvelteFlowStoreState = typeof initialStoreState & {
+  nodes: Writable<Node[]>;
+  edges: Writable<Edge[]>;
+};
 
 export type SvelteFlowStore = SvelteFlowStoreState & SvelteFlowStoreActions;