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 ( + + ); + })}