Expose skeletal joints to frontend hierarchy (#56)

This PR exposes skeletal joint entities to the frontend hierarchy,
allowing the user to pose rigged models by selecting the joints and
transforming them.

Additionally, entity-type information (e.g., Mesh, Skeleton, Bone,
Light, etc.) has been added to the data structure passed to the
frontend, which is rendered with icons in the tree view.

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>
 				`)}