diff --git a/examples/vite-app/src/examples/Subflow/index.tsx b/examples/vite-app/src/examples/Subflow/index.tsx
index 8d2945e0..55aea018 100644
--- a/examples/vite-app/src/examples/Subflow/index.tsx
+++ b/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}
>
diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts
index f9eb6ade..61b0d3f9 100644
--- a/packages/core/src/hooks/useDrag/utils.ts
+++ b/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.y + parent.height - node.height,
+ parentPosition.positionAbsolute.x + node.width * nodeOrigin[0],
+ 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
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index e2e077db..d51540e9 100644
--- a/packages/core/src/index.ts
+++ b/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';
diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts
index c1b4fd7e..02a4516b 100644
--- a/packages/core/src/store/utils.ts
+++ b/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,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index d6a4d068..f07267a5 100644
--- a/packages/core/src/utils/graph.ts
+++ b/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,
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index 8d804f4e..890df176 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/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 &&
{ariaLabel}}
- {nodes.map((node) => (
-
- ))}
+ {nodes.map((node) => {
+ const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
+
+ return (
+
+ );
+ })}