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

framework/src/lib/decorators/debounce.ts

@@ -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;
+	}
+}

framework/src/lib/decorators/index.ts

@@ -1 +1,2 @@
+export * from "./debounce";
 export * from "./on";

image-generator-demo/src/app/app.element.scss

@@ -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 {
+.studio-scene.resizing::part(canvas) {
-	width: 256px;
+	pointer-events: none;
-	max-height: calc(100vh - 2rem);
 }
 
 .config {
-	display: flex;
+	padding: 1rem;
-	flex-direction: column;
-	gap: 0.25em;
-
-	padding: 0.5rem 1rem;
 	background: #0006;
 	backdrop-filter: blur(16px);
 	border-radius: 0.5rem;
+}
 
-	.checkbox {
+.config-prompt {
-		display: flex;
+	display: flex;
-		align-items: center;
+	gap: 0.5rem;
-		gap: 0.5rem;
+}
-		height: 1.5rem;
 
-		color: #FFFC;
+.config-checkbox {
-		transition: color 0.1s linear;
+	display: flex;
-		font: {
+	align-items: center;
-			family: "Fira Sans", sans-serif;
+	gap: 0.5rem;
-			size: 15px;
-			weight: 500;
-		}
 
-		&:hover {
+	color: #FFFC;
-			color: #FFFF;
+	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;

image-generator-demo/src/app/app.element.ts

@@ -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;
+	refreshSeed(): void {
-		this.requestScreenshot = Debounce.func(config);
+		this.seed = randomSeed();
 	}
 
 	protected override render = () => html`
 		<sts-canvas-provider class="app-root">
-			<sts-studio
+			<div
-				class="studio-scene"
+				class="hierarchy-wrapper"
-				objectId="base-human-female.gltf"
+				style=${styleMap({ width: `${this.hierarchyWidth}px` })}
-				skyboxId="test_scene"
+			>
-				.mode=${StudioMode.Editor}
+				<sts-scene-hierarchy class="hierarchy"></sts-scene-hierarchy>
-			></sts-studio>
+				<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`
+			<div class="split-screen">
-				<img
+				<sts-studio
-					class="image-capture"
+					class=${classMap({
-					src=${this.imageCaptureUrl}
+						"studio-scene": true,
-					alt="Image capture"
+						"resizing": this.resizing,
-				/>
+					})}
-			` : nothing}
+					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);
+}

studio-web/src/lib/studio.element.ts

@@ -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>
 	`;
 }