feat(noderenderer): render child nodes

example/src/Basic/index.tsx

@@ -23,7 +23,27 @@ 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: 400, y: 200 }, className: 'light' },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255, 0, 0, .2)' },
+    childNodes: [
+      { id: '4a', data: { label: 'Node 4a' }, position: { x: 400, y: 400 }, className: 'light' },
+      {
+        id: '4b',
+        data: { label: 'Node 4b' },
+        position: { x: 500, y: 500 },
+        className: 'light',
+        style: { backgroundColor: 'rgba(255, 0, 0, .2)' },
+        childNodes: [
+          { id: '4b1', data: { label: 'Node 4b1' }, position: { x: 450, y: 450 }, className: 'light' },
+          { id: '4b2', data: { label: 'Node 4b2' }, position: { x: 550, y: 550 }, className: 'light' },
+        ],
+      },
+    ],
+  },
 ];
 
 const initialEdges: Edge[] = [

src/components/ConnectionLine/index.tsx

@@ -14,6 +14,7 @@ import {
   HandleType,
   ReactFlowState,
 } from '../../types';
+import { flattenNodes } from '../../utils/graph';
 
 interface ConnectionLineProps {
   connectionNodeId: ElementId;
@@ -28,7 +29,7 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const nodesSelector = (s: ReactFlowState) => s.nodes;
+const nodesSelector = (s: ReactFlowState) => flattenNodes(s.nodes);
 
 export default ({
   connectionNodeId,

src/components/Nodes/wrapNode.tsx

@@ -68,7 +68,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         pointerEvents:
           isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
         // prevents jumping of nodes on start
-        opacity: isInitialized ? 1 : 0,
+        // opacity: isInitialized ? 1 : 0,
         ...style,
       }),
       [

src/container/EdgeRenderer/utils.ts

@@ -2,7 +2,7 @@ import { ComponentType } from 'react';
 
 import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import { rectToBox } from '../../utils/graph';
+import { rectToBox, flattenNodes } from '../../utils/graph';
 
 import {
   EdgeTypesType,
@@ -171,7 +171,7 @@ type SourceTargetNode = {
 };
 
 export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
-  return nodes.reduce(
+  return flattenNodes(nodes).reduce(
     (res, node) => {
       if (node.id === edge.source) {
         res.sourceNode = node;

src/container/NodeRenderer/index.tsx

@@ -1,9 +1,9 @@
-import React, { memo, useMemo, ComponentType, MouseEvent, useCallback } from 'react';
+import React, { memo, useMemo, ComponentType, MouseEvent, useCallback, Fragment } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
-import { Node, NodeTypesType, ReactFlowState, WrapNodeProps } from '../../types';
+import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid } from '../../types';
-import { getNodesInside } from '../../utils/graph';
+import { getNodesInside, getRectOfNodes } from '../../utils/graph';
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -29,6 +29,122 @@ const selector = (s: ReactFlowState) => ({
   snapToGrid: s.snapToGrid,
 });
 
+interface NodesProps extends NodeRendererProps {
+  nodes?: Node[];
+  isDraggable?: boolean;
+  resizeObserver: ResizeObserver | null;
+  scale: number;
+  snapToGrid: boolean;
+  snapGrid: SnapGrid;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  elementsSelectable: boolean;
+}
+
+const Nodes = memo(
+  ({
+    nodes = [],
+    isDraggable,
+    resizeObserver,
+    scale,
+    snapToGrid,
+    snapGrid,
+    nodesDraggable,
+    nodesConnectable,
+    elementsSelectable,
+    ...props
+  }: NodesProps) => {
+    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';
+
+          if (node.childNodes) {
+            const 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}>
+              <NodeComponent
+                id={node.id}
+                className={node.className}
+                style={node.style}
+                type={nodeType}
+                data={node.data}
+                sourcePosition={node.sourcePosition}
+                targetPosition={node.targetPosition}
+                isHidden={node.isHidden}
+                xPos={node.position.x}
+                yPos={node.position.y}
+                isDragging={node.isDragging}
+                isInitialized={isInitialized}
+                snapGrid={snapGrid}
+                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 NodeRenderer = (props: NodeRendererProps) => {
   const {
     transform,
@@ -75,60 +191,17 @@ const NodeRenderer = (props: NodeRendererProps) => {
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
-      {nodes.map((node) => {
+      <Nodes
-        const nodeType = node.type || 'default';
+        nodes={nodes}
-        const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+        snapToGrid={snapToGrid}
-
+        snapGrid={snapGrid}
-        if (!props.nodeTypes[nodeType]) {
+        nodesDraggable={nodesDraggable}
-          console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
+        nodesConnectable={nodesConnectable}
-        }
+        resizeObserver={resizeObserver}
-
+        elementsSelectable={elementsSelectable}
-        const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+        scale={transform[2]}
-        const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+        {...props}
-        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';
-
-        return (
-          <NodeComponent
-            key={node.id}
-            id={node.id}
-            className={node.className}
-            style={node.style}
-            type={nodeType}
-            data={node.data}
-            sourcePosition={node.sourcePosition}
-            targetPosition={node.targetPosition}
-            isHidden={node.isHidden}
-            xPos={node.position.x}
-            yPos={node.position.y}
-            isDragging={node.isDragging}
-            isInitialized={isInitialized}
-            snapGrid={snapGrid}
-            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={transform[2]}
-            isSelected={!!node.isSelected}
-            isDraggable={isDraggable}
-            isSelectable={isSelectable}
-            isConnectable={isConnectable}
-            resizeObserver={resizeObserver}
-            dragHandle={node.dragHandle}
-          />
-        );
-      })}
     </div>
   );
 };

src/store/index.ts

@@ -27,7 +27,7 @@ import {
   EdgeChange,
   NodePositionChange,
 } from '../types';
-import { isNode, isEdge, getRectOfNodes, getNodesInside, getConnectedEdges } from '../utils/graph';
+import { isNode, isEdge, getRectOfNodes, getNodesInside, getConnectedEdges, flattenNodes } from '../utils/graph';
 import { getHandleBounds } from '../components/Nodes/utils';
 
 const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
@@ -125,7 +125,7 @@ const createStore = () =>
       const { onNodesChange, nodes, transform } = get();
 
       const initialChanges: NodeChange[] = [];
-      const nodesToChange: NodeChange[] = nodes.reduce((res, node) => {
+      const nodesToChange: NodeChange[] = flattenNodes(nodes).reduce((res, node) => {
         const update = updates.find((u) => u.id === node.id);
         if (update) {
           const dimensions = getDimensions(update.nodeElement);
@@ -155,11 +155,12 @@ const createStore = () =>
       const { onNodesChange, nodes, nodeExtent } = get();
 
       if (onNodesChange) {
-        const matchingNodes = nodes.filter((n) => n.id === id || n.isSelected);
+        const matchingNodes = flattenNodes(nodes).filter((n) => n.id === id || n.isSelected);
+        const matchingChildNodes = flattenNodes(matchingNodes); //.filter(n => !!n.childNodes).reduce<Node[]>((result, node) => result.concat(node.childNodes!), []));
 
-        if (matchingNodes?.length) {
+        if (matchingChildNodes?.length) {
           onNodesChange(
-            matchingNodes.map((n) => {
+            matchingChildNodes.map((n) => {
               const change: NodePositionChange = {
                 id: n.id,
                 type: 'position',
@@ -276,7 +277,8 @@ const createStore = () =>
     },
     unselectNodesAndEdges: () => {
       const { nodes, edges, onNodesChange, onEdgesChange } = get();
-      const nodesToUnselect = nodes.map((n) => {
+
+      const nodesToUnselect = flattenNodes(nodes).map((n) => {
         n.isSelected = false;
         return createNodeOrEdgeSelectionChange(false)(n);
       }) as NodeChange[];

src/types/index.ts

@@ -86,6 +86,7 @@ export interface Node<T = any> {
   width?: number | null;
   height?: number | null;
   handleBounds?: NodeHandleBounds;
+  childNodes?: Node[];
 }
 
 export enum ArrowHeadType {

src/utils/graph.ts

@@ -61,7 +61,7 @@ export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
     .join('&');
 };
 
-const connectionExists = (edge: Edge, elements: Elements) => {
+const connectionExists = (edge: Edge, elements: Edge[]) => {
   return elements.some(
     (el) =>
       isEdge(el) &&
@@ -294,6 +294,10 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
   const initElements: any[] = [];
 
   return elements.reduce((res: any[], item: any) => {
+    if (item.childNodes) {
+      item.childNodes = applyChanges(changes, item.childNodes);
+    }
+
     const currentChange = changes.find((c) => c.id === item.id);
 
     if (currentChange) {
@@ -338,3 +342,13 @@ export function applyNodeChanges(changes: NodeChange[], nodes: Node[]): Node[] {
 export function applyEdgeChanges(changes: EdgeChange[], edges: Edge[]): Edge[] {
   return applyChanges(changes, edges) as Edge[];
 }
+
+export function flattenNodes(nodes: Node[] | undefined): Node[] {
+  if (!nodes) {
+    return [];
+  }
+
+  return nodes.reduce<Node[]>((result, node) => {
+    return result.concat([node, ...flattenNodes(node.childNodes)]);
+  }, []);
+}