feat(ui): show only raster layers while staging

This is expose as a setting int he settings popover. On by default for distraction-free staging.
This commit is contained in:
psychedelicious
2024-09-18 11:41:18 +10:00
committed by Kent Keirsey
parent 4f8782f616
commit ed7cfa73e4
7 changed files with 107 additions and 13 deletions

View File

@@ -22,6 +22,7 @@ import { CanvasSettingsOutputOnlyMaskedRegionsCheckbox } from 'features/controlL
import { CanvasSettingsPreserveMaskCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsPreserveMaskCheckbox';
import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
import { CanvasSettingsShowOnlyRasterLayersWhileStagingSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowOnlyRasterLayersWhileStagingSwitch';
import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -45,6 +46,7 @@ export const CanvasSettingsPopover = memo(() => {
<CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
<CanvasSettingsSnapToGridCheckbox />
<CanvasSettingsShowProgressOnCanvas />
<CanvasSettingsShowOnlyRasterLayersWhileStagingSwitch />
<CanvasSettingsDynamicGridSwitch />
<CanvasSettingsBboxOverlaySwitch />
<CanvasSettingsShowHUDSwitch />

View File

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