Add PanZoom

package.json

@@ -73,7 +73,8 @@
 		"monaco-editor": "0.34.0",
 		"monaco-mermaid": "1.0.6",
 		"pako": "2.0.4",
-		"random-word-slugs": "0.1.6"
+		"random-word-slugs": "0.1.6",
+		"svg-pan-zoom": "^3.6.1"
 	},
 	"lint-staged": {
 		"*.{ts,svelte,js,css,md,json}": [

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 () => {

yarn.lock

@@ -4807,6 +4807,11 @@ svelte@3.49.0:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
   integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
 
+svg-pan-zoom@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz#f880a1bb32d18e9c625d7715350bebc269b450cf"
+  integrity sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g==
+
 svgo@^2.7.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"