process anchor links (href.startsWith 'anchor')

app/src/components/SVGContent.vue

@@ -177,15 +177,26 @@ export default defineComponent({
         });
       }
 
-      // Links
-      console.debug("[SVG] Processing hyperlinks.");
-      processHyperlinks(svg);
-
       // Anchors
       console.debug("[SVG] Processing anchors.");
       anchors.value = processAnchors(svg);
       console.info(`[SVG] Found ${anchors.value.length} anchors.`);
 
+      // Links
+      console.debug("[SVG] Processing hyperlinks.");
+      const {anchor, hyper} = processHyperlinks(svg);
+      console.info(`[SVG] Found ${anchor.length} anchor links and ${hyper.length} hyperlinks.`);
+      anchor.forEach(([anchorId, element]) => {
+        const anchor = anchors.value.find((a) => a.id == anchorId);
+        if (!anchor) {
+          console.error(`[SVG] Could not find anchor #${anchorId}!`);
+          return;
+        }
+        element.addEventListener("click", () => {
+          panToElement(anchor, true);
+        });
+      });
+
       // Audio areas
       console.debug("[SVG] Processing audio areas.");
       audioAreas.value = processAudio(svg);
@@ -369,10 +380,19 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
       });
 }
 
-function processHyperlinks(svg: XMLDocument) {
+function processHyperlinks(svg: XMLDocument): { anchor: [string, SVGAElement][], hyper: SVGAElement[] } {
+  const anchor: [string, SVGAElement][] = [];
+  const hyper: SVGAElement[] = [];
   Array.from(svg.getElementsByTagName("a")).forEach((el) => {
-    el.setAttribute("target", "_blank");
+    if (el.getAttribute("xlink:href")?.startsWith("anchor")) {
+      anchor.push([el.getAttribute("xlink:href") as string, el as unknown as SVGAElement]);
+      el.setAttribute("xlink:href", "#");
+    } else {
+      el.setAttribute("target", "_blank");
+      hyper.push(el as unknown as SVGAElement);
+    }
   });
+  return {anchor, hyper};
 }
 
 function processStart(svg: XMLDocument): SVGRectElement | null {