diff --git a/.changeset/heavy-days-admire.md b/.changeset/heavy-days-admire.md new file mode 100644 index 00000000..2673b2bc --- /dev/null +++ b/.changeset/heavy-days-admire.md @@ -0,0 +1,7 @@ +--- +'@xyflow/system': patch +'@xyflow/svelte': patch +'@xyflow/react': patch +--- + +Prevent calling onResizeEnd if node was not resized diff --git a/packages/system/src/xyresizer/XYResizer.ts b/packages/system/src/xyresizer/XYResizer.ts index e6aace30..326a7007 100644 --- a/packages/system/src/xyresizer/XYResizer.ts +++ b/packages/system/src/xyresizer/XYResizer.ts @@ -125,6 +125,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X let parentNode: InternalNodeBase | undefined = undefined; // Needed to fix expandParent let parentExtent: CoordinateExtent | undefined = undefined; let childExtent: CoordinateExtent | undefined = undefined; + // we only want to trigger onResizeEnd if onResize was actually called + let resizeDetected = false; const dragHandler = drag() .on('start', (event: ResizeDragEvent) => { @@ -300,13 +302,20 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }: X if (callResize === false) { return; } + resizeDetected = true; onResize?.(event, nextValues); onChange(change, childChanges); }) .on('end', (event: ResizeDragEvent) => { + if (!resizeDetected) { + return; + } + onResizeEnd?.(event, { ...prevValues }); onEnd?.({ ...prevValues }); + + resizeDetected = false; }); selection.call(dragHandler); } diff --git a/packages/system/src/xyresizer/types.ts b/packages/system/src/xyresizer/types.ts index 1d16eb3a..92bde6fd 100644 --- a/packages/system/src/xyresizer/types.ts +++ b/packages/system/src/xyresizer/types.ts @@ -1,5 +1,9 @@ import type { D3DragEvent, SubjectPosition } from 'd3-drag'; +/** + * @public + * @inline + */ export type ResizeParams = { x: number; y: number; @@ -15,6 +19,7 @@ export type ResizeParamsWithDirection = ResizeParams & { * Used to determine the control line position of the NodeResizer * * @public + * @inline */ export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right'; @@ -22,6 +27,7 @@ export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right'; * Used to determine the control position of the NodeResizer * * @public + * @inline */ export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; @@ -38,6 +44,7 @@ export enum ResizeControlVariant { /** * The direction the user can resize the node. * @public + * @inline */ export type ResizeControlDirection = 'horizontal' | 'vertical'; @@ -47,6 +54,12 @@ export const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[] = ['top', 'right', type OnResizeHandler = (event: ResizeDragEvent, params: Params) => Result; export type ResizeDragEvent = D3DragEvent; +/** + * Callback to determine if node should resize + * + * @inline + * @public + */ export type ShouldResize = OnResizeHandler; export type OnResizeStart = OnResizeHandler; export type OnResize = OnResizeHandler;