diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue index fc36e95..a837259 100644 --- a/app/src/components/SVGContent.vue +++ b/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(); - 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); + panToElement(anchor, true); }; // 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); +} +