Skip to content

Latest commit

 

History

History

rstream-gestures

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@thi.ng/rstream-gestures

npm (scoped)

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

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