Merge pull request #2595 from wbkd/fix/subflow-node-origin

fix(subflow-node-origin): use node origin in node position calculation

.changeset/neat-fishes-burn.md

@@ -0,0 +1,6 @@
+---
+'@reactflow/core': patch
+'@reactflow/minimap': patch
+---
+
+Fix and improve the behaviour when using nodeOrigin in combination with subflows

examples/vite-app/src/examples/Subflow/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
   Controls,
   MiniMap,
   Background,
+  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';
@@ -90,7 +91,7 @@ const initialNodes: Node[] = [
   {
     id: '5a',
     data: { label: 'Node 5a' },
-    position: { x: 25, y: 50 },
+    position: { x: 0, y: 0 },
     className: 'light',
     parentNode: '5',
     extent: 'parent',

packages/core/src/hooks/useDrag/index.ts

@@ -114,6 +114,7 @@ function useDrag({
               onSelectionDrag,
               snapGrid,
               snapToGrid,
+              nodeOrigin,
             } = store.getState();
             const pointerPos = getPointerPosition(event);
             // skip events without movement
@@ -133,7 +134,7 @@ function useDrag({
                   nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
                 }
 
-                const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent);
+                const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
 
                 n.position = updatedPos.position;
                 n.positionAbsolute = updatedPos.positionAbsolute;

packages/core/src/hooks/useDrag/utils.ts

@@ -1,7 +1,8 @@
 import type { RefObject } from 'react';
 
 import { clampPosition, devWarn } from '../../utils';
-import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
+import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
+import { getNodePositionWithOrigin } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
@@ -60,20 +61,25 @@ export function calcNextPosition(
   node: NodeDragItem | Node,
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
-  nodeExtent?: CoordinateExtent
+  nodeExtent?: CoordinateExtent,
+  nodeOrigin: NodeOrigin = [0, 0]
 ): { position: XYPosition; positionAbsolute: XYPosition } {
   let currentExtent = node.extent || nodeExtent;
 
   if (node.extent === 'parent') {
     if (node.parentNode && node.width && node.height) {
       const parent = nodeInternals.get(node.parentNode);
+      const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
       currentExtent =
-        parent?.positionAbsolute && parent?.width && parent?.height
+        parentPosition.positionAbsolute && parent?.width && parent?.height
           ? [
-              [parent.positionAbsolute.x, parent.positionAbsolute.y],
               [
-                parent.positionAbsolute.x + parent.width - node.width,
+                parentPosition.positionAbsolute.x + node.width * nodeOrigin[0],
-                parent.positionAbsolute.y + parent.height - node.height,
+                parentPosition.positionAbsolute.y + node.height * nodeOrigin[1],
+              ],
+              [
+                parentPosition.positionAbsolute.x + parent.width - node.width + node.width * nodeOrigin[0],
+                parentPosition.positionAbsolute.y + parent.height - node.height + node.height * nodeOrigin[1],
               ],
             ]
           : currentExtent;
@@ -84,8 +90,8 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const parentX = parent?.positionAbsolute?.x ?? 0;
+    const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
-    const parentY = parent?.positionAbsolute?.y ?? 0;
+    const { x: parentX, y: parentY } = parentPosition.positionAbsolute;
     currentExtent = [
       [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
       [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
@@ -96,7 +102,7 @@ export function calcNextPosition(
 
   if (node.parentNode) {
     const parentNode = nodeInternals.get(node.parentNode);
-    parentPosition = { x: parentNode?.positionAbsolute?.x ?? 0, y: parentNode?.positionAbsolute?.y ?? 0 };
+    parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
   }
 
   const positionAbsolute = currentExtent

packages/core/src/index.ts

@@ -19,6 +19,7 @@ export {
   updateEdge,
   getTransformForBounds,
   getRectOfNodes,
+  getNodePositionWithOrigin,
 } from './utils/graph';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';

packages/core/src/store/index.ts

@@ -23,7 +23,8 @@ const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({
     ...initialState,
     setNodes: (nodes: Node[]) => {
-      set({ nodeInternals: createNodeInternals(nodes, get().nodeInternals) });
+      const { nodeInternals, nodeOrigin } = get();
+      set({ nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin) });
     },
     setEdges: (edges: Edge[]) => {
       const { defaultEdgeOptions = {} } = get();
@@ -33,7 +34,7 @@ const createRFStore = () =>
       const hasDefaultNodes = typeof nodes !== 'undefined';
       const hasDefaultEdges = typeof edges !== 'undefined';
 
-      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map()) : new Map();
+      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map(), get().nodeOrigin) : new Map();
       const nextEdges = hasDefaultEdges ? edges : [];
 
       set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
@@ -102,7 +103,7 @@ const createRFStore = () =>
       }
     },
     updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged = true, dragging = false) => {
-      const { onNodesChange, nodeInternals, hasDefaultNodes } = get();
+      const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
 
       if (hasDefaultNodes || onNodesChange) {
         const changes = nodeDragItems.map((node) => {
@@ -123,7 +124,7 @@ const createRFStore = () =>
         if (changes?.length) {
           if (hasDefaultNodes) {
             const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
-            const nextNodeInternals = createNodeInternals(nodes, nodeInternals);
+            const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
             set({ nodeInternals: nextNodeInternals });
           }
 

packages/core/src/store/utils.ts

@@ -2,7 +2,7 @@ import { zoomIdentity } from 'd3-zoom';
 import type { StoreApi } from 'zustand';
 
 import { internalsSymbol, isNumeric } from '../utils';
-import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
+import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
 import type {
   Edge,
   EdgeSelectionChange,
@@ -12,6 +12,7 @@ import type {
   ReactFlowState,
   XYZPosition,
   FitViewOptions,
+  NodeOrigin,
 } from '../types';
 
 type ParentNodes = Record<string, boolean>;
@@ -20,21 +21,33 @@ function calculateXYZPosition(
   node: Node,
   nodeInternals: NodeInternals,
   parentNodes: ParentNodes,
-  result: XYZPosition
+  result: XYZPosition,
+  nodeOrigin: NodeOrigin
 ): XYZPosition {
   if (!node.parentNode) {
     return result;
   }
   const parentNode = nodeInternals.get(node.parentNode)!;
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, nodeOrigin);
 
-  return calculateXYZPosition(parentNode, nodeInternals, parentNodes, {
+  return calculateXYZPosition(
-    x: (result.x ?? 0) + (parentNode.position?.x ?? 0),
+    parentNode,
-    y: (result.y ?? 0) + (parentNode.position?.y ?? 0),
+    nodeInternals,
-    z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    parentNodes,
-  });
+    {
+      x: (result.x ?? 0) + parentNodePosition.x,
+      y: (result.y ?? 0) + parentNodePosition.y,
+      z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    },
+    nodeOrigin
+  );
 }
 
-export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals): NodeInternals {
+export function createNodeInternals(
+  nodes: Node[],
+  nodeInternals: NodeInternals,
+  nodeOrigin: NodeOrigin
+): NodeInternals {
   const nextNodeInternals = new Map<string, Node>();
   const parentNodes: ParentNodes = {};
 
@@ -74,10 +87,16 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
     }
 
     if (node.parentNode || parentNodes[node.id]) {
-      const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
+      const { x, y, z } = calculateXYZPosition(
-        ...node.position,
+        node,
-        z: node[internalsSymbol]?.z ?? 0,
+        nextNodeInternals,
-      });
+        parentNodes,
+        {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0,
+        },
+        nodeOrigin
+      );
 
       node.positionAbsolute = {
         x,

packages/core/src/utils/graph.ts

@@ -141,23 +141,54 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const getNodePositionWithOrigin = (
+  node: Node | undefined,
+  nodeOrigin: NodeOrigin = [0, 0]
+): XYPosition & { positionAbsolute: XYPosition } => {
+  if (!node) {
+    return {
+      x: 0,
+      y: 0,
+      positionAbsolute: {
+        x: 0,
+        y: 0,
+      },
+    };
+  }
+
+  const offset: XYPosition = {
+    x: (node.width ?? 0) * nodeOrigin[0],
+    y: (node.height ?? 0) * nodeOrigin[1],
+  };
+
+  return {
+    x: node.position.x - offset.x,
+    y: node.position.y - offset.y,
+    positionAbsolute: {
+      x: (node.positionAbsolute?.x ?? 0) - offset.x,
+      y: (node.positionAbsolute?.y ?? 0) - offset.y,
+    },
+  };
+};
+
 export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
 
   const box = nodes.reduce(
-    (currBox, { positionAbsolute, position, width, height }) => {
+    (currBox, node) => {
+      const { positionAbsolute, ...position } = getNodePositionWithOrigin(node, nodeOrigin);
       const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
       const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
 
       return getBoundsOfBoxes(
         currBox,
         rectToBox({
-          x: nodeX - nodeOrigin[0] * (width || 0),
+          x: nodeX,
-          y: nodeY - nodeOrigin[1] * (height || 0),
+          y: nodeY,
-          width: width || 0,
+          width: node.width || 0,
-          height: height || 0,
+          height: node.height || 0,
         })
       );
     },
@@ -186,15 +217,17 @@ export const getNodesInside = (
   const visibleNodes: Node[] = [];
 
   nodeInternals.forEach((node) => {
-    const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node;
+    const { width, height, selectable = true } = node;
 
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
 
+    const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
+
     const nodeRect = {
-      x: positionAbsolute.x - nodeOrigin[0] * (width || 0),
+      x: positionAbsolute.x,
-      y: positionAbsolute.y - nodeOrigin[1] * (height || 0),
+      y: positionAbsolute.y,
       width: width || 0,
       height: height || 0,
     };
@@ -243,4 +276,3 @@ export const getTransformForBounds = (
 export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };
-

packages/minimap/src/MiniMap.tsx

@@ -7,7 +7,14 @@ import shallow from 'zustand/shallow';
 import { zoom, zoomIdentity } from 'd3-zoom';
 import type { D3ZoomEvent } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
-import { useStore, getRectOfNodes, Panel, getBoundsOfRects, useStoreApi } from '@reactflow/core';
+import {
+  useStore,
+  getRectOfNodes,
+  Panel,
+  getBoundsOfRects,
+  useStoreApi,
+  getNodePositionWithOrigin,
+} from '@reactflow/core';
 import type { ReactFlowState, Rect } from '@reactflow/core';
 
 import MiniMapNode from './MiniMapNode';
@@ -159,24 +166,28 @@ function MiniMap({
         onClick={onSvgClick}
       >
         {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
-        {nodes.map((node) => (
+        {nodes.map((node) => {
-          <MiniMapNode
+          const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
-            key={node.id}
+
-            x={(node.positionAbsolute?.x ?? 0) - nodeOrigin[0] * (node.width ?? 0)}
+          return (
-            y={(node.positionAbsolute?.y ?? 0) - nodeOrigin[1] * (node.height ?? 0)}
+            <MiniMapNode
-            width={node.width!}
+              key={node.id}
-            height={node.height!}
+              x={positionAbsolute.x}
-            style={node.style}
+              y={positionAbsolute.x}
-            className={nodeClassNameFunc(node)}
+              width={node.width!}
-            color={nodeColorFunc(node)}
+              height={node.height!}
-            borderRadius={nodeBorderRadius}
+              style={node.style}
-            strokeColor={nodeStrokeColorFunc(node)}
+              className={nodeClassNameFunc(node)}
-            strokeWidth={nodeStrokeWidth}
+              color={nodeColorFunc(node)}
-            shapeRendering={shapeRendering}
+              borderRadius={nodeBorderRadius}
-            onClick={onSvgNodeClick}
+              strokeColor={nodeStrokeColorFunc(node)}
-            id={node.id}
+              strokeWidth={nodeStrokeWidth}
-          />
+              shapeRendering={shapeRendering}
-        ))}
+              onClick={onSvgNodeClick}
+              id={node.id}
+            />
+          );
+        })}
         <path
           className="react-flow__minimap-mask"
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z