model inside tree-node

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

@@ -41,7 +41,7 @@ export class ObjectTreeInspector extends Inspector {
 		node.classList.add(`level-${m.level}`);
 		node.onNodeSelect = this.onNodeSelected.bind(this);
 		node.onCollapseStateChanged = this.onNodeCollapseStateChanged.bind(this);
-		node.setContent(obj, m.type);
+		node.setContent(m);
 
 		m.node = node;
 
@@ -53,20 +53,21 @@ export class ObjectTreeInspector extends Inspector {
 	}
 
 	private onNodeSelected(node: TreeNode) {
+		if (node?.model === this._lastSelectedModel) return;
 		if (this._lastSelectedModel) this._lastSelectedModel.node.clearSelection();
-		this._lastSelectedModel = this.model.getById(node.obj.__instanceId);
-		Data.selectObject(node.obj, DataOrigin.INSPECTOR);
+		this._lastSelectedModel = node.model;
+		Data.selectObject(node.model.obj, DataOrigin.INSPECTOR);
 	}
 
 	private onNodeCollapseStateChanged(node: TreeNode, collapsed: boolean, all: boolean) {
-		const m = this.model.getById(node.obj.__instanceId);
+		const m = node.model;
 		this.changeCollapseState(m, collapsed, all);
 	}
 
-	private changeCollapseState(m: ObjectMapItemModel, collapsed: boolean, all: boolean) {
-		m.collapsed = collapsed;
-		if (!(all && m.node.obj.children?.length)) return;
-		m.node.obj.children.forEach(child => {
+	private changeCollapseState(model: ObjectMapItemModel, collapsed: boolean, all: boolean) {
+		model.collapsed = collapsed;
+		if (!(all && model.obj.children?.length)) return;
+		model.obj.children.forEach(child => {
 			if (child.__skip) return;
 			const n = this.model.getById(child.__instanceId);
 			if (collapsed) n.node.collapse();
@@ -83,7 +84,7 @@ export class ObjectTreeInspector extends Inspector {
 		if (!obj) return;
 		this._lastSelectedModel = this.model.getById(obj.__instanceId);
 		this._lastSelectedModel.node.select();
-		this.expandParents(this._lastSelectedModel);
+		this.expandParents(this._lastSelectedModel.parent);
 	}
 
 	private expandParents(model: ObjectMapItemModel) {

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

@@ -1,4 +1,5 @@
 import { PhaserObjectType } from 'data/phaser-data';
+import { ObjectMapItemModel } from '../model/object-tree-model';
 import './tree-node.scss';
 
 const SELECTED_CLASS = 'selected';
@@ -7,43 +8,42 @@ const COLLAPSED_CLASS = 'collapsed';
 export class TreeNode extends HTMLElement {
 	public static readonly tagName: string = 'phed-tree-node';
 
-	public obj: PIXI.DisplayObject;
+	public model: ObjectMapItemModel;
 	private label: HTMLElement;
 	private collapseIcon: HTMLElement;
 	public onNodeSelect: (node: TreeNode) => void;
 	public onCollapseStateChanged: (node: TreeNode, collapsed: boolean, all: boolean) => void;
 
 	public updateTitle(type: PhaserObjectType, value: string) {
-		if (this.obj) this.label.textContent = value?.length > 0 ? value : type.name;
+		this.label.textContent = value?.length > 0 ? value : type.name;
 	}
 
 	public updateObjectVisibility(value: boolean) {
-		if (!this.obj) return;
 		if (value) this.classList.remove('object-invisible');
 		else this.classList.add('object-invisible');
 	}
 
-	public setContent(obj: PIXI.DisplayObject, type: PhaserObjectType) {
-		this.obj = obj;
+	public setContent(model: ObjectMapItemModel) {
+		this.model = model;
 		const head = this.appendChild(document.createElement('div'));
 		head.classList.add('node-head');
 		head.onclick = this.onClick.bind(this);
 
 		this.collapseIcon = head.appendChild(document.createElement('i'));
 		this.collapseIcon.classList.add('fas', 'collapse-icon');
-		if (obj.children?.length) {
+		if (model.obj.children?.length) {
 			this.collapseIcon.classList.add('fa-caret-down');
 			this.collapseIcon.onclick = this.onCollapseIconClick.bind(this);
 		}
 
 		const icon = head.appendChild(document.createElement('i'));
-		icon.classList.add('fas', 'node-icon', type.icon);
+		icon.classList.add('fas', 'node-icon', model.type.icon);
 
 		this.label = head.appendChild(document.createElement('div'));
 		this.label.classList.add('node-name');
 
-		this.updateTitle(type, obj.name);
-		this.updateObjectVisibility(obj.visible);
+		this.updateTitle(model.type, model.obj.name);
+		this.updateObjectVisibility(model.obj.visible);
 	}
 
 	public addChildrenContainer() {
@@ -57,23 +57,23 @@ export class TreeNode extends HTMLElement {
 	public select() { this.classList.add(SELECTED_CLASS); }
 	public clearSelection() { this.classList.remove(SELECTED_CLASS); }
 
-	// TODO we could put the ObjectMapItemModel
-	private _isCollapsed = false;
-
 	public onCollapseIconClick(e: MouseEvent) {
-		if (this._isCollapsed) this.expand();
+		console.log('collapse icon click')
+		if (this.model.collapsed) this.expand();
 		else this.collapse();
 		e.stopImmediatePropagation();
-		if (this.onCollapseStateChanged) this.onCollapseStateChanged(this, this._isCollapsed, e.altKey);
+		if (this.onCollapseStateChanged)
+			this.onCollapseStateChanged(this, this.model.collapsed, e.altKey);
 	}
 
 	public collapse() {
-		this._isCollapsed = true;
+		this.model.collapsed = true;
 		this.classList.add(COLLAPSED_CLASS);
 	}
 
 	public expand() {
-		this._isCollapsed = false;
+		console.trace('EXPAND');
+		this.model.collapsed = false;
 		this.classList.remove(COLLAPSED_CLASS);
 	}
 }