From aee1b6b9f80efd6de9762a76ad89c60d602419cf Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 16:27:51 +0100 Subject: [PATCH 1/4] add getNode, getNodes, getEdge, getEdges --- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index d47ee45b..0cf53f5c 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -29,6 +29,10 @@ import { isNode } from '$lib/utils'; export function useSvelteFlow(): { zoomIn: ZoomInOut; zoomOut: ZoomInOut; + getNode: (id: string) => Node | undefined; + getNodes: (ids: string[]) => (Node | undefined)[]; + getEdge: (id: string) => Edge | undefined; + getEdges: (ids: string[]) => (Edge | undefined)[]; setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; getZoom: () => number; setCenter: (x: number, y: number, options?: SetCenterOptions) => void; @@ -82,7 +86,9 @@ export function useSvelteFlow(): { panZoom, nodes, edges, - domNode + domNode, + nodeLookup, + edgeLookup } = useStore(); const getNodeRect = ( @@ -121,6 +127,10 @@ export function useSvelteFlow(): { return { zoomIn, zoomOut, + getNode: (id) => get(nodeLookup).get(id), + getNodes: (ids) => ids.map((id) => get(nodeLookup).get(id)), + getEdge: (id) => get(edgeLookup).get(id), + getEdges: (ids) => ids.map((id) => get(edgeLookup).get(id)), setZoom: (zoomLevel, options) => { get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration }); }, From 08bb803ef2a6879e1e6342a46eb6e2c0ac604541 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 22 Jan 2024 16:38:00 +0100 Subject: [PATCH 2/4] getNodes & getEdges can be called without specifying ids --- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 0cf53f5c..5cc414bc 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -30,9 +30,9 @@ export function useSvelteFlow(): { zoomIn: ZoomInOut; zoomOut: ZoomInOut; getNode: (id: string) => Node | undefined; - getNodes: (ids: string[]) => (Node | undefined)[]; + getNodes: (ids?: string[]) => (Node | undefined)[]; getEdge: (id: string) => Edge | undefined; - getEdges: (ids: string[]) => (Edge | undefined)[]; + getEdges: (ids?: string[]) => (Edge | undefined)[]; setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; getZoom: () => number; setCenter: (x: number, y: number, options?: SetCenterOptions) => void; @@ -128,9 +128,19 @@ export function useSvelteFlow(): { zoomIn, zoomOut, getNode: (id) => get(nodeLookup).get(id), - getNodes: (ids) => ids.map((id) => get(nodeLookup).get(id)), + getNodes: (ids) => { + if (!ids) { + return get(nodes); + } + return ids.map((id) => get(nodeLookup).get(id)); + }, getEdge: (id) => get(edgeLookup).get(id), - getEdges: (ids) => ids.map((id) => get(edgeLookup).get(id)), + getEdges: (ids) => { + if (!ids) { + return get(edges); + } + return ids.map((id) => get(edgeLookup).get(id)); + }, setZoom: (zoomLevel, options) => { get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration }); }, From 54e6ff22f93a26efb131541ed9fecd21d0ec3869 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 22 Jan 2024 17:33:36 +0100 Subject: [PATCH 3/4] chore(svelte): cleanup useSvelteFlow --- .../svelte/src/lib/hooks/useSvelteFlow.ts | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 5cc414bc..b6bb941e 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -30,9 +30,9 @@ export function useSvelteFlow(): { zoomIn: ZoomInOut; zoomOut: ZoomInOut; getNode: (id: string) => Node | undefined; - getNodes: (ids?: string[]) => (Node | undefined)[]; + getNodes: (ids?: string[]) => Node[]; getEdge: (id: string) => Edge | undefined; - getEdges: (ids?: string[]) => (Edge | undefined)[]; + getEdges: (ids?: string[]) => Edge[]; setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; getZoom: () => number; setCenter: (x: number, y: number, options?: SetCenterOptions) => void; @@ -128,19 +128,9 @@ export function useSvelteFlow(): { zoomIn, zoomOut, getNode: (id) => get(nodeLookup).get(id), - getNodes: (ids) => { - if (!ids) { - return get(nodes); - } - return ids.map((id) => get(nodeLookup).get(id)); - }, + getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(get(nodeLookup), ids)), getEdge: (id) => get(edgeLookup).get(id), - getEdges: (ids) => { - if (!ids) { - return get(edges); - } - return ids.map((id) => get(edgeLookup).get(id)); - }, + getEdges: (ids) => (ids === undefined ? get(edges) : getElements(get(edgeLookup), ids)), setZoom: (zoomLevel, options) => { get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration }); }, @@ -315,3 +305,17 @@ export function useSvelteFlow(): { viewport }; } + +function getElements(lookup: Map, ids: string[]) { + const result = []; + + for (const id of ids) { + const element = lookup.get(id); + + if (element) { + result.push(element); + } + } + + return result; +} From 7d949e18bc967160c1b0338aa4b4e93427c331df Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 22 Jan 2024 17:36:32 +0100 Subject: [PATCH 4/4] chore(svelte): update changelog --- packages/svelte/CHANGELOG.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 163f9663..6b9e940a 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -4,6 +4,10 @@ ## Minor changes +- add `getNode`, `getNodes`, `getEdge` and `getEdges` to `useSvelteFlow` + +## Patch changes + - Edge label has a default background and is clickable ## 0.0.34 @@ -12,6 +16,9 @@ - add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used - add slot to `Controls` + +## Patch changes + - cleanup `ControlButton` types - infer types for `getIncomers`, `getOutgoers`, `updateEdge`, `addEdge` and `getConnectedEdges` thanks @joeyballentine - refactor handles: prefix with flow id for handling nested flows @@ -48,7 +55,7 @@ - add `onbeforedelete` handler to prevent/ manage deletions - TSDocs for hooks and some types -### Minor changes +### Patch changes - new nodeDragThreshold default is 1 - refactor/simplify edge rendering