From 4d7a5e785ceaddf7b5932d624806161a04b30963 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 12 Jan 2023 14:34:39 +0100
Subject: [PATCH 1/5] feat(node-resizer): add onBeforeResize handler

---
 .../examples/NodeResizer/CustomResizer.tsx    |  4 +--
 .../examples/NodeResizer/CustomResizer2.tsx   |  6 ++--
 .../examples/NodeResizer/CustomResizer3.tsx   | 31 +++++++++++++++++++
 .../examples/NodeResizer/NodeResizerNode.tsx  |  5 +++
 .../src/examples/NodeResizer/index.tsx        | 11 ++++++-
 packages/node-resizer/src/NodeResizer.tsx     |  3 ++
 packages/node-resizer/src/ResizeControl.tsx   |  5 +++
 packages/node-resizer/src/types.ts            |  3 +-
 8 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
index 996e24c5..6cf58fd9 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx
@@ -1,7 +1,7 @@
-import { memo, FC, CSSProperties } from 'react';
+import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
+import { NodeResizeControl } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 import ResizeIcon from './ResizeIcon';
 
diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
index 27833556..63ff061b 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer2.tsx
@@ -1,14 +1,14 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
+import { NodeResizeControl } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeResizeControl color="red" position="top" />
-      <NodeResizeControl color="red" position="bottom" />
+      <NodeResizeControl color="red" position={Position.Top} />
+      <NodeResizeControl color="red" position={Position.Bottom} />
       <Handle type="target" position={Position.Left} />
       <div style={{ padding: 10 }}>{data.label}</div>
       <Handle type="source" position={Position.Right} />
diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
new file mode 100644
index 00000000..adae9adb
--- /dev/null
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
@@ -0,0 +1,31 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+import { NodeResizeControl, ResizeDragEvent, ResizeEventParams } from '@reactflow/node-resizer';
+import '@reactflow/node-resizer/dist/style.css';
+
+const onBeforeResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('before resize', params);
+
+  if (params.width > 100) {
+    return false;
+  }
+};
+
+const onResize = (event: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('resize', params);
+};
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeResizeControl color="red" position={Position.Left} />
+      <NodeResizeControl color="red" position={Position.Right} onBeforeResize={onBeforeResize} onResize={onResize} />
+      <Handle type="target" position={Position.Top} />
+      <div style={{ padding: 10 }}>{data.label}</div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index a8f76eca..0f6ef37e 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -8,6 +8,10 @@ const onResizeStart = (_: ResizeDragEvent, params: ResizeEventParams) => {
   console.log('resize start', params);
 };
 
+const onBeforeResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
+  console.log('before resize', params);
+};
+
 const onResize = (_: ResizeDragEvent, params: ResizeEventParams) => {
   console.log('resize', params);
 };
