npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

touch-pinch

v1.0.1

Published

minimal two-finger pinch gesture detection

Downloads

6,663

Readme

touch-pinch

experimental

A low-level utility for two-finger pinch and panning gestures.

Install

npm install touch-pinch --save

Example

The following example scales by the delta difference in a two-finger pinch gesture.

var pinch = require('touch-pinch')

var scale = 1
pinch(window)
  .on('change', function (dist, prev) {
    scale += (dist - prev)
  })

Usage

NPM

pinch = touchPinch([target])

Creates a new pinch emitter with the optional target element, which defaults to window.

events

pinch.on('start', fn)

Called when the pinch event begins; i.e. when two fingers are active on screen.

Called with fn(distance), which is the initial Euclidean distance between these two points.

pinch.on('change', fn)

Called when the pinch changes; i.e. one or both of the fingers in the pinch have moved.

Called with fn(distance, prevDistance), where distance is the new Euclidean distance, and prevDistance is the last recorded distance. Often, you will use this delta to compute a new scale:

scale += (distance - prevDistance)

pinch.on('end', fn)

Called when the pinch is finished; i.e. one or both of the active fingers have been lifted from the screen.

pinch.on('place', fn)

Called before the pinch has started, to indicate that a new finger has been placed on screen (with a maximum of two fingers).

Called with fn(newTouch, otherTouch), where newTouch is the new TouchEvent. otherTouch is the touch event that represents the other finger on screen, or undefined if none exists.

pinch.on('lift', fn)

Called before the pinch has ended, to indicate that a previoulsy pinching finger has been lifted.

Called with fn(removedTouch, otherTouch), where removedTouch is the TouchEvent that was removed from the screen. otherTouch is the touch event for the other finger on screen, or undefined if none exists.

members

pinch.pinching

A read-only boolean; true only if the user is currently pinching (two fingers on screen).

pinch.fingers

An array of two elements, which are initially both null (representing "no finger"). The elements are the two possible fingers in a pinch event.

When a finger is present on screen, the element in the array will contain:

{
  position: [x, y],  // the offset relative to target
  touch: TouchEvent  // the associated event
}

The order is maintained; so if you place a finger, then place a second, then remove the first finger, pinch.fingers will look like this:

[ null, { position, touch } ]

methods

pinch.indexOfTouch(touchEvent)

Returns the index of touchEvent within the pinch.fingers array. This can be used to determine

License

MIT, see LICENSE.md for details.