Add button to attach IK rig

studio-frontend/src/app/app.element.ts

@@ -1,12 +1,18 @@
 import { on } from "@storyteller/framework";
 import * as studio from "@storyteller/studio";
 import {
+	type EntitySelectEvent,
 	type SceneSavedEvent,
 	type SceneStateEvent,
 	SceneState,
 	StudioMode,
+	SceneElement,
 } from "@storyteller/studio";
-import { StudioURLParams } from "@storyteller/studio-web";
+import {
+	SceneHierarchyElement,
+	type SceneObject,
+	StudioURLParams,
+} from "@storyteller/studio-web";
 import { CanvasProvider } from "@storyteller/studio-web/canvas-provider";
 import { match } from "@storyteller/utility";
 import { LitElement, html, nothing } from "lit";
@@ -33,6 +39,9 @@ export class AppElement extends LitElement {
 	@state() showHelp = false;
 	@state() loading = true;
 
+	@state() selection?: SceneObject;
+
+	#hierarchy = createRef<SceneHierarchyElement>();
 	#params = new StudioURLParams();
 	#canvasProvider: Ref<CanvasProvider> = createRef();
 
@@ -72,6 +81,15 @@ export class AppElement extends LitElement {
 		});
 	}
 
+	@on("entity-select")
+	onEntitySelected({ detail: id }: EntitySelectEvent): void {
+		if (!id) {
+			this.selection = undefined;
+		} else {
+			this.selection = this.#hierarchy.value?.entityMap.get(id);
+		}
+	}
+
 	toggleHelp(): void {
 		this.showHelp = !this.showHelp;
 	}
@@ -102,6 +120,15 @@ export class AppElement extends LitElement {
 						>
 							Save
 						</sts-button>
+						<sts-button
+							icon="share-nodes"
+							?disabled=${this.selection?.type !== SceneElement.Skeleton}
+							@click=${() => {
+								console.log("Attach IK rig");
+							}}
+						>
+							Attach IK Rig
+						</sts-button>
 					` : nothing}
 					<sts-button
 						class=${classMap({ active: this.showHelp })}
@@ -115,9 +142,16 @@ export class AppElement extends LitElement {
 
 			<!-- Studio-mode-only elements -->
 			${this.#params.mode === StudioMode.Editor ? html`
-				<sts-transform-toolbar class="v-start h-center"></sts-transform-toolbar>
+				<sts-transform-toolbar
-				<sts-scene-hierarchy class="hierarchy v-start h-end"></sts-scene-hierarchy>
+					class="v-start h-center"
-				<sts-anim-editor class="timeline v-end h-start h-before-hierarchy"></sts-anim-editor>
+				></sts-transform-toolbar>
+				<sts-scene-hierarchy
+					class="hierarchy v-start h-end"
+					${ref(this.#hierarchy)}
+				></sts-scene-hierarchy>
+				<sts-anim-editor
+					class="timeline v-end h-start h-before-hierarchy"
+				></sts-anim-editor>
 			` : nothing}
 
 			<!-- Dialogs and modals -->

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

@@ -31,6 +31,12 @@
 	color: #FFFF;
 }
 
+:host(.disabled),
+:host(.disabled:hover) {
+	background: #0003;
+	color: #FFF6;
+}
+
 .icon {
 	fill: currentColor;
 }

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

@@ -1,5 +1,5 @@
 import { on } from "@storyteller/framework";
-import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { LitElement, type PropertyValues, html, nothing, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import styles from "./button.element.scss?inline";
@@ -11,10 +11,21 @@ export class ButtonElement extends LitElement {
 	static override styles = unsafeCSS(styles);
 
 	@property() icon?: string;
+	@property({ type: Boolean }) disabled = false;
 
 	override role = "button";
 	override tabIndex = 0;
 
+	protected override willUpdate(changes: PropertyValues<this>): void {
+		if (changes.has("disabled")) {
+			this.ariaDisabled = this.disabled ? "true" : null;
+			this.tabIndex = this.disabled ? -1 : 0;
+			this.classList.toggle("disabled", this.disabled);
+		}
+
+		super.willUpdate(changes);
+	}
+
 	@on("keydown")
 	onKeyDown(event: KeyboardEvent) {
 		if (/^( |Enter)$/.test(event.key)) {

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

@@ -28,6 +28,7 @@ import fasCheck from "@fortawesome/fontawesome-pro/svgs/solid/check.svg?raw";
 import fasXmark from "@fortawesome/fontawesome-pro/svgs/solid/xmark.svg?raw";
 import fasCircleCheck from "@fortawesome/fontawesome-pro/svgs/solid/circle-check.svg?raw";
 import fasCircleXmark from "@fortawesome/fontawesome-pro/svgs/solid/circle-xmark.svg?raw";
+import farShareNodes from "@fortawesome/fontawesome-pro/svgs/regular/share-nodes.svg?raw";
 
 import styles from "./icon.element.scss?inline";
 
@@ -74,6 +75,7 @@ function renderSvg(iconId: string) {
 		"question": () => fasQuestion,
 		"rotate": () => farRotate,
 		"scale": () => farScale,
+		"share-nodes": () => farShareNodes,
 		"skeleton": () => farSkeleton,
 		"up-down-left-right": () => farUpDownLeftRight,
 		"video": () => farVideo,

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

@@ -14,7 +14,7 @@ import styles from "./scene-hierarchy.element.scss?inline";
 
 import "@storyteller/studio-ui/tree";
 
-interface SceneObject extends Omit<studio.SceneObject, "icon"|"children"> {
+export interface SceneObject extends Omit<studio.SceneObject, "children"> {
 	icon?: string;
 	children: SceneObject[];
 }