ui: misc fixes (#3525)

[fix(ui): blur tab on
click](93f3658a4a)

Fixes issue where after clicking a tab, using the arrow keys changes tab
instead of changing selected image

[fix(ui): fix canvas not filling screen on first
load](68be95acbb)

[feat(ui): remove clear temp folder canvas
button](813f79f0f9)

This button is nonfunctional.

Soon we will introduce a different way to handle clearing out
intermediate images (likely automated).

invokeai/frontend/web/src/app/components/App.tsx

@@ -22,6 +22,7 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
 import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
+import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 
 const DEFAULT_CONFIG = {};
 
@@ -66,10 +67,17 @@ const App = ({
       setIsReady(true);
     }
 
+    if (isApplicationReady) {
+      // TODO: This is a jank fix for canvas not filling the screen on first load
+      setTimeout(() => {
+        dispatch(requestCanvasRescale());
+      }, 200);
+    }
+
     return () => {
       setIsReady && setIsReady(false);
     };
-  }, [isApplicationReady, setIsReady]);
+  }, [dispatch, isApplicationReady, setIsReady]);
 
   return (
     <>

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

@@ -16,7 +16,6 @@ import {
   setShouldShowIntermediates,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
 import { isEqual } from 'lodash-es';
 
 import { ChangeEvent } from 'react';
@@ -159,7 +158,6 @@ const IAICanvasSettingsButtonPopover = () => {
           onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
         />
         <ClearCanvasHistoryButtonModal />
-        <EmptyTempFolderButtonModal />
       </Flex>
     </IAIPopover>
   );

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -30,7 +30,10 @@ import {
 } from './canvasTypes';
 import { ImageDTO } from 'services/api';
 import { sessionCanceled } from 'services/thunks/session';
-import { setShouldUseCanvasBetaLayout } from 'features/ui/store/uiSlice';
+import {
+  setActiveTab,
+  setShouldUseCanvasBetaLayout,
+} from 'features/ui/store/uiSlice';
 import { imageUrlsReceived } from 'services/thunks/image';
 
 export const initialLayerState: CanvasLayerState = {
@@ -857,6 +860,11 @@ export const canvasSlice = createSlice({
     builder.addCase(setShouldUseCanvasBetaLayout, (state, action) => {
       state.doesCanvasNeedScaling = true;
     });
+
+    builder.addCase(setActiveTab, (state, action) => {
+      state.doesCanvasNeedScaling = true;
+    });
+
     builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
       const { image_name, image_origin, image_url, thumbnail_url } =
         action.payload;

invokeai/frontend/web/src/features/system/components/ClearTempFolderButtonModal.tsx

@@ -1,41 +0,0 @@
-// import { emptyTempFolder } from 'app/socketio/actions';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIAlertDialog from 'common/components/IAIAlertDialog';
-import IAIButton from 'common/components/IAIButton';
-import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
-  clearCanvasHistory,
-  resetCanvas,
-} from 'features/canvas/store/canvasSlice';
-import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
-
-const EmptyTempFolderButtonModal = () => {
-  const isStaging = useAppSelector(isStagingSelector);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-
-  const acceptCallback = () => {
-    dispatch(emptyTempFolder());
-    dispatch(resetCanvas());
-    dispatch(clearCanvasHistory());
-  };
-
-  return (
-    <IAIAlertDialog
-      title={t('unifiedCanvas.emptyTempImageFolder')}
-      acceptCallback={acceptCallback}
-      acceptButtonText={t('unifiedCanvas.emptyFolder')}
-      triggerComponent={
-        <IAIButton leftIcon={<FaTrash />} size="sm" isDisabled={isStaging}>
-          {t('unifiedCanvas.emptyTempImageFolder')}
-        </IAIButton>
-      }
-    >
-      <p>{t('unifiedCanvas.emptyTempImagesFolderMessage')}</p>
-      <br />
-      <p>{t('unifiedCanvas.emptyTempImagesFolderConfirm')}</p>
-    </IAIAlertDialog>
-  );
-};
-export default EmptyTempFolderButtonModal;

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -14,7 +14,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
-import { memo, ReactNode, useCallback, useMemo } from 'react';
+import { memo, MouseEvent, ReactNode, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdDeviceHub, MdGridOn } from 'react-icons/md';
 import { GoTextSize } from 'react-icons/go';
@@ -47,22 +47,22 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
   {
     id: 'txt2img',
-    icon: <Icon as={GoTextSize} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={GoTextSize} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <TextToImageTab />,
   },
   {
     id: 'img2img',
-    icon: <Icon as={FaImage} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ImageTab />,
   },
   {
     id: 'unifiedCanvas',
-    icon: <Icon as={MdGridOn} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <UnifiedCanvasTab />,
   },
   {
     id: 'nodes',
-    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <NodesTab />,
   },
 ];
@@ -119,6 +119,12 @@ const InvokeTabs = () => {
     }
   }, [dispatch, activeTabName]);
 
+  const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
+    if (e.target instanceof HTMLElement) {
+      e.target.blur();
+    }
+  }, []);
+
   const tabs = useMemo(
     () =>
       enabledTabs.map((tab) => (
@@ -128,7 +134,7 @@ const InvokeTabs = () => {
           label={String(t(`common.${tab.id}` as ResourceKey))}
           placement="end"
         >
-          <Tab>
+          <Tab onClick={handleClickTab}>
             <VisuallyHidden>
               {String(t(`common.${tab.id}` as ResourceKey))}
             </VisuallyHidden>
@@ -136,7 +142,7 @@ const InvokeTabs = () => {
           </Tab>
         </Tooltip>
       )),
-    [t, enabledTabs]
+    [enabledTabs, t, handleClickTab]
   );
 
   const tabPanels = useMemo(

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx

@@ -12,7 +12,6 @@ import {
   setShouldShowCanvasDebugInfo,
   setShouldShowIntermediates,
 } from 'features/canvas/store/canvasSlice';
-import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
 
 import { FaWrench } from 'react-icons/fa';
 
@@ -105,7 +104,6 @@ const UnifiedCanvasSettings = () => {
           onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
         />
         <ClearCanvasHistoryButtonModal />
-        <EmptyTempFolderButtonModal />
       </Flex>
     </IAIPopover>
   );

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx

@@ -55,8 +55,6 @@ const UnifiedCanvasContent = () => {
   });
 
   useLayoutEffect(() => {
-    dispatch(requestCanvasRescale());
-
     const resizeCallback = () => {
       dispatch(requestCanvasRescale());
     };