prosthetic-hand 1.3.1 → 2.0.0

package/README.md

@@ -1,43 +1,43 @@
 
-# 🖑 prosthetic-hand 🖑
+# 🖐️ prosthetic-hand 🖐️
 
-A javascript library to emulate mouse/touch/pointer events, designed to help
-unit-test touch gestures.
+A JavaScript library to emulate mouse/touch/pointer events, designed to help unit-test touch gestures.
 
+## Installation
 
-## Demos
+```bash
+npm install prosthetic-hand
+```
 
-http://leaflet.github.io/prosthetic-hand/demos/
+## Usage
 
-## API documentation
+```js
+import Hand from 'prosthetic-hand';
 
-http://leaflet.github.io/prosthetic-hand/api-docs.html
+const hand = new Hand();
+const finger = h.growFinger('pointer', { pointerType: 'touch', pressure: 0.9 });
 
+finger
+  .wait(500)
+  .moveTo(200, 250, 0)
+  .down()
+  .moveBy(100, 150, 2000)
+  .up();
+```
 
+For more information see the [API documentation](http://leaflet.github.io/prosthetic-hand/api-docs.html) and [demos](http://leaflet.github.io/prosthetic-hand/demos/).
 
-## Install
+## Testing
 
-Run `npm install prosthetic-hand`.
+Run `npm install` and `npm start`, then open the URL printed in the console in your preferred browser.
 
-Files will be in `node_modules/prosthetic-hand/dist/`
+## Building the documentation
 
-## Build & test
-
-Run `npm install`, then `npm start`, then point your favourite web browser at
-`http://localhost:4567/demos/`
-
-## Compatibility note
-
-Please note that in order to emulate `TouchEvent`s or `PointerEvent`s, your
-web browser must support (or polyfill) these events. Short version: use
-Chrome when running code that emulates `TouchEvents`, and IE11 or Edge when
-emulating `PointerEvent`s.
+Run `npm run build-docs` and open the `api-docs.html` file generated by it.
 
 ## Contributing code
 
-Read the Leaflet guidelines at https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md
-
-Whenever making a bugfix or a new feature, notify [IvanSanchez](https://github.com/IvanSanchez) so that a new version can be published to NPM.
+Read the [Leaflet guidelines](https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md). Whenever making a bugfix or a new feature, notify [IvanSanchez](https://github.com/IvanSanchez) so that a new version can be published to NPM.
 
 ## Legalese
 

package/lib/Capabilities.js

@@ -0,0 +1,33 @@
+
+// Detects some browser capabilities. Only for internal use, not exposed to the
+// API user.
+
+// touchConstructor, for Touch
+export var touchConstructor = true;
+
+try {
+	var foo = new Touch({ identifier: 0, target: document });
+} catch(e) {
+	touchConstructor = false;
+}
+
+
+// touchEventConstructor, for TouchEvent
+// Weirdly, Safari on iOS has Touch constructor but no TouchEvent constructor.
+export var touchEventConstructor = true;
+
+try {
+	var foo = new TouchEvent('touchdown')
+} catch(e) {
+	touchEventConstructor = false;
+}
+
+// touch: `true` if the browser implements `TouchEvent`
+export var touch = !!('TouchEvent' in window);
+
+// Some bits borrowed from Leaflet's L.Browser
+const ua = navigator.userAgent.toLowerCase();
+const webkit        = ua.includes('webkit');
+const chrome =        ua.includes('chrome');
+export const gecko  = ua.includes('gecko') && !webkit;
+export const safari = !chrome && ua.includes('safari');

package/{src → lib}/Finger.js

@@ -8,12 +8,12 @@ import * as capabilities from './Capabilities.js';
 //   ID whenever they go down.
 var fingerIdSequence = 1;
 
-// 🖑class Finger
+// 🖐️class Finger
 // Represents a finger, capable of performing single touch/pointer/mouse synthetic
 // events.
 
 /*
-🖑example
+🖐️example
 
 ```js
 var h = new Hand();
@@ -26,7 +26,7 @@ fatFinger.wait(500).moveTo(200, 250, 0).down().moveBy(100, 150, 2000).up();
 */
 export default class Finger {
 
-	// 🖑factory Finger(eventMode: String, options?: Finger state): Finger
+	// 🖐️factory Finger(eventMode: String, options?: Finger state): Finger
 	// Instantiates a new `Finger`. `eventMode` must be `mouse`, `touch` or `pointer`
 	// for `MouseEvent`s, `TouchEvent`s or `PointerEvent`s, respectively.
 	constructor(eventMode, options) {
@@ -40,36 +40,36 @@ export default class Finger {
 		/// TODO: parkinsonFactor or shakesFactor or jitteryness or something
 
 
-		// 🖑section Finger state
+		// 🖐️section Finger state
 		// The internal state of a `Finger` has options which will be reflected as
 		// properties of the events fired afterwards. Some of these state options
 		// apply only to a specific event mode.
 		this._state = Object.assign({}, {
-			// 🖑option x: Number; The number of pixels from the left boundary the finger is at.
+			// 🖐️option x: Number; The number of pixels from the left boundary the finger is at.
 			x: 0,
 
-			// 🖑option y: Number; The number of pixels from the top boundary the finger is at.
+			// 🖐️option y: Number; The number of pixels from the top boundary the finger is at.
 			y: 0,
 
-			// 🖑option down: Boolean; Whether the finger is down (clicking/touching/pressing) or not. This is referred to as "active" in some of the events specifications.
+			// 🖐️option down: Boolean; Whether the finger is down (clicking/touching/pressing) or not. This is referred to as "active" in some of the events specifications.
 			down: false,
 
-			// 🖑option pressure: Number = 0.5; The value for [`Touch.force`](`https://developer.mozilla.org/docs/Web/API/Touch/force`) or [`PointerEvent.pressure`](https://developer.mozilla.org/docs/Web/API/PointerEvent/pressure), between `0.0` and `1.0`
+			// 🖐️option pressure: Number = 0.5; The value for [`Touch.force`](`https://developer.mozilla.org/docs/Web/API/Touch/force`) or [`PointerEvent.pressure`](https://developer.mozilla.org/docs/Web/API/PointerEvent/pressure), between `0.0` and `1.0`
 			pressure: 0.5,
 
-			// 🖑option tiltX: Number = 0; The value for [`PointerEvent.tiltX`](https://developer.mozilla.org/docs/Web/API/PointerEvent/tiltX)
+			// 🖐️option tiltX: Number = 0; The value for [`PointerEvent.tiltX`](https://developer.mozilla.org/docs/Web/API/PointerEvent/tiltX)
 			tiltX: 0,
 
-			// 🖑option tiltY: Number = 0; The value for [`PointerEvent.tiltX`](https://developer.mozilla.org/docs/Web/API/PointerEvent/tiltY)
+			// 🖐️option tiltY: Number = 0; The value for [`PointerEvent.tiltX`](https://developer.mozilla.org/docs/Web/API/PointerEvent/tiltY)
 			tiltY: 0,
 
-			// 🖑option width: Number = 25; The value for [`Touch.radiusX`](`https://developer.mozilla.org/docs/Web/API/Touch/radiusX`) or [`PointerEvent.width`](https://developer.mozilla.org/docs/Web/API/PointerEvent/width)
+			// 🖐️option width: Number = 25; The value for [`Touch.radiusX`](`https://developer.mozilla.org/docs/Web/API/Touch/radiusX`) or [`PointerEvent.width`](https://developer.mozilla.org/docs/Web/API/PointerEvent/width)
 			width: 25,
 
-			// 🖑option radiusY: Number = 25; The value for [`Touch.radiusY`](`https://developer.mozilla.org/docs/Web/API/Touch/radiusY`) or [`PointerEvent.height`](https://developer.mozilla.org/docs/Web/API/PointerEvent/height)
+			// 🖐️option radiusY: Number = 25; The value for [`Touch.radiusY`](`https://developer.mozilla.org/docs/Web/API/Touch/radiusY`) or [`PointerEvent.height`](https://developer.mozilla.org/docs/Web/API/PointerEvent/height)
 			height: 25,
 
-			// 🖑option pointerType: String = 'pen'; The value for [`PointerEvent.pointerType`](https://developer.mozilla.org/docs/Web/API/PointerEvent/pointerType)
+			// 🖐️option pointerType: String = 'pen'; The value for [`PointerEvent.pointerType`](https://developer.mozilla.org/docs/Web/API/PointerEvent/pointerType)
 			pointerType: 'pen'
 		}, options);
 
@@ -111,15 +111,9 @@ export default class Finger {
 			} else {
 				this._initGraphicCircle();
 			}
-			if (!capabilities.pointer) {
-				console.warn('This browser cannot emulate pointer events.');
-			}
 		} else {
 			this._mode = 'mouse';
 			this._initGraphicCircle();
-			if (!capabilities.mouse) {
-				console.warn('This browser cannot emulate mouse events.');
-			}
 		}
 
 
@@ -135,28 +129,28 @@ export default class Finger {
 	}
 
 
-	// 🖑method isIdle(): Boolean
+	// 🖐️method isIdle(): Boolean
 	// Returns true when the finger has no more pending movements/waits/wiggles/etc.
 	isIdle() {
 		return !(this._movements.length);
 	}
 
 
-	// 🖑method down(delay?: Number): this
+	// 🖐️method down(delay?: Number): this
 	// Puts the finger down, optionally after a delay.
 	down(delay) {
 		return this.update({ down: true, getState: this._falseFn, duration: delay || 0 });
 	}
 
 
-	// 🖑method up(options?: {}): this
+	// 🖐️method up(options?: {}): this
 	// Lifts the finger up, after an optional delay.
 	up(delay) {
 		return this.update({ down: false, getState: this._falseFn, duration: delay || 0 });
 	}
 
 
-	// 🖑method wait(delay): this
+	// 🖐️method wait(delay): this
 	// Don't move this finger for `delay` milliseconds.
 	wait(delay) {
 		this._queueMove({finalState: this._finalState, getState: this._falseFn, duration: delay});
@@ -164,7 +158,7 @@ export default class Finger {
 	}
 
 
-	// 🖑method waitUntil(timestamp): this
+	// 🖐️method waitUntil(timestamp): this
 	// Don't move this finger until the given timestamp is reached.
 	waitUntil(timestamp) {
 		if (this._movements.length) {
@@ -185,7 +179,7 @@ export default class Finger {
 	}
 
 
-	// 🖑method update(options?: {}): this
+	// 🖐️method update(options?: {}): this
 	// Updates some of the finger options, like pressure or touch angle,
 	// without disturbing its movement, after an optional delay.
 	update(options, delay) {
@@ -194,7 +188,7 @@ export default class Finger {
 	}
 
 
-	// 🖑method reset(options?: {}): this
+	// 🖐️method reset(options?: {}): this
 	// Clears all the queued movements for this finger and immediately lifts it up
 	reset(options) {
 		return this;
@@ -202,7 +196,7 @@ export default class Finger {
 
 
 
-	// 🖑method moveTo(x: Number, y: Number, delay: Number, options?: {}): this
+	// 🖐️method moveTo(x: Number, y: Number, delay: Number, options?: {}): this
 	// Queues moving this finger to an absolute position at `(x, y)`; the
 	// movement will last for `delay` milliseconds.
 	moveTo(x, y, delay) {
@@ -210,7 +204,7 @@ export default class Finger {
 	}
 
 
-	// 🖑method moveBy(x: Number, y: Number, delay: Number, options?: {}): this
+	// 🖐️method moveBy(x: Number, y: Number, delay: Number, options?: {}): this
 	// Queues a move of this finger to an position relative to its last position
 	// plus`(x, y)`; the movement will last for `delay` milliseconds.
 	moveBy(x, y, delay) {
@@ -270,7 +264,7 @@ export default class Finger {
 
 
 	// Returns the timestamp when the next movement will be finished
-	// 🖑method getNextMoveEndTime(): Number|undefined
+	// 🖐️method getNextMoveEndTime(): Number|undefined
 	getNextMoveEndTime() {
 		if (!this._movements.length) {
 			return undefined;
@@ -280,7 +274,7 @@ export default class Finger {
 
 
 	/*
-	 * 🖑method getEvents(timestamp?: Number, justOne: Boolean): []
+	 * 🖐️method getEvents(timestamp?: Number, justOne: Boolean): []
 	 * Updates the private properties of the finger (x, y, timestamp) by
 	 * running the next movement(s) as far as indicated by the timestamp (or
 	 * as fas as to `performance.now()`), then checks if the state has changed
@@ -403,7 +397,7 @@ export default class Finger {
 
 
 
-	// 🖑method private_asTouch(): Touch
+	// 🖐️method private_asTouch(): Touch
 	// Returns an instance of `Touch` representing the current state of the finger
 	// Note this is not an event - a `TouchEvent` must be created later, with several
 	// `Touch`es.
@@ -426,23 +420,7 @@ export default class Finger {
 			});
 		} else {
 
-			if (capabilities.chrome) {
-				touch = document.createTouch(
-					window,	// view
-					this._touchTargetWhenDowned,	// target
-					this._id,	// identifier
-					this._state.x,	// clientX
-					this._state.y,	// clientY
-					this._state.x,	// screenX
-					this._state.y,	// screenY
-
-					// Inconsistency: These break anything other than chrome:
-					25,	// radiusX
-					25,	// radiusY
-					0,	// rotationAngle
-					this._state.pressure	// force
-				);
-			} else if (capabilities.gecko) {
+			if (capabilities.gecko) {
 				touch = document.createTouch(
 					window,	// view
 					this._touchTargetWhenDowned,	// target
@@ -472,21 +450,21 @@ export default class Finger {
 		return touch;
 	}
 
-	// 🖑method private_asPointerEvent(): PointerEvent
+	// 🖐️method private_asPointerEvent(): PointerEvent
 	// Returns an instance of `PointerEvent` representing the current state of the finger
 	_asPointerEvent(evType) {
-		var ev = new PointerEvent('pointer' + evType, {
+		return new PointerEvent('pointer' + evType, {
 			bubbles: true,
 			button: 0,	// Moz doesn't use -1 when no buttons are pressed, WTF?
 // 			buttons: this._state.down ? 1 : 0,
-// 			detail: (evType === 'down' || evType === 'up') ? 1 : 0,	// TODO: count consecutive clicks
+//	 		detail: (evType === 'down' || evType === 'up') ? 1 : 0,	// TODO: count consecutive clicks
 			clientX: this._state.x,
 			clientY: this._state.y,
 			screenX: this._state.x,	/// TODO: Handle page scrolling
 			screenY: this._state.y,
 			pageX: this._state.x,
 			pageY: this._state.y,
-			pointerType: 'pen',
+			pointerType: this._state.pointerType,
 			pointerId: this._id,
 			isPrimary: this._id === 1,
 			width: this._state.width,
@@ -496,49 +474,24 @@ export default class Finger {
 			pressure: this._state.pressure
 // 			target: document.elementFromPoint(this._state.x, this._state.y),	// works with viewport coords
 		});
-		return ev;
 	}
 
-	// 🖑method private_asMouseEvent(evType: String): PointerEvent
+	// 🖐️method private_asMouseEvent(evType: String): PointerEvent
 	// Returns an instance of `PointerEvent` representing the current state of the finger
 	_asMouseEvent(evType) {
-		var ev;
-		if (capabilities.mouseEventConstructor) {
-			ev = new MouseEvent('mouse' + evType, {
-				bubbles: true,
-				button:  0,	// Moz doesn't use -1 when no buttons are pressed, WTF?
-				buttons: this._state.down ? 1 : 0,
-				detail:  (evType === 'down' || evType === 'up') ? 1 : 0,	// TODO: count consecutive clicks
-				clientX: this._state.x,
-				clientY: this._state.y,
-				screenX: this._state.x,	/// TODO: Handle page scrolling
-				screenY: this._state.y,
-				pageX:   this._state.x,
-				pageY:   this._state.y,
-	// 			target: document.elementFromPoint(this._state.x, this._state.y),	// works with viewport coords
-			});
-		} else {
-			// For legacy browsers and PhantomJS
-			ev = document.createEvent('MouseEvent');
-			ev.initMouseEvent(
-				'mouse' + evType,	// Type
-				true,	// canBubble
-				true,	// cancellable
-				window,	// view
-				0,	// detail
-				this._state.x,	// screenX
-				this._state.y,	// screenY
-				this._state.x,	// clientX
-				this._state.y,	// clientY
-				false,	// ctrlKey
-				false,	// altKey
-				false,	// shiftKey
-				false,	// metaKey
-				0,	// button
-				null	// relatedTarget
-			);
-		}
-		return ev;
+		return new MouseEvent('mouse' + evType, {
+			bubbles: true,
+			button:  0,	// Moz doesn't use -1 when no buttons are pressed, WTF?
+			buttons: this._state.down ? 1 : 0,
+			detail:  (evType === 'down' || evType === 'up') ? 1 : 0,	// TODO: count consecutive clicks
+			clientX: this._state.x,
+			clientY: this._state.y,
+			screenX: this._state.x,	/// TODO: Handle page scrolling
+			screenY: this._state.y,
+			pageX:   this._state.x,
+			pageY:   this._state.y,
+// 			target: document.elementFromPoint(this._state.x, this._state.y),	// works with viewport coords
+		});
 	}
 
 

package/{src → lib}/Hand.js

@@ -1,14 +1,20 @@
 
 import Finger from './Finger.js';
-import * as enums from './Enums.js';
 import * as capabilities from './Capabilities.js';
-import {} from './CustomEventPolyfill.js';
 
-// 🖑class Hand
+const TimingMode = {
+	Interval: 'INTERVAL',
+	Minimal: 'MINIMAL',
+	Instant: 'INSTANT',
+	Frame: 'FRAME',
+	FastFrame: 'FAST_FRAME'
+};
+
+// 🖐️class Hand
 // Represents a set of `Finger`s, capable of performing synthetic touch gestures
 
 /*
-🖑example
+🖐️example
 
 ```js
 var h = new Hand({ timing: '20ms' });
@@ -17,7 +23,7 @@ var h = new Hand({ timing: '20ms' });
 */
 export default class Hand {
 
-	// 🖑factory Hand(options?: Hand options): Hand
+	// 🖐️factory Hand(options?: Hand options): Hand
 	// Instantiates a new `Hand` with the given options.
 	constructor(options) {
 
@@ -32,71 +38,71 @@ export default class Hand {
 
 		/// TODO: Timing modes: minimal, interval, frames
 
-		// 🖑option timing: Timing= '20ms'
+		// 🖐️option timing: Timing= '20ms'
 		// Defines how often new events will be fired, in one of the possible
 		// timing modes
 
-		// 🖑miniclass Timing (Hand)
+		// 🖐️miniclass Timing (Hand)
 		this._timeInterval = 20;
-		this._timingMode = enums.INTERVAL;
+		this._timingMode = TimingMode.Interval;
 		this._framesPending = 0;
 		if (options.timing) {
 			var timing = options.timing.toString();
 
-			// 🖑option ms
+			// 🖐️option ms
 			// Preceded by a number (e.g. `'20ms'`), this mode triggers an event
 			// dispatch every that many milliseconds.
 			if (timing.match(/^\d+ms$/)) {
-				this._timingMode = enums.INTERVAL;
+				this._timingMode = TimingMode.Interval;;
 				this._timeInterval = parseInt(timing);
 			}
 
-			// 🖑option frame
+			// 🖐️option frame
 			// This mode dispatches an event every [animation frame](https://developer.mozilla.org/docs/Web/API/Window/requestAnimationFrame).
 			if (timing === 'frame') {
-				this._timingMode = enums.FRAME;
+				this._timingMode = TimingMode.Frame;
 				this._timeInterval = parseInt(timing);
 			}
 
-			// 🖑option minimal
+			// 🖐️option minimal
 			// This mode triggers an event dispatch per finger change, and ensures
 			// that every move can trigger its own event (no two movements will be
 			// rolled into one event if they are very close).
 			if (timing === 'minimal') {
-				this._timingMode = enums.MINIMAL;
+				this._timingMode = TimingMode.Minimal;
 				this._timeInterval = false;
 			}
 
-			// 🖑option instant
+			// 🖐️option instant
 			// Like the `minimal` mode, but ignores timings completely and dispatches
 			// all events instantaneously. This might cause misbehaviour in graphical
 			// browsers, and the `onStart` and `onStop` callbacks will be called at.
 			// every step of the movement (as the movement ends before the next step
 			// is chained in)
 			if (timing === 'instant') {
-				this._timingMode = enums.INSTANT;
+				this._timingMode = TimingMode.Instant;
 				this._timeInterval = false;
 			}
 
-			// 🖑option fastframe
+			// 🖐️option fastframe
 			// This mode ignores timings completely like the `instant` mode, and
 			// dispatches a new event every so many frames.
 			if (timing === 'fastframe') {
-				this._timingMode = enums.FASTFRAME;
+				this._timingMode = TimingMode.FastFrame;
 				this._timeInterval = parseInt(timing);
 			}
 		}
 		
-		// 🖑class Hand
+		// 🖐️class Hand
 
-		// 🖑option onStart: Function
+		// 🖐️option onStart: Function
 		// If set to a callback function, it will be called (with the `Hand` 
 		// as its only argument) whenever the movements start.
 		if (options.onStart) {
 			this._onStart = options.onStart;
 		}
 		
-		// 🖑option onStop: Function
+		// 🖐️option onStop: Function
 		// If set to a callback function, it will be called (with the `Hand` 
 		// as its only argument) whenever the movements are completed.
 		if (options.onStop) {
@@ -111,7 +117,7 @@ export default class Hand {
 	}
 
 
-	// 🖑method growFinger(eventMode, options): Finger
+	// 🖐️method growFinger(eventMode, options): Finger
 	// Creates a new `Finger` with the same parameters as the [`Finger` constructor](#finger-finger),
 	// and adds it to the hand.
 	growFinger(fingerMode, options) {
@@ -130,7 +136,7 @@ export default class Hand {
 
 
 
-	// 🖑method fingerIsBusy(): this
+	// 🖐️method fingerIsBusy(): this
 	// Used by this hand's fingers to signal that there are movements to be
 	// performed by at least one finger.
 	fingerIsBusy() {
@@ -138,10 +144,10 @@ export default class Hand {
 		/// TODO: Start up the event loop
 
 		if (this._fingersAreIdle) {
-			// 🖑section
+			// 🖐️section
 			// Use `document.addEventListener('prostheticHandStop', fn)` to
 			// do stuff with it.
-			// 🖑event prostheticHandStart: CustomEvent
+			// 🖐️event prostheticHandStart: CustomEvent
 			// Fired when all movements are complete.
 			document.dispatchEvent(new CustomEvent('prostheticHandStart', {target: this}));
 
@@ -156,32 +162,18 @@ export default class Hand {
 		return this;
 	}
 
-	// 🖑method fingerIsIdle(): this
+	// 🖐️method fingerIsIdle(): this
 	// Used by this hand's fingers to signal that one finger has finished doing
 	// all the queued movements.
 	fingerIsIdle() {
 
 		if (this._fingers.every( f => f.isIdle())) {
-
-			if (!this._fingersAreIdle) {
-				// 🖑event prostheticHandStop: CustomEvent
-				// Fired when all movements are complete.
-
-				document.dispatchEvent(new CustomEvent('prostheticHandStop', {target: this}));
-				
-
-				if (this._onStop && this._onStop instanceof Function) {
-					this._onStop(this);
-				}
-
-			}
-
 			this._fingersAreIdle = true;
 		}
 	}
 
 
-	// 🖑method sync(delay): this
+	// 🖐️method sync(delay): this
 	// Synchronizes the finger movements by adding a delay of **at least** `delay`
 	// milliseconds to each finger. After a sync, the movements of the fingers
 	// will happen at exactly the same time.
@@ -207,13 +199,13 @@ export default class Hand {
 
 
 
-	// 🖑method private_dispatchEvents(): this
+	// 🖐️method private_dispatchEvents(): this
 	// Updates all the fingers, fetching their events/touchpoints, and dispatches
 	// all `Event`s triggered by the update.
 	// This is meant to be called on an internal timer.
 	_dispatchEvents(timestamp) {
 
-		// 🖑event prostheticHandTick: CustomEvent
+		// 🖐️event prostheticHandTick: CustomEvent
 		// Fired a movement is about to start, just before the mouse/touch/pointer
 		// events are fired.
 		document.dispatchEvent(new CustomEvent('prostheticHandStart', {target: this}));
@@ -229,9 +221,9 @@ export default class Hand {
 		var hasTouchEnd = false;
 		var touchEndTarget = undefined;
 
-		var fast = this._timingMode === enums.MINIMAL ||
-		           this._timingMode === enums.INSTANT ||
-		           this._timingMode === enums.FASTFRAME;
+		var fast = this._timingMode === TimingMode.Minimal ||
+		           this._timingMode === TimingMode.Instant ||
+		           this._timingMode === TimingMode.FastFrame;
 
 		this._fingers.forEach(f=> {
 
@@ -453,7 +445,18 @@ export default class Hand {
 
 
 	_scheduleNextDispatch(){
-		if (!this._fingersAreIdle) {
+		if (this._fingersAreIdle) {
+			// 🖐️event prostheticHandStop: CustomEvent
+			// Fired when all movements are complete.
+
+			document.dispatchEvent(new CustomEvent('prostheticHandStop', {target: this}));
+				
+
+			if (this._onStop && this._onStop instanceof Function) {
+				this._onStop(this);
+			}
+
+		} else {
 
 			// Calculate time for next movement end. Could be refactored out for
 			// some timing modes.
@@ -469,19 +472,19 @@ export default class Hand {
 			});
 
 
-			if (this._timingMode === enums.INTERVAL) {
+			if (this._timingMode === TimingMode.Interval) {
 				this._nextDispatch = setTimeout(this._dispatchEvents.bind(this), this._timeInterval);
 
-			} else if (this._timingMode === enums.MINIMAL) {
+			} else if (this._timingMode === TimingMode.Minimal) {
 				this._nextDispatch = setTimeout(this._dispatchEvents.bind(this), min - performance.now());
 
-			} else if (this._timingMode === enums.INSTANT) {
+			} else if (this._timingMode === TimingMode.Instant) {
 				return this._dispatchEvents(min);
 
-			} else if (this._timingMode === enums.FRAME) {
+			} else if (this._timingMode === TimingMode.Frame) {
 				this._nextDispatch = requestAnimationFrame( this._dispatchEvents.bind(this) );
 
-			} else if (this._timingMode === enums.FASTFRAME) {
+			} else if (this._timingMode === TimingMode.FastFrame) {
 				this._nextDispatch = requestAnimationFrame( function() {
 					this._dispatchEvents(min);
 				}.bind(this));