Merge branch 'feature/one-class-to-rule-them-all' into develop

src/data/actions.ts → src/core/actions.ts

@@ -9,7 +9,7 @@ export interface Action {
 	state?: () => any;
 }
 
-class ActionsClass {
+export class Actions {
 	private readonly actions: Record<string, Action> = {};
 	private readonly actionMap: Record<string, Action> = {};
 
@@ -55,5 +55,3 @@ class ActionsClass {
 		this._holdingToggleAction = null;
 	}
 }
-
-export const Actions = new ActionsClass();

src/core/editor.ts

@@ -0,0 +1,28 @@
+import { EditorData } from 'data/editor-data';
+import { InspectorData } from 'data/inspector-data';
+import { PhaserMeta } from 'data/phaser-meta';
+import { Actions } from './actions';
+import { History } from './history';
+import { Preferences } from './preferences';
+
+class EditorClass {
+	public data: EditorData
+	public inspectorData: InspectorData;
+	public meta: PhaserMeta;
+
+	public actions: Actions;
+	public history: History;
+	public prefs: Preferences;
+
+	public init() {
+		this.data = new EditorData();
+		this.inspectorData = new InspectorData();
+		this.meta = new PhaserMeta();
+
+		this.actions = new Actions();
+		this.history = new History(this.data);
+		this.prefs = new Preferences();
+	}
+}
+
+export const Editor = new EditorClass();

src/data/history.ts → src/core/history.ts

@@ -1,4 +1,4 @@
-import { Data, DataOrigin } from './data';
+import { DataOrigin, EditorData } from '../data/editor-data';
 
 export interface HistoryEntry {
 	obj: PIXI.DisplayObject;
@@ -7,15 +7,17 @@ export interface HistoryEntry {
 
 const HISTORY_LIMIT = 100;
 
-class HistoryClass {
+export class History {
 	private readonly entries: HistoryEntry[] = [];
 	private holdingEntry: HistoryEntry;
 
 	// TODO change this name please
 	public readonly onHistoryWalk = new Phaser.Signal();
 
-	public holdEntry(entry: HistoryEntry) {
-		this.holdingEntry = entry;
+	constructor(private readonly data: EditorData) { }
+
+	public prepare(obj: PIXI.DisplayObject, properties: { [id: string]: any }) {
+		const entry = this.holdingEntry = { obj, properties };
 		Object.keys(entry.properties).forEach(k =>
 			entry.properties[k] = JSON.stringify(entry.properties[k]));
 		return this;
@@ -38,7 +40,7 @@ class HistoryClass {
 	}
 
 	private apply(entry: HistoryEntry) {
-		Data.selectObject(entry.obj, DataOrigin.HISTORY);
+		this.data.selectObject(entry.obj, DataOrigin.HISTORY);
 
 		const obj = entry.obj;
 		// TODO make this recursive (if necessary)
@@ -52,12 +54,10 @@ class HistoryClass {
 					});
 				} else
 					obj[pk] = prop;
-				Data.propertyChanged(pk, obj[pk], DataOrigin.HISTORY);
+				this.data.propertyChanged(pk, obj[pk], DataOrigin.HISTORY);
 			});
 
 		obj.updateTransform();
 		this.onHistoryWalk.dispatch(entry);
 	}
 }
-
-export const History = new HistoryClass();

src/data/preferences.ts → src/core/preferences.ts

@@ -1,6 +1,6 @@
-export type PreferenceKey = keyof PreferencesClass;
+export type PreferenceKey = keyof Preferences;
 
-class PreferencesClass {
+export class Preferences {
 	private _snap = false;
 
 	public get snap() { return this._snap; }
@@ -25,5 +25,3 @@ class PreferencesClass {
 		this.onPreferenceChanged.dispatch(field, value);
 	}
 }
-
-export const Preferences = new PreferencesClass();

src/data/data.ts → src/data/editor-data.ts

@@ -4,7 +4,7 @@ export enum DataOrigin {
 	INSPECTOR = 2,
 };
 
-class DataClass {
+export class EditorData {
 	private _selectedObject: PIXI.DisplayObject;
 
 	public get selectedObject() { return this._selectedObject; }
@@ -49,5 +49,3 @@ class DataClass {
 		});
 	}
 }
-
-export const Data = new DataClass();

src/data/inspector-data.ts

@@ -0,0 +1,49 @@
+export type InspectableTypes = 'string' | 'number' | 'boolean' | 'point' | 'default';
+
+export interface InspectorPropertyModel {
+	name: string;
+	typeHint: InspectableTypes;
+	data?: any;
+	label?: string;
+}
+
+export class InspectorData {
+	private readonly editors: Partial<Record<InspectableTypes, string>> = {};
+
+	public addEditors(editors: Partial<Record<InspectableTypes, string>>) {
+		Object.keys(editors).forEach(e => this.editors[e] = editors[e]);
+	}
+
+	public readonly inspectableProperties: InspectorPropertyModel[] = [];
+
+	public addInspectableProperties(properties: InspectorPropertyModel[]) {
+		const iproperties = this.inspectableProperties;
+		properties.forEach(prop => {
+			const i = iproperties.findIndex(e => e.name === prop.name);
+			if (i < 0) iproperties.push(prop);
+			else iproperties.splice(i, 1, prop);
+		});
+	}
+
+	public findEditorFor(value: any, data: InspectorPropertyModel) {
+		// TODO what abount null / undefined values?
+
+		const editors = this.editors;
+
+		// TODO this should never fail
+		// first, it tries to find based on the type hint
+		if (data.typeHint in editors) return editors[data.typeHint];
+
+
+		// next, it tries to find by its type
+		const type = typeof value;
+		if (type !== 'object' && type in editors)
+			return editors[type];
+
+		// next, since it's an object, it tries to find by its contructor name
+		const ctor = value.contructor?.name;
+		if (ctor && ctor in editors) return editors[ctor];
+
+		return editors.default;
+	}
+}

src/data/phaser-meta.ts

@@ -0,0 +1,34 @@
+export interface PhaserObjectType {
+	name: string;
+	icon: string;
+}
+
+export class PhaserMeta {
+	private readonly sceneObjects: Record<string, PhaserObjectType> = {
+		[Phaser.BITMAPTEXT]: { name: 'Phaser.BitmapText', icon: 'fa-font' },
+		[Phaser.BUTTON]: { name: 'Phaser.Button', icon: '' },
+		[Phaser.GRAPHICS]: { name: 'Phaser.Graphics', icon: 'fa-square' },
+		[Phaser.GROUP]: { name: 'Phaser.Group', icon: 'fa-dice-d6' },
+		[Phaser.IMAGE]: { name: 'Phaser.Image', icon: 'fa-image' },
+		[Phaser.RETROFONT]: { name: 'Phaser.RetroFont', icon: 'fa-font' },
+		[Phaser.SPRITE]: { name: 'Phaser.Sprite', icon: 'fa-image' },
+		[Phaser.TEXT]: { name: 'Phaser.Text', icon: 'fa-font' },
+		// [Phaser.EMITTER]: { name: 'Phaser.Emitter', icon: '' },
+		// [Phaser.SPRITEBATCH]: { name: 'Phaser.SpriteBatch', icon: 'fa-images' },
+		// [Phaser.TILEMAP]: { name: 'Phaser.TileMap', icon: '' },
+		// [Phaser.TILEMAPLAYER]: { name: 'Phaser.TileMapPlayer', icon: '' },
+		// [Phaser.TILESPRITE]: { name: 'Phaser.TileSprite', icon: '' },
+		// [Phaser.WEBGL_FILTER]: { name: 'Phaser.WebGLFilter', icon: '' },
+		// [Phaser.ROPE]: { name: 'Phaser.Rope', icon: '' },
+		// [Phaser.CREATURE]: { name: 'Phaser.Creature', icon: '' },
+		// [Phaser.VIDEO]: { name: 'Phaser.Video', icon: '' },
+	};
+
+	public addSceneObjects(objects: Record<string, PhaserObjectType>) {
+		Object.keys(objects).forEach(k => this.sceneObjects[k] = objects[k]);
+	}
+
+	private readonly defaultType: PhaserObjectType = { name: 'default', icon: 'fa-question' };
+
+	public getType(t: number) { return t in this.sceneObjects ? this.sceneObjects[t] : this.defaultType; }
+}

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

@@ -1,5 +1,5 @@
-import { Actions } from 'data/actions';
-import { Widget } from 'editor/widget/widget';
+import { Widget } from 'editor-view/widget/widget';
+import { Editor } from 'core/editor';
 import './actions-toolbar.scss';
 import { ActionButton } from './button/action-button';
 
@@ -14,7 +14,7 @@ export class ActionsToolbar extends Widget {
 
 	private createButton(actionId: string) {
 		const btn = document.createElement(ActionButton.tagName) as ActionButton;
-		btn.setAction(Actions.getAction(actionId));
+		btn.setAction(Editor.actions.getAction(actionId));
 		this.appendChild(btn);
 	}
 }

src/editor/editor.scss → src/editor-view/editor-view.scss

@@ -1,4 +1,4 @@
-phred-editor {
+phred-editor-view {
 	flex: 1;
 	display: flex;
 	align-items: stretch;

src/editor/editor.ts → src/editor-view/editor-view.ts

@@ -1,13 +1,14 @@
-import { Data, DataOrigin } from 'data/data';
+import { Editor } from 'core/editor';
+import { DataOrigin } from 'data/editor-data';
 import { ActionsToolbar } from './actions/actions-toolbar';
-import './editor.scss';
+import './editor-view.scss';
 import { ObjectTreeInspector } from './object-tree/inspector/object-tree-inspector';
 import { Panel } from './panel/panel';
 import { PropertiesInspector } from './properties/inspector/properties-inspector';
 import { Widget } from './widget/widget';
 
-export class Editor extends Widget {
-	public static readonly tagName: string = 'phred-editor';
+export class EditorView extends Widget {
+	public static readonly tagName: string = 'phred-editor-view';
 
 	private _game: Phaser.Game;
 	private actions: ActionsToolbar;
@@ -17,7 +18,7 @@ export class Editor extends Widget {
 	public connectedCallback() {
 		super.connectedCallback();
 
-		Data.onSelectedObjectChanged.add(this.selectObject, this);
+		Editor.data.onSelectedObjectChanged.add(this.selectObject, this);
 
 		const script = document.createElement('script');
 		script.src = 'https://kit.fontawesome.com/7ba4e59e46.js';
@@ -72,4 +73,4 @@ export class Editor extends Widget {
 	}
 }
 
-customElements.define(Editor.tagName, Editor);
+customElements.define(EditorView.tagName, EditorView);

src/editor/inspector/inspector.ts → src/editor-view/inspector/inspector.ts

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

src/editor/object-tree/inspector/object-tree-inspector.ts → src/editor-view/object-tree/inspector/object-tree-inspector.ts

@@ -1,5 +1,6 @@
-import { Data, DataOrigin } from 'data/data';
-import { Inspector } from 'editor/inspector/inspector';
+import { Editor } from 'core/editor';
+import { DataOrigin } from 'data/editor-data';
+import { Inspector } from 'editor-view/inspector/inspector';
 import { ObjectMapItemModel, ObjectTreeModel } from '../model/object-tree-model';
 import { TreeNode } from '../tree-node/tree-node';
 import './object-tree-inspector.scss';
@@ -11,7 +12,7 @@ export class ObjectTreeInspector extends Inspector {
 	public connectedCallback() {
 		super.connectedCallback();
 		this.title = 'Objects';
-		Data.onPropertyChanged.add(this.onPropertyChanged, this);
+		Editor.data.onPropertyChanged.add(this.onPropertyChanged, this);
 	}
 
 	private onPropertyChanged(_: DataOrigin, property: string, value: any) {
@@ -56,7 +57,7 @@ export class ObjectTreeInspector extends Inspector {
 		if (node?.model === this._lastSelectedModel) return;
 		if (this._lastSelectedModel) this._lastSelectedModel.node.clearSelection();
 		this._lastSelectedModel = node.model;
-		Data.selectObject(node.model.obj, DataOrigin.INSPECTOR);
+		Editor.data.selectObject(node.model.obj, DataOrigin.INSPECTOR);
 	}
 
 	private onNodeCollapseStateChanged(node: TreeNode, collapsed: boolean, all: boolean) {

src/editor/object-tree/model/object-tree-model.ts → src/editor-view/object-tree/model/object-tree-model.ts

@@ -1,4 +1,5 @@
-import { PhaserData, PhaserObjectType } from 'data/phaser-data';
+import { Editor } from 'core/editor';
+import { PhaserObjectType } from 'data/phaser-meta';
 import { IdUtil } from 'util/id.util';
 import { TreeNode } from '../tree-node/tree-node';
 
@@ -23,7 +24,7 @@ export class ObjectTreeModel {
 	}
 
 	private createNode(child: PIXI.DisplayObject, map: Record<number, ObjectMapItemModel>, parent: ObjectMapItemModel, level: number) {
-		const type = PhaserData.getType(child.type);
+		const type = Editor.meta.getType(child.type);
 		child.__instanceId = IdUtil.genIntId();
 		child.__type = type.name;
 		const isLeaf = !(child.children && child.children.length > 0);

src/editor/object-tree/tree-node/tree-node.ts → src/editor-view/object-tree/tree-node/tree-node.ts

@@ -1,4 +1,4 @@
-import { PhaserObjectType } from 'data/phaser-data';
+import { PhaserObjectType } from 'data/phaser-meta';
 import { ObjectMapItemModel } from '../model/object-tree-model';
 import './tree-node.scss';
 

src/editor/panel/panel.ts → src/editor-view/panel/panel.ts

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

src/editor/properties/editors/boolean/boolean-property-editor.ts → src/editor-view/properties/editors/boolean/boolean-property-editor.ts

@@ -1,12 +1,12 @@
-import { PropertyInspectionData } from 'editor/properties-editors';
+import { InspectorPropertyModel } from 'data/inspector-data';
 import { PropertyEditor } from '../property-editor';
 
 export class BooleanPropertyEditor extends PropertyEditor<boolean> {
 	public static readonly tagName: string = 'phed-boolean-property-editor';
 
 	private input: HTMLInputElement;
 
-	protected createInnerContent(fieldId: string, _value: boolean, prop: PropertyInspectionData) {
+	protected createInnerContent(fieldId: string, _value: boolean, prop: InspectorPropertyModel) {
 		const input = this.input = document.createElement('input');
 		input.id = fieldId;
 		input.setAttribute('type', 'checkbox');