Merge branch 'nested-nodes' of github.com:wbkd/react-flow into nested-nodes

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/EdgeRenderer/index.tsx

@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 import { useStore } from '../../store';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from './utils';
+import { getEdgePositions, getHandle, getSourceTargetNodes } from './utils';
 import {
   Position,
   Edge,
@@ -16,6 +16,7 @@ import {
   ReactFlowState,
   NodeHandleBounds,
 } from '../../types';
+import useVisibleEdges from '../../hooks/useVisibleEdges';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -234,38 +235,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     nodes,
   } = useStore(selector, shallow);
 
-  const edges = useStore(
+  const edges = useVisibleEdges(props.onlyRenderVisibleElements);
-    useCallback(
-      (s: ReactFlowState) => {
-        if (!props.onlyRenderVisibleElements) {
-          return s.edges;
-        }
-
-        return s.edges.filter((e) => {
-          const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
-
-          return (
-            sourceNode?.width &&
-            sourceNode?.height &&
-            targetNode?.width &&
-            targetNode?.height &&
-            isEdgeVisible({
-              sourcePos: sourceNode.position,
-              targetPos: targetNode.position,
-              sourceWidth: sourceNode.width,
-              sourceHeight: sourceNode.height,
-              targetWidth: targetNode.width,
-              targetHeight: targetNode.height,
-              width: s.width,
-              height: s.height,
-              transform: s.transform,
-            })
-          );
-        });
-      },
-      [props.onlyRenderVisibleElements]
-    )
-  );
 
   if (!width) {
     return null;

src/container/NodeRenderer/index.tsx

@@ -1,9 +1,10 @@
-import React, { memo, useMemo, ComponentType, MouseEvent, useCallback, Fragment } from 'react';
+import React, { memo, useMemo, ComponentType, MouseEvent, Fragment } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid } from '../../types';
-import { getNodesInside, getRectOfNodes } from '../../utils/graph';
+import { getRectOfNodes } from '../../utils/graph';
+import useVisibleNodes from '../../hooks/useVisibleNodes';
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -39,111 +40,112 @@ interface NodesProps extends NodeRendererProps {
   nodesDraggable: boolean;
   nodesConnectable: boolean;
   elementsSelectable: boolean;
+  recursionDepth: number;
 }
 
