feat: add a destroy method (#404)

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)
+  })
+}

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),

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 */