refactor(core): use node lookup map internally (#1450)

* refactor(core): use node lookup map internally

* chore(changeset): add

packages/core/src/store/actions.ts

@@ -8,6 +8,7 @@ import type {
   Edge,
   EdgeAddChange,
   EdgeChange,
+  EdgeLookup,
   EdgeRemoveChange,
   EdgeSelectionChange,
   Elements,
@@ -18,6 +19,7 @@ import type {
   NodeAddChange,
   NodeChange,
   NodeDimensionChange,
+  NodeLookup,
   NodePositionChange,
   NodeRemoveChange,
   NodeSelectionChange,
@@ -55,15 +57,13 @@ import { storeOptionsToSkip, useState } from './state'
 export function useActions(
   id: string,
   state: State,
-  // todo: change to a Set
-  nodeIds: ComputedRef<string[]>,
-  // todo: change to a Set
-  edgeIds: ComputedRef<string[]>,
+  nodeLookup: ComputedRef<NodeLookup>,
+  edgeLookup: ComputedRef<EdgeLookup>,
 ): Actions {
   const viewportHelper = useViewportHelper(state)
 
   const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => {
-    const updateIds = ids ?? nodeIds.value ?? []
+    const updateIds = ids ?? state.nodes.map((n) => n.id) ?? []
 
     state.hooks.updateNodeInternals.trigger(updateIds)
   }
@@ -85,11 +85,7 @@ export function useActions(
       return
     }
 
-    if (state.nodes && !nodeIds.value.length) {
-      return state.nodes.find((node) => node.id === id)
-    }
-
-    return state.nodes[nodeIds.value.indexOf(id)]
+    return nodeLookup.value.get(id)
   }
 
   const findEdge: Actions['findEdge'] = (id) => {
@@ -97,11 +93,7 @@ export function useActions(
       return
     }
 
-    if (state.edges && !edgeIds.value.length) {
-      return state.edges.find((edge) => edge.id === id)
-    }
-
-    return state.edges[edgeIds.value.indexOf(id)]
+    return edgeLookup.value.get(id)
   }
 
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
@@ -370,7 +362,7 @@ export function useActions(
 
   const setNodeExtent: Actions['setNodeExtent'] = (nodeExtent) => {
     state.nodeExtent = nodeExtent
-    updateNodeInternals(nodeIds.value)
+    updateNodeInternals()
   }
 
   const setInteractive: Actions['setInteractive'] = (isInteractive) => {

packages/core/src/store/getters.ts

@@ -1,31 +1,23 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import type { ComputedGetters, GraphEdge, GraphNode, State } from '../types'
+import type { ComputedGetters, EdgeLookup, GraphEdge, GraphNode, NodeLookup, State } from '../types'
 import { getNodesInside, isEdgeVisible } from '../utils'
 import { defaultEdgeTypes, defaultNodeTypes } from '../utils/defaultNodesEdges'
 
-export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds: ComputedRef<string[]>): ComputedGetters {
+export function useGetters(
+  state: State,
+  nodeLookup: ComputedRef<NodeLookup>,
+  edgeLookup: ComputedRef<EdgeLookup>,
+): ComputedGetters {
   /**
    * @deprecated will be removed in next major version; use findNode instead
    */
-  const getNode: ComputedGetters['getNode'] = computed(() => (id: string) => {
-    if (state.nodes && !nodeIds.value.length) {
-      return state.nodes.find((node) => node.id === id)
-    }
-
-    return state.nodes[nodeIds.value.indexOf(id)]
-  })
+  const getNode: ComputedGetters['getNode'] = computed(() => (id) => nodeLookup.value.get(id))
 
   /**
    * @deprecated will be removed in next major version; use findEdge instead
    */
-  const getEdge: ComputedGetters['getEdge'] = computed(() => (id: string) => {
-    if (state.edges && !edgeIds.value.length) {
-      return state.edges.find((edge) => edge.id === id)
-    }
-
-    return state.edges[edgeIds.value.indexOf(id)]
-  })
+  const getEdge: ComputedGetters['getEdge'] = computed(() => (id) => edgeLookup.value.get(id))
 
   const getEdgeTypes: ComputedGetters['getEdgeTypes'] = computed(() => {
     const edgeTypes: Record<string, any> = {
@@ -80,8 +72,8 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
       const visibleEdges: GraphEdge[] = []
 
       for (const edge of state.edges) {
-        const source = getNode.value(edge.source)!
-        const target = getNode.value(edge.target)!
+        const source = nodeLookup.value.get(edge.source)!
+        const target = nodeLookup.value.get(edge.target)!
 
         if (
           isEdgeVisible({