feat(ui): filter, select object and transform UI buttons

psychedelicious · hipsterusername · commit b7510ce70911 · 2024-10-25T22:27:00.000-04:00
- Restore dedicated `Apply` buttons
- Remove icons from the buttons, too much noise when the words are short and clear
- Update loading state to show a spinner next to the `Process` button instead of on _every_ button
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -1894,6 +1894,7 @@
             "include": "Include",
             "exclude": "Exclude",
             "neutral": "Neutral",
+            "apply": "Apply",
             "reset": "Reset",
             "saveAs": "Save As",
             "cancel": "Cancel",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx
@@ -8,6 +8,7 @@ import {
   MenuItem,
   MenuList,
   Spacer,
+  Spinner,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -25,7 +26,7 @@ import { IMAGE_FILTERS } from 'features/controlLayers/store/filters';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiFloppyDiskBold, PiPlayFill, PiXBold } from 'react-icons/pi';
+import { PiCaretDownBold } from 'react-icons/pi';
 
 const FilterContent = memo(
   ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
@@ -115,39 +116,41 @@ const FilterContent = memo(
         <ButtonGroup isAttached={false} size="sm" w="full">
           <Button
             variant="ghost"
-            leftIcon={<PiPlayFill />}
             onClick={adapter.filterer.processImmediate}
-            isLoading={isProcessing}
             loadingText={t('controlLayers.filter.process')}
-            isDisabled={!isValid || autoProcess}
+            isDisabled={isProcessing || !isValid || autoProcess}
           >
             {t('controlLayers.filter.process')}
+            {isProcessing && <Spinner ms={3} boxSize={5} color="base.600" />}
           </Button>
           <Spacer />
           <Button
-            leftIcon={<PiArrowsCounterClockwiseBold />}
             onClick={adapter.filterer.reset}
-            isLoading={isProcessing}
+            isDisabled={isProcessing}
             loadingText={t('controlLayers.filter.reset')}
             variant="ghost"
           >
             {t('controlLayers.filter.reset')}
           </Button>
+          <Button
+            onClick={adapter.filterer.apply}
+            loadingText={t('controlLayers.filter.apply')}
+            variant="ghost"
+            isDisabled={isProcessing || !isValid || !hasProcessed}
+          >
+            {t('controlLayers.filter.apply')}
+          </Button>
           <Menu>
             <MenuButton
               as={Button}
-              leftIcon={<PiFloppyDiskBold />}
-              isLoading={isProcessing}
               loadingText={t('controlLayers.selectObject.saveAs')}
               variant="ghost"
-              isDisabled={!isValid || !hasProcessed}
+              isDisabled={isProcessing || !isValid || !hasProcessed}
+              rightIcon={<PiCaretDownBold />}
             >
               {t('controlLayers.selectObject.saveAs')}
             </MenuButton>
             <MenuList>
-              <MenuItem isDisabled={!isValid || !hasProcessed} onClick={adapter.filterer.apply}>
-                {t('controlLayers.replaceCurrent')}
-              </MenuItem>
               <MenuItem isDisabled={!isValid || !hasProcessed} onClick={saveAsInpaintMask}>
                 {t('controlLayers.newInpaintMask')}
               </MenuItem>
@@ -162,12 +165,7 @@ const FilterContent = memo(
               </MenuItem>
             </MenuList>
           </Menu>
-          <Button
-            variant="ghost"
-            leftIcon={<PiXBold />}
-            onClick={adapter.filterer.cancel}
-            loadingText={t('controlLayers.filter.cancel')}
-          >
+          <Button variant="ghost" onClick={adapter.filterer.cancel} loadingText={t('controlLayers.filter.cancel')}>
             {t('controlLayers.filter.cancel')}
           </Button>
         </ButtonGroup>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObject.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SelectObject/SelectObject.tsx
@@ -10,6 +10,7 @@ import {
   MenuItem,
   MenuList,
   Spacer,
+  Spinner,
   Text,
   Tooltip,
   UnorderedList,
@@ -29,7 +30,7 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
 import type { PropsWithChildren } from 'react';
 import { memo, useCallback, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiFloppyDiskBold, PiInfoBold, PiPlayFill, PiXBold } from 'react-icons/pi';
+import { PiCaretDownBold, PiInfoBold } from 'react-icons/pi';
 
 const SelectObjectContent = memo(
   ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
@@ -42,10 +43,6 @@ const SelectObjectContent = memo(
     const hasImageState = useStore(adapter.segmentAnything.$hasImageState);
     const autoProcess = useAppSelector(selectAutoProcess);
 
-    const replaceCurrent = useCallback(() => {
-      adapter.segmentAnything.apply();
-    }, [adapter.segmentAnything]);
-
     const saveAsInpaintMask = useCallback(() => {
       adapter.segmentAnything.saveAs('inpaint_mask');
     }, [adapter.segmentAnything]);
@@ -115,58 +112,59 @@ const SelectObjectContent = memo(
 
         <ButtonGroup isAttached={false} size="sm" w="full">
           <Button
-            leftIcon={<PiPlayFill />}
             onClick={adapter.segmentAnything.processImmediate}
-            isLoading={isProcessing}
             loadingText={t('controlLayers.selectObject.process')}
             variant="ghost"
-            isDisabled={!hasPoints || autoProcess}
+            isDisabled={isProcessing || !hasPoints || autoProcess}
           >
             {t('controlLayers.selectObject.process')}
+            {isProcessing && <Spinner ms={3} boxSize={5} color="base.600" />}
           </Button>
           <Spacer />
           <Button
-            leftIcon={<PiArrowsCounterClockwiseBold />}
             onClick={adapter.segmentAnything.reset}
-            isLoading={isProcessing}
+            isDisabled={isProcessing || !hasPoints}
             loadingText={t('controlLayers.selectObject.reset')}
             variant="ghost"
           >
             {t('controlLayers.selectObject.reset')}
           </Button>
+          <Button
+            onClick={adapter.segmentAnything.apply}
+            loadingText={t('controlLayers.selectObject.apply')}
+            variant="ghost"
+            isDisabled={isProcessing || !hasImageState}
+          >
+            {t('controlLayers.selectObject.apply')}
+          </Button>
           <Menu>
             <MenuButton
               as={Button}
-              leftIcon={<PiFloppyDiskBold />}
-              isLoading={isProcessing}
               loadingText={t('controlLayers.selectObject.saveAs')}
               variant="ghost"
-              isDisabled={!hasImageState}
+              isDisabled={isProcessing || !hasImageState}
+              rightIcon={<PiCaretDownBold />}
             >
               {t('controlLayers.selectObject.saveAs')}
             </MenuButton>
             <MenuList>
-              <MenuItem isDisabled={!hasImageState} onClick={replaceCurrent}>
-                {t('controlLayers.replaceCurrent')}
-              </MenuItem>
-              <MenuItem isDisabled={!hasImageState} onClick={saveAsInpaintMask}>
+              <MenuItem isDisabled={isProcessing || !hasImageState} onClick={saveAsInpaintMask}>
                 {t('controlLayers.newInpaintMask')}
               </MenuItem>
-              <MenuItem isDisabled={!hasImageState} onClick={saveAsRegionalGuidance}>
+              <MenuItem isDisabled={isProcessing || !hasImageState} onClick={saveAsRegionalGuidance}>
                 {t('controlLayers.newRegionalGuidance')}
               </MenuItem>
-              <MenuItem isDisabled={!hasImageState} onClick={saveAsControlLayer}>
+              <MenuItem isDisabled={isProcessing || !hasImageState} onClick={saveAsControlLayer}>
                 {t('controlLayers.newControlLayer')}
               </MenuItem>
-              <MenuItem isDisabled={!hasImageState} onClick={saveAsRasterLayer}>
+              <MenuItem isDisabled={isProcessing || !hasImageState} onClick={saveAsRasterLayer}>
                 {t('controlLayers.newRasterLayer')}
               </MenuItem>
             </MenuList>
           </Menu>
           <Button
-            leftIcon={<PiXBold />}
             onClick={adapter.segmentAnything.cancel}
-            isLoading={isProcessing}
+            isDisabled={isProcessing}
             loadingText={t('common.cancel')}
             variant="ghost"
           >
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, Heading, Spacer, Spinner } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { CanvasOperationIsolatedLayerPreviewSwitch } from 'features/controlLayers/components/CanvasOperationIsolatedLayerPreviewSwitch';
@@ -8,7 +8,6 @@ import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEnt
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiCheckBold, PiXBold } from 'react-icons/pi';
 
 const TransformContent = memo(({ adapter }: { adapter: CanvasEntityAdapter }) => {
   const { t } = useTranslation();
@@ -62,30 +61,28 @@ const TransformContent = memo(({ adapter }: { adapter: CanvasEntityAdapter }) =>
 
       <TransformFitToBboxButtons adapter={adapter} />
 
-      <ButtonGroup isAttached={false} size="sm" w="full">
+      <ButtonGroup isAttached={false} size="sm" w="full" alignItems="center">
+        {isProcessing && <Spinner ms={3} boxSize={5} color="base.600" />}
         <Spacer />
         <Button
-          leftIcon={<PiArrowsCounterClockwiseBold />}
           onClick={adapter.transformer.resetTransform}
-          isLoading={isProcessing}
+          isDisabled={isProcessing}
           loadingText={t('controlLayers.transform.reset')}
           variant="ghost"
         >
           {t('controlLayers.transform.reset')}
         </Button>
         <Button
-          leftIcon={<PiCheckBold />}
           onClick={adapter.transformer.applyTransform}
-          isLoading={isProcessing}
+          isDisabled={isProcessing}
           loadingText={t('controlLayers.transform.apply')}
           variant="ghost"
         >
           {t('controlLayers.transform.apply')}
         </Button>
         <Button
-          leftIcon={<PiXBold />}
           onClick={adapter.transformer.stopTransform}
-          isLoading={isProcessing}
+          isDisabled={isProcessing}
           loadingText={t('common.cancel')}
           variant="ghost"
         >
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformFitToBboxButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformFitToBboxButtons.tsx
@@ -4,7 +4,6 @@ import { useStore } from '@nanostores/react';
 import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowsOutBold } from 'react-icons/pi';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 import { z } from 'zod';
@@ -60,10 +59,9 @@ export const TransformFitToBboxButtons = memo(({ adapter }: { adapter: CanvasEnt
         <Combobox options={options} value={value} onChange={onChange} isSearchable={false} isClearable={false} />
       </FormControl>
       <Button
-        leftIcon={<PiArrowsOutBold />}
         size="sm"
         onClick={onClick}
-        isLoading={isProcessing}
+        isDisabled={isProcessing}
         loadingText={t('controlLayers.transform.fitToBbox')}
         variant="ghost"
       >
