From 6a7dd1683dda2d71f0905c7fd561aafd8296fc03 Mon Sep 17 00:00:00 2001 From: lang Date: Fri, 25 Dec 2015 17:55:49 +0800 Subject: [PATCH] Toolbox magicType enhancement --- src/component/toolbox/ToolboxModel.js | 4 +- src/component/toolbox/ToolboxView.js | 51 +++++++++++- src/component/toolbox/feature/MagicType.js | 93 ++++++++++++++++++++-- 3 files changed, 139 insertions(+), 9 deletions(-) diff --git a/src/component/toolbox/ToolboxModel.js b/src/component/toolbox/ToolboxModel.js index 4b94b3f8d..d6746d9fc 100644 --- a/src/component/toolbox/ToolboxModel.js +++ b/src/component/toolbox/ToolboxModel.js @@ -41,9 +41,9 @@ define(function (require) { padding: 10, - itemGap: 10, + itemSize: 15, - itemSize: 18, + itemGap: 8, showTitle: true, diff --git a/src/component/toolbox/ToolboxView.js b/src/component/toolbox/ToolboxView.js index b057c2bdb..6faed057d 100644 --- a/src/component/toolbox/ToolboxView.js +++ b/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 diff --git a/src/component/toolbox/feature/MagicType.js b/src/component/toolbox/feature/MagicType.js index b0726b333..ab12da85a 100644 --- a/src/component/toolbox/feature/MagicType.js +++ b/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); -- GitLab