# touch-pinch

> minimal two-finger pinch gesture detection

Latest version **1.0.1** (published 2017-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install touch-pinch
pnpm add touch-pinch
yarn add touch-pinch
bun add touch-pinch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-02-21 |
| First published | 2015-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |
| Keywords | touch, pinch, detection, zoom, pan |

## Links

- npm: https://www.npmjs.com/package/touch-pinch
- Repository: https://github.com/Jam3/touch-pinch
- Issues: https://github.com/Jam3/touch-pinch/issues
- npm.io page: https://npm.io/package/touch-pinch

## Dependencies (4)

- [dprop](https://npm.io/package/dprop.md) ^1.0.0
- [events](https://npm.io/package/events.md) ^1.0.2
- [gl-vec2](https://npm.io/package/gl-vec2.md) ^1.0.0
- [mouse-event-offset](https://npm.io/package/mouse-event-offset.md) ^3.0.2

## Recent versions

- 1.0.1 (latest) — 2017-02-21
- 1.0.0 — 2015-09-29

## README

# touch-pinch

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

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

## Install

```sh
npm install touch-pinch --save
```

## Example

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

```js
var pinch = require('touch-pinch')

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

## Usage

[![NPM](https://nodei.co/npm/touch-pinch.png)](https://www.npmjs.com/package/touch-pinch)

#### `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:

```js
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:

```js
{
  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:

```js
[ 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](http://github.com/Jam3/touch-pinch/blob/master/LICENSE.md) for details.

---
_Source: https://npm.io/package/touch-pinch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._