Apply Animation UI

editor.ron

@@ -1,6 +1,6 @@
 {
     "space_editor_core::hotkeys::HotkeySet<space_editor_ui::tools::gizmo::GizmoHotkey>": "{\"space_editor_core::hotkeys::HotkeySet<space_editor_ui::tools::gizmo::GizmoHotkey>\":(bindings:{Rotate:[R],Translate:[G],Scale:[S],Multiple:[ShiftLeft],Clone:[AltLeft],Delete:[X]},name:\"GizmoHotkey\")}",
-    "space_undo::ChangeChainSettings": "{\"space_undo::ChangeChainSettings\":(max_change_chain_size:200)}",
     "space_persistence::PersistenceSettings": "{\"space_persistence::PersistenceSettings\":(load_on_startup:true,save_on_close:true)}",
+    "space_undo::ChangeChainSettings": "{\"space_undo::ChangeChainSettings\":(max_change_chain_size:200)}",
     "space_editor_ui::settings::NewWindowSettings": "{\"space_editor_ui::settings::NewWindowSettings\":(new_tab:SameNode)}",
 }

package.json

@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-pro": "^6.4.2",
+    "axios": "^1.6.7",
     "lit": "^2.8.0",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tslib": "^2.3.0",
-    "uuid": "^9.0.1"
+    "tslib": "^2.3.0"
   }
 }

studio-bvh/src/joint.rs

@@ -488,10 +488,12 @@ impl<'a> Iterator for Joints<'a> {
                     return None;
                 }
 
-                Some(Joint {
+                let next = Some(Joint {
                     index: *current,
                     joints: self.joints,
-                })
+                });
+                *current += 1;
+                next
             }
             JointIterType::Sequence(ref mut joints) => {
                 let Some(next) = joints.pop_front() else {

studio-bvh/src/lib.rs

@@ -525,6 +525,10 @@ impl Bvh {
     pub fn joints_mut(&mut self) -> JointsMut<'_> {
         JointsMut::iter_root(&mut self.joints[..])
     }
+
+    pub fn joints_len(&self) -> usize {
+        self.joints.len()
+    }
 
     /// Returns a `Frames` iterator over the frames of the bvh.
     ///

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

@@ -165,3 +165,9 @@ sts-button.active {
 		}
 	}
 }
+
+// TODO: Move this
+.menu-button-icon {
+	font-size: 12px;
+	opacity: 0.75;
+}

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

@@ -1,13 +1,15 @@
-import { drag, on } from "@storyteller/framework";
+import { drag, on, provide } from "@storyteller/framework";
 import * as studio from "@storyteller/studio";
 import {
 	type SceneSavedEvent,
 	type SceneStateEvent,
 	SceneState,
 	StudioMode,
 } from "@storyteller/studio";
+import { ButtonElement } from "@storyteller/studio-ui/button";
 import {
 	SceneHierarchyElement,
+	StorytellerApi,
 	StudioURLParams,
 } from "@storyteller/studio-web";
 import { match } from "@storyteller/utility";
@@ -16,12 +18,14 @@ import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { v4 as uuid } from "uuid";
+import { MediaLibraryElement } from "./media-library.element";
 
 import "@storyteller/studio-ui/button";
 import "@storyteller/studio-ui/icon";
+import "@storyteller/studio-ui/overlay-provider";
 import "@storyteller/studio-ui/toolbar";
 import "@storyteller/studio-ui/tree";
+import "@storyteller/studio-web/add-to-scene-menu";
 import "@storyteller/studio-web/canvas-provider";
 import "@storyteller/studio-web/entity-inspector";
 import "@storyteller/studio-web/iframe-messaging-bridge";
@@ -33,10 +37,15 @@ import "./anim-editor.element";
 import "./help.element";
 
 import "./blocking.element";
+import "./media-library.element";
 
 import "./app.element.scss";
 
 @customElement("app-root")
