Merge pull request #3815 from xyflow/svelte-get-edges-nodes

add getNode, getNodes, getEdge, getEdges

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

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<EdgeOrNode>(lookup: Map<string, EdgeOrNode>, ids: string[]) {
+  const result = [];
+
+  for (const id of ids) {
+    const element = lookup.get(id);
+
+    if (element) {
+      result.push(element);
+    }
+  }
+
+  return result;
+}