🐁 welcome back, drop + drag!

README.md

@@ -6,6 +6,7 @@ A node.js based [Vector Tile](http://wiki.openstreetmap.org/wiki/Vector_tiles) t
 
 ## Features
 
+* Use your mouse to drag and zoom in and out!
 * Discover Point-of-Interests around any given location
 * Highly customizable layer styling with [Mapbox Styles](https://www.mapbox.com/mapbox-gl-style-spec/) support
 * Connect to any public or private vector tile server
@@ -13,7 +14,6 @@ A node.js based [Vector Tile](http://wiki.openstreetmap.org/wiki/Vector_tiles) t
 * Work offline and discover local [VectorTile](https://github.com/mapbox/vector-tile-spec)/[MBTiles](https://github.com/mapbox/mbtiles-spec)
 * Compatible with most Linux and OSX terminals
 * Highly optimizied algorithms for a smooth experience
-* Use your mouse to drag and zoom in and out (WIP)
 * 100% pure Coffee-/JavaScript! :sunglasses:
 
 ## How to install

src/Mapscii.coffee

@@ -106,19 +106,14 @@ module.exports = class Mapscii
     size = utils.tilesizeAtZoom @zoom
     [dx, dy] = [projected.x-@width/2, projected.y-@height/2]
 
-    z = Math.min config.tileRange, Math.max 0, Math.floor @zoom
+    z = utils.baseZoom @zoom
     center = utils.ll2tile @center.lon, @center.lat, z
-
     @mousePosition = utils.tile2ll center.x+(dx/size), center.y+(dy/size), z
 
   _onClick: (event) ->
     @_updateMousePosition event
 
     if @mouseDragging and event.button is "left"
-      # TODO lat/lng based drag&drop
-      # @view[0] -= (@mouseDragging.x-@mousePosition.x)<<1
-      # @view[1] -= (@mouseDragging.y-@mousePosition.y)<<2
-
       @mouseDragging = false
     else
       @setCenter @mousePosition.lat, @mousePosition.lon
@@ -128,25 +123,33 @@ module.exports = class Mapscii
   _onMouseScroll: (event) ->
     @_updateMousePosition event
     # TODO: handle .x/y for directed zoom
-    @zoomBy config.zoomStep * if event.button is "up" then -1 else 1
+    @zoomBy config.zoomStep * if event.button is "up" then 1 else -1
     @_draw()
 
   _onMouseMove: (event) ->
-    @_updateMousePosition event
-
     # start dragging
     if event.button is "left"
       if @mouseDragging
-        # TODO lat/lng based drag&drop
-        # @view[0] -= (@mouseDragging.x-event.x)<<1
-        # @view[1] -= (@mouseDragging.y-event.y)<<2
+        dx = (@mouseDragging.x-event.x)*2
+        dy = (@mouseDragging.y-event.y)*4
+
+        size = utils.tilesizeAtZoom @zoom
+
+        newCenter = utils.tile2ll @mouseDragging.center.x+(dx/size),
+          @mouseDragging.center.y+(dy/size),
+          utils.baseZoom(@zoom)
+
+        @setCenter newCenter.lat, newCenter.lon
+
+        @_draw()
 
-        # if not @renderer.isDrawing and @renderer.lastDrawAt < Date.now()-100
-        #   @_draw()
-        #   @mouseDragging = x: event.x, y: event.y
       else
-        @mouseDragging = x: event.x, y: event.y
+        @mouseDragging =
+          x: event.x,
+          y: event.y,
+          center: utils.ll2tile @center.lon, @center.lat, utils.baseZoom(@zoom)
 
+    @_updateMousePosition event
     @notify @_getFooter()
 
   _onKey: (key) ->

src/Renderer.coffee

@@ -66,7 +66,7 @@ module.exports = class Renderer
       frame
 
   _visibleTiles: (center, zoom) ->
-    z = Math.min config.tileRange, Math.max 0, Math.floor zoom
+    z = utils.baseZoom zoom
     center = utils.ll2tile center.lon, center.lat, z
 
     tiles = []

src/utils.coffee

@@ -13,9 +13,11 @@ utils =
   clamp: (num, min, max) ->
     if num <= min then min else if num >= max then max else num
 
+  baseZoom: (zoom) ->
+    Math.min config.tileRange, Math.max 0, Math.floor zoom
+
   tilesizeAtZoom: (zoom) ->
-    baseZoom = Math.min config.tileRange, Math.floor Math.max 0, zoom
-    config.projectSize * Math.pow(2, zoom-baseZoom)
+    config.projectSize * Math.pow(2, zoom-utils.baseZoom(zoom))
 
   deg2rad: (angle) ->
     # (angle / 180) * Math.PI