refactor(edges): default zIndex=0

src/container/EdgeRenderer/index.tsx

@@ -37,6 +37,7 @@ interface EdgeRendererProps {
   onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
   edgeUpdaterRadius?: number;
   noPanClassName?: string;
+  isEdgeAutoZIndex: boolean;
 }
 
 const selector = (s: ReactFlowState) => ({
@@ -65,7 +66,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     connectionMode,
     nodeInternals,
   } = useStore(selector, shallow);
-  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals);
+  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals, props.isEdgeAutoZIndex);
 
   if (!width) {
     return null;

src/container/GraphView/index.tsx

@@ -82,6 +82,7 @@ const GraphView = ({
   noDragClassName,
   noWheelClassName,
   noPanClassName,
+  isEdgeAutoZIndex,
 }: GraphViewProps) => {
   useOnInitHandler(onInit);
 
@@ -135,6 +136,7 @@ const GraphView = ({
           edgeUpdaterRadius={edgeUpdaterRadius}
           defaultMarkerColor={defaultMarkerColor}
           noPanClassName={noPanClassName}
+          isEdgeAutoZIndex={!!isEdgeAutoZIndex}
         />
         <NodeRenderer
           nodeTypes={nodeTypes}

src/container/ReactFlow/index.tsx

@@ -137,6 +137,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       attributionPosition,
       proOptions,
       defaultEdgeOptions,
+      isEdgeAutoZIndex = false,
       ...rest
     },
     ref
@@ -204,6 +205,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noDragClassName={noDragClassName}
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
+            isEdgeAutoZIndex={isEdgeAutoZIndex}
           />
           <StoreUpdater
             nodes={nodes}

src/hooks/useVisibleEdges.ts

@@ -7,13 +7,19 @@ import { isNumeric } from '../utils';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 
-function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals) {
+function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, isEdgeAutoZIndex: boolean = false) {
   let maxLevel = -1;
 
   const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {
-    const z = isNumeric(edge.zIndex)
-      ? edge.zIndex
-      : Math.max(nodeInternals.get(edge.source)?.z || 0, nodeInternals.get(edge.target)?.z || 0);
+    const hasZIndex = isNumeric(edge.zIndex);
+    let z = hasZIndex ? edge.zIndex! : 0;
+
+    if (isEdgeAutoZIndex) {
+      z = hasZIndex
+        ? edge.zIndex!
+        : Math.max(nodeInternals.get(edge.source)?.z || 0, nodeInternals.get(edge.target)?.z || 0);
+    }
+
     if (tree[z]) {
       tree[z].push(edge);
     } else {
@@ -42,7 +48,7 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals) {
   return edgeTree;
 }
 
-function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals) {
+function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals, isEdgeAutoZIndex: boolean) {
   const edges = useStore(
     useCallback(
       (s: ReactFlowState) => {
@@ -77,7 +83,7 @@ function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternal
     )
   );
 
-  return groupEdgesByZLevel(edges, nodeInternals);
+  return groupEdgesByZLevel(edges, nodeInternals, isEdgeAutoZIndex);
 }
 
 export default useVisibleEdges;

src/types/component-props.ts

@@ -118,6 +118,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   connectOnClick?: boolean;
   attributionPosition?: AttributionPosition;
   proOptions?: ProOptions;
+  isEdgeAutoZIndex?: boolean;
 }
 
 export type ReactFlowRefType = HTMLDivElement;