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

feat(ui): remove "solid" background option

Browse Source
This commit is contained in:
psychedelicious 2024-08-22 17:20:28 +10:00
parent a79a25ad63
commit 97c0d3f6be
10 changed files with 39 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1713,6 +1713,7 @@
"disableTransparencyEffect": "Disable Transparency Effect",
"hidingType": "Hiding {{type}}",
"showingType": "Showing {{type}}",
"dynamicGrid": "Dynamic Grid",
"fill": {
"fillStyle": "Fill Style",
"solid": "Solid",
@ -1732,12 +1733,6 @@
"transform": "Transform",
"eyeDropper": "Eye Dropper"
},
"background": {
"backgroundStyle": "Background Style",
"solid": "Solid",
"checkerboard": "Checkerboard",
"dynamicGrid": "Dynamic Grid"
},
"filter": {
"filter": "Filter",
"filters": "Filters",

50
invokeai/frontend/web/src/features/controlLayers/components/CanvasSettingsBackgroundStyle.tsx
View File

@ -1,50 +0,0 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { canvasBackgroundStyleChanged } from 'features/controlLayers/store/canvasV2Slice';
import { isCanvasBackgroundStyle } from 'features/controlLayers/store/types';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
export const CanvasSettingsBackgroundStyle = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const canvasBackgroundStyle = useAppSelector((s) => s.canvasV2.settings.canvasBackgroundStyle);
const onChange = useCallback<ComboboxOnChange>(
(v) => {
if (!isCanvasBackgroundStyle(v?.value)) {
return;
}
dispatch(canvasBackgroundStyleChanged(v.value));
},
[dispatch]
);
const options = useMemo<ComboboxOption[]>(() => {
return [
{
value: 'solid',
label: t('controlLayers.background.solid'),
},
{
value: 'checkerboard',
label: t('controlLayers.background.checkerboard'),
},
{
value: 'dynamicGrid',
label: t('controlLayers.background.dynamicGrid'),
},
];
}, [t]);
const value = useMemo(() => options.find((o) => o.value === canvasBackgroundStyle), [options, canvasBackgroundStyle]);
return (
<FormControl orientation="vertical">
<FormLabel m={0}>{t('controlLayers.background.backgroundStyle')}</FormLabel>
<Combobox value={value} options={options} onChange={onChange} isSearchable={false} />
</FormControl>
);
});
CanvasSettingsBackgroundStyle.displayName = 'CanvasSettingsBackgroundStyle';

25
invokeai/frontend/web/src/features/controlLayers/components/CanvasSettingsDynamicGridToggle.tsx Normal file
View File

@ -0,0 +1,25 @@
import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { settingsDynamicGridToggled } from 'features/controlLayers/store/canvasV2Slice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export const CanvasSettingsDynamicGridToggle = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const dynamicGrid = useAppSelector((s) => s.canvasV2.settings.dynamicGrid);
const onChange = useCallback(() => {
dispatch(settingsDynamicGridToggled());
}, [dispatch]);
return (
<FormControl>
<FormLabel m={0} flexGrow={1}>
{t('controlLayers.dynamicGrid')}
</FormLabel>
<Switch size="sm" isChecked={dynamicGrid} onChange={onChange} />
</FormControl>
);
});
CanvasSettingsDynamicGridToggle.displayName = 'CanvasSettingsDynamicGridToggle';

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

