Add PanZoom

src/lib/components/view.svelte

@@ -2,6 +2,7 @@
 	import { inputStateStore, stateStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
 	import mermaid from 'mermaid';
+	import panzoom from 'svg-pan-zoom';
 
 	let code = '';
 	let config = '';
@@ -9,7 +10,11 @@
 	let view: HTMLDivElement;
 	let error = false;
 	let outOfSync = false;
+	let hide = false;
 	let manualUpdate = true;
+	let pan: SvgPanZoom.Point;
+	let zoom: number;
+	let pzoom: SvgPanZoom.Instance;
 	onMount(() => {
 		stateStore.subscribe((state) => {
 			if (state.error !== undefined) {
@@ -35,8 +40,31 @@
 					mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
 					mermaid.render('graph-div', code, (svgCode) => {
 						if (svgCode.length > 0) {
-							console.log(svgCode);
+							let oldPan = pan ? { ...pan } : undefined;
+							let oldZoom = zoom;
+							pzoom?.destroy();
+							hide = true;
 							container.innerHTML = svgCode;
+							setTimeout(() => {
+								pzoom = panzoom('#graph-div', {
+									onPan: (p) => {
+										pan = p;
+										zoom = pzoom.getZoom();
+									},
+									onZoom: (z) => {
+										zoom = z;
+										pan = pzoom.getPan();
+									},
+									zoomEnabled: true,
+									panEnabled: true,
+									controlIconsEnabled: true
+								});
+								if (oldPan !== undefined && oldZoom !== undefined) {
+									pzoom.zoom(oldZoom);
+									pzoom.pan(oldPan);
+								}
+								hide = false;
+							}, 0);
 						}
 					});
 					view.parentElement.scrollTop = scroll;
@@ -59,7 +87,7 @@
 {/if}
 
 <div id="view" bind:this={view} class="p-2" class:error class:outOfSync>
-	<div id="container" bind:this={container} class="flex-1 overflow-auto" />
+	<div id="container" bind:this={container} class="flex-1 overflow-auto" class:hide />
 </div>
 
 <style>
@@ -70,4 +98,8 @@
 	.outOfSync {
 		opacity: 0.5;
 	}
+
+	.hide {
+		opacity: 0;
+	}
 </style>

src/routes/edit.svelte

@@ -64,13 +64,6 @@
 	let docURL = docURLBase;
 	let language: Languages = 'mermaid';
 	$: language = languageMap[selectedMode];
-	$: {
-		if (selectedMode === 'code') {
-			text = $stateStore.code;
-		} else {
-			text = $stateStore.mermaid;
-		}
-	}
 
 	stateStore.subscribe((state: State) => {
 		if (state.updateEditor) {
@@ -100,15 +93,19 @@
 		}
 	];
 
+	let debounce: { [key: string]: any } = {};
 	const updateHandler = (message: CustomEvent<EditorUpdateEvent>) => {
-		const code = message.detail.text;
-		if (selectedMode === 'code') {
-			updateCode(code, {
-				updateEditor: false
-			});
-		} else {
-			updateConfig(code, false);
-		}
+		clearTimeout(debounce[selectedMode]);
+		debounce[selectedMode] = setTimeout(() => {
+			const code = message.detail.text;
+			if (selectedMode === 'code') {
+				updateCode(code, {
+					updateEditor: false
+				});
+			} else {
+				updateConfig(code, false);
+			}
+		}, 300);
 	};
 
 	onMount(async () => {