Change layer name

src/editor/components/components/Sidebar.js

@@ -1,4 +1,8 @@
-import { cloneEntity, removeSelectedEntity } from '../../lib/entity';
+import {
+  cloneEntity,
+  removeSelectedEntity,
+  renameEntity
+} from '../../lib/entity';
 import { Button } from '../components';
 import ComponentsContainer from './ComponentsContainer';
 import Events from '../../lib/Events';
@@ -98,6 +102,12 @@ export default class Sidebar extends React.Component {
                       <></>
                     ) : (
                       <div id="sidebar-buttons">
+                        <Button
+                          variant={'toolbtn'}
+                          onClick={() => renameEntity(entity)}
+                        >
+                          Rename
+                        </Button>
                         <Button
                           variant={'toolbtn'}
                           onClick={() => cloneEntity(entity)}

src/editor/lib/commands/EntityRenameCommand.js

@@ -0,0 +1,61 @@
+import Events from '../Events.js';
+import { Command } from '../command.js';
+import { createUniqueId } from '../entity.js';
+
+export class EntityRenameCommand extends Command {
+  constructor(editor, entity) {
+    super(editor);
+
+    this.type = 'entityrename';
+    this.name = 'Rename Entity';
+    this.updatable = true; // Allow updating for consecutive renames
+
+    if (!entity.id) {
+      entity.id = createUniqueId();
+    }
+    this.entityId = entity.id;
+    this.oldName = entity.getAttribute('data-layer-name') || '';
+    this.newName = null; // Will be set during execute
+  }
+
+  execute() {
+    const entity = document.getElementById(this.entityId);
+    if (!entity) return;
+
+    // If newName hasn't been set (first execution), prompt for it
+    if (this.newName === null) {
+      const promptedName = prompt('Enter new name for entity', this.oldName);
+      // If user cancels or enters empty name, abort
+      if (!promptedName) return;
+      this.newName = promptedName;
+    }
+
+    // Apply the new name
+    entity.setAttribute('data-layer-name', this.newName);
+    Events.emit('entityrenamed', {
+      entity,
+      oldName: this.oldName,
+      newName: this.newName
+    });
+    AFRAME.INSPECTOR.selectEntity(entity);
+  }
+
+  undo() {
+    const entity = document.getElementById(this.entityId);
+    if (entity) {
+      // Restore the old name
+      entity.setAttribute('data-layer-name', this.oldName);
+      Events.emit('entityrenamed', {
+        entity,
+        oldName: this.newName,
+        newName: this.oldName
+      });
+      AFRAME.INSPECTOR.selectEntity(entity);
+    }
+  }
+
+  update(command) {
+    // Handle consecutive renames by updating the newName
+    this.newName = command.newName;
+  }
+}

src/editor/lib/commands/index.js

@@ -4,6 +4,7 @@ import { EntityCloneCommand } from './EntityCloneCommand.js';
 import { EntityCreateCommand } from './EntityCreateCommand.js';
 import { EntityRemoveCommand } from './EntityRemoveCommand.js';
 import { EntityUpdateCommand } from './EntityUpdateCommand.js';
+import { EntityRenameCommand } from './EntityRenameCommand.js';
 
 export const commandsByType = new Map();
 commandsByType.set('componentadd', ComponentAddCommand);
@@ -12,3 +13,4 @@ commandsByType.set('entityclone', EntityCloneCommand);
 commandsByType.set('entitycreate', EntityCreateCommand);
 commandsByType.set('entityremove', EntityRemoveCommand);
 commandsByType.set('entityupdate', EntityUpdateCommand);
+commandsByType.set('entityrename', EntityRenameCommand);

src/editor/lib/entity.js

@@ -115,6 +115,15 @@ export function cloneEntity(entity) {
   return AFRAME.INSPECTOR.execute('entityclone', entity);
 }
 
+/**
+ * Rename an entity, inserting it after the cloned one.
+ * @param {Element} entity Entity to clone
+ * @returns {Element} The clone
+ */
+export function renameEntity(entity) {
+  return AFRAME.INSPECTOR.execute('entityrename', entity);
+}
+
 /**
  * Clone an entity, inserting it after the cloned one. This is the implementation of the entityclone command.
  * @param {Element} entity Entity to clone