refactor(edge-renderer): work with edge ids instead of edges, like node renderer

packages/system/src/utils/store.ts

@@ -11,6 +11,7 @@ import {
   XYZPosition,
   ConnectionLookup,
   EdgeBase,
+  EdgeLookup,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { isNumeric } from './general';
@@ -244,22 +245,25 @@ export function panBy({
   return transformChanged;
 }
 
-export function updateConnectionLookup(lookup: ConnectionLookup, edges: EdgeBase[]) {
+export function updateConnectionLookup(lookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {
   lookup.clear();
+  edgeLookup.clear();
 
-  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
-    if (source && target) {
-      const sourceKey = `${source}-source-${sourceHandle}`;
-      const targetKey = `${target}-target-${targetHandle}`;
+  for (const edge of edges) {
+    edgeLookup.set(edge.id, edge);
 
-      const prevSource = lookup.get(sourceKey) || new Map();
-      const prevTarget = lookup.get(targetKey) || new Map();
-      const connection = { source, target, sourceHandle, targetHandle };
+    const { source, target, sourceHandle = null, targetHandle = null } = edge;
 
-      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
-      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
-    }
-  });
+    const sourceKey = `${source}-source-${sourceHandle}`;
+    const targetKey = `${target}-target-${targetHandle}`;
+
+    const prevSource = lookup.get(sourceKey) || new Map();
+    const prevTarget = lookup.get(targetKey) || new Map();
+    const connection = { source, target, sourceHandle, targetHandle };
+
+    lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+    lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+  }
 
   return lookup;
 }