added inspector properties

example/game.js

@@ -3,7 +3,7 @@ const game = new Phaser.Game({
 	height: 2000,
 	renderer: Phaser.CANVAS,
 	parent: 'game',
-	scaleMode: Phaser.ScaleManager.SHOW_ALL,
+	scaleMode: Phaser.ScaleManager.USER_SCALE,
 	state: { preload, create, update },
 	backgroundColor: '#333',
 });

src/data/inspector-data.ts

@@ -7,28 +7,46 @@ export interface InspectorPropertyModel {
 	label?: string;
 }
 
+export interface ObjectInspectorModel {
+	title: string;
+	properties: 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 getEditorFor(data: InspectorPropertyModel) {
+		return data.typeHint in this.editors
+			? this.editors[data.typeHint]
+			: this.editors.default;
+	}
+
+	private readonly inspectableProperties: Record<string, 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);
-		});
+		properties.forEach(prop => this.inspectableProperties[prop.name] = prop);
 	}
 
-	public findEditorFor(data: InspectorPropertyModel) {
-		// TODO what abount null / undefined values?
-		return (data.typeHint in this.editors)
-			? this.editors[data.typeHint]
-			: this.editors.default;
+	public getInspectableProperty(name: string) {
+		if (name in this.inspectableProperties)
+			return this.inspectableProperties[name];
+		throw `Could not find inspectable editor for property ${name}`;
+	}
+
+	private readonly inspectorProperties: Record<string, ObjectInspectorModel[]> = {};
+
+	public addInspectorProperties(type: string, inspectors: ObjectInspectorModel[]) {
+		this.inspectorProperties[type] = inspectors;
+	}
+
+	public getInspectorPropertiesForType(type: string) {
+		return type in this.inspectorProperties
+			? this.inspectorProperties[type]
+			: this.inspectorProperties.default;
 	}
 }

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

@@ -40,13 +40,20 @@ export class PropertiesInspector extends Inspector {
 
 		this.contentElement.style.visibility = 'visible';
 
-		Editor.inspectorData.inspectableProperties
-			.forEach(prop => this.createEditorForProperty(obj, prop));
+		const idata = Editor.inspectorData;
+		const propertyGroups = idata.getInspectorPropertiesForType(obj.__type)
+		propertyGroups.forEach(group => {
+			group.properties.forEach(prop =>
+				this.createEditorForProperty(obj, idata.getInspectableProperty(prop)))
+		})
+		// properties.forEach(prop => this.createEditorForProperty(obj, prop));
+
+		// Editor.inspectorData.inspectableProperties
 	}
 
 	private createEditorForProperty(obj: PIXI.DisplayObject, prop: InspectorPropertyModel) {
 		if (!(prop.name in obj)) return;
-		const elementId = Editor.inspectorData.findEditorFor(prop);
+		const elementId = Editor.inspectorData.getEditorFor(prop);
 		const editor = this.createPropertyEditor(prop, obj[prop.name], elementId);
 		this.editors[prop.name] = editor;
 	}

src/editor.window.ts

@@ -11,6 +11,10 @@ import { StringPropertyEditor } from 'editor-view/properties/editors/string/stri
 import { ReferenceImage } from 'scene-view/reference-image';
 import { SceneView } from 'scene-view/scene-view';
 
+// TODO rename this class for God's sake
+// TODO split this class into two:
+// 	* one for data initialization
+//		* and another for the workflow
 export class EditorWindow {
 	private _initialized = false;
 	private disabledUI: DisabledUI;
@@ -101,7 +105,34 @@ export class EditorWindow {
 			{ name: 'angle', typeHint: 'number', data: { readonly: true } },
 			{ name: '_bounds', label: 'bounds', typeHint: 'rect', data: { readonly: true } },
 			{ name: 'key', typeHint: 'string' },
-			{ name: 'frameName', label: 'frame', typeHint: 'string' }
+			{ name: 'frameName', label: 'frame', typeHint: 'string' },
+			{ name: 'font', typeHint: 'string' },
+			{ name: 'fontSize', typeHint: 'number' },
+			{ name: 'fontStyle', typeHint: 'string' },
+			{ name: 'fontVariant', typeHint: 'string' },
+			{ name: 'fontWeight', typeHint: 'string' },
+		]);
+
+		const basicProperties = {
+			title: '', properties: [
+				'__type', 'name', 'position', 'scale', 'pivot', 'anchor',
+				'alpha', 'visible', 'angle', '_bounds'
+			]
+		};
+
+		Editor.inspectorData.addInspectorProperties('default', [basicProperties]);
+
+		Editor.inspectorData.addInspectorProperties('Phaser.Sprite', [
+			basicProperties,
+			{ title: 'Image', properties: ['key', 'frameName'] },
+		]);
+
+		Editor.inspectorData.addInspectorProperties('Phaser.Text', [
+			basicProperties,
+			{
+				title: 'Text',
+				properties: ['font', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight']
+			},
 		]);
 	}
 

src/plugin.ts

@@ -58,8 +58,11 @@ export class Plugin extends Phaser.Plugin {
 		this._disableVisibilityChangeMemento = this.game.stage.disableVisibilityChange;
 		this.game.stage.disableVisibilityChange = true;
 		this.hasPostUpdate = true;
+
 		this._gameSpeedMemento = this.game.time.slowMotion;
 		if (this.config.pauseGame) this.game.time.slowMotion = Number.POSITIVE_INFINITY
+
+		this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
 		if (this.config.onShow) this.config.onShow();
 	}