@woosh/meep-engine 2.109.26 → 2.110.0

package/src/engine/input/devices/touch/TouchDevice.js

@@ -0,0 +1,95 @@
+import Signal from "../../../../core/events/signal/Signal.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { getTouchCenter } from "./getTouchCenter.js";
+import { observePinch } from "./observePinch.js";
+
+export class TouchDevice{
+
+    /**
+     * Current live position of the pointer
+     * @readonly
+     * @type {Vector2}
+     */
+    position = new Vector2();
+
+    /**
+     * @readonly
+     * @type {Vector2}
+     */
+    #anchor_touch_last = new Vector2();
+
+    #globalUp = new Signal();
+
+
+    #touchStart = new Signal();
+    #touchEnd = new Signal();
+    #touchMove = new Signal();
+
+    /**
+     * @readonly
+     */
+    on = {
+        pinch: new Signal(),
+        pinchStart: new Signal(),
+        pinchEnd: new Signal(),
+    };
+
+    constructor() {
+        observePinch({
+            touchStart: this.#touchStart,
+            touchEnd: this.#touchEnd,
+            touchMove: this.#touchMove,
+            pinch: this.on.pinch,
+            pinchStart: this.on.pinchStart,
+            pinchEnd: this.on.pinchEnd,
+            device: this
+        });
+    }
+
+    /**
+     *
+     * @param {TouchEvent} event
+     */
+    #eventHandlerGlobalTouchEnd = (event) => {
+        getTouchCenter(event.touches, this.position);
+        this.#globalUp.send2(this.position, event);
+    }
+
+    /**
+     *
+     * @param {TouchEvent} event
+     */
+    #eventHandlerTouchEnd = (event) => {
+        getTouchCenter(event.touches, this.position);
+        this.#touchEnd.send2(this.position, event);
+    }
+
+    /**
+     *
+     * @param {TouchEvent} event
+     */
+    #eventHandlerTouchMove = (event) => {
+        event.preventDefault();
+
+        getTouchCenter(event.touches, this.position);
+
+        const delta = new Vector2();
+
+        delta.subVectors(this.position, this.#anchor_touch_last);
+
+        this.#touchMove.send3(this.position, event, delta);
+
+        this.#anchor_touch_last.copy(this.position);
+    }
+
+    /**
+     *
+     * @param {TouchEvent} event
+     */
+    #eventHandlerTouchStart = (event) => {
+        getTouchCenter(event.touches, this.position);
+        this.#touchStart.send2(this.position, event);
+
+        this.#anchor_touch_last.copy(this.position);
+    }
+}

package/src/engine/input/devices/touch/getTouchCenter.d.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param {TouchList} touchList
+ * @param {Vector2} result
+ */
+export function getTouchCenter(touchList: TouchList, result: Vector2): void;
+//# sourceMappingURL=getTouchCenter.d.ts.map

package/src/engine/input/devices/touch/getTouchCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTouchCenter.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/input/devices/touch/getTouchCenter.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0CAHW,SAAS,yBA6BnB"}

package/src/engine/input/devices/touch/getTouchCenter.js

@@ -0,0 +1,32 @@
+/**
+ *
+ * @param {TouchList} touchList
+ * @param {Vector2} result
+ */
+export function getTouchCenter(touchList, result) {
+    const length = touchList.length;
+
+    let x = 0, y = 0;
+
+    if (length > 0) {
+
+        for (let i = 0; i < length; i++) {
+            const touch = touchList.item(i);
+
+            if (touch === null) {
+                continue;
+            }
+
+            x += touch.clientX;
+            y += touch.clientY;
+        }
+
+        // average to get center
+        x /= length;
+        y /= length;
+
+    }
+
+    result.set(x, y);
+
+}

