Skip to content

Material assets support: property widget, materials modal, generic asset commands#78

Open
vincentfretin wants to merge 9 commits into
devfrom
material-property-type-editor
Open

Material assets support: property widget, materials modal, generic asset commands#78
vincentfretin wants to merge 9 commits into
devfrom
material-property-type-editor

Conversation

@vincentfretin

@vincentfretin vincentfretin commented Jul 4, 2026

Copy link
Copy Markdown
Member

Description

Port of aframevr#859 to the editor, adapted to the undo/redo command system. Companion to aframevr/aframe#5846 (materials as assets and property type).

Material property widget and Material Assets modal

  • The material property type is rendered by a MaterialWidget: the raw reference string (#myMaterial or an inline material(...) definition) committed on blur like selector types, plus a swatch previewing the referenced material's color/texture.
  • Clicking the swatch opens a Material Assets modal that lists every <a-material> with color/texture swatches, applies the selected asset to the property (USE SELECTED or double-click), edits the selected material live with schema-driven widgets (shader read-only), and creates new <a-material> assets. Map properties use the textures modal, stacked on top (Modal is now stacking-aware: only the topmost open modal reacts to ESC/outside clicks).
  • When the material component's material property is set, the other (ignored) property rows are hidden in the component panel.

Command system integration

  • New generic AssetCreateCommand (assetcreate): creates any asset element in <a-assets> (a-material, a-mixin, img, audio, video, a-asset-item, ...) with optional attributes; a unique <base>-N id is generated when none is given and stays stable across undo/redo. Optional callback receives the created element.
  • New generic AssetUpdateCommand (assetupdate): updates an asset attribute with raw old/new attribute strings; consecutive edits of the same attribute merge in history like entity updates. Inline materials (no id) are referenced directly and keyed by their inline string.
  • EntityUpdateCommand treats the material property type like selector types (raw reference string as old/new value).
  • ModalMaterials executes commands and refreshes on assetcreate/assetremove/assetupdate events, so it reflects undo/redo while open; MaterialWidget repaints its swatch on asset updates.
  • ModalTextures now creates new image assets through assetcreate (undoable) instead of the direct insertNewAsset helper, which is removed.
  • New generic AssetRemoveCommand (assetremove): removes an asset element, capturing tag name, attributes and position so undo recreates it in place; for <a-material>, entities referencing the asset are re-resolved on undo so they pick up the recreated THREE.Material. UI: DELETE button in the materials modal (disabled for inline materials, confirmation mentions how many entities use the material) and a trash button on each asset image in the textures modal. assetupdate also supports renaming an asset id (attribute: 'id'), and the materials modal exposes an id field that renames the asset and updates every entity referencing it in one undoable multi command (payload referenced by id strings so it stays serializable).

Verified against an aframe build of the PR branch

  • Widget commit produces one entityupdate (#gold#crateMat); undo/redo toggles the shared material on the entity.
  • Two rapid roughness edits in the modal merge into a single assetupdate (0.2 → 1); undo restores 0.2 on the material and attribute.
  • NEW MATERIAL: undo removes the asset (modal refreshes), redo recreates it with the same id and reselects it.
  • Texture pick from a material's src row goes through the stacked textures modal and lands as assetupdate src → #crateImg; undo clears both attribute and map.
  • assetcreate also verified for img (undo/redo) and a-mixin with attributes.

Requires an A-Frame build with aframevr/aframe#5846 for the material property type; the command changes themselves are inert without it.

🤖 Generated with Claude Code

vincentfretin and others added 7 commits July 4, 2026 11:49
A-Frame's upcoming `material` property type (aframevr/aframe#5846)
references an <a-material> asset by selector (`#myMaterial`) or an
inline `material(...)` definition. Edit it as a raw string committed on
blur, like selector/selectorAll: committing on each keystroke would
parse partial selectors and detach the entity from its shared material
while typing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Two <a-material> assets (PBR and textured) shared across entities, plus
an inline material(...) definition, to test the material property type.
Requires an A-Frame build with aframevr/aframe#5846; with older builds
these entities render with a default material and a warning.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The material property type now renders a MaterialWidget: the reference
string (committed on blur) plus a swatch previewing the referenced
material's color/texture. Clicking the swatch opens a Material Assets
modal that:

- lists every <a-material> in the scene with a color/texture swatch,
- applies the selected asset to the property (USE SELECTED or
  double-click),
- edits the selected material's properties (schema-driven widgets,
  shader read-only) live for every entity sharing it,
- creates new <a-material> assets under <a-assets>.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
When the material component's `material` property references an
<a-material> asset, all other properties are ignored (the asset fully
defines the material), so only show the material property row. Also
prevent text selection when double-clicking a material in the modal
gallery to apply it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Map-type properties of an <a-material> now use TextureWidget, opening
the textures modal stacked on top of the materials modal. Modal gains
stacking awareness: only the topmost open modal reacts to ESC and
outside clicks, so interacting with the textures modal no longer
closes the materials modal beneath it. ModalTextures is rendered after
ModalMaterials so it paints on top, and material swatches refresh when
textures finish loading.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- New AssetCreateCommand ('assetcreate'): creates any asset element in
  <a-assets> (a-material, a-mixin, img, audio, video, a-asset-item...)
  with optional attributes; a unique `<base>-N` id is generated when
  none is given and stays stable across undo/redo.
- New AssetUpdateCommand ('assetupdate'): updates an asset attribute,
  storing raw old/new attribute strings; consecutive edits of the same
  attribute merge in history like entity updates. Inline materials
  (no id) are referenced directly and keyed by their inline string.
- EntityUpdateCommand treats the material property type like selector
  types (raw reference string as old/new value).
- ModalMaterials executes commands instead of mutating directly and
  refreshes on assetcreate/assetremove/assetupdate events, so it also
  reflects undo/redo while open. MaterialWidget repaints its swatch on
  asset updates.
- ModalTextures now creates new image assets through 'assetcreate'
  (undoable) instead of the direct insertNewAsset helper, now removed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New generic 'assetremove' command: removes an asset element from
<a-assets>, capturing tag name, attributes and position so undo
recreates it in place. For <a-material>, entities referencing the
asset are re-resolved on undo so they use the recreated THREE.Material
instance.

UI: DELETE button in the materials modal (disabled for inline
materials, confirmation mentions how many entities use the material)
and a trash button on each asset image in the textures modal.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 4, 2026
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@vincentfretin vincentfretin force-pushed the material-property-type-editor branch from 6063247 to 614081c Compare July 4, 2026 12:25
assetupdate special-cases the id attribute like EntityUpdateCommand:
the command's entityId follows the rename so undo/redo keep resolving
the element, and entities already referencing the applied id are
re-resolved (undo reverts the consumers before the id itself is
restored).

The materials modal gets an id field that validates uniqueness and
executes a multi command: the rename plus one entityupdate per entity
referencing the material, referenced by id string so the payload stays
serializable. Documented in docs/commands.md.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant