Improvements

packages/node-resizer/src/NodeResizer.vue

@@ -35,7 +35,7 @@ export default {
     :node-id="nodeId"
     :position="c"
     :variant="ResizeControlVariant.Line"
-    :aspect-ratio="aspectRatio"
+    :keep-aspect-ratio="keepAspectRatio"
     :color="color"
     :min-width="minWidth"
     :min-height="minHeight"
@@ -56,7 +56,7 @@ export default {
     :min-width="minWidth"
     :min-height="minHeight"
     :should-resize="shouldResize"
-    :aspect-ratio="aspectRatio"
+    :keep-aspect-ratio="keepAspectRatio"
     @resize-start="emits('resizeStart', $event)"
     @resize="emits('resize', $event)"
     @resize-end="emits('resizeEnd', $event)"

packages/node-resizer/src/ResizeControl.vue

@@ -38,6 +38,16 @@ const { findNode, emits: triggerEmits } = useVueFlow()
 const startValues = ref<typeof initStartValues>(initStartValues)
 const prevValues = ref<typeof initPrevValues>(initPrevValues)
 
+const aspectRatio = computed(() => {
+  if (props.keepAspectRatio === true && startValues.value.width && startValues.value.height) {
+    return startValues.value.width / startValues.value.height
+  }
+  if (typeof props.keepAspectRatio == 'number') {
+    return props.keepAspectRatio
+  }
+  return undefined
+})
+
 const getPointerPosition = useGetPointerPosition()
 const defaultPosition = computed(() => (props.variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'))
 const controlPosition = computed(() => props.position ?? defaultPosition.value)
@@ -96,16 +106,16 @@ watchEffect((onCleanup) => {
         let width = Math.max(startWidth + (invertX ? -distX : distX), props.minWidth)
         let height = Math.max(startHeight + (invertY ? -distY : distY), props.minHeight)
 
-        if (props.aspectRatio) {
+        if (aspectRatio.value) {
           const currentAspectRatio = width / height
-          if (currentAspectRatio !== props.aspectRatio) {
+          if (currentAspectRatio !== aspectRatio.value) {
-            const newWidth = height * props.aspectRatio
+            const newWidth = height * aspectRatio.value
-            const newHeight = width / props.aspectRatio
+            const newHeight = width / aspectRatio.value
 
-            if (newWidth > width) {
+            if (distX > distY) {
-              width = newWidth
-            } else {
               height = newHeight
+            } else {
+              width = newWidth
             }
           }
         }

packages/node-resizer/src/types.ts

@@ -42,7 +42,7 @@ export interface NodeResizerProps {
   minWidth?: number
   minHeight?: number
   shouldResize?: ShouldResize
-  aspectRatio?: number
+  keepAspectRatio?: boolean | number
 }
 
 export interface NodeResizerEmits {
@@ -68,7 +68,7 @@ export interface ResizeControlProps {
   position?: ControlPosition
   variant?: ResizeControlVariant
   shouldResize?: ShouldResize
-  aspectRatio? : number
+  keepAspectRatio?: boolean | number
 }
 
 export interface ResizeControlLineProps {
@@ -78,5 +78,5 @@ export interface ResizeControlLineProps {
   minHeight?: number
   variant?: ResizeControlVariant
   position?: ControlLinePosition
-  aspectRatio?: number
+  keepAspectRatio?: boolean | number
 }