Add AssetRemoveCommand and asset deletion UI

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>

Author: vincentfretin

src/components/modals/ModalMaterials.js

@@ -123,6 +123,30 @@ export default class ModalMaterials extends React.Component {
     AFRAME.INSPECTOR.execute('assetcreate', { tagName: 'a-material' });
   };
 
+  removeMaterial = () => {
+    const el = this.state.selectedEl;
+    // Inline materials are owned by their `material(...)` definitions.
+    if (!el || !el.id) return;
+    const material = el.getMaterial();
+    const users = Array.from(
+      document.querySelectorAll('a-scene [material]')
+    ).filter(
+      (entity) =>
+        entity.isEntity && entity.components?.material?.material === material
+    );
+    const message = users.length
+      ? 'Material `#' +
+        el.id +
+        '` is used by ' +
+        users.length +
+        ' entit' +
+        (users.length === 1 ? 'y' : 'ies') +
+        '. Do you really want to remove it?'
+      : 'Do you really want to remove material `#' + el.id + '`?';
+    if (!confirm(message)) return;
+    AFRAME.INSPECTOR.execute('assetremove', { assetEl: el });
+  };
+
   updateProperty = (name, value) => {
     const el = this.state.selectedEl;
     const propDef = el.schema[name];
@@ -289,6 +313,17 @@ export default class ModalMaterials extends React.Component {
                   USE SELECTED
                 </button>
               )}
+              <button
+                onClick={this.removeMaterial}
+                disabled={!this.state.selectedEl || !this.state.selectedEl.id}
+                title={
+                  this.state.selectedEl && !this.state.selectedEl.id
+                    ? 'Inline materials are owned by their material(...) definition'
+                    : 'Remove the selected material asset'
+                }
+              >
+                DELETE
+              </button>
             </div>
           </div>
           <div className="materialsEditor">{this.renderEditor()}</div>

src/components/modals/ModalTextures.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { AwesomeIcon } from '../AwesomeIcon';
 import Events from '../../lib/Events';
 import Modal from './Modal';
@@ -225,6 +225,15 @@ export default class ModalTextures extends React.Component {
     this.setState({ filterText: e.target.value });
   };
 
