@thi.ng/rstream-gestures NPM

npm downloads

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

About

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

Status

STABLE - used in production

Search or submit any issues for this package

Breaking changes

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

Related packages

@thi.ng/hdom - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors
@thi.ng/rdom - Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible

Installation

yarn add @thi.ng/rstream-gestures

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/rstream-gestures"></script>

Skypack documentation

For Node.js REPL:

# with flag only for < v16
node --experimental-repl-await

> const rstreamGestures = await import("@thi.ng/rstream-gestures");

Package sizes (gzipped, pre-treeshake): ESM: 1.19 KB

Dependencies

Usage examples

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

A selection:

Description	Live demo	Source
Canvas based dial widget	Demo	Source
Interactive visualization of closest points on ellipses	Demo	Source
Interactive inverse FFT toy synth	Demo	Source
Doodle w/ K-nearest neighbor search result visualization	Demo	Source
Mouse gesture / stroke analysis, simplification, corner detection	Demo	Source
Interactive pattern drawing demo using transducers	Demo	Source
Canvas based Immediate Mode GUI components	Demo	Source
Minimal IMGUI usage example	Demo	Source
Worker based, interactive Mandelbrot visualization	Demo	Source
Basic rstream-gestures multi-touch demo	Demo	Source
Minimal rstream dataflow graph	Demo	Source
Minimal shader graph developed during livestream #2	Demo	Source

API

Generated API docs

GestureType

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

move - movemove
start - mousedown / touchstart
drag - mousemove (whilst dragging) / touchmove
end - mouseup / touchend / touchcancel
zoom - wheel

GestureEvent

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": "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
}

GestureStreamOpts

See the GestureStreamOpts config options for further details.

Basic usage

import { 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 === "drag"),
        map((e) => e.active.map((g) => Math.hypot(...g.delta)))
    )
);

Authors

Maintainer

Karsten Schmidt (@postspectacular)

Contributors

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

If this project contributes to an academic publication, please cite it as:

@misc{thing-rstream-gestures,
  title = "@thi.ng/rstream-gestures",
  author = "Karsten Schmidt and others",
  note = "https://thi.ng/rstream-gestures",
  year = 2018
}

License

animation dataflow event interaction mouse mousewheel multitouch reactive rstream stream touch typescript

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

@everything-registry/sub-chunk-914 @jamieowen/browser @jamieowen/motion @jamieowen/three

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago