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 = ({ id, data }) => { return ( <> - +
{data.label}
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 = ({ data, selected }) => { return ( <> @@ -27,8 +29,8 @@ const CustomNode: FC = ({ 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 = (event: ResizeDragEvent, params: Params) => Result; +export type ShouldResize = OnResizeHandler; export type OnResizeStart = OnResizeHandler; -export type OnBeforeResize = OnResizeHandler; export type OnResize = OnResizeHandler; 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;