prosthetic-hand 2.0.0 → 2.1.1

package/README.md

@@ -15,7 +15,7 @@ npm install prosthetic-hand
 import Hand from 'prosthetic-hand';
 
 const hand = new Hand();
-const finger = h.growFinger('pointer', { pointerType: 'touch', pressure: 0.9 });
+const finger = hand.growFinger('pointer', { pointerType: 'touch', pressure: 0.9 });
 
 finger
   .wait(500)

package/lib/Finger.js

@@ -6,7 +6,7 @@ import * as capabilities from './Capabilities.js';
 // Self-incrementing identifier for touch ID and pointer ID.
 // Fingers can either keep the same ID for their life, or request a new
 //   ID whenever they go down.
-var fingerIdSequence = 1;
+var fingerIdSequence = 1000;
 
 // 🖐️class Finger
 // Represents a finger, capable of performing single touch/pointer/mouse synthetic
@@ -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}`
@@ -334,7 +334,10 @@ export default class Finger {
 
 			if (previousState.x !== this._state.x || previousState.y !== this._state.y) {
 				evType = 'move'
-				this._currentTarget = document.elementFromPoint(this._state.x, this._state.y);
+
+				this._currentTarget =
+					this._hand._capturedTargets.get(this._id) ??
+					document.elementFromPoint(this._state.x, this._state.y);
 			}
 			/// TODO: Detect over/out events when the event target changes.
 
@@ -345,7 +348,9 @@ export default class Finger {
 				// TODO: Optionally reset the finger ID and grab a fresh one
 
 				this._graphic.style.display = 'block';
-				this._touchTargetWhenDowned = this._currentTarget = document.elementFromPoint(this._state.x, this._state.y);
+				this._touchTargetWhenDowned = this._currentTarget =
+					this._hand._capturedTargets.get(this._id) ??
+					document.elementFromPoint(this._state.x, this._state.y);
 				evType = 'down';
 			}
 

package/lib/Hand.js

@@ -3,11 +3,11 @@ import Finger from './Finger.js';
 import * as capabilities from './Capabilities.js';
 
 const TimingMode = {
-	Interval: 'INTERVAL',
-	Minimal: 'MINIMAL',
-	Instant: 'INSTANT',
-	Frame: 'FRAME',
-	FastFrame: 'FAST_FRAME'
+	Interval: Symbol('INTERVAL'),
+	Minimal: Symbol('MINIMAL'),
+	Instant: Symbol('INSTANT'),
+	Frame: Symbol('FRAME'),
+	FastFrame: Symbol('FAST_FRAME')
 };
 
 // 🖐️class Hand
@@ -21,20 +21,23 @@ 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._fingersAreIdle = true;
+		this.#fingers = [];
 
+		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);
 
@@ -261,9 +266,20 @@ export default class Hand {
 		// Fire all `MouseEvent`s and `PointerEvent`s
 		events.forEach( ev => {
 // 			console.log('Dispatching: ', ev.type);
-			document.elementFromPoint(ev.clientX, ev.clientY).dispatchEvent(ev);
-		});
+			let el;
+			if (this._capturedTargets.has(ev.pointerId)) {
+				el = this._capturedTargets.get(ev.pointerId);
+			} else {
+				el = document.elementFromPoint(ev.clientX, ev.clientY);
+				el && this._hookProstheticCapture(el);
+			}
 
+			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.
@@ -445,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) {
@@ -461,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;
 					}
@@ -473,28 +489,52 @@ 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));
 
 			}
 		}
 	}
 
-}
+
+	_hookProstheticCapture(el) {
+		if (el.__prostheticPointerCapture) { return; }
+
+		const captureFn = el.setPointerCapture;
+		const releaseFn = el.releasePointerCapture;
+		el.setPointerCapture = ((id)=> {
+			if (id >= 1000) {
+				// console.log('capture', id, el)
+				this._capturedTargets.set(id, el);
+			} else
+				return captureFn.call(el, id);
+		} );
+
+		el.releasePointerCapture = ((id)=> {
+			if (this._capturedTargets.get(id) === el) {
+				// console.log('release', id, el)
+				this._capturedTargets.delete(id);
+			} else
+				return releaseFn.call(el, id);
+		} );
+
+		el.__prostheticPointerCapture = true;
+	}
 
 
+}
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "prosthetic-hand",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Automate synthetic touch/pointer events",
   "exports": "./lib/Hand.js",
   "files": [
@@ -13,7 +13,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/IvanSanchez/prosthetic-hand.git"
+    "url": "https://github.com/Leaflet/prosthetic-hand/.git"
   },
   "author": "Iván Sánchez Ortega <ivan@sanchezortega.es>",
   "license": "Beerware",