-const Nodes = memo(
+function Nodes({
-  ({
+  nodes = [],
-    nodes = [],
+  isDraggable,
-    isDraggable,
+  resizeObserver,
-    resizeObserver,
+  scale,
-    scale,
+  snapToGrid,
-    snapToGrid,
+  snapGrid,
-    snapGrid,
+  nodesDraggable,
-    nodesDraggable,
+  nodesConnectable,
-    nodesConnectable,
+  elementsSelectable,
-    elementsSelectable,
+  recursionDepth,
-    ...props
+  ...props
-  }: NodesProps) => {
+}: NodesProps): any {
+  return nodes.map((node) => {
+    const nodeType = node.type || 'default';
+
+    if (!props.nodeTypes[nodeType]) {
+      console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
+    }
+
+    const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+    const isNodeDraggable =
+      typeof isDraggable !== 'undefined'
+        ? isDraggable
+        : !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+    const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+    const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+    const isInitialized =
+      node.width !== null &&
+      node.height !== null &&
+      typeof node.width !== 'undefined' &&
+      typeof node.height !== 'undefined';
+    let childRect;
+
+    if (node.childNodes) {
+      childRect = getRectOfNodes(node.childNodes);
+      node.position = node.isDragging
+        ? node.position
+        : { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
+      node.style = {
+        ...node.style,
+        width: Math.round(childRect.width) + 20,
+        height: Math.round(childRect.height) + 20,
+        boxSizing: 'border-box',
+      };
+    }
+
     return (
-      <>
+      <Fragment key={node.id}>
-        {nodes.map((node) => {
+        <NodeComponent
-          const nodeType = node.type || 'default';
+          id={node.id}
-
+          className={node.className}
-          if (!props.nodeTypes[nodeType]) {
+          style={node.style}
-            console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
+          type={nodeType}
-          }
+          data={node.data}
-
+          sourcePosition={node.sourcePosition}
-          const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+          targetPosition={node.targetPosition}
-          const isNodeDraggable =
+          isHidden={node.isHidden}
-            typeof isDraggable !== 'undefined'
+          xPos={node.position.x}
-              ? isDraggable
+          yPos={node.position.y}
-              : !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+          isDragging={node.isDragging}
-          const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+          isInitialized={isInitialized}
-          const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+          snapGrid={snapGrid}
-          const isInitialized =
+          snapToGrid={snapToGrid}
-            node.width !== null &&
+          selectNodesOnDrag={props.selectNodesOnDrag}
-            node.height !== null &&
+          onClick={props.onNodeClick}
-            typeof node.width !== 'undefined' &&
+          onMouseEnter={props.onNodeMouseEnter}
-            typeof node.height !== 'undefined';
+          onMouseMove={props.onNodeMouseMove}
-
+          onMouseLeave={props.onNodeMouseLeave}
-          if (node.childNodes) {
+          onContextMenu={props.onNodeContextMenu}
-            const childRect = getRectOfNodes(node.childNodes);
+          onNodeDoubleClick={props.onNodeDoubleClick}
-            node.position = node.isDragging
+          onNodeDragStart={props.onNodeDragStart}
-              ? node.position
+          onNodeDrag={props.onNodeDrag}
-              : { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
+          onNodeDragStop={props.onNodeDragStop}
-            node.style = {
+          scale={scale}
-              ...node.style,
+          isSelected={!!node.isSelected}
-              width: Math.round(childRect.width) + 20,
+          isDraggable={isNodeDraggable}
-              height: Math.round(childRect.height) + 20,
+          isSelectable={isSelectable}
-              boxSizing: 'border-box',
+          isConnectable={isConnectable}
-            };
+          resizeObserver={resizeObserver}
-          }
+          dragHandle={node.dragHandle}
-
+          zIndex={3 + recursionDepth}
-          return (
+        />
-            <Fragment key={node.id}>
+        {node.childNodes && (
-              <NodeComponent
+          <MemoizedNodes
-                id={node.id}
+            nodes={node.childNodes}
-                className={node.className}
+            snapToGrid={snapToGrid}
-                style={node.style}
+            snapGrid={snapGrid}
-                type={nodeType}
+            nodesDraggable={nodesDraggable}
-                data={node.data}
+            nodesConnectable={nodesConnectable}
-                sourcePosition={node.sourcePosition}
+            resizeObserver={resizeObserver}
-                targetPosition={node.targetPosition}
+            elementsSelectable={elementsSelectable}
-                isHidden={node.isHidden}
+            scale={scale}
-                xPos={node.position.x}
+            recursionDepth={recursionDepth + 1}
-                yPos={node.position.y}
+            {...props}
-                isDragging={node.isDragging}
+          />
-                isInitialized={isInitialized}
+        )}
-                snapGrid={snapGrid}
+      </Fragment>
-                snapToGrid={snapToGrid}
-                selectNodesOnDrag={props.selectNodesOnDrag}
-                onClick={props.onNodeClick}
-                onMouseEnter={props.onNodeMouseEnter}
-                onMouseMove={props.onNodeMouseMove}
-                onMouseLeave={props.onNodeMouseLeave}
-                onContextMenu={props.onNodeContextMenu}
-                onNodeDoubleClick={props.onNodeDoubleClick}
-                onNodeDragStart={props.onNodeDragStart}
-                onNodeDrag={props.onNodeDrag}
-                onNodeDragStop={props.onNodeDragStop}
-                scale={scale}
-                isSelected={!!node.isSelected}
-                isDraggable={isNodeDraggable}
-                isSelectable={isSelectable}
-                isConnectable={isConnectable}
-                resizeObserver={resizeObserver}
-                dragHandle={node.dragHandle}
-              />
-              {node.childNodes && (
-                <Nodes
-                  nodes={node.childNodes}
-                  snapToGrid={snapToGrid}
-                  snapGrid={snapGrid}
-                  nodesDraggable={nodesDraggable}
-                  nodesConnectable={nodesConnectable}
-                  resizeObserver={resizeObserver}
-                  elementsSelectable={elementsSelectable}
-                  scale={scale}
-                  {...props}
-                />
-              )}
-            </Fragment>
-          );
-        })}
-      </>
     );
-  }
+  });
-);
+}
+
+const MemoizedNodes = memo(Nodes);
 
 const NodeRenderer = (props: NodeRendererProps) => {
   const {
@@ -155,17 +157,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
     snapGrid,
     snapToGrid,
   } = useStore(selector, shallow);
-
+  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
-  const nodes = useStore(
-    useCallback(
-      (s: ReactFlowState) => {
-        return props.onlyRenderVisibleElements
-          ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : s.nodes;
-      },
-      [props.onlyRenderVisibleElements]
-    )
-  );
 
   const transformStyle = useMemo(
     () => ({
@@ -191,7 +183,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
-      <Nodes
+      <MemoizedNodes
         nodes={nodes}
         snapToGrid={snapToGrid}
         snapGrid={snapGrid}
@@ -200,6 +192,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         resizeObserver={resizeObserver}
         elementsSelectable={elementsSelectable}
         scale={transform[2]}
+        recursionDepth={0}
         {...props}
       />
     </div>

src/hooks/useVisibleEdges.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+import { useStore } from '../store';
+import { isEdgeVisible, getSourceTargetNodes } from '../container/EdgeRenderer/utils';
+import { ReactFlowState } from '../types';
+
+function useVisibleEdges(onlyRenderVisible: boolean) {
+  const edges = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        if (!onlyRenderVisible) {
+          return s.edges;
+        }
+
+        return s.edges.filter((e) => {
+          const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
+
+          return (
+            sourceNode?.width &&
+            sourceNode?.height &&
+            targetNode?.width &&
+            targetNode?.height &&
+            isEdgeVisible({
+              sourcePos: sourceNode.position,
+              targetPos: targetNode.position,
+              sourceWidth: sourceNode.width,
+              sourceHeight: sourceNode.height,
+              targetWidth: targetNode.width,
+              targetHeight: targetNode.height,
+              width: s.width,
+              height: s.height,
+              transform: s.transform,
+            })
+          );
+        });
+      },
+      [onlyRenderVisible]
+    )
+  );
+
+  return edges;
+}
+
+export default useVisibleEdges;

src/hooks/useVisibleNodes.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+import { useStore } from '../store';
+import { getNodesInside } from '../utils/graph';
+import { ReactFlowState } from '../types';
+
+function useVisibleNodes(onlyRenderVisible: boolean) {
+  const nodes = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        return onlyRenderVisible
+          ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
+          : s.nodes;
+      },
+      [onlyRenderVisible]
+    )
+  );
+
+  return nodes;
+}
+
+export default useVisibleNodes;

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 = {