From 13feeff4f6bd998090c00867468b39cf7abadfb8 Mon Sep 17 00:00:00 2001
From: Matthew Chase Whittemore <mcwhittemore@gmail.com>
Date: Wed, 4 May 2016 19:51:10 -0400
Subject: [PATCH 1/2] synthetic click to catch small drags

---
 bench/lib/mouse_draw.js       | 11 ++++++----
 bench/lib/mouse_trace.js      | 10 ++++++++-
 src/events.js                 | 39 ++++++++++++++++++++---------------
 src/lib/euclidean_distance.js |  4 ++++
 src/lib/mode_handler.js       |  3 ---
 src/modes/direct_select.js    |  7 ++-----
 src/modes/simple_select.js    |  4 ++--
 test/line.test.js             |  4 ++--
 test/point.test.js            |  4 ++--
 test/polygon.test.js          |  6 +++---
 test/utils.js                 |  5 +++++
 11 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/euclidean_distance.js

diff --git a/bench/lib/mouse_draw.js b/bench/lib/mouse_draw.js
index db837d3aeb5..887c29ae8f8 100644
--- a/bench/lib/mouse_draw.js
+++ b/bench/lib/mouse_draw.js
@@ -7,21 +7,24 @@ module.exports = function(start, map) {
 
   var events = mouseEvents(map);
 
-  events.push('mousemove', {
+  events.push('mousedown', {
     x: start.x,
     y: start.y
   });
 
-  events.push('click', {
+  events.push('mousemove', {
     x: start.x,
     y: start.y
-  }, true);
+  });
 
   for (var i=0; i<path.length; i++) {
+    events.push('mouseup', path[i]);
     events.push('mousemove', path[i]);
-    events.push('click', path[i]);
+    events.push('mousedown', path[i]);
   }
 
+  events.push('mouseup', path[path.length-1]);
+
   return function(cb) {
     events.run(cb);
   }
diff --git a/bench/lib/mouse_trace.js b/bench/lib/mouse_trace.js
index 33a47afe137..a022cd79e5f 100644
--- a/bench/lib/mouse_trace.js
+++ b/bench/lib/mouse_trace.js
@@ -4,6 +4,8 @@ module.exports = function(ring, map) {
 
   var events = mouseEvents(map);
 
+  var lastPoint = null;
+
   for (var c=0; c<ring.length; c++) {
     var coord = ring[c];
     var point = map.project({
@@ -11,11 +13,17 @@ module.exports = function(ring, map) {
       lat: coord[1]
     });
     if (!isNaN(point.x)) {
+      lastPoint = point;
+      events.push('mouseup', point);
       events.push('mousemove', point);
-      events.push('click', point);
+      events.push('mousedown', point);
     }
   }
 
+  if (lastPoint) {
+    events.push('mouseup', lastPoint);
+  }
+
   return function(cb) {
     events.run(cb);
   }
diff --git a/src/events.js b/src/events.js
index 06767ba488a..ac0c4009591 100644
--- a/src/events.js
+++ b/src/events.js
@@ -1,5 +1,6 @@
 var ModeHandler = require('./lib/mode_handler');
 var findTargetAt = require('./lib/find_target_at');
+var euclideanDistance = require('./lib/euclidean_distance');
 
 var modes = {
   'simple_select': require('./modes/simple_select'),
@@ -9,6 +10,9 @@ var modes = {
   'draw_polygon': require('./modes/draw_polygon')
 };
 
+const closeTolerance = 4;
+const tolerance = 12;
+
 module.exports = function(ctx) {
 
   var isDown = false;
@@ -22,18 +26,6 @@ module.exports = function(ctx) {
     currentMode.drag(event);
   };
 
-  events.click = function(event) {
-    var target = findTargetAt(event, ctx);
-    event.featureTarget = target;
-    currentMode.click(event);
-  };
-
-  events.doubleclick = function(event) {
-    var target = findTargetAt(event, ctx);
-    event.featureTarget = target;
-    currentMode.doubleclick(event);
-  };
-
   events.mousemove = function(event) {
     if (isDown) {
       events.drag(event);
@@ -45,7 +37,13 @@ module.exports = function(ctx) {
     }
   };
 
+  var mouseDownStart = {};
   events.mousedown = function(event) {
+    mouseDownStart = {
+      time: new Date().getTime(),
+      point: event.point
+    };
+
     isDown = true;
     var target = findTargetAt(event, ctx);
     event.featureTarget = target;
@@ -56,7 +54,18 @@ module.exports = function(ctx) {
     isDown = false;
     var target = findTargetAt(event, ctx);
     event.featureTarget = target;
-    currentMode.mouseup(event);
+
+    var endTime = new Date().getTime();
+
+    var moveDistance = mouseDownStart.point ? euclideanDistance(mouseDownStart.point, event.point) : false;
+
+    if (moveDistance !== false && (moveDistance < closeTolerance || (moveDistance < tolerance && (endTime - mouseDownStart.time) < 500))) {
+      currentMode.click(event);
+    }
+    else {
+      currentMode.mouseup(event);
+    }
+
   };
 
   events.trash = function() {
@@ -129,8 +138,6 @@ module.exports = function(ctx) {
       }
     },
     addEventListeners: function() {
-      ctx.map.on('click', events.click);
-      ctx.map.on('dblclick', events.doubleclick);
       ctx.map.on('mousemove', events.mousemove);
 
       ctx.map.on('mousedown', events.mousedown);
@@ -144,8 +151,6 @@ module.exports = function(ctx) {
       ctx.map.on('zoomend', events.zoomend);
     },
     removeEventListeners: function() {
-      ctx.map.off('click', events.click);
-      ctx.map.off('dblclick', events.doubleclick);
       ctx.map.off('mousemove', events.mousemove);
 
       ctx.map.off('mousedown', events.mousedown);
diff --git a/src/lib/euclidean_distance.js b/src/lib/euclidean_distance.js
new file mode 100644
index 00000000000..75392ca2df3
--- /dev/null
+++ b/src/lib/euclidean_distance.js
@@ -0,0 +1,4 @@
+module.exports = function(a, b) {
+    var x = a.x - b.x, y = a.y - b.y;
+    return Math.sqrt((x * x) + (y * y));
+};
diff --git a/src/lib/mode_handler.js b/src/lib/mode_handler.js
index 914fde12f41..a985e195050 100644
--- a/src/lib/mode_handler.js
+++ b/src/lib/mode_handler.js
@@ -57,9 +57,6 @@ var ModeHandler = function(mode, DrawContext) {
     click: function(event) {
       delegate('click', event);
     },
-    doubleclick: function(event) {
-      delegate('doubleclick', event);
-    },
     mousemove: function(event) {
       delegate('mousemove', event);
     },
diff --git a/src/modes/direct_select.js b/src/modes/direct_select.js
index 975af29f080..9e966772edd 100644
--- a/src/modes/direct_select.js
+++ b/src/modes/direct_select.js
@@ -42,9 +42,7 @@ module.exports = function(ctx, opts) {
     start: function() {
       this.on('mousedown', isOfMetaType('vertex'), onVertex);
       this.on('mousedown', isOfMetaType('midpoint'), onMidpoint);
-      this.on('drag', () => {
-        return dragging;
-      }, function(e) {
+      this.on('drag', () => dragging, function(e) {
         e.originalEvent.stopPropagation();
         if (coordPos === null) {
           setupCoordPos();
@@ -66,8 +64,7 @@ module.exports = function(ctx, opts) {
         numCoords = null;
         startPos = null;
       });
-      this.on('click', noFeature, function(e) {
-        e.originalEvent.stopPropagation();
+      this.on('click', noFeature, function() {
         ctx.events.changeMode('simple_select');
       });
       this.on('trash', () => selectedCoordPaths.length > 0, function() {
diff --git a/src/modes/simple_select.js b/src/modes/simple_select.js
index 5b43aa8ecb2..d61ad9ab2f4 100644
--- a/src/modes/simple_select.js
+++ b/src/modes/simple_select.js
@@ -65,7 +65,7 @@ module.exports = function(ctx, startingSelectedFeatureIds) {
         var isSelected = selectedFeaturesById[id] !== undefined;
 
         if (isSelected && !isShiftDown(e)) {
-          this.on('mouseup', readyForDirectSelect, directSelect);
+          this.on('click', readyForDirectSelect, directSelect);
         }
         else if (isSelected && isShiftDown(e)) {
           delete selectedFeaturesById[id];
@@ -94,7 +94,7 @@ module.exports = function(ctx, startingSelectedFeatureIds) {
       });
 
       this.on('drag', () => dragging, function(e) {
-        this.off('mouseup', readyForDirectSelect, directSelect);
+        this.off('click', readyForDirectSelect, directSelect);
         e.originalEvent.stopPropagation();
         if (featureCoords === null) {
           buildFeatureCoords();
diff --git a/test/line.test.js b/test/line.test.js
index 4c2e69d62cc..7a00ed429cf 100644
--- a/test/line.test.js
+++ b/test/line.test.js
@@ -1,7 +1,7 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl-js-mock';
 import GLDraw from '../';
-import { accessToken, createMap, features } from './utils';
+import { accessToken, createMap, features, click } from './utils';
 
 var feature = features.line;
 
@@ -20,7 +20,7 @@ test('Line draw class', function lineDrawClass(t){
   for (var i = 0; i < coords.length; i++) {
     let c = coords[i];
 
-    map.fire('click', {
+    click(map, {
       lngLat: {
         lng: c[0],
         lat: c[1]
diff --git a/test/point.test.js b/test/point.test.js
index f2bd93d0671..497d16461c5 100644
--- a/test/point.test.js
+++ b/test/point.test.js
@@ -1,7 +1,7 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl-js-mock';
 import GLDraw from '../';
-import { createMap } from './utils';
+import { createMap, click } from './utils';
 
 test('Point geometry class', t => {
   var map = createMap();
@@ -10,7 +10,7 @@ test('Point geometry class', t => {
 
   map.on('load', function() {
     Draw.changeMode('draw_point');
-    map.fire('click', {
+    click(map, {
       lngLat: {
         lng: 10,
         lat: 10
diff --git a/test/polygon.test.js b/test/polygon.test.js
index 8e33bbf29c7..700e454c930 100644
--- a/test/polygon.test.js
+++ b/test/polygon.test.js
@@ -1,7 +1,7 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl-js-mock';
 import GLDraw from '../';
-import {createMap, features } from './utils';
+import {createMap, features, click } from './utils';
 
 var feature = features.polygon;
 
@@ -15,7 +15,7 @@ test('Polygon geometry class', t => {
     let coords = feature.geometry.coordinates[0];
     for (var i = 0; i < coords.length-1; i++) {
       var c = coords[i];
-      map.fire('click',{
+      click(map, {
         lngLat: {
           lng: c[0],
           lat: c[1]
@@ -27,7 +27,7 @@ test('Polygon geometry class', t => {
       });
     }
 
-    map.fire('click', {
+    click(map, {
       lngLat: {
         lng: coords[coords.length - 2][0],
         lat: coords[coords.length - 2][1]
diff --git a/test/utils.js b/test/utils.js
index 1ad886fbbf1..50cdb0144c4 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -10,6 +10,11 @@ export function createMap() {
   return map;
 }
 
+export function click(map, payload) {
+  map.fire('mousedown', payload);
+  map.fire('mouseup', payload);
+}
+
 export const features = {
 
   line: {

From 1aa3bafea8bc5a3059e3de5c3e6c880fc8565a56 Mon Sep 17 00:00:00 2001
From: Matthew Chase Whittemore <mcwhittemore@gmail.com>
Date: Thu, 5 May 2016 11:53:52 -0400
Subject: [PATCH 2/2] don't drag until it cannot be a click

---
 src/events.js | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/events.js b/src/events.js
index ac0c4009591..61ea86fa462 100644
--- a/src/events.js
+++ b/src/events.js
@@ -13,21 +13,38 @@ var modes = {
 const closeTolerance = 4;
 const tolerance = 12;
 
+const isClick = (start, end) => {
+  start.point = start.point || end.point;
+  start.time = start.time || end.time;
+  var moveDistance = euclideanDistance(start.point, end.point);
+  return moveDistance < closeTolerance || (moveDistance < tolerance && (end.time - start.time) < 500);
+};
+
 module.exports = function(ctx) {
 
-  var isDown = false;
+  var mouseDownInfo = {
+    isDown: false
+  };
 
   var events = {};
   var currentModeName = 'simple_select';
   var currentMode = ModeHandler(modes.simple_select(ctx), ctx);
 
   events.drag = function(event) {
-    ctx.ui.setClass({mouse: 'drag'});
-    currentMode.drag(event);
+    if (isClick(mouseDownInfo, {
+      point: event.point,
+      time: new Date().getTime()
+    })) {
+      event.originalEvent.stopPropagation();
+    }
+    else {
+      ctx.ui.setClass({mouse: 'drag'});
+      currentMode.drag(event);
+    }
   };
 
   events.mousemove = function(event) {
-    if (isDown) {
+    if (mouseDownInfo.isDown) {
       events.drag(event);
     }
     else {
@@ -37,29 +54,27 @@ module.exports = function(ctx) {
     }
   };
 
-  var mouseDownStart = {};
   events.mousedown = function(event) {
-    mouseDownStart = {
+    mouseDownInfo = {
+      isDown: true,
       time: new Date().getTime(),
       point: event.point
     };
 
-    isDown = true;
     var target = findTargetAt(event, ctx);
     event.featureTarget = target;
     currentMode.mousedown(event);
   };
 
   events.mouseup = function(event) {
-    isDown = false;
+    mouseDownInfo.isDown = false;
     var target = findTargetAt(event, ctx);
     event.featureTarget = target;
 
-    var endTime = new Date().getTime();
-
-    var moveDistance = mouseDownStart.point ? euclideanDistance(mouseDownStart.point, event.point) : false;
-
-    if (moveDistance !== false && (moveDistance < closeTolerance || (moveDistance < tolerance && (endTime - mouseDownStart.time) < 500))) {
+    if (isClick(mouseDownInfo, {
+      point: event.point,
+      time: new Date().getTime()
+    })) {
       currentMode.click(event);
     }
     else {