From 326424347f894350aae3abca4e1f1a2d8375571c Mon Sep 17 00:00:00 2001
From: Danny McGee <dannymcgee@gmail.com>
Date: Thu, 7 Mar 2024 14:58:32 -0500
Subject: [PATCH] Move "Add to Scene" menu to `studio-web`

---
 studio-frontend/src/app/app.element.ts        | 57 +---------------
 studio-web/src/index.ts                       |  1 +
 .../src/lib/add-to-scene-menu.element.ts      | 68 +++++++++++++++++++
 tsconfig.base.json                            |  1 +
 4 files changed, 72 insertions(+), 55 deletions(-)
 create mode 100644 studio-web/src/lib/add-to-scene-menu.element.ts

diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts
index d7d9a0b..922bda2 100644
--- a/studio-frontend/src/app/app.element.ts
+++ b/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-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-add-to-scene-menu .trigger=${this.#addToSceneButtonRef}></sts-add-to-scene-menu>
 				<sts-transform-toolbar class="v-start h-center"></sts-transform-toolbar>
 
 				${this.showInspector ? html`
diff --git a/studio-web/src/index.ts b/studio-web/src/index.ts
index f7b0abf..cb9fca3 100644
--- a/studio-web/src/index.ts
+++ b/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";
diff --git a/studio-web/src/lib/add-to-scene-menu.element.ts b/studio-web/src/lib/add-to-scene-menu.element.ts
new file mode 100644
index 0000000..a8b0427
--- /dev/null
+++ b/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>
+	`;
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 5b747bb..53ebcae 100644
--- a/tsconfig.base.json
+++ b/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"],