From cebe88d9280c7e987197ad1c8d4ed45e85200b6d Mon Sep 17 00:00:00 2001 From: RunDevelopment Date: Wed, 18 May 2022 16:16:08 +0200 Subject: [PATCH 1/5] Added `connectionLineContainerStyle` property --- src/container/EdgeRenderer/index.tsx | 43 +++++++++++++++++++--------- src/container/FlowRenderer/index.tsx | 1 + src/container/GraphView/index.tsx | 2 ++ src/container/ReactFlow/index.tsx | 2 ++ src/types/component-props.ts | 1 + 5 files changed, 36 insertions(+), 13 deletions(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 0a447695..b0818914 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/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 && ( - - )} ))} + {renderConnectionLine && + + + + } ); }; diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx index 57b0ba11..ced447d9 100644 --- a/src/container/FlowRenderer/index.tsx +++ b/src/container/FlowRenderer/index.tsx @@ -18,6 +18,7 @@ interface FlowRendererProps | 'edgeTypes' | 'snapGrid' | 'connectionLineType' + | 'connectionLineContainerStyle' | 'arrowHeadColor' | 'onlyRenderVisibleElements' | 'selectNodesOnDrag' diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index f39cf1bd..e5db5604 100644 --- a/src/container/GraphView/index.tsx +++ b/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} diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index f51b9a31..2951da3b 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -87,6 +87,7 @@ const ReactFlow = forwardRef( connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, + connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', multiSelectionKeyCode = 'Meta', @@ -169,6 +170,7 @@ const ReactFlow = forwardRef( connectionLineType={connectionLineType} connectionLineStyle={connectionLineStyle} connectionLineComponent={connectionLineComponent} + connectionLineContainerStyle={connectionLineContainerStyle} selectionKeyCode={selectionKeyCode} deleteKeyCode={deleteKeyCode} multiSelectionKeyCode={multiSelectionKeyCode} diff --git a/src/types/component-props.ts b/src/types/component-props.ts index e55093a2..8d5380a3 100644 --- a/src/types/component-props.ts +++ b/src/types/component-props.ts @@ -81,6 +81,7 @@ export interface ReactFlowProps extends HTMLAttributes { connectionLineType?: ConnectionLineType; connectionLineStyle?: CSSProperties; connectionLineComponent?: ConnectionLineComponent; + connectionLineContainerStyle?: CSSProperties; deleteKeyCode?: KeyCode | null; selectionKeyCode?: KeyCode | null; multiSelectionKeyCode?: KeyCode | null; From 4322730a66515b74a4f327b006199b1b9ef4ebc6 Mon Sep 17 00:00:00 2001 From: RunDevelopment Date: Thu, 19 May 2022 15:49:30 +0200 Subject: [PATCH 2/5] Added `react-flow__connectionline` class --- src/container/EdgeRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index b0818914..87bd0732 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -93,7 +93,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { style={{ zIndex: level }} width={width} height={height} - className="react-flow__edges react-flow__container" + className="react-flow__edges react-flow__connectionline react-flow__container" > {isMaxLevel && } From b2ccf1d00274c53e5dbe00c680b4cb8df72b4139 Mon Sep 17 00:00:00 2001 From: RunDevelopment Date: Sun, 22 May 2022 12:05:25 +0200 Subject: [PATCH 3/5] Fixed class name --- src/container/EdgeRenderer/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 87bd0732..42bf3ba0 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -93,7 +93,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { style={{ zIndex: level }} width={width} height={height} - className="react-flow__edges react-flow__connectionline react-flow__container" + className="react-flow__edges react-flow__container" > {isMaxLevel && } @@ -196,7 +196,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { style={connectionLineContainerStyle} width={width} height={height} - className="react-flow__edges react-flow__container" + className="react-flow__edges react-flow__connectionline react-flow__container" > Date: Sun, 22 May 2022 12:13:31 +0200 Subject: [PATCH 4/5] Set z-index via CSS --- src/container/EdgeRenderer/index.tsx | 11 +---------- src/style.css | 4 ++++ 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 42bf3ba0..2f4fdc37 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -73,18 +73,9 @@ const EdgeRenderer = (props: EdgeRendererProps) => { return null; } - const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent } = props; + const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle } = 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 }) => ( diff --git a/src/style.css b/src/style.css index 0a725c6f..88fab950 100644 --- a/src/style.css +++ b/src/style.css @@ -36,6 +36,10 @@ overflow: visible; } +.react-flow .react-flow__connectionline { + z-index: 1001; +} + .react-flow__edge { pointer-events: visibleStroke; From daf5927c09110f6429a0660da60ce528e00db79d Mon Sep 17 00:00:00 2001 From: RunDevelopment Date: Sun, 22 May 2022 12:13:37 +0200 Subject: [PATCH 5/5] Formatting --- src/container/EdgeRenderer/index.tsx | 50 ++++++++++++++++------------ 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 2f4fdc37..eb524e7f 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -73,7 +73,13 @@ const EdgeRenderer = (props: EdgeRendererProps) => { return null; } - const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle } = props; + const { + connectionLineType, + defaultMarkerColor, + connectionLineStyle, + connectionLineComponent, + connectionLineContainerStyle, + } = props; const renderConnectionLine = connectionNodeId && connectionHandleType; return ( @@ -183,26 +189,28 @@ const EdgeRenderer = (props: EdgeRendererProps) => { ))} - {renderConnectionLine && - - - - } + {renderConnectionLine && ( + + + + + + )} ); };