From 70487f0c2e041db00390c434cf9906b581c1cded Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 23 May 2024 07:40:27 +1000 Subject: [PATCH] fix(ui): layers are "enabled", not "visible" --- invokeai/frontend/web/public/locales/en.json | 5 +++-- .../components/CALayer/CALayer.tsx | 4 ++-- .../components/IILayer/IILayer.tsx | 4 ++-- .../components/IPALayer/IPALayer.tsx | 4 ++-- .../LayerCommon/LayerVisibilityToggle.tsx | 18 +++++++++--------- .../components/RGLayer/RGLayer.tsx | 4 ++-- .../controlLayers/hooks/layerStateHooks.ts | 2 +- .../controlLayers/store/controlLayersSlice.ts | 4 ++-- 8 files changed, 23 insertions(+), 22 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 98638f2319..91ab93cc0b 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -147,7 +147,9 @@ "viewing": "Viewing", "viewingDesc": "Review images in a large gallery view", "editing": "Editing", - "editingDesc": "Edit on the Control Layers canvas" + "editingDesc": "Edit on the Control Layers canvas", + "enabled": "Enabled", + "disabled": "Disabled" }, "controlnet": { "controlAdapter_one": "Control Adapter", @@ -1573,7 +1575,6 @@ "controlLayers": "Control Layers", "globalMaskOpacity": "Global Mask Opacity", "autoNegative": "Auto Negative", - "toggleVisibility": "Toggle Layer Visibility", "deletePrompt": "Delete Prompt", "resetRegion": "Reset Region", "debugLayers": "Debug Layers", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx index 36509ec1d3..9e71ad943c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx @@ -4,7 +4,7 @@ import { CALayerControlAdapterWrapper } from 'features/controlLayers/components/ import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; -import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; +import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper'; import { layerSelected, selectCALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useCallback } from 'react'; @@ -26,7 +26,7 @@ export const CALayer = memo(({ layerId }: Props) => { return ( - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx index c6efd041ca..c53c4c7631 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx @@ -5,7 +5,7 @@ import { InitialImagePreview } from 'features/controlLayers/components/IILayer/I import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; -import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; +import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper'; import { iiLayerDenoisingStrengthChanged, @@ -66,7 +66,7 @@ export const IILayer = memo(({ layerId }: Props) => { return ( - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx index 2077700104..e8f60c8d07 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx @@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPALayer/IPALayerIPAdapterWrapper'; import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; -import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; +import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper'; import { layerSelected, selectIPALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useCallback } from 'react'; @@ -22,7 +22,7 @@ export const IPALayer = memo(({ layerId }: Props) => { return ( - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx index d2dab39e36..227d74c35a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx @@ -1,8 +1,8 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { stopPropagation } from 'common/util/stopPropagation'; -import { useLayerIsVisible } from 'features/controlLayers/hooks/layerStateHooks'; -import { layerVisibilityToggled } from 'features/controlLayers/store/controlLayersSlice'; +import { useLayerIsEnabled } from 'features/controlLayers/hooks/layerStateHooks'; +import { layerIsEnabledToggled } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCheckBold } from 'react-icons/pi'; @@ -11,21 +11,21 @@ type Props = { layerId: string; }; -export const LayerVisibilityToggle = memo(({ layerId }: Props) => { +export const LayerIsEnabledToggle = memo(({ layerId }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const isVisible = useLayerIsVisible(layerId); + const isEnabled = useLayerIsEnabled(layerId); const onClick = useCallback(() => { - dispatch(layerVisibilityToggled(layerId)); + dispatch(layerIsEnabledToggled(layerId)); }, [dispatch, layerId]); return ( : undefined} + icon={isEnabled ? : undefined} onClick={onClick} colorScheme="base" onDoubleClick={stopPropagation} // double click expands the layer @@ -33,4 +33,4 @@ export const LayerVisibilityToggle = memo(({ layerId }: Props) => { ); }); -LayerVisibilityToggle.displayName = 'LayerVisibilityToggle'; +LayerIsEnabledToggle.displayName = 'LayerVisibilityToggle'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx index a6bce5316e..cc331017d3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx @@ -6,7 +6,7 @@ import { AddPromptButtons } from 'features/controlLayers/components/AddPromptBut import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; -import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; +import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle'; import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper'; import { isRegionalGuidanceLayer, @@ -55,7 +55,7 @@ export const RGLayer = memo(({ layerId }: Props) => { return ( - + {autoNegative === 'invert' && ( diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts index f2054779d4..21e49ba15e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts @@ -39,7 +39,7 @@ export const useLayerNegativePrompt = (layerId: string) => { return prompt; }; -export const useLayerIsVisible = (layerId: string) => { +export const useLayerIsEnabled = (layerId: string) => { const selectLayer = useMemo( () => createSelector(selectControlLayersSlice, (controlLayers) => { diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts index dbd99c2450..5fa8cc3dfb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts @@ -139,7 +139,7 @@ export const controlLayersSlice = createSlice({ layerSelected: (state, action: PayloadAction) => { exclusivelySelectLayer(state, action.payload); }, - layerVisibilityToggled: (state, action: PayloadAction) => { + layerIsEnabledToggled: (state, action: PayloadAction) => { const layer = state.layers.find((l) => l.id === action.payload); if (layer) { layer.isEnabled = !layer.isEnabled; @@ -791,7 +791,7 @@ class LayerColors { export const { // Any Layer Type layerSelected, - layerVisibilityToggled, + layerIsEnabledToggled, layerTranslated, layerBboxChanged, layerReset,