feat(zIndexMode): use it for edges too

packages/react/src/components/EdgeWrapper/index.tsx

@@ -89,6 +89,7 @@ function EdgeWrapper<EdgeType extends Edge = Edge>({
           sourceNode,
           targetNode,
           elevateOnSelect: store.elevateEdgesOnSelect,
+          zIndexMode: store.zIndexMode,
         });
 
         return {

packages/react/src/store/initialState.ts

@@ -122,7 +122,7 @@ const getInitialState = ({
     edgesReconnectable: true,
     elementsSelectable: true,
     elevateNodesOnSelect: true,
-    elevateEdgesOnSelect: false,
+    elevateEdgesOnSelect: true,
     selectNodesOnDrag: true,
 
     multiSelectionActive: false,

packages/system/src/types/general.ts

@@ -368,4 +368,13 @@ export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType ex
   edges: EdgeType[];
 }) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;
 
-export type ZIndexMode = 'auto' | 'manual';
+/**
+ * The `ZIndexMode` type is used to define how z-indexing is calculated for nodes and edges.
+ * `auto` mode will automatically manage z-indexing for selections and sub flows.
+ * `basic` mode will only manage z-indexing for selections.
+ * `manual` mode does not apply any automatic z-indexing.
+ *
+ * @public
+ * @default 'auto'
+ */
+export type ZIndexMode = 'auto' | 'basic' | 'manual';

packages/system/src/utils/edges/general.ts

@@ -1,4 +1,13 @@
-import { Connection, InternalNodeBase, Transform, errorMessages, isEdgeBase, EdgeBase } from '../..';
+import {
+  Connection,
+  InternalNodeBase,
+  Transform,
+  errorMessages,
+  isEdgeBase,
+  EdgeBase,
+  ZIndexMode,
+  isManualZIndexMode,
+} from '../..';
 import { getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
 
 // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
@@ -28,6 +37,7 @@ export type GetEdgeZIndexParams = {
   selected?: boolean;
   zIndex?: number;
   elevateOnSelect?: boolean;
+  zIndexMode?: ZIndexMode;
 };
 
 /**
@@ -41,12 +51,19 @@ export function getElevatedEdgeZIndex({
   selected = false,
   zIndex,
   elevateOnSelect = false,
+  zIndexMode = 'auto',
 }: GetEdgeZIndexParams): number {
+  const manualZIndexMode = isManualZIndexMode(zIndexMode);
+
   if (zIndex !== undefined) {
     return zIndex;
   }
-  const edgeZ = elevateOnSelect && selected ? 1000 : 0;
 
+  if (manualZIndexMode) {
+    return 0;
+  }
+
+  const edgeZ = elevateOnSelect && selected ? 1000 : 0;
   const nodeZ = Math.max(
     sourceNode.parentId || (elevateOnSelect && sourceNode.selected) ? sourceNode.internals.z : 0,
     targetNode.parentId || (elevateOnSelect && targetNode.selected) ? targetNode.internals.z : 0

packages/system/src/utils/store.ts

@@ -117,7 +117,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
   checkEquality?: boolean;
 };
 
-function isManualZIndexMode(zIndexMode?: ZIndexMode): boolean {
+export function isManualZIndexMode(zIndexMode?: ZIndexMode): boolean {
   return zIndexMode === 'manual';
 }
 
@@ -129,7 +129,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
 ): boolean {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
 
-  let rootParentIndex = { i: -1 };
+  const rootParentIndex = { i: -1 };
   let nodesInitialized = nodes.length > 0;
   const tmpLookup = new Map(nodeLookup);
   const selectedNodeZ: number =
@@ -229,7 +229,7 @@ function updateChildNode<NodeType extends NodeBase>(
     rootParentIndex &&
     !parentNode.parentId &&
     parentNode.internals.rootParentIndex === undefined &&
-    !isManualZIndexMode(zIndexMode)
+    zIndexMode === 'auto'
   ) {
     parentNode.internals.rootParentIndex = ++rootParentIndex.i;
     parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;