diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte index 950f65e0..f643d3e1 100644 --- a/src/lib/components/view.svelte +++ b/src/lib/components/view.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import mermaid from 'mermaid'; import panzoom from 'svg-pan-zoom'; + import type { State } from '$lib/types'; let code = ''; let config = ''; @@ -25,6 +26,31 @@ }, 200); }; + const handlePanZoom = (state: State) => { + if (!state.panZoom) { + return; + } + hide = true; + pzoom?.destroy(); + pzoom = undefined; + Promise.resolve().then(() => { + const graphDiv = document.getElementById('graph-div'); + pzoom = panzoom(graphDiv, { + onPan: handlePanZoomChange, + onZoom: handlePanZoomChange, + controlIconsEnabled: true, + fit: true, + center: true + }); + const { pan, zoom } = state; + if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) { + pzoom.zoom(zoom); + pzoom.pan(pan); + } + hide = false; + }); + }; + onMount(() => { stateStore.subscribe((state) => { if (state.error !== undefined) { @@ -51,27 +77,7 @@ mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid))); mermaid.render('graph-div', code, (svgCode) => { if (svgCode.length > 0) { - if (state.panZoom) { - hide = true; - pzoom?.destroy(); - pzoom = undefined; - Promise.resolve().then(() => { - const graphDiv = document.getElementById('graph-div'); - pzoom = panzoom(graphDiv, { - onPan: handlePanZoomChange, - onZoom: handlePanZoomChange, - controlIconsEnabled: true, - fit: true, - center: true - }); - const { pan, zoom } = state; - if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) { - pzoom.zoom(zoom); - pzoom.pan(pan); - } - hide = false; - }); - } + handlePanZoom(state); container.innerHTML = svgCode; const graphDiv = document.getElementById('graph-div'); graphDiv.setAttribute('height', '100%');