github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 07:35:24 -05: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 f4998bc308
commit 591e8162c1
10 changed files with 39 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}