diff --git a/examples/react/src/examples/NodeResizer/DefaultResizer.tsx b/examples/react/src/examples/NodeResizer/DefaultResizer.tsx index a3532a8f..d5d314ba 100644 --- a/examples/react/src/examples/NodeResizer/DefaultResizer.tsx +++ b/examples/react/src/examples/NodeResizer/DefaultResizer.tsx @@ -1,7 +1,9 @@ import { memo, FC } from 'react'; -import { Handle, Position, NodeProps, NodeResizer } from '@xyflow/react'; +import { Handle, Position, NodeProps, NodeResizer, useKeyPress } from '@xyflow/react'; const DefaultResizerNode: FC = ({ data, selected }) => { + const keepAspectRatio = useKeyPress('k'); + return ( <> = ({ data, selected }) => { onResizeStart={data.onResizeStart ?? undefined} onResize={data.onResize ?? undefined} onResizeEnd={data.onResizeEnd ?? undefined} - keepAspectRatio={data.keepAspectRatio ?? undefined} + keepAspectRatio={keepAspectRatio || (data.keepAspectRatio ?? undefined)} />
{data.label}
diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index 326a7007..713d14e3 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -104,6 +104,18 @@ function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOr export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: XYResizerParams): XYResizerInstance { const selection = select(domNode); + let params = { + controlDirection: getControlDirection('bottom-right'), + boundaries: { + minWidth: 0, + minHeight: 0, + maxWidth: Number.MAX_VALUE, + maxHeight: Number.MAX_VALUE, + }, + resizeDirection: undefined as ResizeControlDirection | undefined, + keepAspectRatio: false, + }; + function update({ controlPosition, boundaries, @@ -117,7 +129,12 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X let prevValues = { ...initPrevValues }; let startValues = { ...initStartValues }; - const controlDirection = getControlDirection(controlPosition); + params = { + boundaries, + resizeDirection, + keepAspectRatio, + controlDirection: getControlDirection(controlPosition), + }; let node: InternalNodeBase | undefined = undefined; let containerBounds: DOMRect | null = null; @@ -212,16 +229,17 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X if (!node) { return; } + const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues; const change: XYResizerChange = {}; const nodeOrigin = node.origin ?? storeNodeOrigin; const { width, height, x, y } = getDimensionsAfterResize( startValues, - controlDirection, + params.controlDirection, pointerPosition, - boundaries, - keepAspectRatio, + params.boundaries, + params.keepAspectRatio, nodeOrigin, parentExtent, childExtent @@ -264,9 +282,13 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X if (isWidthChange || isHeightChange) { change.width = - isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width; + isWidthChange && (!params.resizeDirection || params.resizeDirection === 'horizontal') + ? width + : prevValues.width; change.height = - isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height; + isHeightChange && (!params.resizeDirection || params.resizeDirection === 'vertical') + ? height + : prevValues.height; prevValues.width = change.width; prevValues.height = change.height; } @@ -291,8 +313,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X prevWidth, height: prevValues.height, prevHeight, - affectsX: controlDirection.affectsX, - affectsY: controlDirection.affectsY, + affectsX: params.controlDirection.affectsX, + affectsY: params.controlDirection.affectsY, }); const nextValues = { ...prevValues, direction };