feat(store): add findNode & findEdge actions

# What's changed?

* deprecate computed getters `getNode` & `getEdge`
* add actions instead

packages/vue-flow/src/store/actions.ts

@@ -301,6 +301,21 @@ export default (state: State, getters: ComputedGetters): Actions => {
     state.hooks.edgesChange.trigger(changes)
   }
 
+  const nodeIds = $computed(() => state.nodes.map((n) => n.id))
+  const edgeIds = $computed(() => state.edges.map((e) => e.id))
+
+  const findNode: Actions['findNode'] = (id) => {
+    if (state.nodes && !nodeIds.length) return state.nodes.find((node) => node.id === id)
+
+    return state.nodes[nodeIds.indexOf(id)]
+  }
+
+  const findEdge: Actions['findEdge'] = (id) => {
+    if (state.edges && !edgeIds.length) return state.edges.find((edge) => edge.id === id)
+
+    return state.edges[edgeIds.indexOf(id)]
+  }
+
   const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) =>
     updateEdgeAction(oldEdge, newConnection, state.edges, addEdges)
 
@@ -380,6 +395,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
     addEdges,
     removeNodes,
     removeEdges,
+    findNode,
+    findEdge,
     updateEdge,
     applyEdgeChanges,
     applyNodeChanges,

packages/vue-flow/src/types/store.ts

@@ -145,6 +145,10 @@ export interface Actions extends ViewportFunctions {
   removeNodes: RemoveNodes
   /** remove edges from state */
   removeEdges: RemoveEdges
+  /** find a node by id */
+  findNode: (id: string) => GraphNode | undefined
+  /** find an edge by id */
+  findEdge: (id: string) => GraphEdge | undefined
   /** updates an edge */
   updateEdge: UpdateEdge
   /** applies default edge change handler */
@@ -198,9 +202,9 @@ export interface Getters {
   getNodes: GraphNode[]
   /** filters hidden edges */
   getEdges: GraphEdge[]
-  /** returns a node by id */
+  /** @deprecated use {@link Actions.findNode} instead; returns a node by id */
   getNode: (id: string) => GraphNode | undefined
-  /** returns an edge by id */
+  /** @deprecated use {@link Actions.findEdge} instead; returns an edge by id */
   getEdge: (id: string) => GraphEdge | undefined
   /** returns all currently selected elements */
   getSelectedElements: FlowElements