feat(ui): tool buttons are only disabled when currently selected

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx

@@ -1,10 +1,6 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiBoundingBoxBold } from 'react-icons/pi';
@@ -13,14 +9,8 @@ export const ToolBboxButton = memo(() => {
   const { t } = useTranslation();
   const selectBbox = useSelectTool('bbox');
   const isSelected = useToolIsSelected('bbox');
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const isStaging = useAppSelector(selectIsStaging);
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging;
-  }, [isFiltering, isStaging, isTransforming]);
 
-  useHotkeys('c', selectBbox, { enabled: !isDisabled || isSelected }, [selectBbox, isSelected, isDisabled]);
+  useHotkeys('c', selectBbox, { enabled: !isSelected }, [selectBbox, isSelected]);
 
   return (
     <IconButton
@@ -28,9 +18,9 @@ export const ToolBboxButton = memo(() => {
       tooltip={`${t('controlLayers.tool.bbox')} (C)`}
       icon={<PiBoundingBoxBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectBbox}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx

@@ -1,29 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { selectIsSelectedEntityDrawable } from 'features/controlLayers/store/selectors';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiPaintBrushBold } from 'react-icons/pi';
 
 export const ToolBrushButton = memo(() => {
   const { t } = useTranslation();
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const isStaging = useAppSelector(selectIsStaging);
-  const selectBrush = useSelectTool('brush');
   const isSelected = useToolIsSelected('brush');
-  const isDrawingToolAllowed = useAppSelector(selectIsSelectedEntityDrawable);
+  const selectBrush = useSelectTool('brush');
 
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging || !isDrawingToolAllowed;
-  }, [isDrawingToolAllowed, isFiltering, isStaging, isTransforming]);
-
-  useHotkeys('b', selectBrush, { enabled: !isDisabled || isSelected }, [isDisabled, isSelected, selectBrush]);
+  useHotkeys('b', selectBrush, { enabled: !isSelected }, [isSelected, selectBrush]);
 
   return (
     <IconButton
@@ -31,9 +18,9 @@ export const ToolBrushButton = memo(() => {
       tooltip={`${t('controlLayers.tool.brush')} (B)`}
       icon={<PiPaintBrushBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectBrush}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx

@@ -1,31 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiEyedropperBold } from 'react-icons/pi';
 
 export const ToolColorPickerButton = memo(() => {
   const { t } = useTranslation();
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const selectColorPicker = useSelectTool('colorPicker');
   const isSelected = useToolIsSelected('colorPicker');
-  const isStaging = useAppSelector(selectIsStaging);
+  const selectColorPicker = useSelectTool('colorPicker');
 
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging;
-  }, [isFiltering, isStaging, isTransforming]);
-
-  useHotkeys('i', selectColorPicker, { enabled: !isDisabled || isSelected }, [
-    selectColorPicker,
-    isSelected,
-    isDisabled,
-  ]);
+  useHotkeys('i', selectColorPicker, { enabled: !isSelected }, [selectColorPicker, isSelected]);
 
   return (
     <IconButton
@@ -33,9 +18,9 @@ export const ToolColorPickerButton = memo(() => {
       tooltip={`${t('controlLayers.tool.colorPicker')} (I)`}
       icon={<PiEyedropperBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectColorPicker}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx

@@ -1,28 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { selectIsSelectedEntityDrawable } from 'features/controlLayers/store/selectors';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiEraserBold } from 'react-icons/pi';
 
 export const ToolEraserButton = memo(() => {
   const { t } = useTranslation();
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const isStaging = useAppSelector(selectIsStaging);
-  const selectEraser = useSelectTool('eraser');
   const isSelected = useToolIsSelected('eraser');
-  const isDrawingToolAllowed = useAppSelector(selectIsSelectedEntityDrawable);
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging || !isDrawingToolAllowed;
-  }, [isDrawingToolAllowed, isFiltering, isStaging, isTransforming]);
+  const selectEraser = useSelectTool('eraser');
 
-  useHotkeys('e', selectEraser, { enabled: !isDisabled || isSelected }, [isDisabled, isSelected, selectEraser]);
+  useHotkeys('e', selectEraser, { enabled: !isSelected }, [isSelected, selectEraser]);
 
   return (
     <IconButton
@@ -30,9 +18,9 @@ export const ToolEraserButton = memo(() => {
       tooltip={`${t('controlLayers.tool.eraser')} (E)`}
       icon={<PiEraserBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectEraser}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx

@@ -1,28 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { selectIsSelectedEntityDrawable } from 'features/controlLayers/store/selectors';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiCursorBold } from 'react-icons/pi';
 
 export const ToolMoveButton = memo(() => {
   const { t } = useTranslation();
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const selectMove = useSelectTool('move');
   const isSelected = useToolIsSelected('move');
-  const isStaging = useAppSelector(selectIsStaging);
-  const isDrawingToolAllowed = useAppSelector(selectIsSelectedEntityDrawable);
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging || !isDrawingToolAllowed;
-  }, [isDrawingToolAllowed, isFiltering, isStaging, isTransforming]);
+  const selectMove = useSelectTool('move');
 
-  useHotkeys('v', selectMove, { enabled: !isDisabled || isSelected }, [isDisabled, isSelected, selectMove]);
+  useHotkeys('v', selectMove, { enabled: !isSelected }, [isSelected, selectMove]);
 
   return (
     <IconButton
@@ -30,9 +18,9 @@ export const ToolMoveButton = memo(() => {
       tooltip={`${t('controlLayers.tool.move')} (V)`}
       icon={<PiCursorBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectMove}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx

@@ -1,29 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { selectIsSelectedEntityDrawable } from 'features/controlLayers/store/selectors';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiRectangleBold } from 'react-icons/pi';
 
 export const ToolRectButton = memo(() => {
   const { t } = useTranslation();
-  const selectRect = useSelectTool('rect');
   const isSelected = useToolIsSelected('rect');
-  const isFiltering = useIsFiltering();
-  const isTransforming = useIsTransforming();
-  const isStaging = useAppSelector(selectIsStaging);
-  const isDrawingToolAllowed = useAppSelector(selectIsSelectedEntityDrawable);
+  const selectRect = useSelectTool('rect');
 
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging || !isDrawingToolAllowed;
-  }, [isDrawingToolAllowed, isFiltering, isStaging, isTransforming]);
-
-  useHotkeys('u', selectRect, { enabled: !isDisabled || isSelected }, [isDisabled, isSelected, selectRect]);
+  useHotkeys('u', selectRect, { enabled: !isSelected }, [isSelected, selectRect]);
 
   return (
     <IconButton
@@ -31,9 +18,9 @@ export const ToolRectButton = memo(() => {
       tooltip={`${t('controlLayers.tool.rectangle')} (U)`}
       icon={<PiRectangleBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectRect}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx

@@ -1,26 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useIsFiltering } from 'features/controlLayers/hooks/useIsFiltering';
-import { useIsTransforming } from 'features/controlLayers/hooks/useIsTransforming';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiHandBold } from 'react-icons/pi';
 
 export const ToolViewButton = memo(() => {
   const { t } = useTranslation();
-  const isTransforming = useIsTransforming();
-  const isFiltering = useIsFiltering();
-  const isStaging = useAppSelector(selectIsStaging);
-  const selectView = useSelectTool('view');
   const isSelected = useToolIsSelected('view');
-  const isDisabled = useMemo(() => {
-    return isTransforming || isFiltering || isStaging;
-  }, [isFiltering, isStaging, isTransforming]);
+  const selectView = useSelectTool('view');
 
-  useHotkeys('h', selectView, { enabled: !isDisabled || isSelected }, [selectView, isSelected, isDisabled]);
+  useHotkeys('h', selectView, { enabled: !isSelected }, [selectView, isSelected]);
 
   return (
     <IconButton
@@ -28,9 +18,9 @@ export const ToolViewButton = memo(() => {
       tooltip={`${t('controlLayers.tool.view')} (H)`}
       icon={<PiHandBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
-      variant="outline"
+      variant="solid"
       onClick={selectView}
-      isDisabled={isDisabled}
+      isDisabled={isSelected}
     />
   );
 });