diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index a1773723..8c91ab5f 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -101,7 +101,13 @@ ${svgString}`); $inputStateStore.panZoom = true; }); image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`; - + // Fallback to set panZoom to true after 2 seconds + // This is a workaround for the case when the image is not loaded + setTimeout(() => { + if (!$inputStateStore.panZoom) { + $inputStateStore.panZoom = true; + } + }, 2000); event.stopPropagation(); event.preventDefault(); }; diff --git a/src/lib/util/panZoom.ts b/src/lib/util/panZoom.ts index 97844bd6..33d50a87 100644 --- a/src/lib/util/panZoom.ts +++ b/src/lib/util/panZoom.ts @@ -55,9 +55,10 @@ export class PanZoomState { this.resizeObserver.disconnect(); this.resizeObserver.observe(diagramView); - // TODO: Investigate why this is necessary - if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) { + if (pan && zoom && Number.isFinite(zoom) && Number.isFinite(pan.x) && Number.isFinite(pan.y)) { this.restorePanZoom(pan, zoom); + } else { + this.reset(); } // we start out with both pan and zoom enabled so that the tool can auto position view refreshed diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index aa2d9bdb..7ddf99c8 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -232,3 +232,11 @@ export const initURLSubscription = (): void => { export const getStateString = (): string => { return JSON.stringify(get(inputStateStore)); }; + +export const verifyState = (): void => { + const state = get(inputStateStore); + if (!state.panZoom) { + state.panZoom = true; + } + updateCodeStore(state); +}; diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts index e6d9b766..37a8b50c 100644 --- a/src/lib/util/util.ts +++ b/src/lib/util/util.ts @@ -2,7 +2,7 @@ import { env } from './env'; import { loadDataFromUrl } from './fileLoaders/loader'; import { initLoading } from './loading'; import { applyMigrations } from './migrations'; -import { initURLSubscription, loadState, updateCodeStore } from './state'; +import { initURLSubscription, loadState, updateCodeStore, verifyState } from './state'; import { initAnalytics, plausible } from './stats'; export const loadStateFromURL = (): void => { @@ -23,6 +23,7 @@ export const initHandler = async (): Promise => { initURLSubscription(); await initAnalytics(); plausible?.trackPageview({ url: window.location.origin + window.location.pathname }); + verifyState(); }; export const isMac = navigator.platform.toUpperCase().includes('MAC');