Various adjustments

dist/super-hands.js

@@ -155,11 +155,16 @@ AFRAME.registerComponent('super-hands', {
     let carried = this.state.get(this.GRAB_EVENT);
     this.dispatchMouseEventAll('mousedown', this.el);
     this.gehClicking = new Set(this.hoverEls);
+    const detail = {
+      hand: this.el,
+      buttonEvent: evt
+    };
     if (!carried) {
-      carried = this.findTarget(this.GRAB_EVENT, {
-        hand: this.el,
-        buttonEvent: evt
-      });
+      if (evt.detail && evt.detail.targetEntity && !this.emitCancelable(evt.detail.targetEntity, this.GRAB_EVENT, detail)) {
+        carried = evt.detail.targetEntity;
+      } else {
+        carried = this.findTarget(this.GRAB_EVENT, detail);
+      }
       if (carried) {
         this.state.set(this.GRAB_EVENT, carried);
         this._unHover(carried);
@@ -844,25 +849,30 @@ AFRAME.registerComponent('grabbable', inherit(base, {
     this.yFactor = (this.data.invert ? -1 : 1) * !this.data.suppressY;
   },
   tick: function () {
-    var entityPosition;
-    if (this.grabber) {
-      // reflect on z-axis to point in same direction as the laser
-      this.targetPosition.copy(this.grabDirection);
-      this.targetPosition.applyQuaternion(this.grabber.object3D.getWorldQuaternion()).setLength(this.grabDistance).add(this.grabber.object3D.getWorldPosition()).add(this.grabOffset);
-      if (this.deltaPositionIsValid) {
-        // relative position changes work better with nested entities
-        this.deltaPosition.sub(this.targetPosition);
-        entityPosition = this.el.getAttribute('position');
-        this.destPosition.x = entityPosition.x - this.deltaPosition.x * this.xFactor;
-        this.destPosition.y = entityPosition.y - this.deltaPosition.y * this.yFactor;
-        this.destPosition.z = entityPosition.z - this.deltaPosition.z * this.zFactor;
-        this.el.setAttribute('position', this.destPosition);
-      } else {
-        this.deltaPositionIsValid = true;
+    var q = new THREE.Quaternion();
+    var v = new THREE.Vector3();
+
+    return function () {
+      var entityPosition;
+      if (this.grabber) {
+        // reflect on z-axis to point in same direction as the laser
+        this.targetPosition.copy(this.grabDirection);
+        this.targetPosition.applyQuaternion(this.grabber.object3D.getWorldQuaternion(q)).setLength(this.grabDistance).add(this.grabber.object3D.getWorldPosition(v)).add(this.grabOffset);
+        if (this.deltaPositionIsValid) {
+          // relative position changes work better with nested entities
+          this.deltaPosition.sub(this.targetPosition);
+          entityPosition = this.el.getAttribute('position');
+          this.destPosition.x = entityPosition.x - this.deltaPosition.x * this.xFactor;
+          this.destPosition.y = entityPosition.y - this.deltaPosition.y * this.yFactor;
+          this.destPosition.z = entityPosition.z - this.deltaPosition.z * this.zFactor;
+          this.el.setAttribute('position', this.destPosition);
+        } else {
+          this.deltaPositionIsValid = true;
+        }
+        this.deltaPosition.copy(this.targetPosition);
       }
-      this.deltaPosition.copy(this.targetPosition);
-    }
-  },
+    };
+  }(),
   remove: function () {
     this.el.removeEventListener(this.GRAB_EVENT, this.start);
     this.el.removeEventListener(this.UNGRAB_EVENT, this.end);
@@ -913,19 +923,23 @@ AFRAME.registerComponent('grabbable', inherit(base, {
     }
   },
   resetGrabber: function () {
-    let raycaster;
-    if (!this.grabber) {
-      return false;
-    }
-    raycaster = this.grabber.getAttribute('raycaster');
-    this.deltaPositionIsValid = false;
-    this.grabDistance = this.el.object3D.getWorldPosition().distanceTo(this.grabber.object3D.getWorldPosition());
-    if (raycaster) {
-      this.grabDirection = raycaster.direction;
-      this.grabOffset = raycaster.origin;
-    }
-    return true;
-  },
+    var objPos = new THREE.Vector3();
+    var grabPos = new THREE.Vector3();
+    return function () {
+      let raycaster;
+      if (!this.grabber) {
+        return false;
+      }
+      raycaster = this.grabber.getAttribute('raycaster');
+      this.deltaPositionIsValid = false;
+      this.grabDistance = this.el.object3D.getWorldPosition(objPos).distanceTo(this.grabber.object3D.getWorldPosition(grabPos));
+      if (raycaster) {
+        this.grabDirection = raycaster.direction;
+        this.grabOffset = raycaster.origin;
+      }
+      return true;
+    };
+  }(),
   lostGrabber: function (evt) {
     let i = this.grabbers.indexOf(evt.relatedTarget);
     // if a queued, non-physics grabber leaves the collision zone, forget it
@@ -1075,7 +1089,8 @@ AFRAME.registerComponent('stretchable', inherit(base, {
   schema: {
     usePhysics: { default: 'ifavailable' },
     invert: { default: false },
-    physicsUpdateRate: { default: 100 }
+    physicsUpdateRate: { default: 100 },
+    useWorldPosition: { default: false }
   },
   init: function () {
     this.STRETCHED_STATE = 'stretched';
@@ -1102,8 +1117,13 @@ AFRAME.registerComponent('stretchable', inherit(base, {
       return;
     }
     this.scale.copy(this.el.getAttribute('scale'));
-    this.handPos.copy(this.stretchers[0].getAttribute('position'));
-    this.otherHandPos.copy(this.stretchers[1].getAttribute('position'));
+    if (this.data.useWorldPosition) {
+      this.stretchers[0].object3D.getWorldPosition(this.handPos);
+      this.stretchers[1].object3D.getWorldPosition(this.otherHandPos);
+    } else {
+      this.handPos.copy(this.stretchers[0].getAttribute('position'));
+      this.otherHandPos.copy(this.stretchers[1].getAttribute('position'));
+    }
     const currentStretch = this.handPos.distanceTo(this.otherHandPos);
     let deltaStretch = 1;
     if (this.previousStretch !== null && currentStretch !== 0) {

index.js

@@ -12,6 +12,7 @@ require('./reaction_components/drag-droppable.js')
 require('./reaction_components/draggable.js')
 require('./reaction_components/droppable.js')
 require('./reaction_components/clickable.js')
+require('./reaction_components/activatable.js')
 
 /**
  * Super Hands component for A-Frame.
@@ -58,6 +59,18 @@ AFRAME.registerComponent('super-hands', {
         'pointdown', 'thumbdown', 'pointingend', 'pistolend',
         'thumbstickup', 'mouseup', 'touchend']
     },
+    activateStartButtons: {
+      default: ['gripdown', 'trackpaddown', 'triggerdown', 'gripclose',
+        'abuttondown', 'bbuttondown', 'xbuttondown', 'ybuttondown',
+        'pointup', 'thumbup', 'pointingstart', 'pistolstart',
+        'thumbstickdown', 'mousedown', 'touchstart']
+    },
+    activateEndButtons: {
+      default: ['gripup', 'trackpadup', 'triggerup', 'gripopen',
+        'abuttonup', 'bbuttonup', 'xbuttonup', 'ybuttonup',
+        'pointdown', 'thumbdown', 'pointingend', 'pistolend',
+        'thumbstickup', 'mouseup', 'touchend']
+    },
     interval: { default: 0 }
   },
 
@@ -82,6 +95,8 @@ AFRAME.registerComponent('super-hands', {
     this.DRAGOVER_EVENT = 'dragover-start'
     this.UNDRAGOVER_EVENT = 'dragover-end'
     this.DRAGDROP_EVENT = 'drag-drop'
+    this.ACTIVATE_EVENT = 'activate-start'
+    this.DEACTIVATE_EVENT = 'activate-end'
 
     // links to other systems/components
     this.otherSuperHand = null
@@ -106,6 +121,8 @@ AFRAME.registerComponent('super-hands', {
     this.onStretchEndButton = this.onStretchEndButton.bind(this)
     this.onDragDropStartButton = this.onDragDropStartButton.bind(this)
     this.onDragDropEndButton = this.onDragDropEndButton.bind(this)
+    this.onActivateStartButton = this.onActivateStartButton.bind(this)
+    this.onActivateEndButton = this.onActivateEndButton.bind(this)
     this.system.registerMe(this)
   },
 
@@ -168,11 +185,16 @@ AFRAME.registerComponent('super-hands', {
     let carried = this.state.get(this.GRAB_EVENT)
     this.dispatchMouseEventAll('mousedown', this.el)
     this.gehClicking = new Set(this.hoverEls)
+    const detail = {
+      hand: this.el,
+      buttonEvent: evt
+    }
     if (!carried) {
-      carried = this.findTarget(this.GRAB_EVENT, {
-        hand: this.el,
-        buttonEvent: evt
-      })
+      if (evt.detail && evt.detail.targetEntity && !this.emitCancelable(evt.detail.targetEntity, this.GRAB_EVENT, detail)) {
+        carried = evt.detail.targetEntity
+      } else {
+        carried = this.findTarget(this.GRAB_EVENT, detail)
+      }
       if (carried) {
         this.state.set(this.GRAB_EVENT, carried)
         this._unHover(carried)
@@ -281,6 +303,30 @@ AFRAME.registerComponent('super-hands', {
       }
     }
   },
+  onActivateStartButton: function (evt) {
+    const carried = this.state.get(this.GRAB_EVENT)
+    let activated = this.state.get(this.ACTIVATE_EVENT)
+    if (carried) {
+      if (!activated && !this.emitCancelable(carried, this.ACTIVATE_EVENT, {hand: this.el, buttonEvent: evt})) {
+        activated = this.state.get(this.ACTIVATE_EVENT)
+      }
+      if (activated) {
+        this.state.set(this.ACTIVATE_EVENT, activated)
+      }
+    }
+  },
+  onActivateEndButton: function (evt) {
+    const carried = this.state.get(this.GRAB_EVENT)
+    let deactivated = this.state.get(this.DEACTIVATE_EVENT)
+    if (carried) {
+      if (!deactivated && !this.emitCancelable(carried, this.DEACTIVATE_EVENT, {hand: this.el, buttonEvent: evt})) {
+        deactivated = this.state.get(this.DEACTIVATE_EVENT)
+      }
+      if (deactivated) {
+        this.state.set(this.DEACTIVATE_EVENT, deactivated)
+      }
+    }
+  },
   processHitEl: function (hitEl, intersection) {
     const dist = intersection && intersection.distance
     const sects = this.hoverElsIntersections
@@ -434,6 +480,9 @@ AFRAME.registerComponent('super-hands', {
     this.data.dragDropStartButtons.forEach(b => {
       this.el.addEventListener(b, this.onDragDropStartButton)
     })
+    this.data.activateStartButtons.forEach(b => {
+      this.el.addEventListener(b, this.onActivateStartButton)
+    })
     this.data.dragDropEndButtons.forEach(b => {
       this.el.addEventListener(b, this.onDragDropEndButton)
     })
@@ -443,6 +492,9 @@ AFRAME.registerComponent('super-hands', {
     this.data.grabEndButtons.forEach(b => {
       this.el.addEventListener(b, this.onGrabEndButton)
     })
+    this.data.activateEndButtons.forEach(b => {
+      this.el.addEventListener(b, this.onActivateEndButton)
+    })
   },
   unRegisterListeners: function (data) {
     data = data || this.data
@@ -463,6 +515,9 @@ AFRAME.registerComponent('super-hands', {
     data.stretchStartButtons.forEach(b => {
       this.el.removeEventListener(b, this.onStretchStartButton)
     })
+    data.activateStartButtons.forEach(b => {
+      this.el.removeEventListener(b, this.onActivateStartButton)
+    })
     data.stretchEndButtons.forEach(b => {
       this.el.removeEventListener(b, this.onStretchEndButton)
     })
@@ -472,6 +527,9 @@ AFRAME.registerComponent('super-hands', {
     data.dragDropEndButtons.forEach(b => {
       this.el.removeEventListener(b, this.onDragDropEndButton)
     })
+    data.activateEndButtons.forEach(b => {
+      this.el.removeEventListener(b, this.onActivateEndButton)
+    })
   },
   emitCancelable: function (target, name, detail) {
     var data, evt

reaction_components/activatable.js

@@ -0,0 +1,38 @@
+/* global AFRAME */
+const inherit = AFRAME.utils.extendDeep
+const buttonCore = require('./prototypes/buttons-proto.js')
+
+AFRAME.registerComponent('activatable', inherit({}, buttonCore, {
+  multiple: true,
+  schema: {
+    buttonStartEvent: {default: ''},
+    buttonEndEvent: {default: ''},
+    activatedState: {default: 'activated'}
+  },
+  init: function () {
+    this.ACTIVATE_EVENT = 'activate-start'
+    this.DEACTIVATE_EVENT = 'activate-end'
+
+    this.activateStart = this.activateStart.bind(this)
+    this.activateEnd = this.activateEnd.bind(this)
+
+    this.el.addEventListener(this.ACTIVATE_EVENT, this.activateStart)
+    this.el.addEventListener(this.DEACTIVATE_EVENT, this.activateEnd)
+  },
+  remove: function () {
+    this.el.removeEventListener(this.ACTIVATE_EVENT, this.activateStart)
+    this.el.removeEventListener(this.DEACTIVATE_EVENT, this.activateEnd)
+  },
+  activateStart: function (evt) {
+    if (evt.defaultPrevented || !this.startButtonOk(evt)) { return }
+    if (evt.detail.buttonEvent.type !== this.data.buttonStartEvent) { return }
+    this.el.addState(this.data.activatedState)
+    if (evt.preventDefault) { evt.preventDefault() }
+  },
+  activateEnd: function (evt) {
+    if (evt.defaultPrevented || !this.endButtonOk(evt)) { return }
+    if (evt.detail.buttonEvent.type !== this.data.buttonEndEvent) { return }
+    this.el.removeState(this.data.activatedState)
+    if (evt.preventDefault) { evt.preventDefault() }
+  }
+}))