diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx index c7a3b8a6..2560f60f 100644 --- a/packages/node-resizer/src/NodeResizer.tsx +++ b/packages/node-resizer/src/NodeResizer.tsx @@ -14,6 +14,8 @@ export default function NodeResizer({ color, minWidth = 10, minHeight = 10, + maxWidth = Number.MAX_VALUE, + maxHeight = Number.MAX_VALUE, shouldResize, onResizeStart, onResize, @@ -36,6 +38,8 @@ export default function NodeResizer({ color={color} minWidth={minWidth} minHeight={minHeight} + maxWidth={maxWidth} + maxHeight={maxHeight} onResizeStart={onResizeStart} shouldResize={shouldResize} onResize={onResize} @@ -52,6 +56,8 @@ export default function NodeResizer({ color={color} minWidth={minWidth} minHeight={minHeight} + maxWidth={maxWidth} + maxHeight={maxHeight} onResizeStart={onResizeStart} shouldResize={shouldResize} onResize={onResize} diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx index 3397537d..1d1be3e2 100644 --- a/packages/node-resizer/src/ResizeControl.tsx +++ b/packages/node-resizer/src/ResizeControl.tsx @@ -32,6 +32,8 @@ function ResizeControl({ color, minWidth = 10, minHeight = 10, + maxWidth = Number.MAX_VALUE, + maxHeight = Number.MAX_VALUE, shouldResize, onResizeStart, onResize, @@ -96,8 +98,8 @@ function ResizeControl({ const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current; const distX = Math.floor(enableX ? xSnapped - startX : 0); const distY = Math.floor(enableY ? ySnapped - startY : 0); - const width = Math.max(startWidth + (invertX ? -distX : distX), minWidth); - const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight); + const width = Math.min(Math.max(startWidth + (invertX ? -distX : distX), minWidth), maxWidth); + const height = Math.min(Math.max(startHeight + (invertY ? -distY : distY), minHeight), maxHeight); const isWidthChange = width !== prevWidth; const isHeightChange = height !== prevHeight; @@ -183,7 +185,7 @@ function ResizeControl({ return () => { selection.on('.drag', null); }; - }, [id, controlPosition, minWidth, minHeight, getPointerPosition]); + }, [id, controlPosition, minWidth, minHeight, maxWidth, maxHeight, getPointerPosition]); const positionClassNames = controlPosition.split('-'); const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor'; diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts index 75d40ace..bd0862a4 100644 --- a/packages/node-resizer/src/types.ts +++ b/packages/node-resizer/src/types.ts @@ -29,6 +29,8 @@ export type NodeResizerProps = { isVisible?: boolean; minWidth?: number; minHeight?: number; + maxWidth?: number; + maxHeight?: number; shouldResize?: ShouldResize; onResizeStart?: OnResizeStart; onResize?: OnResize; @@ -46,7 +48,7 @@ export enum ResizeControlVariant { export type ResizeControlProps = Pick< NodeResizerProps, - 'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd' + 'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd' > & { position?: ControlPosition; variant?: ResizeControlVariant;