From a1647e4c6efb01b14cffa11026d28a0023adaf2d Mon Sep 17 00:00:00 2001 From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com> Date: Tue, 24 Jun 2025 10:31:42 -0400 Subject: [PATCH] Address comments --- .../EntityListSelectedEntityActionBar.tsx | 4 ++-- .../components/CanvasLayersPanelContent.tsx | 2 -- .../components/Toolbar/CanvasToolbar.tsx | 2 ++ .../CanvasNonRasterLayersIsHiddenToggle.tsx | 4 ++-- .../useCanvasToggleNonRasterLayersHotkey.ts | 2 +- .../hooks/useNonRasterLayersIsHidden.ts | 19 ++----------------- .../controlLayers/store/canvasSlice.ts | 4 ---- .../features/controlLayers/store/selectors.ts | 8 ++++++++ 8 files changed, 17 insertions(+), 28 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx index 5af3b1c40b..fb004b5916 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx +++ b/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(() => { - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx index 3425f149b9..49ae65205b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx @@ -4,7 +4,6 @@ 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'; @@ -12,7 +11,6 @@ import { ParamDenoisingStrength } from './ParamDenoisingStrength'; export const CanvasLayersPanel = memo(() => { const hasEntities = useAppSelector(selectHasEntities); - useCanvasToggleNonRasterLayersHotkey(); return ( diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx index 077b9ff187..453d13b3c5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle.tsx index cb53fb2e9b..e95903e167 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasNonRasterLayersIsHiddenToggle.tsx +++ b/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'; \ No newline at end of file +EntityListNonRasterLayerToggle.displayName = 'EntityListNonRasterLayerToggle'; \ No newline at end of file diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey.ts index e43241457e..e2a0291afe 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey.ts @@ -16,4 +16,4 @@ export const useCanvasToggleNonRasterLayersHotkey = () => { callback: handleToggleNonRasterLayers, dependencies: [handleToggleNonRasterLayers], }); -}; \ No newline at end of file +}; \ No newline at end of file diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useNonRasterLayersIsHidden.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useNonRasterLayersIsHidden.ts index 027720dd46..71dcc654a5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useNonRasterLayersIsHidden.ts +++ b/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); }; \ No newline at end of file diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts index b7f7a6cf2a..33f4d93a0b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts +++ b/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 diff --git a/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts b/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts index 4e52436c6f..39920f0c90 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/selectors.ts +++ b/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; +});