feat(ui): remove "solid" background option

invokeai/frontend/web/public/locales/en.json

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

invokeai/frontend/web/src/features/controlLayers/components/CanvasSettingsBackgroundStyle.tsx

@@ -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';

invokeai/frontend/web/src/features/controlLayers/components/CanvasSettingsDynamicGridToggle.tsx

@@ -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';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx

@@ -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>

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -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'}>
+    <Flex position="relative" w="full" h="full" bg={dynamicGrid ? 'base.850' : 'base.900'}>
-      {canvasBackgroundStyle === 'checkerboard' && (
+      {!dynamicGrid && (
         <Flex
           position="absolute"
           bgImage={TRANSPARENCY_CHECKER_PATTERN}

invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackgroundModule.ts

@@ -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;
     }

invokeai/frontend/web/src/features/controlLayers/konva/CanvasRenderingModule.ts

@@ -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();
     }
   };

invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts

@@ -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,

invokeai/frontend/web/src/features/controlLayers/store/settingsReducers.ts

@@ -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>) => {
+  settingsDynamicGridToggled: (state) => {
-    state.settings.canvasBackgroundStyle = action.payload;
+    state.settings.dynamicGrid = !state.settings.dynamicGrid;
   },
 } satisfies SliceCaseReducers<CanvasV2State>;

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -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: {