chore(example): add debug node

example/src/Basic/DebugNode.tsx

@@ -0,0 +1,27 @@
+import { memo, FC, CSSProperties } from 'react';
+
+import { Handle, NodeProps, Position } from 'react-flow-renderer';
+
+const infoStyle: CSSProperties = { fontSize: 11 };
+const idStyle: CSSProperties = {
+  fontSize: 10,
+  color: '#888899',
+  position: 'absolute',
+  top: 2,
+  left: 2,
+};
+
+const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div style={idStyle}>{id}</div>
+      <div style={infoStyle}>
+        x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

example/src/Basic/index.tsx

@@ -14,6 +14,7 @@ import ReactFlow, {
   OnLoadParams,
   Connection,
 } from 'react-flow-renderer';
+import DebugNode from './DebugNode';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -21,15 +22,6 @@ 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: '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' },
-  {
-    id: '4',
-    data: { label: 'Node 4' },
-    position: { x: 100, y: 200 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: 600, height: 300 },
-  },
   {
     id: '4a',
     data: { label: 'Node 4a' },
@@ -38,14 +30,7 @@ const initialNodes: Node[] = [
     parentNode: '4',
     extent: 'parent',
   },
-  {
-    id: '4b',
-    data: { label: 'Node 4b' },
-    position: { x: 150, y: 50 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 255, 0.8)', height: 300, width: 300 },
-    parentNode: '4',
-  },
+
   {
     id: '4b1',
     data: { label: 'Node 4b1' },
@@ -60,6 +45,44 @@ const initialNodes: Node[] = [
     className: 'light',
     parentNode: '4b',
   },
+  {
+    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: '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: '5a',
+    data: { label: 'Node 5a' },
+    position: { x: 25, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  {
+    id: '5b',
+    data: { label: 'Node 5b' },
+    position: { x: 225, y: 50 },
+    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' },
 ];
 
 const initialEdges: Edge[] = [
@@ -70,8 +93,13 @@ const initialEdges: Edge[] = [
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
   { id: 'e4a-4b2', source: '4a', target: '4b2' },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  { id: '3-5', source: '3', target: '5' },
 ];
 
+const nodeTypes = {
+  default: DebugNode,
+};
+
 const BasicFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
@@ -142,6 +170,7 @@ const BasicFlow = () => {
       minZoom={0.2}
       maxZoom={4}
       onlyRenderVisibleElements={false}
+      nodeTypes={nodeTypes}
     >
       <MiniMap />
       <Controls />

src/components/Nodes/wrapNode.tsx

@@ -270,6 +270,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               targetPosition={targetPosition}
               isDragging={isDragging}
               dragHandle={dragHandle}
+              zIndex={zIndex}
             />
           </Provider>
         </div>

src/store/utils.ts

@@ -55,7 +55,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
 
       const positionAbsoluteAndTreeLevel = getAbsolutePosAndTreeLevel(node, nextNodeInternals, {
         ...node.position,
-        treeLevel: node.zIndex || updatedInternals?.treeLevel || parentNodeInternal?.treeLevel || 0,
+        treeLevel: updatedInternals.treeLevel || parentNodeInternal?.treeLevel || 0,
       });
 
       const { treeLevel, x, y } = positionAbsoluteAndTreeLevel;
@@ -67,12 +67,6 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
       };
       updatedInternals.treeLevel = treeLevel;
     }
-
-    // if (node.isDragging || node.isSelected) {
-    //   nextNodeInternals.set(node.id, { ...updatedInternals, treeLevel: 1000 });
-    // } else {
-    //   nextNodeInternals.set(node.id, { ...updatedInternals, treeLevel: updatedInternals?.treeLevel || 0 });
-    // }
   });
 
   return nextNodeInternals;

src/types/index.ts

@@ -239,6 +239,7 @@ export interface NodeProps<T = any> {
   sourcePosition?: Position;
   isDragging?: boolean;
   dragHandle?: string;
+  zIndex?: number;
 }
 
 export interface NodeComponentProps<T = any> {
@@ -264,6 +265,7 @@ export interface NodeComponentProps<T = any> {
   style?: CSSProperties;
   isDragging?: boolean;
   dragHandle?: string;
+  zIndex?: number;
 }
 
 export interface WrapNodeProps<T = any> {