Adds bbox to ref image button

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx

@@ -2,8 +2,14 @@ import { Button, Collapse, Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { RefImagePreview } from 'features/controlLayers/components/RefImage/RefImagePreview';
+import {
+  CanvasManagerProviderGate,
+  useCanvasManagerSafe,
+} from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { RefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
+import { useNewGlobalReferenceImageFromBbox } from 'features/controlLayers/hooks/saveCanvasHooks';
+import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import {
   refImageAdded,
   selectIsRefImagePanelOpen,
@@ -13,8 +19,10 @@ import {
 import { imageDTOToImageWithDims } from 'features/controlLayers/store/util';
 import { addGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useMemo } from 'react';
-import { PiUploadBold } from 'react-icons/pi';
+import { useTranslation } from 'react-i18next';
+import { PiBoundingBoxBold, PiUploadBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
 
 import { RefImageHeader } from './RefImageHeader';
@@ -77,7 +85,11 @@ const MaxRefImages = memo(() => {
 MaxRefImages.displayName = 'MaxRefImages';
 
 const AddRefImageDropTargetAndButton = memo(() => {
+  const { t } = useTranslation();
   const { dispatch, getState } = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const canvasManager = useCanvasManagerSafe();
+  const isBusy = useCanvasIsBusySafe();
 
   const uploadOptions = useMemo(
     () =>
@@ -95,7 +107,7 @@ const AddRefImageDropTargetAndButton = memo(() => {
   const uploadApi = useImageUploadButton(uploadOptions);
 
   return (
-    <>
+    <Flex gap={1} h="full" w="full">
       <Button
         position="relative"
         size="sm"
@@ -112,7 +124,37 @@ const AddRefImageDropTargetAndButton = memo(() => {
         <input {...uploadApi.getUploadInputProps()} />
         <DndDropTarget label="Drop" dndTarget={addGlobalReferenceImageDndTarget} dndTargetData={dndTargetData} />
       </Button>
-    </>
+      {tab === 'canvas' && canvasManager && (
+        <CanvasManagerProviderGate>
+          <BboxButton />
+        </CanvasManagerProviderGate>
+      )}
+    </Flex>
+  );
+});
+
+const BboxButton = memo(() => {
+  const { t } = useTranslation();
+  const isBusy = useCanvasIsBusySafe();
+  const newGlobalReferenceImageFromBbox = useNewGlobalReferenceImageFromBbox();
+
+  return (
+    <Button
+      size="sm"
+      variant="ghost"
+      h="full"
+      minW="auto"
+      px={2}
+      borderWidth="2px !important"
+      borderStyle="solid !important"
+      borderRadius="base"
+      onClick={newGlobalReferenceImageFromBbox}
+      isDisabled={isBusy}
+      aria-label={t('controlLayers.pullBboxIntoReferenceImage')}
+      tooltip={t('controlLayers.pullBboxIntoReferenceImage')}
+    >
+      <PiBoundingBoxBold />
+    </Button>
   );
 });
 AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';