renaming objects in the inspector also rename them in the tree

TODO.todo

@@ -36,8 +36,9 @@ BASIC:
 	Object Tree:
 		[x] panel
 		[x] show complete object tree
-		[ ] selecting an object into the scene should select it in the tree
-		[ ] selecting an object into the true should select it in the scene
+		[x] selecting an object into the scene should select it in the tree
+		[x] selecting an object into the true should select it in the scene
+		[x] renaming objects in the inspector should rename them in the tree
 		[ ] expand / collapse sub-trees
 			[ ] automatic expand when selecting
 		[ ] update tree content

src/data/data.ts

@@ -25,13 +25,13 @@ class DataClass {
 		this.onSelectedObjectChanged[from].dispatch(value, from);
 	}
 
-	private readonly onPropertyChanged: Record<DataOrigin, PropertyChangedListener> = {
-		[DataOrigin.SCENE]: null,
-		[DataOrigin.INSPECTOR]: null,
+	private readonly onPropertyChanged: Record<DataOrigin, Phaser.Signal> = {
+		[DataOrigin.SCENE]: new Phaser.Signal(),
+		[DataOrigin.INSPECTOR]: new Phaser.Signal(),
 	};
 
-	public setPropertyChangedListener(from: DataOrigin, listener: PropertyChangedListener) {
-		this.onPropertyChanged[from] = listener;
+	public addPropertyChangedListener(from: DataOrigin, listener: PropertyChangedListener) {
+		this.onPropertyChanged[from].add(listener);
 	}
 
 	public propertyChanged(property: string, value: any, from: DataOrigin) {
@@ -50,7 +50,7 @@ class DataClass {
 		this._scheduledEvents = {};
 		Object.keys(events).forEach(k => {
 			const e = events[k];
-			this.onPropertyChanged[e.from](k, e.value, this._selectedObject, e.from);
+			this.onPropertyChanged[e.from].dispatch(k, e.value, this._selectedObject, e.from);
 		});
 	}
 }

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

@@ -11,6 +11,12 @@ export class ObjectTreeInspector extends Inspector {
 	public connectedCallback() {
 		super.connectedCallback();
 		this.title = 'Objects';
+		Data.addPropertyChangedListener(DataOrigin.INSPECTOR, this.onPropertyChanged.bind(this));
+	}
+
+	private onPropertyChanged(property: string, value: string) {
+		if (!(property === 'name' && this._lastSelectedModel)) return;
+		this._lastSelectedModel.node.updateTitle(this._lastSelectedModel.type, value);
 	}
 
 	public setContent(root: PIXI.DisplayObjectContainer | Phaser.Stage) {

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

@@ -1,11 +1,18 @@
-import { PhaserData, PhaserObjectType } from 'data/phaser-data';
+import { PhaserObjectType } from 'data/phaser-data';
 import './tree-node.scss';
 
 export class TreeNode extends HTMLElement {
 	public static readonly tagName: string = 'phed-tree-node';
 	public obj: PIXI.DisplayObject;
 	public onNodeSelect: (node: TreeNode) => void;
 
+	private label: HTMLElement;
+
+	public updateTitle(type: PhaserObjectType, value: string) {
+		if (!this.obj) return;
+		this.label.textContent = value?.length > 0 ? value : type.name;
+	}
+
 	public setContent(obj: PIXI.DisplayObject, type: PhaserObjectType) {
 		this.obj = obj;
 		const head = document.createElement('div');
@@ -17,9 +24,9 @@ export class TreeNode extends HTMLElement {
 		icon.classList.add('fas', 'node-icon', type.icon);
 		head.appendChild(icon);
 
-		const label = document.createElement('div');
+		const label = this.label = document.createElement('div');
 		label.classList.add('node-name');
-		label.textContent = obj.name && obj.name.length > 0 ? obj.name : type.name;
+		label.textContent = obj.name?.length > 0 ? obj.name : type.name;
 		head.appendChild(label);
 	}
 

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

@@ -11,7 +11,7 @@ export class PropertiesInspector extends Inspector {
 	public connectedCallback() {
 		super.connectedCallback();
 		this.title = 'Properties';
-		Data.setPropertyChangedListener(DataOrigin.SCENE, this.onPropertyChangedInsideEditor.bind(this));
+		Data.addPropertyChangedListener(DataOrigin.SCENE, this.onPropertyChangedInsideEditor.bind(this));
 	}
 
 	private onPropertyChangedInsideEditor(property: string, value: any) {

src/scene/scene-editor.ts

@@ -37,7 +37,7 @@ export class SceneEditor extends Phaser.Group {
 
 		this.selection = new Selection(game);
 		this.addChild(this.selection);
-		Data.setPropertyChangedListener(DataOrigin.INSPECTOR, this.onPropertyChangedInsideInspector.bind(this));
+		Data.addPropertyChangedListener(DataOrigin.INSPECTOR, this.onPropertyChangedInsideInspector.bind(this));
 		Data.addObjectSelectionChangedListener(DataOrigin.INSPECTOR, this.onObjectSelectedInsideInspector.bind(this));
 	}