From 9a442918b5dd6ac93e64e14ffde8c36dabe87d6c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:13:16 +1000
Subject: [PATCH] feat(ui): add canvas autosave checkbox
---
.../CanvasSettingsAutoSaveCheckbox.tsx | 20 +++++++++++++++++++
.../Settings/CanvasSettingsPopover.tsx | 2 ++
2 files changed, 22 insertions(+)
create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx
new file mode 100644
index 0000000000..0dfcae290a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx
@@ -0,0 +1,20 @@
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { settingsAutoSaveToggled } from 'features/controlLayers/store/canvasV2Slice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsAutoSaveCheckbox = memo(() => {
+ const { t } = useTranslation();
+ const dispatch = useAppDispatch();
+ const autoSave = useAppSelector((s) => s.canvasV2.settings.autoSave);
+ const onChange = useCallback(() => dispatch(settingsAutoSaveToggled()), [dispatch]);
+ return (
+ <FormControl w="full">
+ <FormLabel flexGrow={1}>{t('controlLayers.autoSave')}</FormLabel>
+ <Checkbox isChecked={autoSave} onChange={onChange} />
+ </FormControl>
+ );
+});
+
+CanvasSettingsAutoSaveCheckbox.displayName = 'CanvasSettingsAutoSaveCheckbox';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
index c0c91ba936..8ad4aeb22a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx
@@ -9,6 +9,7 @@ import {
PopoverTrigger,
useShiftModifier,
} from '@invoke-ai/ui-library';
+import { CanvasSettingsAutoSaveCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox';
import { CanvasSettingsClearCachesButton } from 'features/controlLayers/components/Settings/CanvasSettingsClearCachesButton';
import { CanvasSettingsClipToBboxCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsClipToBboxCheckbox';
import { CanvasSettingsDynamicGridSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsDynamicGridSwitch';
@@ -30,6 +31,7 @@ export const CanvasSettingsPopover = memo(() => {
<PopoverArrow />
<PopoverBody>
<Flex direction="column" gap={2}>
+ <CanvasSettingsAutoSaveCheckbox />
<CanvasSettingsInvertScrollCheckbox />
<CanvasSettingsClipToBboxCheckbox />
<CanvasSettingsDynamicGridSwitch />