refactor(resizer): only call resize end if resize happened #5508

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;
@@ -47,6 +51,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>;