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 diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index d47ee45b..b6bb941e 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[]; + getEdge: (id: string) => Edge | undefined; + getEdges: (ids?: string[]) => Edge[]; 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 === undefined ? get(nodes) : getElements(get(nodeLookup), ids)), + getEdge: (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 }); }, @@ -295,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; +}