enabling actions again

src/core/action-handler.ts

@@ -2,11 +2,11 @@ export interface Action {
 	id: string;
 	label?: string;
 	icon?: string;
-	shortcut?: string;
+	shortcuts?: string[];
 	toggle?: boolean;
 	hold?: boolean;
 	on?: string;
-	command: () => void;
+	command?: () => void;
 	state?: () => any;
 }
 
@@ -20,10 +20,18 @@ export class ActionHandler {
 	public getActions() { return Object.values(this.actions); }
 	public getAction(id: string) { return id in this.actionById ? this.actionById[id] : null; }
 
-	public addContainer(id: string, container: HTMLElement) {
-		this.containers[id] = container;
+	public setActionCommand(id: string, command: () => void, state?: () => boolean) {
+		const action = this.getAction(id);
+		if (!action) {
+			console.warn(`Could not find action ${id}`);
+			return;
+		}
+		action.command = command;
+		action.state = state;
 	}
 
+	public addContainer(id: string, container: HTMLElement) { this.containers[id] = container; }
+
 	public enable() {
 		Object.keys(this.containers).forEach(cid => {
 			const container = this.containers[cid];
@@ -46,10 +54,12 @@ export class ActionHandler {
 			if (!(cid in this.actions)) this.actions[cid] = {};
 			const container = this.actions[cid];
 
-			if (action.shortcut) {
-				if (action.shortcut in container)
-					throw new Error(`There is already an action with shortcut ${action.shortcut}: ${container[action.shortcut].label}`);
-				container[action.shortcut] = action;
+			if (action.shortcuts) {
+				action.shortcuts.forEach(s => {
+					if (s in container)
+						throw new Error(`There is already an action with shortcut ${s}: ${container[s].label}`);
+					container[s] = action;
+				});
 			}
 
 			this.actionById[action.id] = action;
@@ -64,7 +74,7 @@ export class ActionHandler {
 			+ e.key;
 		if (k in actions) {
 			const action = actions[k];
-			action.command();
+			action.command?.();
 			if (action.toggle && action.hold)
 				this._holdingToggleAction = action;
 			e.preventDefault();
@@ -73,7 +83,7 @@ export class ActionHandler {
 
 	private onKeyUp() {
 		if (!this._holdingToggleAction) return;
-		this._holdingToggleAction.command();
+		this._holdingToggleAction.command?.();
 		this._holdingToggleAction = null;
 	}
 }

src/core/editor.ts

@@ -1,4 +1,5 @@
 import { ComponentTags } from 'component-tags';
+import { Actions } from 'core/actions';
 import { EditorData } from 'data/editor-data';
 import { InspectorData } from 'data/inspector-data';
 import { PhaserMeta } from 'data/phaser-meta';
@@ -22,7 +23,7 @@ class EditorClass {
 		this.inspectorData = this.createInspectorData();
 		this.meta = new PhaserMeta();
 
-		this.actions = new ActionHandler();
+		this.actions = this.createActions();
 		this.history = new History(this.data);
 		this.prefs = new Preferences(clearPrefs);
 	}
@@ -128,6 +129,106 @@ class EditorClass {
 		return data;
 	}
 
+	private createActions() {
+		const actions = new ActionHandler();
+		actions.add(
+			{
+				id: Actions.TOGGLE_ENABLED,
+				label: 'edit',
+				icon: 'fa-edit',
+				toggle: true,
+				shortcuts: ['ctrl+F2']
+			},
+
+			{
+				id: Actions.TOGGLE_SNAP,
+				label: 'snap',
+				icon: 'fa-border-all',
+				toggle: true,
+			},
+			{
+				id: Actions.TOGGLE_GIZMOS,
+				label: 'gizmos',
+				icon: 'fa-vector-square',
+				toggle: true,
+				hold: true,
+				shortcuts: ['ctrl+shift+Shift', 'ctrl+shift+Control'],
+			},
+			{
+				id: Actions.TOGGLE_GUIDES,
+				toggle: true,
+				label: 'guides',
+				icon: 'fa-compress',
+			},
+			{
+				id: Actions.UNDO,
+				label: 'undo',
+				icon: 'fa-undo-alt',
+				shortcuts: ['ctrl+z'],
+			},
+
+			{
+				id: Actions.PRINT_OBJECT,
+				label: 'print',
+				icon: 'fa-terminal',
+				shortcuts: ['ctrl+alt+p'],
+			},
+			{
+				id: Actions.DESELECT,
+				shortcuts: ['Escape'],
+			},
+
+			{
+				id: Actions.MOVE_UP_1,
+				shortcuts: ['ArrowUp'],
+				// command: () => scene.moveSelectedObject(0, -1)
+			},
+			{
+				id: Actions.MOVE_DOWN_1,
+				shortcuts: ['ArrowDown'],
+				// command: () => scene.moveSelectedObject(0, 1)
+			},
+			{
+				id: Actions.MOVE_LEFT_1,
+				shortcuts: ['ArrowLeft'],
+				// command: () => scene.moveSelectedObject(-1, 0)
+			},
+			{
+				id: Actions.MOVE_RIGHT_1,
+				shortcuts: ['ArrowRight'],
+				// command: () => scene.moveSelectedObject(1, 0)
+			},
+			{
+				id: Actions.MOVE_UP_10,
+				shortcuts: ['shift+ArrowUp'],
+				// command: () => scene.moveSelectedObject(0, -10)
+			},
+			{
+				id: Actions.MOVE_DOWN_10,
+				shortcuts: ['shift+ArrowDown'],
+				// command: () => scene.moveSelectedObject(0, 10)
+			},
+			{
+				id: Actions.MOVE_LEFT_10,
+				shortcuts: ['shift+ArrowLeft'],
+				// command: () => scene.moveSelectedObject(-10, 0)
+			},
+			{
+				id: Actions.MOVE_RIGHT_10,
+				shortcuts: ['shift+ArrowRight'],
+				// command: () => scene.moveSelectedObject(10, 0)
+			},
+		);
+
+		return actions;
+	}
+
+	public setupInitialActions() {
+		const actions = this.actions;
+		this.prefs.setupActions(actions);
+		this.history.setupActions(actions);
+		this.data.setupActions(actions);
+	}
 
 	public enable() {
 		this.actions.enable();

src/core/history.ts

@@ -1,4 +1,6 @@
 import { DataOrigin, EditorData } from '../data/editor-data';
+import { ActionHandler } from './action-handler';
+import { Actions } from './actions';
 
 export interface HistoryEntry {
 	obj: PIXI.DisplayObject;
@@ -16,6 +18,10 @@ export class History {
 
 	constructor(private readonly data: EditorData) { }
 
+	public setupActions(actions: ActionHandler) {
+		actions.setActionCommand(Actions.UNDO, this.undo.bind(this));
+	}
+
 	public prepare(obj: PIXI.DisplayObject, properties: { [id: string]: any }) {
 		const entry = this.holdingEntry = { obj, properties };
 		Object.keys(entry.properties).forEach(k =>

src/core/preferences.ts

@@ -1,4 +1,6 @@
 import { OnlyProperties, PanelSide } from 'types';
+import { ActionHandler } from './action-handler';
+import { Actions } from './actions';
 
 export type PreferenceKey = OnlyProperties<Preferences>;
 
@@ -35,13 +37,13 @@ export class Preferences {
 		this.save('guides', value);
 	}
 
-	private _referenceImage = false;
+	private _refImage = false;
 
-	public get referenceImage() { return this._referenceImage; }
+	public get refImage() { return this._refImage; }
 
-	public set referenceImage(value: boolean) {
-		this._referenceImage = value;
-		this.notifyListeners('referenceImage', value);
+	public set refImage(value: boolean) {
+		this._refImage = value;
+		this.notifyListeners('refImage', value);
 		this.save('referenceImage', value);
 	}
 
@@ -55,7 +57,15 @@ export class Preferences {
 		this._snap = this.load('snap', true);
 		this._gizmos = this.load('gizmos', true);
 		this._guides = this.load('guides', false);
-		this._referenceImage = this.load('referenceImage', false);
+		this._refImage = this.load('refImage', false);
+	}
+
+	// hmm... this is weird
+	public setupActions(actions: ActionHandler) {
+		actions.setActionCommand(Actions.TOGGLE_SNAP, () => this.snap = !this._snap, () => this._snap);
+		actions.setActionCommand(Actions.TOGGLE_GIZMOS, () => this.gizmos = !this._gizmos, () => this._gizmos);
+		actions.setActionCommand(Actions.TOGGLE_GUIDES, () => this.guides = !this._guides, () => this._guides);
+		actions.setActionCommand(Actions.TOGGLE_REF_IMAGE, () => this.refImage = !this._refImage, () => this._refImage);
 	}
 
 

src/data/editor-data.ts

@@ -1,3 +1,6 @@
+import { ActionHandler } from 'core/action-handler';
+import { Actions } from 'core/actions';
+
 export enum DataOrigin {
 	ACTION = 0,
 	SCENE = 1,
@@ -48,4 +51,11 @@ export class EditorData {
 			this.onPropertyChanged.dispatch(e.from, k, e.value, this._selectedObject);
 		});
 	}
+
+	public setupActions(actions: ActionHandler) {
+		actions.setActionCommand(Actions.DESELECT, () => this.selectObject(null, DataOrigin.ACTION));
+		actions.setActionCommand(Actions.PRINT_OBJECT, () => {
+			if (this._selectedObject) console.info(this._selectedObject);
+		})
+	}
 }

src/editor-view/actions/reference-image/reference-image-panel.ts

@@ -1,7 +1,7 @@
+import { ComponentTags } from 'component-tags';
 import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
-import { ComponentTags } from 'component-tags';
 import { ActionButton } from '../button/action-button';
 import './reference-image-panel.scss';
 
@@ -22,12 +22,12 @@ export class ReferenceImagePanel extends HTMLElement {
 		this.appendChild(slider);
 
 		Editor.prefs.onPreferenceChanged.add(this.onPreferenceChanged, this);
-		this.onPreferenceChanged('referenceImage', Editor.prefs.referenceImage);
+		this.onPreferenceChanged('refImage', Editor.prefs.refImage);
 		// slider.value = Editor.referenceImage.alpha.toString();
 	}
 
 	private onPreferenceChanged(pref: PreferenceKey, value: any) {
-		if (pref !== 'referenceImage') return;
+		if (pref !== 'refImage') return;
 		if (value) this.slider.removeAttribute('disabled');
 		else this.slider.setAttribute('disabled', 'true');
 	}

src/editor-view/editor-view.ts

@@ -1,4 +1,5 @@
 import { ComponentTags } from 'component-tags';
+import { ActionHandler } from 'core/action-handler';
 import { Editor } from 'core/editor';
 import { DataOrigin } from 'data/editor-data';
 import { ActionsToolbar } from './actions/actions-toolbar';
@@ -32,6 +33,8 @@ export class EditorView extends Widget {
 		this.panels.forEach(panel => panel.init(game, root));
 	}
 
+	public setupActions(actions: ActionHandler) { }
+
 	private createElements() {
 		const leftPanel = this.appendChild(document.createElement(ComponentTags.Panel) as Panel);
 		leftPanel.setSide('left');

src/editor-view/inspector/inspector.ts

@@ -1,5 +1,5 @@
+import { DataOrigin } from 'data/editor-data';
 import { Widget } from 'editor-view/widget/widget';
-import { DataOrigin } from 'index';
 import './inspector.scss';
 
 export abstract class Inspector extends Widget {