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

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

@@ -11,6 +11,7 @@ import ReactFlow, {
   Controls,
   MiniMap,
   Background,
+  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';
@@ -21,6 +22,7 @@ const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
 
 const initialNodes: Node[] = [
   {
@@ -90,7 +92,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',
@@ -205,6 +207,7 @@ const Subflow = () => {
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
       fitView
+      nodeOrigin={nodeOrigin}
     >
       <MiniMap />
       <Controls />

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 { getNodePosition } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
@@ -60,20 +61,22 @@ export function calcNextPosition(
   node: NodeDragItem | Node,
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
-  nodeExtent?: CoordinateExtent
+  nodeExtent?: CoordinateExtent,
+  nodeOrigin?: NodeOrigin
 ): { 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 = getNodePosition(parent, nodeOrigin);
       currentExtent =
-        parent?.positionAbsolute && parent?.width && parent?.height
+        parentPosition.positionAbsolute && parent?.width && parent?.height
           ? [
-              [parent.positionAbsolute.x, parent.positionAbsolute.y],
+              [parentPosition.positionAbsolute.x, parentPosition.positionAbsolute.y],
               [
-                parent.positionAbsolute.x + parent.width - node.width,
+                parentPosition.positionAbsolute.x + parent.width - node.width,
-                parent.positionAbsolute.y + parent.height - node.height,
+                parentPosition.positionAbsolute.y + parent.height - node.height,
               ],
             ]
           : currentExtent;
@@ -84,8 +87,8 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const parentX = parent?.positionAbsolute?.x ?? 0;
+    const parentPosition = getNodePosition(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 +99,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 = getNodePosition(parentNode, nodeOrigin).positionAbsolute;
   }
 
   const positionAbsolute = currentExtent

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, getNodePosition } 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 = getNodePosition(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,55 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const getNodePosition = (
+  node: Node | undefined,
+  nodeOrigin: NodeOrigin = [0, 0]
+): XYPosition & { positionAbsolute: XYPosition } => {
+  if (!node) {
+    return {
+      x: 0,
+      y: 0,
+      positionAbsolute: {
+        x: 0,
+        y: 0,
+      },
+    };
+  }
+
+  const position: XYPosition = {
+    x: node.position.x - (node.width ?? 0) * nodeOrigin[0],
+    y: node.position.y - (node.height ?? 0) * nodeOrigin[1],
+  };
+
+  const positionAbsolute: XYPosition = {
+    x: (node.positionAbsolute?.x ?? 0) - (node.width ?? 0) * nodeOrigin[0],
+    y: (node.positionAbsolute?.y ?? 0) - (node.height ?? 0) * nodeOrigin[1],
+  };
+
+  return {
+    ...position,
+    positionAbsolute,
+  };
+};
+
 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 } = getNodePosition(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 +218,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 } = getNodePosition(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 +277,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

@@ -162,6 +162,7 @@ function MiniMap({
         {nodes.map((node) => (
           <MiniMapNode
             key={node.id}
+            // @todo replace with general utility function
             x={(node.positionAbsolute?.x ?? 0) - nodeOrigin[0] * (node.width ?? 0)}
             y={(node.positionAbsolute?.y ?? 0) - nodeOrigin[1] * (node.height ?? 0)}
             width={node.width!}