echarts 3.6.1 → 3.7.2

package/src/component/legend/LegendView.js

@@ -4,73 +4,108 @@ define(function (require) {
     var symbolCreator = require('../../util/symbol');
     var graphic = require('../../util/graphic');
     var listComponentHelper = require('../helper/listComponent');
+    var layoutUtil = require('../../util/layout');
 
     var curry = zrUtil.curry;
+    var each = zrUtil.each;
+    var Group = graphic.Group;
 
-    function dispatchSelectAction(name, api) {
-        api.dispatchAction({
-            type: 'legendToggleSelect',
-            name: name
-        });
-    }
+    return require('../../echarts').extendComponentView({
 
-    function dispatchHighlightAction(seriesModel, dataName, api) {
-        // If element hover will move to a hoverLayer.
-        var el = api.getZr().storage.getDisplayList()[0];
-        if (!(el && el.useHoverLayer)) {
-            seriesModel.get('legendHoverLink') && api.dispatchAction({
-                type: 'highlight',
-                seriesName: seriesModel.name,
-                name: dataName
-            });
-        }
-    }
+        type: 'legend.plain',
 
-    function dispatchDownplayAction(seriesModel, dataName, api) {
-        // If element hover will move to a hoverLayer.
-        var el = api.getZr().storage.getDisplayList()[0];
-        if (!(el && el.useHoverLayer)) {
-            seriesModel.get('legendHoverLink') && api.dispatchAction({
-                type: 'downplay',
-                seriesName: seriesModel.name,
-                name: dataName
-            });
-        }
-    }
+        newlineDisabled: false,
 
-    return require('../../echarts').extendComponentView({
+        /**
+         * @override
+         */
+        init: function () {
 
-        type: 'legend',
+            /**
+             * @private
+             * @type {module:zrender/container/Group}
+             */
+            this.group.add(this._contentGroup = new Group());
+
+            /**
+             * @private
+             * @type {module:zrender/Element}
+             */
+            this._backgroundEl;
+        },
 
-        init: function () {
-            this._symbolTypeStore = {};
+        /**
+         * @protected
+         */
+        getContentGroup: function () {
+            return this._contentGroup;
         },
 
+        /**
+         * @override
+         */
         render: function (legendModel, ecModel, api) {
-            var group = this.group;
-            group.removeAll();
 
-            if (!legendModel.get('show')) {
+            this.resetInner();
+
+            if (!legendModel.get('show', true)) {
                 return;
             }
 
-            var selectMode = legendModel.get('selectedMode');
             var itemAlign = legendModel.get('align');
-
-            if (itemAlign === 'auto') {
-                itemAlign = (legendModel.get('left') === 'right'
-                    && legendModel.get('orient') === 'vertical')
-                    ? 'right' : 'left';
+            if (!itemAlign || itemAlign === 'auto') {
+                itemAlign = (
+                    legendModel.get('left') === 'right'
+                    && legendModel.get('orient') === 'vertical'
+                ) ? 'right' : 'left';
             }
 
-            var legendDrawedMap = zrUtil.createHashMap();
+            this.renderInner(itemAlign, legendModel, ecModel, api);
+
+            // Perform layout.
+            var positionInfo = legendModel.getBoxLayoutParams();
+            var viewportSize = {width: api.getWidth(), height: api.getHeight()};
+            var padding = legendModel.get('padding');
+
+            var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);
+            var mainRect = this.layoutInner(legendModel, itemAlign, maxSize);
+
+            // Place mainGroup, based on the calculated `mainRect`.
+            var layoutRect = layoutUtil.getLayoutRect(
+                zrUtil.defaults({width: mainRect.width, height: mainRect.height}, positionInfo),
+                viewportSize,
+                padding
+            );
+            this.group.attr('position', [layoutRect.x - mainRect.x, layoutRect.y - mainRect.y]);
+
+            // Render background after group is layout.
+            this.group.add(
+                this._backgroundEl = listComponentHelper.makeBackground(mainRect, legendModel)
+            );
+        },
+
+        /**
+         * @protected
+         */
+        resetInner: function () {
+            this.getContentGroup().removeAll();
+            this._backgroundEl && this.group.remove(this._backgroundEl);
+        },
+
+        /**
+         * @protected
+         */
+        renderInner: function (itemAlign, legendModel, ecModel, api) {
+            var contentGroup = this.getContentGroup();
+            var legendDrawnMap = zrUtil.createHashMap();
+            var selectMode = legendModel.get('selectedMode');
 
-            zrUtil.each(legendModel.getData(), function (itemModel) {
+            each(legendModel.getData(), function (itemModel, dataIndex) {
                 var name = itemModel.get('name');
 
                 // Use empty string or \n as a newline string
-                if (name === '' || name === '\n') {
-                    group.add(new graphic.Group({
+                if (!this.newlineDisabled && (name === '' || name === '\n')) {
+                    contentGroup.add(new Group({
                         newline: true
                     }));
                     return;
@@ -78,7 +113,7 @@ define(function (require) {
 
                 var seriesModel = ecModel.getSeriesByName(name)[0];
 
-                if (legendDrawedMap.get(name)) {
+                if (legendDrawnMap.get(name)) {
                     // Have been drawed
                     return;
                 }
@@ -99,7 +134,7 @@ define(function (require) {
                     var symbolType = data.getVisual('symbol');
 
                     var itemGroup = this._createItem(
-                        name, itemModel, legendModel,
+                        name, dataIndex, itemModel, legendModel,
                         legendSymbolType, symbolType,
                         itemAlign, color,
                         selectMode
@@ -109,13 +144,13 @@ define(function (require) {
                         .on('mouseover', curry(dispatchHighlightAction, seriesModel, null, api))
                         .on('mouseout', curry(dispatchDownplayAction, seriesModel, null, api));
 
-                    legendDrawedMap.set(name, true);
+                    legendDrawnMap.set(name, true);
                 }
                 else {
                     // Data legend of pie, funnel
                     ecModel.eachRawSeries(function (seriesModel) {
                         // In case multiple series has same data name
-                        if (legendDrawedMap.get(name)) {
+                        if (legendDrawnMap.get(name)) {
                             return;
                         }
                         if (seriesModel.legendDataProvider) {
@@ -130,7 +165,7 @@ define(function (require) {
                             var legendSymbolType = 'roundRect';
 
                             var itemGroup = this._createItem(
-                                name, itemModel, legendModel,
+                                name, dataIndex, itemModel, legendModel,
                                 legendSymbolType, null,
                                 itemAlign, color,
                                 selectMode
@@ -141,26 +176,21 @@ define(function (require) {
                                 .on('mouseover', curry(dispatchHighlightAction, seriesModel, name, api))
                                 .on('mouseout', curry(dispatchDownplayAction, seriesModel, name, api));
 
-                            legendDrawedMap.set(name, true);
+                            legendDrawnMap.set(name, true);
                         }
                     }, this);
                 }
 
                 if (__DEV__) {
-                    if (!legendDrawedMap.get(name)) {
+                    if (!legendDrawnMap.get(name)) {
                         console.warn(name + ' series not exists. Legend data should be same with series name or data name.');
                     }
                 }
             }, this);
-
-            listComponentHelper.layout(group, legendModel, api);
-            // Render background after group is layout
-            // FIXME
-            listComponentHelper.addBackground(group, legendModel);
         },
 
         _createItem: function (
-            name, itemModel, legendModel,
+            name, dataIndex, itemModel, legendModel,
             legendSymbolType, symbolType,
             itemAlign, color, selectMode
         ) {
@@ -169,7 +199,7 @@ define(function (require) {
             var inactiveColor = legendModel.get('inactiveColor');
 
             var isSelected = legendModel.isSelected(name);
-            var itemGroup = new graphic.Group();
+            var itemGroup = new Group();
 
             var textStyleModel = itemModel.getModel('textStyle');
 
@@ -201,7 +231,6 @@ define(function (require) {
                 ));
             }
 
-            // Text
             var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
             var textAlign = itemAlign;
 
@@ -214,18 +243,16 @@ define(function (require) {
                 content = formatter(name);
             }
 
-            var text = new graphic.Text({
-                style: {
+            itemGroup.add(new graphic.Text({
+                style: graphic.setTextStyle({}, textStyleModel, {
                     text: content,
                     x: textX,
                     y: itemHeight / 2,
-                    fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
-                    textFont: textStyleModel.getFont(),
+                    textFill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
                     textAlign: textAlign,
                     textVerticalAlign: 'middle'
-                }
-            });
-            itemGroup.add(text);
+                })
+            }));
 
             // Add a invisible rect to increase the area of mouse hover
             var hitRect = new graphic.Rect({
@@ -253,13 +280,67 @@ define(function (require) {
 
             hitRect.silent = !selectMode;
 
-
-
-            this.group.add(itemGroup);
+            this.getContentGroup().add(itemGroup);
 
             graphic.setHoverStyle(itemGroup);
 
+            itemGroup.__legendDataIndex = dataIndex;
+
             return itemGroup;
+        },
+
+        /**
+         * @protected
+         */
+        layoutInner: function (legendModel, itemAlign, maxSize) {
+            var contentGroup = this.getContentGroup();
+
+            // Place items in contentGroup.
+            layoutUtil.box(
+                legendModel.get('orient'),
+                contentGroup,
+                legendModel.get('itemGap'),
+                maxSize.width,
+                maxSize.height
+            );
+
+            var contentRect = contentGroup.getBoundingRect();
+            contentGroup.attr('position', [-contentRect.x, -contentRect.y]);
+
+            return this.group.getBoundingRect();
         }
+
     });
+
+    function dispatchSelectAction(name, api) {
+        api.dispatchAction({
+            type: 'legendToggleSelect',
+            name: name
+        });
+    }
+
+    function dispatchHighlightAction(seriesModel, dataName, api) {
+        // If element hover will move to a hoverLayer.
+        var el = api.getZr().storage.getDisplayList()[0];
+        if (!(el && el.useHoverLayer)) {
+            seriesModel.get('legendHoverLink') && api.dispatchAction({
+                type: 'highlight',
+                seriesName: seriesModel.name,
+                name: dataName
+            });
+        }
+    }
+
+    function dispatchDownplayAction(seriesModel, dataName, api) {
+        // If element hover will move to a hoverLayer.
+        var el = api.getZr().storage.getDisplayList()[0];
+        if (!(el && el.useHoverLayer)) {
+            seriesModel.get('legendHoverLink') && api.dispatchAction({
+                type: 'downplay',
+                seriesName: seriesModel.name,
+                name: dataName
+            });
+        }
+    }
+
 });

package/src/component/legend/ScrollableLegendModel.js

@@ -0,0 +1,76 @@
+define(function(require) {
+
+    var LegendModel = require('./LegendModel');
+    var layout = require('../../util/layout');
+
+    var ScrollableLegendModel = LegendModel.extend({
+
+        type: 'legend.scroll',
+
+        /**
+         * @param {number} scrollDataIndex
+         */
+        setScrollDataIndex: function (scrollDataIndex) {
+            this.option.scrollDataIndex = scrollDataIndex;
+        },
+
+        defaultOption: {
+            scrollDataIndex: 0,
+            pageButtonItemGap: 5,
+            pageButtonGap: null,
+            pageButtonPosition: 'end', // 'start' or 'end'
+            pageFormatter: '{current}/{total}', // If null/undefined, do not show page.
+            pageIcons: {
+                horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
+                vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
+            },
+            pageIconColor: '#2f4554',
+            pageIconInactiveColor: '#aaa',
+            pageIconSize: 15, // Can be [10, 3], which represents [width, height]
+            pageTextStyle: {
+                color: '#333'
+            },
+
+            animationDurationUpdate: 800
+        },
+
+        /**
+         * @override
+         */
+        init: function (option, parentModel, ecModel, extraOpt) {
+            var inputPositionParams = layout.getLayoutParams(option);
+
+            ScrollableLegendModel.superCall(this, 'init', option, parentModel, ecModel, extraOpt);
+
+            mergeAndNormalizeLayoutParams(this, option, inputPositionParams);
+        },
+
+        /**
+         * @override
+         */
+        mergeOption: function (option, extraOpt) {
+            ScrollableLegendModel.superCall(this, 'mergeOption', option, extraOpt);
+
+            mergeAndNormalizeLayoutParams(this, this.option, option);
+        },
+
+        getOrient: function () {
+            return this.get('orient') === 'vertical'
+                ? {index: 1, name: 'vertical'}
+                : {index: 0, name: 'horizontal'};
+        }
+
+    });
+
+    // Do not `ignoreSize` to enable setting {left: 10, right: 10}.
+    function mergeAndNormalizeLayoutParams(legendModel, target, raw) {
+        var orient = legendModel.getOrient();
+        var ignoreSize = [1, 1];
+        ignoreSize[orient.index] = 0;
+        layout.mergeLayoutParam(target, raw, {
+            type: 'box', ignoreSize: ignoreSize
+        });
+    }
+
+    return ScrollableLegendModel;
+});