clear raycaster intersections when disabled (fixes #3593)

Author: ngokevin

src/components/raycaster.js

@@ -20,6 +20,13 @@ var OBSERVER_CONFIG = {
   subtree: true
 };
 
+var EVENTS = {
+  INTERSECT: 'raycaster-intersected',
+  INTERSECTION: 'raycaster-intersection',
+  INTERSECT_CLEAR: 'raycaster-intersected-cleared',
+  INTERSECTION_CLEAR: 'raycaster-intersection-cleared'
+};
+
 /**
  * Raycaster component.
  *
@@ -61,6 +68,7 @@ module.exports.Component = registerComponent('raycaster', {
     this.raycaster = new THREE.Raycaster();
     this.updateOriginDirection();
     this.setDirty = this.setDirty.bind(this);
+    this.updateLine = this.updateLine.bind(this);
     this.observer = new MutationObserver(this.setDirty);
     this.dirty = true;
     this.lineEndVec3 = new THREE.Vector3();
@@ -108,6 +116,8 @@ module.exports.Component = registerComponent('raycaster', {
         : this.removeEventListeners();
     }
 
+    if (oldData.enabled && !data.enabled) { this.clearAllIntersections(); }
+
     this.setDirty();
   },
 
@@ -123,6 +133,7 @@ module.exports.Component = registerComponent('raycaster', {
     if (this.data.showLine) {
       this.el.removeAttribute('line');
     }
+    this.clearAllIntersections();
   },
 
   addEventListeners: function () {
@@ -186,12 +197,10 @@ module.exports.Component = registerComponent('raycaster', {
     var intersectedEls = this.intersectedEls;
     var intersection;
     var intersections = this.intersections;
-    var lineLength;
     var newIntersectedEls = this.newIntersectedEls;
     var newIntersections = this.newIntersections;
     var prevIntersectedEls = this.prevIntersectedEls;
     var rawIntersections = this.rawIntersections;
-    var self = this;
 
     if (!this.data.enabled) { return; }
 
@@ -235,17 +244,17 @@ module.exports.Component = registerComponent('raycaster', {
     clearedIntersectedEls.length = 0;
     for (i = 0; i < prevIntersectedEls.length; i++) {
       if (intersectedEls.indexOf(prevIntersectedEls[i]) !== -1) { continue; }
-      prevIntersectedEls[i].emit('raycaster-intersected-cleared',
+      prevIntersectedEls[i].emit(EVENTS.INTERSECT_CLEAR,
                                  this.intersectedClearedDetail);
       clearedIntersectedEls.push(prevIntersectedEls[i]);
     }
     if (clearedIntersectedEls.length) {
-      el.emit('raycaster-intersection-cleared', this.intersectionClearedDetail);
+      el.emit(EVENTS.INTERSECTION_CLEAR, this.intersectionClearedDetail);
     }
 
     // Emit intersected on intersected entity per intersected entity.
     for (i = 0; i < newIntersectedEls.length; i++) {
-      newIntersectedEls[i].emit('raycaster-intersected', {
+      newIntersectedEls[i].emit(EVENTS.INTERSECT, {
         el: el,
         intersection: newIntersections[i]
       });
@@ -255,22 +264,28 @@ module.exports.Component = registerComponent('raycaster', {
     if (newIntersections.length) {
       this.intersectionDetail.els = newIntersectedEls;
       this.intersectionDetail.intersections = newIntersections;
-      el.emit('raycaster-intersection', this.intersectionDetail);
+      el.emit(EVENTS.INTERSECTION, this.intersectionDetail);
     }
 
     // Update line length.
-    setTimeout(function () {
-      if (self.data.showLine) {
-        if (intersections.length) {
-          if (intersections[0].object.el === el && intersections[1]) {
-            lineLength = intersections[1].distance;
-          } else {
-            lineLength = intersections[0].distance;
-          }
+    setTimeout(this.updateLine);
+  },
+
+  updateLine: function () {
+    var el = this.el;
+    var intersections = this.intersections;
+    var lineLength;
+
+    if (this.data.showLine) {
+      if (intersections.length) {
+        if (intersections[0].object.el === el && intersections[1]) {
+          lineLength = intersections[1].distance;
+        } else {
+          lineLength = intersections[0].distance;
         }
-        self.drawLine(lineLength);
       }
-    });
+      this.drawLine(lineLength);
+    }
   },
 
   /**
@@ -394,7 +409,19 @@ module.exports.Component = registerComponent('raycaster', {
       }
       return objects;
     };
-  })()
+  })(),
+
+  clearAllIntersections: function () {
+    var i;
+    for (i = 0; i < this.intersectedEls.length; i++) {
+      this.intersectedEls[i].emit(EVENTS.INTERSECT_CLEAR,
+                                  this.intersectedClearedDetail);
+    }
+    copyArray(this.clearedIntersectedEls, this.intersectedEls);
+    this.intersectedEls.length = 0;
+    this.intersections.length = 0;
+    this.el.emit(EVENTS.INTERSECTION_CLEAR, this.intersectionClearedDetail);
+  }
 });
 
 /**

tests/components/raycaster.test.js

@@ -261,8 +261,9 @@ suite('raycaster', function () {
       raycasterEl.addEventListener('raycaster-intersection', function () {
         // Point raycaster somewhere else.
         raycasterEl.setAttribute('rotation', '90 0 0');
-        raycasterEl.addEventListener('raycaster-intersection-cleared', function (evt) {
+        raycasterEl.addEventListener('raycaster-intersection-cleared', function cb (evt) {
           assert.notEqual(component.clearedIntersectedEls.indexOf(targetEl), -1);
+          raycasterEl.removeEventListener('raycaster-intersection-cleared', cb);
           done();
         });
         component.tick();
@@ -283,6 +284,31 @@ suite('raycaster', function () {
       });
       component.tick();
     });
+
+    test('clears intersections when disabled', function (done) {
+      targetEl.addEventListener('raycaster-intersected', function () {
+        targetEl.addEventListener('raycaster-intersected-cleared', function () {
+          done();
+        });
+        assert.equal(component.intersectedEls.length, 2);
+        assert.equal(component.clearedIntersectedEls.length, 0);
+        el.setAttribute('raycaster', 'enabled', false);
+        assert.equal(component.intersectedEls.length, 0);
+        assert.equal(component.intersections.length, 0);
+        assert.equal(component.clearedIntersectedEls.length, 2);
+      });
+      component.tick();
+    });
+
+    test('emits intersectioncleared when disabled', function (done) {
+      targetEl.addEventListener('raycaster-intersected', function () {
+        el.addEventListener('raycaster-intersection-cleared', function () {
+          done();
+        });
+        el.setAttribute('raycaster', 'enabled', false);
+      });
+      component.tick();
+    });
   });
 
   suite('non-recursive raycaster', function () {