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>
+      )}
     </>
   );
 };