[scatter] support updateTransform.

src/chart/heatmap/HeatmapView.js

@@ -246,7 +246,7 @@ export default echarts.extendChartView({
         hmLayer.maxOpacity = seriesModel.get('maxOpacity');
 
         var rect = geo.getViewRect().clone();
-        var roamTransform = geo.getRoamTransform().transform;
+        var roamTransform = geo.getRoamTransform();
         rect.applyTransform(roamTransform);
 
         // Clamp on viewport

src/chart/helper/LargeSymbolDraw.js

@@ -20,6 +20,10 @@ var LargeSymbolPath = graphic.extendShape({
         var symbolProxyShape = symbolProxy.shape;
         var ctx = path.getContext ? path.getContext() : path;
         var canBoost = ctx && size[0] < 4;
+        // Do draw in afterBrush.
+        if (canBoost) {
+            return;
+        }
 
         for (var i = 0; i < points.length;) {
             var x = points[i++];
@@ -29,23 +33,38 @@ var LargeSymbolPath = graphic.extendShape({
                 continue;
             }
 
+            symbolProxyShape.x = x - size[0] / 2;
+            symbolProxyShape.y = y - size[1] / 2;
+            symbolProxyShape.width = size[0];
+            symbolProxyShape.height = size[1];
 
-            if (canBoost) {
-                // Optimize for small symbol
-                // PENDING, Do fill in buildPath??
-                ctx.fillRect(
-                    x - size[0] / 2, y - size[1] / 2,
-                    size[0], size[1]
-                );
-            }
-            else {
-                symbolProxyShape.x = x - size[0] / 2;
-                symbolProxyShape.y = y - size[1] / 2;
-                symbolProxyShape.width = size[0];
-                symbolProxyShape.height = size[1];
+            symbolProxy.buildPath(path, symbolProxyShape, true);
+        }
+    },
+
+    afterBrush: function (ctx) {
+        var shape = this.shape;
+        var points = shape.points;
+        var size = shape.size;
+        var canBoost = size[0] < 4;
+        if (!canBoost) {
+            return;
+        }
 
-                symbolProxy.buildPath(path, symbolProxyShape, true);
+        // Don't consider transform.
+        // PENDING If style or other canvas status changed?
+        for (var i = 0; i < points.length;) {
+            var x = points[i++];
+            var y = points[i++];
+            if (isNaN(x) || isNaN(y)) {
+                continue;
             }
+            // fillRect is faster than building a rect path and draw.
+            // And it support light globalCompositeOperation.
+            ctx.fillRect(
+                x - size[0] / 2, y - size[1] / 2,
+                size[0], size[1]
+            );
         }
     },
 
@@ -82,6 +101,10 @@ function LargeSymbolDraw() {
 
 var largeSymbolProto = LargeSymbolDraw.prototype;
 
+largeSymbolProto.isPersistent = function () {
+    return !this._incremental;
+};
+
 /**
  * Update symbols draw by new data
  * @param {module:echarts/data/List} data

src/chart/helper/SymbolDraw.js

@@ -80,6 +80,10 @@ symbolDrawProto.updateData = function (data, isIgnore) {
     this._data = data;
 };
 
+symbolDrawProto.isPersistent = function () {
+    return true;
+};
+
 symbolDrawProto.updateLayout = function () {
     var data = this._data;
     if (data) {

src/chart/scatter/ScatterView.js

 import * as echarts from '../../echarts';
 import SymbolDraw from '../helper/SymbolDraw';
 import LargeSymbolDraw from '../helper/LargeSymbolDraw';
+import * as matrix from 'zrender/src/core/matrix';
 
 echarts.extendChartView({
 
@@ -8,6 +9,8 @@ echarts.extendChartView({
 
     render: function (seriesModel, ecModel, api) {
         var data = seriesModel.getData();
+        this._removeRoamTransformInPoints(seriesModel, 0, data.count());
+
         var symbolDraw = this._updateSymbolDraw(data, seriesModel);
         symbolDraw.updateData(data);
     },
@@ -19,9 +22,52 @@ echarts.extendChartView({
     },
 
     incrementalRender: function (taskParams, seriesModel, ecModel) {
+        this._removeRoamTransformInPoints(seriesModel, taskParams.start, taskParams.end);
         this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData());
     },
 
+    updateTransform: function (seriesModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        // Must mark group dirty and make sure the incremental layer will be cleared
+        // PENDING
+        this.group.dirty();
+        if (coordSys.getRoamTransform && this._symbolDraw.isPersistent()) {
+            this.group.transform = matrix.clone(coordSys.getRoamTransform());
+            this.group.decomposeTransform();
+        }
+        else {
+            return {
+                update: true
+            };
+        }
+    },
+
+    _removeRoamTransformInPoints: function (seriesModel, start, end) {
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys && coordSys.removeRoamTransformInPoint) {
+            var data = seriesModel.getData();
+            var pt = [];
+            if (seriesModel.get('large')) {
+                var points = data.getLayout('symbolPoints');
+                if (points) {
+                    for (var i = 0; i < points.length; i += 2) {
+                        pt[0] = points[i];
+                        pt[1] = points[i + 1];
+                        coordSys.removeRoamTransformInPoint(pt);
+                        points[i] = pt[0];
+                        points[i + 1] = pt[1];
+                    }
+                }
+            }
+            else {
+                for (var i = start; i < end; i++) {
+                    var pt = data.getItemLayout(i);
+                    coordSys.removeRoamTransformInPoint(pt);
+                }
+            }
+        }
+    },
+
     _updateSymbolDraw: function (data, seriesModel) {
         var symbolDraw = this._symbolDraw;
         var pipelineContext = seriesModel.pipelineContext;

src/coord/View.js

@@ -30,9 +30,9 @@ function View(name) {
 
     Transformable.call(this);
 
-    this._roamTransform = new TransformDummy();
+    this._roamTransformable = new TransformDummy();
 
-    this._viewTransform = new TransformDummy();
+    this._rawTransformable = new TransformDummy();
 
     this._center;
     this._zoom;
@@ -92,13 +92,13 @@ View.prototype = {
      */
     transformTo: function (x, y, width, height) {
         var rect = this.getBoundingRect();
-        var viewTransform = this._viewTransform;
+        var rawTransform = this._rawTransformable;
 
-        viewTransform.transform = rect.calculateTransform(
+        rawTransform.transform = rect.calculateTransform(
             new BoundingRect(x, y, width, height)
         );
 
-        viewTransform.decomposeTransform();
+        rawTransform.decomposeTransform();
 
         this._updateTransform();
     },
@@ -160,19 +160,29 @@ View.prototype = {
      * @return {Array.<number}
      */
     getRoamTransform: function () {
-        return this._roamTransform;
+        return this._roamTransformable.getLocalTransform();
     },
 
+    removeRoamTransformInPoint: function (pt) {
+        if (this._roamTransformable.invTransform) {
+            vector.applyTransform(pt, pt, this._roamTransformable.invTransform);
+        }
+    },
+
+    /**
+     * Remove roam
+     */
+
     _updateCenterAndZoom: function () {
         // Must update after view transform updated
-        var viewTransformMatrix = this._viewTransform.getLocalTransform();
-        var roamTransform = this._roamTransform;
+        var rawTransformMatrix = this._rawTransformable.getLocalTransform();
+        var roamTransform = this._roamTransformable;
         var defaultCenter = this.getDefaultCenter();
         var center = this.getCenter();
         var zoom = this.getZoom();
 
-        center = vector.applyTransform([], center, viewTransformMatrix);
-        defaultCenter = vector.applyTransform([], defaultCenter, viewTransformMatrix);
+        center = vector.applyTransform([], center, rawTransformMatrix);
+        defaultCenter = vector.applyTransform([], defaultCenter, rawTransformMatrix);
 
         roamTransform.origin = center;
         roamTransform.position = [
@@ -189,23 +199,20 @@ View.prototype = {
      * @private
      */
     _updateTransform: function () {
-        var roamTransform = this._roamTransform;
-        var viewTransform = this._viewTransform;
+        var roamTransformable = this._roamTransformable;
+        var rawTransformable = this._rawTransformable;
 
-        viewTransform.parent = roamTransform;
-        roamTransform.updateTransform();
-        viewTransform.updateTransform();
+        rawTransformable.parent = roamTransformable;
+        roamTransformable.updateTransform();
+        rawTransformable.updateTransform();
 
-        viewTransform.transform
-            && matrix.copy(this.transform || (this.transform = []), viewTransform.transform);
+        matrix.copy(this.transform || (this.transform = []), rawTransformable.transform || matrix.create());
+
+        this._rawTransform = rawTransformable.getLocalTransform();
+
+        this.invTransform = this.invTransform || [];
+        matrix.invert(this.invTransform, this.transform);
 
-        if (this.transform) {
-            this.invTransform = this.invTransform || [];
-            matrix.invert(this.invTransform, this.transform);
-        }
-        else {
-            this.invTransform = null;
-        }
         this.decomposeTransform();
     },
 
@@ -229,10 +236,12 @@ View.prototype = {
     /**
      * Convert a single (lon, lat) data item to (x, y) point.
      * @param {Array.<number>} data
+     * @param {boolean} noRoam
+     * @param {Array.<number>} [out]
      * @return {Array.<number>}
      */
-    dataToPoint: function (data, preserved, out) {
-        var transform = this.transform;
+    dataToPoint: function (data, noRoam, out) {
+        var transform = noRoam ? this._rawTransform : this.transform;
         out = out || [];
         return transform
             ? v2ApplyTransform(out, data, transform)

src/coord/geo/Geo.js

@@ -123,18 +123,18 @@ Geo.prototype = {
         // Longitute is inverted
         rect.y = -rect.y - rect.height;
 
-        var viewTransform = this._viewTransform;
+        var rawTransformable = this._rawTransformable;
 
-        viewTransform.transform = rect.calculateTransform(
+        rawTransformable.transform = rect.calculateTransform(
             new BoundingRect(x, y, width, height)
         );
 
-        viewTransform.decomposeTransform();
+        rawTransformable.decomposeTransform();
 
-        var scale = viewTransform.scale;
+        var scale = rawTransformable.scale;
         scale[1] = -scale[1];
 
-        viewTransform.updateTransform();
+        rawTransformable.updateTransform();
 
         this._updateTransform();
     },
@@ -193,15 +193,17 @@ Geo.prototype = {
 
     /**
      * @param {string|Array.<number>} data
+     * @param {boolean} noRoam
+     * @param {Array.<number>} [out]
      * @return {Array.<number>}
      */
-    dataToPoint: function (data, preserved, out) {
+    dataToPoint: function (data, noRoam, out) {
         if (typeof data === 'string') {
             // Map area name to geoCoord
             data = this.getGeoCoord(data);
         }
         if (data) {
-            return View.prototype.dataToPoint.call(this, data, preserved, out);
+            return View.prototype.dataToPoint.call(this, data, noRoam, out);
         }
     },