properties inspector as a inspector

src/editor/editor.ts

@@ -1,6 +1,7 @@
 import { ActionsToolbar } from './actions/actions-toolbar';
 import './editor.scss';
 import { Panel } from './panel/panel';
+import { PropertiesInspector } from './properties/inspector/properties-inspector';
 import { Widget } from './widget/widget';
 
 
@@ -10,8 +11,7 @@ export class Editor extends Widget {
 	private _game: Phaser.Game;
 	private actions: ActionsToolbar;
 	private gameContainer: HTMLElement;
-	private leftPanel: Panel;
-	private rightPanel: Panel;
+	private panels: Panel[] = [];
 
 	public connectedCallback() {
 		super.connectedCallback();
@@ -21,13 +21,12 @@ export class Editor extends Widget {
 		script.crossOrigin = 'anonymous';
 		document.head.appendChild(script);
 
-		this.leftPanel = document.createElement(Panel.tagName) as Panel;
-		this.leftPanel.classList.add('left', 'small');
-		this.appendChild(this.leftPanel);
+		const leftPanel = this.appendChild(document.createElement(Panel.tagName) as Panel);
+		leftPanel.classList.add('left', 'small');
+		this.panels.push(leftPanel);
 
-		const content = document.createElement('div');
+		const content = this.appendChild(document.createElement('div'));
 		content.classList.add('phred-content');
-		this.appendChild(content);
 
 		this.actions = document.createElement(ActionsToolbar.tagName) as ActionsToolbar;
 		content.appendChild(this.actions);
@@ -36,12 +35,15 @@ export class Editor extends Widget {
 		this.gameContainer.classList.add('phred-game-container');
 		content.appendChild(this.gameContainer);
 
-		this.rightPanel = document.createElement(Panel.tagName) as Panel;
-		this.rightPanel.classList.add('right', 'large');
-		this.appendChild(this.rightPanel);
+		const rightPanel = this.appendChild(document.createElement(Panel.tagName) as Panel);
+		rightPanel.classList.add('right', 'large');
+		this.panels.push(rightPanel);
+
+		const props = document.createElement(PropertiesInspector.tagName) as PropertiesInspector;
+		rightPanel.addInspector(props);
 	}
 
-	public setup(game: Phaser.Game, root: PIXI.DisplayObject | Phaser.Stage) {
+	public setup(game: Phaser.Game, group: PIXI.DisplayObjectContainer | Phaser.Stage) {
 		if (game) {
 			const el = game.canvas.parentElement;
 			el.classList.add('phred-game');
@@ -52,12 +54,10 @@ export class Editor extends Widget {
 			this.gameContainer.removeChild(el);
 		}
 		this._game = game;
-		// this.objectTree.setContent(root);
 	}
 
 	public selectObject(obj: PIXI.DisplayObject) {
-		// this.properties.selectObject(obj);
-		// this.objectTree.selectObject(obj);
+		this.panels.forEach(panel => panel.selectObject(obj));
 	}
 }
 

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

@@ -6,7 +6,6 @@ export class ObjectTreeToolbar extends HTMLElement {
 	public static readonly tagName: string = 'phed-object-tree-toolbar';
 
 	public setContent(root: PIXI.DisplayObject | Phaser.Stage) {
-		console.log(root);
 		const content = document.createElement('div');
 		content.classList.add('content');
 		this.createItem(root, content, 0);

src/editor/panel/panel.ts

@@ -1,10 +1,11 @@
+import { Inspector } from 'editor/inspector/inspector';
 import { Widget } from 'editor/widget/widget';
 import { PropertiesInspector } from '../properties/inspector/properties-inspector';
 import './panel.scss';
 
 export class Panel extends Widget {
 	public static readonly tagName: string = 'phred-panel';
-	private readonly inspectors: PropertiesInspector[] = [];	// TODO depend on an interface or abstract class here
+	private readonly inspectors: Inspector[] = [];	// TODO depend on an interface or abstract class here
 
 	// public connectedCallback() {
 	// 	super.connectedCallback();
@@ -13,6 +14,11 @@ export class Panel extends Widget {
 	// 	this.panels.push(panel);
 	// }
 
+	public addInspector(inspector: Inspector) {
+		this.appendChild(inspector);
+		this.inspectors.push(inspector);
+	}
+
 	public selectObject(obj: PIXI.DisplayObject) {
 		this.inspectors.forEach(p => p.selectObject(obj));
 	}

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

@@ -1,27 +1,15 @@
 import { Data, DataOrigin } from 'data/data';
+import { Inspector } from 'editor/inspector/inspector';
 import { PropertiesEditors, PropertyInspectionData } from 'editor/properties-editors';
-import { Widget } from 'editor/widget/widget';
 import { PropertyEditor } from '../editors/property-editor';
-import './properties-inspector.scss';
 
-export class PropertiesInspector extends Widget {
+export class PropertiesInspector extends Inspector {
 	public static readonly tagName: string = 'phed-properties-inspector';
 	private editors: Record<string, PropertyEditor<any>> = {};
 
-	private content: HTMLElement;
-
 	public connectedCallback() {
 		super.connectedCallback();
-
-		const title = document.createElement('div');
-		title.classList.add('title');
-		this.appendChild(title);
-		title.append('PROPERTIES');
-
-		const content = this.content = document.createElement('div');
-		content.classList.add('content');
-		this.appendChild(content);
-
+		this.title = 'Properties';
 		Data.setPropertyChangedListener(DataOrigin.SCENE, this.onPropertyChangedInsideEditor.bind(this));
 	}
 
@@ -58,8 +46,6 @@ export class PropertiesInspector extends Widget {
 				this.editors[prop.name] = editor;
 			});
 	}
-
-
 }
 
 customElements.define(PropertiesInspector.tagName, PropertiesInspector);