Remove drag listeners when paused / removed

examples/physics-2/index.html

@@ -47,7 +47,7 @@
       <script>
         var draggable = document.querySelector('[click-drag]');
         draggable.addEventListener('dragstart', function(dragInfo) {
-          draggable.pause();
+          draggable.components['dynamic-body'].pause();
         });
         draggable.addEventListener('dragend', function(dragInfo) {
 
@@ -74,7 +74,7 @@
           // This gives the feeling of "tossing" the ball
           rotatedVelocity.applyAxisAngle(rotation, Math.PI / 8);
 
-          draggable.play();
+          draggable.components['dynamic-body'].play();
           draggable.body.velocity.set(rotatedVelocity.x, rotatedVelocity.y, rotatedVelocity.z);
         });
       </script>

examples/physics/index.html

@@ -25,14 +25,14 @@
       <script>
         var draggable = document.querySelector('[click-drag]');
         draggable.addEventListener('dragstart', function(dragInfo) {
-          draggable.pause();
+          draggable.components['dynamic-body'].pause();
         });
         draggable.addEventListener('dragend', function(dragInfo) {
           var x = dragInfo.detail.velocity.x;
           var y = dragInfo.detail.velocity.y;
           var z = dragInfo.detail.velocity.z;
 
-          draggable.play();
+          draggable.components['dynamic-body'].play();
           draggable.body.velocity.set(x, y, z);
           console.log('drag end', dragInfo.detail.velocity);
         });

src/index.js

@@ -386,18 +386,18 @@ function dragItem(THREE, element, offset, camera, depth, mouseInfo, lockToLocalR
 }
 
 // Closure to close over the removal of the event listeners
-const {initialize, tearDown} = (function closeOverInitAndTearDown() {
+const {didMount, didUnmount} = (function getDidMountAndUnmount() {
 
   let removeClickListeners;
+  let removeDragListeners;
+  const cache = [];
 
-  return {
-    initialize(THREE, componentName, lockToLocalRotation) {
+  function initialize(THREE, componentName, lockToLocalRotation) {
 
     // TODO: Based on a scene from the element passed in?
     const scene = document.querySelector('a-scene');
     // delay loading of this as we're not 100% if the scene has loaded yet or not
     let camera;
-      let removeDragListeners;
     let draggedElement;
     let dragInfo;
     const positionLog = [];
@@ -448,8 +448,6 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
           clientY,
         };
 
-          element.emit(DRAG_START_EVENT, dragInfo);
-
         element.addEventListener(DRAG_MOVE_EVENT, onDragged);
 
         removeDragListeners = _ => {
@@ -459,6 +457,8 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
           // in case this removal function gets called more than once
           removeDragItemListeners = null;
         };
+
+        element.emit(DRAG_START_EVENT, dragInfo);
       }
     }
 
@@ -553,18 +553,12 @@ const {initialize, tearDown} = (function closeOverInitAndTearDown() {
       scene.addEventListener('loaded', run);
     }
 
-    },
+  }
 
-    tearDown() {
+  function tearDown() {
     removeClickListeners && removeClickListeners(); // eslint-disable-line no-unused-expressions
     removeClickListeners = undefined;
-    },
-  };
-}());
-
-const {didMount, didUnmount} = (function getDidMountAndUnmount() {
-
-  const cache = [];
+  }
 
   return {
     didMount(element, THREE, componentName, lockToLocalRotation) {
@@ -582,6 +576,9 @@ const {didMount, didUnmount} = (function getDidMountAndUnmount() {
 
       const cacheIndex = cache.indexOf(element);
 
+      removeDragListeners && removeDragListeners(); // eslint-disable-line no-unused-expressions
+      removeDragListeners = undefined;
+
       if (cacheIndex === -1) {
         return;
       }
@@ -638,7 +635,7 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
      * Generally undoes all modifications to the entity.
      */
     remove() {
-      didUnmount();
+      didUnmount(this);
     },
 
     /**
@@ -646,7 +643,7 @@ export default function aframeDraggableComponent(aframe, componentName = COMPONE
      * Use to stop or remove any dynamic or background behavior such as events.
      */
     pause() {
-      didUnmount();
+      didUnmount(this);
     },
 
     /**