Move "Add to Scene" menu to studio-web

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

@@ -5,7 +5,6 @@ import {
 	type SceneStateEvent,
 	SceneState,
 	StudioMode,
-	BlockingCommand,
 } from "@storyteller/studio";
 import { ButtonElement } from "@storyteller/studio-ui/button";
 import {
@@ -22,10 +21,10 @@ import { v4 as uuid } from "uuid";
 
 import "@storyteller/studio-ui/button";
 import "@storyteller/studio-ui/icon";
-import "@storyteller/studio-ui/menu";
 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";
@@ -203,59 +202,7 @@ export class AppElement extends LitElement {
 
 			<!-- Studio-mode-only elements -->
 			${this.#params.mode === StudioMode.Editor ? html`
-				<!-- TODO: Move this -->
+				<sts-add-to-scene-menu .trigger=${this.#addToSceneButtonRef}></sts-add-to-scene-menu>
-				<sts-menu autoClose .trigger=${this.#addToSceneButtonRef}>
-					<sts-button
-						role="menuitem"
-						icon="cube"
-						@click=${() => {
-							studio.dispatchBlockingCommand(BlockingCommand.Cube);
-						}}
-					>
-						Cube
-					</sts-button>
-					<sts-button
-						role="menuitem"
-						icon="sphere"
-						@click=${() => {
-							studio.dispatchBlockingCommand(BlockingCommand.Sphere);
-						}}
-					>
-						Sphere
-					</sts-button>
-					<sts-button
-						role="menuitem"
-						icon="torus"
-						@click=${() => {
-							studio.dispatchBlockingCommand(BlockingCommand.Torus);
-						}}
-					>
-						Torus
-					</sts-button>
-					<sts-button
-						role="menuitem"
-						icon="cylinder"
-						@click=${() => {
-							studio.dispatchBlockingCommand(BlockingCommand.Cylinder);
-						}}
-					>
-						Cylinder
-					</sts-button>
-					<hr />
-					<sts-button
-						role="menuitem"
-						icon="file-import"
-					>
-						Import asset...
-					</sts-button>
-					<sts-button
-						role="menuitem"
-						icon="photo-film-music"
-					>
-						Media library...
-					</sts-button>
-				</sts-menu>
-
 				<sts-transform-toolbar class="v-start h-center"></sts-transform-toolbar>
 
 				${this.showInspector ? html`

studio-web/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./lib/add-to-scene-menu.element";
 export * from "./lib/canvas-provider.element";
 export * from "./lib/iframe-messaging-bridge.element";
 export * from "./lib/inspector/entity-inspector.element";

studio-web/src/lib/add-to-scene-menu.element.ts

@@ -0,0 +1,68 @@
+import * as studio from "@storyteller/studio";
+import { BlockingCommand } from "@storyteller/studio";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createRef } from "lit/directives/ref.js"
+
+import "@storyteller/studio-ui/button";
+import "@storyteller/studio-ui/menu";
+
+@customElement("sts-add-to-scene-menu")
+export class AddToSceneMenuElement extends LitElement {
+	@property({ attribute: false })
+	trigger = createRef<HTMLElement>();
+
+	protected override render = () => html`
+		<sts-menu autoClose .trigger=${this.trigger}>
+			<sts-button
+				role="menuitem"
+				icon="cube"
+				@click=${() => {
+					studio.dispatchBlockingCommand(BlockingCommand.Cube);
+				}}
+			>
+				Cube
+			</sts-button>
+			<sts-button
+				role="menuitem"
+				icon="sphere"
+				@click=${() => {
+					studio.dispatchBlockingCommand(BlockingCommand.Sphere);
+				}}
+			>
+				Sphere
+			</sts-button>
+			<sts-button
+				role="menuitem"
+				icon="torus"
+				@click=${() => {
+					studio.dispatchBlockingCommand(BlockingCommand.Torus);
+				}}
+			>
+				Torus
+			</sts-button>
+			<sts-button
+				role="menuitem"
+				icon="cylinder"
+				@click=${() => {
+					studio.dispatchBlockingCommand(BlockingCommand.Cylinder);
+				}}
+			>
+				Cylinder
+			</sts-button>
+			<hr />
+			<sts-button
+				role="menuitem"
+				icon="file-import"
+			>
+				Import asset...
+			</sts-button>
+			<sts-button
+				role="menuitem"
+				icon="photo-film-music"
+			>
+				Media library...
+			</sts-button>
+		</sts-menu>
+	`;
+}

tsconfig.base.json

@@ -27,6 +27,7 @@
       "@storyteller/studio-ui/tree": ["studio-ui/src/lib/tree.element.ts"],
       "@storyteller/studio-ui/forms/text-field": ["studio-ui/src/lib/forms/text-field.element.ts"],
       "@storyteller/studio-web": ["studio-web/src/index.ts"],
+      "@storyteller/studio-web/add-to-scene-menu": ["studio-web/src/lib/add-to-scene-menu.element.ts"],
       "@storyteller/studio-web/canvas-provider": ["studio-web/src/lib/canvas-provider.element.ts"],
       "@storyteller/studio-web/entity-inspector": ["studio-web/src/lib/inspector/entity-inspector.element.ts"],
       "@storyteller/studio-web/iframe-messaging-bridge": ["studio-web/src/lib/iframe-messaging-bridge.element.ts"],