Merge pull request #107 from wmurphyrd/nested-handling

Improve handling of nested entities

Author: wmurphyrd

CONTRIBUTING.md

@@ -2,7 +2,7 @@ Thanks for helping with `super-hands`!
 
 Two important things to know when contributing:
 
-1. This package uses semistandard js style. Run `npm run lint` before
+1. This package uses standard js style. Run `npm run lint` before
    creating a pull request to check your code.
 2. This package is validated through [machinima testing](https://github.com/wmurphyrd/aframe-machinima-testing).
    In addition to the unit and integration tests (`npm run test`),

README.md

@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/wmurphyrd/aframe-super-hands-component.svg?branch=master)](https://travis-ci.org/wmurphyrd/aframe-super-hands-component)
 [![npm Dowloads](https://img.shields.io/npm/dt/super-hands.svg?style=flat-square)](https://www.npmjs.com/package/super-hands)
 [![npm Version](http://img.shields.io/npm/v/super-hands.svg?style=flat-square)](https://www.npmjs.com/package/super-hands)
-[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 Effortlessly add natural, intuitive interactions with tracked controller,
 touch, or mouse input in [A-Frame](https://aframe.io).
@@ -245,6 +245,15 @@ LIFO stack of collided entities to determine which will be affected.
 If needed, use `event.target` instead.
 * For events triggered by buttons, the triggering button event is passed
   along in `detail.buttonEvent`
+* When entities are nested, gesture events will bubble to the closest parent
+  with a related reaction component. This makes it easy to make specific
+  hotspots on larger objects by placing the collidable component on a child
+  and the reaction component on the parent
+  (e.g., a door with the handle as a collidable child and a `grabable` parent
+  door so the whole door moves only when the handle is grabbed). To prevent
+  a gesture form bubbling, trap it on the child by giving it reaction components
+  or listening-for and cancelling the gesture events
+  (see [Gesture acceptance and rejection](#Gesture-acceptance-and-rejection]))
 
 #### Global Event Handler Integration
 

dist/super-hands.js

@@ -797,7 +797,7 @@ AFRAME.registerComponent('clickable', AFRAME.utils.extendDeep({}, buttonCore, {
     this.el.removeEventListener(this.UNCLICK_EVENT, this.end);
   },
   start: function (evt) {
-    if (!this.startButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.startButtonOk(evt)) {
       return;
     }
     this.el.addState(this.CLICKED_STATE);
@@ -810,7 +810,7 @@ AFRAME.registerComponent('clickable', AFRAME.utils.extendDeep({}, buttonCore, {
   },
   end: function (evt) {
     const handIndex = this.clickers.indexOf(evt.detail.hand);
-    if (!this.endButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.endButtonOk(evt)) {
       return;
     }
     if (handIndex !== -1) {
@@ -923,7 +923,7 @@ AFRAME.registerComponent('draggable', inherit({}, buttonCore, {
     this.el.removeEventListener(this.UNDRAG_EVENT, this.dragEnd);
   },
   dragStart: function (evt) {
-    if (!this.startButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.startButtonOk(evt)) {
       return;
     }
     this.el.addState(this.DRAGGED_STATE);
@@ -932,7 +932,7 @@ AFRAME.registerComponent('draggable', inherit({}, buttonCore, {
     }
   },
   dragEnd: function (evt) {
-    if (!this.endButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.endButtonOk(evt)) {
       return;
     }
     this.el.removeState(this.DRAGGED_STATE);
@@ -1026,7 +1026,7 @@ AFRAME.registerComponent('droppable', {
     return false;
   },
   hoverStart: function (evt) {
-    if (!this.entityAcceptable(evt.detail.carried)) {
+    if (evt.defaultPrevented || !this.entityAcceptable(evt.detail.carried)) {
       return;
     }
     this.el.addState(this.HOVERED_STATE);
@@ -1035,9 +1035,15 @@ AFRAME.registerComponent('droppable', {
     }
   },
   hoverEnd: function (evt) {
+    if (evt.defaultPrevented) {
+      return;
+    }
     this.el.removeState(this.HOVERED_STATE);
   },
   dragDrop: function (evt) {
+    if (evt.defaultPrevented) {
+      return;
+    }
     const dropped = evt.detail.dropped;
     if (!this.entityAcceptable(dropped)) {
       if (this.data.rejectEvent.length) {
@@ -1120,7 +1126,7 @@ AFRAME.registerComponent('grabbable', inherit({}, physicsCore, buttonsCore, {
     this.physicsRemove();
   },
   start: function (evt) {
-    if (!this.startButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.startButtonOk(evt)) {
       return;
     }
     // room for more grabbers?
@@ -1147,7 +1153,7 @@ AFRAME.registerComponent('grabbable', inherit({}, physicsCore, buttonsCore, {
   },
   end: function (evt) {
     const handIndex = this.grabbers.indexOf(evt.detail.hand);
-    if (!this.endButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.endButtonOk(evt)) {
       return;
     }
     if (handIndex !== -1) {
@@ -1209,6 +1215,9 @@ AFRAME.registerComponent('hoverable', {
     this.el.removeEventListener(this.UNHOVER_EVENT, this.end);
   },
   start: function (evt) {
+    if (evt.defaultPrevented) {
+      return;
+    }
     this.el.addState(this.HOVERED_STATE);
     if (this.hoverers.indexOf(evt.detail.hand) === -1) {
       this.hoverers.push(evt.detail.hand);
@@ -1218,6 +1227,9 @@ AFRAME.registerComponent('hoverable', {
     }
   },
   end: function (evt) {
+    if (evt.defaultPrevented) {
+      return;
+    }
     var handIndex = this.hoverers.indexOf(evt.detail.hand);
     if (handIndex !== -1) {
       this.hoverers.splice(handIndex, 1);
@@ -1375,7 +1387,7 @@ AFRAME.registerComponent('stretchable', inherit({}, buttonCore, {
     this.el.removeEventListener(this.UNSTRETCH_EVENT, this.end);
   },
   start: function (evt) {
-    if (this.stretched || this.stretchers.includes(evt.detail.hand) || !this.startButtonOk(evt)) {
+    if (this.stretched || this.stretchers.includes(evt.detail.hand) || !this.startButtonOk(evt) || evt.defaultPrevented) {
       return;
     } // already stretched or already captured this hand or wrong button
     this.stretchers.push(evt.detail.hand);
@@ -1390,7 +1402,7 @@ AFRAME.registerComponent('stretchable', inherit({}, buttonCore, {
   },
   end: function (evt) {
     var stretcherIndex = this.stretchers.indexOf(evt.detail.hand);
-    if (!this.endButtonOk(evt)) {
+    if (evt.defaultPrevented || !this.endButtonOk(evt)) {
       return;
     }
     if (stretcherIndex !== -1) {