From 9eda504f92aa80168cebb183ee816dc63bbd8e4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Mon, 11 Jan 2021 14:47:14 +0100 Subject: [PATCH] improve long-range anchor pans --- app/src/components/SVGContent.vue | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue index 0de6c7c..248ffa6 100644 --- a/app/src/components/SVGContent.vue +++ b/app/src/components/SVGContent.vue @@ -111,28 +111,33 @@ export default defineComponent({ currentTransform.value = transform; }); - function panToElement(element: SVGRectElement, smooth: boolean) { + function panToElement(target: 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 targetScale = window.innerWidth / (target.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; + const svgTargetX = (target.x.baseVal.value + target.width.baseVal.value / 2) * currentRatio; + const svgTargetY = (target.y.baseVal.value + target.height.baseVal.value / 2) * currentRatio; if (smooth) { pz.smoothMoveTo( - svgTargetX * currentRatio * -1 + window.innerWidth / 2, - svgTargetY * currentRatio * -1 + window.innerHeight / 2, + svgTargetX * -1 + window.innerWidth / 2, + svgTargetY * -1 + window.innerHeight / 2, ); setTimeout(() => { - pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale); + const finalTransform = pz.getTransform(); + pz.smoothZoomAbs( + (svgTargetX + finalTransform.x), + (svgTargetY + finalTransform.y), + targetScale + ); }, 400 * 2); } else { pz.moveTo( - svgTargetX * currentRatio * -1 + window.innerWidth / 2, - svgTargetY * currentRatio * -1 + window.innerHeight / 2, + svgTargetX * -1 + window.innerWidth / 2, + svgTargetY * -1 + window.innerHeight / 2, ); pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale); }