refactor(node-resizer): rename onBeforeResize to shouldResize, cleanup types

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} />

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}
       />

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}
         />

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);
         }
       })

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;