feat(resizer): Add support for maxWidth and maxHeight

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}

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 width = Math.min(Math.max(startWidth + (invertX ? -distX : distX), minWidth), maxWidth);
-          const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
+          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';

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;