Merge pull request mapbox#301 from mapbox/synthetic-clicks

Synthetic clicks

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);
   }

bench/lib/mouse_trace.js

@@ -4,18 +4,26 @@ 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({
       lng: coord[0],
       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);
   }

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,33 +10,41 @@ var modes = {
   'draw_polygon': require('./modes/draw_polygon')
 };
 
+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);
-  };
-
-  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);
+    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 {
@@ -46,17 +55,32 @@ module.exports = function(ctx) {
   };
 
   events.mousedown = function(event) {
-    isDown = true;
+    mouseDownInfo = {
+      isDown: true,
+      time: new Date().getTime(),
+      point: event.point
+    };
+
     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;
-    currentMode.mouseup(event);
+
+    if (isClick(mouseDownInfo, {
+      point: event.point,
+      time: new Date().getTime()
+    })) {
+      currentMode.click(event);
+    }
+    else {
+      currentMode.mouseup(event);
+    }
+
   };
 
   events.trash = function() {
@@ -129,8 +153,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 +166,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);

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));
+};

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);
     },

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() {

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();

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]

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

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]

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: {