feat(stacking): simplify zIndex and treeLevel behaviour

example/src/Basic/index.tsx

@@ -28,7 +28,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 4' },
     position: { x: 100, y: 200 },
     className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, 1)' },
+    style: { backgroundColor: 'rgba(255, 0, 0, 0.8)' },
     width: 600,
     height: 300,
   },
@@ -42,12 +42,12 @@ const initialNodes: Node[] = [
   {
     id: '4b',
     data: { label: 'Node 4b' },
-    position: { x: 80, y: 80 },
+    position: { x: 150, y: 50 },
     className: 'light',
-    style: { backgroundColor: 'rgba(255, 255, 0, 0.2)' },
+    style: { backgroundColor: 'rgba(255, 0, 255, 0.8)' },
+    height: 300,
+    width: 300,
     parentNode: '4',
-    height: 200,
-    width: 350,
   },
   {
     id: '4b1',
@@ -68,10 +68,8 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e2-4a', source: '2', target: '4a', animated: true },
   { id: 'e3-4', source: '3', target: '4' },
   { id: 'e3-4b', source: '3', target: '4b' },
-  { id: 'e3-4b2', source: '3', target: '4b2' },
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
   { id: 'e4a-4b2', source: '4a', target: '4b2' },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },

src/components/ConnectionLine/index.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
 
-import { useStore } from '../../store';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import {
   ElementId,
-  Node,
+  NodeLookupItem,
   Transform,
   HandleElement,
   Position,
   ConnectionLineType,
   ConnectionLineComponent,
   HandleType,
-  ReactFlowState,
+  Node,
 } from '../../types';
+import useNodeLookup from '../../hooks/useNodeLookup';
 interface ConnectionLineProps {
   connectionNodeId: ElementId;
   connectionHandleId: ElementId | null;
@@ -27,8 +27,6 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const nodesSelector = (s: ReactFlowState) => s.nodes;
-
 export default ({
   connectionNodeId,
   connectionHandleId,
@@ -41,13 +39,13 @@ export default ({
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const nodes = useStore(nodesSelector);
+  const nodeLookup = useNodeLookup();
-  const [sourceNode, setSourceNode] = useState<Node | null>(null);
+  const [sourceNode, setSourceNode] = useState<NodeLookupItem | null>(null);
   const nodeId = connectionNodeId;
   const handleId = connectionHandleId;
 
   useEffect(() => {
-    const nextSourceNode = nodes.find((n) => n.id === nodeId) || null;
+    const nextSourceNode = nodeLookup.get(nodeId) || null;
     setSourceNode(nextSourceNode);
   }, []);
 
@@ -60,8 +58,8 @@ export default ({
     : sourceNode.handleBounds[connectionHandleType]![0];
   const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.width! / 2;
   const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.height!;
-  const sourceX = sourceNode.position.x + sourceHandleX;
+  const sourceX = sourceNode.position!.x + sourceHandleX;
-  const sourceY = sourceNode.position.y + sourceHandleY;
+  const sourceY = sourceNode.position!.y + sourceHandleY;
 
   const targetX = (connectionPositionX - transform[0]) / transform[2];
   const targetY = (connectionPositionY - transform[1]) / transform[2];
@@ -81,7 +79,7 @@ export default ({
           targetPosition={targetPosition}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
-          sourceNode={sourceNode}
+          sourceNode={sourceNode as Node}
           sourceHandle={sourceHandle}
         />
       </g>

src/container/EdgeRenderer/index.tsx

@@ -247,7 +247,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   return (
     <>
       {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg key={level} style={{ zIndex: 6 + level }} width={width} height={height} className="react-flow__edges">
+        <svg key={level} style={{ zIndex: level }} width={width} height={height} className="react-flow__edges">
           {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
           <g>
             {edges.map((edge: Edge) => {

src/container/NodeRenderer/index.tsx

@@ -116,7 +116,7 @@ function Node({
       isConnectable={isConnectable}
       resizeObserver={resizeObserver}
       dragHandle={node.dragHandle}
-      zIndex={6 + treeLevel}
+      zIndex={treeLevel}
       isParentNode={isParentNode}
     />
   );

src/store/index.ts

@@ -136,7 +136,7 @@ const createStore = () =>
           height: node.height || null,
           position: node.position,
           positionAbsolute: node.position,
-          treeLevel: 0,
+          treeLevel: node.zIndex || 0,
         };
         if (node.parentNode) {
           lookupNode.parentNode = node.parentNode;
@@ -149,19 +149,21 @@ const createStore = () =>
         .forEach((node) => {
           const positionAbsoluteAndTreeLevel = getAbsolutePositionAndTreeLevel(node, nodeLookup, {
             ...node.position,
-            treeLevel: 0,
+            treeLevel: node.zIndex || 0,
           });
 
           nodeLookup.set(node.parentNode!, { ...nodeLookup.get(node.parentNode!), isParentNode: true });
 
           if (positionAbsoluteAndTreeLevel) {
+            const { treeLevel, x, y } = positionAbsoluteAndTreeLevel;
+
             nodeLookup.set(node.id, {
               ...nodeLookup.get(node.id),
               positionAbsolute: {
-                x: positionAbsoluteAndTreeLevel.x,
+                x,
-                y: positionAbsoluteAndTreeLevel.y,
+                y,
               },
-              treeLevel: positionAbsoluteAndTreeLevel.treeLevel,
+              treeLevel,
             });
           }
         });

src/types/index.ts

@@ -82,9 +82,8 @@ export interface Node<T = any> {
   dragHandle?: string;
   width?: number | null;
   height?: number | null;
-  handleBounds?: NodeHandleBounds;
   parentNode?: ElementId;
-  childNodes?: Node[];
+  zIndex?: number;
 }
 
 export enum ArrowHeadType {