diff --git a/.changeset/lazy-pumpkins-remember.md b/.changeset/lazy-pumpkins-remember.md new file mode 100644 index 00000000..8a5a3473 --- /dev/null +++ b/.changeset/lazy-pumpkins-remember.md @@ -0,0 +1,6 @@ +--- +'@reactflow/core': patch +'@reactflow/minimap': patch +--- + +Fix getRectOfNodes diff --git a/packages/core/src/hooks/useDrag/utils.ts b/packages/core/src/hooks/useDrag/utils.ts index 61b0d3f9..74484baf 100644 --- a/packages/core/src/hooks/useDrag/utils.ts +++ b/packages/core/src/hooks/useDrag/utils.ts @@ -1,6 +1,6 @@ import type { RefObject } from 'react'; -import { clampPosition, devWarn } from '../../utils'; +import { clampPosition, devWarn, isNumeric } from '../../utils'; import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, XYPosition } from '../../types'; import { getNodePositionWithOrigin } from '../../utils/graph'; @@ -69,17 +69,14 @@ export function calcNextPosition( if (node.extent === 'parent') { if (node.parentNode && node.width && node.height) { const parent = nodeInternals.get(node.parentNode); - const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin); + const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute; currentExtent = - parentPosition.positionAbsolute && parent?.width && parent?.height + parent && isNumeric(parentX) && isNumeric(parentY) && isNumeric(parent.width) && isNumeric(parent.height) ? [ + [parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]], [ - 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], + parentX + parent.width - node.width + node.width * nodeOrigin[0], + parentY + parent.height - node.height + node.height * nodeOrigin[1], ], ] : currentExtent; @@ -90,8 +87,7 @@ export function calcNextPosition( } } else if (node.extent && node.parentNode) { const parent = nodeInternals.get(node.parentNode); - const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin); - const { x: parentX, y: parentY } = parentPosition.positionAbsolute; + const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute; currentExtent = [ [node.extent[0][0] + parentX, node.extent[0][1] + parentY], [node.extent[1][0] + parentX, node.extent[1][1] + parentY], diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index ea390967..9a3d4c42 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -2,7 +2,7 @@ import type { Selection as D3Selection } from 'd3'; import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils'; -import type { +import { Node, Edge, Connection, @@ -156,18 +156,22 @@ export const getNodePositionWithOrigin = ( }; } - const offset: XYPosition = { - x: (node.width ?? 0) * nodeOrigin[0], - y: (node.height ?? 0) * nodeOrigin[1], + const offsetX = (node.width ?? 0) * nodeOrigin[0]; + const offsetY = (node.height ?? 0) * nodeOrigin[1]; + + const position: XYPosition = { + x: node.position.x - offsetX, + y: node.position.y - offsetY, }; 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, - }, + ...position, + positionAbsolute: node.positionAbsolute + ? { + x: node.positionAbsolute.x - offsetX, + y: node.positionAbsolute.y - offsetY, + } + : position, }; }; @@ -178,15 +182,12 @@ export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): const box = nodes.reduce( (currBox, node) => { - const { positionAbsolute, ...position } = getNodePositionWithOrigin(node, nodeOrigin); - const nodeX = positionAbsolute ? positionAbsolute.x : position.x; - const nodeY = positionAbsolute ? positionAbsolute.y : position.y; - + const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute; return getBoundsOfBoxes( currBox, rectToBox({ - x: nodeX, - y: nodeY, + x, + y, width: node.width || 0, height: node.height || 0, }) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index 722f1423..b1d4c555 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -167,13 +167,13 @@ function MiniMap({ > {ariaLabel && {ariaLabel}} {nodes.map((node) => { - const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin); + const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute; return (