Added connectionLineContainerStyle property

src/container/EdgeRenderer/index.tsx

@@ -24,6 +24,7 @@ interface EdgeRendererProps {
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
+  connectionLineContainerStyle?: CSSProperties;
   onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
   onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
   defaultMarkerColor: string;
@@ -75,6 +76,15 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent } = props;
   const renderConnectionLine = connectionNodeId && connectionHandleType;
 
+  let { connectionLineContainerStyle } = props
+  if (connectionLineContainerStyle?.zIndex === undefined) {
+    // if not set already, set the zIndex to the max level of the any edge
+    connectionLineContainerStyle = {
+      ...connectionLineContainerStyle,
+      zIndex: edgeTree.find(({ isMaxLevel }) => isMaxLevel)?.level
+    }
+  }
+
   return (
     <>
       {edgeTree.map(({ level, edges, isMaxLevel }) => (
@@ -179,22 +189,29 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                 />
               );
             })}
-            {renderConnectionLine && isMaxLevel && (
-              <ConnectionLine
-                connectionNodeId={connectionNodeId!}
-                connectionHandleId={connectionHandleId}
-                connectionHandleType={connectionHandleType!}
-                connectionPositionX={connectionPosition.x}
-                connectionPositionY={connectionPosition.y}
-                connectionLineStyle={connectionLineStyle}
-                connectionLineType={connectionLineType}
-                isConnectable={nodesConnectable}
-                CustomConnectionLineComponent={connectionLineComponent}
-              />
-            )}
           </g>
         </svg>
       ))}
+      {renderConnectionLine && <svg
+        style={connectionLineContainerStyle}
+        width={width}
+        height={height}
+        className="react-flow__edges react-flow__container"
+      >
+        <g>
+          <ConnectionLine
+            connectionNodeId={connectionNodeId!}
+            connectionHandleId={connectionHandleId}
+            connectionHandleType={connectionHandleType!}
+            connectionPositionX={connectionPosition.x}
+            connectionPositionY={connectionPosition.y}
+            connectionLineStyle={connectionLineStyle}
+            connectionLineType={connectionLineType}
+            isConnectable={nodesConnectable}
+            CustomConnectionLineComponent={connectionLineComponent}
+          />
+        </g>
+      </svg>}
     </>
   );
 };

src/container/FlowRenderer/index.tsx

@@ -18,6 +18,7 @@ interface FlowRendererProps
     | 'edgeTypes'
     | 'snapGrid'
     | 'connectionLineType'
+    | 'connectionLineContainerStyle'
     | 'arrowHeadColor'
     | 'onlyRenderVisibleElements'
     | 'selectNodesOnDrag'

src/container/GraphView/index.tsx

@@ -50,6 +50,7 @@ const GraphView = ({
   connectionLineType,
   connectionLineStyle,
   connectionLineComponent,
+  connectionLineContainerStyle,
   selectionKeyCode,
   multiSelectionKeyCode,
   zoomActivationKeyCode,
@@ -125,6 +126,7 @@ const GraphView = ({
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
           connectionLineComponent={connectionLineComponent}
+          connectionLineContainerStyle={connectionLineContainerStyle}
           onEdgeUpdate={onEdgeUpdate}
           onlyRenderVisibleElements={onlyRenderVisibleElements}
           onEdgeContextMenu={onEdgeContextMenu}

src/container/ReactFlow/index.tsx

@@ -87,6 +87,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       connectionLineType = ConnectionLineType.Bezier,
       connectionLineStyle,
       connectionLineComponent,
+      connectionLineContainerStyle,
       deleteKeyCode = 'Backspace',
       selectionKeyCode = 'Shift',
       multiSelectionKeyCode = 'Meta',
@@ -169,6 +170,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             connectionLineType={connectionLineType}
             connectionLineStyle={connectionLineStyle}
             connectionLineComponent={connectionLineComponent}
+            connectionLineContainerStyle={connectionLineContainerStyle}
             selectionKeyCode={selectionKeyCode}
             deleteKeyCode={deleteKeyCode}
             multiSelectionKeyCode={multiSelectionKeyCode}

src/types/component-props.ts

@@ -81,6 +81,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
+  connectionLineContainerStyle?: CSSProperties;
   deleteKeyCode?: KeyCode | null;
   selectionKeyCode?: KeyCode | null;
   multiSelectionKeyCode?: KeyCode | null;