diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue index a482d3f8..f935554b 100644 --- a/packages/node-resizer/src/NodeResizer.vue +++ b/packages/node-resizer/src/NodeResizer.vue @@ -35,6 +35,7 @@ export default { :node-id="nodeId" :position="c" :variant="ResizeControlVariant.Line" + :aspect-ratio="props.aspectRatio" :color="color" :min-width="minWidth" :min-height="minHeight" @@ -55,6 +56,7 @@ export default { :min-width="minWidth" :min-height="minHeight" :should-resize="shouldResize" + :aspect-ratio="props.aspectRatio" @resize-start="emits('resizeStart', $event)" @resize="emits('resize', $event)" @resize-end="emits('resizeEnd', $event)" diff --git a/packages/node-resizer/src/ResizeControl.vue b/packages/node-resizer/src/ResizeControl.vue index b8b04b10..86aaf9e9 100644 --- a/packages/node-resizer/src/ResizeControl.vue +++ b/packages/node-resizer/src/ResizeControl.vue @@ -93,8 +93,22 @@ watchEffect((onCleanup) => { const distX = Math.floor(enableX ? xSnapped - startX : 0) const distY = Math.floor(enableY ? ySnapped - startY : 0) - const width = Math.max(startWidth + (invertX ? -distX : distX), props.minWidth) - const height = Math.max(startHeight + (invertY ? -distY : distY), props.minHeight) + let width = Math.max(startWidth + (invertX ? -distX : distX), props.minWidth) + let height = Math.max(startHeight + (invertY ? -distY : distY), props.minHeight) + + if (props.aspectRatio) { + const currentAspectRatio = width / height + if (currentAspectRatio !== props.aspectRatio) { + const newWidth = height * props.aspectRatio + const newHeight = width / props.aspectRatio + + if (newWidth > width) { + width = newWidth + } else { + height = newHeight + } + } + } const isWidthChange = width !== prevWidth const isHeightChange = height !== prevHeight diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts index 7f35a918..431ad182 100644 --- a/packages/node-resizer/src/types.ts +++ b/packages/node-resizer/src/types.ts @@ -42,6 +42,7 @@ export interface NodeResizerProps { minWidth?: number minHeight?: number shouldResize?: ShouldResize + aspectRatio?: number } export interface NodeResizerEmits { @@ -67,6 +68,7 @@ export interface ResizeControlProps { position?: ControlPosition variant?: ResizeControlVariant shouldResize?: ShouldResize + aspectRatio? : number } export interface ResizeControlLineProps { @@ -76,4 +78,5 @@ export interface ResizeControlLineProps { minHeight?: number variant?: ResizeControlVariant position?: ControlLinePosition + aspectRatio?: number }