This repository has been archived on 2023-03-25. You can view files and clone it, but cannot push or open issues or pull requests.
mightyscape-1.1-deprecated/extensions/fablabchemnitz/papercraft/openjscad/node_modules/most-gestures/README.md

4.1 KiB

most-gestures

GitHub version experimental Build Status Dependency Status devDependency Status

unified desktop/mobile high level pointer gestures, using most.js

This is a set of pointer gesture helpers, unifying pointer apis accross browsers & mobile/desktop works (and manually tested ) in :

  • Chrome (desktop & mobile, MacOS & Android)
  • Firefox
  • Safari (desktop & mobile , MacOs & IOS)
  • Ios & Android web views

It

  • is coded in es6
  • uses most.js observables
  • provides relatively high level tools : ie taps, zooms , drags

Table of Contents

Installation

npm install most-gestures

Usage

import {pointerGestures} from 'most-gestures'

const element = document.getElementById("foo")
const gestures = pointerGestures(element)

//or alternatively
const element = document.getElementById("foo")
const baseInteractions = baseInteractionsFromEvents(element)
const gestures = pointerGestures(baseInteractions)

//now you can use:
/*gestures.taps : tap/click once & release quickly
gestures.drags: press, keep pressed & move around
zooms: mouse wheel & pinch zoom alike
pointerMoves: simple moves
*/

//each one of those is an observable , so to react on taps you can do:
gestures.taps.forEach(function(e){
  console.log('tapped',e)
  })

API

the module exposes two main functions:

baseInteractionsFromEvents(element)

this creates an object containing the low level streams (mouseDowns$, mouseUps$ etc) from a DOM element, you usually don't want to use this directly, use the following function instead.

pointerGestures(baseInteractionsOrElement, options)

you can either pass in a reference to a dom element or the output from baseInteractionsFromEvents(element)

what you are likely interested in, is pointerGestures:

  • gestures.presses (used as a basis for the two below)
  • gestures.taps : quick press/tap & release
  • gestures.holds : press/tap for a long time (defined by the longPressDelay)& release
  • gestures.drags : press & move before releasing
  • gestures.zooms : pinch , scrollwheel etc

they are all observables , so the power is yours !

options allows you to refine the gestures by modifying the following parameters:

  • multiTapDelay: time in ms between multiple taps
  • longPressDelay (default: 250) : time in ms after which a HOLD is emitted
  • maxStaticDeltaSqr (default: 100): maximum delta (in pixels squared) above which we consider a pointer to have moved
  • zoomMultiplier: (default: 200): zoomFactor for normalized interactions across browsers
  • pinchThreshold: (default: 4000) The minimum amount in pixels squared the inputs must move until it is fired.
  • pixelRatio : (default: window.pixelRatio if available)

examples :

gestures.drags.forEach(function(e){
  console.log('dragged',e)
  })

custom gestures:

you can also easily define your custom gestures, based on the existing ones: using map, filter etc on the observables

const singleTaps$ = taps$.filter(x => x.nb === 1).map(e => e.list).map(e => e[0])
const doubleTaps$ = taps$.filter(x => x.nb === 2).map(e => e.list).map(e => e[0])

Contribute

PRs accepted.

Small note: If editing the Readme, please conform to the standard-readme specification.

License

The MIT License (MIT) (unless specified otherwise)