Render entity-type icons in frontend hierarchy

studio-ui/src/lib/icon.element.ts

@@ -21,6 +21,9 @@ import farRotate from "@fortawesome/fontawesome-pro/svgs/regular/arrows-rotate.s
 import farScale from "@fortawesome/fontawesome-pro/svgs/regular/arrow-up-right-and-arrow-down-left-from-center.svg?raw";
 import fasCaretRight from "@fortawesome/fontawesome-pro/svgs/solid/caret-right.svg?raw";
 import fasFloppyDisk from "@fortawesome/fontawesome-pro/svgs/solid/floppy-disk.svg?raw";
+import farSkeleton from "@fortawesome/fontawesome-pro/svgs/regular/skeleton.svg?raw";
+import farBone from "@fortawesome/fontawesome-pro/svgs/regular/bone.svg?raw";
+import fasBrightness from "@fortawesome/fontawesome-pro/svgs/solid/brightness.svg?raw";
 
 import styles from "./icon.element.scss?inline";
 
@@ -47,6 +50,7 @@ function renderSvg(iconId: string) {
 		return RENDER_RESULTS.get(iconId)!;
 
 	const svgSrc = match (iconId, {
+		"bone": () => farBone,
 		"bwd-fast": () => fasBwdFast,
 		"bwd-step": () => fasBwdStep,
 		"circle-question": () => fasCircleQuestion,
@@ -57,11 +61,13 @@ function renderSvg(iconId: string) {
 		"fwd-fast": () => fasFwdFast,
 		"fwd-step": () => fasFwdStep,
 		"key": () => fasKey,
+		"light": () => fasBrightness,
 		"globe": () => farGlobe,
 		"play": () => fasPlay,
 		"question": () => fasQuestion,
 		"rotate": () => farRotate,
 		"scale": () => farScale,
+		"skeleton": () => farSkeleton,
 		"up-down-left-right": () => farUpDownLeftRight,
 		"video": () => farVideo,
 		_: () => null,

studio-ui/src/lib/tree.element.scss

@@ -70,7 +70,7 @@ header {
 	}
 }
 
-.icon.expanded {
+.caret.expanded {
 	transform: rotate(90deg);
 }
 
@@ -83,6 +83,10 @@ header {
 	padding-inline-start: 5px;
 }
 
+.icon {
+	opacity: 0.75;
+}
+
 .children {
 	margin-inline-start: 7px;
 	padding-inline-start: 9px;

studio-ui/src/lib/tree.element.ts

@@ -13,6 +13,7 @@ import styles from "./tree.element.scss?inline";
 export interface Tree {
 	id?: string;
 	name: string;
+	icon?: string;
 	children?: Tree[];
 }
 
@@ -55,7 +56,7 @@ export class TreeElement extends LitElement {
 				>
 					<sts-icon
 						class=${classMap({
-							icon: true,
+							caret: true,
 							expanded: this.expanded,
 						})}
 						icon="caret-right"
@@ -67,7 +68,7 @@ export class TreeElement extends LitElement {
 				@click=${this.selectEntity}
 			>
 				${this.icon ? html`
-					<sts-icon icon=${this.icon}></sts-icon>
+					<sts-icon class="icon" icon=${this.icon}></sts-icon>
 				` : nothing}
 				${this.name}
 			</span>
@@ -79,6 +80,7 @@ export class TreeElement extends LitElement {
 					<sts-tree
 						id=${ifDefined(tree.id)}
 						.name=${tree.name}
+						.icon=${tree.icon}
 						.treeChildren=${tree.children}
 					></sts-tree>
 				`)}

studio-web/src/lib/scene-hierarchy.element.ts

@@ -1,10 +1,12 @@
+import { on } from "@storyteller/framework";
 import * as studio from "@storyteller/studio";
 import {
+	SceneElement,
 	type EntityDespawnEvent,
 	type EntityMultiSpawnEvent,
 	type EntitySpawnEvent,
 } from "@storyteller/studio";
-import { on } from "@storyteller/framework";
+import { match } from "@storyteller/utility";
 import { LitElement, html, unsafeCSS } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
@@ -12,7 +14,8 @@ import styles from "./scene-hierarchy.element.scss?inline";
 
 import "@storyteller/studio-ui/tree";
 
-interface SceneObject extends Omit<studio.SceneObject, "children"> {
+interface SceneObject extends Omit<studio.SceneObject, "icon"|"children"> {
+	icon?: string;
 	children: SceneObject[];
 }
 
@@ -43,8 +46,20 @@ export class SceneHierarchyElement extends LitElement {
 	#rebuildTree(): void {
 		this.#entityMap.clear();
 
-		for (let obj of this.#sceneObjectsFlat)
-			this.#entityMap.set(obj.id, { ...obj, children: [] });
+		for (let obj of this.#sceneObjectsFlat) {
+			this.#entityMap.set(obj.id, {
+				...obj,
+				icon: match (obj.type, {
+					[SceneElement.Generic]: () => "cube",
+					[SceneElement.Mesh]: () => "cube", // TODO ?
+					[SceneElement.Skeleton]: () => "skeleton",
+					[SceneElement.Bone]: () => "bone",
+					[SceneElement.Light]: () => "light",
+					[SceneElement.Camera]: () => "video",
+				}),
+				children: []
+			});
+		}
 
 		for (let obj of this.#entityMap.values()) {
 			if (obj.parent != null) {
@@ -70,6 +85,7 @@ export class SceneHierarchyElement extends LitElement {
 			<sts-tree
 				id=${obj.id}
 				.name=${obj.name}
+				.icon=${obj.icon}
 				.treeChildren=${obj.children}
 			></sts-tree>
 		`)}

utility/src/lib/match.ts

@@ -83,7 +83,7 @@ export function match<K extends Key, T extends Matcher<K>>(
 	subject: K | null | undefined,
 	matcher: T,
 ): MatchReturn<K, T> {
-	if (subject && subject in matcher)
+	if (subject != null && subject in matcher)
 		return matcher[subject]!();
 
 	if ("_" in matcher)