editor changes being reflected into the inspector

src/data.ts

@@ -24,7 +24,8 @@ class DataClass {
 	}
 
 	public propertyChanged(property: string, value: any, from: FROM) {
-		this.onPropertyChanged[from].dispatch(property, value, this._selectedObject, from);
+		if (this._selectedObject)
+			this.onPropertyChanged[from].dispatch(property, value, this._selectedObject, from);
 	}
 
 }

src/editor/selection/scale/scale.handler.ts

@@ -1,3 +1,4 @@
+import { Data, EDITOR } from 'data';
 import { ScaleGizmo } from './scale.gizmo';
 import { Scaler } from './scaler';
 
@@ -66,6 +67,10 @@ export class ScaleHandler extends Phaser.Group {
 		if (!this._scaling) return false;
 		const pointer = this.game.input.mousePointer;
 		this.scaler.scaleToPoint(pointer.x, pointer.y);
+
+		// TODO schedule all changes to the next update
+		Data.propertyChanged('scale', this.selectedObject.scale, EDITOR);
+		Data.propertyChanged('position', this.selectedObject.position, EDITOR);
 		return true;
 	}
 }

src/editor/selection/selection.ts

@@ -1,3 +1,4 @@
+import { Data, EDITOR } from 'data';
 import { ANCHOR_COLOR, ANCHOR_STROKE, BORDER_COLOR, BORDER_STROKE, PIVOT_COLOR, PIVOT_STROKE } from '../editor.colors';
 import { ScaleHandler } from './scale/scale.handler';
 
