Merge branch 'main' of https://github.com/storytold/storyteller-bevy into animation-clips-setup

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,4 +1,4 @@
-import { drag, on } from "@storyteller/framework";
+import { drag, on, provide } from "@storyteller/framework";
 import * as studio from "@storyteller/studio";
 import {
 	type SceneSavedEvent,
@@ -6,8 +6,11 @@ import {
 	SceneState,
 	StudioMode,
 } from "@storyteller/studio";
+import { ButtonElement } from "@storyteller/studio-ui/button";
+import { DialogElement } from "@storyteller/studio-ui/dialog";
 import {
 	SceneHierarchyElement,
+	StorytellerApi,
 	StudioURLParams,
 } from "@storyteller/studio-web";
 import { match } from "@storyteller/utility";
@@ -16,27 +19,32 @@ 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 "@storyteller/studio-ui/button";
+import "@storyteller/studio-ui/dialog";
 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";
 import "@storyteller/studio-web/loading";
+import "@storyteller/studio-web/media-library-dialog";
 import "@storyteller/studio-web/scene-hierarchy";
 import "@storyteller/studio-web/studio";
 import "@storyteller/studio-web/transform-toolbar";
 import "./anim-editor.element";
 import "./help.element";
 
-import "./blocking.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;
@@ -47,7 +55,10 @@ export class AppElement extends LitElement {
 	@state() hierarchyHeight?: number;
 
 	#enableAnimTimeline = true; // TODO
+	private api = new StorytellerApi();
 
+	#addToSceneButtonRef = createRef<ButtonElement>();
+	#mediaLibraryRef = createRef<DialogElement>();
 	#inspectorRef = createRef<HTMLDivElement>();
 	#hierarchyRef = createRef<SceneHierarchyElement>();
 
@@ -59,34 +70,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,
-			});
+			const file = new File([scene], "scene.scn.ron", { type: "text/ron" });
+			const token = await this.api.createScene(file);
 
-			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,
-					}));
-				}
-			}
+			this.dispatchEvent(new CustomEvent("scene-uploaded", {
+				detail: token,
+				bubbles: true,
+				composed: true,
+			}));
 		}
 		catch (err) {
 			console.error(err);
@@ -146,6 +138,7 @@ export class AppElement extends LitElement {
 
 	protected override render() {
 		return html`
+		<sts-overlay-provider>
 		<sts-canvas-provider class="app-root">
 		<sts-scene-data-provider>
 			<sts-iframe-messaging-bridge></sts-iframe-messaging-bridge>
@@ -175,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 })}
@@ -188,7 +191,16 @@ 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-dialog
+					${ref(this.#mediaLibraryRef)}
+					tag="sts-media-library-dialog"
+				></sts-dialog>
 
 				<sts-transform-toolbar class="v-start h-center"></sts-transform-toolbar>
 
@@ -277,6 +289,7 @@ export class AppElement extends LitElement {
 			` : nothing}
 		</sts-scene-data-provider>
 		</sts-canvas-provider>
+		</sts-overlay-provider>
 	`;
 	}
 }

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

@@ -1,8 +0,0 @@
-:host {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 1rem;
-	position: absolute;
-	top: 60px;
-	left: 16px;
-}

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

@@ -1,43 +0,0 @@
-
-import { LitElement, html, nothing, unsafeCSS } from "lit";
-
-import styles from "./blocking.element.scss?inline";
-import { customElement } from "lit/decorators.js";
-import * as studio from "@storyteller/studio";
-
-@customElement("sts-blocking")
-export class BlockingElement extends LitElement {
-    static override styles = unsafeCSS(styles);
-
-    override render() {
-        return html`
-            <sts-button
-                @click=${() => {
-                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cube);
-                }}>
-                Cube
-            </sts-button>
-
-            <sts-button
-                @click=${() => {
-                    studio.dispatchBlockingCommand(studio.BlockingCommand.Sphere);
-                }}>
-                Sphere
-            </sts-button>
-
-            <sts-button
-                @click=${() => {
-                    studio.dispatchBlockingCommand(studio.BlockingCommand.Cylinder);
-                }}>
-                Cylinder
-            </sts-button>
-
-            <sts-button
-                @click=${() => {
-                    studio.dispatchBlockingCommand(studio.BlockingCommand.Torus);
-                }}>
-                Torus
-            </sts-button>
-        `;
-    }
-}