Toolbox magicType enhancement

src/component/toolbox/ToolboxModel.js

@@ -41,9 +41,9 @@ define(function (require) {
 
             padding: 10,
 
-            itemGap: 10,
+            itemSize: 15,
 
-            itemSize: 18,
+            itemGap: 8,
 
             showTitle: true,
 

src/component/toolbox/ToolboxView.js

@@ -5,6 +5,7 @@ define(function (require) {
     var graphic = require('../../util/graphic');
     var Model = require('../../model/Model');
     var listComponentHelper = require('../helper/listComponent');
+    var textContain = require('zrender/contain/text');
 
     return require('../../echarts').extendComponentView({
 
@@ -36,18 +37,38 @@ define(function (require) {
                 var normalStyle = iconStyleModel.getModel('normal').getItemStyle();
                 var hoverStyle = iconStyleModel.getModel('emphasis').getItemStyle();
 
+                // If one feature has mutiple icon. they are orginaized as
+                // {
+                //     icon: {
+                //         foo: '',
+                //         bar: ''
+                //     },
+                //     title: {
+                //         foo: '',
+                //         bar: ''
+                //     }
+                // }
                 var icons = feature.getIcons ? feature.getIcons() : featureModel.get('icon');
+                var titles = featureModel.get('title') || {};
                 if (typeof icons === 'string') {
                     var icon = icons;
+                    var title = titles;
                     icons = {};
+                    titles = {};
                     icons[featureName] = icon;
+
+                    titles[featureName] = title;
                 }
 
                 zrUtil.each(icons, function (icon, iconName) {
                     var path = graphic.makePath(
                         icon, {
                             style: normalStyle,
-                            hoverStyle: hoverStyle,
+                            hoverStyle: zrUtil.extend({
+                                text: titles[iconName],
+                                textPosition: 'bottom',
+                                textFill: hoverStyle.fill || hoverStyle.stroke || '#000'
+                            }, hoverStyle),
                             rectHover: true
                         }, {
                             x: -itemSize / 2,
@@ -70,6 +91,34 @@ define(function (require) {
             // Render background after group is layout
             // FIXME
             listComponentHelper.addBackground(group, toolboxModel);
+
+            // Adjust icon title positions to avoid them out of screen
+            group.eachChild(function (icon) {
+                var hoverStyle = icon.hoverStyle;
+                // May be background element
+                if (hoverStyle && hoverStyle.text) {
+                    var rect = textContain.getBoundingRect(
+                        hoverStyle.text, hoverStyle.font
+                    );
+                    var offsetX = icon.position[0] + group.position[0];
+                    var offsetY = icon.position[1] + group.position[1] + itemSize;
+
+                    var needPutOnTop = false;
+                    if (offsetY + rect.height > api.getHeight()) {
+                        hoverStyle.textPosition = 'top';
+                        needPutOnTop = true;
+                    }
+                    var topOffset = needPutOnTop ? (-5 - rect.height) : (itemSize + 8);
+                    if (offsetX + rect.width /  2 > api.getWidth()) {
+                        hoverStyle.textPosition = ['100%', topOffset];
+                        hoverStyle.textAlign = 'right';
+                    }
+                    else if (offsetX - rect.width / 2 < 0) {
+                        hoverStyle.textPosition = [0, topOffset];
+                        hoverStyle.textAlign = 'left';
+                    }
+                }
+            });
         }
     });
 });
\ No newline at end of file

src/component/toolbox/feature/MagicType.js

@@ -9,10 +9,11 @@ define(function(require) {
 
     MagicType.defaultOption = {
         show: true,
+        type: [],
         // 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',
+            bar: 'M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
             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'
         },
@@ -21,7 +22,9 @@ define(function(require) {
             bar: '切换为柱状图',
             stack: '切换为堆叠',
             tiled: '切换为平铺'
-        }
+        },
+        option: {},
+        seriesIndex: {}
     };
 
     var proto = MagicType.prototype;
@@ -30,7 +33,7 @@ define(function(require) {
         var model = this.model;
         var availableIcons = model.get('icon');
         var icons = {};
-        zrUtil.each(model.get('option'), function (option, type) {
+        zrUtil.each(model.get('type'), function (type) {
             if (availableIcons[type]) {
                 icons[type] = availableIcons[type];
             }
@@ -38,11 +41,89 @@ define(function(require) {
         return icons;
     };
 
+    var seriesOptGenreator = {
+        'line': function (seriesType, seriesId, seriesModel, model) {
+            if (seriesType === 'bar') {
+                return zrUtil.merge({
+                    id: seriesId,
+                    type: 'line',
+                    // Preserve data related option
+                    data: seriesModel.get('data'),
+                    stack: seriesModel.get('stack')
+                }, model.get('option.line'));
+            }
+        },
+        'bar': function (seriesType, seriesId, seriesModel, model) {
+            if (seriesType === 'line') {
+                return zrUtil.merge({
+                    id: seriesId,
+                    type: 'bar',
+                    // Preserve data related option
+                    data: seriesModel.get('data'),
+                    stack: seriesModel.get('stack')
+                }, model.get('option.bar'));
+            }
+        },
+        'stack': function (seriesType, seriesId, seriesModel, model) {
+            if (seriesType === 'line' || seriesType === 'bar') {
+                return {
+                    id: seriesId,
+                    stack: '__ec_magicType_stack__'
+                };
+            }
+        },
+        'tiled': function (seriesType, seriesId, seriesModel, model) {
+            if (seriesType === 'line' || seriesType === 'bar') {
+                return {
+                    id: seriesId,
+                    stack: ''
+                };
+            }
+        }
+    };
+
     proto.onclick = function (ecModel, api, type) {
-        if (type === 'stack') {
-            // var seriesModels = 
+        var model = this.model;
+        var seriesIndex = model.get('seriesIndex.' + type);
+        if (
+            type === 'stack' || type === 'tiled'
+            || type === 'bar' || type === 'line'
+        ) {
+            var newOption = {
+                series: []
+            };
+            ecModel.eachComponent(
+                {
+                    mainType: 'series',
+                    seriesIndex: seriesIndex
+                }, function (seriesModel) {
+                    var seriesType = seriesModel.subType;
+                    var seriesId = seriesModel.id;
+                    var newSeriesOpt = seriesOptGenreator[type](
+                        seriesType, seriesId, seriesModel, model
+                    );
+                    if (newSeriesOpt) {
+                        // PENDING If merge original option?
+                        zrUtil.defaults(newSeriesOpt, seriesModel.option);
+                        newOption.series.push(newSeriesOpt);
+                    }
+                }
+            );
+            api.dispatchAction({
+                type: 'magicType',
+                newOption: newOption
+            });
         }
-    }
+    };
+
+    var echarts = require('../../../echarts');
+    echarts.registerAction({
+        type: 'magicType',
+        event: 'magicType',
+        update: 'reoption'
+    }, function (payload, ecModel) {
+        ecModel.mergeOption(payload.newOption);
+    });
 
     require('../featureManager').register('magicType', MagicType);