Address comments

Author: hipsterusername

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -1,5 +1,5 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
-import { CanvasNonRasterLayersIsHiddenToggle } from 'features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle';
+import { EntityListNonRasterLayerToggle } from 'features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle';
 import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu';
 import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
 import { EntityListSelectedEntityActionBarFill } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill';
@@ -23,7 +23,7 @@ export const EntityListSelectedEntityActionBar = memo(() => {
         <EntityListSelectedEntityActionBarTransformButton />
         <EntityListSelectedEntityActionBarSaveToAssetsButton />
         <EntityListSelectedEntityActionBarDuplicateButton />
-        <CanvasNonRasterLayersIsHiddenToggle />
+        <EntityListNonRasterLayerToggle />
         <EntityListGlobalActionBarAddLayerMenu />
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx

@@ -4,15 +4,13 @@ import { CanvasAddEntityButtons } from 'features/controlLayers/components/Canvas
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';
 
 import { ParamDenoisingStrength } from './ParamDenoisingStrength';
 
 export const CanvasLayersPanel = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
-  useCanvasToggleNonRasterLayersHotkey();
 
   return (
     <CanvasManagerProviderGate>

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -13,6 +13,7 @@ import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanv
 import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey';
 import { useCanvasFilterHotkey } from 'features/controlLayers/hooks/useCanvasFilterHotkey';
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
+import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { useCanvasTransformHotkey } from 'features/controlLayers/hooks/useCanvasTransformHotkey';
 import { useCanvasUndoRedoHotkeys } from 'features/controlLayers/hooks/useCanvasUndoRedoHotkeys';
 import { useNextPrevEntityHotkeys } from 'features/controlLayers/hooks/useNextPrevEntity';
@@ -26,6 +27,7 @@ export const CanvasToolbar = memo(() => {
   useNextPrevEntityHotkeys();
   useCanvasTransformHotkey();
   useCanvasFilterHotkey();
+  useCanvasToggleNonRasterLayersHotkey();
 
   return (
     <Flex w="full" gap={2} alignItems="center" px={2}>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle.tsx

@@ -7,7 +7,7 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold, PiEyeClosedBold } from 'react-icons/pi';
 
-export const CanvasNonRasterLayersIsHiddenToggle = memo(() => {
+export const EntityListNonRasterLayerToggle = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isHidden = useNonRasterLayersIsHidden();
@@ -33,4 +33,4 @@ export const CanvasNonRasterLayersIsHiddenToggle = memo(() => {
   );
 });
 
-CanvasNonRasterLayersIsHiddenToggle.displayName = 'CanvasNonRasterLayersIsHiddenToggle';
+EntityListNonRasterLayerToggle.displayName = 'EntityListNonRasterLayerToggle'; 

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey.ts

@@ -16,4 +16,4 @@ export const useCanvasToggleNonRasterLayersHotkey = () => {
     callback: handleToggleNonRasterLayers,
     dependencies: [handleToggleNonRasterLayers],
   });
-};
+}; 

invokeai/frontend/web/src/features/controlLayers/hooks/useNonRasterLayersIsHidden.ts

@@ -1,21 +1,6 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { useMemo } from 'react';
+import { selectNonRasterLayersIsHidden } from 'features/controlLayers/store/selectors';
 
 export const useNonRasterLayersIsHidden = (): boolean => {
-  const selectNonRasterLayersIsHidden = useMemo(
-    () =>
-      createSelector(selectCanvasSlice, (canvas) => {
-        // Check if all non-raster layer categories are hidden
-        return (
-          canvas.controlLayers.isHidden &&
-          canvas.inpaintMasks.isHidden &&
-          canvas.regionalGuidance.isHidden
-        );
-      }),
-    []
-  );
-  const isHidden = useAppSelector(selectNonRasterLayersIsHidden);
-  return isHidden;
+  return useAppSelector(selectNonRasterLayersIsHidden);
 };

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

@@ -1540,20 +1540,16 @@ export const canvasSlice = createSlice({
       }
     },
     allNonRasterLayersIsHiddenToggled: (state) => {
-      // Toggle visibility for all non-raster layer categories
-      // Check if any non-raster layers are currently visible
       const hasVisibleNonRasterLayers = 
         !state.controlLayers.isHidden ||
         !state.inpaintMasks.isHidden ||
         !state.regionalGuidance.isHidden;
 
-      // If any are visible, hide all; if all are hidden, show all
       const shouldHide = hasVisibleNonRasterLayers;
 
       state.controlLayers.isHidden = shouldHide;
       state.inpaintMasks.isHidden = shouldHide;
       state.regionalGuidance.isHidden = shouldHide;
-      // Note: reference_image doesn't have isHidden property, so it's not included
     },
     allEntitiesDeleted: (state) => {
       // Deleting all entities is equivalent to resetting the state for each entity type

invokeai/frontend/web/src/features/controlLayers/store/selectors.ts

@@ -406,3 +406,11 @@ export const selectIsCanvasEmpty = createCanvasSelector(
     );
   }
 );
+
+/**
+ * Selects whether all non-raster layer categories (control layers, inpaint masks, regional guidance) are hidden.
+ * This is used to determine the state of the toggle button that shows/hides all non-raster layers.
+ */
+export const selectNonRasterLayersIsHidden = createSelector(selectCanvasSlice, (canvas) => {
+  return canvas.controlLayers.isHidden && canvas.inpaintMasks.isHidden && canvas.regionalGuidance.isHidden;
+});