@ -12,7 +12,7 @@ import {
} from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { CanvasSettingsBackgroundStyle } from 'features/controlLayers/components/CanvasSettingsBackgroundStyle';
import { CanvasSettingsDynamicGridToggle } from 'features/controlLayers/components/CanvasSettingsDynamicGridToggle';
import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
import { clipToBboxChanged, invertScrollChanged } from 'features/controlLayers/store/canvasV2Slice';
import type { ChangeEvent } from 'react';
@ -67,7 +67,7 @@ const ControlLayersSettingsPopover = () => {
<FormLabel flexGrow={1}>{t('unifiedCanvas.clipToBbox')}</FormLabel>
<Checkbox isChecked={clipToBbox} onChange={onChangeClipToBbox} />
</FormControl>
<CanvasSettingsBackgroundStyle />
<CanvasSettingsDynamicGridToggle />
<Button onClick={clearCaches} size="sm">
Clear Caches
</Button>

6
invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
View File

@ -53,7 +53,7 @@ type Props = {
};
export const StageComponent = memo(({ asPreview = false }: Props) => {
const canvasBackgroundStyle = useAppSelector((s) => s.canvasV2.settings.canvasBackgroundStyle);
const dynamicGrid = useAppSelector((s) => s.canvasV2.settings.dynamicGrid);
const [stage] = useState(
() =>
@ -79,8 +79,8 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
);
return (
<Flex position="relative" w="full" h="full" bg={canvasBackgroundStyle === 'checkerboard' ? 'base.900' : 'base.850'}>
{canvasBackgroundStyle === 'checkerboard' && (
<Flex position="relative" w="full" h="full" bg={dynamicGrid ? 'base.850' : 'base.900'}>
{!dynamicGrid && (
<Flex
position="absolute"
bgImage={TRANSPARENCY_CHECKER_PATTERN}

2
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts
View File

@ -36,7 +36,7 @@ export class CanvasBackgroundModule {
render() {
const settings = this.manager.stateApi.getSettings();
if (settings.canvasBackgroundStyle !== 'dynamicGrid') {
if (!settings.dynamicGrid) {
this.konva.layer.visible(false);
return;
}

2
invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts
View File

@ -62,7 +62,7 @@ export class CanvasRenderingModule {
};
renderBackground = (state: CanvasV2State, prevState: CanvasV2State | null) => {
if (!prevState || state.settings.canvasBackgroundStyle !== prevState.settings.canvasBackgroundStyle) {
if (!prevState || state.settings.dynamicGrid !== prevState.settings.dynamicGrid) {
this.manager.background.render();
}
};

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

@ -89,7 +89,7 @@ const initialState: CanvasV2State = {
showHUD: true,
clipToBbox: false,
cropToBboxOnSave: false,
canvasBackgroundStyle: 'checkerboard',
dynamicGrid: false,
},
compositing: {
maskBlur: 16,
@ -473,7 +473,7 @@ export const {
allEntitiesDeleted,
clipToBboxChanged,
canvasReset,
canvasBackgroundStyleChanged,
settingsDynamicGridToggled,
// All entities
entitySelected,
entityNameChanged,

6
invokeai/frontend/web/src/features/controlLayers/store/settingsReducers.ts
View File

@ -1,11 +1,11 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import type { CanvasBackgroundStyle, CanvasV2State } from 'features/controlLayers/store/types';
import type { CanvasV2State } from 'features/controlLayers/store/types';
export const settingsReducers = {
clipToBboxChanged: (state, action: PayloadAction<boolean>) => {
state.settings.clipToBbox = action.payload;
},
canvasBackgroundStyleChanged: (state, action: PayloadAction<CanvasBackgroundStyle>) => {
state.settings.canvasBackgroundStyle = action.payload;
settingsDynamicGridToggled: (state) => {
state.settings.dynamicGrid = !state.settings.dynamicGrid;
},
} satisfies SliceCaseReducers<CanvasV2State>;

7
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@ -834,11 +834,6 @@ export type StagingAreaImage = {
offsetY: number;
};
const zCanvasBackgroundStyle = z.enum(['checkerboard', 'dynamicGrid', 'solid']);
export type CanvasBackgroundStyle = z.infer<typeof zCanvasBackgroundStyle>;
export const isCanvasBackgroundStyle = (v: unknown): v is CanvasBackgroundStyle =>
zCanvasBackgroundStyle.safeParse(v).success;
export type CanvasV2State = {
_version: 3;
selectedEntityIdentifier: CanvasEntityIdentifier | null;
@ -877,7 +872,7 @@ export type CanvasV2State = {
preserveMaskedArea: boolean;
cropToBboxOnSave: boolean;
clipToBbox: boolean;
canvasBackgroundStyle: CanvasBackgroundStyle;
dynamicGrid: boolean;
};
bbox: {
rect: {