feat(ui): add fit to bbox as transform helper

invokeai/frontend/web/public/locales/en.json

@@ -1781,7 +1781,6 @@
             "bbox": "Bbox",
             "move": "Move",
             "view": "View",
-            "transform": "Transform",
             "colorPicker": "Color Picker"
         },
         "filter": {
@@ -1791,6 +1790,13 @@
             "preview": "Preview",
             "apply": "Apply",
             "cancel": "Cancel"
+        },
+        "transform": {
+            "transform": "Transform",
+            "fitToBbox": "Fit to Bbox",
+            "reset": "Reset",
+            "apply": "Apply",
+            "cancel": "Cancel"
         }
     },
     "upscaling": {

invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx

@@ -8,7 +8,7 @@ import {
 import { useEntityAdapter } from 'features/controlLayers/hooks/useEntityAdapter';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiCheckBold, PiXBold } from 'react-icons/pi';
+import { PiArrowsCounterClockwiseBold, PiArrowsOutBold, PiCheckBold, PiXBold } from 'react-icons/pi';
 
 const TransformBox = memo(() => {
   const { t } = useTranslation();
@@ -30,9 +30,19 @@ const TransformBox = memo(() => {
       transitionDuration="normal"
     >
       <Heading size="md" color="base.300" userSelect="none">
-        {t('controlLayers.tool.transform')}
+        {t('controlLayers.transform.transform')}
       </Heading>
       <ButtonGroup isAttached={false} size="sm" w="full">
+        <Button
+          leftIcon={<PiArrowsOutBold />}
+          onClick={adapter.transformer.fitProxyRectToBbox}
+          isLoading={isProcessing}
+          loadingText={t('controlLayers.transform.reset')}
+          variant="ghost"
+        >
+          {t('controlLayers.transform.fitToBbox')}
+        </Button>
+        <Spacer />
         <Button
           leftIcon={<PiArrowsCounterClockwiseBold />}
           onClick={adapter.transformer.resetTransform}
@@ -40,9 +50,8 @@ const TransformBox = memo(() => {
           loadingText={t('controlLayers.reset')}
           variant="ghost"
         >
-          {t('accessibility.reset')}
+          {t('controlLayers.transform.reset')}
         </Button>
-        <Spacer />
         <Button
           leftIcon={<PiCheckBold />}
           onClick={adapter.transformer.applyTransform}
@@ -50,7 +59,7 @@ const TransformBox = memo(() => {
           loadingText={t('common.apply')}
           variant="ghost"
         >
-          {t('common.apply')}
+          {t('controlLayers.transform.apply')}
         </Button>
         <Button
           leftIcon={<PiXBold />}
@@ -59,7 +68,7 @@ const TransformBox = memo(() => {
           loadingText={t('common.cancel')}
           variant="ghost"
         >
-          {t('common.cancel')}
+          {t('controlLayers.transform.cancel')}
         </Button>
       </ButtonGroup>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsTransform.tsx

@@ -20,7 +20,7 @@ export const CanvasEntityMenuItemsTransform = memo(() => {
 
   return (
     <MenuItem onClick={onClick} icon={<PiFrameCornersBold />} isDisabled={Boolean(transformingEntity)}>
-      {t('controlLayers.tool.transform')}
+      {t('controlLayers.transform.transform')}
     </MenuItem>
   );
 });

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntityTransformer.ts

@@ -348,6 +348,23 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
     this.syncObjectGroupWithProxyRect();
   };
 
+  /**
+   * Fits the proxy rect to the bounding box of the parent entity, then syncs the object group with the proxy rect.
+   */
+  fitProxyRectToBbox = () => {
+    const { rect } = this.manager.stateApi.getBbox();
+    const scaleX = rect.width / this.konva.proxyRect.width();
+    const scaleY = rect.height / this.konva.proxyRect.height();
+    this.konva.proxyRect.setAttrs({
+      x: rect.x,
+      y: rect.y,
+      scaleX,
+      scaleY,
+      rotation: 0,
+    });
+    this.syncObjectGroupWithProxyRect();
+  };
+
   onDragMove = () => {
     // Snap the interaction rect to the nearest pixel
     this.konva.proxyRect.x(Math.round(this.konva.proxyRect.x()));