Merge branch 'dev-3.0.0' of https://github.com/ecomfe/echarts into dev-3.0.0

Conflicts:
	src/data/List.js

src/ExtensionAPI.js

@@ -6,7 +6,7 @@ define(function(require) {
 
     var echartsAPIList = [
         'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction',
-        'on', 'off'
+        'on', 'off', 'getDataURL', 'getConnectedDataURL'
     ];
 
     function ExtensionAPI(chartInstance) {

src/component/helper/listComponent.js

+define(function (require) {
+    // List layout
+    var layout = require('../../util/layout');
+    var formatUtil = require('../../util/format');
+    var graphic = require('../../util/graphic');
+
+    function positionGroup(group, model, api) {
+        var x = model.get('x');
+        var y = model.get('y');
+        var x2 = model.get('x2');
+        var y2 = model.get('y2');
+
+        if (!x && !x2) {
+            x = 'center';
+        }
+        if (!y && !y2) {
+            y = 'top';
+        }
+        layout.positionGroup(
+            group, {
+                x: x,
+                y: y,
+                x2: x2,
+                y2: y2
+            },
+            {
+                width: api.getWidth(),
+                height: api.getHeight()
+            },
+            model.get('padding')
+        );
+    }
+
+    return {
+        /**
+         * Layout list like component.
+         * It will box layout each items in group of component and then position the whole group in the viewport
+         * @param {module:zrender/group/Group} group
+         * @param {module:echarts/model/Component} componentModel
+         * @param {module:echarts/ExtensionAPI}
+         */
+        layout: function (group, componentModel, api) {
+            layout.box(
+                componentModel.get('orient'),
+                group,
+                componentModel.get('itemGap'),
+                api.getWidth(),
+                api.getHeight()
+            );
+
+            positionGroup(group, componentModel, api);
+        },
+
+        addBackground: function (group, componentModel) {
+            var padding = formatUtil.normalizeCssArray(
+                componentModel.get('padding')
+            );
+            var boundingRect = group.getBoundingRect();
+            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]
+                },
+                style: {
+                    stroke: componentModel.get('borderColor'),
+                    fill: componentModel.get('backgroundColor'),
+                    lineWidth: componentModel.get('borderWidth')
+                },
+                silent: true
+            });
+            graphic.subPixelOptimizeRect(rect);
+
+            group.add(rect);
+        }
+    }
+});
\ No newline at end of file

src/component/legend/LegendView.js

@@ -3,9 +3,7 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var symbolCreator = require('../../util/symbol');
     var graphic = require('../../util/graphic');
-
-    var layout = require('../../util/layout');
-    var formatUtil = require('../../util/format');
+    var listComponentHelper = require('../helper/listComponent');
 
     var curry = zrUtil.curry;
 
@@ -34,33 +32,6 @@ define(function (require) {
         });
     }
 
