diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 7d605a09..0a447695 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -37,7 +37,7 @@ interface EdgeRendererProps { onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; noPanClassName?: string; - isEdgeAutoZIndex: boolean; + elevateEdgesOnSelect: boolean; } const selector = (s: ReactFlowState) => ({ @@ -66,7 +66,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => { connectionMode, nodeInternals, } = useStore(selector, shallow); - const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals, props.isEdgeAutoZIndex); + const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals, props.elevateEdgesOnSelect); if (!width) { return null; diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 2ac91e8f..f39cf1bd 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -82,7 +82,7 @@ const GraphView = ({ noDragClassName, noWheelClassName, noPanClassName, - isEdgeAutoZIndex, + elevateEdgesOnSelect, }: GraphViewProps) => { useOnInitHandler(onInit); @@ -136,7 +136,7 @@ const GraphView = ({ edgeUpdaterRadius={edgeUpdaterRadius} defaultMarkerColor={defaultMarkerColor} noPanClassName={noPanClassName} - isEdgeAutoZIndex={!!isEdgeAutoZIndex} + elevateEdgesOnSelect={!!elevateEdgesOnSelect} /> ( attributionPosition, proOptions, defaultEdgeOptions, - isEdgeAutoZIndex = false, + elevateEdgesOnSelect = false, ...rest }, ref @@ -205,7 +205,7 @@ const ReactFlow = forwardRef( noDragClassName={noDragClassName} noWheelClassName={noWheelClassName} noPanClassName={noPanClassName} - isEdgeAutoZIndex={isEdgeAutoZIndex} + elevateEdgesOnSelect={elevateEdgesOnSelect} /> >((tree, edge) => { const hasZIndex = isNumeric(edge.zIndex); let z = hasZIndex ? edge.zIndex! : 0; - if (isEdgeAutoZIndex) { + if (elevateEdgesOnSelect) { z = hasZIndex ? edge.zIndex! : Math.max(nodeInternals.get(edge.source)?.z || 0, nodeInternals.get(edge.target)?.z || 0); @@ -48,7 +48,7 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, isEdgeA return edgeTree; } -function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals, isEdgeAutoZIndex: boolean) { +function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean) { const edges = useStore( useCallback( (s: ReactFlowState) => { @@ -83,7 +83,7 @@ function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternal ) ); - return groupEdgesByZLevel(edges, nodeInternals, isEdgeAutoZIndex); + return groupEdgesByZLevel(edges, nodeInternals, elevateEdgesOnSelect); } export default useVisibleEdges; diff --git a/src/types/component-props.ts b/src/types/component-props.ts index 0c8f1c9c..5f86bb41 100644 --- a/src/types/component-props.ts +++ b/src/types/component-props.ts @@ -118,7 +118,7 @@ export interface ReactFlowProps extends HTMLAttributes { connectOnClick?: boolean; attributionPosition?: AttributionPosition; proOptions?: ProOptions; - isEdgeAutoZIndex?: boolean; + elevateEdgesOnSelect?: boolean; } export type ReactFlowRefType = HTMLDivElement;