remove state mixins (#3171)

ngokevin · dmarcos · commit a80d9c2541a6 · 2017-10-16T14:33:35.000-07:00
diff --git a/examples/showcase/tracked-controls/components/aabb-collider.js b/examples/showcase/tracked-controls/components/aabb-collider.js
@@ -63,6 +63,7 @@ AFRAME.registerComponent('aabb-collider', {
         return collisions.indexOf(el) === -1;
       }).forEach(function removeState (el) {
         el.removeState(self.data.state);
+        el.emit('hitend');
       });
       // Store new collisions
       this.collisions = collisions;
diff --git a/examples/showcase/tracked-controls/components/grab.js b/examples/showcase/tracked-controls/components/grab.js
@@ -46,6 +46,7 @@ AFRAME.registerComponent('grab', {
     this.grabbing = false;
     if (!hitEl) { return; }
     hitEl.removeState(this.GRABBED_STATE);
+    hitEl.emit('grabend');
     this.hitEl = undefined;
   },
 
diff --git a/examples/showcase/tracked-controls/index.html b/examples/showcase/tracked-controls/index.html
@@ -9,18 +9,24 @@
     <script src="components/grab.js"></script>
     <script src="components/ground.js"></script>
     <script src="shaders/skyGradient.js"></script>
+    <script src="https://unpkg.com/aframe-event-set-component@4.0.1/dist/aframe-event-set-component.min.js"></script>
   </head>
   <body>
-    <a-scene fog="color: #bc483e; near: 0; far: 65;">
+    <a-scene cursor="rayOrigin: mouse" fog="color: #bc483e; near: 0; far: 65;">
       <a-assets>
         <a-mixin id="cube"
+                 event-set__grab="material.color: #FFEF4F"
+                 event-set__grabend="material.color: #F2E646"
+                 event-set__hit="material.color: #F2E646"
+                 event-set__hitend="material.color: #EF2D5E"
+                 event-set__mousedown="material.color: #FFEF4F"
+                 event-set__mouseenter="material.color: #F2E646"
+                 event-set__mouseleave="material.color: #EF2D5E"
+                 event-set__mouseup="material.color: #F2E646"
                  geometry="primitive: box; height: 0.30; width: 0.30; depth: 0.30"
                  material="color: #EF2D5E;"></a-mixin>
-        <a-mixin id="cube-collided"
-                 material="color: #F2E646;"></a-mixin>
-        <a-mixin id="cube-grabbed"
-                 material="color: #F2E646;"></a-mixin>
       </a-assets>
+
       <!-- Hands -->
       <a-entity hand-controls="left" aabb-collider="objects: .cube;" grab></a-entity>
       <a-entity hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
diff --git a/src/core/a-entity.js b/src/core/a-entity.js
@@ -5,7 +5,6 @@ var THREE = require('../lib/three');
 var utils = require('../utils/');
 
 var AEntity;
-var bind = utils.bind;
 var debug = utils.debug('core:a-entity:debug');
 var warn = utils.debug('core:a-entity:warn');
 
@@ -131,62 +130,6 @@ var proto = Object.create(ANode.prototype, {
     }
   },
 
-  /**
-   * Add new mixin for each mixin with state suffix.
-   */
-  mapStateMixins: {
-    value: function (state, op) {
-      var mixins;
-      var mixinIds;
-      var i;
-
-      mixins = this.getAttribute('mixin');
-
-      if (!mixins) { return; }
-      mixinIds = mixins.split(' ');
-      for (i = 0; i < mixinIds.length; i++) {
-        op(mixinIds[i] + '-' + state);
-      }
-      this.updateComponents();
-    }
-  },
-
-  /**
-   * Handle update of mixin states (e.g., `box-hovered` where `box` is the mixin ID and
-   * `hovered` is the entity state.
-   */
-  updateStateMixins: {
-    value: function (newMixins, oldMixins) {
-      var diff;
-      var newMixinIds;
-      var oldMixinIds;
-      var i;
-      var j;
-      var stateMixinEls;
-
-      newMixinIds = newMixins.split(' ');
-      oldMixinIds = (oldMixins || '') ? oldMixins.split(' ') : [];
-
-      // List of mixins that might have been removed on update.
-      diff = oldMixinIds.filter(function (i) { return newMixinIds.indexOf(i) < 0; });
-
-      // Remove removed mixins.
-      for (i = 0; i < diff.length; i++) {
-        stateMixinEls = document.querySelectorAll('[id^=' + diff[i] + '-]');
-        for (j = 0; j < stateMixinEls.length; j++) {
-          this.unregisterMixin(stateMixinEls[j].id);
-        }
-      }
-
-      // Add new mixins.
-      for (i = 0; i < this.states.length; i++) {
-        for (j = 0; j < newMixinIds.length; j++) {
-          this.registerMixin(newMixinIds[j] + '-' + this.states[i]);
-        }
-      }
-    }
-  },
-
   getObject3D: {
     value: function (type) {
       return this.object3DMap[type];
@@ -668,7 +611,6 @@ var proto = Object.create(ANode.prototype, {
     value: function (newMixins, oldMixins) {
       oldMixins = oldMixins || this.getAttribute('mixin');
       this.updateMixins(newMixins, oldMixins);
-      this.updateStateMixins(newMixins, oldMixins);
       this.updateComponents();
     }
   },
@@ -823,8 +765,7 @@ var proto = Object.create(ANode.prototype, {
     value: function (state) {
       if (this.is(state)) { return; }
       this.states.push(state);
-      this.mapStateMixins(state, bind(this.registerMixin, this));
-      this.emit('stateadded', {state: state});
+      this.emit('stateadded', state);
     }
   },
 
@@ -833,8 +774,7 @@ var proto = Object.create(ANode.prototype, {
       var stateIndex = this.states.indexOf(state);
       if (stateIndex === -1) { return; }
       this.states.splice(stateIndex, 1);
-      this.mapStateMixins(state, bind(this.unregisterMixin, this));
-      this.emit('stateremoved', {state: state});
+      this.emit('stateremoved', state);
     }
   },
 
