Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@thi.ng/rstream-gestures

1.0.5 • Public • Published

@thi.ng/rstream-gestures

npm version npm downloads Twitter Follow

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).

Also see the GestureStreamOpts config options for further details.

Installation

yarn add @thi.ng/rstream-gestures

Dependencies

Usage examples

Several small, fully commented projects can be found in the /examples folder:

screenshot

Source | Live version

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

install

npm i @thi.ng/rstream-gestures

Downloadsweekly downloads

87

version

1.0.5

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability