From d8d94016553f652150647fe9e6ca7a060dfad990 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 23 Oct 2023 12:24:37 +0200 Subject: [PATCH 01/12] svelte(chore) edge components are now exported --- packages/svelte/src/lib/components/edges/index.ts | 4 ++++ packages/svelte/src/lib/index.ts | 1 + 2 files changed, 5 insertions(+) create mode 100644 packages/svelte/src/lib/components/edges/index.ts diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts new file mode 100644 index 00000000..1f1567b6 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/index.ts @@ -0,0 +1,4 @@ +export { default as BezierEdge } from './BezierEdge.svelte'; +export { default as StraightEdge } from './StraightEdge.svelte'; +export { default as SmoothStepEdge } from './SmoothStepEdge.svelte'; +export { default as StepEdge } from './StepEdge.svelte'; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 74a0ec7f..13666896 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -7,6 +7,7 @@ export * from '$lib/container/Panel'; export * from '$lib/components/SvelteFlowProvider'; export * from '$lib/components/EdgeLabelRenderer'; export * from '$lib/components/BaseEdge'; +export * from '$lib/components/edges'; export * from '$lib/components/Handle'; // plugins From b502547f8c9333979709409e8910e88e24d826b8 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 25 Oct 2023 09:10:20 +0200 Subject: [PATCH 02/12] feat(svelte) added toObject() on useSvelteFlow --- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 756b856c..fd20d61b 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -51,6 +51,7 @@ export function useSvelteFlow(): { getConnectedEdges: (id: string | (Partial & { id: Node['id'] })[]) => Edge[]; getIncomers: (node: string | (Partial & { id: Node['id'] })) => Node[]; getOutgoers: (node: string | (Partial & { id: Node['id'] })) => Node[]; + toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; } { const { zoomIn, @@ -263,6 +264,17 @@ export function useSvelteFlow(): { return getOutgoersBase(_node, get(nodes), get(edges)); }, + toObject: () => { + const _nodes = get(nodes); + const _edges = get(edges); + const _viewport = get(viewport); + + return { + nodes: { ..._nodes }, + edges: { ..._edges }, + viewport: { ..._viewport } + }; + }, viewport }; } From d1662f1703ef46ed98a2367d6398427b32d54d56 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 25 Oct 2023 09:31:04 +0200 Subject: [PATCH 03/12] fix(svelte) resizing updates width & height in the store correctly --- .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index d9eb867d..cfa66d67 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -106,6 +106,12 @@ }; }); + // Update width & height on resize + $: { + store.width.set(clientWidth); + store.height.set(clientHeight); + } + // this updates the store for simple changes // where the prop names equals the store name $: { From bbdff5ab10be24bb67a54816a9d60204998da953 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 30 Oct 2023 11:14:10 +0100 Subject: [PATCH 04/12] chore(svelte): prevent undefined for width and height --- .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index cfa66d67..36209b17 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -108,8 +108,10 @@ // Update width & height on resize $: { - store.width.set(clientWidth); - store.height.set(clientHeight); + if (clientWidth !== undefined && clientHeight !== undefined) { + store.width.set(clientWidth); + store.height.set(clientHeight); + } } // this updates the store for simple changes From e899c379d027650edd6e400c0e24f4f4ae34fb79 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 30 Oct 2023 11:52:50 +0100 Subject: [PATCH 05/12] chore(svelte): cleanup useSvelteFlow --- .../src/routes/usesvelteflow/Sidebar.svelte | 12 ++++++++++-- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 16 +++++++++------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte index 5b81fa4f..a195cf1c 100644 --- a/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte +++ b/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte @@ -1,5 +1,5 @@