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 = ({ 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 = (event: ResizeDragEvent, params: Params) => Result; + +export type OnResizeStart = OnResizeHandler; +export type OnBeforeResize = OnResizeHandler; +export type OnResize = OnResizeHandler; +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; +}