Keep aspect ratio while resizing

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)"

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

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
 }