pinch

Recognize two-pointer pinch/rotate gestures on an element.


Package	`@vizejs/composable/pinch`
Own the source	`vize lib pull composable:pinch`
Runtime exports	`usePinch`
Gzip budget	2816 B

Usage

import { usePinch } from "@vizejs/composable/pinch";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`usePinch`	input	experimental	deterministic-fallback	stable	caller, reactive-scope	web, desktop	—	`resolveElement`, `tryOnScopeDispose`

API

`usePinch`

Recognize two-pointer pinch/rotate gestures on an element. Tracks active pointers with Pointer Events (touch, pen, or mouse chords). The first two pointers define the gesture; additional pointers are ignored. Pair it with touch-action: none on the element so the browser does not claim the gesture for zooming. Server renders expose scale 1, rotation 0, and isPinching: false.

function usePinch(target: MaybeElementTarget, options: UsePinchOptions = {}): PinchControls

Types

`PinchSnapshot`

Snapshot passed to pinch callbacks.

Member	Type	Description
`scale`	`number`	Scale relative to the start of the gesture (`1` = unchanged).
`rotation`	`number`	Rotation relative to the start of the gesture, in degrees.
`origin`	`Point`	Midpoint between the two pointers in client coordinates.
`distance`	`number`	Current distance between the two pointers.

`UsePinchOptions`

Options for usePinch.

Member	Type	Description
`onPinchStart`?	`(snapshot: PinchSnapshot) => void`	Called when a second pointer starts a pinch.
`onPinch`?	`(snapshot: PinchSnapshot) => void`	Called on every move while pinching.
`onPinchEnd`?	`(snapshot: PinchSnapshot) => void`	Called when one of the two pointers lifts.

`PinchControls`

Reactive gesture state returned by usePinch.

Member	Type	Description
`isPinching`	`Readonly<Ref<boolean>>`	Whether two pointers are currently pinching.
`scale`	`Readonly<Ref<number>>`	Scale relative to the gesture start; stays at the final value after the gesture.
`rotation`	`Readonly<Ref<number>>`	Rotation relative to the gesture start in degrees.
`initialDistance`	`Readonly<Ref<number>>`	Distance between the pointers when the gesture started.
`distance`	`Readonly<Ref<number>>`	Current distance between the pointers.
`origin`	`Readonly<Point>`	Midpoint between the pointers.
`reset`	`() => void`	Restore scale `1` and rotation `0`.
`stop`	`() => void`	Remove listeners. Idempotent.