responsive size preference

example/game.js

@@ -36,7 +36,7 @@ function preload() {
 
 function create() {
 	const plugin = game.plugins.add(new Phaser.Plugin.RuntimeEditor(game, {
-		refImage: () => new Phaser.Image(game, 0, 0, 'ref')
+		refImage: () => new Phaser.Image(game, 0, 0, 'ref'),
 	}));
 
 	const grid = new Phaser.Graphics(game);

src/core/preferences.ts

@@ -1,9 +1,12 @@
+import { Size } from 'plugin.model';
 import { OnlyProperties, PanelSide } from 'types';
 import { ActionHandler } from './action-handler';
 import { Actions } from './actions';
 
 export type PreferenceKey = OnlyProperties<Preferences>;
 
+const DEFAULT_RESPONSIVE_SIZE: Readonly<Size> = { width: 450, height: 800 };
+
 export class Preferences {
 	// #region Preferences
 
@@ -96,14 +99,14 @@ export class Preferences {
 		this.save('responsive', value);
 	}
 
-	private _responsiveSize = { width: 450, height: 800 };
+	private _responsiveSize: Size = Object.assign({}, DEFAULT_RESPONSIVE_SIZE);
 
 	public get responsiveSize() { return this._responsiveSize; }
 
-	public set responsiveSize(value: { width: number, height: number }) {
-		value = value ?? { width: 450, height: 800 };
-		value.width = value.width > 0 ? value.width : 450;
-		value.height = value.height > 0 ? value.height : 800;
+	public set responsiveSize(value: Size) {
+		value = value ?? Object.assign({}, DEFAULT_RESPONSIVE_SIZE);
+		value.width = value.width > 0 ? value.width : DEFAULT_RESPONSIVE_SIZE.width;
+		value.height = value.height > 0 ? value.height : DEFAULT_RESPONSIVE_SIZE.height;
 		this._responsiveSize = value;
 		this.notifyListeners('responsiveSize', value);
 		this.save('responsiveSize', value);
@@ -115,14 +118,19 @@ export class Preferences {
 
 	public constructor(clean: boolean) {
 		if (clean) localStorage.clear();
-		this._snap = this.load('snap', true);
-		this._gizmos = this.load('gizmos', true);
-		this._guides = this.load('guides', false);
-		this._hitArea = this.load('hitArea', false);
-		this._responsive = this.load('responsive', false);
-		this._refImageVisible = this.load('refImageVisible', false);
-		this._refImageX = this.load('refImageX', 0);
-		this._refImageY = this.load('refImageY', 0);
+		try {
+			this._snap = this.load('snap', true);
+			this._gizmos = this.load('gizmos', true);
+			this._guides = this.load('guides', false);
+			this._hitArea = this.load('hitArea', false);
+			this._responsive = this.load('responsive', false);
+			this._refImageVisible = this.load('refImageVisible', false);
+			this._refImageX = this.load('refImageX', 0);
+			this._refImageY = this.load('refImageY', 0);
+			this._responsiveSize = this.load('responsiveSize', Object.assign({}, DEFAULT_RESPONSIVE_SIZE));
+		} catch (_e: any) {
+			localStorage.clear();
+		}
 	}
 
 	// hmm... this is weird
@@ -165,7 +173,7 @@ export class Preferences {
 		return typeof defaultValue === 'string' ? v : JSON.parse(v);
 	}
 
-	private save(key: string, value: { toString: () => string }) {
-		localStorage.setItem(key, value.toString());
+	private save(key: string, value: any) {
+		localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : value.toString());
 	}
 }

src/plugin.model.ts

@@ -16,12 +16,17 @@ export interface PluginConfig {
 
 export interface Point {
 	x: number;
-	y: number
+	y: number;
 }
 
-export interface Rect{
+export interface Size {
+	width: number;
+	height: number;
+}
+
+export interface Rect {
 	x: number;
-	y: number
+	y: number;
 	width: number;
 	height: number;
 }

src/scene-view/game-container/game-container.ts

@@ -3,8 +3,8 @@ import { ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
+import { PluginConfig, Size } from 'plugin.model';
 import { SelectionArea } from 'scene-view/selection-area/selection-area';
-import { PluginConfig } from 'plugin.model';
 import './game-container.scss';
 
 const MIN_WIDTH = 100;
@@ -47,8 +47,9 @@ export class GameContainer extends HTMLElement {
 		this.onmouseup = this.onInputUp;
 	}
 
-	private onPreferencesChanged(key: PreferenceKey, value: boolean) {
-		if (key === 'responsive') this.setResponsive(value);
+	private onPreferencesChanged(key: PreferenceKey, value: any) {
+		if (key === 'responsive') this.setResponsive(value === true);
+		if (key === 'responsiveSize') this.setResponsiveSize(value);
 	}
 
 	public enable(config: PluginConfig) {
@@ -81,11 +82,24 @@ export class GameContainer extends HTMLElement {
 			if (!this.classList.contains('responsive')) {
 				this.classList.add('responsive');
 			}
+			this.setResponsiveSize(Editor.prefs.responsiveSize);
 		} else {
 			this.classList.remove('responsive');
+			this.clearResponsiveSize();
 		}
 	}
 
+	private setResponsiveSize(size: Size) {
+		console.log(size);
+		this.gameEditorParentElement.style.width = size.width + 'px';
+		this.gameEditorParentElement.style.height = size.height + 'px';
+	}
+
+	private clearResponsiveSize() {
+		this.gameEditorParentElement.style.width = 'unset';
+		this.gameEditorParentElement.style.height = 'unset';
+	}
+
 	// #region Panning
 
 	private _downPageX = 0;