-    function positionGroup(group, legendModel, api) {
-        var x = legendModel.get('x');
-        var y = legendModel.get('y');
-        var x2 = legendModel.get('x2');
-        var y2 = legendModel.get('y2');
-
-        if (!x && !x2) {
-            x = 'center';
-        }
-        if (!y && !y2) {
-            y = 'top';
-        }
-        layout.positionGroup(
-            group, {
-                x: x,
-                y: y,
-                x2: x2,
-                y2: y2
-            },
-            {
-                width: api.getWidth(),
-                height: api.getHeight()
-            },
-            legendModel.get('padding')
-        );
-    }
-
     return require('../../echarts').extendComponentView({
 
         type: 'legend',
@@ -79,7 +50,9 @@ define(function (require) {
             group.removeAll();
 
             if (itemAlign === 'auto') {
-                itemAlign = legendModel.get('x') === 'right' ? 'right' : 'left';
+                itemAlign = (legendModel.get('x') === 'right'
+                    && legendModel.get('orient') === 'vertical')
+                    ? 'right' : 'left';
             }
 
             var legendDataMap = {};
@@ -162,45 +135,10 @@ define(function (require) {
                 }
             }, this);
 
-            layout.box(
-                legendModel.get('orient'),
-                group,
-                legendModel.get('itemGap'),
-                api.getWidth(),
-                api.getHeight()
-            );
-
-            positionGroup(group, legendModel, api);
-
-            // Render background after group is positioned
-            // Or will get rect of group with padding
+            listComponentHelper.layout(group, legendModel, api);
+            // Render background after group is layout
             // FIXME
-            this._renderBG(legendModel, group);
-        },
-
-        // FIXME 通用？
-        _renderBG: function (legendModel, group) {
-            var padding = formatUtil.normalizeCssArray(
-                legendModel.get('padding')
-            );
-            var boundingRect = group.getBoundingRect();
-            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]
-                },
-                style: {
-                    stroke: legendModel.get('borderColor'),
-                    fill: legendModel.get('backgroundColor'),
-                    lineWidth: legendModel.get('borderWidth')
-                },
-                silent: true
-            });
-            graphic.subPixelOptimizeRect(rect);
-
-            group.add(rect);
+            listComponentHelper.addBackground(group, legendModel);
         },
 
         _createItem: function (

src/component/toolbox.js

+define(function (require) {
+
+    require('./toolbox/ToolboxModel');
+    require('./toolbox/ToolboxView');
+
+    require('./toolbox/feature/SaveAsImage');
+    require('./toolbox/feature/MagicType');
+});
\ No newline at end of file

src/component/toolbox/ToolboxModel.js

+define(function (require) {
+
+    var featureManager = require('./featureManager');
+    var zrUtil = require('zrender/core/util');
+
+    require('../../echarts').extendComponentModel({
+
+        type: 'toolbox',
+
+        mergeDefaultAndTheme: function (option) {
+            this.$superApply('mergeDefaultAndTheme', arguments);
+
+            zrUtil.each(this.option.feature, function (featureOpt, featureName) {
+                var Feature = featureManager.get(featureName);
+                Feature && zrUtil.merge(featureOpt, Feature.defaultOption);
+            });
+        },
+
+        defaultOption: {
+
+            show: true,
+
+            z: 6,
+
+            zlevel: 0,
+
+            orient: 'horizontal',
+
+            x: 'right',
+
+            y: 'top',
+
+            // x2
+            // y2
+
+            backgroundColor: 'transparent',
+
+            borderColor: '#ccc',
+
+            borderWidth: 0,
+
+            padding: 10,
+
+            itemGap: 10,
+
+            itemSize: 18,
+
+            showTitle: true,
+
+            iconStyle: {
+                normal: {
+                    borderColor: '#000',
+                    color: 'none'
+                },
+                emphasis: {
+                    borderColor: '#3E98C5'
+                }
+            }
+            // textStyle: {},
+
+            // feature
+        }
+    });
+})
\ No newline at end of file

src/component/toolbox/ToolboxView.js

+define(function (require) {
+
+    var featureManager = require('./featureManager');
+    var zrUtil = require('zrender/core/util');
+    var graphic = require('../../util/graphic');
+    var Model = require('../../model/Model');
+    var listComponentHelper = require('../helper/listComponent');
+
+    return require('../../echarts').extendComponentView({
+
+        type: 'toolbox',
+
+        render: function (toolboxModel, ecModel, api) {
+            var group = this.group;
+            group.removeAll();
+
+            if (!toolboxModel.get('show')) {
+                return;
+            }
+
+            var itemSize = +toolboxModel.get('itemSize');
+
+            zrUtil.each(toolboxModel.get('feature'), function (featureOpt, featureName) {
+                var Feature = featureManager.get(featureName);
+                if (!Feature) {
+                    return;
+                }
+
+                var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
+                var feature = new Feature(featureModel);
+                if (!featureModel.get('show')) {
+                    return;
+                }
+
+                var iconStyleModel = featureModel.getModel('iconStyle');
+                var normalStyle = iconStyleModel.getModel('normal').getItemStyle();
+                var hoverStyle = iconStyleModel.getModel('emphasis').getItemStyle();
+
+                var icons = feature.getIcons ? feature.getIcons() : featureModel.get('icon');
+                if (typeof icons === 'string') {
+                    var icon = icons;
+                    icons = {};
+                    icons[featureName] = icon;
+                }
+
+                zrUtil.each(icons, function (icon, iconName) {
+                    var path = graphic.makePath(
+                        icon, {
+                            style: normalStyle,
+                            hoverStyle: hoverStyle,
+                            rectHover: true
+                        }, {
+                            x: -itemSize / 2,
+                            y: -itemSize / 2,
+                            width: itemSize,
+                            height: itemSize
+                        }, 'center'
+                    );
+
+                    graphic.setHoverStyle(path);
+
+                    group.add(path);
+                    path.on('click', zrUtil.bind(
+                        feature.onclick, feature, ecModel, api, iconName
+                    ));
+                });
+            });
+
+            listComponentHelper.layout(group, toolboxModel, api);
+            // Render background after group is layout
+            // FIXME
+            listComponentHelper.addBackground(group, toolboxModel);
+        }
+    });
+});
\ No newline at end of file

src/component/toolbox/feature/DataView.js

+define(function (require) {
+    
+});
\ No newline at end of file

src/component/toolbox/feature/MagicType.js

+define(function(require) {
+    'use strict';
+
+    var zrUtil = require('zrender/core/util');
+
+    function MagicType(model) {
+        this.model = model;
+    }
+
+    MagicType.defaultOption = {
+        show: true,
+        // Icon group
+        icon: {
+            line: 'M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
+            bar: 'M8.5,22.9h6.9V50H8.5V22.9z M26.7,12.9h6.9v37h-6.9V12.9z M45,2h6.9v48H45V2z M3.3,58H57',
+            stack: 'M8.2,38.4l-8.4,4.1l30.6,15.3L60,42.5l-8.1-4.1l-21.5,11L8.2,38.4z M51.9,30l-8.1,4.2l-13.4,6.9l-13.9-6.9L8.2,30l-8.4,4.2l8.4,4.2l22.2,11l21.5-11l8.1-4.2L51.9,30z M51.9,21.7l-8.1,4.2L35.7,30l-5.3,2.8L24.9,30l-8.4-4.1l-8.3-4.2l-8.4,4.2L8.2,30l8.3,4.2l13.9,6.9l13.4-6.9l8.1-4.2l8.1-4.1L51.9,21.7zM30.4,2.2L-0.2,17.5l8.4,4.1l8.3,4.2l8.4,4.2l5.5,2.7l5.3-2.7l8.1-4.2l8.1-4.2l8.1-4.1L30.4,2.2z',
+            tiled: 'M2.3,2.2h22.8V25H2.3V2.2z M35,2.2h22.8V25H35V2.2zM2.3,35h22.8v22.8H2.3V35z M35,35h22.8v22.8H35V35z'
+        },
+        title: {
+            line: '切换为折线图',
+            bar: '切换为柱状图',
+            stack: '切换为堆叠',
+            tiled: '切换为平铺'
+        }
+    };
+
+    var proto = MagicType.prototype;
+
+    proto.getIcons = function () {
+        var model = this.model;
+        var availableIcons = model.get('icon');
+        var icons = {};
+        zrUtil.each(model.get('option'), function (option, type) {
+            if (availableIcons[type]) {
+                icons[type] = availableIcons[type];
+            }
+        });
+        return icons;
+    };
+
+    proto.onclick = function (ecModel, api, type) {
+        if (type === 'stack') {
+            // var seriesModels = 
+        }
+    }
+
+    require('../featureManager').register('magicType', MagicType);
+
+    return MagicType;
+});
\ No newline at end of file

src/component/toolbox/feature/SaveAsImage.js

+define(function (require) {
+
+    function SaveAsImage (model) {
+        this.model = model;
+    };
+
+    SaveAsImage.defaultOption = {
+        show: true,
+        icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6\
+            M29.2,45.1L29.2,0',
+        title: '保存为图片',
+        type: 'png',
+        backgroundColor: '#fff',
+        name: ''
+    };
+
+    var proto = SaveAsImage.prototype;
+
+    proto.onclick = function (ecModel, api) {
+        var title = ecModel.get('title.0.text') || 'echarts';
+        var $a = document.createElement('a');
+        var type = this.model.get('type', true) || 'png';
+        $a.download = title + '.' + type;
+        $a.target = '_blank';
+        $a.href = api.getConnectedDataURL({
+            type: type,
+            backgroundColor: this.model.get('backgroundColor')
+        });
+        $a.click();
+    };
+
+    require('../featureManager').register(
+        'saveAsImage', SaveAsImage
+    );
+
+    return SaveAsImage;
+});
\ No newline at end of file

src/component/toolbox/featureManager.js

+define(function(require) {
+    'use strict';
+
+    var features = {};
+
+    return {
+        register: function (name, ctor) {
+            features[name] = ctor;
+        },
+
+        get: function (name) {
+            return features[name];
+        }
+    };
+});
\ No newline at end of file

src/util/layout.js

@@ -20,11 +20,15 @@ define(function(require) {
             maxHeight = Infinity;
         }
         var currentLineMaxSize = 0;
-        group.eachChild(function (child) {
+        group.eachChild(function (child, idx) {
             var position = child.position;
             var rect = child.getBoundingRect();
+            var nextChild = group.childAt(idx + 1);
+            var nextChildRect = nextChild && nextChild.getBoundingRect();
+            var nextX;
+            var nextY;
             if (orient === 'horizontal') {
-                var nextX = x + rect.width;
+                nextX = x + rect.width + (nextChildRect ? (-nextChildRect.x + rect.x) : 0);
                 // Wrap
                 if (nextX > maxWidth) {
                     x = 0;
@@ -36,7 +40,7 @@ define(function(require) {
                 }
             }
             else {
-                var nextY = y + rect.height;
+                nextY = y + rect.height + (nextChildRect ? (-nextChildRect.y + rect.y) : 0);
                 // Wrap
                 if (nextY > maxHeight) {
                     x += currentLineMaxSize + gap;
@@ -52,8 +56,8 @@ define(function(require) {
             position[1] = y;
 
             orient === 'horizontal'
-                ? x += rect.width + gap
-                : y += rect.height + gap;
+                ? (x = nextX + gap)
+                : (y = nextY + gap);
         });
     }