@@ -24,6 +28,7 @@ const CustomNode: FC<NodeProps> = ({ data, selected }) => {
         minHeight={100}
         isVisible={selected}
         onResizeStart={onResizeStart}
+        onBeforeResize={onBeforeResize}
         onResize={onResize}
         onResizeEnd={onResizeEnd}
       />
diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx
index 68afe5df..01bb0851 100644
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -4,11 +4,13 @@ import ReactFlow, { Controls, addEdge, Position, Connection, useNodesState, useE
 import NodeResizerNode from './NodeResizerNode';
 import CustomResizer from './CustomResizer';
 import CustomResizer2 from './CustomResizer2';
+import CustomResizer3 from './CustomResizer3';
 
 const nodeTypes = {
   resizer: NodeResizerNode,
   customResizer: CustomResizer,
   customResizer2: CustomResizer2,
+  customResizer3: CustomResizer3,
 };
 
 const initialEdges = [
@@ -60,6 +62,13 @@ const initialNodes = [
     position: { x: 250, y: 250 },
     style: { border: '1px solid #222', fontSize: 10 },
   },
+  {
+    id: '6',
+    type: 'customResizer3',
+    data: { label: 'resize controls' },
+    position: { x: 400, y: 200 },
+    style: { border: '1px solid #222', fontSize: 10 },
+  },
 ];
 
 const CustomNodeFlow = () => {
@@ -87,7 +96,7 @@ const CustomNodeFlow = () => {
     >
       <Controls />
       <Panel position="bottom-right">
-        <button onClick={() => setSnapToGrid(!snapToGrid)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
+        <button onClick={() => setSnapToGrid((s) => !s)}>snapToGrid: {snapToGrid ? 'on' : 'off'}</button>
       </Panel>
     </ReactFlow>
   );
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index f676e79a..9d36919b 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -15,6 +15,7 @@ export default function NodeResizer({
   minWidth = 10,
   minHeight = 10,
   onResizeStart,
+  onBeforeResize,
   onResize,
   onResizeEnd,
 }: NodeResizerProps) {
@@ -36,6 +37,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
+          onBeforeResize={onBeforeResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
@@ -51,6 +53,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
+          onBeforeResize={onBeforeResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 654b3249..6aebd256 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -32,6 +32,7 @@ function ResizeControl({
   minWidth = 10,
   minHeight = 10,
   onResizeStart,
+  onBeforeResize,
   onResize,
   onResizeEnd,
 }: ResizeControlProps) {
@@ -98,6 +99,7 @@ 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;
@@ -139,6 +141,9 @@ function ResizeControl({
             prevValues.current.width = width;
             prevValues.current.height = height;
           }
+          if (onBeforeResizeResult === false) {
+            return;
+          }
 
           onResize?.(event, { ...prevValues.current });
           triggerNodeChanges(changes);
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 9dc808f6..8388e89d 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -19,6 +19,7 @@ export type NodeResizerProps = {
   minWidth?: number;
   minHeight?: number;
   onResizeStart?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onBeforeResize?: (event: ResizeDragEvent, params: ResizeEventParams) => unknown;
   onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
   onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
 };
@@ -34,7 +35,7 @@ export enum ResizeControlVariant {
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
-  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
+  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onBeforeResize' | 'onResize' | 'onResizeEnd'
 > & {
   position?: ControlPosition;
   variant?: ResizeControlVariant;

From e6b71d474f7941e72b641bd1c040ec8e6c1abf8d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 15 Jan 2023 11:56:46 +0100
Subject: [PATCH 2/5] feat(node-resizer): add direction, cleanup types

---
 .../examples/NodeResizer/CustomResizer3.tsx   |  8 +++---
 .../examples/NodeResizer/NodeResizerNode.tsx  | 10 +++----
 packages/node-resizer/src/ResizeControl.tsx   | 20 ++++++++++++--
 packages/node-resizer/src/types.ts            | 21 +++++++++++----
 packages/node-resizer/src/utils.ts            | 26 +++++++++++++++++++
 5 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 packages/node-resizer/src/utils.ts

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
index adae9adb..33a3e5f5 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
+++ b/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) => {
-  console.log('resize', params);
+const onResize: OnResize = (event, params) => {
+  console.log('resize', params.direction);
 };
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index 0f6ef37e..e9f09894 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/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);
 };
 
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 6aebd256..138d2345 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/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);
         }
       })
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 8388e89d..2bd674db 100644
--- a/packages/node-resizer/src/types.ts
+++ b/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;
-  onBeforeResize?: (event: ResizeDragEvent, params: ResizeEventParams) => unknown;
-  onResize?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
-  onResizeEnd?: (event: ResizeDragEvent, params: ResizeEventParams) => void;
+  onResizeStart?: OnResizeStart;
+  onBeforeResize?: OnBeforeResize;
+  onResize?: OnResize;
+  onResizeEnd?: OnResizeEnd;
 };
 
 export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
diff --git a/packages/node-resizer/src/utils.ts b/packages/node-resizer/src/utils.ts
new file mode 100644
index 00000000..00d81d81
--- /dev/null
+++ b/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;
+}

From 1ab7a0f0d9368e86cece63f34960464b0035f2f1 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 16 Jan 2023 14:39:11 +0100
Subject: [PATCH 3/5] refactor(node-resizer): rename onBeforeResize to
 shouldResize, cleanup types

---
 .../examples/NodeResizer/CustomResizer3.tsx    |  8 +++++---
 .../examples/NodeResizer/NodeResizerNode.tsx   | 14 ++++++++------
 packages/node-resizer/src/NodeResizer.tsx      |  6 +++---
 packages/node-resizer/src/ResizeControl.tsx    | 18 ++++++++++--------
 packages/node-resizer/src/types.ts             |  6 +++---
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
index 33a3e5f5..422f2982 100644
--- a/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/CustomResizer3.tsx
@@ -1,15 +1,17 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizeControl, OnResize, OnBeforeResize } from '@reactflow/node-resizer';
+import { NodeResizeControl, OnResize, ShouldResize } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
-const onBeforeResize: OnBeforeResize = (event, params) => {
+const shouldResize: ShouldResize = (event, params) => {
   console.log('before resize', params);
 
   if (params.width > 100) {
     return false;
   }
+
+  return true;
 };
 
 const onResize: OnResize = (event, params) => {
@@ -20,7 +22,7 @@ const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
       <NodeResizeControl color="red" position={Position.Left} />
-      <NodeResizeControl color="red" position={Position.Right} onBeforeResize={onBeforeResize} onResize={onResize} />
+      <NodeResizeControl color="red" position={Position.Right} shouldResize={shouldResize} onResize={onResize} />
       <Handle type="target" position={Position.Top} />
       <div style={{ padding: 10 }}>{data.label}</div>
       <Handle type="source" position={Position.Bottom} />
diff --git a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
index e9f09894..03e4960f 100644
--- a/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/NodeResizerNode.tsx
@@ -1,17 +1,13 @@
 import { memo, FC } from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 
-import { NodeResizer, OnBeforeResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
+import { NodeResizer, ShouldResize, OnResize, OnResizeEnd, OnResizeStart } from '@reactflow/node-resizer';
 import '@reactflow/node-resizer/dist/style.css';
 
 const onResizeStart: OnResizeStart = (_, params) => {
   console.log('resize start', params);
 };
 
-const onBeforeResize: OnBeforeResize = (_, params) => {
-  console.log('before resize', params);
-};
-
 const onResize: OnResize = (_, params) => {
   console.log('resize', params);
 };
@@ -20,6 +16,12 @@ const onResizeEnd: OnResizeEnd = (_, params) => {
   console.log('resize end', params);
 };
 
+const shouldResize: ShouldResize = (_, params) => {
+  console.log('should resize', params);
+
+  return true;
+};
+
 const CustomNode: FC<NodeProps> = ({ data, selected }) => {
   return (
     <>
@@ -27,8 +29,8 @@ const CustomNode: FC<NodeProps> = ({ data, selected }) => {
         minWidth={100}
         minHeight={100}
         isVisible={selected}
+        shouldResize={shouldResize}
         onResizeStart={onResizeStart}
-        onBeforeResize={onBeforeResize}
         onResize={onResize}
         onResizeEnd={onResizeEnd}
       />
diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx
index 9d36919b..c7a3b8a6 100644
--- a/packages/node-resizer/src/NodeResizer.tsx
+++ b/packages/node-resizer/src/NodeResizer.tsx
@@ -14,8 +14,8 @@ export default function NodeResizer({
   color,
   minWidth = 10,
   minHeight = 10,
+  shouldResize,
   onResizeStart,
-  onBeforeResize,
   onResize,
   onResizeEnd,
 }: NodeResizerProps) {
@@ -37,7 +37,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
-          onBeforeResize={onBeforeResize}
+          shouldResize={shouldResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
@@ -53,7 +53,7 @@ export default function NodeResizer({
           minWidth={minWidth}
           minHeight={minHeight}
           onResizeStart={onResizeStart}
-          onBeforeResize={onBeforeResize}
+          shouldResize={shouldResize}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
         />
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index 138d2345..3397537d 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -32,8 +32,8 @@ function ResizeControl({
   color,
   minWidth = 10,
   minHeight = 10,
+  shouldResize,
   onResizeStart,
-  onBeforeResize,
   onResize,
   onResizeEnd,
 }: ResizeControlProps) {
@@ -146,12 +146,6 @@ function ResizeControl({
             return;
           }
 
-          const onBeforeResizeResult = onBeforeResize?.(event, { ...prevValues.current });
-
-          if (onBeforeResizeResult === false) {
-            return;
-          }
-
           const direction = getDirection({
             width: prevValues.current.width,
             prevWidth,
@@ -161,7 +155,15 @@ function ResizeControl({
             invertY,
           });
 
-          onResize?.(event, { ...prevValues.current, direction });
+          const nextValues = { ...prevValues.current, direction };
+
+          const callResize = shouldResize?.(event, nextValues);
+
+          if (callResize === false) {
+            return;
+          }
+
+          onResize?.(event, nextValues);
           triggerNodeChanges(changes);
         }
       })
diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts
index 2bd674db..75d40ace 100644
--- a/packages/node-resizer/src/types.ts
+++ b/packages/node-resizer/src/types.ts
@@ -14,8 +14,8 @@ export type ResizeParamsWithDirection = ResizeParams & {
 
 type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
 
+export type ShouldResize = OnResizeHandler<ResizeParamsWithDirection, boolean>;
 export type OnResizeStart = OnResizeHandler;
-export type OnBeforeResize = OnResizeHandler<ResizeParams, unknown>;
 export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
 export type OnResizeEnd = OnResizeHandler;
 
@@ -29,8 +29,8 @@ export type NodeResizerProps = {
   isVisible?: boolean;
   minWidth?: number;
   minHeight?: number;
+  shouldResize?: ShouldResize;
   onResizeStart?: OnResizeStart;
-  onBeforeResize?: OnBeforeResize;
   onResize?: OnResize;
   onResizeEnd?: OnResizeEnd;
 };
@@ -46,7 +46,7 @@ export enum ResizeControlVariant {
 
 export type ResizeControlProps = Pick<
   NodeResizerProps,
-  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'onResizeStart' | 'onBeforeResize' | 'onResize' | 'onResizeEnd'
+  'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
 > & {
   position?: ControlPosition;
   variant?: ResizeControlVariant;

From e347dd82d342bf9c4884ca667afaa5cf639283e5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 18 Jan 2023 12:36:52 +0100
Subject: [PATCH 4/5] chore(changeset): add

---
 .changeset/pretty-spoons-punch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pretty-spoons-punch.md

diff --git a/.changeset/pretty-spoons-punch.md b/.changeset/pretty-spoons-punch.md
new file mode 100644
index 00000000..0b661034
--- /dev/null
+++ b/.changeset/pretty-spoons-punch.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/node-resizer': major
+---
+
+Add shouldresize, cleanup types

From c9a83293957e69da176f2dbc008b8f81c059b1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Thu, 19 Jan 2023 14:00:30 +0100
Subject: [PATCH 5/5] fix(deps): don't require latest version of reactflow core
 in node resizer and toolbar

---
 packages/node-resizer/package.json | 2 +-
 packages/node-toolbar/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json
index 6bed1b65..a570caaf 100644
--- a/packages/node-resizer/package.json
+++ b/packages/node-resizer/package.json
@@ -38,7 +38,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@reactflow/core": "workspace:*",
+    "@reactflow/core": "workspace:^11.3.3",
     "classcat": "^5.0.4",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json
index b719ceb8..7ef50f38 100644
--- a/packages/node-toolbar/package.json
+++ b/packages/node-toolbar/package.json
@@ -36,7 +36,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@reactflow/core": "workspace:*",
+    "@reactflow/core": "workspace:^11.3.3",
     "classcat": "^5.0.3",
     "zustand": "^4.3.1"
   },