feat(stacking): disable auto layering, instead configure via zIndex prop

example/src/Basic/index.tsx

@@ -22,6 +22,13 @@ const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 100, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
+  },
   {
     id: '4a',
     data: { label: 'Node 4a' },
@@ -30,7 +37,14 @@ const initialNodes: Node[] = [
     parentNode: '4',
     extent: 'parent',
   },
-
+  {
+    id: '4b',
+    data: { label: 'Node 4b' },
+    position: { x: 150, y: 50 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
+    parentNode: '4',
+  },
   {
     id: '4b1',
     data: { label: 'Node 4b1' },
@@ -46,19 +60,12 @@ const initialNodes: Node[] = [
     parentNode: '4b',
   },
   {
-    id: '4b',
-    data: { label: 'Node 4b' },
-    position: { x: 150, y: 50 },
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 650, y: 250 },
     className: 'light',
-    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
-    parentNode: '4',
-  },
-  {
-    id: '4',
-    data: { label: 'Node 4' },
-    position: { x: 100, y: 200 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
+    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
+    zIndex: 1000,
   },
   {
     id: '5a',
@@ -74,13 +81,6 @@ const initialNodes: Node[] = [
     className: 'light',
     parentNode: '5',
   },
-  {
-    id: '5',
-    data: { label: 'Node 5' },
-    position: { x: 650, y: 250 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
-  },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
   { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
 ];
@@ -88,10 +88,10 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4' },
+  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
   { id: 'e3-4b', source: '3', target: '4b' },
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
   { id: '3-5', source: '3', target: '5' },
 ];

src/hooks/useVisibleEdges.ts

@@ -8,7 +8,7 @@ function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals) {
   let maxLevel = -1;
 
   const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {
-    const z = Math.max(nodeInternals.get(edge.source)?.z || 0, nodeInternals.get(edge.target)?.z || 0);
+    const z = edge.zIndex || Math.max(nodeInternals.get(edge.source)?.z || 0, nodeInternals.get(edge.target)?.z || 0);
     if (tree[z]) {
       tree[z].push(edge);
     } else {

src/store/utils.ts

@@ -31,6 +31,42 @@ function calculateXYZPosition(
     z: (result.z ?? 0) + zAddition,
   });
 }
+
+// function createTree(items: Node[]): any {
+//   const rootItems = [];
+//   const lookup: Record<any, any> = {};
+
+//   for (const item of items) {
+//     const parentId = item.parentNode;
+
+//     if (!lookup[item.id]) {
+//       lookup[item.id] = { childNodes: [], z: 0 };
+//     }
+
+//     lookup[item.id] = {
+//       node: item,
+//       childNodes: lookup[item.id].childNodes,
+//       z: lookup[item.id].z,
+//     };
+
+//     const treeItem = lookup[item.id];
+
+//     if (!parentId) {
+//       rootItems.push(treeItem);
+//     } else {
+//       if (!lookup[parentId]) {
+//         lookup[parentId] = { childNodes: [], z: 0 };
+//       }
+
+//       lookup[parentId].childNodes.push({ ...treeItem, z: lookup[parentId].z + 1 });
+//     }
+//   }
+
+//   console.log(lookup);
+
+//   return rootItems;
+// }
+
 export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals): NodeInternals {
   const nextNodeInternals = new Map<string, NodeInternalsItem>();
   const parentNodes: ParentNodes = {};
@@ -57,26 +93,15 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     const updatedInternals: NodeInternalsItem = nextNodeInternals.get(node.id)!;
 
     if (node.parentNode || parentNodes[node.id]) {
-      let startingZ = updatedInternals.z || 0;
-
-      if (!startingZ) {
-        if (parentNodes[node.id]) {
-          startingZ = 2;
-        } else if (node.parentNode) {
-          startingZ = 1;
-        }
-      }
-
-      const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
+      const { x, y } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
         ...node.position,
-        z: startingZ,
+        z: 0,
       });
 
       updatedInternals.positionAbsolute = {
         x,
         y,
       };
-      updatedInternals.z = z;
 
       if (parentNodes[node.id]) {
         updatedInternals.isParent = true;

src/types/edges.ts

@@ -29,6 +29,7 @@ export interface Edge<T = any> {
   selected?: boolean;
   markerStart?: EdgeMarkerType;
   markerEnd?: EdgeMarkerType;
+  zIndex?: number;
 }
 
 // props that get passed to a custom edge