better support for multi-input dragging and interrupting, #98

Signed-off-by: Michael Kauzmann <michael.kauzmann@colorado.edu>

js/common/model/Mass.ts

@@ -572,6 +572,7 @@ export default abstract class Mass extends PhetioObject {
    * Starts a physics model engine drag at the given 2d (x,y) model position.
    */
   public startDrag( position: Vector2 ): void {
+    assert && assert( !this.userControlledProperty.value, 'cannot start a drag when already userControlled' );
     this.userControlledProperty.value = true;
     this.engine.addPointerConstraint( this.body, position );
   }
@@ -587,6 +588,7 @@ export default abstract class Mass extends PhetioObject {
    * Ends a physics model engine drag.
    */
   public endDrag(): void {
+    assert && assert( this.userControlledProperty.value, 'cannot end a drag if not userControlled' );
     this.engine.removePointerConstraint( this.body );
     this.userControlledProperty.value = false;
   }

js/common/view/DensityBuoyancyScreenView.ts

@@ -252,7 +252,11 @@ export default class DensityBuoyancyScreenView<Model extends DensityBuoyancyMode
         const isTouch = !( pointer instanceof Mouse );
         const mass = this.getMassUnderPointer( pointer, isTouch );
 
-        if ( mass && mass.canMove && !mass.userControlledProperty.value ) {
+        if ( mass && mass.canMove ) {
+
+          // Newer interactions take precedent, so clean up any old ones first. This also makes mouse/keyboard
+          // cross-interaction much simpler.
+          mass.interruptedEmitter.emit();
 
           grabSoundPlayer.play();
 

js/common/view/MassView.ts

@@ -108,13 +108,27 @@ export default abstract class MassView extends THREE.Mesh {
         tagName: 'div',
         focusable: true
       } );
+      const endKeyboardInteraction = () => {
+        keyboardDragListener.interrupt();
+        mass.interruptedEmitter.removeListener( endKeyboardInteraction );
+        this.focusablePath!.removeInputListener( blurListener );
+
+        mass.endDrag();
+      };
+
+      const blurListener = {
+        blur: endKeyboardInteraction
+      };
 
       this.focusablePath.addInputListener( {
         focus: () => {
+
+          // We want the newer interaction to take precedent, so tabbing to the item should interrupt the previous mouse drag (if applicable).
+          mass.userControlledProperty.value && mass.interruptedEmitter.emit();
+
+          mass.interruptedEmitter.addListener( endKeyboardInteraction );
+          this.focusablePath!.addInputListener( blurListener );
           mass.startDrag( mass.matrix.translation );
-        },
-        blur: () => {
-          mass.endDrag();
         }
       } );
 
@@ -135,10 +149,6 @@ export default abstract class MassView extends THREE.Mesh {
         tandem: Tandem.OPT_OUT
       } );
 
-      mass.interruptedEmitter.addListener( () => {
-        keyboardDragListener.interrupt();
-      } );
-
       this.focusablePath.addInputListener( keyboardDragListener );
     }