+@provide({
+	token: StorytellerApi,
+	provide() { return this.api; }
+})
 export class AppElement extends LitElement {
 	@state() showHelp = false;
 	@state() showInspector = false;
@@ -46,8 +55,11 @@ export class AppElement extends LitElement {
 	@state() inspectorWidth = 320;
 	@state() hierarchyHeight?: number;
 
+	private api = new StorytellerApi();
 	#enableAnimTimeline = false; // TODO
 
+	#addToSceneButtonRef = createRef<ButtonElement>();
+	#mediaLibraryRef = createRef<MediaLibraryElement>();
 	#inspectorRef = createRef<HTMLDivElement>();
 	#hierarchyRef = createRef<SceneHierarchyElement>();
 
@@ -59,34 +71,15 @@ export class AppElement extends LitElement {
 
 	@on("scene-saved")
 	async onSceneSaved({ detail: scene }: SceneSavedEvent): Promise<void> {
-		const file = new File([scene], "scene.scn.ron", { type: "text/ron" });
-		const formData = new FormData();
-
-		formData.append("uuid_idempotency_token", uuid());
-		formData.append("file", file);
-
 		try {
-			const response = await fetch("https://api.fakeyou.com/v1/engine/create_scene", {
-				method: "POST",
-				credentials: "include",
-				headers: { "Accept": "text/plain" },
-				body: formData,
-			});
-
-			if (response.ok) {
-				const resultJson: {
-					success: boolean;
-					media_file_token: string;
-				} = await response.json();
-
-				if (resultJson.success) {
-					this.dispatchEvent(new CustomEvent("scene-uploaded", {
-						detail: resultJson.media_file_token,
-						bubbles: true,
-						composed: true,
-					}));
-				}
-			}
+			const file = new File([scene], "scene.scn.ron", { type: "text/ron" });
+			const token = await this.api.createScene(file);
+
+			this.dispatchEvent(new CustomEvent("scene-uploaded", {
+				detail: token,
+				bubbles: true,
+				composed: true,
+			}));
 		}
 		catch (err) {
 			console.error(err);
@@ -145,6 +138,7 @@ export class AppElement extends LitElement {
 	}
 
 	protected override render = () => html`
+		<sts-overlay-provider>
 		<sts-canvas-provider class="app-root">
 		<sts-scene-data-provider>
 			<sts-iframe-messaging-bridge></sts-iframe-messaging-bridge>
@@ -174,6 +168,16 @@ export class AppElement extends LitElement {
 						>
 							Save
 						</sts-button>
+						<sts-button
+							${ref(this.#addToSceneButtonRef)}
+							icon="plus-large"
+						>
+							Add to Scene
+							<sts-icon
+								class="menu-button-icon"
+								icon="chevron-down"
+							></sts-icon>
+						</sts-button>
 					` : nothing}
 					<sts-button
 						class=${classMap({ active: this.showHelp })}
@@ -187,7 +191,13 @@ export class AppElement extends LitElement {
 
 			<!-- Studio-mode-only elements -->
 			${this.#params.mode === StudioMode.Editor ? html`
-				<sts-blocking></sts-blocking>
+				<sts-add-to-scene-menu
+					.trigger=${this.#addToSceneButtonRef}
+					@open-media-library=${() => {
+						this.#mediaLibraryRef.value?.open();
+					}}
+				></sts-add-to-scene-menu>
+				<sts-media-library ${ref(this.#mediaLibraryRef)}></sts-media-library>
 
 				<sts-transform-toolbar class="v-start h-center"></sts-transform-toolbar>
 
@@ -276,5 +286,6 @@ export class AppElement extends LitElement {
 			` : nothing}
 		</sts-scene-data-provider>
 		</sts-canvas-provider>
+		</sts-overlay-provider>
 	`;
 }

studio-frontend/src/app/media-library.element.scss

@@ -0,0 +1,14 @@
+:host {
+	display: block;
+	min-width: 512px;
+	min-height: 256px;
+	max-width: 80%;
+	max-height: 80%;
+	padding: 1rem;
+	overflow: auto;
+
+	background: #0006;
+	color: #FFFC;
+	backdrop-filter: blur(16px);
+	border-radius: 0.5rem;
+}