alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

let resizer params be updated dynamically

Browse Source
This commit is contained in:
peterkogo
2025-09-30 10:40:57 +02:00
parent 8f934d7793
commit f29593072c
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/react/src/examples/NodeResizer/DefaultResizer.tsx
View File

@@ -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<NodeProps> = ({ data, selected }) => {
const keepAspectRatio = useKeyPress('k');
return (
<>
<NodeResizer
@@ -14,7 +16,7 @@ const DefaultResizerNode: FC<NodeProps> = ({ data, selected }) => {
onResizeStart={data.onResizeStart ?? undefined}
onResize={data.onResize ?? undefined}
onResizeEnd={data.onResizeEnd ?? undefined}
keepAspectRatio={data.keepAspectRatio ?? undefined}
keepAspectRatio={keepAspectRatio || (data.keepAspectRatio ?? undefined)}
/>
<Handle type="target" position={Position.Left} />
<div>{data.label}</div>

38
packages/system/src/xyresizer/XYResizer.ts
View File

@@ -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 };