feat(node-resizer): add direction, cleanup types

examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx

@@ -1,10 +1,10 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizeControl, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import { NodeResizeControl, OnResize, OnBeforeResize } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+const onBeforeResize: OnBeforeResize = (event, params) => {
   console.log('before resize', params);
 
   if (params.width > 100) {
@@ -12,8 +12,8 @@ const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
   }
 };
 
-const onResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+const onResize: OnResize = (event, params) => {
-  console.log('resize', params);
+  console.log('resize', params.direction);
 };
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {

examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx

@@ -1,22 +1,22 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import { NodeResizer, OnBeforeResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResizeStart: OnResizeStart = (_, params) => {
   console.log('resize start', params);
 };
 
-const onBeforeResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onBeforeResize: OnBeforeResize = (_, params) => {
   console.log('before resize', params);
 };
 
-const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResize: OnResize = (_, params) => {
   console.log('resize', params);
 };
 
-const onResizeEnd = (_: ResizeDragEvent, params: ResizeEventParams) => {
+const onResizeEnd: OnResizeEnd = (_, params) => {
   console.log('resize end', params);
 };
 

packages/node-resizer/src/ResizeControl.tsx

@@ -12,6 +12,7 @@ import {
 } from '@reactflow/core';
 
 import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
+import { getDirection } from './utils';
 
 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
 
@@ -99,7 +100,6 @@ function ResizeControl({
           const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
           const isWidthChange = width !== prevWidth;
           const isHeightChange = height !== prevHeight;
-          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
 
           if (invertX || invertY) {
             const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
@@ -141,11 +141,27 @@ function ResizeControl({
             prevValues.current.width = width;
             prevValues.current.height = height;
           }
+
+          if (changes.length === 0) {
+            return;
+          }
+
+          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
+
           if (onBeforeResizeResult === false) {
             return;
           }
 
-          onResize?.(event, { ...prevValues.current });
+          const direction = getDirection({
+            width: prevValues.current.width,
+            prevWidth,
+            height: prevValues.current.height,
+            prevHeight,
+            invertX,
+            invertY,
+          });
+
+          onResize?.(event, { ...prevValues.current, direction });
           triggerNodeChanges(changes);
         }
       })

packages/node-resizer/src/types.ts

@@ -1,13 +1,24 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { D3DragEvent, SubjectPosition } from 'd3-drag';
 
-export type ResizeEventParams = {
+export type ResizeParams = {
   x: number;
   y: number;
   width: number;
   height: number;
 };
 
+export type ResizeParamsWithDirection = ResizeParams & {
+  direction: number[];
+};
+
+type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
+
+export type OnResizeStart = OnResizeHandler;
+export type OnBeforeResize = OnResizeHandler<ResizeParams, unknown>;
+export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
+export type OnResizeEnd = OnResizeHandler;
+
 export type NodeResizerProps = {
   nodeId?: string;
   color?: string;
@@ -18,10 +29,10 @@ export type NodeResizerProps = {
   isVisible?: boolean;
   minWidth?: number;
   minHeight?: number;
-  onResizeStart?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResizeStart?: OnResizeStart;
-  onBeforeResize?: (event: ResizeDragEvent, params: ResizeEventParams) => unknown;
+  onBeforeResize?: OnBeforeResize;
-  onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResize?: OnResize;
-  onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResizeEnd?: OnResizeEnd;
 };
 
 export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';

packages/node-resizer/src/utils.ts

@@ -0,0 +1,26 @@
+type GetDirectionParams = {
+  width: number;
+  prevWidth: number;
+  height: number;
+  prevHeight: number;
+  invertX: boolean;
+  invertY: boolean;
+};
+
+// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
+// 0 = no change, 1 = increase, -1 = decrease
+export function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }: GetDirectionParams) {
+  const deltaWidth = width - prevWidth;
+  const deltaHeight = height - prevHeight;
+
+  const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+
+  if (deltaWidth && invertX) {
+    direction[0] = direction[0] * -1;
+  }
+
+  if (deltaHeight && invertY) {
+    direction[1] = direction[1] * -1;
+  }
+  return direction;
+}