fix #1655: Reset pan & zoom state if invalid

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();
   };

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

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);
+};

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<void> => {
   initURLSubscription();
   await initAnalytics();
   plausible?.trackPageview({ url: window.location.origin + window.location.pathname });
+  verifyState();
 };
 
 export const isMac = navigator.platform.toUpperCase().includes('MAC');