toggle orientation button

src/core/actions.ts

@@ -13,6 +13,7 @@ export class Actions {
 	public static readonly TOGGLE_GUIDES = 'TOGGLE_GUIDES';
 	public static readonly TOGGLE_HIT_AREA = 'TOGGLE_HIT_AREA';
 	public static readonly TOGGLE_RESPONSIVE = 'TOGGLE_RESPONSIVE';
+	public static readonly TOGGLE_ORIENTATION = 'TOGGLE_ORIENTATION';
 	public static readonly TOGGLE_REF_IMAGE = 'TOGGLE_REF_IMAGE';
 	public static readonly TOGGLE_ALL_HIT_AREAS_SNAPSHOT = 'TOGGLE_ALL_HIT_AREAS_SNAPSHOT';
 	public static readonly TOGGLE_ENABLED = 'TOGGLE_ENABLED';

src/core/editor.ts

@@ -199,7 +199,12 @@ class EditorClass {
 				id: Actions.TOGGLE_RESPONSIVE,
 				toggle: true,
 				label: 'responsive',
-				icon: 'fa-expand-arrows-alt',
+				icon: 'fa-tablet-alt',
+			},
+			{
+				id: Actions.TOGGLE_ORIENTATION,
+				label: 'orientation',
+				icon: 'fa-retweet',
 			},
 			{
 				id: Actions.TOGGLE_REF_IMAGE,

src/core/preferences.ts

@@ -96,6 +96,19 @@ export class Preferences {
 		this.save('responsive', value);
 	}
 
+	private _responsiveSize = { width: 450, height: 800 };
+
+	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;
+		this._responsiveSize = value;
+		this.notifyListeners('responsiveSize', value);
+		this.save('responsiveSize', value);
+	}
+
 	// #endregion
 
 	public readonly onPreferenceChanged = new Phaser.Signal();
@@ -119,6 +132,10 @@ export class Preferences {
 		actions.setActionCommand(Actions.TOGGLE_GUIDES, () => this.guides = !this._guides, () => this._guides);
 		actions.setActionCommand(Actions.TOGGLE_HIT_AREA, () => this.hitArea = !this._hitArea, () => this._hitArea);
 		actions.setActionCommand(Actions.TOGGLE_RESPONSIVE, () => this.responsive = !this._responsive, () => this._responsive);
+		actions.setActionCommand(Actions.TOGGLE_ORIENTATION, () => {
+			const size = this._responsiveSize;
+			this.responsiveSize = { width: size.height, height: size.width };
+		});
 		actions.setActionCommand(
 			Actions.TOGGLE_ALL_HIT_AREAS_SNAPSHOT,
 			() => this.allHitAreasSnapshot = !this._allHitAreasSnapshot,

src/editor-view/actions/actions-toolbar.ts

@@ -1,12 +1,15 @@
 import { ComponentTags } from 'component-tags';
 import { Action, ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
+import { Editor } from 'core/editor';
+import { PreferenceKey } from 'core/preferences';
 import { Widget } from 'editor-view/widget/widget';
 import './actions-toolbar.scss';
 import { ActionButton } from './button/action-button';
 
 export class ActionsToolbar extends Widget {
-	private readonly _buttons: ActionButton[] = [];
+	private readonly buttons: ActionButton[] = [];
+	private orientationBtn: ActionButton;
 
 	public setupActions(actions: ActionHandler) {
 		this.createButton(actions.getAction(Actions.TOGGLE_ENABLED));
@@ -18,6 +21,8 @@ export class ActionsToolbar extends Widget {
 		this.createButton(actions.getAction(Actions.TOGGLE_ALL_HIT_AREAS_SNAPSHOT));
 		this.createSeparator();
 		this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE));
+		this.orientationBtn = this.createButton(actions.getAction(Actions.TOGGLE_ORIENTATION));
+		this.createSeparator();
 		this.createButton(actions.getAction(Actions.ZOOM_OUT));
 		this.createButton(actions.getAction(Actions.ZOOM_IN));
 		this.createSeparator();
@@ -26,18 +31,27 @@ export class ActionsToolbar extends Widget {
 		this.createButton(actions.getAction(Actions.UNDO));
 		this.createSeparator();
 		this.createSpacer();
+
+		Editor.prefs.onPreferenceChanged.add(this.onPreferencesChanged, this);
+		this.onPreferencesChanged('responsive', Editor.prefs.responsive);
+	}
+
+	private onPreferencesChanged(key: PreferenceKey, value: any) {
+		if (key !== 'responsive') return;
+		this.orientationBtn.interactable = value === true;
 	}
 
-	public enable() { this._buttons.forEach(e => e.updateState()); }
+	public enable() { this.buttons.forEach(e => e.updateState()); }
 
 	public disable() { }
 
 	private createButton(action: Action) {
-		if (!action) return;
+		if (!action) return null;
 		const btn = document.createElement(ComponentTags.ActionButton) as ActionButton;
 		btn.setAction(action);
 		this.appendChild(btn);
-		this._buttons.push(btn);
+		this.buttons.push(btn);
+		return btn;
 	}
 
 	private createSeparator() {

src/editor-view/actions/button/action-button.scss

@@ -21,6 +21,11 @@ phred-action-button.button {
 		}
 	}
 
+	&:hover .tooltip {
+		opacity: 1;
+		transition: opacity 200ms 800ms;
+	}
+
 	&.selected {
 		background-color: lighten($primary-color, 10%);
 		color: $on-primary;
@@ -29,9 +34,9 @@ phred-action-button.button {
 		}
 	}
 
-	&:hover .tooltip {
-		opacity: 1;
-		transition: opacity 200ms 800ms;
+	&.disabled {
+		pointer-events: none;
+		opacity: 0.5;
 	}
 
 	.tooltip {

src/editor-view/actions/button/action-button.ts

@@ -5,6 +5,16 @@ import './action-button.scss';
 export class ActionButton extends HTMLElement {
 	private action: Action;
 
+	public set interactable(value: boolean) {
+		if (value) {
+			this.classList.remove('disabled');
+			return;
+		}
+		if (!this.classList.contains('disabled')) {
+			this.classList.add('disabled');
+		}
+	}
+
 	public setAction(action: Action) {
 		this.classList.add('button');
 		this.action = action;