New work

cutting-room-floor · Jan 11, 2012 · 37859ea · 37859ea
1 parent 39000e9
commit 37859ea
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 63 deletions.
diff --git a/ext/modestmaps.min.js b/ext/modestmaps.min.js
diff --git a/ext/wax.mm.min.js b/ext/wax.mm.min.js
diff --git a/index.js b/index.js
@@ -6,7 +6,7 @@ window.onload = function() {
         function(tj) {
         map = new com.modestmaps.Map('map',
             new wax.mm.connector(tj), null, [
-                new MM.DragHandler(),
+                new easey.DragHandler(),
                 new easey.DoubleClickHandler(),
                 new easey.MouseWheelHandler()
             ]);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "easey",
-    "version": "2.0.0",
+    "version": "1.0.0",
     "description": "Easing for Modest Maps",
     "author": {
         "name": "MapBox",

diff --git a/src/easey.handlers.js b/src/easey.handlers.js
@@ -28,7 +28,7 @@
                     easey.slow(map, {
                         zoom: z,
                         about: point,
-                        time: 200
+                        time: 100
                     });
 
                     return MM.cancelEvent(e);
@@ -71,11 +71,11 @@
 
                     var timeSince = new Date().getTime() - prevTime;
 
-                    if (Math.abs(delta) > 0 && (timeSince > 100)) {
+                    if (Math.abs(delta) > 0 && (timeSince > 50)) {
 
                         if (easey.running()) {
                           easey.set({
-                            time:300,
+                            time:200,
                             zoom:z + (delta > 0 ? 1 : -1)
                           });
                         } else {
@@ -86,7 +86,7 @@
                               zoom: z + (delta > 0 ? 1 : -1),
                               about: point,
                               ease: 'linear',
-                              time:300
+                              time:200
                           });
                         }
 
@@ -101,71 +101,86 @@
         }
     };
 
-    // Handle the use of mouse dragging to pan the map.
-    easey.DragHandler = function(map) {
-        if (map !== undefined) {
-            this.init(map);
-        }
-    };
+    easey.DragHandler = function() { };
 
     easey.DragHandler.prototype = {
-
         init: function(map) {
-            this.map = map;
-            MM.addEvent(map.parent, 'mousedown', MM.bind(this.mouseDown, this));
-        },
-
-        mouseDown: function(e) {
-            MM.addEvent(document, 'mouseup', this._mouseUp = MM.bind(this.mouseUp, this));
-            MM.addEvent(document, 'mousemove', this._mouseMove = MM.bind(this.mouseMove, this));
-
-            this.lastMouse = MM.getMousePoint(e, this.map);
-            this.prevMouse = MM.getMousePoint(e, this.map);
-            this.map.parent.style.cursor = 'move';
-
-            return MM.cancelEvent(e);
-        },
-
-        mouseMove: function(e) {
-            if (this.prevMouse) {
-                var nextMouse = MM.getMousePoint(e, this.map);
-                this.map.panBy(
-                    nextMouse.x - this.prevMouse.x,
-                    nextMouse.y - this.prevMouse.y);
-
-                    this.lastMouse = new MM.Point(this.prevMouse.x, this.prevMouse.y);
-                    this.prevMouse = MM.getMousePoint(e, this.map);
-
-                    this.prevMouse.t = +new Date();
+            var prevT = 0,
+                acceleration = 25.0,
+                speed = null,
+                drag = 0.10,
+                minSpeed = 0.08,
+                lastMove = null,
+                mouseDownPoint = null,
+                mousePoint = null,
+                mouseDownTime = 0;
+
+            function mouseDown(e) {
+                mousePoint = prevMousePoint = MM.getMousePoint(e, map);
+                return MM.cancelEvent(e);
             }
 
-            return MM.cancelEvent(e);
-        },
-
-        mouseUp: function(e) {
-            MM.removeEvent(document, 'mouseup', this._mouseUp);
-            MM.removeEvent(document, 'mousemove', this._mouseMove);
-
-            var angle = Math.atan2(
-                this.lastMouse.y - this.prevMouse.y,
-                this.lastMouse.x - this.prevMouse.x);
-                var distance = MM.Point.distance(this.lastMouse, this.prevMouse);
-                var speed = Math.min(Math.log(1 + (distance / ((+new Date()) - this.prevMouse.t))) * 90, 300);
-
-                if (isNaN(angle)) return;
+            function mouseMove(e) {
+                if (mousePoint) {
+                    prevMousePoint = mousePoint;
+                    mousePoint = MM.getMousePoint(e, map);
+                    lastMove = +new Date();
+                    return MM.cancelEvent(e);
+                }
+            }
 
-                var center = this.map.coordinatePoint(this.map.coordinate);
-                var pan = this.map.pointLocation(new MM.Point(
-                    center.x + (Math.cos(angle) * speed),
-                    center.y + (Math.sin(angle) * speed)));
+            function mouseUp(e) {
+                mousePoint = prevMousePoint = null;
+                return MM.cancelEvent(e);
+            }
 
-                    easey.slow(this.map, {
-                        pan: pan
-                    }, speed / 100);
-                    this.prevMouse = null;
-                    this.map.parent.style.cursor = '';
+            function animate(t) {
+                var dir = { x: 0, y: 0 };
+
+                var dt = Math.max(0.001,(t - prevT) / 1000.0);
+                if (dir.x || dir.y) {
+                    var len = Math.sqrt(dir.x*dir.x + dir.y*dir.y);
+                    dir.x /= len;
+                    dir.y /= len;
+                    this.speed.x += dir.x * acceleration * dt;
+                    this.speed.y += dir.y * acceleration * dt;
+                }
+                else if (mousePoint && prevMousePoint && (lastMove > (+new Date() - 50))) {
+                    dir.x = mousePoint.x - prevMousePoint.x;
+                    dir.y = mousePoint.y - prevMousePoint.y;
+                    speed.x = dir.x;
+                    speed.y = dir.y;
+                } else {
+                    speed.x -= speed.x * drag;
+                    speed.y -= speed.y * drag;
+                    if (Math.abs(speed.x) < 0.001) {
+                        speed.x = 0;
+                    }
+                    if (Math.abs(speed.y) < 0.001) {
+                        speed.y = 0;
+                    }
+                }
+                // if (Math.abs(speed.x) < minSpeed) speed.x = 0;
+                // if (Math.abs(speed.y) < minSpeed) speed.y = 0;
+                if (speed.x || speed.y) {
+                    map.panBy(speed.x, speed.y);
+                }
+                prevT = t;
+                // tick every frame for time-based anim accuracy
+                MM.getFrame(animate);
+            }
 
-                    return MM.cancelEvent(e);
+            MM.addEvent(map.parent, 'click', function(e) {
+              map.parent.focus();
+            });
+            MM.addEvent(map.parent, 'mousedown', mouseDown);
+            MM.addEvent(map.parent, 'mousemove', mouseMove);
+            MM.addEvent(map.parent, 'mouseup', mouseUp);
+            // tick every frame for time-based anim
+            prevT = new Date().getTime();
+            speed = { x: 0, y: 0 };
+            MM.getFrame(animate);
         }
     };
+
 })(this, com.modestmaps);