usePanZoomGestures

Binds wheel-to-zoom, drag-to-pan and double-click-to-reset to an element for as long as it is mounted and enabled.

@internote/canvas-sdk/reactHook
On this page
import { usePanZoomGestures } from '@internote/canvas-sdk/react';

The wheel listener is passive-false so the page does not scroll under the gesture, a drag keeps pointer capture so it survives leaving the element, and moves are coalesced to one commit a frame. The listeners are bound once and read the latest options through a ref, so the options object may be rebuilt every render; only enabled re-binds.

#Signature

<V>(ref: React.RefObject<HTMLElement | null>, options: PanZoomOptions<V>): void

#Parameters

ref
The element to bind to, usually the surface's SVG.
options
The environment's own view arithmetic.

Declared in packages/canvas-sdk/src/react/use-pan-zoom-gestures.ts:106.

Last updated