echarts 4.5.0 → 4.9.0

package/src/component/axis/axisSplitHelper.js

@@ -0,0 +1,114 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import * as zrUtil from 'zrender/src/core/util';
+import * as graphic from '../../util/graphic';
+
+
+export function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+
+    if (axis.scale.isBlank()) {
+        return;
+    }
+
+    var splitAreaModel = axisModel.getModel('splitArea');
+    var areaStyleModel = splitAreaModel.getModel('areaStyle');
+    var areaColors = areaStyleModel.get('color');
+
+    var gridRect = gridModel.coordinateSystem.getRect();
+
+    var ticksCoords = axis.getTicksCoords({
+        tickModel: splitAreaModel,
+        clamp: true
+    });
+
+    if (!ticksCoords.length) {
+        return;
+    }
+
+    // For Making appropriate splitArea animation, the color and anid
+    // should be corresponding to previous one if possible.
+    var areaColorsLen = areaColors.length;
+    var lastSplitAreaColors = axisView.__splitAreaColors;
+    var newSplitAreaColors = zrUtil.createHashMap();
+    var colorIndex = 0;
+    if (lastSplitAreaColors) {
+        for (var i = 0; i < ticksCoords.length; i++) {
+            var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+            if (cIndex != null) {
+                colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+                break;
+            }
+        }
+    }
+
+    var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+
+    var areaStyle = areaStyleModel.getAreaStyle();
+    areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
+
+    for (var i = 1; i < ticksCoords.length; i++) {
+        var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+        var x;
+        var y;
+        var width;
+        var height;
+        if (axis.isHorizontal()) {
+            x = prev;
+            y = gridRect.y;
+            width = tickCoord - x;
+            height = gridRect.height;
+            prev = x + width;
+        }
+        else {
+            x = gridRect.x;
+            y = prev;
+            width = gridRect.width;
+            height = tickCoord - y;
+            prev = y + height;
+        }
+
+        var tickValue = ticksCoords[i - 1].tickValue;
+        tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+
+        axisGroup.add(new graphic.Rect({
+            anid: tickValue != null ? 'area_' + tickValue : null,
+            shape: {
+                x: x,
+                y: y,
+                width: width,
+                height: height
+            },
+            style: zrUtil.defaults({
+                fill: areaColors[colorIndex]
+            }, areaStyle),
+            silent: true
+        }));
+
+        colorIndex = (colorIndex + 1) % areaColorsLen;
+    }
+
+    axisView.__splitAreaColors = newSplitAreaColors;
+}
+
+export function rectCoordAxisHandleRemove(axisView) {
+    axisView.__splitAreaColors = null;
+}

package/src/component/axisPointer/axisTrigger.js

