From b66c5113a1cabb9a9e1fe05bb349813b72573525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <tmladek@protonmail.ch>
Date: Sun, 17 Jan 2021 16:34:49 +0100
Subject: [PATCH] put/read current location in/from url fragment (fix #6)

---
 app/src/components/SVGContent.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index 25f5ad9..bcf61d9 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -152,6 +152,9 @@ export default defineComponent({
         bbox.w = window.innerWidth / currentRatio;
         bbox.h = window.innerHeight / currentRatio;
         bbox.z = transform.scale;
+
+        window.location.hash =
+            `${Math.round(bbox.x + bbox.w / 2)},${Math.round(bbox.y + bbox.h / 2)},${Math.round(transform.scale * 1000) / 1000}z`;
       });
 
       function panToElement(target: SVGRectElement, smooth: boolean) {
@@ -196,10 +199,23 @@ export default defineComponent({
         panToElement(anchor, true);
       };
 
-
-      // Pan to start element
+      // Process start element
       const start = processStart(svg);
-      if (start) {
+
+      // Pan to start element or location in hash
+      const locationMatch = window.location.href.match(/#([\-0-9.]+),([\-0-9.]+),([0-9.]+)z/);
+      if (locationMatch) {
+        console.debug(`[SVGCONTENT] Got a location match: ${locationMatch}`);
+        const [_, x, y, z] = locationMatch;
+
+        const transform = pz.getTransform();
+        const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
+        pz.moveTo(
+            (parseFloat(x) * currentRatio * -1 + window.innerWidth / 2),
+            (parseFloat(y) * currentRatio * -1 + window.innerHeight / 2)
+        );
+        pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, parseFloat(z));
+      } else if (start) {
         console.info("[SVG] Found start element.");
         panToElement(start, false);