collapse/expand tree-node

kleber-swf · Sep 1, 2021 · 5df3220 · 5df3220
1 parent 6d7efeb
commit 5df3220
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 10 deletions.
diff --git a/src/editor/object-tree/tree-node/tree-node.scss b/src/editor/object-tree/tree-node/tree-node.scss
@@ -18,19 +18,35 @@ phed-tree-node {
 		}
 	}
 
+	&.collapsed {
+		.node-children {
+			display: none;
+		}
+	}
+
 	.node-head {
+		height: 26px;
 		display: flex;
 		align-items: center;
 		justify-content: stretch;
 		padding: 0;
 
+		.fas {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
 		.collapse-icon {
-			padding: 6px 6px 6px 10px;
+			width: 26px;
+			height: 26px;
 			margin-right: 2px;
 		}
 
 		.node-icon {
 			display: inline-block;
+			width: 16px;
+			height: 16px;
 			margin: 0 6px 0 0;
 		}
 

diff --git a/src/editor/object-tree/tree-node/tree-node.ts b/src/editor/object-tree/tree-node/tree-node.ts
@@ -1,11 +1,18 @@
 import { PhaserObjectType } from 'data/phaser-data';
 import './tree-node.scss';
 
+const SELECTED_CLASS = 'selected';
+const COLLAPSED_CLASS = 'collapsed';
+
+const COLLAPSED_ICON_CLASS = 'fa-caret-right';
+const EXPANDED_ICON_CLASS = 'fa-caret-down';
+
 export class TreeNode extends HTMLElement {
 	public static readonly tagName: string = 'phed-tree-node';
 
 	public obj: PIXI.DisplayObject;
 	private label: HTMLElement;
+	private collapseIcon: HTMLElement;
 	public onNodeSelect: (node: TreeNode) => void;
 
 	public updateTitle(type: PhaserObjectType, value: string) {
@@ -22,16 +29,21 @@ export class TreeNode extends HTMLElement {
 		this.obj = obj;
 		const head = this.appendChild(document.createElement('div'));
 		head.classList.add('node-head');
-		head.onclick = this.select.bind(this);
+		head.onclick = this.onClick.bind(this);
 
-		const collapseIcon = head.appendChild(document.createElement('i'));
-		collapseIcon.classList.add('fas', 'fa-caret-right', 'collapse-icon');
+		this.collapseIcon = head.appendChild(document.createElement('i'));
+		this.collapseIcon.classList.add('fas', 'collapse-icon');
+		if (obj.children?.length) {
+			this.collapseIcon.classList.add(EXPANDED_ICON_CLASS);
+			this.collapseIcon.onclick = this.onCollapseIconClick.bind(this);
+		}
 
 		const icon = head.appendChild(document.createElement('i'));
 		icon.classList.add('fas', 'node-icon', type.icon);
 
-		const label = head.appendChild(this.label = document.createElement('div'));
-		label.classList.add('node-name');
+		this.label = head.appendChild(document.createElement('div'));
+		this.label.classList.add('node-name');
+
 		this.updateTitle(type, obj.name);
 		this.updateObjectVisibility(obj.visible);
 	}
@@ -42,12 +54,33 @@ export class TreeNode extends HTMLElement {
 		return container;
 	}
 
-	public select(e?: Event) {
-		this.classList.add('selected');
-		if (e && this.onNodeSelect) this.onNodeSelect(this);
+	private onClick() { if (this.onNodeSelect) this.onNodeSelect(this); }
+
+	public select() { this.classList.add(SELECTED_CLASS); }
+	public clearSelection() { this.classList.remove(SELECTED_CLASS); }
+
+	private _isCollapsed = false;
+
+	public onCollapseIconClick(e: Event) {
+		if (this._isCollapsed) this.expand();
+		else this.collapse();
+		e.stopImmediatePropagation();
+	}
+
+	public collapse() {
+		this._isCollapsed = true;
+		this.classList.add(COLLAPSED_CLASS);
+		this.collapseIcon.classList.remove(EXPANDED_ICON_CLASS);
+		this.collapseIcon.classList.add(COLLAPSED_ICON_CLASS);
+	}
+
+	public expand() {
+		this._isCollapsed = false;
+		this.classList.remove(COLLAPSED_CLASS);
+		this.collapseIcon.classList.remove(COLLAPSED_ICON_CLASS);
+		this.collapseIcon.classList.add(EXPANDED_ICON_CLASS);
 	}
 
-	public clearSelection() { this.classList.remove('selected'); }
 }
 
 customElements.define(TreeNode.tagName, TreeNode);