diff --git a/packages/svelte/src/customnodes/Custom.svelte b/packages/svelte/src/customnodes/Custom.svelte index 09b6c7f5..c2be70f7 100644 --- a/packages/svelte/src/customnodes/Custom.svelte +++ b/packages/svelte/src/customnodes/Custom.svelte @@ -1,7 +1,7 @@
; - edgesStore: Writable; + nodesStore: Writable; + edgesStore: Writable; heightStore: Writable; widthStore: Writable; d3Store: Writable<{ @@ -69,6 +67,8 @@ type SvelteFlowStore = { selectionKeyPressedStore: Writable; nodeTypesStore: Writable; edgeTypesStore: Writable; + setNodes: (nodes: Node[]) => void; + setEdges: (edges: Edge[]) => void; zoomIn: (options?: ViewportHelperFunctionOptions) => void; zoomOut: (options?: ViewportHelperFunctionOptions) => void; fitView: (options?: ViewportHelperFunctionOptions) => boolean; @@ -82,8 +82,6 @@ type SvelteFlowStore = { }; export function createStore({ - nodes = [], - edges = [], transform = [0, 0, 1], nodeOrigin = [0, 0], fitView: fitViewOnInit = false, @@ -91,8 +89,8 @@ export function createStore({ edgeTypes = {}, id = '1' }: CreateStoreProps): SvelteFlowStore { - const nodesStore = writable(nodes.map((n) => ({ ...n, positionAbsolute: n.position }))); - const edgesStore = writable(edges); + const nodesStore = writable([] as Node[]); + const edgesStore = writable([] as Edge[]); const heightStore = writable(500); const widthStore = writable(500); const nodeOriginStore = writable(nodeOrigin); @@ -119,6 +117,7 @@ export function createStore({ smoothstep: edgeTypes.smoothstep || SmoothStepEdge, default: edgeTypes.default || BezierEdge }); + const transformStore = writable(transform); let fitViewOnInitDone = false; @@ -171,7 +170,25 @@ export function createStore({ .filter((e) => e !== null) as EdgeWithData[]; }); - const transformStore = writable(transform); + function setEdges(edges: Edge[]) { + edgesStore.set(edges); + } + + function setNodes(nodes: Node[]) { + nodesStore.update((currentNodes) => { + const nextNodes = nodes.map((n) => { + const currentNode = currentNodes.find((cn) => cn.id === n.id) || {}; + + return { + ...currentNode, + ...n, + positionAbsolute: n.position + }; + }); + + return nextNodes; + }); + } function updateNodePositions(nodeDragItems: NodeDragItem[], dragging = false) { nodesStore.update((nds) => { @@ -310,6 +327,8 @@ export function createStore({ selectionMode, nodeTypesStore, edgeTypesStore, + setNodes, + setEdges, updateNodePositions, updateNodeDimensions, zoomIn, diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts index 82961ca9..3218b914 100644 --- a/packages/svelte/src/lib/types/general.ts +++ b/packages/svelte/src/lib/types/general.ts @@ -8,4 +8,5 @@ export type SvelteFlowProps = { fitView?: boolean; class?: string; style?: string; + id?: string; }; diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts index 695d574e..a359002d 100644 --- a/packages/svelte/src/lib/types/nodes.ts +++ b/packages/svelte/src/lib/types/nodes.ts @@ -9,6 +9,7 @@ export type Node = { position: XYPosition; sourcePosition?: Position; targetPosition?: Position; + positionAbsolute?: XYPosition; width?: number; height?: number; @@ -35,7 +36,7 @@ export type NodeProps = Pick< }; export type WrapNodeProps = Node & { - resizeObserver?: ResizeObserver; + resizeObserver?: ResizeObserver | null; }; -export type NodeTypes = Record>; +export type NodeTypes = Record>>; diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte index 949d5563..42118d11 100644 --- a/packages/svelte/src/routes/+page.svelte +++ b/packages/svelte/src/routes/+page.svelte @@ -1,9 +1,9 @@ - + + + +