Layout helper

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'

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

src/component/legend/legendLayout.js

-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

src/util/layout.js

+// 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

test/bar.html

@@ -63,7 +63,7 @@
                         },
                         orient: 'vertical',
                         x: 'right',
-                        align: 'left'
+                        align: 'right'
                     },
                     tooltip: {},
                     xAxis: {