implement touch events for mobile

Author: ChrLackner

webgpu/engine/input.js

@@ -17,22 +17,40 @@ class InputHandler {
     this._isRotating = false;
     this._isPanning = false;
 
+    // Multi-touch gesture state
+    this._activeTouches = new Map(); // id -> {x, y}
+    this._prevTouchDist = null;
+    this._prevTouchAngle = null;
+    this._prevTouchCentroid = null;
+
+    // Prevent browser scroll/zoom on the canvas
+    canvas.style.touchAction = 'none';
+
     // Bind handlers for clean removal
     this._onPointerDown = this._onPointerDown.bind(this);
     this._onPointerUp = this._onPointerUp.bind(this);
     this._onPointerMove = this._onPointerMove.bind(this);
     this._onWheel = this._onWheel.bind(this);
     this._onDblClick = this._onDblClick.bind(this);
     this._onContextMenu = (ev) => ev.preventDefault();
+    this._onTouchStart = this._onTouchStart.bind(this);
+    this._onTouchMove = this._onTouchMove.bind(this);
+    this._onTouchEnd = this._onTouchEnd.bind(this);
 
     canvas.addEventListener('pointerdown', this._onPointerDown);
     canvas.addEventListener('pointerup', this._onPointerUp);
     canvas.addEventListener('pointermove', this._onPointerMove);
     canvas.addEventListener('wheel', this._onWheel, { passive: false });
     canvas.addEventListener('dblclick', this._onDblClick);
     canvas.addEventListener('contextmenu', this._onContextMenu);
+    canvas.addEventListener('touchstart', this._onTouchStart, { passive: false });
+    canvas.addEventListener('touchmove', this._onTouchMove, { passive: false });
+    canvas.addEventListener('touchend', this._onTouchEnd);
+    canvas.addEventListener('touchcancel', this._onTouchEnd);
   }
 
+  // --- Pointer events (mouse & single touch fallback) ---
+
   _onPointerDown(ev) {
     ev.preventDefault();
     if (ev.button === 0 && !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
@@ -49,6 +67,9 @@ class InputHandler {
   }
 
   _onPointerMove(ev) {
+    // Suppress pointer-based rotation/pan while a multi-touch gesture is active
+    if (this._activeTouches.size >= 2) return;
+
     const t = this.camera.transform;
     if (this._isRotating) {
       t.rotate(0.3 * ev.movementY, 0.3 * ev.movementX);
@@ -82,6 +103,111 @@ class InputHandler {
     }
   }
 
+  // --- Multi-touch gesture handling ---
+
+  _onTouchStart(ev) {
+    ev.preventDefault();
+    for (const touch of ev.changedTouches) {
+      this._activeTouches.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
+    }
+    if (this._activeTouches.size >= 2) {
+      this._initGestureState();
+    }
+  }
+
+  _onTouchMove(ev) {
+    ev.preventDefault();
+    for (const touch of ev.changedTouches) {
+      if (this._activeTouches.has(touch.identifier)) {
+        this._activeTouches.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
+      }
+    }
+    if (this._activeTouches.size >= 2) {
+      this._handleMultiTouchGesture();
+    }
+  }
+
+  _onTouchEnd(ev) {
+    for (const touch of ev.changedTouches) {
+      this._activeTouches.delete(touch.identifier);
+    }
+    // Reset gesture state when fewer than 2 touches remain
+    if (this._activeTouches.size < 2) {
+      this._prevTouchDist = null;
+      this._prevTouchAngle = null;
+      this._prevTouchCentroid = null;
+    }
+  }
+
+  /** Compute initial distance, angle, and centroid for a two-finger gesture. */
+  _initGestureState() {
+    const [a, b] = this._getTwoTouches();
+    this._prevTouchDist = this._distance(a, b);
+    this._prevTouchAngle = this._angle(a, b);
+    this._prevTouchCentroid = this._centroid(a, b);
+  }
+
+  /** Process ongoing two-finger gesture: pinch-zoom, rotation, and pan. */
+  _handleMultiTouchGesture() {
+    const [a, b] = this._getTwoTouches();
+    const dist = this._distance(a, b);
+    const angle = this._angle(a, b);
+    const centroid = this._centroid(a, b);
+    const t = this.camera.transform;
+
+    // Pinch-to-zoom
+    if (this._prevTouchDist != null && this._prevTouchDist > 0) {
+      const scaleFactor = dist / this._prevTouchDist;
+      t.scale(scaleFactor, t._center);
+    }
+
+    // Two-finger rotation
+    if (this._prevTouchAngle != null) {
+      let angleDelta = angle - this._prevTouchAngle;
+      // Normalize to [-PI, PI]
+      if (angleDelta > Math.PI) angleDelta -= 2 * Math.PI;
+      if (angleDelta < -Math.PI) angleDelta += 2 * Math.PI;
+      const degrees = angleDelta * (180 / Math.PI);
+      t.rotate(0, degrees);
+    }
+
+    // Two-finger pan (centroid movement)
+    if (this._prevTouchCentroid != null) {
+      const dx = centroid.x - this._prevTouchCentroid.x;
+      const dy = centroid.y - this._prevTouchCentroid.y;
+      t.translate(0.01 * dx, -0.01 * dy);
+    }
+
+    this._prevTouchDist = dist;
+    this._prevTouchAngle = angle;
+    this._prevTouchCentroid = centroid;
+
+    this.camera._notify();
+    this.onRender();
+  }
+
+  /** Return the first two active touch positions. */
+  _getTwoTouches() {
+    const iter = this._activeTouches.values();
+    return [iter.next().value, iter.next().value];
+  }
+
+  _distance(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  _angle(a, b) {
+    return Math.atan2(b.y - a.y, b.x - a.x);
+  }
+
+  _centroid(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  }
+
+  // --- Cleanup ---
+
   dispose() {
     const c = this.canvas;
     c.removeEventListener('pointerdown', this._onPointerDown);
@@ -90,6 +216,10 @@ class InputHandler {
     c.removeEventListener('wheel', this._onWheel);
     c.removeEventListener('dblclick', this._onDblClick);
     c.removeEventListener('contextmenu', this._onContextMenu);
+    c.removeEventListener('touchstart', this._onTouchStart);
+    c.removeEventListener('touchmove', this._onTouchMove);
+    c.removeEventListener('touchend', this._onTouchEnd);
+    c.removeEventListener('touchcancel', this._onTouchEnd);
   }
 }