properties for the selected object path

src/editor/editor.view.ts

@@ -20,6 +20,8 @@ export class EditorView extends Phaser.Group {
 	/** Whether the input down event happened here */
 	private _isInputDown = false;
 
+	public readonly onSelectedObjectChanged = new Phaser.Signal();
+
 	constructor(game: Phaser.Game, container: Phaser.Group | Phaser.Stage, parent: Phaser.Group | Phaser.Stage) {
 		super(game, parent);
 		this.name = '__editor';
@@ -75,9 +77,10 @@ export class EditorView extends Phaser.Group {
 		const objects: PIXI.DisplayObject[] = [];
 		this.getObjectsUnderPoint(pointer.x, pointer.y, this.container.children, objects);
 
-		const selection = this.model.setSelectionTree(objects);
-		this.selection.setSelection(selection);
-		return selection !== null;
+		const obj = this.model.setSelectionTree(objects);
+		this.selection.select(obj);
+		this.onSelectedObjectChanged.dispatch(obj);
+		return obj !== null;
 	}
 
 	private getObjectsUnderPoint(x: number, y: number, children: PIXI.DisplayObject[], objects: PIXI.DisplayObject[]) {

src/editor/selection/selection.ts

@@ -19,10 +19,10 @@ export class Selection extends Phaser.Group {
 		this.scaleHandler = new ScaleHandler(game);
 		this.addChild(this.scaleHandler);
 
-		this.setSelection(null);
+		this.select(null);
 	}
 
-	public setSelection(obj: PIXI.DisplayObject) {
+	public select(obj: PIXI.DisplayObject) {
 		this._obj = obj;
 		this.view.clear();
 		this.scaleHandler.selectedObject = obj;

src/plugin.ts

@@ -12,8 +12,8 @@ export class Plugin extends Phaser.Plugin {
 		document.body.appendChild(stage);
 
 		group = group ?? game.world;
-		new EditorView(game, group, game.stage);
-
+		const editor = new EditorView(game, group, game.stage);
 		stage.game = game;
+		editor.onSelectedObjectChanged.add(stage.selectObject, stage);
 	}
 }

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

@@ -17,30 +17,42 @@ export class PropertiesPanel extends Widget {
 		const content = this.content = document.createElement('div');
 		content.classList.add('content');
 		this.appendChild(content);
+	}
+
+	private createPropertyRow(name: string, value: any) {
+		const propId = `prop-value-${name}`;
 
 		const prop = document.createElement('div');
 		prop.classList.add('property-editor');
-		content.appendChild(prop);
+		this.content.appendChild(prop);
 
 		const propTitle = document.createElement('label');
 		propTitle.classList.add('property-title');
-		propTitle.append('name');
-		propTitle.setAttribute('for', 'prop-value')
+		propTitle.append(name);
+		propTitle.setAttribute('for', propId);
 		prop.append(propTitle);
 
 		const propContent = document.createElement('div');
 		propContent.classList.add('property-content');
 		prop.append(propContent);
 
+		// TODO make this specific for each type of property
 		const propValue = document.createElement('input');
-		propValue.id = 'prop-value';
+		propValue.id = propId;
 		propValue.setAttribute('type', 'text');
-		propValue.setAttribute('value', 'Object name');
+		propValue.setAttribute('value', value);
 		propContent.append(propValue);
 	}
 
 	public selectObject(obj: PIXI.DisplayObject) {
-
+		const emptyContent = this.content.cloneNode(false);
+		this.replaceChild(emptyContent, this.content);
+		this.content = emptyContent as HTMLElement;
+
+		if (!obj) return;
+		['name', 'scale'].forEach(prop => {
+			if (prop in obj) this.createPropertyRow(prop, obj[prop]);
+		});
 	}
 }
 

src/ui/properties/toolbar/properties-toolbar.ts

@@ -4,11 +4,17 @@ import './properties-toolbar.scss';
 
 export class PropertiesToolbar extends Widget {
 	public static readonly tagId = 'phred-properties-toolbar';
+	private readonly panels: PropertiesPanel[] = [];	// TODO depend on an interface or abstract class here
 
 	public connectedCallback() {
 		super.connectedCallback();
-		const panel = document.createElement(PropertiesPanel.tagId);
+		const panel = document.createElement(PropertiesPanel.tagId) as PropertiesPanel;
 		this.appendChild(panel);
+		this.panels.push(panel);
+	}
+
+	public selectObject(obj: PIXI.DisplayObject) {
+		this.panels.forEach(p => p.selectObject(obj));
 	}
 }
 

src/ui/stage.ts

@@ -8,21 +8,21 @@ export class Stage extends Widget {
 	public static readonly tagId = 'phred-stage';
 
 	private _game: Phaser.Game;
-	private _actions: ActionsToolbar;
-	private _gameContainer: HTMLElement;
-	private _properties: PropertiesToolbar;
+	private actions: ActionsToolbar;
+	private gameContainer: HTMLElement;
+	private properties: PropertiesToolbar;
 
 	public get game() { return this._game; }
 
 	public set game(game: Phaser.Game) {
 		if (game) {
 			const el = game.canvas.parentElement;
 			el.classList.add('phred-game');
-			this._gameContainer.appendChild(el);
+			this.gameContainer.appendChild(el);
 		} else if (this._game) {
 			const el = this._game.canvas.parentElement;
 			el.classList.remove('phred-game');
-			this._gameContainer.removeChild(el);
+			this.gameContainer.removeChild(el);
 		}
 		this._game = game;
 	}
@@ -34,15 +34,19 @@ export class Stage extends Widget {
 		content.classList.add('phred-content');
 		this.appendChild(content);
 
-		this._actions = document.createElement(ActionsToolbar.tagId) as ActionsToolbar;
-		content.appendChild(this._actions);
+		this.actions = document.createElement(ActionsToolbar.tagId) as ActionsToolbar;
+		content.appendChild(this.actions);
 
-		this._gameContainer = document.createElement('div');
-		this._gameContainer.classList.add('phred-game-container');
-		content.appendChild(this._gameContainer);
+		this.gameContainer = document.createElement('div');
+		this.gameContainer.classList.add('phred-game-container');
+		content.appendChild(this.gameContainer);
 
-		this._properties = document.createElement(PropertiesToolbar.tagId) as PropertiesToolbar;
-		this.appendChild(this._properties);
+		this.properties = document.createElement(PropertiesToolbar.tagId) as PropertiesToolbar;
+		this.appendChild(this.properties);
+	}
+
+	public selectObject(obj: PIXI.DisplayObject) {
+		this.properties.selectObject(obj);
 	}
 }