This project is part of the @thi.ng/umbrella monorepo.

• About
  • Status
  • Breaking changes
• Installation
• Dependencies
• Usage examples
• API
  • GestureType
  • GestureEvent
  • GestureStreamOpts
  • Basic usage
• Authors
  • Maintainer
  • Contributors
• License

Unified mouse, mouse wheel & multi-touch event stream abstraction. This is a support package for @thi.ng/rstream.

STABLE - used in production

Multi-touch support has been added in v2.0.0, resulting in a complete rewrite of gestureStream() and new event data formats.

yarn add @thi.ng/rstream-gestures

Package sizes (gzipped): ESM: 1.2KB / CJS: 1.2KB / UMD: 1.3KB

• @thi.ng/api
• @thi.ng/checks
• @thi.ng/math
• @thi.ng/rstream
• @thi.ng/transducers

Several demos in this repo's /examples directory are using this package.

A selection:

Canvas based dial widget

Live demo | Source

Live demo | Source

Mouse gesture / stroke analysis, simplification, corner detection

Live demo | Source

Interactive @thi.ng/hdom-canvas pattern drawing demo using transducers

Live demo | Source

Canvas based Immediate Mode GUI components

Live demo | Source

Worker based, interactive Mandelbrot visualization

Live demo | Source

Basic @thi.ng/rstream-gestures multi-touch demo

Live demo | Source

Generated API docs

All native events are abstracted into one of the following event types:

• START - mousedown / touchstart
• MOVE - movemove
• DRAG - mousemove (whilst dragging) / touchmove
• END - mouseup / touchend / touchcancel
• ZOOM - wheel

The stream emits GestureEvent objects of:

• type - Current translated/abstracted event type (GestureType)
• event - Original DOM event
• pos - Event position (transformed as per GestureStreamOpts)
• active - Active cursors (i.e. ongoing drag / touch gestures)
• buttons - Mouse button bitmask (same as in standard MouseEvent), or, if isTouch is true, number of active touches.
• zoom - Current zoom factor (as per GestureStreamOpts config)
• zoomDelta - Last WheelEvent's transformed deltaY, wheelDeltaY
• isTouch - True, if original event was a TouchEvent

// example mouse gesture event
{
  "type": 2, // GestureType.DRAG
  "event": MouseEvent,
  "pos": [254, 169],
  "active": [
    {
      "id": 0, // always 0 for mouse gestures
      "start": [443, 37],
      "pos": [254, 169],
      "delta": [-189, 132]
    }
  ],
  "buttons": 2, // right button pressed
  "zoom": 1,
  "zoomDelta": 0,
  "isTouch": false
}

See the GestureStreamOpts config options for further details.

import { GestureType, gestureStream } from "@thi.ng/rstream-gestures";
import { trace } from "@thi.ng/rstream";
import { comp, dedupe, filter, map, pluck } from "@thi.ng/transducers";

// create event stream with custom options
const gestures = gestureStream(document.body, { smooth: 0.01 });

// subscription logging zoom value changes
gestures.subscribe(
    // trace is simply logging received values to console
    trace("zoom"),
    // composed transducer, `dedupe` ensures only changed values are received
    comp(pluck("zoom"), dedupe())
);

// another subscription computing & logging drag gesture distance(s)
gestures.subscribe(
    trace("distance"),
    comp(
        filter((e) => e.type === GestureType.DRAG),
        map((e) => e.active.map((g) => Math.hypot(...g.delta)))
    )
);

• Karsten Schmidt (@postspectacular)

• Arthur Carabott (@acarabott)
• Matei Adriel (@Mateiadrielrafael)

© 2018 - 2020 Karsten Schmidt // Apache Software License 2.0