add pinch

src/chart/treemap/TreemapView.js

@@ -553,7 +553,7 @@
          * @private
          */
         _onZoom: function (scale, mouseX, mouseY) {
-            if (this._state !== 'animating' && !this._controller.isDragging()) {
+            if (this._state !== 'animating') {
                 // These param must not be cached.
                 var viewRoot = this.seriesModel.getViewRoot();
 

src/component/dataZoom/InsideZoomView.js

@@ -89,10 +89,6 @@ define(function (require) {
          * @private
          */
         _onZoom: function (controller, coordInfo, scale, mouseX, mouseY) {
-            if (controller.isDragging()) {
-                return;
-            }
-
             var dataZoomModel = this.dataZoomModel;
             var range = scaleCartesian(
                 scale, [mouseX, mouseY], dataZoomModel.getRange(),

src/component/helper/RoamController.js

@@ -23,7 +23,8 @@ define(function (require) {
     }
 
     function mousemove(e) {
-        if (this._dragging && !this._pinching) {
+        if (this._dragging && e.gestureEvent !== 'pinchchange') {
+
             var rawE = e.event;
             rawE.preventDefault && rawE.preventDefault();
 
@@ -54,29 +55,19 @@ define(function (require) {
     }
 
     function mousewheel(e) {
-        var scale = e.wheelDelta > 0 ? 1.1 : 1 / 1.1;
-        zoom.call(this, e, scale);
-    }
-
-    function pinchstart() {
-        this._pinching = true;
-    }
-
-    function pinchchange(e) {
-        var scale = e.deltaScale > 1 ? 1.1 : 1 / 1.1;
-        zoom.call(this, e, scale);
+        var zoomDelta = e.wheelDelta < 0 ? 1.1 : 1 / 1.1;
+        zoom.call(this, e, zoomDelta, e.offsetX, e.offsetY);
     }
 
-    function pinchend() {
-        this._pinching = false;
+    function pinch(e) {
+        var zoomDelta = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
+        zoom.call(this, e, zoomDelta, e.pinchX, e.pinchY);
     }
 
-    function zoom(e, eventScale) {
-        var mouseX = e.offsetX;
-        var mouseY = e.offsetY;
+    function zoom(e, zoomDelta, zoomX, zoomY) {
         var rect = this.rect;
 
-        if (rect && rect.contain(mouseX, mouseY)) {
+        if (rect && rect.contain(zoomX, zoomY)) {
 
             var target = this.target;
 
@@ -85,7 +76,7 @@ define(function (require) {
                 var scale = target.scale;
 
                 var newZoom = this._zoom = this._zoom || 1;
-                newZoom *= eventScale;
+                newZoom *= zoomDelta;
                 // newZoom = Math.max(
                 //     Math.min(target.maxZoom, newZoom),
                 //     target.minZoom
@@ -93,15 +84,15 @@ define(function (require) {
                 var zoomScale = newZoom / this._zoom;
                 this._zoom = newZoom;
                 // Keep the mouse center when scaling
-                pos[0] -= (mouseX - pos[0]) * (zoomScale - 1);
-                pos[1] -= (mouseY - pos[1]) * (zoomScale - 1);
+                pos[0] -= (zoomX - pos[0]) * (zoomScale - 1);
+                pos[1] -= (zoomY - pos[1]) * (zoomScale - 1);
                 scale[0] *= zoomScale;
                 scale[1] *= zoomScale;
 
                 target.dirty();
             }
 
-            this.trigger('zoom', eventScale, mouseX, mouseY);
+            this.trigger('zoom', zoomDelta, zoomX, zoomY);
         }
     }
 
@@ -132,9 +123,7 @@ define(function (require) {
         var mousemoveHandler = bind(mousemove, this);
         var mouseupHandler = bind(mouseup, this);
         var mousewheelHandler = bind(mousewheel, this);
-        var pinchstartHandler = bind(pinchstart, this);
-        var pinchchangeHandler = bind(pinchchange, this);
-        var pinchendHandler = bind(pinchend, this);
+        var pinchHandler = bind(pinch, this);
 
         Eventful.call(this);
 
@@ -154,9 +143,7 @@ define(function (require) {
             }
             if (controlType && controlType !== 'pan') {
                 zr.on('mousewheel', mousewheelHandler);
-                zr.on('pinchstart', pinchstartHandler);
-                zr.on('pinchchange', pinchchangeHandler);
-                zr.on('pinchend', pinchendHandler);
+                zr.on('pinch', pinchHandler);
             }
         };
 
@@ -165,9 +152,7 @@ define(function (require) {
             zr.off('mousemove', mousemoveHandler);
             zr.off('mouseup', mouseupHandler);
             zr.off('mousewheel', mousewheelHandler);
-            zr.off('pinchstart', pinchstartHandler);
-            zr.off('pinchchange', pinchchangeHandler);
-            zr.off('pinchend', pinchendHandler);
+            zr.off('pinch', pinchHandler);
         };
 
         this.dispose = this.disable;

src/component/tooltip/TooltipContent.js

@@ -5,6 +5,7 @@ define(function (require) {
 
     var zrUtil = require('zrender/core/util');
     var zrColor = require('zrender/tool/color');
+    var eventUtil = require('zrender/core/event');
     var formatUtil = require('../../util/format');
     var each = zrUtil.each;
     var toCamelCase = formatUtil.toCamelCase;
@@ -142,6 +143,33 @@ define(function (require) {
             }
             self._inContent = false;
         };
+
+        compromiseMobile(el, container);
+    }
+
+    function compromiseMobile(tooltipContentEl, container) {
+        // Prevent default behavior on mobile. For example,
+        // defuault pinch gesture will cause browser zoom.
+        // We do not preventing event on tooltip contnet el,
+        // because user may need customization in tooltip el.
+        eventUtil.addEventListener(container, 'touchstart', preventDefault);
+        eventUtil.addEventListener(container, 'touchmove', preventDefault);
+        eventUtil.addEventListener(container, 'touchend', preventDefault);
+
+        function preventDefault(e) {
+            if (contains(e.target)) {
+                e.preventDefault();
+            }
+        }
+
+        function contains(targetEl) {
+            while (targetEl && targetEl !== container) {
+                if (targetEl === tooltipContentEl) {
+                    return true;
+                }
+                targetEl = targetEl.parentNode;
+            }
+        }
     }
 
     TooltipContent.prototype = {

test/config.js

@@ -2,7 +2,8 @@ require.config({
     paths: {
         'geoJson': '../geoData/geoJson',
         'theme': '../theme',
-        'data': './data'
+        'data': './data',
+        'map': '../map'
     },
     packages: [
         {

test/lib/facePrint.js

@@ -5,18 +5,32 @@
     var infoDom;
     var msgs = [];
 
+    var count = 0;
+
     window.facePrint = function (msg, delimiter, max) {
         if (!infoDom) {
             infoDom = createInfoDom();
         }
 
         msgs.push(encodeHTML(msg));
+        count++;
 
-        if (msgs.length > (max || 50)) {
+        if (msgs.length > (max || 30)) {
             msgs.shift();
         }
 
-        infoDom.innerHTML = msgs.join(delimiter || ' ');
+        if (delimiter) {
+            infoDom.innerHTML = msgs.join(delimiter);
+        }
+        else {
+            var str = '';
+            // Make some change in view, otherwise user may
+            // be not aware that log is still printing.
+            for (var i = 0; i < msgs.length; i++) {
+                str += msgs[i] + ' ' + (count - msgs.length + i) + ' ';
+            }
+            infoDom.innerHTML = str;
+        }
     };
 
     function createInfoDom() {

test/map.html

 <html>
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="esl.js"></script>
         <script src="config.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
     </head>
     <body>
         <style>
@@ -25,7 +27,7 @@
                 'echarts/component/dataRange'
             ], function (echarts) {
 
-                require(['map/china'], function () {
+                require(['map/js/china'], function () {
                     var chart = echarts.init(document.getElementById('main'), null, {
                         renderer: 'canvas'
                     });