glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #691 from metamaps/feature/better.zoom

Browse source 
I changed how zoom by mouse-wheel works so that it zooms based on whe…
This commit is contained in:
Robert Best 2016-09-29 18:26:02 -04:00 committed by GitHub
commit 8864dbbdcf
1 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/patched/JIT.js
View file

@ -2468,16 +2468,36 @@ Extras.Classes.Navigation = new Class({
ans = 1 + scroll * val; ans = 1 + scroll * val;
// START METAMAPS CODE // START METAMAPS CODE
if (ans > 1) { if (((ans > 1) && (5 >= this.canvas.scaleOffsetX)) || ((ans < 1) && (this.canvas.scaleOffsetX >= 0.2))) {
if (5 >= this.canvas.scaleOffsetX) { var s = this.canvas.getSize(),
this.canvas.scale(ans, ans); p = this.canvas.getPos(),
} ox = this.canvas.translateOffsetX,
} oy = this.canvas.translateOffsetY,
else if (ans < 1) { sx = this.canvas.scaleOffsetX,
if (this.canvas.scaleOffsetX >= 0.2) { sy = this.canvas.scaleOffsetY;
this.canvas.scale(ans, ans);
} //Basically this is just a duplication of the Util function pixelsToCoords, it finds the canvas coordinate of the mouse pointer
var pointerCoordX = (e.x - p.x - s.width / 2 - ox) * (1 / sx),
pointerCoordY = (e.y - p.y - s.height / 2 - oy) * (1 / sy);
//This translates the canvas to be centred over the mouse pointer, then the canvas is zoomed as intended.
this.canvas.translate(-pointerCoordX,-pointerCoordY);
this.canvas.scale(ans, ans);
//Get the canvas attributes again now that is has changed
s = this.canvas.getSize(),
p = this.canvas.getPos(),
ox = this.canvas.translateOffsetX,
oy = this.canvas.translateOffsetY,
sx = this.canvas.scaleOffsetX,
sy = this.canvas.scaleOffsetY;
var newX = (e.x - p.x - s.width / 2 - ox) * (1 / sx),
newY = (e.y - p.y - s.height / 2 - oy) * (1 / sy);
//Translate the canvas to put the pointer back over top the same coordinate it was over before
this.canvas.translate(newX-pointerCoordX,newY-pointerCoordY);
} }
// END METAMAPS CODE // END METAMAPS CODE
// ORIGINAL CODE this.canvas.scale(ans, ans); // ORIGINAL CODE this.canvas.scale(ans, ans);