fix(ui): workaround canvas weirdness with locked aspect ratio

Cannot figure out how to allow the bbox to be transformed when aspect ratio is locked from all handles. Only the bottom right handle works as expected.

As a workaround, when the aspect ratio is locked, you can only resize the bbox from the bottom right handle.

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -144,76 +144,82 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     [dispatch, gridSize, shouldSnapToGrid]
   );
 
-  const handleOnTransform = useCallback(() => {
+  const handleOnTransform = useCallback(
-    /**
+    (_e: KonvaEventObject<Event>) => {
-     * The Konva Transformer changes the object's anchor point and scale factor,
+      /**
-     * not its width and height. We need to un-scale the width and height before
+       * The Konva Transformer changes the object's anchor point and scale factor,
-     * setting the values.
+       * not its width and height. We need to un-scale the width and height before
-     */
+       * setting the values.
-    if (!shapeRef.current) {
+       */
-      return;
+      if (!shapeRef.current) {
-    }
+        return;
+      }
 
-    const rect = shapeRef.current;
+      const rect = shapeRef.current;
 
-    const scaleX = rect.scaleX();
+      const scaleX = rect.scaleX();
-    const scaleY = rect.scaleY();
+      const scaleY = rect.scaleY();
 
-    // undo the scaling
+      // undo the scaling
-    const width = Math.round(rect.width() * scaleX);
+      const width = Math.round(rect.width() * scaleX);
-    const height = Math.round(rect.height() * scaleY);
+      const height = Math.round(rect.height() * scaleY);
 
-    const x = Math.round(rect.x());
+      const x = Math.round(rect.x());
-    const y = Math.round(rect.y());
+      const y = Math.round(rect.y());
+
+      if (aspectRatio.isLocked) {
+        const newDimensions = calculateNewSize(
+          aspectRatio.value,
+          width * height
+        );
+        dispatch(
+          setBoundingBoxDimensions(
+            {
+              width: roundDownToMultipleMin(newDimensions.width, gridSize),
+              height: roundDownToMultipleMin(newDimensions.height, gridSize),
+            },
+            optimalDimension
+          )
+        );
+      } else {
+        dispatch(
+          setBoundingBoxDimensions(
+            {
+              width: roundDownToMultipleMin(width, gridSize),
+              height: roundDownToMultipleMin(height, gridSize),
+            },
+            optimalDimension
+          )
+        );
+        dispatch(
+          aspectRatioChanged({
+            isLocked: false,
+            id: 'Free',
+            value: width / height,
+          })
+        );
+      }
 
-    if (aspectRatio.isLocked) {
-      const newDimensions = calculateNewSize(aspectRatio.value, width * height);
       dispatch(
-        setBoundingBoxDimensions(
+        setBoundingBoxCoordinates({
-          {
+          x: shouldSnapToGrid ? roundDownToMultiple(x, gridSize) : x,
-            width: roundDownToMultipleMin(newDimensions.width, gridSize),
+          y: shouldSnapToGrid ? roundDownToMultiple(y, gridSize) : y,
-            height: roundDownToMultipleMin(newDimensions.height, gridSize),
-          },
-          optimalDimension
-        )
-      );
-    } else {
-      dispatch(
-        setBoundingBoxDimensions(
-          {
-            width: roundDownToMultipleMin(width, gridSize),
-            height: roundDownToMultipleMin(height, gridSize),
-          },
-          optimalDimension
-        )
-      );
-      dispatch(
-        aspectRatioChanged({
-          isLocked: false,
-          id: 'Free',
-          value: width / height,
         })
       );
-    }
 
-    dispatch(
+      // Reset the scale now that the coords/dimensions have been un-scaled
-      setBoundingBoxCoordinates({
+      rect.scaleX(1);
-        x: shouldSnapToGrid ? roundDownToMultiple(x, gridSize) : x,
+      rect.scaleY(1);
-        y: shouldSnapToGrid ? roundDownToMultiple(y, gridSize) : y,
+    },
-      })
+    [
-    );
+      aspectRatio.isLocked,
-
+      aspectRatio.value,
-    // Reset the scale now that the coords/dimensions have been un-scaled
+      dispatch,
-    rect.scaleX(1);
+      shouldSnapToGrid,
-    rect.scaleY(1);
+      gridSize,
-  }, [
+      optimalDimension,
-    aspectRatio.isLocked,
+    ]
-    aspectRatio.value,
+  );
-    dispatch,
-    shouldSnapToGrid,
-    gridSize,
-    optimalDimension,
-  ]);
 
   const anchorDragBoundFunc = useCallback(
     (
@@ -318,6 +324,18 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     stageScale,
   ]);
 
+  const enabledAnchors = useMemo(() => {
+    if (tool !== 'move') {
+      return emptyArray;
+    }
+    if (aspectRatio.isLocked) {
+      // TODO: The math to resize the bbox when locked and using other handles is confusing.
+      // Workaround for now is to only allow resizing from the bottom-right handle.
+      return ['bottom-right'];
+    }
+    return undefined;
+  }, [aspectRatio.isLocked, tool]);
+
   return (
     <Group {...rest}>
       <Rect
@@ -363,7 +381,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
         borderEnabled={true}
         borderStroke="black"
         draggable={false}
-        enabledAnchors={tool === 'move' ? undefined : emptyArray}
+        enabledAnchors={enabledAnchors}
         flipEnabled={false}
         ignoreStroke={true}
         keepRatio={false}