Inspector frontend UI (#68)

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
+19 -2
View File
@@ -1,13 +1,18 @@
import { AbstractCtor, Ctor } from "@storyteller/utility";
import { type AbstractCtor, type Ctor, type Fn } from "@storyteller/utility";
import { type PropertyValues } from "lit";
export class UniqueToken {
get id() { return this.#id; }
readonly #id: symbol;
constructor (name: string) {
private constructor (name: string) {
this.#id = Symbol(name);
}
static create<T>(name?: string): Token<T> {
return new UniqueToken(name ?? crypto.randomUUID());
}
toString(): string {
return `UniqueToken(${String(this.#id)})`;
}
@@ -23,3 +28,15 @@ export interface Provider<T> {
token: Token<T>;
value: T;
}
export interface DynamicProvider<T> {
addEventListener(
type: "property-changes",
listener: Fn<[CustomEvent<PropertyValues<T>>], any>,
): void;
removeEventListener(
type: "property-changes",
listener: Fn<[CustomEvent<PropertyValues<T>>], any>,
): void;
}