diff --git a/app/composables/useScenes.js b/app/composables/useScenes.js index a3297d7..7d9f464 100644 --- a/app/composables/useScenes.js +++ b/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', diff --git a/app/data/scenes.js b/app/data/scenes.js index 3da651e..851a04a 100644 --- a/app/data/scenes.js +++ b/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, diff --git a/tests/composables/useScenes.test.js b/tests/composables/useScenes.test.js index e32c689..1fe9ede 100644 --- a/tests/composables/useScenes.test.js +++ b/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,