@web-engine-dev/gesture

Advanced input gesture recognition for web-engine-dev.

Features

• Tap Detection: Single, double, multi-tap
• Swipe Recognition: Directional swipes with velocity
• Pinch/Zoom: Two-finger scale gestures
• Rotation: Two-finger rotation gestures
• Pan: Multi-finger dragging
• Custom Gestures: Define your own patterns

Installation

npm install @web-engine-dev/gesture
# or
pnpm add @web-engine-dev/gesture

Quick Start

import {
  GestureRecognizer,
  TapRecognizer,
  SwipeRecognizer,
  PinchRecognizer,
} from '@web-engine-dev/gesture';

// Create gesture recognizer
const gestures = new GestureRecognizer(canvas);

// Add recognizers
gestures.add(new TapRecognizer());
gestures.add(new SwipeRecognizer());
gestures.add(new PinchRecognizer());

// Listen for gestures
gestures.on('tap', (event) => {
  console.log('Tap at:', event.position);
});

gestures.on('swipe', (event) => {
  console.log('Swipe:', event.direction, event.velocity);
});

gestures.on('pinch', (event) => {
  console.log('Pinch scale:', event.scale);
});

API Overview

Tap Recognizer

const tap = new TapRecognizer({
  maxDuration: 300, // Max tap duration (ms)
  maxMovement: 10, // Max movement (px)
  tapTimeout: 300, // Double-tap window (ms)
});

gestures.on('tap', (e) => {
  console.log(e.tapCount); // 1, 2, 3...
  console.log(e.position);
});

Swipe Recognizer

const swipe = new SwipeRecognizer({
  minVelocity: 0.3, // Pixels per ms
  minDistance: 30, // Minimum swipe distance
});

gestures.on('swipe', (e) => {
  console.log(e.direction); // 'left', 'right', 'up', 'down'
  console.log(e.velocity);
  console.log(e.distance);
});

Pinch Recognizer

const pinch = new PinchRecognizer({
  minScale: 0.1, // Minimum scale change
});

gestures.on('pinchstart', (e) => console.log('Pinch started'));
gestures.on('pinchmove', (e) => {
  console.log('Scale:', e.scale); // Current scale
  console.log('Delta:', e.deltaScale); // Scale change
  console.log('Center:', e.center); // Pinch center
});
gestures.on('pinchend', (e) => console.log('Pinch ended'));

Pan Recognizer

const pan = new PanRecognizer({
  minFingers: 1,
  maxFingers: 2,
});

gestures.on('pan', (e) => {
  console.log('Delta:', e.delta);
  console.log('Position:', e.position);
});

Rotation Recognizer

const rotate = new RotationRecognizer();

gestures.on('rotate', (e) => {
  console.log('Rotation:', e.rotation); // Radians
  console.log('Delta:', e.deltaRotation);
});