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 @@
-
+
+
+
+