Add Toggle for showing Bounding Box, fix Main Model info popover, fix Control Model description on hover

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

@@ -1424,6 +1424,7 @@
         "eraseBoundingBox": "Erase Bounding Box",
         "eraser": "Eraser",
         "fillBoundingBox": "Fill Bounding Box",
+        "hideBoundingBox": "Hide Bounding Box",
         "initialFitImageSize": "Fit Image Size on Drop",
         "invertBrushSizeScrollDirection": "Invert Scroll for Brush Size",
         "layer": "Layer",
@@ -1441,6 +1442,7 @@
         "saveMask": "Save $t(unifiedCanvas.mask)",
         "saveToGallery": "Save To Gallery",
         "scaledBoundingBox": "Scaled Bounding Box",
+        "showBoundingBox": "Show Bounding Box",
         "showCanvasDebugInfo": "Show Additional Canvas Info",
         "showGrid": "Show Grid",
         "showResultsOn": "Show Results (On)",

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

@@ -13,7 +13,13 @@ import {
 } from 'features/canvas/store/actions';
 import { $canvasBaseLayer, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { resetCanvas, resetCanvasView, setIsMaskEnabled, setLayer } from 'features/canvas/store/canvasSlice';
+import {
+  resetCanvas,
+  resetCanvasView,
+  setIsMaskEnabled,
+  setLayer,
+  setShouldShowBoundingBox,
+} from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
 import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
 import { memo, useCallback, useMemo } from 'react';
@@ -23,6 +29,8 @@ import {
   PiCopyBold,
   PiCrosshairSimpleBold,
   PiDownloadSimpleBold,
+  PiEyeBold,
+  PiEyeSlashBold,
   PiFloppyDiskBold,
   PiHandGrabbingBold,
   PiStackBold,
@@ -44,6 +52,7 @@ const IAICanvasToolbar = () => {
   const isStaging = useAppSelector(isStagingSelector);
   const { t } = useTranslation();
   const { isClipboardAPIAvailable } = useCopyImageToClipboard();
+  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
 
   const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
     postUploadAction: { type: 'SET_CANVAS_INITIAL_IMAGE' },
@@ -61,6 +70,18 @@ const IAICanvasToolbar = () => {
     []
   );
 
+  useHotkeys(
+    'shift+h',
+    () => {
+      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+    },
+    {
+      enabled: () => !isStaging,
+      preventDefault: true,
+    },
+    [shouldShowBoundingBox]
+  );
+
   useHotkeys(
     ['r'],
     () => {
@@ -125,6 +146,10 @@ const IAICanvasToolbar = () => {
     $tool.set('move');
   }, []);
 
+  const handleSetShouldShowBoundingBox = useCallback(() => {
+    dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
+  }, [dispatch, shouldShowBoundingBox]);
+
   const handleResetCanvasView = useCallback(
     (shouldScaleTo1 = false) => {
       const canvasBaseLayer = $canvasBaseLayer.get();
@@ -212,6 +237,13 @@ const IAICanvasToolbar = () => {
           isChecked={tool === 'move' || isStaging}
           onClick={handleSelectMoveTool}
         />
+        <IconButton
+          aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
+          onClick={handleSetShouldShowBoundingBox}
+          isDisabled={isStaging}
+        />
         <IconButton
           aria-label={`${t('unifiedCanvas.resetView')} (R)`}
           tooltip={`${t('unifiedCanvas.resetView')} (R)`}

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -7,12 +7,7 @@ import {
   resetToolInteractionState,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  clearMask,
-  setIsMaskEnabled,
-  setShouldShowBoundingBox,
-  setShouldSnapToGrid,
-} from 'features/canvas/store/canvasSlice';
+import { clearMask, setIsMaskEnabled, setShouldSnapToGrid } from 'features/canvas/store/canvasSlice';
 import { isInteractiveTarget } from 'features/canvas/util/isInteractiveTarget';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
@@ -21,7 +16,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 const useInpaintingCanvasHotkeys = () => {
   const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const shouldShowBoundingBox = useAppSelector((s) => s.canvas.shouldShowBoundingBox);
   const isStaging = useAppSelector(isStagingSelector);
   const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
   const shouldSnapToGrid = useAppSelector((s) => s.canvas.shouldSnapToGrid);
@@ -79,18 +73,6 @@ const useInpaintingCanvasHotkeys = () => {
     }
   );
 
-  useHotkeys(
-    'shift+h',
-    () => {
-      dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
-    },
-    {
-      enabled: () => !isStaging,
-      preventDefault: true,
-    },
-    [activeTabName, shouldShowBoundingBox]
-  );
-
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.repeat || e.key !== ' ' || isInteractiveTarget(e.target) || activeTabName !== 'unifiedCanvas') {

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -103,7 +103,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
 
   return (
     <Flex sx={{ gap: 2 }}>
-      <Tooltip label={value?.description}>
+      <Tooltip label={selectedModel?.description}>
         <FormControl
           isDisabled={!isEnabled}
           isInvalid={!value || mainModel?.base !== modelConfig?.base}

invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx

@@ -1,4 +1,4 @@
-import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
@@ -46,20 +46,22 @@ const ParamMainModelSelect = () => {
   });
 
   return (
-    <Tooltip label={tooltipLabel}>
-      <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
-        <InformationalPopover feature="paramModel">
-          <FormLabel>{t('modelManager.model')}</FormLabel>
-        </InformationalPopover>
-        <Combobox
-          value={value}
-          placeholder={placeholder}
-          options={options}
-          onChange={onChange}
-          noOptionsMessage={noOptionsMessage}
-        />
-      </FormControl>
-    </Tooltip>
+    <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
+      <InformationalPopover feature="paramModel">
+        <FormLabel>{t('modelManager.model')}</FormLabel>
+      </InformationalPopover>
+      <Tooltip label={tooltipLabel}>
+        <Box w="full">
+          <Combobox
+            value={value}
+            placeholder={placeholder}
+            options={options}
+            onChange={onChange}
+            noOptionsMessage={noOptionsMessage}
+          />
+        </Box>
+      </Tooltip>
+    </FormControl>
   );
 };