This project is part of the @thi.ng/umbrella monorepo.
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).
yarn add @thi.ng/rstream-gestures
A small, fully commented project can be found in the /examples
folder:
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))
)
);
- Karsten Schmidt
© 2018 Karsten Schmidt // Apache Software License 2.0