fix(subflow-node-origin): use helper function in minimap, calculate extent corrrectly when using nodeOrigin and subflows

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

@@ -22,7 +22,6 @@ 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[] = [
   {
@@ -207,7 +206,6 @@ const Subflow = () => {
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
       fitView
-      nodeOrigin={nodeOrigin}
     >
       <MiniMap />
       <Controls />

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

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 
 import { clampPosition, devWarn } from '../../utils';
 import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types';
-import { getNodePosition } from '../../utils/graph';
+import { getNodePositionWithOrigin } from '../../utils/graph';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
@@ -62,21 +62,24 @@ export function calcNextPosition(
   nextPosition: XYPosition,
   nodeInternals: NodeInternals,
   nodeExtent?: CoordinateExtent,
-  nodeOrigin?: NodeOrigin
+  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 = getNodePosition(parent, nodeOrigin);
+      const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
       currentExtent =
         parentPosition.positionAbsolute && parent?.width && parent?.height
           ? [
-              [parentPosition.positionAbsolute.x, parentPosition.positionAbsolute.y],
               [
-                parentPosition.positionAbsolute.x + parent.width - node.width,
+                parentPosition.positionAbsolute.x + node.width * nodeOrigin[0],
-                parentPosition.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;
@@ -87,7 +90,7 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const parentPosition = getNodePosition(parent, nodeOrigin);
+    const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin);
     const { x: parentX, y: parentY } = parentPosition.positionAbsolute;
     currentExtent = [
       [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
@@ -99,7 +102,7 @@ export function calcNextPosition(
 
   if (node.parentNode) {
     const parentNode = nodeInternals.get(node.parentNode);
-    parentPosition = getNodePosition(parentNode, nodeOrigin).positionAbsolute;
+    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/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, getNodePosition } from '../utils/graph';
+import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
 import type {
   Edge,
   EdgeSelectionChange,
@@ -28,7 +28,7 @@ function calculateXYZPosition(
     return result;
   }
   const parentNode = nodeInternals.get(node.parentNode)!;
-  const parentNodePosition = getNodePosition(parentNode, nodeOrigin);
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, nodeOrigin);
 
   return calculateXYZPosition(
     parentNode,

packages/core/src/utils/graph.ts

@@ -141,7 +141,7 @@ export const pointToRendererPoint = (
   return position;
 };
 
-export const getNodePosition = (
+export const getNodePositionWithOrigin = (
   node: Node | undefined,
   nodeOrigin: NodeOrigin = [0, 0]
 ): XYPosition & { positionAbsolute: XYPosition } => {
@@ -179,7 +179,7 @@ export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]):
 
   const box = nodes.reduce(
     (currBox, node) => {
-      const { positionAbsolute, ...position } = getNodePosition(node, nodeOrigin);
+      const { positionAbsolute, ...position } = getNodePositionWithOrigin(node, nodeOrigin);
       const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
       const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
 
@@ -224,7 +224,7 @@ export const getNodesInside = (
       return false;
     }
 
-    const { positionAbsolute } = getNodePosition(node, nodeOrigin);
+    const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
 
     const nodeRect = {
       x: positionAbsolute.x,

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,25 +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}
+
-            // @todo replace with general utility function
+          return (
-            x={(node.positionAbsolute?.x ?? 0) - nodeOrigin[0] * (node.width ?? 0)}
+            <MiniMapNode
-            y={(node.positionAbsolute?.y ?? 0) - nodeOrigin[1] * (node.height ?? 0)}
+              key={node.id}
-            width={node.width!}
+              x={positionAbsolute.x}
-            height={node.height!}
+              y={positionAbsolute.x}
-            style={node.style}
+              width={node.width!}
-            className={nodeClassNameFunc(node)}
+              height={node.height!}
-            color={nodeColorFunc(node)}
+              style={node.style}
-            borderRadius={nodeBorderRadius}
+              className={nodeClassNameFunc(node)}
-            strokeColor={nodeStrokeColorFunc(node)}
+              color={nodeColorFunc(node)}
-            strokeWidth={nodeStrokeWidth}
+              borderRadius={nodeBorderRadius}
-            shapeRendering={shapeRendering}
+              strokeColor={nodeStrokeColorFunc(node)}
-            onClick={onSvgNodeClick}
+              strokeWidth={nodeStrokeWidth}
-            id={node.id}
+              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