refactor(edges): simplify edge rendering

2023-11-16 15:41:30 +01:00
parent b659443507
commit 08e61f3111
12 changed files with 275 additions and 318 deletions
@@ -63,82 +63,76 @@ const EdgeRenderer = ({
  children,
 }: EdgeRendererProps) => {
  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
-  // we are grouping edges by zIndex here in order to be able to render them in the correct order
-  // each zIndex gets its own svg element
-  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
+  const edges = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);

  return (
-    <>
-      {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
-          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
-          <>
-            {edges.map((edge) => {
-              let edgeType = edge.type || 'default';
+    <div className="react-flow__edges">
+      <svg className="react-flow__container">
+        <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
+      </svg>

-              if (!edgeTypes[edgeType]) {
-                onError?.('011', errorMessages['error011'](edgeType));
-                edgeType = 'default';
-              }
+      {edges.map((edge) => {
+        let edgeType = edge.type || 'default';

-              const EdgeComponent = edgeTypes[edgeType];
-              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')
-              );
+        if (!edgeTypes[edgeType]) {
+          onError?.('011', errorMessages['error011'](edgeType));
+          edgeType = 'default';
+        }
+
+        const EdgeComponent = edgeTypes[edgeType];
+        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'));
+
+        return (
+          <EdgeComponent
+            key={edge.id}
+            id={edge.id}
+            className={cc([edge.className, noPanClassName])}
+            type={edgeType}
+            data={edge.data}
+            selected={!!edge.selected}
+            animated={!!edge.animated}
+            hidden={!!edge.hidden}
+            label={edge.label}
+            labelStyle={edge.labelStyle}
+            labelShowBg={edge.labelShowBg}
+            labelBgStyle={edge.labelBgStyle}
+            labelBgPadding={edge.labelBgPadding}
+            labelBgBorderRadius={edge.labelBgBorderRadius}
+            style={edge.style}
+            zIndex={edge.zIndex}
+            source={edge.source}
+            target={edge.target}
+            sourceHandleId={edge.sourceHandle}
+            targetHandleId={edge.targetHandle}
+            markerEnd={edge.markerEnd}
+            markerStart={edge.markerStart}
+            isSelectable={isSelectable}
+            onEdgeUpdate={onEdgeUpdate}
+            onContextMenu={onEdgeContextMenu}
+            onMouseEnter={onEdgeMouseEnter}
+            onMouseMove={onEdgeMouseMove}
+            onMouseLeave={onEdgeMouseLeave}
+            onClick={onEdgeClick}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+            onEdgeDoubleClick={onEdgeDoubleClick}
+            onEdgeUpdateStart={onEdgeUpdateStart}
+            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            rfId={rfId}
+            ariaLabel={edge.ariaLabel}
+            isFocusable={isFocusable}
+            isUpdatable={isUpdatable}
+            pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
+            interactionWidth={edge.interactionWidth}
+          />
+        );
+      })}

-              return (
-                <EdgeComponent
-                  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}
-                  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}
-                  onEdgeUpdate={onEdgeUpdate}
-                  onContextMenu={onEdgeContextMenu}
-                  onMouseEnter={onEdgeMouseEnter}
-                  onMouseMove={onEdgeMouseMove}
-                  onMouseLeave={onEdgeMouseLeave}
-                  onClick={onEdgeClick}
-                  edgeUpdaterRadius={edgeUpdaterRadius}
-                  onEdgeDoubleClick={onEdgeDoubleClick}
-                  onEdgeUpdateStart={onEdgeUpdateStart}
-                  onEdgeUpdateEnd={onEdgeUpdateEnd}
-                  rfId={rfId}
-                  ariaLabel={edge.ariaLabel}
-                  isFocusable={isFocusable}
-                  isUpdatable={isUpdatable}
-                  pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
-                  interactionWidth={edge.interactionWidth}
-                />
-              );
-            })}
-          </>
-        </svg>
-      ))}
      {children}
-    </>
+    </div>
  );
 };