@@ -82,6 +83,9 @@ export class Selection extends Phaser.Group {
 		this.position.set(pos.x + deltaX, pos.y + deltaY);
 		pos = this._obj.position;
 		this._obj.position.set(pos.x + deltaX, pos.y + deltaY);
+
+		// TODO schedule all changes to the next update
+		Data.propertyChanged('position', pos, EDITOR);
 	}
 
 	public update() {

src/ui/properties/editors/boolean/boolean-property-editor.ts

@@ -4,6 +4,8 @@ import { PropertyEditor } from '../property-editor';
 export class BooleanPropertyEditor extends PropertyEditor<boolean> {
 	public static readonly tagName: string = 'phed-boolean-property-editor';
 
+	private input: HTMLElement;
+
 	protected createInnerContent(value: boolean, propertyId: string, prop: PropertyInspectionData) {
 		const input = document.createElement('input');
 		input.id = propertyId;
@@ -14,6 +16,12 @@ export class BooleanPropertyEditor extends PropertyEditor<boolean> {
 
 		return input;
 	}
+
+	public updateContent(value: boolean) {
+		if (value) this.input.setAttribute('checked', '');
+		else this.input.removeAttribute('checked');
+	}
+
 }
 
 customElements.define(BooleanPropertyEditor.tagName, BooleanPropertyEditor);

src/ui/properties/editors/number/number-property-editor.ts

@@ -5,9 +5,11 @@ import './number-property-editor.scss';
 export class NumberPropertyEditor extends PropertyEditor<number> {
 	public static readonly tagName: string = 'phed-number-property-editor';
 
+	private input: HTMLElement;
+
 	protected createInnerContent(value: number, propertyId: string, prop: PropertyInspectionData) {
 		value = value === null || isNaN(value) ? 0 : value;
-		const input = document.createElement('input');
+		const input = this.input = document.createElement('input');
 		input.id = propertyId;
 
 		input.setAttribute('type', 'number');
@@ -16,6 +18,11 @@ export class NumberPropertyEditor extends PropertyEditor<number> {
 
 		return input;
 	}
+
+	public updateContent(value: number) {
+		value = value === null || isNaN(value) ? 0 : value;
+		this.input.setAttribute('value', value.toString());
+	}
 }
 
 customElements.define(NumberPropertyEditor.tagName, NumberPropertyEditor);

src/ui/properties/editors/point/point-property-editor.ts

@@ -4,6 +4,9 @@ import { PropertyEditor } from '../property-editor';
 export class PointPropertyEditor extends PropertyEditor<PIXI.Point> {
 	public static readonly tagName: string = 'phed-point-property-editor';
 
+	private xinput: NumberPropertyEditor;
+	private yinput: NumberPropertyEditor;
+
 	public connectedCallback() {
 		super.connectedCallback();
 		this.classList.add('has-children');
@@ -15,18 +18,23 @@ export class PointPropertyEditor extends PropertyEditor<PIXI.Point> {
 		const parent = document.createElement('div');
 		this.appendChild(parent);
 
-		const xinput = document.createElement(NumberPropertyEditor.tagName) as NumberPropertyEditor;
+		const xinput = this.xinput = document.createElement(NumberPropertyEditor.tagName) as NumberPropertyEditor;
 		xinput.setContent({ name: 'x', typeHint: 'number' }, value.x);
 		xinput.id = propertyId;
 		parent.appendChild(xinput);
 
-		const yinput = document.createElement(NumberPropertyEditor.tagName) as NumberPropertyEditor;
+		const yinput = this.yinput = document.createElement(NumberPropertyEditor.tagName) as NumberPropertyEditor;
 		yinput.setContent({ name: 'y', typeHint: 'number' }, value.y);
 		yinput.id = propertyId;
 		parent.appendChild(yinput);
 
 		return parent;
 	}
+
+	public updateContent(value: PIXI.Point) {
+		this.xinput.updateContent(value.x);
+		this.yinput.updateContent(value.y);
+	}
 }
 
 customElements.define(PointPropertyEditor.tagName, PointPropertyEditor);

src/ui/properties/editors/property-editor.ts

@@ -8,6 +8,14 @@ export abstract class PropertyEditor<T> extends HTMLElement {
 		this.classList.add('property-editor');
 	}
 
+	public setContent(prop: PropertyInspectionData, value: T) {
+		const propId = `${prop.name}-${PropertyEditor.randomId()}`;
+		const title = this.createLabel(propId, prop);
+		const content = this.createContent(value, propId, prop);
+		this.appendChild(title);
+		this.appendChild(content);
+	}
+
 	protected createLabel(propertyId: string, prop: PropertyInspectionData): HTMLElement {
 		const label = document.createElement('label');
 		label.classList.add('property-title');
@@ -28,11 +36,5 @@ export abstract class PropertyEditor<T> extends HTMLElement {
 
 	protected abstract createInnerContent(value: T, propertyId: string, prop: PropertyInspectionData): HTMLElement;
 
-	public setContent(prop: PropertyInspectionData, value: T) {
-		const propId = `${prop.name}-${PropertyEditor.randomId()}`;
-		const title = this.createLabel(propId, prop);
-		const content = this.createContent(value, propId, prop);
-		this.appendChild(title);
-		this.appendChild(content);
-	}
+	public abstract updateContent(value: T): void;
 }

src/ui/properties/editors/string/string-property-editor.ts

@@ -3,15 +3,20 @@ import { PropertyEditor } from '../property-editor';
 
 export class StringPropertyEditor extends PropertyEditor<string> {
 	public static readonly tagName: string = 'phed-string-property-editor';
+	private input: HTMLElement;
 
 	protected createInnerContent(value: string, propertyId: string, prop: PropertyInspectionData) {
-		const input = document.createElement('input');
+		const input = this.input = document.createElement('input');
 		input.id = propertyId;
 		input.setAttribute('type', 'text');
 		input.setAttribute('value', value ?? '');
 		if (prop.data) Object.keys(prop.data).forEach(p => input.setAttribute(p, prop.data[p]));
 		return input;
 	}
+
+	public updateContent(value: string) {
+		this.input.setAttribute('value', value ?? '');
+	}
 }
 
 customElements.define(StringPropertyEditor.tagName, StringPropertyEditor);

src/ui/properties/panel/properties-panel.ts

@@ -1,10 +1,12 @@
-import { PropertiesEditors, PropertyInspectionData } from 'ui/properties-editors';
+import { Data, EDITOR } from 'data';
+import { InspectableTypes, PropertiesEditors, PropertyInspectionData } from 'ui/properties-editors';
 import { Widget } from 'ui/widget/widget';
 import { PropertyEditor } from '../editors/property-editor';
 import './properties-panel.scss';
 
 export class PropertiesPanel extends Widget {
 	public static readonly tagName: string = 'phed-properties-panel';
+	private editors: Record<string, PropertyEditor<any>> = {};
 
 	private content: HTMLElement;
 
@@ -19,35 +21,45 @@ export class PropertiesPanel extends Widget {
 		const content = this.content = document.createElement('div');
 		content.classList.add('content');
 		this.appendChild(content);
+
+		Data.addPropertyChangedListener(EDITOR, this.onPropertyChangedOnEditor, this);
+	}
+
+	private onPropertyChangedOnEditor(property: string, value: any) {
+		this.editors[property]?.updateContent(value);
 	}
 
-	private createPropertyRow(prop: PropertyInspectionData, value: any, tagName: string) {
-		const row = document.createElement(tagName) as PropertyEditor<any>;
-		row.setContent(prop, value);
-		this.content.appendChild(row);
+	private createPropertyEditor(prop: PropertyInspectionData, value: any, tagName: string) {
+		const editor = document.createElement(tagName) as PropertyEditor<any>;
+		editor.setContent(prop, value);
+		this.content.appendChild(editor);
+		return editor;
 	}
 
 	public selectObject(obj: PIXI.DisplayObject) {
+		// TODO what happen with the instances? Are they garbage collected?
 		const emptyContent = this.content.cloneNode(false);
 		this.replaceChild(emptyContent, this.content);
 		this.content = emptyContent as HTMLElement;
+		this.editors = {};
 
 		if (!obj) {
 			this.content.style.visibility = 'hidden';
 			return;
 		}
+
 		this.content.style.visibility = 'visible';
-		console.log(obj);
 
-		// TODO move this array to a proper place
-		// TODO they could have a type hint
 		PropertiesEditors.inspectableProperties
 			.forEach(prop => {
 				if (!(prop.name in obj)) return;
 				const elementId = PropertiesEditors.findEditorFor(obj[prop.name], prop);
-				this.createPropertyRow(prop, obj[prop.name], elementId);
+				const editor = this.createPropertyEditor(prop, obj[prop.name], elementId);
+				this.editors[prop.name] = editor;
 			});
 	}
+
+
 }
 
 customElements.define(PropertiesPanel.tagName, PropertiesPanel);