reorganize

app/src/components/SVGContent.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, ref} from "vue";
+import {defineComponent, onMounted, reactive, ref} from "vue";
 import createPanZoom, {PanZoom} from "panzoom";
 
 export default defineComponent({
@@ -16,62 +16,75 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const domparser = new DOMParser();
     const root = ref(null);
+    const panzoom = ref<null | PanZoom>(null);
+    const bbox = reactive({
+      x: 0,
+      y: 0,
+      width: undefined,
+      height: undefined
+    });
+    const anchors = ref<SVGRectElement[]>([]);
+    const panToAnchor = ref();
+
 
     onMounted(async () => {
       const element = root.value as unknown as HTMLDivElement;
 
-      const panzoom = createPanZoom(element, {
+      // Fetch & load SVG
+      const fetchResult = await fetch(props.url);
+      const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
+      const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
+
+      const pz = createPanZoom(element, {
         smoothScroll: false,
         zoomSpeed: 0.05
       });
+      panzoom.value = pz;
 
-      panzoom.on("transform", function (panzoom: PanZoom) {
+      function updateBBox(panzoom: PanZoom) {
         const transform = panzoom.getTransform();
         // console.log(transform);
-      });
+      }
 
-      panzoom.on("panend", function (panzoom: PanZoom) {
-        console.log("panend");
-      });
+      updateBBox(pz);
+      pz.on("transform", updateBBox);
 
-      const fetchResult = await fetch(props.url);
-      const svgParsed = domparser.parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
-      const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
-
-      const anchors = processAnchors(svg);
-      const anchor = anchors[0];
-      window.addEventListener("keydown", (ev) => {
-        if (ev.key !== " ") {
-          return;
-        }
-
-        const transform = panzoom.getTransform();
-        console.log(transform);
+      anchors.value = processAnchors(svg);
+      panToAnchor.value = (anchor: SVGRectElement) => {
+        const transform = pz.getTransform();
         const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
-        const targetScale = 2;
+        const targetScale = 1; // todo
 
         const svgTargetX = anchor.x.baseVal.value + anchor.width.baseVal.value / 2;
         const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2;
 
-        console.log(svgTargetX * currentRatio + transform.x);
-
-        panzoom.smoothMoveTo(
+        pz.smoothMoveTo(
             svgTargetX * currentRatio * -1 + window.innerWidth / 2,
             svgTargetY * currentRatio * -1 + window.innerHeight / 2,
         );
-        setTimeout(() => {
-          panzoom.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, 1);
-        }, 1000);
 
+        setTimeout(() => {
+          pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
+        }, 400 * 2);
+      };
+
+      // DEBUG
+      window.addEventListener("keydown", (ev) => {
+        if (ev.key !== " ") {
+          return;
+        }
+        panToAnchor.value(anchors.value[0]);
       });
     });
 
     return {
-      root
+      root,
+      panzoom,
+      anchors,
+      panToAnchor
     };
-  }
+  },
 });
 
 function processAnchors(document: XMLDocument): SVGRectElement[] {