invisible elements in the tree are grayed out

TODO.todo

@@ -39,6 +39,7 @@ BASIC:
 		[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
+		[x] invisible elements should be grayed out
 		[ ] expand / collapse sub-trees
 			[ ] automatic expand when selecting
 		[ ] update tree content

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

@@ -14,9 +14,16 @@ export class ObjectTreeInspector extends Inspector {
 		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);
+	private onPropertyChanged(property: string, value: any) {
+		if (!this._lastSelectedModel) return;
+		if (property === 'name') {
+			this._lastSelectedModel.node.updateTitle(this._lastSelectedModel.type, value);
+			return;
+		}
+		if (property === 'visible') {
+			this._lastSelectedModel.node.updateObjectVisibility(value);
+			return;
+		}
 	}
 
 	public setContent(root: PIXI.DisplayObjectContainer | Phaser.Stage) {

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

@@ -3,6 +3,7 @@
 phed-tree-node {
 	display: block;
 	cursor: pointer;
+	flex: 1;
 
 	&.selected {
 		& > .node-head {
@@ -11,6 +12,12 @@ phed-tree-node {
 		}
 	}
 
+	&.object-invisible {
+		.node-name {
+			opacity: 0.5;
+		}
+	}
+
 	.node-head {
 		display: flex;
 		align-items: center;
@@ -25,7 +32,6 @@ phed-tree-node {
 		.node-name {
 			display: inline-block;
 			white-space: nowrap;
-			flex: 1;
 		}
 	}
 

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

@@ -9,8 +9,13 @@ export class TreeNode extends HTMLElement {
 	private label: HTMLElement;
 
 	public updateTitle(type: PhaserObjectType, value: string) {
+		if (this.obj) this.label.textContent = value?.length > 0 ? value : type.name;
+	}
+
+	public updateObjectVisibility(value: boolean) {
 		if (!this.obj) return;
-		this.label.textContent = value?.length > 0 ? value : type.name;
+		if (value) this.classList.remove('object-invisible');
+		else this.classList.add('object-invisible');
 	}
 
 	public setContent(obj: PIXI.DisplayObject, type: PhaserObjectType) {
@@ -26,7 +31,8 @@ export class TreeNode extends HTMLElement {
 
 		const label = this.label = document.createElement('div');
 		label.classList.add('node-name');
-		label.textContent = obj.name?.length > 0 ? obj.name : type.name;
+		this.updateTitle(type, obj.name);
+		this.updateObjectVisibility(obj.visible);
 		head.appendChild(label);
 	}