diff --git a/.changeset/perfect-kings-complain.md b/.changeset/perfect-kings-complain.md new file mode 100644 index 00000000..6be70687 --- /dev/null +++ b/.changeset/perfect-kings-complain.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Clamp node extent by node dimensions to avoid node overflowing the extent by its size diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts index 4d9ac418..4858c1d1 100644 --- a/packages/core/src/utils/drag.ts +++ b/packages/core/src/utils/drag.ts @@ -1,6 +1,15 @@ import { markRaw } from 'vue' import { ErrorCode, VueFlowError, clampPosition, isNumber, isParentSelected } from '.' -import type { Actions, CoordinateExtent, CoordinateExtentRange, GraphNode, NodeDragItem, State, XYPosition } from '~/types' +import type { + Actions, + CoordinateExtent, + CoordinateExtentRange, + Dimensions, + GraphNode, + NodeDragItem, + State, + XYPosition, +} from '~/types' export function hasSelector(target: Element, selector: string, node: Element): boolean { let current = target @@ -157,6 +166,11 @@ export function getExtent( return currentExtent as CoordinateExtent } + +function clampNodeExtent({ width, height }: Dimensions, extent: CoordinateExtent): CoordinateExtent { + return [extent[0], [extent[1][0] - (width || 0), extent[1][1] - (height || 0)]] +} + export function calcNextPosition( node: GraphNode | NodeDragItem, nextPosition: XYPosition, @@ -164,7 +178,7 @@ export function calcNextPosition( nodeExtent?: State['nodeExtent'], parentNode?: GraphNode, ) { - const extent = getExtent(node, onError, nodeExtent, parentNode) + const extent = clampNodeExtent(node.dimensions, getExtent(node, onError, nodeExtent, parentNode)) const clampedPos = clampPosition(nextPosition, extent)