alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(resizer): Add support for maxWidth and maxHeight

Browse Source
This commit is contained in:
stffabi
2023-02-17 08:28:48 +01:00
parent afa38727fa
commit 5becbb1ebe
3 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/node-resizer/src/NodeResizer.tsx
View File

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

8
packages/node-resizer/src/ResizeControl.tsx
View File

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

4
packages/node-resizer/src/types.ts
View File

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