@thi.ng/rstream-gestures

@thi.ng/rstream-gestures

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

About

Unified mouse, mouse wheel & single-touch event stream abstraction. Stream emits tuples of:

[type, {pos, click?, delta?, zoom}]

The click and delta values are only present if type == GestureType.DRAG. Both (and pos too) are 2-element arrays of [x,y] coordinates.

The zoom value is always present, but is only updated with wheel events. The value will be constrained to minZoom ... maxZoom interval (provided via options object).

Installation

yarn add @thi.ng/rstream-gestures

Dependencies

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

Usage examples

A small, fully commented project can be found in the /examples folder:

Source | Live version

Basic usage

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

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

// 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(
        map(([_, {zoom}]) => zoom),
        dedupe()
    )
);

// another subscription computing & logging drag gesture distance
gestures.subscribe(
    trace("distance"),
    comp(
        filter(([type]) => type === GestureType.DRAG),
        map(([_, {delta}]) => Math.hypot(...delta))
    )
);

Authors

• Karsten Schmidt

License

© 2018 Karsten Schmidt // Apache Software License 2.0