mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-17 00:13:17 +00:00
Danny McGee
0d4072c806
This PR adds Material component inspection to the frontend Entity Inspector, and adds functional editing capabilities for the Transform and Material inspectors. ### Changes * Added a `ScalarFieldElement` for numeric form fields, with a hybrid slider/text-input UX inspired by Blender, Unreal Engine, etc. * Added `MaterialInspectorElement` for inspecting the Bevy `StandardMaterial` component * Wired up the `TransformInspectorElement` and `MaterialInspectorElement` to apply changes made in the UI to the Bevy scene * Refactored the `studio/ui/inspector` module to output `Result::Err`s to the dev console * Refactored the `studio/interaction/selection` module to use only the `Selection` resource, removing the redundant `Selected` component which added some unnecessary complexity. This fixes #39 * Fixed primitive shapes not receiving a selection outline when selected ### To-Do These tasks will be addressed in a forthcoming PR: * The **Transform** > **Rotation** section in the inspector is still not displaying sensible values. Currently it's just displaying the raw quaternion `xyz` vector rather than displaying the orientation in human-readable terms (e.g., as Euler angles). * We're currently ignoring the Primitive Shape component, which would allow the user to configure some additional geometric properties of the shape or replace it with a different one. --------- Co-authored-by: rewin <rewin1996@gmail.com>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import * as studio from "@storyteller/studio";
|
|
import { bind } from "@storyteller/framework";
|
|
import { LitElement, PropertyValues, type TemplateResult, html, unsafeCSS } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
import "@storyteller/studio-ui/forms/text-field";
|
|
|
|
import styles from "./name-inspector.element.scss?inline";
|
|
|
|
@customElement("sts-name-inspector")
|
|
export class NameInspectorElement extends LitElement {
|
|
static override styles = unsafeCSS(styles);
|
|
|
|
@property() value = "";
|
|
|
|
protected override updated(changes: PropertyValues<this>): void {
|
|
// FIXME: `Name` component needs special handling due to:
|
|
// 1. Its `hash` field, which doesn't get updated by just directly
|
|
// mutating the `name` field
|
|
// 2. Its use in our hierarchy. We'll need to add some logic to check
|
|
// for changed names on existing entities and notify the frontend so
|
|
// the hierarchy can reflect the new value.
|
|
|
|
// if (changes.has("value")) {
|
|
// studio.updateComponentField({
|
|
// component: "bevy_core::name::Name",
|
|
// reflectPath: "name",
|
|
// value: this.value,
|
|
// });
|
|
// }
|
|
|
|
super.updated(changes);
|
|
}
|
|
|
|
protected override render = (): TemplateResult => html`
|
|
<sts-text-field .value=${bind(this, "value")}></sts-text-field>
|
|
`;
|
|
}
|