diff --git a/framework/src/lib/decorators/on.ts b/framework/src/lib/decorators/on.ts index c3a66a1..2867564 100644 --- a/framework/src/lib/decorators/on.ts +++ b/framework/src/lib/decorators/on.ts @@ -10,7 +10,7 @@ import { getMethodDescriptor, prependRoutine } from "./internal"; * The event name can be prefixed with `window:` or `document:` to add the * listener to one of those targets instead of the custom element itself. */ -export function on(eventSelector: string) { +export function on(eventSelector: string, options?: AddEventListenerOptions) { const [targetName, eventName] = eventSelector.includes(":") ? eventSelector.split(":") : [null, eventSelector]; @@ -34,9 +34,9 @@ export function on(eventSelector: string) { this[$handler] ??= handler.bind(this); if (target) { - target.addEventListener(eventName, this[$handler]); + target.addEventListener(eventName, this[$handler], options); } else { - this.addEventListener(eventName, this[$handler]); + this.addEventListener(eventName, this[$handler], options); } }); diff --git a/studio-frontend/src/app/anim-editor.element.scss b/studio-frontend/src/app/anim-editor.element.scss index 07a10c2..000266b 100644 --- a/studio-frontend/src/app/anim-editor.element.scss +++ b/studio-frontend/src/app/anim-editor.element.scss @@ -1,8 +1,30 @@ :host { + display: grid; + grid-template-rows: subgrid; + grid-template-columns: subgrid; +} + +.timeline-controls { + align-self: end; + justify-self: center; + display: flex; + justify-content: center; + grid-column: center-toolbar; + grid-row: bottom-toolbar; + background-color: var(--color-toolbar-background); + padding: var(--padding); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + +} + +.timeline-wrapper { + grid-area: timeline; display: grid; border-radius: 8px; - background: #0006; - backdrop-filter: blur(16px); + background: var(--color-panel-background); grid-template-columns: [sidebar-start] min-content [sidebar-end divider-start] 8px [divider-end diff --git a/studio-frontend/src/app/anim-editor.element.ts b/studio-frontend/src/app/anim-editor.element.ts index 22d18f0..e790518 100644 --- a/studio-frontend/src/app/anim-editor.element.ts +++ b/studio-frontend/src/app/anim-editor.element.ts @@ -323,14 +323,9 @@ export class AnimEditorElement extends LitElement const none_selected = !selected; return html` -
+
- + ${this.keyingMode === "automatic" ? html` +
+
+
${tracklist}
@@ -409,6 +412,7 @@ export class AnimEditorElement extends LitElement .track_ordered=${track_order_hashed} .track_animation_target_ordered=${track_animation_target_order_hashed} > +
` }; }; diff --git a/studio-frontend/src/app/anim-timeline.element.scss b/studio-frontend/src/app/anim-timeline.element.scss index b1831c4..f530c54 100644 --- a/studio-frontend/src/app/anim-timeline.element.scss +++ b/studio-frontend/src/app/anim-timeline.element.scss @@ -4,6 +4,7 @@ display: grid; grid-template-rows: subgrid; grid-row: 1 / span var(--row-count); + pointer-events: all; } *:focus-visible { diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss index 5ad99a2..3f82dac 100644 --- a/studio-frontend/src/app/app.element.scss +++ b/studio-frontend/src/app/app.element.scss @@ -5,120 +5,157 @@ $hierarchy-width: 290px; .app-root { position: fixed; inset: 0; + --sidebar-width: 300px; + --timeline-height: max-content; } -// Layout utilities -.v-start { - position: absolute; - top: 16px; -} -.v-end { - position: absolute; - bottom: 16px; -} -.v-after-toolbar { - position: absolute; - top: 60px; -} -.h-start { left: 16px } -.h-end { right: 16px } -.h-center { - left: 50%; - transform: translateX(-50%); +.wrapper { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: grid; + pointer-events: none; + + grid-template-columns: [timeline-start screen-start] 2rem [left-toolbar-start help-start] max-content [left-toolbar-end] auto [center-toolbar-start] max-content [center-toolbar-end] auto [right-toolbar-start] max-content [right-toolbar-end] 2rem [screen-end help-end sidebar-start] var(--sidebar-width) [sidebar-end timeline-end]; + grid-template-rows: [top-toolbar-start sidebar-start screen-start] min-content [top-toolbar-end help-start sidebar-view-start] max-content [help-end] auto [bottom-toolbar-start] max-content [bottom-toolbar-end sidebar-end sidebar-view-end screen-end timeline-start] var(--timeline-height) [timeline-end]; + + .studio-scene { + position: fixed; + bottom: 0; + left: 0; + right: 0; + pointer-events: all; + } + + .action-toolbar { + grid-column: left-toolbar; + grid-row: top-toolbar; + padding-top: var(--padding); + + sts-toolbar-group { + gap: var(--padding); + } + + sts-button { + background-color: var(--color-toolbar-background); + } + + z-index: 1; + } + + .timeline { + grid-row-start: bottom-toolbar-start; + grid-row-end: timeline-end; + grid-column: timeline; + z-index: 1; + border-radius: 0; + } + + .sidebar { + display: grid; + grid-area: sidebar; + grid-template-rows: subgrid; + z-index: 1; + background-color: var(--color-panel-background); + border-radius: 0; + + + position: relative; + padding: var(--padding); + padding-left: 0.5rem; + + .resize-handle { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 0.5rem; + background: #0004; + transition: 66.666ms background linear; + + &:hover { + background: #FFF1; + } + } + + .sidebar-header { + grid-row: top-toolbar; + display: flex; + flex-direction: row; + justify-content: stretch; + gap: 0; + + .sidebar-tab { + border: none; + background: none; + border-bottom: 2px var(--color-toolbar-background) solid; + flex-grow: 1; + border-radius: 0; + + &.current-tab { + color: var(--color-text-bright); + border-bottom-color: var(--color-accent); + } + } + } + + .sidebar-view { + grid-row: sidebar-view; + } + } + + .help { + grid-area: help; + z-index: 1; + display: flex; + flex-direction: row; + justify-content: start; + } + + .entity-inspector { + grid-column: left-toolbar; + grid-row: bottom-toolbar; + z-index: 1; + padding-bottom: var(--padding); + & > * { + pointer-events: all; + } + } + + .transform-toolbar { + grid-column: center-toolbar; + grid-row: top-toolbar; + background-color: var(--color-toolbar-background); + z-index: 1; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: var(--corner-radius); + border-bottom-left-radius: var(--corner-radius); + padding: var(--padding); + display: flex; + flex-direction: row; + gap: 1rem; + + .add-to-scene-dropdown { + background-color: var(--color-toolbar-background-light); + font-size: 16px; + padding: 10px 12px; + } + } } .studio-scene.block-pointer-events::part(canvas) { pointer-events: none; } -sts-button.active { - background: #7A2C34E3; - color: #FFF; -} - -// TODO: Probably move this -.inspector-open { - display: flex; - align-items: center; - justify-content: center; - width: 52px; - height: 52px; - border-radius: 24px; - - appearance: none; - border: none; - background: #0006; - backdrop-filter: blur(16px); - color: #FFFC; - transition: { - property: background-color, color; - duration: 100ms; - timing-function: linear; - } - cursor: pointer; - - font-size: 20px; - - &:hover { - background: #0008; - color: #FFFF; - } -} - -.inspector { - display: flex; - flex-direction: column; - border-radius: 0.5rem; - border: 0.5rem solid #0004 { - block-start: none; - inline-start: none; - } - padding: { - block-start: 2rem; - inline-start: 0.5rem; - } - - background: #0006; - backdrop-filter: blur(16px); - - &__hierarchy { - flex: 0 0 calc(50% - 0.25rem); - } - - &__entity { - flex: 1 0 0; - height: 0; - } - - .resize-handle { - background: #0004; - transition: 66.666ms background linear; - - &:hover { - background: #FFF1; - } - - &--h-start { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 0.5rem; - cursor: ew-resize; - } - - &--v-center { - height: 0.5rem; - cursor: ns-resize - } - } -} - .inspector-header { display: flex; align-items: center; justify-content: space-between; height: 2rem; + padding: 0 { inline-start: 0.75rem; } @@ -133,6 +170,7 @@ sts-button.active { &__label { margin: 0; color: #FFF9; + font: { family: "Fira Sans", sans-serif; size: math.div(15, 16) * 1rem; @@ -151,6 +189,7 @@ sts-button.active { background: transparent; border: none; color: #FFFC; + transition: { property: color, background-color; duration: 66.666ms; @@ -170,4 +209,4 @@ sts-button.active { .menu-button-icon { font-size: 12px; opacity: 0.75; -} +} \ No newline at end of file diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts index b7e55a8..26f7bfa 100644 --- a/studio-frontend/src/app/app.element.ts +++ b/studio-frontend/src/app/app.element.ts @@ -14,7 +14,7 @@ import { StudioURLParams, } from "@storyteller/studio-web"; import { match } from "@storyteller/utility"; -import { LitElement, html, nothing } from "lit"; +import { LitElement, TemplateResult, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; import { createRef, ref } from "lit/directives/ref.js"; @@ -48,14 +48,15 @@ import { mock_save_load } from "./util"; }) export class AppElement extends LitElement { @state() showHelp = false; - @state() showInspector = false; @state() loading = true; @state() resizingPanel = false; @state() inspectorWidth = 320; - @state() hierarchyHeight?: number; - #enableAnimTimeline = true; // TODO + @state() sidebars: Array<{ title: string, name: string}> = [{title: 'Hierarchy', name: 'hierarchy'}]; + + @state() currentSidebar : string = 'hierarchy'; + private api = new StorytellerApi(); #addToSceneButtonRef = createRef(); @@ -75,9 +76,9 @@ export class AppElement extends LitElement { const file = new File([scene], "scene.scn.ron", { type: "text/ron" }); if (mock_save_load()) { /* - // NB(brandon, 2024-03-22): Hey Lee-Orr, I'm commenting this out since the file + // NB(brandon, 2024-03-22): Hey Lee-Orr, I'm commenting this out since the file picker isn't defined and the Netlify builds are breaking. Feel free to uncomment - this for your testing. We probably just need a local definition file so the + this for your testing. We probably just need a local definition file so the builds are happy. let handle = await window.showSaveFilePicker({ @@ -120,7 +121,7 @@ export class AppElement extends LitElement { onSceneStateChange({ detail: state }: SceneStateEvent): void { console.log("scene state change:", SceneState[state]); - this.loading = match (state, { + this.loading = match(state, { [SceneState.Active]: () => false, _: () => true, }); @@ -139,41 +140,43 @@ export class AppElement extends LitElement { this.inspectorWidth = Math.max(Math.min(updated, 1024), 128); } - resizeHierarchyHeight(event: PointerEvent): void { - let availableHeight = this.#inspectorRef.value?.clientHeight; - if (availableHeight == null) return; - // Account for: - // - `section.inspector` padding (2rem ~= 32px) - // - resize-handle (0.5rem ~= 8px) - // - minimal space for `sts-entity-inspector` (2rem ~= 32px) - availableHeight -= 72; - - const height = this.hierarchyHeight ?? this.#hierarchyRef.value?.offsetHeight; - if (height == null) return; - - const updated = height + event.movementY; - this.hierarchyHeight = Math.max(Math.min(updated, availableHeight), 8); - } - - minimizeInspector(): void { - this.showInspector = false; - } - - openInspector(): void { - this.showInspector = true; - } - toggleHelp(): void { this.showHelp = !this.showHelp; } + renderSidebar(): TemplateResult<1> { + if (this.currentSidebar === 'hierarchy') { + return html``; + } + + return html`<>`; + } + protected override render() { return html` - + + + ${this.#params.mode === StudioMode.Editor ? html` + { + this.#mediaLibraryRef.value?.open(); + }} + > + + ` : html`<>`} +
- + ${this.#params.mode === StudioMode.Editor ? html` studio.saveScene()} > - Save - - - Add to Scene - + Save Scene ` : nothing} Help @@ -222,105 +213,69 @@ export class AppElement extends LitElement { ${this.#params.mode === StudioMode.Editor ? html` - { - this.#mediaLibraryRef.value?.open(); - }} - > - +
+ + + +
- - - ${this.showInspector ? html`
-
-

- Inspector -

- -
+
+ ${this.sidebars.map(({title, name}) => { + return html`${title}` + })} +
- + ${this.renderSidebar()}
- - - -
- ` : html` - - `} - ${this.#enableAnimTimeline ? html` +
+ +
+ - ` : nothing} ` : nothing} - + ${this.showHelp ? html` - +
+ +
` : nothing} +
+ ${this.loading ? html` ` : nothing} + - `; } } diff --git a/studio-frontend/src/styles.scss b/studio-frontend/src/styles.scss index 3782467..ac635b1 100644 --- a/studio-frontend/src/styles.scss +++ b/studio-frontend/src/styles.scss @@ -7,4 +7,17 @@ html, body { height: 100%; margin: 0; overflow: hidden; + + --color-panel-background: #1e1e2c; + --color-toolbar-background: #2c2c3b; + --color-toolbar-background-light: #595970; + --color-panel-item-name-background: #39394d; + --color-panel-item-background: #55556b; + --color-accent: #fc6b68; + --color-text: #dbdbdf; + --color-text-bright: #ffffff; + --color-text-disabled: #7c7c85; + + --corner-radius: 0.75rem; + --padding: 0.4rem; } diff --git a/studio-ui/src/lib/dialog/dialog-base.element.scss b/studio-ui/src/lib/dialog/dialog-base.element.scss index 05a4edd..a7ff456 100644 --- a/studio-ui/src/lib/dialog/dialog-base.element.scss +++ b/studio-ui/src/lib/dialog/dialog-base.element.scss @@ -10,8 +10,9 @@ background: #0006; color: #FFFC; backdrop-filter: blur(32px); - border-radius: 0.5rem; + border-radius: 1rem; overflow: hidden; + pointer-events: auto; } .main { @@ -22,13 +23,23 @@ .content { display: flex; flex-direction: column; - flex: 0 0 auto; + flex: 1 0 0; gap: 1rem; border: { inline: 0.5rem solid #0004; block-end: 0.5rem solid #0004; + bottom-right-radius: 1rem; + bottom-left-radius: 1rem; } padding: 1rem; + + &.with-footer { + border: { + block-end: none; + bottom-right-radius: 0; + bottom-left-radius: 0; + } + } } [part="sidebar"]:not(:empty) { @@ -36,6 +47,9 @@ background: #0004; + .content { - border-inline-start: none; + border: { + inline-start: none; + bottom-left-radius: 0; + } } } diff --git a/studio-ui/src/lib/dialog/dialog-base.element.ts b/studio-ui/src/lib/dialog/dialog-base.element.ts index 7d9e7a5..10d4626 100644 --- a/studio-ui/src/lib/dialog/dialog-base.element.ts +++ b/studio-ui/src/lib/dialog/dialog-base.element.ts @@ -1,6 +1,7 @@ import { on } from "@storyteller/framework"; -import { LitElement, TemplateResult, html, unsafeCSS } from "lit"; -import { customElement, property, queryAssignedElements } from "lit/decorators.js"; +import { LitElement, PropertyValues, TemplateResult, html, unsafeCSS } from "lit"; +import { customElement, property, queryAssignedElements, state } from "lit/decorators.js"; +import { classMap } from "lit/directives/class-map.js"; import { v4 as uuid } from "uuid"; import { type DialogHeaderElement } from "./dialog-header.element"; @@ -62,14 +63,37 @@ export class DialogBaseElement extends LitElement { override ariaModal = "true"; override tabIndex = -1; + @state() _hasFooter = false; + @queryAssignedElements({ slot: "dialog-header" }) dialogHeaders!: Element[]; + @queryAssignedElements({ slot: "footer" }) + dialogFooters!: Element[]; + + @state() _translateX?: number; + @state() _translateY?: number; + override connectedCallback(): void { this.focus(); super.connectedCallback(); } + protected override update(changes: PropertyValues): void { + if ( + changes.has("_translateX") || changes.has("_translateY") + && (this._translateX != null || this._translateY != null) + ) { + this.style.setProperty( + "transform", + `translateX(${this._translateX ?? 0}px) ` + + `translateY(${this._translateY ?? 0}px)` + ); + } + + super.update(changes); + } + @on("keydown") onKeydown(event: KeyboardEvent): void { if (/^(Escape|Shift)$/.test(event.key)) @@ -79,6 +103,12 @@ export class DialogBaseElement extends LitElement { this.dispatchEvent(new CustomEvent("close")); } + @on("translate", { capture: true }) + onTranslate({ detail: { x, y }}: CustomEvent<{ x: number; y: number }>): void { + this._translateX = x; + this._translateY = y; + } + onDialogHeaderChanged(): void { if (this.dialogHeaders.length && !this.ariaLabel) { const header = this.dialogHeaders[0]; @@ -90,6 +120,10 @@ export class DialogBaseElement extends LitElement { } } + onFooterChanged(): void { + this._hasFooter = this.dialogFooters.length > 0; + } + protected override render(): TemplateResult { return html` -
+
- + `; } } diff --git a/studio-ui/src/lib/dialog/dialog-footer.element.scss b/studio-ui/src/lib/dialog/dialog-footer.element.scss new file mode 100644 index 0000000..26b9495 --- /dev/null +++ b/studio-ui/src/lib/dialog/dialog-footer.element.scss @@ -0,0 +1,13 @@ +:host { + box-sizing: border-box; + display: flex; + justify-content: flex-end; + gap: 0.75rem; + padding: 0 1rem 1rem; + border: { + inline: 0.5rem solid #0004; + block-end: 0.5rem solid #0004; + bottom-right-radius: 1rem; + bottom-left-radius: 1rem; + } +} diff --git a/studio-ui/src/lib/dialog/dialog-footer.element.ts b/studio-ui/src/lib/dialog/dialog-footer.element.ts new file mode 100644 index 0000000..25554ed --- /dev/null +++ b/studio-ui/src/lib/dialog/dialog-footer.element.ts @@ -0,0 +1,16 @@ +import { LitElement, html, unsafeCSS } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +import styles from "./dialog-footer.element.scss?inline"; + +@customElement("sts-dialog-footer") +export class DialogFooterElement extends LitElement { + static override styles = unsafeCSS(styles); + + @property({ reflect: true }) + override slot = "footer"; + + protected override render = () => html` + + `; +} diff --git a/studio-ui/src/lib/dialog/dialog-header.element.scss b/studio-ui/src/lib/dialog/dialog-header.element.scss index dcb827a..b7918e8 100644 --- a/studio-ui/src/lib/dialog/dialog-header.element.scss +++ b/studio-ui/src/lib/dialog/dialog-header.element.scss @@ -3,18 +3,18 @@ :host { display: flex; align-items: center; - justify-content: space-between; height: 3rem; - padding: 0 { - inline-start: 1rem; - } background: #0006; } .title { + flex: 1 0 0; display: flex; + height: 3rem; align-items: center; gap: math.div(12, 16) * 1rem; + padding-inline-start: 1rem; + user-select: none; &__icon { color: #FFFC; diff --git a/studio-ui/src/lib/dialog/dialog-header.element.ts b/studio-ui/src/lib/dialog/dialog-header.element.ts index 68160b1..ff3901b 100644 --- a/studio-ui/src/lib/dialog/dialog-header.element.ts +++ b/studio-ui/src/lib/dialog/dialog-header.element.ts @@ -1,3 +1,4 @@ +import { drag } from "@storyteller/framework"; import { LitElement, html, nothing, unsafeCSS } from "lit"; import { customElement, property } from "lit/decorators.js"; import { v4 as uuid } from "uuid"; @@ -53,6 +54,9 @@ export class DialogHeaderElement extends LitElement { @property() icon?: string; + #translateX?: number; + #translateY?: number; + onClose(): void { this.dispatchEvent(new CustomEvent("close", { bubbles: true, @@ -60,10 +64,30 @@ export class DialogHeaderElement extends LitElement { })); } + onDrag(event: PointerEvent): void { + this.#translateX ??= 0; + this.#translateY ??= 0; + + this.#translateX += event.movementX; + this.#translateY += event.movementY; + + this.dispatchEvent(new CustomEvent("translate", { + detail: { + x: this.#translateX, + y: this.#translateY, + }, + bubbles: true, + composed: true, + })); + } + protected override render = () => html`
${this.icon ? html` { - if (!this.ignoreBackdropClick) + if (!this.ignoreBackdropClick && !this.nonBlocking) this.close(); } } diff --git a/studio-ui/src/lib/dialog/index.ts b/studio-ui/src/lib/dialog/index.ts index 8cb5302..f39b08b 100644 --- a/studio-ui/src/lib/dialog/index.ts +++ b/studio-ui/src/lib/dialog/index.ts @@ -1,7 +1,9 @@ import "./dialog-base.element"; +import "./dialog-footer.element"; import "./dialog-header.element"; import "./dialog.element"; export * from "./dialog.element"; export * from "./dialog-base.element"; +export * from "./dialog-footer.element"; export * from "./dialog-header.element"; diff --git a/studio-ui/src/lib/forms/text-field.element.ts b/studio-ui/src/lib/forms/text-field.element.ts index e241c32..1ebfecc 100644 --- a/studio-ui/src/lib/forms/text-field.element.ts +++ b/studio-ui/src/lib/forms/text-field.element.ts @@ -1,5 +1,5 @@ import { on } from "@storyteller/framework"; -import { html, nothing, unsafeCSS } from "lit"; +import { PropertyValues, html, nothing, unsafeCSS } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -27,6 +27,13 @@ export class TextFieldElement extends FormFieldBaseElement { @property({ attribute: "icon-pre" }) iconPre?: string; @property({ attribute: "icon-post" }) iconPost?: string; + protected override update(changes: PropertyValues): void { + if (changes.has("value")) + this.internals.setFormValue(this.value); + + super.update(changes); + } + @on("keydown") @on("keyup") blockKeypressBubbling(event: KeyboardEvent): void { diff --git a/studio-ui/src/lib/icon.element.ts b/studio-ui/src/lib/icon.element.ts index 72307a2..a5610e9 100644 --- a/studio-ui/src/lib/icon.element.ts +++ b/studio-ui/src/lib/icon.element.ts @@ -44,6 +44,7 @@ import farArrowRightToBracket from "@fortawesome/fontawesome-pro/svgs/regular/ar import farMagnifyingGlass from "@fortawesome/fontawesome-pro/svgs/regular/magnifying-glass.svg?raw"; import fasHouse from "@fortawesome/fontawesome-pro/svgs/solid/house.svg?raw"; import fasRecord from "@fortawesome/fontawesome-pro/svgs/solid/circle.svg?raw"; +import fasUpload from "@fortawesome/fontawesome-pro/svgs/solid/upload.svg?raw"; import customCylinder from "../assets/icons/cylinder.svg?raw"; import customSphere from "../assets/icons/sphere.svg?raw"; @@ -105,6 +106,7 @@ function renderSvg(iconId: string) { "pause": () => fasPause, "plus-large": () => fasPlusLarge, "question": () => fasQuestion, + "record": () => fasRecord, "rotate": () => farRotate, "scale": () => farScale, "scene": () => farMountainSun, @@ -113,10 +115,10 @@ function renderSvg(iconId: string) { "sphere": () => customSphere, "torus": () => customTorus, "up-down-left-right": () => farUpDownLeftRight, + "upload": () => fasUpload, "video": () => farVideo, "volume": () => farVolume, "xmark": () => fasXmark, - "record": () => fasRecord, _: () => null, }); diff --git a/studio-ui/src/lib/toolbar-group.element.scss b/studio-ui/src/lib/toolbar-group.element.scss index 462ff27..5e2eaf0 100644 --- a/studio-ui/src/lib/toolbar-group.element.scss +++ b/studio-ui/src/lib/toolbar-group.element.scss @@ -4,7 +4,7 @@ } ::slotted(*) { - border-radius: 0; + border-radius: var(--corner-radius); } ::slotted(:first-child) { diff --git a/studio-web/src/lib/asset-import-dialog.element.scss b/studio-web/src/lib/asset-import-dialog.element.scss new file mode 100644 index 0000000..3f36a26 --- /dev/null +++ b/studio-web/src/lib/asset-import-dialog.element.scss @@ -0,0 +1,60 @@ +@use "sass:math"; + +*, *::before, *::after { + box-sizing: border-box; +} + +:host { + display: contents; +} + +.dialog { + min-width: 480px; +} + +.form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.form-field { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.label { + color: #FFF9; + font-size: math.div(15, 16) * 1rem; +} + +// TODO: Make a component for this +select.input { + padding: 0.5rem 0.75rem; + border-radius: 0.25rem; + background: #0004; + border: 1px solid #FFF2; + color: #FFFC; + transition: { + property: background-color, border-color, color; + duration: 33.333ms; + timing-function: linear; + } + + &:focus { + outline: none; + border-color: #FFF4; + background: #0006; + color: #FFFF; + } +} +option { + color-scheme: dark !important; + background-color: #000000; + color: #FFFC; + + &:disabled { + color: #FFF6; + } +} diff --git a/studio-web/src/lib/asset-import-dialog.element.ts b/studio-web/src/lib/asset-import-dialog.element.ts new file mode 100644 index 0000000..14bb63e --- /dev/null +++ b/studio-web/src/lib/asset-import-dialog.element.ts @@ -0,0 +1,231 @@ +import { bind } from "@storyteller/framework"; +import { LitElement, PropertyValues, TemplateResult, html, nothing, unsafeCSS } from "lit"; +import { customElement, property, state } from "lit/decorators.js"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { createRef, ref } from "lit/directives/ref.js"; + +import { MediaFileClass, MediaFileSubtype } from "./storyteller-api"; + +import "@storyteller/studio-ui/dialog"; + +import styles from "./asset-import-dialog.element.scss?inline"; + +export interface AssetImport { + type: MediaFileClass; + title: string; + animationSkeleton?: AnimationSkeleton; +} + +export type AnimationSkeleton + = MediaFileSubtype.Mixamo + | MediaFileSubtype.MocapNet + | MediaFileSubtype.AnimationOnly + ; + +@customElement("sts-asset-import-dialog") +export class AssetImportDialogElement extends LitElement { + static override styles = unsafeCSS(styles); + + @property({ attribute: false }) + file?: File; + + @property() + assetType?: MediaFileClass; + + @state() _title = ""; + @state() _animationSkeleton?: AnimationSkeleton; + @state() _formValid = false; + + #formRef = createRef(); + + protected override willUpdate(changes: PropertyValues): void { + if (changes.has("file") && !this._title) { + this._title = this.file?.name.match(/^(.+?)\./)?.[1] ?? ""; + } + + super.willUpdate(changes); + } + + protected override updated(changes: PropertyValues): void { + this._formValid = this.#formRef.value?.checkValidity() ?? false; + super.updated(changes); + } + + onFormSubmit(event: SubmitEvent): void { + console.log("AssetImportDialog.onFormSubmit", { ...event }); + event.preventDefault(); + event.stopPropagation(); + + const data = new FormData(event.target as HTMLFormElement); + const dataObject = Object.fromEntries(data.entries()) as AssetImport; + + this.dispatchEvent(new CustomEvent("import-asset", { detail: dataObject })); + } + + onAssetTypeChange(event: Event): void { + const input = event.target as HTMLSelectElement; + + if (!input.value) { + this.assetType = undefined; + } else { + this.assetType = input.value as MediaFileClass; + } + } + + onAnimationSkeletonChange(event: Event): void { + const input = event.target as HTMLSelectElement; + + if (!input.value) { + this._animationSkeleton = undefined; + } else { + this._animationSkeleton = input.value as AnimationSkeleton; + } + } + + protected override render = (): TemplateResult => html` + + + Import Asset + + +
+
+ + +
+
+ + +
+ ${this.assetType === MediaFileClass.Animation ? html` + + + ` : nothing} +
+ + + { + this.#formRef.value?.requestSubmit(); + }} + > + Upload + + + + `; +} + +interface AssetType { + type: MediaFileClass; + label: string; + icon: string; + disabled?: boolean; + tooltip?: string; +} + +const ASSET_TYPES: readonly AssetType[] = [ + { + type: MediaFileClass.Animation, + label: "Animation", + icon: "film", + }, + { + type: MediaFileClass.Audio, + label: "Audio", + icon: "volume", + disabled: true, + tooltip: "Coming soon!", + }, + { + type: MediaFileClass.Character, + label: "Character", + icon: "figure", + }, + { + type: MediaFileClass.Prop, + label: "Prop", + icon: "cube", + }, + { + type: MediaFileClass.Scene, + label: "Scene", + icon: "scene", + }, +]; + +declare global { + interface FormData { + // I have no idea why this method is not included in the TS DOM library, + // but it isn't. + entries(): ReturnType + } +} diff --git a/studio-web/src/lib/inspector/entity-inspector.element.scss b/studio-web/src/lib/inspector/entity-inspector.element.scss index 8dc794d..ddc3023 100644 --- a/studio-web/src/lib/inspector/entity-inspector.element.scss +++ b/studio-web/src/lib/inspector/entity-inspector.element.scss @@ -3,10 +3,11 @@ display: flex; flex-direction: column; - gap: 1.5rem; - padding: 1rem; + gap: var(--padding); overflow: auto; + --background-color: var(--color-panel-background); + color: #FFFC; &::-webkit-scrollbar { @@ -31,3 +32,13 @@ *, *::before, *::after { box-sizing: border-box; } + +.container { + background-color: var(--background-color); + border-radius: var(--corner-radius); + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: var(--padding); + gap: var(--padding); +} \ No newline at end of file diff --git a/studio-web/src/lib/inspector/entity-inspector.element.ts b/studio-web/src/lib/inspector/entity-inspector.element.ts index 0c89348..b7865a9 100644 --- a/studio-web/src/lib/inspector/entity-inspector.element.ts +++ b/studio-web/src/lib/inspector/entity-inspector.element.ts @@ -34,63 +34,71 @@ export class EntityInspectorElement extends LitElement { this.requestUpdate(); } - protected override render = () => html` - ${this._sceneData - ?.selectionComponents - .slice() - .sort((a, b) => { - const ordA = COMPONENT_SORT_ORDER.indexOf(a.name); - const ordB = COMPONENT_SORT_ORDER.indexOf(b.name); + protected override render () { + let components = this._sceneData + ?.selectionComponents + .slice() + .sort((a, b) => { + const ordA = COMPONENT_SORT_ORDER.indexOf(a.name); + const ordB = COMPONENT_SORT_ORDER.indexOf(b.name); - if (ordA === -1) return Infinity; - if (ordB === -1) return -Infinity; + if (ordA === -1) return Infinity; + if (ordB === -1) return -Infinity; - return ordA - ordB; - }) - .map(({ name, value }) => { - switch (name) { - case "bevy_core::name::Name": { - return html` - - `; - } - case "bevy_transform::components::transform::Transform": { - return html` - - `; - } - case "bevy_pbr::pbr_material::StandardMaterial": { - const { colorSpace, baseColor } = isLinear(value.base_color) - ? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear } - : { colorSpace: "srgb", baseColor: value.base_color.Rgba }; - - return html` - - `; - } - default: { - return nothing; - // return html` - //

Unknown Component: ${name}

- // 
${JSON.stringify({ name, value }, null, "   ")}
- // `; - } + return ordA - ordB; + }) + .map(({ name, value }) => { + switch (name) { + case "bevy_core::name::Name": { + return html` + + `; } - }) + case "bevy_transform::components::transform::Transform": { + return html` + + `; + } + case "bevy_pbr::pbr_material::StandardMaterial": { + const { colorSpace, baseColor } = isLinear(value.base_color) + ? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear } + : { colorSpace: "srgb", baseColor: value.base_color.Rgba }; + + return html` + + `; + } + default: { + return nothing; + // return html` + //

Unknown Component: ${name}

+ // 
${JSON.stringify({ name, value }, null, "   ")}
+ // `; + } + } + }).filter((value) => value !== nothing) || []; + if (components?.length === 0) { + return nothing; } + return html` +
+ ${components + } +
`; + } } const COMPONENT_SORT_ORDER: Array = [ diff --git a/studio-web/src/lib/media-library-dialog.element.ts b/studio-web/src/lib/media-library-dialog.element.ts index 958fa35..4c46841 100644 --- a/studio-web/src/lib/media-library-dialog.element.ts +++ b/studio-web/src/lib/media-library-dialog.element.ts @@ -1,6 +1,7 @@ +import * as studio from "@storyteller/studio"; +import { SceneElement } from "@storyteller/studio"; import { bind, inject } from "@storyteller/framework"; -import { ButtonElement } from "@storyteller/studio-ui/button"; -import { DialogBaseElement } from "@storyteller/studio-ui/dialog"; +import { DialogBaseElement, DialogElement } from "@storyteller/studio-ui/dialog"; import { type MediaFile as IMediaFile, MediaFileClass, @@ -9,8 +10,11 @@ import { MediaFileType, StorytellerApi, Visibility, + UploadMediaFileOptions, + SCENE_DATA_PROVIDER, + type SceneDataProvider, } from "@storyteller/studio-web"; -import { match, type Pred } from "@storyteller/utility"; +import { exists, match, type Pred } from "@storyteller/utility"; import { html, nothing, @@ -19,13 +23,17 @@ import { unsafeCSS, css, } from "lit"; -import { customElement, queryAll, state } from "lit/decorators.js"; +import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { createRef, ref } from "lit/directives/ref.js"; + +import { AssetImport } from "./asset-import-dialog.element"; import "@storyteller/studio-ui/button"; import "@storyteller/studio-ui/icon"; import "@storyteller/studio-ui/forms/text-field"; +import "./asset-import-dialog.element"; import styles from "./media-library-dialog.element.scss?inline"; @@ -38,7 +46,7 @@ export class MediaLibraryDialogElement extends DialogBaseElement { override heading = "Media Library"; - @state() _mediaFiles?: MediaFile[]; + @state() _mediaFiles?: Map; @state() _searchTerm = ""; @state() _selected: MediaFileToken[] = []; @state() _activeCategory: MediaFileCategory = MEDIA_FILE_CATEGORIES[0]; @@ -48,13 +56,20 @@ export class MediaLibraryDialogElement extends DialogBaseElement { @inject(StorytellerApi) _api!: StorytellerApi; - @queryAll("[data-import-trigger]") - importTriggers!: ButtonElement[]; + @inject(SCENE_DATA_PROVIDER) + _sceneData!: SceneDataProvider; #dateFmt = new Intl.DateTimeFormat("en-us"); + #importDialogRef = createRef(); + #transientFileInput?: HTMLInputElement; + + @state() _uploadedFile?: File; get #mediaFiles() { - return this._mediaFiles?.filter(it => + if (!this._mediaFiles) + return null; + + return Array.from(this._mediaFiles.values()).filter(it => this._filters.every(pred => pred(it)) ); } @@ -70,11 +85,41 @@ export class MediaLibraryDialogElement extends DialogBaseElement { return ResultsStatus.NonEmpty; } + get #canAddToScene() { + const noAnimations = this._selected.every(token => { + const mediaFile = this._mediaFiles?.get(token); + if (!mediaFile) return false; + + return mediaFile.mediaClass !== MediaFileClass.Animation; + }); + + return noAnimations || this.#canAddAnimation; + } + + get #canAddAnimation() { + const oneAnimationSelected = this._selected.length === 1 + && this._mediaFiles?.get(this._selected[0])?.mediaClass === MediaFileClass.Animation; + const skeletonSelected = this._sceneData.selectedObject?.type === SceneElement.Skeleton; + + return oneAnimationSelected && skeletonSelected; + } + override connectedCallback(): void { + this._sceneData?.addEventListener("property-changes", this.onProviderChanges); this.loadResults(); super.connectedCallback(); } + override disconnectedCallback(): void { + this._sceneData?.removeEventListener("property-changes", this.onProviderChanges); + super.disconnectedCallback(); + } + + onProviderChanges = ({ detail: changes }: CustomEvent>) => { + if (changes.has("selectedObject")) + this.requestUpdate(); + } + protected override willUpdate(changes: PropertyValues): void { if (changes.has("_activeCategory") || changes.has("_searchTerm")) { this._filters = [ @@ -108,8 +153,11 @@ export class MediaLibraryDialogElement extends DialogBaseElement { const results = await Promise.all( response.results.map(({ token }) => this._api.mediaFile(token)) ); + console.log("Results:", results); - this._mediaFiles = results.map(info => new MediaFile(info)); + this._mediaFiles = new Map( + results.map(info => [info.token, new MediaFile(info)]) + ); } catch (err) { if (typeof err === "object" && err !== null && err instanceof Error) { @@ -146,14 +194,116 @@ export class MediaLibraryDialogElement extends DialogBaseElement { this._selected = []; } - get importDialogTemplate() { - return html` - - Import Asset - + promptForFileUpload(): void { + this.#transientFileInput = document.createElement("input"); + this.#transientFileInput.type = "file"; + this.#transientFileInput.accept = match (this._activeCategory.mediaClass, { + [MediaFileClass.Animation]: () => ".bvh,.fbx,.gltf", + [MediaFileClass.Audio]: () => ".wav,.mp3", + [MediaFileClass.Character]: () => ".fbx,.gltf", + [MediaFileClass.Prop]: () => ".fbx,.gltf", + [MediaFileClass.Scene]: () => ".fbx,.gltf,.scn.ron", + _: () => "", + }); + this.#transientFileInput.multiple = false; -

Lorem ipsum dolor sit amet

- `; + this.#transientFileInput.addEventListener("input", this.onLocalFileLoaded.bind(this), { + once: true, + }); + + this.#transientFileInput.click(); + } + + onLocalFileLoaded(): void { + console.log("files:", this.#transientFileInput?.files); + const file = this.#transientFileInput?.files?.[0]; + if (file != null) { + this._uploadedFile = file; + + setTimeout(() => { + this.#importDialogRef.value?.open(); + }); + } + } + + async onImportAsset({ detail: data}: CustomEvent): Promise { + console.log("MediaLibrary.onImportAsset", data); + this._mediaFiles = undefined; + this.#importDialogRef.value?.close(); + + if (!this._uploadedFile) + throw new Error("Expected `_uploadedFile` to be non-null!"); + + try { + const options: UploadMediaFileOptions = { + mediaClass: data.type, + }; + + if (data.type === MediaFileClass.Animation) + options.subtype = data.animationSkeleton; + + const token = await this._api.uploadMediaFile(this._uploadedFile, options); + await this._api.renameMediaFile(token, data.title); + + this._selected.push(token); + } + catch (err) { + if (typeof err === "object" && err !== null && err instanceof Error) { + this._apiError = err; + } else { + this._apiError = new Error(String(err)); + } + } + + this.loadResults(); + } + + onAddToScene(): void { + if (this.#canAddAnimation) { + this.#addAnimation(); + } else { + this.#spawnSelectedScenes(); + } + } + + #addAnimation(): void { + // TODO: Make this actually work + console.warn("Adding animations not yet implemented!"); + this.dispatchEvent(new CustomEvent("close")); + } + + #spawnSelectedScenes(): void { + const assets = this._selected + .map(token => { + if (!this._mediaFiles) { + console.error("Expected `_mediaFiles` map to be present when spawning assets"); + return null; + } + + const mediaFile = this._mediaFiles.get(token); + if (!mediaFile) { + console.error(`Attempted to spawn an invalid token: "${token}"`); + return null; + } + + const ext = mediaFile.extension; + if (!ext) { + console.error("Expected media file to have a non-null `extension` field"); + return null; + } + + return { + path: `remote://${token}${ext}`, + name: mediaFile.displayName, + }; + }) + .filter(exists); + + setTimeout(() => { + studio.spawnAssets(assets); + }); + + this.dispatchEvent(new CustomEvent("close")); } protected override render = (): TemplateResult => html` @@ -164,7 +314,7 @@ export class MediaLibraryDialogElement extends DialogBaseElement {
this.#importDialogRef.value?.close()} + > + `] as const} > `; } @@ -281,6 +443,7 @@ interface MediaFileCategory { icon: string; disabled?: boolean; tooltip?: string; + mediaClass?: MediaFileClass; predicate: Pred; } @@ -293,6 +456,7 @@ const MEDIA_FILE_CATEGORIES: readonly MediaFileCategory[] = [ { name: "Animation", icon: "film", + mediaClass: MediaFileClass.Animation, predicate: it => it.mediaClass === MediaFileClass.Animation, }, { @@ -300,21 +464,25 @@ const MEDIA_FILE_CATEGORIES: readonly MediaFileCategory[] = [ icon: "volume", disabled: true, tooltip: "Coming soon!", + mediaClass: MediaFileClass.Audio, predicate: it => it.mediaClass === MediaFileClass.Audio, }, { name: "Characters", icon: "figure", + mediaClass: MediaFileClass.Character, predicate: it => it.mediaClass === MediaFileClass.Character, }, { name: "Props", icon: "cube", + mediaClass: MediaFileClass.Prop, predicate: it => it.mediaClass === MediaFileClass.Prop, }, { name: "Scenes", icon: "scene", + mediaClass: MediaFileClass.Scene, predicate: it => it.mediaClass === MediaFileClass.Scene, }, ]; @@ -335,6 +503,7 @@ class MediaFile { title?: string; filename?: string; + extension?: string; visibility: Visibility; bucketPath: string; @@ -354,6 +523,9 @@ class MediaFile { this.title = info.maybe_title ?? undefined; this.filename = info.maybe_original_filename ?? undefined; + this.extension = info.maybe_engine_extension + ?? this.filename?.match(/\..+/)?.[0] + ?? undefined; this.visibility = info.creator_set_visibility; this.bucketPath = info.public_bucket_path; diff --git a/studio-web/src/lib/storyteller-api.ts b/studio-web/src/lib/storyteller-api.ts index c62ebbb..2df7959 100644 --- a/studio-web/src/lib/storyteller-api.ts +++ b/studio-web/src/lib/storyteller-api.ts @@ -74,6 +74,16 @@ export class StorytellerApi { return response.data.media_file_token; } + async renameMediaFile(token: MediaFileToken, name: string): Promise { + const response = await this.#api.post(`v1/media_files/rename/${token}`, { name }); + this.#validateResponse(response); + } + + // TODO + async convertFbxToGltf(token: MediaFileToken): Promise { + + } + async mediaFile(token: MediaFileToken): Promise { const response = await this.#api.get(`v1/media_files/file/${token}`); this.#validateResponse(response); @@ -116,7 +126,7 @@ export interface ListMediaFilesOptions { } export interface UploadMediaFileOptions { - subtype: MediaFileSubtype; + subtype?: MediaFileSubtype; mediaClass: MediaFileClass; } @@ -152,6 +162,7 @@ export interface MediaFileResult { export interface MediaFile { token: MediaFileToken; media_type: MediaFileType; + maybe_engine_extension?: string; maybe_media_subtype?: MediaFileSubtype; media_class: MediaFileClass; maybe_batch_token?: unknown; diff --git a/studio-web/src/lib/transform-toolbar.element.scss b/studio-web/src/lib/transform-toolbar.element.scss index 43fbb31..f45d156 100644 --- a/studio-web/src/lib/transform-toolbar.element.scss +++ b/studio-web/src/lib/transform-toolbar.element.scss @@ -8,7 +8,7 @@ pointer-events: auto; // TODO: Copypasta - background: #0006; + background: var(--color-toolbar-background); color: #FFFC; backdrop-filter: blur(16px); transition: { @@ -16,6 +16,7 @@ duration: 0.1s; timing-function: linear; } + border-radius: var(--corner-radius); &:hover { background: #0008; @@ -28,7 +29,9 @@ } &:has(:checked) { - background: #7A2C34E3; + border-color: var(--color-accent); + border-width: 2px; + border-style: solid; color: #FFF; &:hover { diff --git a/studio/src/lib.rs b/studio/src/lib.rs index 3a7ad0f..7fe155e 100644 --- a/studio/src/lib.rs +++ b/studio/src/lib.rs @@ -24,6 +24,7 @@ mod hierarchy; mod input; mod inspector; mod interaction; +pub mod material; pub mod math; mod mixamo; mod path; @@ -36,6 +37,7 @@ mod ui; pub mod viewport; mod world_grid; +use crate::material::MaterialPlugin; pub use crate::{ anim::AnimPlugin, bvh::BvhPlugin, @@ -89,6 +91,7 @@ impl PluginGroup for CommonPlugins { .add(InspectorPlugin) .add(InterpolationPlugin) .add(ScenePlugin) + .add(MaterialPlugin) // .add(SkyboxPlugin) .add(StudioInputPlugin) .add(UiLayerPlugin) @@ -231,7 +234,10 @@ fn init_from_asset(app: &mut App, asset: InitAsset, skybox_id: String) { } InitAsset::ImportedScene(scene) => { app.add_systems(Startup, move |mut ew: EventWriter| { - ew.send(ImportSceneEvent(scene.clone())); + ew.send(ImportSceneEvent { + path: scene.clone(), + name: None, + }); }); } } diff --git a/studio/src/material/mod.rs b/studio/src/material/mod.rs new file mode 100644 index 0000000..3088b26 --- /dev/null +++ b/studio/src/material/mod.rs @@ -0,0 +1,37 @@ +use crate::material::short_material::ShortMaterial; +use bevy::app::{App, Plugin, PostUpdate}; +use bevy::asset::{Assets, Handle}; +use bevy::pbr::StandardMaterial; +use bevy::prelude::{Commands, Entity, Query, ResMut}; +use space_editor::prelude::EditorRegistryExt; + +pub mod short_material; + +pub struct MaterialPlugin; +impl Plugin for MaterialPlugin { + fn build(&self, app: &mut App) { + app.register_type::() + .editor_registry::(); + + app.add_systems(PostUpdate, apply_short_materials); + } +} + +fn apply_short_materials( + mut commands: Commands, + q_mats: Query<(Entity, &Handle, &ShortMaterial)>, + mut materials: ResMut>, +) { + for (entity, handle, short) in q_mats.iter() { + let Some(material) = materials.get_mut(handle) else { + continue; + }; + + material.base_color = short.base_color; + material.perceptual_roughness = short.perceptual_roughness; + material.metallic = short.metallic; + material.reflectance = short.reflectance; + + commands.entity(entity).remove::(); + } +} diff --git a/studio/src/material/short_material.rs b/studio/src/material/short_material.rs new file mode 100644 index 0000000..9ba7706 --- /dev/null +++ b/studio/src/material/short_material.rs @@ -0,0 +1,25 @@ +use bevy::pbr::StandardMaterial; +use bevy::prelude::{Color, Component, Reflect}; + +use bevy::ecs::reflect::ReflectComponent; +use bevy::reflect::std_traits::ReflectDefault; + +#[derive(Reflect, Default, Clone, Component)] +#[reflect(Default, Component)] +pub struct ShortMaterial { + pub base_color: Color, + pub perceptual_roughness: f32, + pub metallic: f32, + pub reflectance: f32, +} + +impl ShortMaterial { + pub fn new(material: &StandardMaterial) -> Self { + Self { + base_color: material.base_color, + perceptual_roughness: material.perceptual_roughness, + metallic: material.metallic, + reflectance: material.reflectance, + } + } +} diff --git a/studio/src/scene.rs b/studio/src/scene/mod.rs similarity index 87% rename from studio/src/scene.rs rename to studio/src/scene/mod.rs index ba461a6..9898b87 100644 --- a/studio/src/scene.rs +++ b/studio/src/scene/mod.rs @@ -39,6 +39,9 @@ use crate::{ MainCamera, }; +#[cfg(feature = "wasm")] +mod wasm; + pub struct ScenePlugin; #[derive(SystemSet, Clone, Copy, PartialEq, Eq, Hash, Debug)] @@ -113,7 +116,7 @@ impl Plugin for ScenePlugin { app.add_systems( Update, ( - wasm::dispatch_object_load_request, + wasm::handle_spawn_asset_messages, wasm::notify_state_changes .map(bevy::utils::error) .run_if(resource_changed::>), @@ -276,8 +279,11 @@ pub struct LoadSceneEvent(pub String); /// Request the application to import and process a glTF scene from an arbitrary /// asset source (e.g., an http path or a Storyteller.ai media token). -#[derive(Event, Deref)] -pub struct ImportSceneEvent(pub String); +#[derive(Event)] +pub struct ImportSceneEvent { + pub path: String, + pub name: Option, +} /// A tag that identifies its entity as a user-facing scene element like a prop, /// a light, or a camera. @@ -409,16 +415,23 @@ fn init_scene_import( r_assets: Res, mut er: EventReader, ) { - if let Some(path) = er.read().last() { - info!("Importing asset: {}", path.0); + for event in er.read() { + info!("Importing asset: {}", event.path); + + let name = event + .name + .as_ref() + .map(|name| Name::new(name.clone())) + .unwrap_or_else(|| Name::new("Scene")); + cmd.spawn(( - Name::new("Scene"), // TODO: Maybe use the "basename" part of the asset path? + name, SpatialBundle::default(), space_editor::prelude::GltfPrefab { - path: path.0.clone(), + path: event.path.clone(), scene: "Scene0".to_string(), }, - r_assets.load::(&path.0), + r_assets.load::(&event.path), PrefabMarker, SceneRoot, )); @@ -630,89 +643,3 @@ fn start_capture(mut captures: Query<&mut ScreenCapture, Added>) capture.start_capturing(); } } - -#[cfg(feature = "wasm")] -mod wasm { - use bevy::{prelude::*, window::PrimaryWindow}; - use wasm_bindgen::prelude::*; - - use super::{LoadLibraryObjectEvent, LoadingQueue, SceneState}; - use crate::wasm::{self, StaticBuffer, WasmMessageBuffer}; - - static OBJECT_LOAD_REQUEST: WasmMessageBuffer = WasmMessageBuffer::new(); - - #[wasm_bindgen(js_name = loadObject)] - pub fn load_object(id: &str) { - OBJECT_LOAD_REQUEST.write_message(id.into()); - } - - // FIXME: Is it an object or a scene? Inconsistent terminology is - // unnecessarily confusing - pub(super) fn dispatch_object_load_request( - mut ew_load_scene: EventWriter, - ) { - if let Some(id) = OBJECT_LOAD_REQUEST.take_message() { - ew_load_scene.send(LoadLibraryObjectEvent(id)); - } - } - - #[wasm_bindgen(typescript_custom_section)] - const SCENE_STATE_EVENT: &str = r#" -export interface SceneStateEvent extends CustomEvent { - type: "scene-state"; - detail: SceneState; -} - -declare global { - export interface GlobalEventHandlersEventMap { - "scene-state": SceneStateEvent; - } -} - "#; - - pub(super) fn notify_state_changes( - r_state: Res>, - q_window: Query<&Window, With>, - ) -> Result<(), String> { - if let Ok(window) = q_window.get_single() { - wasm::dispatch_to_js(window, "scene-state", &(**r_state as u32))?; - } - Ok(()) - } - - #[wasm_bindgen(typescript_custom_section)] - const LOADING_QUEUE_EVENT: &str = r#" -export interface LoadingQueueEvent extends CustomEvent { - type: "loading-queue"; - detail: number; -} - -declare global { - export interface GlobalEventHandlersEventMap { - "loading-queue": LoadingQueueEvent; - } -} - "#; - - pub(super) fn notify_loading_queue_changes( - mut l_last_sent: Local>, - r_loading: Res, - q_window: Query<&Window, With>, - ) -> Result<(), String> { - let queue_len = r_loading.queue.len(); - if let Some(last_sent) = *l_last_sent { - if last_sent == queue_len { - return Ok(()); - } - } - - let Ok(window) = q_window.get_single() else { - return Ok(()); - }; - - wasm::dispatch_to_js(window, "loading-queue", &queue_len)?; - *l_last_sent = Some(queue_len); - - Ok(()) - } -} diff --git a/studio/src/scene/wasm.rs b/studio/src/scene/wasm.rs new file mode 100644 index 0000000..1217c97 --- /dev/null +++ b/studio/src/scene/wasm.rs @@ -0,0 +1,111 @@ +use bevy::{prelude::*, window::PrimaryWindow}; +use serde::{Deserialize, Serialize}; +use wasm_bindgen::prelude::*; + +use super::{ImportSceneEvent, LoadingQueue, SceneState}; +use crate::wasm::{self, StaticBuffer, WasmMessageBuffer}; + +static SPAWN_ASSETS: WasmMessageBuffer> = WasmMessageBuffer::new(); + +#[wasm_bindgen(typescript_custom_section)] +const ASSET_IMPORT_TS: &str = r#" +export interface AssetImport { + path: string; + name?: string; +} +"#; +#[derive(Deserialize, Serialize)] +struct AssetImport { + path: String, + name: Option, +} + +#[wasm_bindgen(typescript_custom_section)] +const SPAWN_ASSET_TS: &str = r#" +export function spawnAsset(asset: AssetImport): void; +"#; +#[wasm_bindgen(js_name = spawnAsset, skip_typescript)] +pub fn spawn_asset(asset: JsValue) -> Result<(), JsValue> { + let asset: AssetImport = serde_wasm_bindgen::from_value(asset)?; + SPAWN_ASSETS.write_message(vec![asset]); + Ok(()) +} + +#[wasm_bindgen(typescript_custom_section)] +const SPAWN_ASSETS_TS: &str = r#" +export function spawnAssets(assets: AssetImport[]): void; +"#; +#[wasm_bindgen(js_name = spawnAssets, skip_typescript)] +pub fn spawn_assets(assets: JsValue) -> Result<(), JsValue> { + let assets: Vec = serde_wasm_bindgen::from_value(assets)?; + SPAWN_ASSETS.write_message(assets); + Ok(()) +} + +pub(super) fn handle_spawn_asset_messages(mut ew_import_scene: EventWriter) { + if let Some(assets) = SPAWN_ASSETS.take_message() { + for AssetImport { path, name } in assets { + ew_import_scene.send(ImportSceneEvent { path, name }); + } + } +} + +#[wasm_bindgen(typescript_custom_section)] +const SCENE_STATE_EVENT: &str = r#" +export interface SceneStateEvent extends CustomEvent { + type: "scene-state"; + detail: SceneState; +} + +declare global { + export interface GlobalEventHandlersEventMap { + "scene-state": SceneStateEvent; + } +} +"#; + +pub(super) fn notify_state_changes( + r_state: Res>, + q_window: Query<&Window, With>, +) -> Result<(), String> { + if let Ok(window) = q_window.get_single() { + wasm::dispatch_to_js(window, "scene-state", &(**r_state as u32))?; + } + Ok(()) +} + +#[wasm_bindgen(typescript_custom_section)] +const LOADING_QUEUE_EVENT: &str = r#" +export interface LoadingQueueEvent extends CustomEvent { + type: "loading-queue"; + detail: number; +} + +declare global { + export interface GlobalEventHandlersEventMap { + "loading-queue": LoadingQueueEvent; + } +} +"#; + +pub(super) fn notify_loading_queue_changes( + mut l_last_sent: Local>, + r_loading: Res, + q_window: Query<&Window, With>, +) -> Result<(), String> { + let queue_len = r_loading.queue.len(); + if let Some(last_sent) = *l_last_sent { + if last_sent == queue_len { + return Ok(()); + } + } + + let Ok(window) = q_window.get_single() else { + return Ok(()); + }; + + wasm::dispatch_to_js(window, "loading-queue", &queue_len)?; + *l_last_sent = Some(queue_len); + + Ok(()) +} diff --git a/studio/src/ui/inspector.rs b/studio/src/ui/inspector.rs index 5962477..265721e 100644 --- a/studio/src/ui/inspector.rs +++ b/studio/src/ui/inspector.rs @@ -17,6 +17,7 @@ use space_editor::{ }; use wasm_bindgen::prelude::*; +use crate::material::short_material::ShortMaterial; use crate::{ interaction::Selection, wasm::{self, StaticBuffer, WasmMessageBuffer}, @@ -91,7 +92,6 @@ impl Plugin for InspectorPlugin { .chain() .before(space_editor::space_prefab::sub_scene::prepare_auto_scene), ); - app.add_systems(PostUpdate, apply_short_materials); app.world.resource_mut::().getters.insert( StandardMaterial::get_type_registration() @@ -139,25 +139,6 @@ fn create_short_materials( } } -fn apply_short_materials( - mut commands: Commands, - q_mats: Query<(Entity, &Handle, &ShortMaterial)>, - mut materials: ResMut>, -) { - for (entity, handle, short) in q_mats.iter() { - let Some(material) = materials.get_mut(handle) else { - continue; - }; - - material.base_color = short.base_color; - material.perceptual_roughness = short.perceptual_roughness; - material.metallic = short.metallic; - material.reflectance = short.reflectance; - - commands.entity(entity).remove::(); - } -} - #[derive(Resource, Default)] struct InspectGetters { getters: HashMap< @@ -588,26 +569,6 @@ fn auto_serialize_asset( ev_update_description.send(UpdateEntityDescription); } -#[derive(Reflect, Default, Clone, Component)] -#[reflect(Default, Component)] -struct ShortMaterial { - pub base_color: Color, - pub perceptual_roughness: f32, - pub metallic: f32, - pub reflectance: f32, -} - -impl ShortMaterial { - pub fn new(material: &StandardMaterial) -> Self { - Self { - base_color: material.base_color, - perceptual_roughness: material.perceptual_roughness, - metallic: material.metallic, - reflectance: material.reflectance, - } - } -} - fn serialize_standart_materal( r_selection: Option>, q_m: Query<&Handle>,