Cleanup panzoom implementation

src/routes/+page.svelte

@@ -1,29 +1,7 @@
 <script lang="ts">
 	import img from '$lib/assets/000a.jpg';
 	import Button from '$lib/components/Button.svelte';
-	import panzoom from 'panzoom';
-	import type { PanZoom } from 'panzoom';
-	import { writable } from 'svelte/store';
-
-	export const pz = writable<PanZoom | undefined>(undefined);
-
-	function initPanzoom(node: any) {
-		pz.set(
-			panzoom(node, {
-				bounds: false,
-				maxZoom: 10,
-				minZoom: 0.1,
-				zoomDoubleClickSpeed: 1,
-				enableTextSelection: true,
-				beforeMouseDown: (e) => {
-					const nodeName = (e.target as HTMLElement).nodeName;
-					return nodeName === 'P';
-				},
-				beforeWheel: (e) => e.altKey,
-				onTouch: (e) => e.touches.length > 1
-			})
-		);
-	}
+	import { pz, Panzoom } from '$lib/panzoom';
 
 	function test() {
 		$pz?.moveTo(0, 0);
@@ -33,8 +11,8 @@
 <div>
 	<Button variant="primary" on:click={test}>Click</Button>
 
-	<div id="container" use:initPanzoom>
+	<Panzoom>
 		<p draggable="false">my selectable tex</p>
 		<img draggable="false" src={img} alt="a" />
-	</div>
+	</Panzoom>
 </div>