Merge pull request #5509 from xyflow/refactor/resizer-invalid

Only call resize end if node was resized

.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

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<HTMLDivElement, unknown>()
       .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);
   }

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<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
 export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
 
+/**
+ * Callback to determine if node should resize
+ *
+ * @inline
+ * @public
+ */
 export type ShouldResize = OnResizeHandler<ResizeParamsWithDirection, boolean>;
 export type OnResizeStart = OnResizeHandler;
 export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;