From a713f34354979eccf6fb4eb53b038b3d7fda111a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 15 Aug 2022 11:33:20 +0530 Subject: [PATCH 001/174] Add toggle for pan & zoom --- src/lib/components/view.svelte | 55 ++++++++++++++------------- src/lib/types.d.ts | 1 + src/routes/edit.svelte | 69 +++++++++++++++++++--------------- 3 files changed, 68 insertions(+), 57 deletions(-) diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte index 01ca38ad..950f65e0 100644 --- a/src/lib/components/view.svelte +++ b/src/lib/components/view.svelte @@ -12,6 +12,7 @@ let outOfSync = false; let hide = false; let manualUpdate = true; + let panZoomEnabled = $stateStore.panZoom; let pzoom: SvgPanZoom.Instance; let debounce: number; @@ -38,39 +39,43 @@ } outOfSync = false; manualUpdate = true; - if (code === state.code && config === state.mermaid) { - // Do not render if there is no change in Code/Config + if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) { + // Do not render if there is no change in Code/Config/PanZoom return; } code = state.code; config = state.mermaid; + panZoomEnabled = state.panZoom; const scroll = view.parentElement.scrollTop; delete container.dataset.processed; mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid))); mermaid.render('graph-div', code, (svgCode) => { if (svgCode.length > 0) { - pzoom?.destroy(); - pzoom = undefined; - hide = true; - container.innerHTML = svgCode; - Promise.resolve().then(() => { - const graphDiv = document.getElementById('graph-div'); - graphDiv.setAttribute('height', '100%'); - graphDiv.style.maxWidth = '100%'; - pzoom = panzoom(graphDiv, { - onPan: handlePanZoomChange, - onZoom: handlePanZoomChange, - controlIconsEnabled: true, - fit: true, - center: true + 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; }); - const { pan, zoom } = state; - if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) { - pzoom.zoom(zoom); - pzoom.pan(pan); - } - hide = false; - }); + } + container.innerHTML = svgCode; + const graphDiv = document.getElementById('graph-div'); + graphDiv.setAttribute('height', '100%'); + graphDiv.style.maxWidth = '100%'; } }); view.parentElement.scrollTop = scroll; @@ -86,10 +91,8 @@ } }); window.addEventListener('resize', () => { - if (pzoom) { + if ($stateStore.panZoom && pzoom) { pzoom.resize(); - pzoom.fit(); - pzoom.center(); } }); }); diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts index 9ff6d86b..1aaf954a 100644 --- a/src/lib/types.d.ts +++ b/src/lib/types.d.ts @@ -39,6 +39,7 @@ export interface State { updateEditor: boolean; updateDiagram: boolean; autoSync: boolean; + panZoom?: boolean; pan?: { x: number; y: number }; zoom?: number; loader?: LoaderConfig; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 45bbd3e9..616ff0a0 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -151,31 +151,29 @@