diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts
index 9cf2176..d52a0b9 100644
--- a/studio-frontend/src/app/app.element.ts
+++ b/studio-frontend/src/app/app.element.ts
@@ -184,9 +184,14 @@ export class AppElement extends LitElement {
class="app-root"
${ref(this.#canvasProvider as any)}
>
+ ${
+ // TODO: See notes in studio-web/src/lib/viewer.element.ts
+ nothing
+ }
diff --git a/studio-web/src/lib/viewer.element.ts b/studio-web/src/lib/viewer.element.ts
index 3ae7944..7ee3aea 100644
--- a/studio-web/src/lib/viewer.element.ts
+++ b/studio-web/src/lib/viewer.element.ts
@@ -1,5 +1,5 @@
import * as studio from "@storyteller/studio";
-import { ViewportSize } from "@storyteller/studio";
+import { StudioMode, ViewportSize } from "@storyteller/studio";
import { inject } from "@storyteller/framework";
import { LitElement, PropertyValues, html, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
@@ -12,8 +12,18 @@ import styles from "./viewer.element.scss?inline";
export class ViewerElement extends LitElement {
static override styles = unsafeCSS(styles);
+ // TODO: `` and `` should be separate element
+ // types with different inputs. `` should take a BVH
+ // animation and load a simple mannequin asset playing the given
+ // animation in a loop, while `` should take a scene
+ // asset handle and load it with full editing capabilities.
+ //
+ // Both elements should share most of the core functionality here,
+ // which could easily be extracted to a base class for inheritance by
+ // making `#startViewer` an abstract method.
@property() objectId?: string;
@property() skyboxId?: string;
+ @property({ type: Number }) mode?: StudioMode;
@inject(CANVAS_PROVIDER)
_canvasProvider?: CanvasProvider;
@@ -68,15 +78,17 @@ export class ViewerElement extends LitElement {
if (!this.#canvas) return;
if (!this.objectId) return;
if (!this.skyboxId) return;
+ if (this.mode == null) return;
const { width, height } = this.getBoundingClientRect();
try {
- studio.startViewer(
+ studio.start(
this.objectId,
this.skyboxId,
`#${this._canvasProvider!.canvasId}`,
"Storyteller Studio",
new ViewportSize(width, height),
+ this.mode,
);
} catch (err) {
if (!(err as Error).message?.startsWith("Using exceptions for control flow"))