add support for undo mixin id class

3DStreet · Sep 9, 2024 · 7f2e84a · 7f2e84a
1 parent cff7ac3
commit 7f2e84a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/src/editor/components/components/CommonComponents.js b/src/editor/components/components/CommonComponents.js
@@ -18,6 +18,8 @@ export default class CommonComponents extends React.Component {
     }
     if (
       DEFAULT_COMPONENTS.indexOf(detail.component) !== -1 ||
+      detail.component === 'id' ||
+      detail.component === 'class' ||
       detail.component === 'mixin'
     ) {
       this.forceUpdate();

diff --git a/src/editor/components/components/Mixins.js b/src/editor/components/components/Mixins.js
@@ -15,6 +15,23 @@ export default class Mixin extends React.Component {
     this.state = { mixins: this.getMixinValue() };
   }
 
+  onEntityUpdate = (detail) => {
+    if (detail.entity !== this.props.entity) {
+      return;
+    }
+    if (detail.component === 'mixin') {
+      this.setState({ mixins: this.getMixinValue() });
+    }
+  };
+
+  componentDidMount() {
+    Events.on('entityupdate', this.onEntityUpdate);
+  }
+
+  componentWillUnmount() {
+    Events.off('entityupdate', this.onEntityUpdate);
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (this.props.entity === prevProps.entity) {
       return;
@@ -58,11 +75,9 @@ export default class Mixin extends React.Component {
     const entity = this.props.entity;
     this.setState({ mixins: value });
     const mixinStr = value.map((v) => v.value).join(' ');
-    entity.setAttribute('mixin', mixinStr);
-    Events.emit('entityupdate', {
+    AFRAME.INSPECTOR.execute('entityupdate', {
       component: 'mixin',
       entity: entity,
-      property: '',
       value: mixinStr
     });
     sendMetric('Components', 'addMixin');
@@ -72,15 +87,9 @@ export default class Mixin extends React.Component {
     const entity = this.props.entity;
     this.setState({ mixins: value });
     const mixinStr = value.value;
-    // Remove the current mixin first so that it removes the gltf-model
-    // component, then set the new mixin that will load a new gltf model.
-    // If we don't remove first, sometimes a newly selected model won't load.
-    entity.setAttribute('mixin', '');
-    entity.setAttribute('mixin', value.value);
-    Events.emit('entityupdate', {
+    AFRAME.INSPECTOR.execute('entityupdate', {
       component: 'mixin',
       entity: entity,
-      property: '',
       value: mixinStr
     });
     sendMetric('Components', 'addMixin');

diff --git a/src/editor/components/scenegraph/SceneGraph.js b/src/editor/components/scenegraph/SceneGraph.js
@@ -40,7 +40,12 @@ export default class SceneGraph extends React.Component {
   }
 
   onEntityUpdate = (detail) => {
-    if (detail.component === 'mixin' || detail.component === 'visible') {
+    if (
+      detail.component === 'id' ||
+      detail.component === 'class' ||
+      detail.component === 'mixin' ||
+      detail.component === 'visible'
+    ) {
       this.rebuildEntityOptions();
     }
   };
@@ -53,14 +58,12 @@ export default class SceneGraph extends React.Component {
 
   componentDidMount() {
     this.rebuildEntityOptions();
-    Events.on('entityidchange', this.rebuildEntityOptions);
     Events.on('entityupdate', this.onEntityUpdate);
     document.addEventListener('child-attached', this.onChildAttachedDetached);
     document.addEventListener('child-detached', this.onChildAttachedDetached);
   }
 
   componentWillUnmount() {
-    Events.off('entityidchange', this.rebuildEntityOptions);
     Events.off('entityupdate', this.onEntityUpdate);
     document.removeEventListener(
       'child-attached',

diff --git a/src/editor/lib/commands/EntityUpdateCommand.js b/src/editor/lib/commands/EntityUpdateCommand.js
@@ -61,6 +61,16 @@ export class EntityUpdateCommand extends Command {
           console.log(this.component, this.oldValue, this.newValue);
         }
       }
+    } else if (
+      this.component === 'id' ||
+      this.component === 'class' ||
+      this.component === 'mixin'
+    ) {
+      this.newValue = payload.value;
+      this.oldValue = payload.entity.getAttribute(this.component);
+      if (this.editor.config.debugUndoRedo) {
+        console.log(this.component, this.oldValue, this.newValue);
+      }
     }
   }
 
@@ -76,7 +86,21 @@ export class EntityUpdateCommand extends Command {
           this.newValue
         );
       }
+
+      // If we set a single mixin, remove the current mixin first so that it removes the gltf-model
+      // component, then set the new mixin that will load a new gltf model.
+      // If we don't remove first, sometimes a newly selected model won't load.
+      if (
+        this.component === 'mixin' &&
+        this.newValue &&
+        this.newValue.indexOf(' ') === -1
+      ) {
+        entity.setAttribute('mixin', '');
+      }
       updateEntity(entity, this.component, this.property, this.newValue);
+      if (this.component === 'id') {
+        this.entityId = this.newValue;
+      }
     }
   }
 
@@ -87,7 +111,17 @@ export class EntityUpdateCommand extends Command {
         // If the selected entity is not the entity we are undoing, select the entity.
         this.editor.selectEntity(entity);
       }
+      if (
+        this.component === 'mixin' &&
+        this.oldValue &&
+        this.oldValue.indexOf(' ') === -1
+      ) {
+        entity.setAttribute('mixin', '');
+      }
       updateEntity(entity, this.component, this.property, this.oldValue);
+      if (this.component === 'id') {
+        this.entityId = this.oldValue;
+      }
     }
   }