refactor(nested-nodes): zIndex

src/components/Nodes/wrapNode.tsx

@@ -48,6 +48,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     isDragging,
     resizeObserver,
     dragHandle,
+    zIndex,
   }: WrapNodeProps) => {
     const {
       addSelectedElements,
@@ -63,7 +64,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
     const nodeStyle: CSSProperties = useMemo(
       () => ({
-        zIndex: isSelected ? 10 : 3,
+        zIndex: isSelected ? zIndex + 1 : zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
         pointerEvents:
           isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',

src/container/NodeRenderer/index.tsx

@@ -39,10 +39,10 @@ interface NodesProps extends NodeRendererProps {
   nodesDraggable: boolean;
   nodesConnectable: boolean;
   elementsSelectable: boolean;
+  recursionDepth: number;
 }
 
-const Nodes = memo(
-  ({
+function Nodes({
   nodes = [],
   isDraggable,
   resizeObserver,
@@ -52,11 +52,10 @@ const Nodes = memo(
   nodesDraggable,
   nodesConnectable,
   elementsSelectable,
+  recursionDepth,
   ...props
-  }: NodesProps) => {
-    return (
-      <>
-        {nodes.map((node) => {
+}: NodesProps): any {
+  return nodes.map((node) => {
     const nodeType = node.type || 'default';
 
     if (!props.nodeTypes[nodeType]) {
@@ -75,9 +74,10 @@ const Nodes = memo(
       node.height !== null &&
       typeof node.width !== 'undefined' &&
       typeof node.height !== 'undefined';
+    let childRect;
 
     if (node.childNodes) {
-            const childRect = getRectOfNodes(node.childNodes);
+      childRect = getRectOfNodes(node.childNodes);
       node.position = node.isDragging
         ? node.position
         : { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
@@ -123,9 +123,10 @@ const Nodes = memo(
           isConnectable={isConnectable}
           resizeObserver={resizeObserver}
           dragHandle={node.dragHandle}
+          zIndex={3 + recursionDepth}
         />
         {node.childNodes && (
-                <Nodes
+          <MemoizedNodes
             nodes={node.childNodes}
             snapToGrid={snapToGrid}
             snapGrid={snapGrid}
@@ -134,16 +135,16 @@ const Nodes = memo(
             resizeObserver={resizeObserver}
             elementsSelectable={elementsSelectable}
             scale={scale}
+            recursionDepth={recursionDepth + 1}
             {...props}
           />
         )}
       </Fragment>
     );
-        })}
-      </>
-    );
-  }
-);
+  });
+}
+
+const MemoizedNodes = memo(Nodes);
 
 const NodeRenderer = (props: NodeRendererProps) => {
   const {
@@ -191,7 +192,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
-      <Nodes
+      <MemoizedNodes
         nodes={nodes}
         snapToGrid={snapToGrid}
         snapGrid={snapGrid}
@@ -200,6 +201,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         resizeObserver={resizeObserver}
         elementsSelectable={elementsSelectable}
         scale={transform[2]}
+        recursionDepth={0}
         {...props}
       />
     </div>

src/types/index.ts

@@ -300,6 +300,7 @@ export interface WrapNodeProps<T = any> {
   isDragging?: boolean;
   resizeObserver: ResizeObserver | null;
   dragHandle?: string;
+  zIndex: number;
 }
 
 export type FitViewParams = {