Merge pull request #2159 from RunDevelopment/issue2158

Added `connectionLineContainerStyle` property

src/container/EdgeRenderer/index.tsx

@@ -25,6 +25,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;
@@ -73,7 +74,13 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     return null;
   }
 
-  const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent } = props;
+  const {
+    connectionLineType,
+    defaultMarkerColor,
+    connectionLineStyle,
+    connectionLineComponent,
+    connectionLineContainerStyle,
+  } = props;
   const renderConnectionLine = connectionNodeId && connectionHandleType;
 
   return (
@@ -180,22 +187,31 @@ 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__connectionline 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

@@ -19,6 +19,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

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

src/style.css

@@ -36,6 +36,10 @@
   overflow: visible;
 }
 
+.react-flow .react-flow__connectionline {
+  z-index: 1001;
+}
+
 .react-flow__edge {
   pointer-events: visibleStroke;
 

src/types/component-props.ts

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