@@ -163,7 +163,7 @@ function processOnAxis(axisInfo, newValue, updaters, dontSnap, outputFinder) {
     var snapToValue = payloadInfo.snapToValue;
 
     // Fill content of event obj for echarts.connect.
-    // By defualt use the first involved series data as a sample to connect.
+    // By default use the first involved series data as a sample to connect.
     if (payloadBatch[0] && outputFinder.seriesIndex == null) {
         zrUtil.extend(outputFinder, payloadBatch[0]);
     }

package/src/component/brush/BrushView.js

@@ -20,6 +20,7 @@
 import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import BrushController from '../helper/BrushController';
+import {layoutCovers} from './visualEncoding';
 
 export default echarts.extendComponentView({
 
@@ -65,7 +66,13 @@ export default echarts.extendComponentView({
     /**
      * @override
      */
-    updateTransform: updateController,
+    updateTransform: function (brushModel, ecModel) {
+        // PENDING: `updateTransform` is a little tricky, whose layout need
+        // to be calculate mandatorily and other stages will not be performed.
+        // Take care the correctness of the logic. See #11754 .
+        layoutCovers(ecModel);
+        return updateController.apply(this, arguments);
+    },
 
     /**
      * @override

package/src/component/brush/visualEncoding.js

@@ -35,16 +35,19 @@ var PRIORITY_BRUSH = echarts.PRIORITY.VISUAL.BRUSH;
  */
 echarts.registerLayout(PRIORITY_BRUSH, function (ecModel, api, payload) {
     ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
-
         payload && payload.type === 'takeGlobalCursor' && brushModel.setBrushOption(
             payload.key === 'brush' ? payload.brushOption : {brushType: false}
         );
+    });
+    layoutCovers(ecModel);
+});
 
+export function layoutCovers(ecModel) {
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
         var brushTargetManager = brushModel.brushTargetManager = new BrushTargetManager(brushModel.option, ecModel);
-
         brushTargetManager.setInputRanges(brushModel.areas, ecModel);
     });
-});
+}
 
 /**
  * Register the visual encoding if this modules required.

package/src/component/dataZoom/SliderZoomView.js

@@ -450,10 +450,6 @@ var SliderZoomView = DataZoomView.extend({
             draggable: true,
             cursor: getCursor(this._orient),
             drift: bind(this._onDragMove, this, 'all'),
-            onmousemove: function (e) {
-                // Fot mobile devicem, prevent screen slider on the button.
-                eventTool.stop(e.event);
-            },
             ondragstart: bind(this._showDataInfo, this, true),
             ondragend: bind(this._onDragEnd, this),
             onmouseover: bind(this._showDataInfo, this, true),
@@ -489,10 +485,6 @@ var SliderZoomView = DataZoomView.extend({
                     cursor: getCursor(this._orient),
                     draggable: true,
                     drift: bind(this._onDragMove, this, handleIndex),
-                    onmousemove: function (e) {
-                        // Fot mobile devicem, prevent screen slider on the button.
-                        eventTool.stop(e.event);
-                    },
                     ondragend: bind(this._onDragEnd, this),
                     onmouseover: bind(this._showDataInfo, this, true),
                     onmouseout: bind(this._showDataInfo, this, false)
@@ -714,9 +706,12 @@ var SliderZoomView = DataZoomView.extend({
         handleLabels[1].attr('invisible', !showOrHide);
     },
 
-    _onDragMove: function (handleIndex, dx, dy) {
+    _onDragMove: function (handleIndex, dx, dy, event) {
         this._dragging = true;
 
+        // For mobile device, prevent screen slider on the button.
+        eventTool.stop(event.event);
+
         // Transform dx, dy to bar coordination.
         var barTransform = this._displayables.barGroup.getLocalTransform();
         var vertex = graphic.applyTransform([dx, dy], barTransform, true);

package/src/component/helper/BrushController.js

@@ -136,12 +136,6 @@ function BrushController(zr) {
      */
     this._dragging;
 
-    /**
-     * @private
-     * @type {Object}
-     */
-    this._lastMouseMovePoint = {};
-
     /**
      * @private
      * @type {Array}
@@ -186,7 +180,8 @@ function BrushController(zr) {
      * @type {Object}
      */
     this._handlers = {};
