extern/mapscii
1
0
Fork 0
mirror of https://github.com/rastapasta/mapscii.git synced 2024-11-25 01:23:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Zoom toward the mouse pointer instead of the map center (#75)

Browse Source
This commit is contained in:
Quincy Morgan 2019-10-13 17:59:03 +02:00 committed by Christian Paul
parent dcda97e305
commit a872c0ee6d
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -109,7 +109,6 @@ If your terminal supports mouse events you can drag the map and use your scroll
* [ ] mouse control * [ ] mouse control
* [ ] hover POIs/labels * [ ] hover POIs/labels
* [ ] hover maybe even polygons/-lines? * [ ] hover maybe even polygons/-lines?
* [ ] zoom into mouse pos
* Styler * Styler
* [ ] respect zoom based style ranges * [ ] respect zoom based style ranges

39
src/Mapscii.js
View File

@ -110,10 +110,10 @@ class Mapscii {
this.renderer.setSize(this.width, this.height); this.renderer.setSize(this.width, this.height);
} }
_updateMousePosition(event) { _colrow2ll(x, y) {
const projected = { const projected = {
x: (event.x-0.5)*2, x: (x-0.5)*2,
y: (event.y-0.5)*4, y: (y-0.5)*4,
}; };
const size = utils.tilesizeAtZoom(this.zoom); const size = utils.tilesizeAtZoom(this.zoom);
@ -122,7 +122,11 @@ class Mapscii {
const z = utils.baseZoom(this.zoom); const z = utils.baseZoom(this.zoom);
const center = utils.ll2tile(this.center.lon, this.center.lat, z); const center = utils.ll2tile(this.center.lon, this.center.lat, z);
this.mousePosition = utils.normalize(utils.tile2ll(center.x+(dx/size), center.y+(dy/size), z)); return utils.normalize(utils.tile2ll(center.x+(dx/size), center.y+(dy/size), z));
}
_updateMousePosition(event) {
this.mousePosition = this._colrow2ll(event.x, event.y);
} }
_onClick(event) { _onClick(event) {
@ -142,8 +146,33 @@ class Mapscii {
_onMouseScroll(event) { _onMouseScroll(event) {
this._updateMousePosition(event); this._updateMousePosition(event);
// TODO: handle .x/y for directed zoom
// the location of the pointer, where we want to zoom toward
const targetMouseLonLat = this._colrow2ll(event.x, event.y);
// zoom toward the center
this.zoomBy(config.zoomStep * (event.button === 'up' ? 1 : -1)); this.zoomBy(config.zoomStep * (event.button === 'up' ? 1 : -1));
// the location the pointer ended up after zooming
const offsetMouseLonLat = this._colrow2ll(event.x, event.y);
const z = utils.baseZoom(this.zoom);
// the projected locations
const targetMouseTile = utils.ll2tile(targetMouseLonLat.lon, targetMouseLonLat.lat, z);
const offsetMouseTile = utils.ll2tile(offsetMouseLonLat.lon, offsetMouseLonLat.lat, z);
// the projected center
const centerTile = utils.ll2tile(this.center.lon, this.center.lat, z);
// calculate a new center that puts the pointer back in the target location
const offsetCenterLonLat = utils.tile2ll(
centerTile.x - (offsetMouseTile.x - targetMouseTile.x),
centerTile.y - (offsetMouseTile.y - targetMouseTile.y),
z
);
// move to the new center
this.setCenter(offsetCenterLonLat.lat, offsetCenterLonLat.lon);
this._draw(); this._draw();
} }