diff --git a/src/events.ts b/src/events.ts index 1640044d..c8544016 100644 --- a/src/events.ts +++ b/src/events.ts @@ -31,3 +31,15 @@ export function onPointer( >(name as any, handler, eventOpts) }) } + +export function destroyPointer( + event: 'down' | 'move' | 'up', + elem: HTMLElement | SVGElement | Document, + handler: (event: PointerEvent) => void +) { + events[event].split(' ').forEach((name) => { + ;(elem as HTMLElement).removeEventListener< + 'pointerdown' | 'pointermove' | 'pointerup' | 'pointerleave' | 'pointercancel' + >(name as any, handler) + }) +} diff --git a/src/panzoom.ts b/src/panzoom.ts index a09fbdd5..669bbaa0 100644 --- a/src/panzoom.ts +++ b/src/panzoom.ts @@ -8,7 +8,7 @@ * */ import { getDimensions, setStyle, setTransform } from './css' -import { onPointer } from './events' +import { destroyPointer, onPointer } from './events' import isAttached from './isAttached' import isSVGElement from './isSVGElement' import { addPointer, getDistance, getMiddle, removePointer } from './pointers' @@ -407,7 +407,14 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz onPointer('up', document, handleUp, { passive: true }) } + function destroy() { + destroyPointer('down', elem, handleDown) + destroyPointer('move', document, move) + destroyPointer('up', document, handleUp) + } + return { + destroy, getPan: () => ({ x, y }), getScale: () => scale, getOptions: () => shallowClone(options), diff --git a/src/types.ts b/src/types.ts index cd4346f1..021097ee 100644 --- a/src/types.ts +++ b/src/types.ts @@ -122,6 +122,8 @@ export interface CurrentValues { } export interface PanzoomObject { + /** Remove all event listeners bind to the the Panzoom element */ + destroy: () => void /** Get the current x/y translation */ getPan: () => { x: number; y: number } /** Get the current scale */