+  deleteAsset = (image, event) => {
+    event.stopPropagation();
+    if (!confirm('Do you really want to remove asset `#' + image.id + '`?')) {
+      return;
+    }
+    AFRAME.INSPECTOR.execute('assetremove', { assetEl: image.id });
+    this.generateFromAssets();
+  };
+
   renderRegistryImages() {
     var self = this;
     let selectSample = function (image) {
@@ -419,6 +428,13 @@ export default class ModalTextures extends React.Component {
                         <span>
                           {image.width} x {image.height}
                         </span>
+                        <a
+                          className="button delete-asset"
+                          title="Remove asset"
+                          onClick={this.deleteAsset.bind(this, image)}
+                        >
+                          <AwesomeIcon icon={faTrashAlt} />
+                        </a>
                       </div>
                     </li>
                   );

src/lib/commands/AssetRemoveCommand.js

@@ -0,0 +1,104 @@
+import Events from '../Events';
+import { Command } from '../command.js';
+
+/**
+ * Remove an asset element from <a-assets> (e.g., a-material, a-mixin, img,
+ * audio, video, a-asset-item).
+ *
+ * The tag name, attributes and position are captured so undo can recreate the
+ * asset in place. For <a-material>, entities referencing the asset are
+ * re-resolved on undo so they use the recreated THREE.Material instance.
+ *
+ * @param editor Editor
+ * @param payload Object containing assetEl (element or ID string).
+ * @constructor
+ */
+export class AssetRemoveCommand extends Command {
+  constructor(editor, payload = null) {
+    super(editor);
+
+    this.type = 'assetremove';
+    this.name = 'Remove Asset';
+
+    if (payload === null) return;
+
+    let assetEl;
+    if (typeof payload.assetEl === 'string') {
+      assetEl = document.getElementById(payload.assetEl);
+      if (!assetEl) {
+        console.error('Asset not found with ID:', payload.assetEl);
+        return;
+      }
+    } else {
+      assetEl = payload.assetEl;
+    }
+    this.assetId = assetEl.id;
+    this.tagName = assetEl.tagName.toLowerCase();
+    // Capture attributes and position for undo.
+    this.attributes = {};
+    for (const attr of assetEl.attributes) {
+      if (attr.name === 'id') continue;
+      this.attributes[attr.name] = attr.value;
+    }
+    this.index = assetEl.parentNode
+      ? Array.prototype.indexOf.call(assetEl.parentNode.children, assetEl)
+      : -1;
+  }
+
+  execute(nextCommandCallback) {
+    const assetEl = document.getElementById(this.assetId);
+    if (assetEl && assetEl.parentNode) {
+      assetEl.parentNode.removeChild(assetEl);
+      Events.emit('assetremove', this.assetId);
+    }
+    nextCommandCallback?.();
+  }
+
+  undo(nextCommandCallback) {
+    const sceneEl = AFRAME.scenes[0];
+    let assetsEl = sceneEl.querySelector('a-assets');
+    if (!assetsEl) {
+      assetsEl = document.createElement('a-assets');
+      sceneEl.appendChild(assetsEl);
+    }
+    const assetEl = document.createElement(this.tagName);
+    assetEl.id = this.assetId;
+    for (const name in this.attributes) {
+      assetEl.setAttribute(name, this.attributes[name]);
+    }
+    assetsEl.insertBefore(assetEl, assetsEl.children[this.index] ?? null);
+    Events.emit('assetcreate', assetEl);
+
+    // The recreated <a-material> is a new THREE.Material instance; re-resolve
+    // the entities referencing it so they pick it up.
+    if (assetEl.isMaterialAsset) {
+      const ref = '#' + this.assetId;
+      document.querySelectorAll('a-scene [material]').forEach((entity) => {
+        if (
+          entity.isEntity &&
+          entity.getDOMAttribute('material')?.material === ref
+        ) {
+          entity.setAttribute('material', 'material', ref);
+        }
+      });
+    }
+    nextCommandCallback?.(assetEl);
+  }
+
+  toJSON() {
+    const output = super.toJSON(this);
+    output.tagName = this.tagName;
+    output.assetId = this.assetId;
+    output.attributes = this.attributes;
+    output.index = this.index;
+    return output;
+  }
+
+  fromJSON(json) {
+    super.fromJSON(json);
+    this.tagName = json.tagName;
+    this.assetId = json.assetId;
+    this.attributes = json.attributes;
+    this.index = json.index;
+  }
+}

src/lib/commands/index.js

@@ -1,4 +1,5 @@
 import { AssetCreateCommand } from './AssetCreateCommand.js';
+import { AssetRemoveCommand } from './AssetRemoveCommand.js';
 import { AssetUpdateCommand } from './AssetUpdateCommand.js';
 import { ComponentAddCommand } from './ComponentAddCommand.js';
 import { ComponentRemoveCommand } from './ComponentRemoveCommand.js';
@@ -17,6 +18,7 @@ commandsByType.set('entitycreate', EntityCreateCommand);
 commandsByType.set('entityremove', EntityRemoveCommand);
 commandsByType.set('entityreparent', EntityReparentCommand);
 commandsByType.set('assetcreate', AssetCreateCommand);
+commandsByType.set('assetremove', AssetRemoveCommand);
 commandsByType.set('assetupdate', AssetUpdateCommand);
 commandsByType.set('entityupdate', EntityUpdateCommand);
 commandsByType.set('multi', MultiCommand);

src/style/textureModal.styl

@@ -70,6 +70,7 @@
   cursor pointer
   margin 8px
   overflow hidden
+  position relative
   width 155px
 
 .gallery li.selected,
@@ -217,3 +218,13 @@
 .texture canvas
   border 1px solid var(--color-base-100)
   cursor pointer
+
+.gallery li .delete-asset
+  bottom 6px
+  color var(--color-base-content)
+  cursor pointer
+  position absolute
+  right 8px
+
+.gallery li .delete-asset:hover
+  color var(--color-primary)