package/src/engine/input/devices/touch/observePinch.d.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {Signal} touchStart
+ * @param {Signal} touchEnd
+ * @param {Signal} touchMove
+ * @param {Signal} pinch
+ * @param {Signal} pinchStart
+ * @param {Signal} pinchEnd
+ * @param {PointerDevice} device
+ */
+export function observePinch({ touchStart, touchEnd, touchMove, pinch, pinchStart, pinchEnd, device }: Signal): void;
+//# sourceMappingURL=observePinch.d.ts.map

package/src/engine/input/devices/touch/observePinch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observePinch.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/input/devices/touch/observePinch.js"],"names":[],"mappings":"AAgBA;;;;;;;;;GASG;AACH,qHAqGC"}

package/src/engine/input/devices/touch/observePinch.js

@@ -0,0 +1,128 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { getTouchCenter } from "./getTouchCenter.js";
+
+/**
+ *
+ * @param {TouchList} touchList
+ * @param {function(Touch,number)} callback
+ */
+function forEachTouch(touchList, callback) {
+    const length = touchList.length;
+    for (let i = 0; i < length; i++) {
+        const touch = touchList.item(i);
+        callback(touch, i);
+    }
+}
+
+/**
+ *
+ * @param {Signal} touchStart
+ * @param {Signal} touchEnd
+ * @param {Signal} touchMove
+ * @param {Signal} pinch
+ * @param {Signal} pinchStart
+ * @param {Signal} pinchEnd
+ * @param {PointerDevice} device
+ */
+export function observePinch({
+                          touchStart,
+                          touchEnd,
+                          touchMove,
+                          pinch,
+                          pinchStart,
+                          pinchEnd,
+                          device
+                      }) {
+    const center = new Vector2();
+
+    const v2 = new Vector2();
+
+    const pinchBox0 = new Vector2();
+    const pinchBox1 = new Vector2();
+
+    let pinchActive = false;
+    let touchCount = 0;
+
+
+    /**
+     *
+     * @param {TouchList} touchList
+     * @param {Vector2} pinchDimensions
+     */
+    function computeTouchRadius(touchList, pinchDimensions) {
+        getTouchCenter(touchList, center);
+
+        const length = touchList.length;
+
+        pinchDimensions.set(0, 0);
+
+        for (let i = 0; i < length; i++) {
+            const touch = touchList.item(i);
+
+            device.readPointerPositionFromEvent(v2, touch);
+
+            v2.sub(center);
+            v2.abs();
+
+            pinchDimensions.add(v2);
+        }
+
+        return pinchDimensions.multiplyScalar(1 / length);
+    }
+
+    function touchRemoved(touch, event) {
+        touchCount--;
+        if (touchCount < 2 && pinchActive) {
+            handlePinchEnd(event);
+        }
+    }
+
+    function touchAdded(touch, event) {
+        touchCount++;
+        if (touchCount > 1 && !pinchActive) {
+            handlePinchStart(event);
+        }
+    }
+
+    function handlePinchStart(event) {
+        pinchActive = true;
+
+        computeTouchRadius(event.touches, pinchBox0);
+
+        touchMove.add(handleMove);
+
+        pinchStart.send1(pinchBox0);
+    }
+
+    /**
+     *
+     * @param {TouchEvent} event
+     */
+    function handlePinchEnd(event) {
+        pinchActive = false;
+
+        touchMove.remove(handleMove);
+
+        pinchEnd.send0();
+    }
+
+    function handleDown(position, event) {
+        forEachTouch(event.changedTouches, function (touch) {
+            touchAdded(touch, event);
+        });
+    }
+
+    function handleUp(position, event) {
+        forEachTouch(event.changedTouches, function (touch) {
+            touchRemoved(touch, event);
+        });
+    }
+
+    function handleMove(position, event) {
+        computeTouchRadius(event.touches, pinchBox1);
+        pinch.send2(pinchBox1, pinchBox0);
+    }
+
+    touchEnd.add(handleUp);
+    touchStart.add(handleDown);
+}