mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-29 09:08:58 +00:00
Inspector editing (#96)
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>
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
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";
|
||||
@@ -13,8 +14,20 @@ export class NameInspectorElement extends LitElement {
|
||||
@property() value = "";
|
||||
|
||||
protected override updated(changes: PropertyValues<this>): void {
|
||||
if (changes.has("value"))
|
||||
console.log("New value:", this.value);
|
||||
// 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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user