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,7 +144,8 @@ 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
@@ -167,7 +168,10 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       const y = Math.round(rect.y());
 
       if (aspectRatio.isLocked) {
-      const newDimensions = calculateNewSize(aspectRatio.value, width * height);
+        const newDimensions = calculateNewSize(
+          aspectRatio.value,
+          width * height
+        );
         dispatch(
           setBoundingBoxDimensions(
             {
@@ -206,14 +210,16 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       // Reset the scale now that the coords/dimensions have been un-scaled
       rect.scaleX(1);
       rect.scaleY(1);
-  }, [
+    },
+    [
       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}