From 5cd98b4a35bbf4be3dd412105ca852d1e593b016 Mon Sep 17 00:00:00 2001 From: Danny McGee Date: Fri, 5 Apr 2024 23:32:03 -0400 Subject: [PATCH] Fix layout and UI visibility for viewer mode (#125) --- studio-frontend/src/app/app.element.scss | 20 +- studio-frontend/src/app/app.element.ts | 2 + studio-frontend/src/app/help.element.scss | 16 - studio-frontend/src/app/help.element.ts | 63 ++-- .../src/app/studio-viewport.element.ts | 311 ++++++++++-------- .../src/app/temp-video-preview.element.ts | 8 +- .../src/lib/overlay-provider.element.scss | 2 + .../lib/iframe-messaging-bridge.element.ts | 10 +- 8 files changed, 236 insertions(+), 196 deletions(-) diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss index f018db4..aea1a98 100644 --- a/studio-frontend/src/app/app.element.scss +++ b/studio-frontend/src/app/app.element.scss @@ -6,15 +6,17 @@ $hierarchy-width: 290px; --sidebar-width: 300px; --timeline-height: min-content; - display: grid; - width: 100vw; - height: 100vh; - grid-template: { - areas: - "viewport sidebar" - "timeline timeline"; - rows: minmax(0, 1fr) var(--timeline-height); - columns: minmax(0, 1fr) var(--sidebar-width); + &.editor-mode { + display: grid; + width: 100vw; + height: 100vh; + grid-template: { + areas: + "viewport sidebar" + "timeline timeline"; + rows: minmax(0, 1fr) var(--timeline-height); + columns: minmax(0, 1fr) var(--sidebar-width); + } } .viewport { grid-area: viewport; } diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts index 37cf522..2bc75af 100644 --- a/studio-frontend/src/app/app.element.ts +++ b/studio-frontend/src/app/app.element.ts @@ -145,6 +145,8 @@ export class AppElement extends LitElement { class=${classMap({ "app-root": true, "debug-mode": this.debugMode, + "viewer-mode": this.params.mode === StudioMode.Viewer, + "editor-mode": this.params.mode === StudioMode.Editor, })} > diff --git a/studio-frontend/src/app/help.element.scss b/studio-frontend/src/app/help.element.scss index e7b7159..b1428a1 100644 --- a/studio-frontend/src/app/help.element.scss +++ b/studio-frontend/src/app/help.element.scss @@ -1,19 +1,3 @@ -:host { - padding: 20px 30px; - border-radius: 0.5rem; - - font: { - family: "Fira Sans", sans-serif; - size: 15px; - weight: 400; - } - - background: #0006; - backdrop-filter: blur(16px); - - pointer-events: auto; -} - th { text-align: start; color: #FFFC; diff --git a/studio-frontend/src/app/help.element.ts b/studio-frontend/src/app/help.element.ts index dbf609c..2969ef6 100644 --- a/studio-frontend/src/app/help.element.ts +++ b/studio-frontend/src/app/help.element.ts @@ -1,38 +1,51 @@ +import { inject } from "@storyteller/framework"; +import { StudioMode } from "@storyteller/studio"; +import { STUDIO_PARAMS, type StudioParams } from "@storyteller/studio-web"; import { LitElement, html, unsafeCSS, nothing, HTMLTemplateResult } from "lit"; import { customElement } from "lit/decorators.js"; +import { isDevEnvironment } from "./util"; import styles from "./help.element.scss?inline"; -import { isDevEnvironment } from "./util"; @customElement("sts-help") export class HelpElement extends LitElement { static override styles = unsafeCSS(styles); + @inject(STUDIO_PARAMS) + _params!: StudioParams; + protected override render = () => html` - - ${section("Navigation", [ - { name: "Pan View", controls: "MMB" }, - { name: "Orbit around point", controls: "Alt + LMB" }, - { name: "Zoom", controls: ["Alt + RMB", "Scroll"]}, - { name: "Free fly", controls: "W, A, S, D, E, Q" }, - { name: "Free look", controls: ["RMB", "Shift"] }, - ])} - ${section("Interaction", [ - { name: "Select", controls: "LMB" }, - { name: "Clear selection", controls: "Esc" }, - { name: "Focus selection", controls: "F" }, - { name: "Delete selection", controls: "Delete" }, - ])} - ${section("Animation Timeline", [ - { name: "Pan", controls: ["MMB", "Scroll"] }, - { name: "Zoom", controls: "Ctrl + Scroll" }, - ])} - ${isDevEnvironment() - ? section("Developer", [ - { name: "Toggle debug info", controls: html`Ctrl + `` } - ]) - : nothing} -
+ + + Help + + + ${section("Navigation", [ + { name: "Pan View", controls: "MMB" }, + { name: "Orbit around point", controls: "Alt + LMB" }, + { name: "Zoom", controls: ["Alt + RMB", "Scroll"]}, + { name: "Free fly", controls: "W, A, S, D, E, Q" }, + { name: "Free look", controls: ["RMB", "Shift"] }, + ])} + ${this._params.mode === StudioMode.Editor ? html` + ${section("Interaction", [ + { name: "Select", controls: "LMB" }, + { name: "Clear selection", controls: "Esc" }, + { name: "Focus selection", controls: "F" }, + { name: "Delete selection", controls: "Delete" }, + ])} + ${section("Animation Timeline", [ + { name: "Pan", controls: ["MMB", "Scroll"] }, + { name: "Zoom", controls: "Ctrl + Scroll" }, + ])} + ${isDevEnvironment() + ? section("Developer", [ + { name: "Toggle debug info", controls: html`Ctrl + `` } + ]) + : nothing} + ` : nothing} +
+ `; } diff --git a/studio-frontend/src/app/studio-viewport.element.ts b/studio-frontend/src/app/studio-viewport.element.ts index fbebcdc..44c70ad 100644 --- a/studio-frontend/src/app/studio-viewport.element.ts +++ b/studio-frontend/src/app/studio-viewport.element.ts @@ -1,6 +1,6 @@ import { bind, inject, observe } from "@storyteller/framework"; import * as studio from "@storyteller/studio"; -import { BlockingCommand, TransformSpace, TransformType } from "@storyteller/studio"; +import { BlockingCommand, StudioMode, TransformSpace, TransformType } from "@storyteller/studio"; import { SCENE_DATA_PROVIDER, STUDIO_PARAMS, @@ -25,6 +25,7 @@ import "@storyteller/studio-ui/toolbar"; import "./anim-timeline-controls.element"; import "./studio-viewport.element.scss"; +import { match } from "@storyteller/utility"; @customElement("sts-studio-viewport") export class StudioViewportElement extends LitElement { @@ -51,6 +52,7 @@ export class StudioViewportElement extends LitElement { #fileTriggerRef = createRef(); #mediaLibraryTriggerRef = createRef(); + #helpDialogTriggerRef = createRef(); get #selectedObject() { return this._sceneData.selectedObject; @@ -80,156 +82,173 @@ export class StudioViewportElement extends LitElement { .skyboxId=${this._params.skybox ?? "test_scene"} .mode=${this._params.mode} > -
- - File - - { - // TODO - }} - > - Help - -
- - - - + ${match (this._params.mode, { + [StudioMode.Headless]: () => nothing, + [StudioMode.Viewer]: () => html` - -
- - studio.dispatchBlockingCommand(BlockingCommand.Cube)} - > - studio.dispatchBlockingCommand(BlockingCommand.Cylinder)} - > - studio.dispatchBlockingCommand(BlockingCommand.Sphere)} - > - studio.dispatchBlockingCommand(BlockingCommand.Torus)} - > - - -
- - - { + // TODO + }} > - - - Local - - - - Global - - - - - - Translate - - - Rotate - - - Scale - - - - -
- - - - Stylize + Help - - - -
- Switch to Camera View -
- - - - ${this.#selectedObject != null ? html` -
-
-
- ${this.#selectedObject.icon != null ? html` - - ` : nothing} -

${this.#selectedObject.name}

-
+ `, + [StudioMode.Editor]: () => html` +
- Swap object + File -
- -
- ${this.#selectedEntityInTracklist ? html` - this._timeline.addKeyframe()} - > - Add Keyframe - - ` : this._sceneData.selectedEntity != null ? html` - this._timeline.addTrack(this._sceneData.selectedEntity!)} - > - Add to Timeline - - ` : nothing} - -
-
- ` : nothing} + ${ref(this.#helpDialogTriggerRef)} + icon="question" + @click=${() => { + // TODO + }} + > + Help + + + + + + + +
+ + studio.dispatchBlockingCommand(BlockingCommand.Cube)} + > + studio.dispatchBlockingCommand(BlockingCommand.Cylinder)} + > + studio.dispatchBlockingCommand(BlockingCommand.Sphere)} + > + studio.dispatchBlockingCommand(BlockingCommand.Torus)} + > + + +
+ + + + + + Local + + + + Global + + + + + + Translate + + + Rotate + + + Scale + + + + +
+ + + + Stylize + + + + +
+ Switch to Camera View +
+ + + + ${this.#selectedObject != null ? html` +
+
+
+ ${this.#selectedObject.icon != null ? html` + + ` : nothing} +

${this.#selectedObject.name}

+
+ + Swap object + +
+ +
+ ${this.#selectedEntityInTracklist ? html` + this._timeline.addKeyframe()} + > + Add Keyframe + + ` : this._sceneData.selectedEntity != null ? html` + this._timeline.addTrack(this._sceneData.selectedEntity!)} + > + Add to Timeline + + ` : nothing} + + +
+
+ ` : nothing} + `, + })} + + `; } } diff --git a/studio-frontend/src/app/temp-video-preview.element.ts b/studio-frontend/src/app/temp-video-preview.element.ts index e914d7d..b3d6977 100644 --- a/studio-frontend/src/app/temp-video-preview.element.ts +++ b/studio-frontend/src/app/temp-video-preview.element.ts @@ -1,5 +1,5 @@ import * as studio from "@storyteller/studio"; -import { LitElement, type PropertyValues, html, nothing, unsafeCSS, TemplateResult } from "lit"; +import { LitElement, type PropertyValues, html, nothing, unsafeCSS, TemplateResult, css } from "lit"; import { type Ref, createRef, ref } from "lit/directives/ref.js"; import { customElement, property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -22,6 +22,12 @@ enum InspectorMode { @customElement("sts-temp-video-preview") export class TempVideoPreview extends LitElement { + static override styles = css` + :host { + display: none; + } + `; + @property({ attribute: false }) trigger?: Ref; diff --git a/studio-ui/src/lib/overlay-provider.element.scss b/studio-ui/src/lib/overlay-provider.element.scss index 1711f52..e281f71 100644 --- a/studio-ui/src/lib/overlay-provider.element.scss +++ b/studio-ui/src/lib/overlay-provider.element.scss @@ -1,4 +1,6 @@ .overlay-stack { + width: 0; + height: 0; isolation: isolate; z-index: 99999; } diff --git a/studio-web/src/lib/iframe-messaging-bridge.element.ts b/studio-web/src/lib/iframe-messaging-bridge.element.ts index deca809..f7f2b86 100644 --- a/studio-web/src/lib/iframe-messaging-bridge.element.ts +++ b/studio-web/src/lib/iframe-messaging-bridge.element.ts @@ -1,16 +1,22 @@ import { on } from "@storyteller/framework"; import * as studio from "@storyteller/studio"; import { SceneState, type SceneStateEvent } from "@storyteller/studio"; -import { LitElement, nothing } from "lit"; +import { LitElement, css, nothing } from "lit"; import { customElement } from "lit/decorators.js"; @customElement("sts-iframe-messaging-bridge") export class IframeMessagingBridgeElement extends LitElement { + static override styles = css` + :host { + display: none; + } + `; + #parentWindow?: Window; override connectedCallback(): void { console.log('window.parent', window.parent); - + try { if ( window.parent