Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): layers are "enabled", not "visible"

Browse Source
This commit is contained in:
psychedelicious 2024-05-23 07:40:27 +10:00
parent 55d7d9cc75
commit 70487f0c2e
8 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/public/locales/en.json
View File

@ -147,7 +147,9 @@
"viewing": "Viewing", "viewing": "Viewing",
"viewingDesc": "Review images in a large gallery view", "viewingDesc": "Review images in a large gallery view",
"editing": "Editing", "editing": "Editing",
"editingDesc": "Edit on the Control Layers canvas" "editingDesc": "Edit on the Control Layers canvas",
"enabled": "Enabled",
"disabled": "Disabled"
}, },
"controlnet": { "controlnet": {
"controlAdapter_one": "Control Adapter", "controlAdapter_one": "Control Adapter",
@ -1573,7 +1575,6 @@
"controlLayers": "Control Layers", "controlLayers": "Control Layers",
"globalMaskOpacity": "Global Mask Opacity", "globalMaskOpacity": "Global Mask Opacity",
"autoNegative": "Auto Negative", "autoNegative": "Auto Negative",
"toggleVisibility": "Toggle Layer Visibility",
"deletePrompt": "Delete Prompt", "deletePrompt": "Delete Prompt",
"resetRegion": "Reset Region", "resetRegion": "Reset Region",
"debugLayers": "Debug Layers", "debugLayers": "Debug Layers",

4
invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
View File

@ -4,7 +4,7 @@ import { CALayerControlAdapterWrapper } from 'features/controlLayers/components/
import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; 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 { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
import { layerSelected, selectCALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice'; import { layerSelected, selectCALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -26,7 +26,7 @@ export const CALayer = memo(({ layerId }: Props) => {
return ( return (
<LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}> <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
<Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}> <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
<LayerVisibilityToggle layerId={layerId} /> <LayerIsEnabledToggle layerId={layerId} />
<LayerTitle type="control_adapter_layer" /> <LayerTitle type="control_adapter_layer" />
<Spacer /> <Spacer />
<CALayerOpacity layerId={layerId} /> <CALayerOpacity layerId={layerId} />

4
invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx
View File

@ -5,7 +5,7 @@ import { InitialImagePreview } from 'features/controlLayers/components/IILayer/I
import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; 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 { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
import { import {
iiLayerDenoisingStrengthChanged, iiLayerDenoisingStrengthChanged,
@ -66,7 +66,7 @@ export const IILayer = memo(({ layerId }: Props) => {
return ( return (
<LayerWrapper onClick={onClick} borderColor={layer.isSelected ? 'base.400' : 'base.800'}> <LayerWrapper onClick={onClick} borderColor={layer.isSelected ? 'base.400' : 'base.800'}>
<Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}> <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
<LayerVisibilityToggle layerId={layerId} /> <LayerIsEnabledToggle layerId={layerId} />
<LayerTitle type="initial_image_layer" /> <LayerTitle type="initial_image_layer" />
<Spacer /> <Spacer />
<IILayerOpacity layerId={layerId} /> <IILayerOpacity layerId={layerId} />

4
invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPALayer/IPALayerIPAdapterWrapper'; import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPALayer/IPALayerIPAdapterWrapper';
import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; 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 { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
import { layerSelected, selectIPALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice'; import { layerSelected, selectIPALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -22,7 +22,7 @@ export const IPALayer = memo(({ layerId }: Props) => {
return ( return (
<LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}> <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
<Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}> <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
<LayerVisibilityToggle layerId={layerId} /> <LayerIsEnabledToggle layerId={layerId} />
<LayerTitle type="ip_adapter_layer" /> <LayerTitle type="ip_adapter_layer" />
<Spacer /> <Spacer />
<LayerDeleteButton layerId={layerId} /> <LayerDeleteButton layerId={layerId} />

18
invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx
View File

@ -1,8 +1,8 @@
import { IconButton } from '@invoke-ai/ui-library'; import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { stopPropagation } from 'common/util/stopPropagation'; import { stopPropagation } from 'common/util/stopPropagation';
import { useLayerIsVisible } from 'features/controlLayers/hooks/layerStateHooks'; import { useLayerIsEnabled } from 'features/controlLayers/hooks/layerStateHooks';
import { layerVisibilityToggled } from 'features/controlLayers/store/controlLayersSlice'; import { layerIsEnabledToggled } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCheckBold } from 'react-icons/pi'; import { PiCheckBold } from 'react-icons/pi';
@ -11,21 +11,21 @@ type Props = {
layerId: string; layerId: string;
}; };
export const LayerVisibilityToggle = memo(({ layerId }: Props) => { export const LayerIsEnabledToggle = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isVisible = useLayerIsVisible(layerId); const isEnabled = useLayerIsEnabled(layerId);
const onClick = useCallback(() => { const onClick = useCallback(() => {
dispatch(layerVisibilityToggled(layerId)); dispatch(layerIsEnabledToggled(layerId));
}, [dispatch, layerId]); }, [dispatch, layerId]);
return ( return (
<IconButton <IconButton
size="sm" size="sm"
aria-label={t('controlLayers.toggleVisibility')} aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
tooltip={t('controlLayers.toggleVisibility')} tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
variant="outline" variant="outline"
icon={isVisible ? <PiCheckBold /> : undefined} icon={isEnabled ? <PiCheckBold /> : undefined}
onClick={onClick} onClick={onClick}
colorScheme="base" colorScheme="base"
onDoubleClick={stopPropagation} // double click expands the layer onDoubleClick={stopPropagation} // double click expands the layer
@ -33,4 +33,4 @@ export const LayerVisibilityToggle = memo(({ layerId }: Props) => {
); );
}); });
LayerVisibilityToggle.displayName = 'LayerVisibilityToggle'; LayerIsEnabledToggle.displayName = 'LayerVisibilityToggle';

4
invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx
View File

@ -6,7 +6,7 @@ import { AddPromptButtons } from 'features/controlLayers/components/AddPromptBut
import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton'; import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu'; import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle'; 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 { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
import { import {
isRegionalGuidanceLayer, isRegionalGuidanceLayer,
@ -55,7 +55,7 @@ export const RGLayer = memo(({ layerId }: Props) => {
return ( return (
<LayerWrapper onClick={onClick} borderColor={isSelected ? color : 'base.800'}> <LayerWrapper onClick={onClick} borderColor={isSelected ? color : 'base.800'}>
<Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}> <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
<LayerVisibilityToggle layerId={layerId} /> <LayerIsEnabledToggle layerId={layerId} />
<LayerTitle type="regional_guidance_layer" /> <LayerTitle type="regional_guidance_layer" />
<Spacer /> <Spacer />
{autoNegative === 'invert' && ( {autoNegative === 'invert' && (

2
invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
View File

@ -39,7 +39,7 @@ export const useLayerNegativePrompt = (layerId: string) => {
return prompt; return prompt;
}; };
export const useLayerIsVisible = (layerId: string) => { export const useLayerIsEnabled = (layerId: string) => {
const selectLayer = useMemo( const selectLayer = useMemo(
() => () =>
createSelector(selectControlLayersSlice, (controlLayers) => { createSelector(selectControlLayersSlice, (controlLayers) => {

4
invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
View File

@ -139,7 +139,7 @@ export const controlLayersSlice = createSlice({
layerSelected: (state, action: PayloadAction<string>) => { layerSelected: (state, action: PayloadAction<string>) => {
exclusivelySelectLayer(state, action.payload); exclusivelySelectLayer(state, action.payload);
}, },
layerVisibilityToggled: (state, action: PayloadAction<string>) => { layerIsEnabledToggled: (state, action: PayloadAction<string>) => {
const layer = state.layers.find((l) => l.id === action.payload); const layer = state.layers.find((l) => l.id === action.payload);
if (layer) { if (layer) {
layer.isEnabled = !layer.isEnabled; layer.isEnabled = !layer.isEnabled;
@ -791,7 +791,7 @@ class LayerColors {
export const { export const {
// Any Layer Type // Any Layer Type
layerSelected, layerSelected,
layerVisibilityToggled, layerIsEnabledToggled,
layerTranslated, layerTranslated,
layerBboxChanged, layerBboxChanged,
layerReset, layerReset,