thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity

improve long-range anchor pans

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-11 14:47:14 +01:00
parent 70a09e9eec
commit 9eda504f92
1 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/src/components/SVGContent.vue
View file

@ -111,28 +111,33 @@ export default defineComponent({
currentTransform.value = transform; currentTransform.value = transform;
}); });
function panToElement(element: SVGRectElement, smooth: boolean) { function panToElement(target: SVGRectElement, smooth: boolean) {
const transform = pz.getTransform(); const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width; const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
const ratio = svg.clientWidth / 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 svgTargetX = (target.x.baseVal.value + target.width.baseVal.value / 2) * currentRatio;
const svgTargetY = element.y.baseVal.value + element.height.baseVal.value / 2; const svgTargetY = (target.y.baseVal.value + target.height.baseVal.value / 2) * currentRatio;
if (smooth) { if (smooth) {
pz.smoothMoveTo( pz.smoothMoveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2, svgTargetX * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2, svgTargetY * -1 + window.innerHeight / 2,
); );
setTimeout(() => { 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); }, 400 * 2);
} else { } else {
pz.moveTo( pz.moveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2, svgTargetX * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2, svgTargetY * -1 + window.innerHeight / 2,
); );
pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale); pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
} }