feat(node-resizer): add onBeforeResize handler

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';
 

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

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

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

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

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

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

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;