pan to #start element on load; reduce css classes

app/src/components/SVGContent.vue

@@ -70,6 +70,39 @@ export default defineComponent({
       });
       panzoom.value = pz;
 
+      function panToElement(element: SVGRectElement, smooth: boolean) {
+        const transform = pz.getTransform();
+        const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
+        const ratio = svg.clientWidth / svg.viewBox.baseVal.width;
+        const targetScale = window.innerWidth / (element.width.baseVal.value * ratio);
+
+        const svgTargetX = element.x.baseVal.value + element.width.baseVal.value / 2;
+        const svgTargetY = element.y.baseVal.value + element.height.baseVal.value / 2;
+
+        if (smooth) {
+          pz.smoothMoveTo(
+              svgTargetX * currentRatio * -1 + window.innerWidth / 2,
+              svgTargetY * currentRatio * -1 + window.innerHeight / 2,
+          );
+
+          setTimeout(() => {
+            pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
+          }, 400 * 2);
+        } else {
+          pz.moveTo(
+              svgTargetX * currentRatio * -1 + window.innerWidth / 2,
+              svgTargetY * currentRatio * -1 + window.innerHeight / 2,
+          );
+          pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
+        }
+      }
+
+      // Pan to start element
+      const start = processStart(svg);
+      if (start) {
+        panToElement(start, false);
+      }
+
       pz.on("transform", function (_) {
         const transform = pz.getTransform();
         const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
@@ -123,22 +156,7 @@ export default defineComponent({
       // Anchors
       anchors.value = processAnchors(svg);
       panToAnchor.value = (anchor: SVGRectElement) => {
-        const transform = pz.getTransform();
+        panToElement(anchor, true);
-        const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
-        const ratio = svg.clientWidth / svg.viewBox.baseVal.width;
-        const targetScale = window.innerWidth / (anchor.width.baseVal.value * ratio);
-
-        const svgTargetX = anchor.x.baseVal.value + anchor.width.baseVal.value / 2;
-        const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2;
-
-        pz.smoothMoveTo(
-            svgTargetX * currentRatio * -1 + window.innerWidth / 2,
-            svgTargetY * currentRatio * -1 + window.innerHeight / 2,
-        );
-
-        setTimeout(() => {
-          pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
-        }, 400 * 2);
       };
 
       // DEBUG
@@ -176,7 +194,7 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
     if (anchor === null) {
       break;
     }
-    anchor.classList.add("svgcontent_anchor");
+    anchor.classList.add("hidden");
     result.push(anchor);
     i++;
   }
@@ -219,7 +237,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
   return Array.from(svg.getElementsByTagName("circle"))
       .filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
       .map((el) => {
-        el.classList.add("svgcontent_audio");
+        el.classList.add("hidden");
 
         const descNode = el.children[0]; // to fix
         const audioSrc = descNode.textContent!.trim();
@@ -233,11 +251,19 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
       });
 }
 
+function processStart(svg: XMLDocument): SVGRectElement | null {
+  const start = svg.getElementById("start");
+  if (start){
+    start.classList.add("hidden")
+  }
+  return start as (SVGRectElement | null);
+}
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.svgcontent_anchor, .svgcontent_audio {
+.hidden {
   visibility: hidden;
 }
 </style>