From d678bc853d2dc7419a5eeaad376f9320a8901125 Mon Sep 17 00:00:00 2001 From: lang Date: Tue, 29 Sep 2015 15:16:08 +0800 Subject: [PATCH] Layout helper --- src/component/legend/LegendModel.js | 10 ++- src/component/legend/LegendView.js | 67 ++++++++------- src/component/legend/legendLayout.js | 29 ------- src/util/layout.js | 118 +++++++++++++++++++++++++++ test/bar.html | 2 +- 5 files changed, 158 insertions(+), 68 deletions(-) delete mode 100644 src/component/legend/legendLayout.js create mode 100644 src/util/layout.js diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 162abee2a..9c2647233 100644 --- a/src/component/legend/LegendModel.js +++ b/src/component/legend/LegendModel.js @@ -94,13 +94,15 @@ define(function(require) { // 'horizontal' | 'vertical' orient: 'horizontal', - // 水平安放位置，默认为全图居中，可选为： + // x, x2 为水平安放位置，默认为全图居中，可选为： // 'center' | 'left' | 'right' | {number}（x坐标，单位px） - x: 'center', + // x: 'center', + // x2: 'center', - // 垂直安放位置，默认为全图顶端，可选为： + // y, y2 为垂直安放位置，默认为全图顶端，可选为： // 'top' | 'bottom' | 'center' | {number}（y坐标，单位px） - y: 'top', + // y: 'top', + // y2: 'top' // 水平对齐 // 'auto' | 'left' | 'right' diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index d3f58200b..1fa86d82c 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -3,9 +3,10 @@ define(function (require) { var zrUtil = require('zrender/core/util'); var numberUtil = require('../../util/number'); var symbolCreator = require('../../util/symbol'); - var legendLayout = require('./legendLayout'); var graphic = require('../../util/graphic'); + var layout = require('../../util/layout'); + var LEGEND_DISABLE_COLOR = '#ccc'; function createSelectActionDispatcher(uid, seriesName, api) { @@ -16,6 +17,32 @@ 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', @@ -31,13 +58,6 @@ define(function (require) { var itemAlign = legendModel.get('align'); var group = this.group; - var x = legendModel.get('x'); - var y = legendModel.get('y'); - var parsePercent = numberUtil.parsePercent; - group.position = [ - parsePercent(x, api.getWidth()), - parsePercent(y, api.getHeight()) - ]; group.removeAll(); if (itemAlign === 'auto') { @@ -101,9 +121,12 @@ define(function (require) { } }, this); - legendLayout(group, legendModel); + layout.box( + legendModel.get('orient'), group, + legendModel.get('itemGap') + ); - this._adjustGroupPosition(group, x, y); + positionGroup(group, legendModel, api); }, _createItem: function ( @@ -151,30 +174,6 @@ define(function (require) { this.group.add(itemGroup); itemGroup.on('click', zrUtil.curry(createSelectActionDispatcher, this.uid, name, api), this); - }, - - _adjustGroupPosition: function (group, x, y) { - - var groupRect = group.getBoundingRect(); - var position = group.position; - var padding = group.padding; - - switch (x) { - case 'center': - position[0] -= groupRect.width / 2; - break; - case 'right': - position[0] -= groupRect.width + groupRect.x + padding[1]; - break; - } - switch (y) { - case 'center': - position[1] -= groupRect.height / 2; - break; - case 'bottom': - position[0] -= groupRect.height + groupRect.y + padding[2]; - break; - } } }); }); \ No newline at end of file diff --git a/src/component/legend/legendLayout.js b/src/component/legend/legendLayout.js deleted file mode 100644 index afce2e6ef..000000000 --- a/src/component/legend/legendLayout.js +++ /dev/null @@ -1,29 +0,0 @@ -define(function(require) { - 'use strict'; - - var formatUtil = require('../../util/format'); - - return function (group, legendModel) { - var itemGap = legendModel.get('itemGap'); - var padding = formatUtil.normalizeCssArray( - legendModel.get('padding') - ); - var orient = legendModel.get('orient'); - - var x = padding[3]; - var y = padding[0]; - - group.eachChild(function (child) { - var position = child.position; - var rect = child.getBoundingRect(); - position[0] = x; - position[1] = y; - - orient === 'horizontal' - ? (x += rect.width + itemGap) - : (y += rect.height + itemGap); - }); - - group.padding = padding; - }; -}); \ No newline at end of file diff --git a/src/util/layout.js b/src/util/layout.js new file mode 100644 index 000000000..9388c829e --- /dev/null +++ b/src/util/layout.js @@ -0,0 +1,118 @@ +// Layout helpers for each component positioning +define(function(require) { + 'use strict'; + + var zrUtil = require('zrender/core/util'); + var numberUtil = require('./number'); + var formatUtil = require('./format'); + + var layout = {}; + + function boxLayout(orient, group, gap) { + var x = 0; + var y = 0; + group.eachChild(function (child) { + var position = child.position; + var rect = child.getBoundingRect(); + position[0] = x; + position[1] = y; + + orient === 'horizontal' + ? (x += rect.width + gap) + : (y += rect.height + gap); + }); + } + + /** + * VBox or HBox layouting + * @param {string} orient + * @param {module:zrender/container/Group} group + * @param {number} gap + */ + layout.box = boxLayout; + + /** + * VBox layouting + * @param {module:zrender/container/Group} group + * @param {number} gap + */ + layout.vbox = zrUtil.curry(boxLayout, 'vertical'); + + /** + * HBox layouting + * @param {module:zrender/container/Group} group + * @param {number} gap + */ + layout.hbox = zrUtil.curry(boxLayout, 'horizontal'); + + + /** + * Position group of component in viewport + * Group position is specified by either + * {x, y}, {x2, y2} + * If all properties exists, x2 and y2 will be igonred. + * + * @param {module:zrender/container/Group} group + * @param {Object} positionInfo + * @param {number|string} [positionInfo.x] + * @param {number|string} [positionInfo.y] + * @param {number|string} [positionInfo.x2] + * @param {number|string} [positionInfo.y2] + * @param {Object} containerRect + * @param {string|number} margin + */ + layout.positionGroup = function ( + group, positionInfo, containerRect, margin + ) { + margin = formatUtil.normalizeCssArray(margin); + + var groupRect = group.getBoundingRect(); + + var containerWidth = containerRect.width; + var containerHeight = containerRect.height; + + var parsePercent = numberUtil.parsePercent; + var x = parsePercent(positionInfo.x, containerWidth); + var y = parsePercent(positionInfo.y, containerHeight); + var x2 = parsePercent(positionInfo.x2, containerWidth); + var y2 = parsePercent(positionInfo.y2, containerHeight); + + var width = groupRect.width; + var height = groupRect.height; + + height += margin[2] + margin[0]; + width += margin[1] + margin[3]; + // If x is not specified, calculate x from x2 and width + if (isNaN(x)) { + x = x2 - width; + } + if (isNaN(y)) { + y = y2 - height; + } + + switch (positionInfo.x || positionInfo.x2) { + case 'center': + x = containerWidth / 2 - width / 2; + break; + case 'right': + x = containerWidth - width; + break; + + } + switch (positionInfo.y || positionInfo.y2) { + case 'middle': + y -= containerHeight / 2 - height / 2; + break; + case 'bottom': + y -= containerHeight - height; + break; + } + + group.position = [ + x - groupRect.x + margin[3], + y - groupRect.y + margin[0] + ]; + }; + + return layout; +}); \ No newline at end of file diff --git a/test/bar.html b/test/bar.html index d3a74dffb..4852ec635 100644 --- a/test/bar.html +++ b/test/bar.html @@ -63,7 +63,7 @@ }, orient: 'vertical', x: 'right', - align: 'left' + align: 'right' }, tooltip: {}, xAxis: { -- GitLab