enh: svg zoom pan

src/lib/components/common/SVGPanZoom.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import panzoom from 'panzoom';
+
+	import DOMPurify from 'dompurify';
+
+	export let className = '';
+	export let svg = '';
+
+	let instance;
+
+	let sceneParentElement: HTMLElement;
+	let sceneElement: HTMLElement;
+
+	$: if (sceneElement) {
+		instance = panzoom(sceneElement, {
+			bounds: true,
+			boundsPadding: 0.1,
+
+			zoomSpeed: 0.065
+		});
+	}
+</script>
+
+<div bind:this={sceneParentElement} class={className}>
+	<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
+		{@html svg}
+	</div>
+</div>