mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-16 00:03:29 +00:00
Image Generator Demo: UI/UX (#58)
This PR updates the UI/UX of the Image Generator Demo. * Hierarchy moved to the left of the editor view instead of overlaying it * Hierarchy can now be resized * Bevy canvas resizes trigger a screen-capture update * Transform Toolbar now centered over the editor view instead of the entire viewport * Added Prompt and Seed text fields, with a refresh button for the Seed
This commit is contained in:
Danny McGee
@@ -0,0 +1,21 @@
|
||||
import { type Fn } from "@storyteller/utility";
|
||||
import { LitElement } from "lit";
|
||||
import { debounce as _debounce, type DebounceSettings } from "lodash";
|
||||
|
||||
import { getMethodDescriptor } from "./internal";
|
||||
|
||||
export function debounce(wait: number, options?: DebounceSettings) {
|
||||
return <T extends LitElement>(proto: T, propName: keyof T, desc: PropertyDescriptor) => {
|
||||
const method = (desc?.value as Fn<any[], any>)
|
||||
?? getMethodDescriptor(proto, propName)?.value
|
||||
?? (() => {});
|
||||
|
||||
const updated: PropertyDescriptor = {
|
||||
value: _debounce(method, wait, options),
|
||||
}
|
||||
|
||||
Object.defineProperty(proto, propName, updated);
|
||||
|
||||
return updated;
|
||||
}
|
||||
}
|
||||
@@ -1 +1,2 @@
|
||||
export * from "./debounce";
|
||||
export * from "./on";
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
background: #242433;
|
||||
}
|
||||
|
||||
// Layout utilities
|
||||
@@ -17,46 +18,137 @@
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.hierarchy-wrapper {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 100vh;
|
||||
}
|
||||
.hierarchy {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem {
|
||||
inline-end: 0.5rem;
|
||||
}
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.hierarchy-resize-handle {
|
||||
width: 0.5rem;
|
||||
cursor: ew-resize;
|
||||
background: transparent;
|
||||
transition: background 66.666ms linear;
|
||||
|
||||
&:hover, &.resizing {
|
||||
background: #39394c;
|
||||
}
|
||||
}
|
||||
|
||||
.split-screen {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.studio-scene,
|
||||
.image-capture {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.studio-scene {
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-capture {
|
||||
width: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hierarchy {
|
||||
width: 256px;
|
||||
max-height: calc(100vh - 2rem);
|
||||
.studio-scene.resizing::part(canvas) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.config {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 1rem;
|
||||
background: #0006;
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
height: 1.5rem;
|
||||
.config-prompt {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
color: #FFFC;
|
||||
transition: color 0.1s linear;
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 15px;
|
||||
weight: 500;
|
||||
}
|
||||
.config-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
color: #FFFF;
|
||||
color: #FFFC;
|
||||
transition: color 0.1s linear;
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 15px;
|
||||
weight: 500;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #FFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.config-field {
|
||||
background: #0004;
|
||||
border: 1px solid #FFF2;
|
||||
color: #FFFC;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
font: {
|
||||
family: "Fira Sans", sans-serif;
|
||||
size: 1rem;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #FFF6;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none !important;
|
||||
border-color: #FFF4;
|
||||
background: #0006;
|
||||
color: #FFFF;
|
||||
}
|
||||
|
||||
&.prompt {
|
||||
width: 512px;
|
||||
}
|
||||
|
||||
&.seed {
|
||||
width: 96px;
|
||||
appearance: textfield;
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-field-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.seed-refresh {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0.5rem;
|
||||
bottom: 0;
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #FFFC;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { on } from "@storyteller/framework";
|
||||
import { debounce, drag, on } from "@storyteller/framework";
|
||||
import * as studio from "@storyteller/studio";
|
||||
import {
|
||||
SceneState,
|
||||
@@ -9,7 +9,8 @@ import {
|
||||
import { match } from "@storyteller/utility";
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { DebounceSettings, debounce } from "lodash";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
import { classMap } from "lit/directives/class-map.js";
|
||||
|
||||
import "@storyteller/studio-web/canvas-provider";
|
||||
import "@storyteller/studio-web/scene-hierarchy";
|
||||
@@ -18,30 +19,19 @@ import "@storyteller/studio-web/transform-toolbar";
|
||||
|
||||
import "./app.element.scss"
|
||||
|
||||
class Debounce {
|
||||
static readonly Wait = 1000 / 24;
|
||||
static readonly Realtime = {
|
||||
leading: false,
|
||||
trailing: true,
|
||||
maxWait: 1000 / 5,
|
||||
};
|
||||
|
||||
static readonly Delayed = {
|
||||
leading: false,
|
||||
trailing: true,
|
||||
};
|
||||
|
||||
static func(config: DebounceSettings) {
|
||||
return debounce(() => studio.requestScreenshot(), this.Wait, config);
|
||||
}
|
||||
}
|
||||
|
||||
@customElement("app-root")
|
||||
export class AppElement extends LitElement {
|
||||
@state() loading = true;
|
||||
@state() imageCaptureUrl?: string;
|
||||
@state() realtimeCapture = true;
|
||||
|
||||
@state() hierarchyWidth = 256;
|
||||
@state() resizing = false;
|
||||
|
||||
@state() loading = true;
|
||||
|
||||
@state() prompt = "";
|
||||
@state() seed = randomSeed();
|
||||
|
||||
protected override createRenderRoot = () => this;
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
@@ -63,10 +53,29 @@ export class AppElement extends LitElement {
|
||||
|
||||
@on("entity-changes")
|
||||
onStudioChanges(): void {
|
||||
this.requestScreenshot();
|
||||
if (this.realtimeCapture) {
|
||||
this.requestScreenshot_realtime();
|
||||
} else {
|
||||
this.requestScreenshot_delayed();
|
||||
}
|
||||
}
|
||||
|
||||
requestScreenshot = Debounce.func(Debounce.Realtime);
|
||||
@on("viewport-resized")
|
||||
// This handler requires a longer debounce to avoid crashing the render piptline
|
||||
@debounce(1000 / 5)
|
||||
onViewportResized(): void {
|
||||
studio.requestScreenshot();
|
||||
}
|
||||
|
||||
@debounce(1000 / 24, { maxWait: 1000 / 5 })
|
||||
requestScreenshot_realtime() {
|
||||
studio.requestScreenshot();
|
||||
}
|
||||
|
||||
@debounce(1000 / 24)
|
||||
requestScreenshot_delayed() {
|
||||
studio.requestScreenshot();
|
||||
}
|
||||
|
||||
@on("screenshot-ready")
|
||||
onScreenshotReady({ detail: screenshot }: ScreenshotReadyEvent) {
|
||||
@@ -74,41 +83,109 @@ export class AppElement extends LitElement {
|
||||
|
||||
const blob = new Blob([screenshot.data.buffer], { type: "image/png" });
|
||||
this.imageCaptureUrl = URL.createObjectURL(blob);
|
||||
console.log(`New blob URL: ${this.imageCaptureUrl}`);
|
||||
|
||||
if (prevUrl != null)
|
||||
URL.revokeObjectURL(prevUrl);
|
||||
}
|
||||
|
||||
onResizeStart(): void {
|
||||
this.resizing = true;
|
||||
}
|
||||
|
||||
onResizeEnd(): void {
|
||||
this.resizing = false;
|
||||
}
|
||||
|
||||
onResize(event: PointerEvent): void {
|
||||
let updated = this.hierarchyWidth + event.movementX;
|
||||
this.hierarchyWidth = Math.max(Math.min(updated, 512), 128);
|
||||
}
|
||||
|
||||
toggleRealtimeCapture(event: InputEvent): void {
|
||||
const { checked } = event.target as HTMLInputElement;
|
||||
this.realtimeCapture = checked;
|
||||
}
|
||||
|
||||
const config = checked ? Debounce.Realtime : Debounce.Delayed;
|
||||
this.requestScreenshot = Debounce.func(config);
|
||||
refreshSeed(): void {
|
||||
this.seed = randomSeed();
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
<sts-canvas-provider class="app-root">
|
||||
<sts-studio
|
||||
class="studio-scene"
|
||||
objectId="base-human-female.gltf"
|
||||
skyboxId="test_scene"
|
||||
.mode=${StudioMode.Editor}
|
||||
></sts-studio>
|
||||
<div
|
||||
class="hierarchy-wrapper"
|
||||
style=${styleMap({ width: `${this.hierarchyWidth}px` })}
|
||||
>
|
||||
<sts-scene-hierarchy class="hierarchy"></sts-scene-hierarchy>
|
||||
<div
|
||||
class=${classMap({
|
||||
"hierarchy-resize-handle": true,
|
||||
"resizing": this.resizing,
|
||||
})}
|
||||
${drag({
|
||||
start: this.onResizeStart,
|
||||
move: this.onResize,
|
||||
end: this.onResizeEnd,
|
||||
})}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
${this.imageCaptureUrl != null ? html`
|
||||
<img
|
||||
class="image-capture"
|
||||
src=${this.imageCaptureUrl}
|
||||
alt="Image capture"
|
||||
/>
|
||||
` : nothing}
|
||||
<div class="split-screen">
|
||||
<sts-studio
|
||||
class=${classMap({
|
||||
"studio-scene": true,
|
||||
"resizing": this.resizing,
|
||||
})}
|
||||
objectId="base-human-female.gltf"
|
||||
skyboxId="test_scene"
|
||||
.mode=${StudioMode.Editor}
|
||||
>
|
||||
<sts-transform-toolbar
|
||||
class="xform-toolbar h-center v-start"
|
||||
></sts-transform-toolbar>
|
||||
</sts-studio>
|
||||
|
||||
${this.imageCaptureUrl != null ? html`
|
||||
<img
|
||||
class="image-capture"
|
||||
src=${this.imageCaptureUrl}
|
||||
alt="Image capture"
|
||||
/>
|
||||
` : html`
|
||||
<div class="image-capture placeholder"></div>
|
||||
`}
|
||||
|
||||
<div class="config config-prompt h-center v-end"
|
||||
@keydown=${(event: KeyboardEvent) => event.stopPropagation()}
|
||||
@keyup=${(event: KeyboardEvent) => event.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
class="config-field prompt"
|
||||
type="text"
|
||||
aria-label="Prompt"
|
||||
placeholder="Enter a prompt to customize the output"
|
||||
/>
|
||||
<div class="config-field-group">
|
||||
<input
|
||||
class="config-field seed"
|
||||
type="number"
|
||||
aria-label="Seed"
|
||||
value=${this.seed}
|
||||
min="100"
|
||||
max="10000"
|
||||
/>
|
||||
<button
|
||||
class="seed-refresh"
|
||||
@click=${this.refreshSeed}
|
||||
>
|
||||
<sts-icon icon="rotate"></sts-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sts-scene-hierarchy class="hierarchy h-start v-start"></sts-scene-hierarchy>
|
||||
<sts-transform-toolbar class="h-center v-start"></sts-transform-toolbar>
|
||||
<div class="config v-start h-end">
|
||||
<label class="checkbox">
|
||||
<label class="config-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.realtimeCapture}
|
||||
@@ -127,3 +204,7 @@ export class AppElement extends LitElement {
|
||||
</sts-canvas-provider>
|
||||
`
|
||||
}
|
||||
|
||||
function randomSeed(): number {
|
||||
return Math.round(Math.random() * 5000);
|
||||
}
|
||||
|
||||
@@ -67,7 +67,14 @@ export class StudioElement extends LitElement {
|
||||
|
||||
#onResize(): void {
|
||||
const { width, height } = this.getBoundingClientRect();
|
||||
|
||||
studio.resize(new ViewportSize(width, height));
|
||||
|
||||
this.dispatchEvent(new CustomEvent("viewport-resized", {
|
||||
detail: { width, height },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
#tick(): void {
|
||||
@@ -120,6 +127,7 @@ export class StudioElement extends LitElement {
|
||||
}
|
||||
|
||||
protected override render = () => html`
|
||||
<slot name="canvas"></slot>
|
||||
<slot name="canvas" part="canvas"></slot>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user