fix: Better reset zoom controls

Author: aklinker1

web/composables/usePanZoom.ts

@@ -1,21 +1,28 @@
-import type { PanZoom } from 'panzoom';
+import type { PanZoom, Transform } from 'panzoom';
 import panzoom from 'panzoom';
 
 export default function (container: Ref<HTMLElement | undefined>) {
   let instance = ref<PanZoom>();
   const scale = ref<number>();
+  let initialTransform: Transform | undefined;
 
-  whenever(container, (container) => {
-    instance.value = panzoom(container, {
-      autocenter: true,
-      minZoom: 0.2,
-      maxZoom: 10,
-    });
-    scale.value = instance.value.getTransform().scale;
-    instance.value.on('zoom', () => {
-      scale.value = instance.value?.getTransform().scale;
-    });
-  });
+  whenever(
+    container,
+    (container) => {
+      if (instance.value != null) return;
+      instance.value = panzoom(container, {
+        autocenter: true,
+        minZoom: 0.2,
+        maxZoom: 10,
+      });
+      initialTransform = { ...instance.value.getTransform() };
+      scale.value = initialTransform.scale;
+      instance.value.on('zoom', () => {
+        scale.value = instance.value?.getTransform().scale;
+      });
+    },
+    {},
+  );
   whenever(
     () => !container.value,
     () => {
@@ -44,8 +51,13 @@ export default function (container: Ref<HTMLElement | undefined>) {
     zoomIn: () => zoomBy(0.1),
     zoomOut: () => zoomBy(-0.1),
     resetZoom: () => {
-      setZoom(() => 1);
-      instance.value?.smoothMoveTo(0, 0);
+      if (initialTransform == null) return;
+
+      const { scale, x, y } = initialTransform;
+      setZoom(() => scale, x, y);
+      setTimeout(() => {
+        instance.value?.smoothMoveTo(x, y);
+      }, 200);
     },
   };
 }