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

improve long-range anchor pans

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