Preserve custom canvas dimensions when changing scenes

app/composables/useScenes.js

@@ -9,12 +9,6 @@ const SCENE_CONTROLLED_SETTING_KEYS = [
     'themeName',
     'themeOpacity',
     'position',
-    'width',
-    'height',
-    'aspectRatio',
-    'lockWindowSize',
-    'lockWindowPaddingX',
-    'lockWindowPaddingY',
     'scale',
     'marginTop',
     'marginBottom',

app/data/scenes.js

@@ -35,12 +35,6 @@ const DEFAULT_SCENE_SETTINGS = {
     themeName: 'material-ocean',
     themeOpacity: 1,
     position: 'center',
-    width: 800,
-    height: 450,
-    aspectRatio: [16, 9],
-    lockWindowSize: false,
-    lockWindowPaddingX: 224,
-    lockWindowPaddingY: 180,
     scale: 1,
     marginTop: 0,
     marginBottom: 0,

tests/composables/useScenes.test.js

@@ -1,9 +1,74 @@
 import { describe, expect, it } from 'vitest';
 import useScenes from '~/composables/useScenes';
 import useSettings from '~/composables/useSettings';
-import { SCENE_BROWSERBASE, SCENE_NONE } from '~/data/scenes';
+import scenes, { SCENE_BROWSERBASE, SCENE_NONE } from '~/data/scenes';
 
 describe('useScenes', () => {
+    it.each([null, [4, 3]])(
+        'preserves canvas sizing across scenes with aspect ratio %j',
+        (aspectRatio) => {
+            const sizing = {
+                width: 1200,
+                height: 900,
+                aspectRatio,
+                lockWindowSize: false,
+                lockWindowPaddingX: 80,
+                lockWindowPaddingY: 60,
+            };
+            const { settings } = useSettings(sizing);
+            const { applyScene } = useScenes();
+
+            for (const scene of scenes.filter((scene) => scene.id !== SCENE_NONE)) {
+                applyScene(settings, scene.id);
+
+                expect(settings.scene).toBe(scene.id);
+                expect(settings).toMatchObject(sizing);
+            }
+
+            applyScene(settings, SCENE_NONE);
+
+            expect(settings).toMatchObject(sizing);
+        }
+    );
+
+    it('preserves sizing changes made while a scene is active when removing it', () => {
+        const { settings } = useSettings({ width: 1200, height: 900, lockWindowSize: false });
+        const { applyScene } = useScenes();
+
+        applyScene(settings, SCENE_BROWSERBASE);
+
+        const sizing = {
+            width: 1500,
+            height: 1000,
+            aspectRatio: [3, 2],
+            lockWindowSize: true,
+            lockWindowPaddingX: 100,
+            lockWindowPaddingY: 50,
+        };
+        Object.assign(settings, sizing);
+
+        applyScene(settings, SCENE_NONE);
+
+        expect(settings).toMatchObject(sizing);
+    });
+
+    it('preserves canvas sizing when removing a saved scene', () => {
+        const sizing = {
+            width: 1200,
+            height: 900,
+            aspectRatio: null,
+            lockWindowSize: true,
+            lockWindowPaddingX: 80,
+            lockWindowPaddingY: 60,
+        };
+        const { settings } = useSettings({ ...sizing, scene: SCENE_BROWSERBASE });
+        const { applyScene } = useScenes();
+
+        applyScene(settings, SCENE_NONE);
+
+        expect(settings).toMatchObject(sizing);
+    });
+
     it('applies scene title colors without locking them to the scene afterward', () => {
         const { settings } = useSettings({
             showHeader: false,