refactor(nodes): use relative positions for children

example/src/Basic/index.tsx

@@ -35,14 +35,14 @@ const initialNodes: Node[] = [
   {
     id: '4a',
     data: { label: 'Node 4a' },
-    position: { x: 115, y: 215 },
+    position: { x: 15, y: 15 },
     className: 'light',
     parentNode: '4',
   },
   {
     id: '4b',
     data: { label: 'Node 4b' },
-    position: { x: 250, y: 250 },
+    position: { x: 80, y: 80 },
     className: 'light',
     style: { backgroundColor: 'rgba(255, 0, 0, .2)' },
     parentNode: '4',
@@ -52,14 +52,14 @@ const initialNodes: Node[] = [
   {
     id: '4b1',
     data: { label: 'Node 4b1' },
-    position: { x: 270, y: 270 },
+    position: { x: 20, y: 20 },
     className: 'light',
     parentNode: '4b',
   },
   {
     id: '4b2',
     data: { label: 'Node 4b2' },
-    position: { x: 500, y: 400 },
+    position: { x: 100, y: 100 },
     className: 'light',
     parentNode: '4b',
   },

src/components/Nodes/wrapNode.tsx

@@ -211,7 +211,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       if (nodeElement.current && (!isHidden || !isInitialized)) {
         updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]);
       }
-    }, [id, isHidden, sourcePosition, targetPosition, isInitialized]);
+    }, [id, isHidden, sourcePosition, targetPosition, type, isInitialized]);
 
     useEffect(() => {
       if (nodeElement.current) {

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 } from './utils';
+import { getEdgePositions, getHandle } from './utils';
 import {
   Position,
   Edge,
@@ -17,6 +17,7 @@ import {
   NodeHandleBounds,
 } from '../../types';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
+import useNodeLookup from '../../hooks/useNodeLookup';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -232,8 +233,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     width,
     height,
     connectionMode,
-    nodes,
   } = useStore(selector, shallow);
+  const nodeLookup = useNodeLookup();
 
   const edges = useVisibleEdges(props.onlyRenderVisibleElements);
 
@@ -250,20 +251,22 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
       <g transform={`translate(${transform[0]},${transform[1]}) scale(${transform[2]})`}>
         {edges.map((edge: Edge) => {
           // @todo: getSourceTargetNodes is called many times during dragging/creating edges
-          const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes);
+          const sourceNode = nodeLookup.current.get(edge.source);
+          const targetNode = nodeLookup.current.get(edge.target);
+
           return (
             <Edge
               key={edge.id}
               edge={edge}
               sourceNodeWidth={sourceNode?.width}
               sourceNodeHeight={sourceNode?.height}
-              sourceNodeX={sourceNode?.position.x}
-              sourceNodeY={sourceNode?.position.y}
+              sourceNodeX={sourceNode?.positionAbsolute?.x}
+              sourceNodeY={sourceNode?.positionAbsolute?.y}
               sourceNodeHandleBounds={sourceNode?.handleBounds}
               targetNodeWidth={targetNode?.width}
               targetNodeHeight={targetNode?.height}
-              targetNodeX={targetNode?.position.x}
-              targetNodeY={targetNode?.position.y}
+              targetNodeX={targetNode?.positionAbsolute?.x}
+              targetNodeY={targetNode?.positionAbsolute?.y}
               targetNodeHandleBounds={targetNode?.handleBounds}
               elementsSelectable={elementsSelectable}
               onEdgeContextMenu={props.onEdgeContextMenu}

src/container/NodeRenderer/index.tsx

@@ -2,8 +2,17 @@ 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 {
+  Node,
+  NodeTypesType,
+  ReactFlowState,
+  WrapNodeProps,
+  SnapGrid,
+  NodeRendererNode,
+  NodeLookup,
+} from '../../types';
 import useVisibleNodes from '../../hooks/useVisibleNodes';
+import useNodeLookup from '../../hooks/useNodeLookup';
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -27,10 +36,12 @@ const selector = (s: ReactFlowState) => ({
   updateNodeDimensions: s.updateNodeDimensions,
   snapGrid: s.snapGrid,
   snapToGrid: s.snapToGrid,
+  nodeLookup: s.nodeLookup,
 });
 
 interface NodesProps extends NodeRendererProps {
-  nodes: Node[];
+  nodes: NodeRendererNode[];
+  nodeLookup: NodeLookup;
   isDraggable?: boolean;
   resizeObserver: ResizeObserver | null;
   scale: number;
@@ -43,13 +54,17 @@ interface NodesProps extends NodeRendererProps {
   parentId?: string;
 }
 
-interface NodeProps extends Omit<NodesProps, 'nodes'> {
+interface NodeProps extends Omit<NodesProps, 'nodes' | 'nodeLookup'> {
   node: Node;
   nodeType: string;
+  childNodes?: NodeRendererNode[];
+  positionAbsoluteX?: number;
+  positionAbsoluteY?: number;
 }
 
 function Node({
   node,
+  childNodes,
   nodeType,
   isDraggable,
   resizeObserver,
@@ -60,6 +75,8 @@ function Node({
   nodesConnectable,
   elementsSelectable,
   recursionDepth,
+  positionAbsoluteX,
+  positionAbsoluteY,
   ...props
 }: NodeProps) {
   // const onNodesChange = useStore((s) => s.onNodesChange);
@@ -76,7 +93,7 @@ function Node({
     typeof node.width !== 'undefined' &&
     typeof node.height !== 'undefined';
 
-  const isParentNode = !!node.childNodes?.length;
+  const isParentNode = !!childNodes?.length;
 
   return (
     <NodeComponent
@@ -88,8 +105,8 @@ function Node({
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       isHidden={node.isHidden}
-      xPos={node.position.x}
-      yPos={node.position.y}
+      xPos={positionAbsoluteX || 0}
+      yPos={positionAbsoluteY || 0}
       width={node.width}
       height={node.height}
       isDragging={node.isDragging}
@@ -121,6 +138,7 @@ function Node({
 
 function Nodes({
   nodes,
+  nodeLookup,
   isDraggable,
   resizeObserver,
   scale,
@@ -132,8 +150,9 @@ function Nodes({
   recursionDepth,
   ...props
 }: NodesProps): any {
-  return nodes.map((node) => {
+  return nodes.map(({ node, childNodes }) => {
     const nodeType = node.type || 'default';
+    const lookupNode = nodeLookup.get(node.id);
 
     if (!props.nodeTypes[nodeType]) {
       console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
@@ -143,6 +162,7 @@ function Nodes({
       <Fragment key={node.id}>
         <Node
           node={node}
+          childNodes={childNodes}
           nodeType={nodeType}
           parentId={node.id}
           snapToGrid={snapToGrid}
@@ -153,11 +173,14 @@ function Nodes({
           elementsSelectable={elementsSelectable}
           scale={scale}
           recursionDepth={recursionDepth}
+          positionAbsoluteX={lookupNode?.positionAbsolute?.x}
+          positionAbsoluteY={lookupNode?.positionAbsolute?.y}
           {...props}
         />
-        {node.childNodes && node.childNodes.length > 0 && (
+        {childNodes && childNodes.length > 0 && (
           <MemoizedNodes
-            nodes={node.childNodes}
+            nodes={childNodes}
+            nodeLookup={nodeLookup}
             parentId={node.id}
             snapToGrid={snapToGrid}
             snapGrid={snapGrid}
@@ -187,6 +210,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
     snapGrid,
     snapToGrid,
   } = useStore(selector, shallow);
+  const nodeLookup = useNodeLookup();
+
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
 
   const transformStyle = useMemo(
@@ -215,6 +240,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
     <div className="react-flow__nodes" style={transformStyle}>
       <MemoizedNodes
         nodes={nodes}
+        nodeLookup={nodeLookup.current}
         snapToGrid={snapToGrid}
         snapGrid={snapGrid}
         nodesDraggable={nodesDraggable}

src/hooks/useNodeLookup.ts

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+
+import { useStoreApi } from '../store';
+
+function useNodeLookup() {
+  const store = useStoreApi();
+  const nodeLookup = useRef(store.getState().nodeLookup);
+
+  return nodeLookup;
+}
+
+export default useNodeLookup;

src/hooks/useVisibleNodes.ts

@@ -2,23 +2,23 @@ import { useCallback } from 'react';
 
 import { useStore } from '../store';
 import { getNodesInside } from '../utils/graph';
-import { ReactFlowState, Node } from '../types';
+import { ReactFlowState, Node, NodeRendererNode } from '../types';
 
-function getChildNodes(nodes: Node[], parent?: Node): Node[] {
-  const children: Node[] = [];
+function getChildNodes(nodes: Node[], parent?: Node): NodeRendererNode[] {
+  const children: NodeRendererNode[] = [];
   const remaining: Node[] = [];
 
   for (let i = 0; i < nodes.length; i++) {
     const n = nodes[i];
     if ((!parent && !n.parentNode) || n.parentNode === parent?.id) {
-      children.push(n);
+      children.push({ node: n });
     } else {
       remaining.push(n);
     }
   }
 
   return children.map((child) => {
-    child.childNodes = getChildNodes(remaining, child);
+    child.childNodes = getChildNodes(remaining, child.node);
     return child;
   });
 }