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);