Add an enabled property to be able to disable the event listeners (#69)

c-frame · Aug 12, 2024 · 90c9dd1 · 90c9dd1
1 parent 57d8df8
commit 90c9dd1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ For [A-Frame](https://aframe.io).
 
 | Property          | Description                                                                                                      | Default Value |
 | ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------------- |
+| enabled           | Enable or disable the component                                                                                  | true          |
 | cameraRig         | Selector of the camera rig to teleport                                                                           |               |
 | cameraHead        | Selector of the scene's active camera                                                                            |               |
 | collisionEntities | Selector of the meshes used to check the collisions. If no value provided a plane at Y=0 is used.                |               |

diff --git a/index.js b/index.js
@@ -9,6 +9,7 @@ if (typeof AFRAME === 'undefined') {
  */
 AFRAME.registerComponent('cursor-teleport', {
   schema: {
+    enabled: { type: 'boolean', default: true },
     cameraHead: { type: 'selector', default: '' },
     cameraRig: { type: 'selector', default: '' },
     collisionEntities: { type: 'string', default: '' },
@@ -97,7 +98,19 @@ AFRAME.registerComponent('cursor-teleport', {
     }
   },
 
-  play() {
+  update(oldData) {
+    if (typeof oldData.enabled === 'undefined') return;
+    if (!oldData.enabled && this.data.enabled) {
+      this.registerEventListeners();
+    }
+    if (oldData.enabled && !this.data.enabled) {
+      // Call unregisterEventListeners instead of pause that is a wrapped method unregistering tick method
+      // because we still want the tick method to use the component via the teleportTo api.
+      this.unregisterEventListeners();
+    }
+  },
+
+  registerEventListeners() {
     const canvas = this.canvas;
     canvas.addEventListener('mousedown', this.mouseDown, false);
     canvas.addEventListener('mousemove', this.mouseMove, false);
@@ -108,7 +121,7 @@ AFRAME.registerComponent('cursor-teleport', {
     window.addEventListener('keydown', this.hideCursor, false);
   },
 
-  pause() {
+  unregisterEventListeners() {
     this.transitioning = false;
     this.hideCursor();
     const canvas = this.canvas;
@@ -121,6 +134,15 @@ AFRAME.registerComponent('cursor-teleport', {
     window.removeEventListener('keydown', this.hideCursor);
   },
 
+  play() {
+    if (!this.data.enabled) return;
+    this.registerEventListeners();
+  },
+
+  pause() {
+    this.unregisterEventListeners();
+  },
+
   updateRaycastObjects() {
     // updates the array of meshes we will need to raycast to
     // clear the array of any existing meshes