prosthetic-hand 2.1.0 → 2.1.1

package/lib/Finger.js

@@ -199,7 +199,7 @@ export default class Finger {
 	// 🖐️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) {
+	moveTo(x, y, delay=0) {
 		return this.moveBy(x - this._finalState.x, y - this._finalState.y, delay);
 	}
 
@@ -207,7 +207,7 @@ export default class Finger {
 	// 🖐️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) {
+	moveBy(x, y, delay=0) {
 		var fromX = this._finalState.x;
 		var fromY = this._finalState.y;
 
@@ -280,7 +280,7 @@ export default class Finger {
 	 * as fas as to `performance.now()`), then checks if the state has changed
 	 * and means an event should be fired.
 	 *
-	 * If `justOne` is set to truthy, then this will run just one movements.
+	 * If `justOne` is set to truthy, then this will run just one movement.
 	 * Otherwise, it will run as many movements as needed until `timestamp` is reached.
 	 *
 	 * Returns an array of objects of the form `{type: 'foo', event: MouseEvent(...), finger: Finger}`

package/lib/Hand.js

@@ -21,19 +21,22 @@ var h = new Hand({ timing: '20ms' });
 ```
 
 */
-export default class Hand {
+export default class Hand extends EventTarget {
+
+	#fingers = [];
+	#fingersAreIdle = true;
 
 	// 🖐️factory Hand(options?: Hand options): Hand
 	// Instantiates a new `Hand` with the given options.
 	constructor(options) {
-
+		super();
 		if (!options) {
 			options = {};
 		}
 
-		this._fingers = [];
+		this.#fingers = [];
 
-		this._fingersAreIdle = true;
+		this.#fingersAreIdle = true;
 		this._capturedTargets = new Map(),
 
 		/// TODO: Timing modes: minimal, interval, frames
@@ -99,18 +102,20 @@ export default class Hand {
 		// 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;
+			this.addEventListener('start', options.onStart);
+			// this._onStart = options.onStart;
 		}
 		
 		// 🖐️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) {
-			this._onStop = options.onStop;
+			this.addEventListener('stop', options.onStop);
+			// this._onStop = options.onStop;
 		}
 		
 
-		// Cancellable reference to the next call to `_dispatchEvents`. This
+		// Cancellable reference to the next call to `#dispatchEvents`. This
 		// might be either a `setTimeout` reference or a `requestAnimationFrame`
 		// reference.
 		this._nextDispatch = null;
@@ -129,7 +134,7 @@ export default class Hand {
 
 		var finger = new Finger(fingerMode, options);
 
-		this._fingers.push(finger);
+		this.#fingers.push(finger);
 		return finger;
 	}
 
@@ -143,19 +148,14 @@ export default class Hand {
 
 		/// TODO: Start up the event loop
 
-		if (this._fingersAreIdle) {
+		if (this.#fingersAreIdle) {
 			// 🖐️section
-			// Use `document.addEventListener('prostheticHandStop', fn)` to
-			// do stuff with it.
-			// 🖐️event prostheticHandStart: CustomEvent
+			// Use `hand.addEventListener('stop', fn)` to do stuff with it.
+			// 🖐️event start: CustomEvent
 			// Fired when all movements are complete.
-			document.dispatchEvent(new CustomEvent('prostheticHandStart', {target: this}));
+			this.dispatchEvent(new CustomEvent('start', {target: this}));
 
-			if (this._onStart && this._onStart instanceof Function) {
-				this._onStart(this);
-			}
-			
-			this._fingersAreIdle = false;
+			this.#fingersAreIdle = false;
 			this._scheduleNextDispatch();
 		}
 
@@ -166,9 +166,8 @@ export default class Hand {
 	// 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())) {
-			this._fingersAreIdle = true;
+		if (this.#fingers.every( f => f.isIdle())) {
+			this.#fingersAreIdle = true;
 		}
 	}
 
@@ -181,7 +180,7 @@ export default class Hand {
 
 		var endTimestamp = performance.now();
 
-		this._fingers.forEach( f =>  {
+		this.#fingers.forEach( f =>  {
 			var movesUntil = f._movesUntil;
 			if (movesUntil) {
 				endTimestamp = Math.max(endTimestamp, movesUntil);
@@ -190,25 +189,31 @@ export default class Hand {
 
 		var waitUntil = endTimestamp + delay;
 
-		this._fingers.forEach( f =>  {
+		this.#fingers.forEach( f =>  {
 			f.waitUntil(waitUntil);
 		});
 
 	}
 
 
+	// 🖐️method run(): Promise to this
+	// Returns a `Promise` that resolves when all fingers are idle.
+	async run() {
+		return new Promise((res)=>{this.addEventListener('stop', res)})
+	}
+
 
 
-	// 🖐️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) {
+	#dispatchEvents(timestamp) {
 
-		// 🖐️event prostheticHandTick: CustomEvent
+		// 🖐️event tick: CustomEvent
 		// Fired a movement is about to start, just before the mouse/touch/pointer
 		// events are fired.
-		document.dispatchEvent(new CustomEvent('prostheticHandStart', {target: this}));
+		this.dispatchEvent(new CustomEvent('tick', {target: this}));
 
 
 		var now = timestamp || performance.now();
@@ -225,7 +230,7 @@ export default class Hand {
 		           this._timingMode === TimingMode.Instant ||
 		           this._timingMode === TimingMode.FastFrame;
 
-		this._fingers.forEach(f=> {
+		this.#fingers.forEach(f=> {
 
 			var evs = f.getEvents(now, fast);
 
@@ -266,11 +271,15 @@ export default class Hand {
 				el = this._capturedTargets.get(ev.pointerId);
 			} else {
 				el = document.elementFromPoint(ev.clientX, ev.clientY);
-				this._hookProstheticCapture(el);
+				el && this._hookProstheticCapture(el);
 			}
-			el.dispatchEvent(ev);
-		});
 
+			if (el) {
+				el.dispatchEvent(ev);
+			} else {
+				console.warning('No target for prosthetic-hand event');
+			}
+		});
 
 		/// Build *ONE* `TouchEvent` with `TouchList`s built with
 		/// the fingers' touches.
@@ -452,11 +461,11 @@ export default class Hand {
 
 
 	_scheduleNextDispatch(){
-		if (this._fingersAreIdle) {
-			// 🖐️event prostheticHandStop: CustomEvent
+		if (this.#fingersAreIdle) {
+			// 🖐️event stop: CustomEvent
 			// Fired when all movements are complete.
 
-			document.dispatchEvent(new CustomEvent('prostheticHandStop', {target: this}));
+			this.dispatchEvent(new CustomEvent('stop', {target: this}));
 				
 
 			if (this._onStop && this._onStop instanceof Function) {
@@ -468,10 +477,10 @@ export default class Hand {
 			// Calculate time for next movement end. Could be refactored out for
 			// some timing modes.
 			var min = Infinity;
-			this._fingers.forEach(f=> {
+			this.#fingers.forEach(f=> {
 				if (!f.isIdle()) {
 					var next = f.getNextMoveEndTime();
-					// 						console.log('next:', next);
+					// console.log('next:', next);
 					if (next < min) {
 						min = next;
 					}
@@ -480,20 +489,20 @@ export default class Hand {
 
 
 			if (this._timingMode === TimingMode.Interval) {
-				this._nextDispatch = setTimeout(this._dispatchEvents.bind(this), this._timeInterval);
+				this._nextDispatch = setTimeout(this.#dispatchEvents.bind(this), this._timeInterval);
 
 			} else if (this._timingMode === TimingMode.Minimal) {
-				this._nextDispatch = setTimeout(this._dispatchEvents.bind(this), min - performance.now());
+				this._nextDispatch = setTimeout(this.#dispatchEvents.bind(this), min - performance.now());
 
 			} else if (this._timingMode === TimingMode.Instant) {
-				return this._dispatchEvents(min);
+				return this.#dispatchEvents(min);
 
 			} else if (this._timingMode === TimingMode.Frame) {
-				this._nextDispatch = requestAnimationFrame( this._dispatchEvents.bind(this) );
+				this._nextDispatch = requestAnimationFrame( this.#dispatchEvents.bind(this) );
 
 			} else if (this._timingMode === TimingMode.FastFrame) {
 				this._nextDispatch = requestAnimationFrame( function() {
-					this._dispatchEvents(min);
+					this.#dispatchEvents(min);
 				}.bind(this));
 
 			}
@@ -508,7 +517,7 @@ export default class Hand {
 		const releaseFn = el.releasePointerCapture;
 		el.setPointerCapture = ((id)=> {
 			if (id >= 1000) {
-				console.log('capture', id, el)
+				// console.log('capture', id, el)
 				this._capturedTargets.set(id, el);
 			} else
 				return captureFn.call(el, id);
@@ -516,7 +525,7 @@ export default class Hand {
 
 		el.releasePointerCapture = ((id)=> {
 			if (this._capturedTargets.get(id) === el) {
-				console.log('release', id, el)
+				// console.log('release', id, el)
 				this._capturedTargets.delete(id);
 			} else
 				return releaseFn.call(el, id);

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "prosthetic-hand",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Automate synthetic touch/pointer events",
   "exports": "./lib/Hand.js",
   "files": [