add touch support of freehand mode of DrawTool, fix #1145

Author: fuzhenn

src/map/Map.DomEvents.js

@@ -199,7 +199,8 @@ Map.include(/** @lends Map.prototype */ {
         }
         let mimicClick = false;
         // ignore click lasted for more than 300ms.
-        if (type === 'mousedown' || (type === 'touchstart' && e.touches.length === 1)) {
+        // happen.js produce event without touches
+        if (type === 'mousedown' || (type === 'touchstart' && (!e.touches || e.touches.length === 1))) {
             this._mouseDownTime = now();
         } else if ((type === 'click' || type === 'touchend' || type === 'contextmenu')) {
             if (!this._mouseDownTime) {

src/map/handler/Map.GeometryEvents.js

@@ -178,7 +178,7 @@ class MapGeometryEventsHandler extends Handler {
         let oneMoreEvent = null;
         const eventType = type || domEvent.type;
         // ignore click lasted for more than 300ms.
-        if (eventType === 'mousedown' || (eventType === 'touchstart' && domEvent.touches.length === 1)) {
+        if (eventType === 'mousedown' || (eventType === 'touchstart' && domEvent.touches && domEvent.touches.length === 1)) {
             this._mouseDownTime = now();
         } else if ((eventType === 'click' || eventType === 'touchend') && this._mouseDownTime) {
             const downTime = this._mouseDownTime;

src/map/tool/DrawTool.js

@@ -102,8 +102,11 @@ class DrawTool extends MapTool {
          */
         this._events = {
             'click': this._clickHandler,
-            'mousemove': this._mouseMoveHandler,
+            'mousemove touchmove': this._mouseMoveHandler,
             'dblclick': this._doubleClickHandler,
+            'mousedown touchstart': this._mouseDownHandler,
+            'mouseup touchend': this._mouseUpHandler,
+            'mousemove': this._mouseMoveHandler,
             'mousedown': this._mouseDownHandler,
             'mouseup': this._mouseUpHandler
         };
@@ -264,7 +267,14 @@ class DrawTool extends MapTool {
             'doubleClickZoom': this.options['doubleClickZoom']
         });
         const actions = this._getRegisterMode()['action'];
-        if (actions.indexOf('mousedown') > -1) {
+        let dragging = false;
+        for (let i = 0; i < actions.length; i++) {
+            if (actions[i].indexOf('mousemove') >= 0) {
+                dragging = true;
+                break;
+            }
+        }
+        if (dragging) {
             const map = this.getMap();
             this._mapDraggable = map.options['draggable'];
             map.config({
@@ -569,7 +579,8 @@ class DrawTool extends MapTool {
      */
     _getMouseContainerPoint(event) {
         const action = this._getRegisterMode()['action'];
-        if (action === 'mousedown') {
+        if (action[0].indexOf('mousedown') >= 0 || action[0].indexOf('touchstart') >= 0) {
+            //prevent map's event propogation
             stopPropagation(event['domEvent']);
         }
         return event['containerPoint'];

src/map/tool/DrawToolRegister.js

@@ -37,7 +37,7 @@ DrawTool.registerMode('circle', extend({
 }, circleHooks));
 
 DrawTool.registerMode('freeHandCircle', extend({
-    'action': ['mousedown', 'mousemove', 'mouseup']
+    'action': ['mousedown touchstart', 'mousemove touchmove', 'mouseup touchend']
 }, circleHooks));
 
 const ellipseHooks = {
@@ -74,7 +74,7 @@ DrawTool.registerMode('ellipse', extend({
 }, ellipseHooks));
 
 DrawTool.registerMode('freeHandEllipse', extend({
-    'action': ['mousedown', 'mousemove', 'mouseup']
+    'action': ['mousedown touchstart', 'mousemove touchmove', 'mouseup touchend']
 }, ellipseHooks));
 
 const rectangleHooks = {
@@ -107,7 +107,7 @@ DrawTool.registerMode('rectangle', extend({
 }, rectangleHooks));
 
 DrawTool.registerMode('freeHandRectangle', extend({
-    'action': ['mousedown', 'mousemove', 'mouseup']
+    'action': ['mousedown touchstart', 'mousemove touchmove', 'mouseup touchend']
 }, rectangleHooks));
 
 DrawTool.registerMode('point', {
@@ -178,7 +178,7 @@ DrawTool.registerMode('polygon', extend({
 }, polygonHooks));
 
 DrawTool.registerMode('freeHandPolygon', extend({
-    'action': ['mousedown', 'mousemove', 'mouseup']
+    'action': ['mousedown touchstart', 'mousemove touchmove', 'mouseup touchend']
 }, polygonHooks));
 
 const lineStringHooks = {
@@ -210,7 +210,7 @@ DrawTool.registerMode('linestring', extend({
 }, lineStringHooks));
 
 DrawTool.registerMode('freeHandLinestring', extend({
-    'action': ['mousedown', 'mousemove', 'mouseup']
+    'action': ['mousedown touchstart', 'mousemove touchmove', 'mouseup touchend']
 }, lineStringHooks));
 
 DrawTool.registerMode('arccurve', {

test/map/tools/DrawToolSpec.js

@@ -79,6 +79,27 @@ describe('DrawTool', function () {
         });
     }
 
+    function dragDrawByTouch() {
+        var center = map.getCenter();
+
+        var domPosition = GET_PAGE_POSITION(container);
+        var point = map.coordinateToContainerPoint(center).add(domPosition);
+        happen.touchstart(eventContainer, {
+            'clientX':point.x,
+            'clientY':point.y
+        });
+        for (var i = 0; i < 10; i++) {
+            happen.touchmove(eventContainer, {
+                'clientX':point.x - i,
+                'clientY':point.y - i
+            });
+        }
+        happen.touchend(eventContainer, {
+            'clientX':point.x - 10,
+            'clientY':point.y - 10
+        });
+    }
+
     function drawPoint() {
         var center = map.getCenter();
 
@@ -227,9 +248,10 @@ describe('DrawTool', function () {
                 expect(param.geometry instanceof maptalks.Polygon).to.be.ok();
                 var coordinates = param.geometry.getCoordinates()[0];
                 expect(coordinates.length === 5).to.be.ok();
-                if (!maptalks.Browser.ie) {
-                    expect(coordinates[1].toArray()).to.be.closeTo([118.846756, 32.046603]);
-                }
+                expect(coordinates[0].toArray()).not.to.be.eql(coordinates[1].toArray());
+                expect(coordinates[1].toArray()).not.to.be.eql(coordinates[2].toArray());
+                expect(coordinates[2].toArray()).not.to.be.eql(coordinates[3].toArray());
+                expect(coordinates[0].toArray()).to.be.eql(coordinates[0].toArray());
                 done();
             }
             var drawTool = new maptalks.DrawTool({
@@ -270,6 +292,20 @@ describe('DrawTool', function () {
             dragDraw(drawTool);
         });
 
+        it('can draw FreeHandLinestring with touch', function (done) {
+            function drawEnd(param) {
+                expect(param.geometry instanceof maptalks.LineString).to.be.ok();
+                expect(param.geometry.getLength()).to.above(0);
+                done();
+            }
+            var drawTool = new maptalks.DrawTool({
+                mode : 'FreeHandLinestring'
+            });
+            drawTool.addTo(map);
+            drawTool.on('drawend', drawEnd);
+            dragDrawByTouch(drawTool);
+        });
+
         it('can draw FreeHandPolygon', function (done) {
             function drawEnd(param) {
                 expect(param.geometry instanceof maptalks.Polygon).to.be.ok();