storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-25 08:30:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inspector frontend UI (#68)

Browse Source 
This PR begins fleshing out the front-end UI for inspecting the selected
entity's components.

### Implemented
* Support for the `Name` component
* Placeholder/WIP support for the `Transform` component

### To-do
* Support for sending changes made in the inspector back to Bevy
* A slider/field combo widget for numeric values (can be adapted from
  [this StackBlitz](https://stackblitz.com/edit/angular-wfikuy?file=src%2Ffloat-input%2Ffloat-input.component.ts))
* Quat -> Euler angles conversion ([example math here](https://github.com/dannymcgee/3DGameMath/blob/5cb7a8ff9310565329e57751cd8b9c33e9bd4cb7/libs/Math/include/math/quat.inl.hpp#L56-L78),
  or use a 3rd-party math library)

### Known issues
* Selecting entities from the hierarchy doesn't always update the
  components list. I suspect this is the same issue as #39
This commit is contained in:
Danny McGee
2024-03-04 15:13:03 -05:00
committed by GitHub
parent 9875ea7cca
commit c9904a5293
26 changed files with 1093 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/anim-editor.element.ts
+7 -30
View File
@@ -1,7 +1,7 @@
import * as studio from "@storyteller/studio";
import { type CameraKeyframesEvent } from "@storyteller/studio";
import { drag, on } from "@storyteller/framework";
import { LitElement, type PropertyValues, html, unsafeCSS } from "lit";
import { bind, drag, on } from "@storyteller/framework";
import { LitElement, type PropertyValues, html, unsafeCSS, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
@@ -81,23 +81,7 @@ export class AnimEditorElement extends LitElement {
this.playHead = this.clipEnd;
}
#onTimelineStartChange(event: CustomEvent<number>): void {
this.timelineStart = event.detail;
}
#onTimelineEndChange(event: CustomEvent<number>): void {
this.timelineEnd = event.detail;
}
#onPlayHeadChange(event: CustomEvent<number>): void {
this.playHead = event.detail;
}
#onKeyframesChange(event: CustomEvent<Record<string, number>>): void {
this.keyframes = event.detail;
}
protected override render = () => html`
protected override render = (): TemplateResult => html`
<div class="sidebar"
style=${styleMap({
width: `${this.sidebarWidth}px`,
@@ -165,19 +149,12 @@ export class AnimEditorElement extends LitElement {
></div>
<sts-anim-timeline class="timeline"
.rangeStart=${this.timelineStart}
@rangeStartChange=${this.#onTimelineStartChange}
.rangeEnd=${this.timelineEnd}
@rangeEndChange=${this.#onTimelineEndChange}
.rangeStart=${bind(this, "timelineStart")}
.rangeEnd=${bind(this, "timelineEnd")}
.clipStart=${this.clipStart}
.clipEnd=${this.clipEnd}
.playHead=${this.playHead}
@playHeadChange=${this.#onPlayHeadChange}
.keyframes=${this.keyframes}
@keyframesChange=${this.#onKeyframesChange}
.playHead=${bind(this, "playHead")}
.keyframes=${bind(this, "keyframes")}
></sts-anim-timeline>
`;
}