From 4c2acf5aa19e91a82c97577eeda86b7da71a09a6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 7 Dec 2022 16:30:01 +0100
Subject: [PATCH] feat(resizer): add resize event handlers

---
 .../examples/NodeResizer/NodeResizerNode.tsx  | 23 +++++++++++++++++--
 packages/node-resizer/src/NodeResizer.tsx     |  9 ++++++++
 packages/node-resizer/src/ResizeControl.tsx   | 11 +++++++--
 packages/node-resizer/src/types.ts            | 19 +++++++++++----
 4 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index 0b7a09e7..a8f76eca 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -1,13 +1,32 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer } from '@reactflow/node-resizer';
+import { NodeResizer, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
+const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize start', params);
+};
+
+const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize', params);
+};
+
+const onResizeEnd = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize end', params);
+};
+
 const CustomNode: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
-      <NodeResizer minWidth={100} minHeight={100} isVisible={selected} />
+      <NodeResizer
+        minWidth={100}
+        minHeight={100}
+        isVisible={selected}
+        onResizeStart={onResizeStart}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+      />
       <Handle type="target" position={Position.Left} />
       <div>{data.label}</div>
       <Handle type="source" position={Position.Right} />
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index c3c14428..f676e79a 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -14,6 +14,9 @@ export default function NodeResizer({
   color,
   minWidth = 10,
   minHeight = 10,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
 }: NodeResizerProps) {
   if (!isVisible) {
     return null;
@@ -32,6 +35,9 @@ export default function NodeResizer({
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}
+          onResizeStart={onResizeStart}
+          onResize={onResize}
+          onResizeEnd={onResizeEnd}
         />
       ))}
       {handleControls.map((c) => (
@@ -44,6 +50,9 @@ export default function NodeResizer({
           color={color}
           minWidth={minWidth}
           minHeight={minHeight}
+          onResizeStart={onResizeStart}
+          onResize={onResize}
+          onResizeEnd={onResizeEnd}
         />
       ))}
     </>
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index cd980a47..654b3249 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -31,6 +31,9 @@ function ResizeControl({
   color,
   minWidth = 10,
   minHeight = 10,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
 }: ResizeControlProps) {
   const contextNodeId = useNodeId();
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -65,6 +68,8 @@ function ResizeControl({
           pointerX: xSnapped,
           pointerY: ySnapped,
         };
+
+        onResizeStart?.(event, { ...prevValues.current });
       })
       .on('drag', (event: ResizeDragEvent) => {
         const { nodeInternals, triggerNodeChanges } = store.getState();
@@ -135,16 +140,18 @@ function ResizeControl({
             prevValues.current.height = height;
           }
 
+          onResize?.(event, { ...prevValues.current });
           triggerNodeChanges(changes);
         }
       })
-      .on('end', () => {
+      .on('end', (event: ResizeDragEvent) => {
         const dimensionChange: NodeDimensionChange = {
           id: id,
           type: 'dimensions',
-          resizing: true,
+          resizing: false,
         };
 
+        onResizeEnd?.(event, { ...prevValues.current });
         store.getState().triggerNodeChanges([dimensionChange]);
       });
 
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 41668b6e..74ae4d66 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -1,6 +1,13 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
+export type ResizeEventParams = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
 export type NodeResizerProps = {
   nodeId?: string;
   color?: string;
@@ -11,6 +18,9 @@ export type NodeResizerProps = {
   isVisible?: boolean;
   minWidth?: number;
   minHeight?: number;
+  onResizeStart?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
 };
 
 export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
@@ -22,16 +32,15 @@ export enum ResizeControlVariant {
   Handle = 'handle',
 }
 
-export type ResizeControlProps = {
-  nodeId?: string;
+export type ResizeControlProps = Pick<
+  NodeResizerProps,
+  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
+> & {
   position?: ControlPosition;
   variant?: ResizeControlVariant;
-  color?: string;
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
-  minWidth?: number;
-  minHeight?: number;
 };
 
 export type ResizeControlLineProps = ResizeControlProps & {