diff --git a/src/component/visualMap/ContinuousView.js b/src/component/visualMap/ContinuousView.js index d550fe2909d2a709d00510c18af7a978136dcbff..3a0df57b736b62ea0ff13bfc7acaca08845a080b 100644 --- a/src/component/visualMap/ContinuousView.js +++ b/src/component/visualMap/ContinuousView.js @@ -7,6 +7,7 @@ define(function(require) { var sliderMove = require('../helper/sliderMove'); var linearMap = numberUtil.linearMap; var LinearGradient = require('zrender/graphic/LinearGradient'); + var helper = require('./helper'); var each = zrUtil.each; // Notice: @@ -151,15 +152,9 @@ define(function(require) { var visualMapModel = this.visualMapModel; var shapes = this._shapes; var itemSize = visualMapModel.itemSize; - var api = this.api; var orient = this._orient; var useHandle = this._useHandle; - - var itemAlign = this.getItemAlignByOrient( - orient === 'horizontal' ? 'vertical' : 'horizontal', - orient === 'horizontal' ? api.getWidth() : api.getHeight() - ); - + var itemAlign = helper.getItemAlign(visualMapModel, this.api, itemSize); var barGroup = shapes.barGroup = this._createBarGroup(itemAlign); // Bar @@ -193,7 +188,7 @@ define(function(require) { /** * @private */ - _createHandle: function (barGroup, handleIndex, itemSize, textSize, orient, itemAlign) { + _createHandle: function (barGroup, handleIndex, itemSize, textSize, orient) { var handleGroup = new graphic.Group({position: [itemSize[0], 0]}); var handleThumb = createPolygon( createHandlePoints(handleIndex, textSize), @@ -391,12 +386,12 @@ define(function(require) { return new graphic.Group( (orient === 'horizontal' && !inverse) - ? {scale: itemAlign === 'top' ? [1, 1] : [-1, 1], rotation: Math.PI / 2} + ? {scale: itemAlign === 'bottom' ? [1, 1] : [-1, 1], rotation: Math.PI / 2} : (orient === 'horizontal' && inverse) - ? {scale: itemAlign === 'top' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2} + ? {scale: itemAlign === 'bottom' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2} : (orient === 'vertical' && !inverse) - ? {scale: itemAlign === 'right' ? [1, -1] : [-1, -1]} - : {scale: itemAlign === 'right' ? [1, 1] : [-1, 1]} + ? {scale: itemAlign === 'left' ? [1, -1] : [-1, -1]} + : {scale: itemAlign === 'left' ? [1, 1] : [-1, 1]} ); }, diff --git a/src/component/visualMap/PiecewiseView.js b/src/component/visualMap/PiecewiseView.js index bdc599a7ebfc5eac1bc217bde20983ebd9118015..f80b98bbc6443b65e689514674baa6120c0e6aa4 100644 --- a/src/component/visualMap/PiecewiseView.js +++ b/src/component/visualMap/PiecewiseView.js @@ -5,6 +5,7 @@ define(function(require) { var graphic = require('../../util/graphic'); var symbolCreators = require('../../util/symbol'); var layout = require('../../util/layout'); + var helper = require('./helper'); var PiecewiseVisualMapView = VisualMapView.extend({ @@ -20,13 +21,11 @@ define(function(require) { thisGroup.removeAll(); var visualMapModel = this.visualMapModel; - var api = this.api; - var ecWidth = api.getWidth(); var textGap = visualMapModel.get('textGap'); var textStyleModel = visualMapModel.textStyleModel; var textFont = textStyleModel.getFont(); var textFill = textStyleModel.getTextColor(); - var itemAlign = this.getItemAlignByOrient('horizontal', ecWidth); + var itemAlign = this._getItemAlign(); var itemSize = visualMapModel.itemSize; var viewData = this._getViewData(); @@ -56,11 +55,11 @@ define(function(require) { if (showLabel) { itemGroup.add(new graphic.Text({ style: { - x: itemAlign === 'right' ? itemSize[0] + textGap : -textGap, + x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap, y: itemSize[1] / 2, text: item.piece.text, textBaseline: 'middle', - textAlign: itemAlign === 'right' ? 'left' : 'right', + textAlign: itemAlign, textFont: textFont, fill: textFill } @@ -71,6 +70,26 @@ define(function(require) { } }, + /** + * @private + */ + _getItemAlign: function () { + var visualMapModel = this.visualMapModel; + var modelOption = visualMapModel.option; + if (modelOption.orient === 'vertical') { + return helper.getItemAlign( + visualMapModel, this.api, visualMapModel.itemSize + ); + } + else { // horizontal, most case left unless specifying right. + var align = modelOption.align; + if (!align || align === 'auto') { + align = 'left'; + } + return align; + } + }, + /** * @private */ diff --git a/src/component/visualMap/VisualMapView.js b/src/component/visualMap/VisualMapView.js index 103087763664b893c0d005c2f44cafeb472e6ed2..319df66e4a38ad8cd6840381e69f23e7881095ee 100644 --- a/src/component/visualMap/VisualMapView.js +++ b/src/component/visualMap/VisualMapView.js @@ -129,39 +129,6 @@ define(function (require) { return visualObj; }, - /** - * @protected - */ - getItemAlignByOrient: function (itemOrient, ecSize) { - var modelOption = this.visualMapModel.option; - var itemAlign = modelOption.align; - var orient = modelOption.orient; - - return itemOrient === 'horizontal' - ? getAlign('x', ['left', 'right']) - : getAlign('y', ['top', 'bottom']); - - function getAlign(dim, values) { - var dim2 = dim + '2'; - var v = zrUtil.retrieve(modelOption[dim], modelOption[dim2], 0); - if (!itemAlign || itemAlign === 'auto') { - itemAlign = (orient === 'horizontal' && orient === itemOrient) - ? 'right' - : has(dim, dim2, values[1]) - ? values[0] - : has(dim, dim2, values[0]) - ? values[1] - : (v > ecSize * 0.6 ? values[0] : values[1]); - } - - return itemAlign; - } - - function has(attr1, attr2, value) { - return modelOption[attr1] === value || modelOption[attr2] === value; - } - }, - /** * @protected */ diff --git a/src/component/visualMap/helper.js b/src/component/visualMap/helper.js new file mode 100644 index 0000000000000000000000000000000000000000..5dc80a26c097f645b0b8d57f560826687b6c55f3 --- /dev/null +++ b/src/component/visualMap/helper.js @@ -0,0 +1,49 @@ +define(function(require) { + + var layout = require('../../util/layout'); + + var helper = { + + /** + * @param {module:echarts/component/visualMap/VisualMapModel} visualMapModel\ + * @param {module:echarts/ExtensionAPI} api + * @param {Array.} itemSize always [short, long] + * @return {string} 'left' or 'right' or 'top' or 'bottom' + */ + getItemAlign: function (visualMapModel, api, itemSize) { + var modelOption = visualMapModel.option; + var itemAlign = modelOption.align; + + if (itemAlign != null && itemAlign !== 'auto') { + return itemAlign; + } + + // Auto decision align. + var ecSize = {width: api.getWidth(), height: api.getHeight()}; + var realIndex = modelOption.orient === 'horizontal' ? 1 : 0; + + var paramsSet = [ + ['left', 'right', 'width'], + ['top', 'bottom', 'height'] + ]; + var reals = paramsSet[realIndex]; + var fakeValue = [0, null, 10]; + + var layoutInput = {}; + for (var i = 0; i < 3; i++) { + layoutInput[paramsSet[1 - realIndex][i]] = fakeValue[i]; + layoutInput[reals[i]] = i === 2 ? itemSize[0] : modelOption[reals[i]]; + } + + var rParam = [['x', 'width', 3], ['y', 'height', 0]][realIndex]; + var rect = layout.getLayoutRect(layoutInput, ecSize, modelOption.padding); + + return reals[ + (rect.margin[rParam[2]] || 0) + rect[rParam[0]] + rect[rParam[1]] * 0.5 + < ecSize[rParam[1]] * 0.5 ? 0 : 1 + ]; + } + }; + + return helper; +}); diff --git a/test/lib/draggable.js b/test/lib/draggable.js index 534dc7cdc77807ad4a1cce62e8506d42ec35e62b..0135099b251042fee482e33237148db584bc3ec7 100644 --- a/test/lib/draggable.js +++ b/test/lib/draggable.js @@ -29,6 +29,9 @@ } var mainEl = $(mainEl); + + $('.draggable-control').remove(); + var controlEl = $( '
DRAG
' ); @@ -44,6 +47,7 @@ 'color': '#fff', 'cursor': 'pointer', 'font-size': '18px', + 'box-shadow': '0 0 5px #333', '-webkit-user-select': 'none', 'user-select': 'none' }); diff --git a/test/visualMap-layout.html b/test/visualMap-layout.html new file mode 100644 index 0000000000000000000000000000000000000000..2b2353a11ada8d7bb94a6ea3dba8d930ae807501 --- /dev/null +++ b/test/visualMap-layout.html @@ -0,0 +1,432 @@ + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/test/visualMap-scatter-layout1-text.html b/test/visualMap-scatter-layout1-text.html deleted file mode 100644 index 88318df29201221e3b3d972520dc2a637da08ddf..0000000000000000000000000000000000000000 --- a/test/visualMap-scatter-layout1-text.html +++ /dev/null @@ -1,230 +0,0 @@ - - - - - - - - -
- - - \ No newline at end of file diff --git a/test/visualMap-scatter-layout1.html b/test/visualMap-scatter-layout1.html deleted file mode 100644 index 098eb0939a2132a22a9021415d24f4dc8cae00fa..0000000000000000000000000000000000000000 --- a/test/visualMap-scatter-layout1.html +++ /dev/null @@ -1,224 +0,0 @@ - - - - - - - - -
- - - \ No newline at end of file diff --git a/test/visualMap-scatter-layout2-text.html b/test/visualMap-scatter-layout2-text.html deleted file mode 100644 index 6683cea2e4f2a55c4437c63954e5335ab9ff6e34..0000000000000000000000000000000000000000 --- a/test/visualMap-scatter-layout2-text.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - - - - -
- - - \ No newline at end of file diff --git a/test/visualMap-scatter-layout2.html b/test/visualMap-scatter-layout2.html deleted file mode 100644 index ee9f4fcc97677c7103d996946f428595c2e179fb..0000000000000000000000000000000000000000 --- a/test/visualMap-scatter-layout2.html +++ /dev/null @@ -1,237 +0,0 @@ - - - - - - - - -
- - - \ No newline at end of file