-    each(mouseHandlers, function (handler, eventName) {
+
+    each(pointerHandlers, function (handler, eventName) {
         this._handlers[eventName] = zrUtil.bind(handler, this);
     }, this);
 }
@@ -382,9 +377,7 @@ function doEnableBrush(controller, brushOption) {
         interactionMutex.take(zr, MUTEX_RESOURCE_KEY, controller._uid);
     }
 
-    each(controller._handlers, function (handler, eventName) {
-        zr.on(eventName, handler);
-    });
+    mountHandlers(zr, controller._handlers);
 
     controller._brushType = brushOption.brushType;
     controller._brushOption = zrUtil.merge(zrUtil.clone(DEFAULT_BRUSH_OPT), brushOption, true);
@@ -395,13 +388,23 @@ function doDisableBrush(controller) {
 
     interactionMutex.release(zr, MUTEX_RESOURCE_KEY, controller._uid);
 
-    each(controller._handlers, function (handler, eventName) {
-        zr.off(eventName, handler);
-    });
+    unmountHandlers(zr, controller._handlers);
 
     controller._brushType = controller._brushOption = null;
 }
 
+function mountHandlers(zr, handlers) {
+    each(handlers, function (handler, eventName) {
+        zr.on(eventName, handler);
+    });
+}
+
+function unmountHandlers(zr, handlers) {
+    each(handlers, function (handler, eventName) {
+        zr.off(eventName, handler);
+    });
+}
+
 function createCover(controller, brushOption) {
     var cover = coverRenderers[brushOption.brushType].createCover(controller, brushOption);
     cover.__brushOption = brushOption;
@@ -715,8 +718,14 @@ function pointsToRect(points) {
 }
 
 function resetCursor(controller, e, localCursorPoint) {
-    // Check active
-    if (!controller._brushType) {
+    if (
+        // Check active
+        !controller._brushType
+        // resetCursor should be always called when mouse is in zr area,
+        // but not called when mouse is out of zr area to avoid bad influence
+        // if `mousemove`, `mouseup` are triggered from `document` event.
+        || isOutsideZrArea(controller, e)
+    ) {
         return;
     }
 
@@ -820,7 +829,7 @@ function determineBrushType(brushType, panel) {
     return brushType;
 }
 
-var mouseHandlers = {
+var pointerHandlers = {
 
     mousedown: function (e) {
         if (this._dragging) {
@@ -845,56 +854,34 @@ var mouseHandlers = {
     },
 
     mousemove: function (e) {
-        var lastPoint = this._lastMouseMovePoint;
-        lastPoint.x = e.offsetX;
-        lastPoint.y = e.offsetY;
+        var x = e.offsetX;
+        var y = e.offsetY;
 
-        var localCursorPoint = this.group.transformCoordToLocal(lastPoint.x, lastPoint.y);
+        var localCursorPoint = this.group.transformCoordToLocal(x, y);
 
         resetCursor(this, e, localCursorPoint);
 
         if (this._dragging) {
-
             preventDefault(e);
-
             var eventParams = updateCoverByMouse(this, e, localCursorPoint, false);
-
             eventParams && trigger(this, eventParams);
         }
     },
 
     mouseup: function (e) {
         handleDragEnd(this, e);
-    },
-
-    globalout: function (e) {
-        handleDragEnd(this, e, true);
     }
 };
 
-function handleDragEnd(controller, e, isGlobalOut) {
-    if (controller._dragging) {
 
-        // Just be worried about bring some side effect to the world
-        // out of echarts, we do not `preventDefault` for globalout.
-        !isGlobalOut && preventDefault(e);
+function handleDragEnd(controller, e) {
+    if (controller._dragging) {
+        preventDefault(e);
 
-        var pointerX = e.offsetX;
-        var pointerY = e.offsetY;
-        var lastPoint = controller._lastMouseMovePoint;
-        if (isGlobalOut) {
-            pointerX = lastPoint.x;
-            pointerY = lastPoint.y;
-        }
+        var x = e.offsetX;
+        var y = e.offsetY;
 
-        var localCursorPoint = controller.group.transformCoordToLocal(pointerX, pointerY);
-        // FIXME
-        // Here `e` is used only in `onIrrelevantElement` finally. And it's OK
-        // that pass the `e` of `globalout` to `onIrrelevantElement`. But it is
-        // not a good design of these interfaces. However, we do not refactor
-        // these code now because the implementation of `onIrrelevantElement`
-        // need to be discussed and probably be changed in future, becuase it
-        // slows down the performance of zrender in some cases.
+        var localCursorPoint = controller.group.transformCoordToLocal(x, y);
         var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true);
 
         controller._dragging = false;
@@ -906,6 +893,12 @@ function handleDragEnd(controller, e, isGlobalOut) {
     }
 }
 
+function isOutsideZrArea(controller, x, y) {
+    var zr = controller._zr;
+    return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight();
+}
+
+
 /**
  * key: brushType
  * @type {Object}

package/src/component/helper/MapDraw.js

@@ -24,6 +24,7 @@ import {onIrrelevantElement} from '../../component/helper/cursorHelper';
 import * as graphic from '../../util/graphic';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
 import {getUID} from '../../util/component';
+import Transformable from 'zrender/src/mixin/Transformable';
 
 function getFixedItemStyle(model) {
     var itemStyle = model.getItemStyle();
@@ -181,13 +182,29 @@ MapDraw.prototype = {
         var regionsGroup = this._regionsGroup;
         var group = this.group;
 
-        if (geo._roamTransformable.transform) {
-            group.transform = geo._roamTransformable.transform.slice();
+        var transformInfo = geo.getTransformInfo();
+        // No animation when first draw or in action
+        var isFirstDraw = !regionsGroup.childAt(0) || payload;
+        var targetScale;
+        if (isFirstDraw) {
+            group.transform = transformInfo.roamTransform;
             group.decomposeTransform();
+            group.dirty();
+        }
+        else {
+            var target = new Transformable();
+            target.transform = transformInfo.roamTransform;
+            target.decomposeTransform();
+            var props = {
+                scale: target.scale,
+                position: target.position
+            };
+            targetScale = target.scale;
+            graphic.updateProps(group, props, mapOrGeoModel);
         }
 
-        var scale = geo._rawTransformable.scale;
-        var position = geo._rawTransformable.position;
+        var scale = transformInfo.rawScale;
+        var position = transformInfo.rawPosition;
 
         regionsGroup.removeAll();
 
@@ -326,6 +343,12 @@ MapDraw.prototype = {
                     }
                 );
 
+                if (!isFirstDraw) {
+                    // Text animation
+                    var textScale = [1 / targetScale[0], 1 / targetScale[1]];
+                    graphic.updateProps(textEl, { scale: textScale }, mapOrGeoModel);
+                }
+
                 regionGroup.add(textEl);
             }
 

package/src/component/legend/LegendModel.js

@@ -111,9 +111,9 @@ var LegendModel = echarts.extendComponentModel({
             availableNames.push(seriesName);
             var isPotential;
 
-            if (seriesModel.legendDataProvider) {
-                var data = seriesModel.legendDataProvider();
-                var names = data.mapArray(data.getName);
+            if (seriesModel.legendVisualProvider) {
+                var provider = seriesModel.legendVisualProvider;
+                var names = provider.getAllNames();
 
                 if (!ecModel.isSeriesFiltered(seriesModel)) {
                     availableNames = availableNames.concat(names);

package/src/component/legend/LegendView.js

@@ -175,7 +175,7 @@ export default echarts.extendComponentView({
                 return;
             }
 
-            // Series legend
+            // Legend to control series.
             if (seriesModel) {
                 var data = seriesModel.getData();
                 var color = data.getVisual('color');
@@ -204,29 +204,31 @@ export default echarts.extendComponentView({
                     selectMode
                 );
 
-                itemGroup.on('click', curry(dispatchSelectAction, name, api))
+                itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
                     .on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId))
                     .on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
 
                 legendDrawnMap.set(name, true);
             }
             else {
-                // Data legend of pie, funnel
+                // Legend to control data. In pie and funnel.
                 ecModel.eachRawSeries(function (seriesModel) {
+
                     // In case multiple series has same data name
                     if (legendDrawnMap.get(name)) {
                         return;
                     }
 
-                    if (seriesModel.legendDataProvider) {
-                        var data = seriesModel.legendDataProvider();
-                        var idx = data.indexOfName(name);
-                        if (idx < 0) {
+                    if (seriesModel.legendVisualProvider) {
+                        var provider = seriesModel.legendVisualProvider;
+                        if (!provider.containName(name)) {
                             return;
                         }
 
-                        var color = data.getItemVisual(idx, 'color');
-                        var borderColor = data.getItemVisual(idx, 'borderColor');
+                        var idx = provider.indexOfName(name);
+
+                        var color = provider.getItemVisual(idx, 'color');
+                        var borderColor = provider.getItemVisual(idx, 'borderColor');
 
                         var legendSymbolType = 'roundRect';
 
@@ -238,7 +240,7 @@ export default echarts.extendComponentView({
                         );
 
                         // FIXME: consider different series has items with the same name.
-                        itemGroup.on('click', curry(dispatchSelectAction, name, api))
+                        itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId))
                             // Should not specify the series name, consider legend controls
                             // more than one pie series.
                             .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId))
@@ -518,11 +520,15 @@ function setSymbolStyle(symbol, symbolType, legendModelItemStyle, borderColor, i
     return symbol.setStyle(itemStyle);
 }
 
-function dispatchSelectAction(name, api) {
+function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
+    // downplay before unselect
+    dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
     api.dispatchAction({
         type: 'legendToggleSelect',
-        name: name
+        name: seriesName != null ? seriesName : dataName
     });
+    // highlight after select
+    dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
 }
 
 function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {

package/src/component/legend/ScrollableLegendView.js

@@ -459,26 +459,28 @@ var ScrollableLegendView = LegendView.extend({
     },
 
     _findTargetItemIndex: function (targetDataIndex) {
+        if (!this._showController) {
+            return 0;
+        }
+
         var index;
         var contentGroup = this.getContentGroup();
         var defaultIndex;
 
-        if (this._showController) {
-            contentGroup.eachChild(function (child, idx) {
-                var legendDataIdx = child.__legendDataIndex;
-                // FIXME
-                // If the given targetDataIndex (from model) is illegal,
-                // we use defualtIndex. But the index on the legend model and
-                // action payload is still illegal. That case will not be
-                // changed until some scenario requires.
-                if (defaultIndex == null && legendDataIdx != null) {
-                    defaultIndex = idx;
-                }
-                if (legendDataIdx === targetDataIndex) {
-                    index = idx;
-                }
-            });
-        }
+        contentGroup.eachChild(function (child, idx) {
+            var legendDataIdx = child.__legendDataIndex;
+            // FIXME
+            // If the given targetDataIndex (from model) is illegal,
+            // we use defaultIndex. But the index on the legend model and
+            // action payload is still illegal. That case will not be
+            // changed until some scenario requires.
+            if (defaultIndex == null && legendDataIdx != null) {
+                defaultIndex = idx;
+            }
+            if (legendDataIdx === targetDataIndex) {
+                index = idx;
+            }
+        });
 
         return index != null ? index : defaultIndex;
     }

package/src/component/marker/MarkAreaView.js

@@ -208,9 +208,29 @@ MarkerView.extend({
         // Update visual and layout of line
         areaData.each(function (idx) {
             // Layout
-            areaData.setItemLayout(idx, zrUtil.map(dimPermutations, function (dim) {
+            var points = zrUtil.map(dimPermutations, function (dim) {
                 return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
-            }));
+            });
+            // If none of the area is inside coordSys, allClipped is set to be true
+            // in layout so that label will not be displayed. See #12591
+            var allClipped = true;
+            zrUtil.each(dimPermutations, function (dim) {
+                if (!allClipped) {
+                    return;
+                }
+                var xValue = areaData.get(dim[0], idx);
+                var yValue = areaData.get(dim[1], idx);
+                // If is infinity, the axis should be considered not clipped
+                if ((isInifinity(xValue) || coordSys.getAxis('x').containData(xValue))
+                    && (isInifinity(yValue) || coordSys.getAxis('y').containData(yValue))
+                ) {
+                    allClipped = false;
+                }
+            });
+            areaData.setItemLayout(idx, {
+                points: points,
+                allClipped: allClipped
+            });
 
             // Visual
             areaData.setItemVisual(idx, {
@@ -221,23 +241,41 @@ MarkerView.extend({
 
         areaData.diff(polygonGroup.__data)
             .add(function (idx) {
-                var polygon = new graphic.Polygon({
-                    shape: {
-                        points: areaData.getItemLayout(idx)
-                    }
-                });
-                areaData.setItemGraphicEl(idx, polygon);
-                polygonGroup.group.add(polygon);
+                var layout = areaData.getItemLayout(idx);
+                if (!layout.allClipped) {
+                    var polygon = new graphic.Polygon({
+                        shape: {
+                            points: layout.points
+                        }
+                    });
+                    areaData.setItemGraphicEl(idx, polygon);
+                    polygonGroup.group.add(polygon);
+                }
             })
             .update(function (newIdx, oldIdx) {
                 var polygon = polygonGroup.__data.getItemGraphicEl(oldIdx);
-                graphic.updateProps(polygon, {
-                    shape: {
-                        points: areaData.getItemLayout(newIdx)
+                var layout = areaData.getItemLayout(newIdx);
+                if (!layout.allClipped) {
+                    if (polygon) {
+                        graphic.updateProps(polygon, {
+                            shape: {
+                                points: layout.points
+                            }
+                        }, maModel, newIdx);
                     }
-                }, maModel, newIdx);
-                polygonGroup.group.add(polygon);
-                areaData.setItemGraphicEl(newIdx, polygon);
+                    else {
+                        polygon = new graphic.Polygon({
+                            shape: {
+                                points: layout.points
+                            }
+                        });
+                    }
+                    areaData.setItemGraphicEl(newIdx, polygon);
+                    polygonGroup.group.add(polygon);
+                }
+                else if (polygon) {
+                    polygonGroup.group.remove(polygon);
+                }
             })
             .remove(function (idx) {
                 var polygon = polygonGroup.__data.getItemGraphicEl(idx);

package/src/component/marker/MarkLineModel.js

@@ -38,7 +38,8 @@ export default MarkerModel.extend({
         },
         label: {
             show: true,
-            position: 'end'
+            position: 'end',
+            distance: 5
         },
         lineStyle: {
             type: 'dashed'