refactor(react/svelte): use nodeLookup

packages/svelte/src/lib/actions/drag/index.ts

@@ -30,7 +30,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
 
       return {
         nodes: get(store.nodes),
-        nodesLookup: get(store.nodesLookup),
+        nodeLookup: get(store.nodeLookup),
         edges: get(store.edges),
         nodeExtent: get(store.nodeExtent),
         snapGrid: snapGrid ? snapGrid : [0, 0],

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -23,6 +23,7 @@
 </script>
 
 <path
+  {id}
   d={path}
   class={cc(['svelte-flow__edge-path', className])}
   marker-start={markerStart}

packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts

@@ -9,17 +9,17 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
   // @todo: do we want to add this to system?
   const updateInternals = (id: string | string[]) => {
     const updateIds = Array.isArray(id) ? id : [id];
-    const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
+    const updates = new Map();
+
+    updateIds.forEach((updateId) => {
       const nodeElement = get(domNode)?.querySelector(
         `.svelte-flow__node[data-id="${updateId}"]`
       ) as HTMLDivElement;
 
       if (nodeElement) {
-        res.push({ id: updateId, nodeElement, forceUpdate: true });
+        updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
       }
-
-      return res;
-    }, []);
+    });
 
     requestAnimationFrame(() => updateNodeDimensions(updates));
   };

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -56,15 +56,15 @@ export function getDerivedConnectionProps(
       currentConnection,
       store.connectionLineType,
       store.connectionMode,
-      store.nodesLookup,
+      store.nodeLookup,
       store.viewport
     ],
-    ([connection, connectionLineType, connectionMode, nodesLookup, viewport]) => {
+    ([connection, connectionLineType, connectionMode, nodeLookup, viewport]) => {
       if (!connection.connectionStartHandle?.nodeId) {
         return initConnectionProps;
       }
 
-      const fromNode = nodesLookup.get(connection.connectionStartHandle?.nodeId);
+      const fromNode = nodeLookup.get(connection.connectionStartHandle?.nodeId);
       const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
       const handleBoundsStrict =
         fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || [];

packages/svelte/src/lib/store/edge-tree.ts

@@ -9,18 +9,18 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
     [
       store.edges,
       store.nodes,
-      store.nodesLookup,
+      store.nodeLookup,
       store.onlyRenderVisibleElements,
       store.viewport,
       store.width,
       store.height
     ],
-    ([edges, , nodesLookup, onlyRenderVisibleElements, viewport, width, height]) => {
+    ([edges, , nodeLookup, onlyRenderVisibleElements, viewport, width, height]) => {
       const visibleEdges =
         onlyRenderVisibleElements && width && height
           ? edges.filter((edge) => {
-              const sourceNode = nodesLookup.get(edge.source);
-              const targetNode = nodesLookup.get(edge.target);
+              const sourceNode = nodeLookup.get(edge.source);
+              const targetNode = nodeLookup.get(edge.target);
 
               return (
                 sourceNode &&
@@ -41,11 +41,11 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
   );
 
   return derived(
-    [visibleEdges, store.nodes, store.nodesLookup, store.connectionMode, store.onError],
-    ([visibleEdges, , nodesLookup, connectionMode, onError]) => {
+    [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onError],
+    ([visibleEdges, , nodeLookup, connectionMode, onError]) => {
       const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
-        const sourceNode = nodesLookup.get(edge.source);
-        const targetNode = nodesLookup.get(edge.target);
+        const sourceNode = nodeLookup.get(edge.source);
+        const targetNode = nodeLookup.get(edge.target);
 
         if (!sourceNode || !targetNode) {
           return res;
@@ -71,7 +71,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
         return res;
       }, []);
 
-      const groupedEdges = groupEdgesByZLevel<EdgeLayouted>(layoutedEdges, nodesLookup, false);
+      const groupedEdges = groupEdgesByZLevel<EdgeLayouted>(layoutedEdges, nodeLookup, false);
 
       return groupedEdges;
     }

packages/svelte/src/lib/store/index.ts

@@ -90,7 +90,7 @@ export function createStore({
     const nextNodes = updateNodeDimensionsSystem(
       updates,
       get(store.nodes),
-      get(store.nodesLookup),
+      get(store.nodeLookup),
       get(store.domNode),
       get(store.nodeOrigin)
     );

packages/svelte/src/lib/store/initial-store.ts

@@ -59,8 +59,8 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
 }) => {
-  const nodesLookup = new Map<string, Node>();
-  const nextNodes = updateNodes(nodes, nodesLookup, {
+  const nodeLookup = new Map<string, Node>();
+  const nextNodes = updateNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
@@ -79,8 +79,8 @@ export const getInitialStore = ({
 
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nextNodes, nodesLookup),
-    nodesLookup: readable<Map<string, Node>>(nodesLookup),
+    nodes: createNodesStore(nextNodes, nodeLookup),
+    nodeLookup: readable<Map<string, Node>>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges),
     edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),

packages/svelte/src/lib/store/utils.ts

@@ -112,7 +112,7 @@ export type NodeStoreOptions = {
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
 export const createNodesStore = (
   nodes: Node[],
-  nodesLookup: Map<string, Node>
+  nodeLookup: Map<string, Node>
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -126,7 +126,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    const nextNodes = updateNodes(nds, nodesLookup, {
+    const nextNodes = updateNodes(nds, nodeLookup, {
       elevateNodesOnSelect,
       defaults
     });