feat(ui): add crop canvas to bbox

Author: psychedelicious

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

@@ -1836,14 +1836,16 @@
             }
         },
         "canvasContextMenu": {
+            "canvasGroup": "Canvas",
             "saveToGalleryGroup": "Save To Gallery",
             "saveCanvasToGallery": "Save Canvas To Gallery",
             "saveBboxToGallery": "Save Bbox To Gallery",
             "bboxGroup": "Create From Bbox",
             "newGlobalReferenceImage": "New Global Reference Image",
             "newRegionalReferenceImage": "New Regional Reference Image",
             "newControlLayer": "New Control Layer",
-            "newRasterLayer": "New Raster Layer"
+            "newRasterLayer": "New Raster Layer",
+            "cropCanvasToBbox": "Crop Canvas to Bbox"
         },
         "stagingArea": {
             "accept": "Accept",

invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx

@@ -1,4 +1,5 @@
 import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
+import { CanvasContextMenuItemsCropCanvasToBbox } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox';
 import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
 import {
   useNewControlLayerFromBbox,
@@ -25,6 +26,9 @@ export const CanvasContextMenuGlobalMenuItems = memo(() => {
 
   return (
     <>
+      <MenuGroup title={t('controlLayers.canvasContextMenu.canvasGroup')}>
+        <CanvasContextMenuItemsCropCanvasToBbox />
+      </MenuGroup>
       <MenuGroup title={t('controlLayers.canvasContextMenu.saveToGalleryGroup')}>
         <MenuItem icon={<PiFloppyDiskBold />} isDisabled={isBusy} onClick={saveCanvasToGallery}>
           {t('controlLayers.canvasContextMenu.saveCanvasToGallery')}

invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox.tsx

@@ -0,0 +1,26 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCropBold } from 'react-icons/pi';
+
+export const CanvasContextMenuItemsCropCanvasToBbox = memo(() => {
+  const { t } = useTranslation();
+  const isBusy = useCanvasIsBusy();
+  const canvasManager = useCanvasManager();
+  const cropCanvasToBbox = useCallback(async () => {
+    const adapters = canvasManager.getAllAdapters();
+    for (const adapter of adapters) {
+      await adapter.cropToBbox();
+    }
+  }, [canvasManager]);
+
+  return (
+    <MenuItem icon={<PiCropBold />} isDisabled={isBusy} onClick={cropCanvasToBbox}>
+      {t('controlLayers.canvasContextMenu.cropCanvasToBbox')}
+    </MenuItem>
+  );
+});
+
+CanvasContextMenuItemsCropCanvasToBbox.displayName = 'CanvasContextMenuItemsCropCanvasToBbox';