echarts 3.6.1 → 3.7.2

package/src/component/dataZoom/SliderZoomView.js

@@ -428,7 +428,7 @@ define(function (require) {
 
             barGroup.add(displaybles.filler = new Rect({
                 draggable: true,
-                cursor: 'move',
+                cursor: getCursor(this._orient),
                 drift: bind(this._onDragMove, this, 'all'),
                 onmousemove: function (e) {
                     // Fot mobile devicem, prevent screen slider on the button.
@@ -461,38 +461,23 @@ define(function (require) {
                 }
             })));
 
-            var iconStr = dataZoomModel.get('handleIcon');
             each([0, 1], function (handleIndex) {
-                var iconOpt = {
-                    style: {
-                        strokeNoScale: true
-                    },
-                    rectHover: true,
-                    cursor: this._orient === 'vertical' ? 'ns-resize' : 'ew-resize',
-                    draggable: true,
-                    drift: bind(this._onDragMove, this, handleIndex),
-                    onmousemove: function (e) {
-                        // Fot mobile devicem, prevent screen slider on the button.
-                        eventTool.stop(e.event);
+                var path = graphic.createIcon(
+                    dataZoomModel.get('handleIcon'),
+                    {
+                        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)
                     },
-                    ondragend: bind(this._onDragEnd, this),
-                    onmouseover: bind(this._showDataInfo, this, true),
-                    onmouseout: bind(this._showDataInfo, this, false)
-                };
-                var iconStyle = {x: -1, y: 0, width: 2, height: 2};
-
-                var path = iconStr.indexOf('image://') === 0
-                    ? (
-                        iconStyle.image = iconStr.slice(8),
-                        iconOpt.style = iconStyle,
-                        new graphic.Image(iconOpt)
-                    )
-                    : graphic.makePath(
-                        iconStr.replace('path://', ''),
-                        iconOpt,
-                        iconStyle,
-                        'center'
-                    );
+                    {x: -1, y: 0, width: 2, height: 2}
+                );
 
                 var bRect = path.getBoundingRect();
                 this._handleHeight = numberUtil.parsePercent(dataZoomModel.get('handleSize'), this._size[1]);
@@ -517,7 +502,7 @@ define(function (require) {
                         x: 0, y: 0, text: '',
                         textVerticalAlign: 'middle',
                         textAlign: 'center',
-                        fill: textStyleModel.getTextColor(),
+                        textFill: textStyleModel.getTextColor(),
                         textFont: textStyleModel.getFont()
                     },
                     z2: 10
@@ -797,6 +782,10 @@ define(function (require) {
         return map[thisDim];
     }
 
+    function getCursor(orient) {
+        return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
+    }
+
     return SliderZoomView;
 
 });

package/src/component/dataZoom/roams.js

@@ -62,10 +62,13 @@ define(function(require) {
                 record.controller = createController(api, record);
                 record.dispatchAction = zrUtil.curry(dispatchAction, api);
             }
-            record.controller.enable(
-                dataZoomInfo.disabled ? false : dataZoomInfo.zoomLock ? 'move' : true,
-                dataZoomInfo.roamControllerOpt
-            );
+
+            // Update reference of dataZoom.
+            !(record.dataZoomInfos[theDataZoomId]) && record.count++;
+            record.dataZoomInfos[theDataZoomId] = dataZoomInfo;
+
+            var controllerParams = mergeControllerParams(record.dataZoomInfos);
+            record.controller.enable(controllerParams.controlType, controllerParams.opt);
 
             // Consider resize, area should be always updated.
             record.controller.setPointerChecker(dataZoomInfo.containsPoint);
@@ -77,10 +80,6 @@ define(function(require) {
                 dataZoomInfo.throttleRate,
                 'fixRate'
             );
-
-            // Update reference of dataZoom.
-            !(record.dataZoomInfos[theDataZoomId]) && record.count++;
-            record.dataZoomInfos[theDataZoomId] = dataZoomInfo;
         },
 
         /**
@@ -170,7 +169,7 @@ define(function(require) {
 
         zrUtil.each(record.dataZoomInfos, function (info) {
             var range = getRange(info);
-            range && batch.push({
+            !info.disabled && range && batch.push({
                 dataZoomId: info.dataZoomId,
                 start: range[0],
                 end: range[1]
@@ -190,6 +189,31 @@ define(function(require) {
         });
     }
 
+    /**
+     * Merge roamController settings when multiple dataZooms share one roamController.
+     */
+    function mergeControllerParams(dataZoomInfos) {
+        var controlType;
+        var opt = {};
+        var typePriority = {
+            'true': 2,
+            'move': 1,
+            'false': 0,
+            'undefined': -1
+        };
+        zrUtil.each(dataZoomInfos, function (dataZoomInfo) {
+            var oneType = dataZoomInfo.disabled ? false : dataZoomInfo.zoomLock ? 'move' : true;
+            typePriority[oneType] > typePriority[controlType] && (controlType = oneType);
+            // Do not support that different 'shift'/'ctrl'/'alt' setting used in one coord sys.
+            zrUtil.extend(opt, dataZoomInfo.roamControllerOpt);
+        });
+
+        return {
+            controlType: controlType,
+            opt: opt
+        };
+    }
+
     return roams;
 
 });

package/src/component/dataZoom/typeDefaulter.js

@@ -1,6 +1,6 @@
 define(function (require) {
 
-    require('../../model/Component').registerSubTypeDefaulter('dataZoom', function (option) {
+    require('../../model/Component').registerSubTypeDefaulter('dataZoom', function () {
         // Default 'slider' when no type specified.
         return 'slider';
     });

package/src/component/graphic.js

@@ -274,11 +274,23 @@ define(function (require) {
                 var parentId = elOption.parentId;
                 var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
 
-                // In top/bottom mode, textVertical should not be used. And textBaseline
-                // should not be 'alphabetic', which cause inaccurately locating.
-                if (elOption.hv && elOption.hv[1] && elOption.type === 'text') {
-                    elOption.style = zrUtil.defaults({textBaseline: 'middle'}, elOption.style);
-                    elOption.style.textVerticalAlign = null;
+                if (elOption.type === 'text') {
+                    var elOptionStyle = elOption.style;
+
+                    // In top/bottom mode, textVerticalAlign should not be used, which cause
+                    // inaccurately locating.
+                    if (elOption.hv && elOption.hv[1]) {
+                        elOptionStyle.textVerticalAlign = elOptionStyle.textBaseline = null;
+                    }
+
+                    // Compatible with previous setting: both support fill and textFill,
+                    // stroke and textStroke.
+                    !elOptionStyle.hasOwnProperty('textFill') && elOptionStyle.fill && (
+                        elOptionStyle.textFill = elOptionStyle.fill
+                    );
+                    !elOptionStyle.hasOwnProperty('textStroke') && elOptionStyle.stroke && (
+                        elOptionStyle.textStroke = elOptionStyle.stroke
+                    );
                 }
 
                 // Remove unnecessary props to avoid potential problems.

package/src/component/helper/BrushTargetManager.js

@@ -200,7 +200,7 @@ define(function(require) {
      *
      * @param {Object} area
      * @param {Array} targetInfoList
-     * @return {Obejct|boolean}
+     * @return {Object|boolean}
      */
     proto.findTargetInfo = function (area, ecModel) {
         var targetInfoList = this._targetInfoList;

package/src/component/helper/MapDraw.js

@@ -123,8 +123,8 @@ define(function (require) {
 
             var isGeo = mapOrGeoModel.mainType === 'geo';
 
-            // map series has data, geo model that controlled by map series
-            // has no data, otherwise data exists.
+            // Map series has data. GEO model that controlled by map series
+            // will be assigned with map data. Other GEO model has no data.
             var data = mapOrGeoModel.getData && mapOrGeoModel.getData();
             isGeo && ecModel.eachComponent({mainType: 'series', subType: 'map'}, function (mapSeries) {
                 if (!data && mapSeries.getHostGeoModel() === mapOrGeoModel) {
@@ -199,9 +199,6 @@ define(function (require) {
                     }
                 }
 
-                var textStyleModel = labelModel.getModel('textStyle');
-                var hoverTextStyleModel = hoverLabelModel.getModel('textStyle');
-
                 zrUtil.each(region.geometries, function (geometry) {
                     if (geometry.type !== 'polygon') {
                         return;
@@ -238,29 +235,36 @@ define(function (require) {
                     (isGeo || isDataNaN && (showLabel || hoverShowLabel))
                  || (itemLayout && itemLayout.showLabel)
                  ) {
-                    var query = data ? dataIdx : region.name;
-                    var formattedStr = mapOrGeoModel.getFormattedLabel(query, 'normal');
-                    var hoverFormattedStr = mapOrGeoModel.getFormattedLabel(query, 'emphasis');
-                    var text = new graphic.Text({
-                        style: {
-                            text: showLabel ? (formattedStr || region.name) : '',
-                            fill: textStyleModel.getTextColor(),
-                            textFont: textStyleModel.getFont(),
-                            textAlign: 'center',
-                            textVerticalAlign: 'middle'
-                        },
-                        hoverStyle: {
-                            text: hoverShowLabel ? (hoverFormattedStr || region.name) : '',
-                            fill: hoverTextStyleModel.getTextColor(),
-                            textFont: hoverTextStyleModel.getFont()
-                        },
+                    var query = !isGeo ? dataIdx : region.name;
+                    var labelFetcher;
+
+                    // Consider dataIdx not found.
+                    if (!data || dataIdx >= 0) {
+                        labelFetcher = mapOrGeoModel;
+                    }
+
+                    var textEl = new graphic.Text({
                         position: region.center.slice(),
                         scale: [1 / scale[0], 1 / scale[1]],
                         z2: 10,
                         silent: true
                     });
 
-                    regionGroup.add(text);
+                    graphic.setLabelStyle(
+                        textEl.style, textEl.hoverStyle = {}, labelModel, hoverLabelModel,
+                        {
+                            labelFetcher: labelFetcher,
+                            labelDataIndex: query,
+                            defaultText: region.name,
+                            useInsideStyle: false
+                        },
+                        {
+                            textAlign: 'center',
+                            textVerticalAlign: 'middle'
+                        }
+                    );
+
+                    regionGroup.add(textEl);
                 }
 
                 // setItemGraphicEl, setHoverStyle after all polygons and labels

package/src/component/helper/RoamController.js

@@ -113,7 +113,9 @@ define(function (require) {
 
 
     function mousedown(e) {
-        if (e.target && e.target.draggable) {
+        if (eventTool.notLeftMouse(e)
+            || (e.target && e.target.draggable)
+        ) {
             return;
         }
 
@@ -130,15 +132,12 @@ define(function (require) {
     }
 
     function mousemove(e) {
-        if (!checkKeyBinding(this, 'moveOnMouseMove', e) || !this._dragging) {
-            return;
-        }
-
-        if (e.gestureEvent === 'pinch') {
-            return;
-        }
-
-        if (interactionMutex.isTaken(this._zr, 'globalPan')) {
+        if (eventTool.notLeftMouse(e)
+            || !checkKeyBinding(this, 'moveOnMouseMove', e)
+            || !this._dragging
+            || e.gestureEvent === 'pinch'
+            || interactionMutex.isTaken(this._zr, 'globalPan')
+        ) {
             return;
         }
 
@@ -160,7 +159,9 @@ define(function (require) {
     }
 
     function mouseup(e) {
-        this._dragging = false;
+        if (!eventTool.notLeftMouse(e)) {
+            this._dragging = false;
+        }
     }
 
     function mousewheel(e) {

package/src/component/helper/listComponent.js

@@ -4,17 +4,6 @@ define(function (require) {
     var formatUtil = require('../../util/format');
     var graphic = require('../../util/graphic');
 
-    function positionGroup(group, model, api) {
-        layout.positionElement(
-            group, model.getBoxLayoutParams(),
-            {
-                width: api.getWidth(),
-                height: api.getHeight()
-            },
-            model.get('padding')
-        );
-    }
-
     return {
         /**
          * Layout list like component.
@@ -24,10 +13,16 @@ define(function (require) {
          * @param {module:echarts/ExtensionAPI}
          */
         layout: function (group, componentModel, api) {
-            var rect = layout.getLayoutRect(componentModel.getBoxLayoutParams(), {
-                width: api.getWidth(),
-                height: api.getHeight()
-            }, componentModel.get('padding'));
+            var boxLayoutParams = componentModel.getBoxLayoutParams();
+            var padding = componentModel.get('padding');
+            var viewportSize = {width: api.getWidth(), height: api.getHeight()};
+
+            var rect = layout.getLayoutRect(
+                boxLayoutParams,
+                viewportSize,
+                padding
+            );
+
             layout.box(
                 componentModel.get('orient'),
                 group,
@@ -36,30 +31,38 @@ define(function (require) {
                 rect.height
             );
 
-            positionGroup(group, componentModel, api);
+            layout.positionElement(
+                group,
+                boxLayoutParams,
+                viewportSize,
+                padding
+            );
         },
 
-        addBackground: function (group, componentModel) {
+        makeBackground: function (rect, componentModel) {
             var padding = formatUtil.normalizeCssArray(
                 componentModel.get('padding')
             );
-            var boundingRect = group.getBoundingRect();
             var style = componentModel.getItemStyle(['color', 'opacity']);
             style.fill = componentModel.get('backgroundColor');
             var rect = new graphic.Rect({
                 shape: {
-                    x: boundingRect.x - padding[3],
-                    y: boundingRect.y - padding[0],
-                    width: boundingRect.width + padding[1] + padding[3],
-                    height: boundingRect.height + padding[0] + padding[2]
+                    x: rect.x - padding[3],
+                    y: rect.y - padding[0],
+                    width: rect.width + padding[1] + padding[3],
+                    height: rect.height + padding[0] + padding[2],
+                    r: componentModel.get('borderRadius')
                 },
                 style: style,
                 silent: true,
                 z2: -1
             });
-            graphic.subPixelOptimizeRect(rect);
+            // FIXME
+            // `subPixelOptimizeRect` may bring some gap between edge of viewpart
+            // and background rect when setting like `left: 0`, `top: 0`.
+            // graphic.subPixelOptimizeRect(rect);
 
-            group.add(rect);
+            return rect;
         }
     };
 });

package/src/component/helper/selectableMixin.js

@@ -12,21 +12,28 @@ define(function (require) {
     return {
 
         updateSelectedMap: function (targetList) {
+            this._targetList = targetList.slice();
             this._selectTargetMap = zrUtil.reduce(targetList || [], function (targetMap, target) {
                 targetMap.set(target.name, target);
                 return targetMap;
             }, zrUtil.createHashMap());
         },
+
         /**
-         * @param {string} name
+         * Either name or id should be passed as input here.
+         * If both of them are defined, id is used.
+         *
+         * @param {string|undefined} name name of data
+         * @param {number|undefined} id dataIndex of data
          */
         // PENGING If selectedMode is null ?
-        select: function (name) {
-            var targetMap = this._selectTargetMap;
-            var target = targetMap.get(name);
+        select: function (name, id) {
+            var target = id != null
+                ? this._targetList[id]
+                : this._selectTargetMap.get(name);
             var selectedMode = this.get('selectedMode');
             if (selectedMode === 'single') {
-                targetMap.each(function (target) {
+                this._selectTargetMap.each(function (target) {
                     target.selected = false;
                 });
             }
@@ -34,31 +41,49 @@ define(function (require) {
         },
 
         /**
-         * @param {string} name
+         * Either name or id should be passed as input here.
+         * If both of them are defined, id is used.
+         *
+         * @param {string|undefined} name name of data
+         * @param {number|undefined} id dataIndex of data
          */
-        unSelect: function (name) {
-            var target = this._selectTargetMap.get(name);
+        unSelect: function (name, id) {
+            var target = id != null
+                ? this._targetList[id]
+                : this._selectTargetMap.get(name);
             // var selectedMode = this.get('selectedMode');
             // selectedMode !== 'single' && target && (target.selected = false);
             target && (target.selected = false);
         },
 
         /**
-         * @param {string} name
+         * Either name or id should be passed as input here.
+         * If both of them are defined, id is used.
+         *
+         * @param {string|undefined} name name of data
+         * @param {number|undefined} id dataIndex of data
          */
-        toggleSelected: function (name) {
-            var target = this._selectTargetMap.get(name);
+        toggleSelected: function (name, id) {
+            var target = id != null
+                ? this._targetList[id]
+                : this._selectTargetMap.get(name);
             if (target != null) {
-                this[target.selected ? 'unSelect' : 'select'](name);
+                this[target.selected ? 'unSelect' : 'select'](name, id);
                 return target.selected;
             }
         },
 
         /**
-         * @param {string} name
+         * Either name or id should be passed as input here.
+         * If both of them are defined, id is used.
+         *
+         * @param {string|undefined} name name of data
+         * @param {number|undefined} id dataIndex of data
          */
-        isSelected: function (name) {
-            var target = this._selectTargetMap.get(name);
+        isSelected: function (name, id) {
+            var target = id != null
+                ? this._targetList[id]
+                : this._selectTargetMap.get(name);
             return target && target.selected;
         }
     };

package/src/component/legend/LegendModel.js

@@ -7,12 +7,19 @@ define(function(require) {
 
     var LegendModel = require('../../echarts').extendComponentModel({
 
-        type: 'legend',
+        type: 'legend.plain',
 
         dependencies: ['series'],
 
         layoutMode: {
             type: 'box',
+            // legend.width/height are maxWidth/maxHeight actually,
+            // whereas realy width/height is calculated by its content.
+            // (Setting {left: 10, right: 10} does not make sense).
+            // So consider the case:
+            // `setOption({legend: {left: 10});`
+            // then `setOption({legend: {right: 10});`
+            // The previous `left` should be cleared by setting `ignoreSize`.
             ignoreSize: true
         },
 
@@ -143,8 +150,8 @@ define(function(require) {
             left: 'center',
             // right: 'center',
 
-            top: 'top',
-            // bottom: 'top',
+            top: 0,
+            // bottom: null,
 
             // 水平对齐
             // 'auto' | 'left' | 'right'
@@ -154,6 +161,7 @@ define(function(require) {
             backgroundColor: 'rgba(0,0,0,0)',
             // 图例边框颜色
             borderColor: '#ccc',
+            borderRadius: 0,
             // 图例边框线宽，单位px，默认为0（无边框）
             borderWidth: 0,
             // 图例内边距，单位px，默认各方向内边距为5，