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

packages/react/src/container/EdgeRenderer/index.tsx

@@ -1,9 +1,8 @@
 import { memo, ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
-import cc from 'classcat';
 
 import { useStore } from '../../hooks/useStore';
-import useVisibleEdges from '../../hooks/useVisibleEdges';
+import useVisibleEdgeIds from '../../hooks/useVisibleEdges';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
 import type { ReactFlowState } from '../../types';
@@ -63,7 +62,7 @@ const EdgeRenderer = ({
   children,
 }: EdgeRendererProps) => {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
-  const edges = useVisibleEdges(onlyRenderVisibleElements);
+  const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
 
   return (
     <div className="react-flow__edges">
@@ -71,38 +70,15 @@ const EdgeRenderer = ({
         <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
       </svg>
 
-      {edges.map((edge) => {
-        const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-        const isUpdatable =
-          typeof onEdgeUpdate !== 'undefined' &&
-          (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
-        const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
-
+      {edgeIds.map((id) => {
         return (
           <EdgeWrapper
-            key={edge.id}
-            id={edge.id}
-            className={cc([edge.className, noPanClassName])}
-            type={edge.type}
-            data={edge.data}
-            selected={!!edge.selected}
-            animated={!!edge.animated}
-            hidden={!!edge.hidden}
-            zIndex={edge.zIndex}
-            label={edge.label}
-            labelStyle={edge.labelStyle}
-            labelShowBg={edge.labelShowBg}
-            labelBgStyle={edge.labelBgStyle}
-            labelBgPadding={edge.labelBgPadding}
-            labelBgBorderRadius={edge.labelBgBorderRadius}
-            style={edge.style}
-            source={edge.source}
-            target={edge.target}
-            sourceHandleId={edge.sourceHandle}
-            targetHandleId={edge.targetHandle}
-            markerEnd={edge.markerEnd}
-            markerStart={edge.markerStart}
-            isSelectable={isSelectable}
+            key={id}
+            id={id}
+            edgesFocusable={edgesFocusable}
+            edgesUpdatable={edgesUpdatable}
+            elementsSelectable={elementsSelectable}
+            noPanClassName={noPanClassName}
             onEdgeUpdate={onEdgeUpdate}
             onContextMenu={onEdgeContextMenu}
             onMouseEnter={onEdgeMouseEnter}
@@ -110,15 +86,10 @@ const EdgeRenderer = ({
             onMouseLeave={onEdgeMouseLeave}
             onClick={onEdgeClick}
             edgeUpdaterRadius={edgeUpdaterRadius}
-            onEdgeDoubleClick={onEdgeDoubleClick}
+            onDoubleClick={onEdgeDoubleClick}
             onEdgeUpdateStart={onEdgeUpdateStart}
             onEdgeUpdateEnd={onEdgeUpdateEnd}
             rfId={rfId}
-            ariaLabel={edge.ariaLabel}
-            isFocusable={isFocusable}
-            isUpdatable={isUpdatable}
-            pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
-            interactionWidth={edge.interactionWidth}
             onError={onError}
             edgeTypes={edgeTypes}
             elevateEdgesOnSelect={elevateEdgesOnSelect}