PiecewiseView.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var zrUtil = require("zrender/lib/core/util");
  20. var VisualMapView = require("./VisualMapView");
  21. var graphic = require("../../util/graphic");
  22. var _symbol = require("../../util/symbol");
  23. var createSymbol = _symbol.createSymbol;
  24. var layout = require("../../util/layout");
  25. var helper = require("./helper");
  26. /*
  27. * Licensed to the Apache Software Foundation (ASF) under one
  28. * or more contributor license agreements. See the NOTICE file
  29. * distributed with this work for additional information
  30. * regarding copyright ownership. The ASF licenses this file
  31. * to you under the Apache License, Version 2.0 (the
  32. * "License"); you may not use this file except in compliance
  33. * with the License. You may obtain a copy of the License at
  34. *
  35. * http://www.apache.org/licenses/LICENSE-2.0
  36. *
  37. * Unless required by applicable law or agreed to in writing,
  38. * software distributed under the License is distributed on an
  39. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  40. * KIND, either express or implied. See the License for the
  41. * specific language governing permissions and limitations
  42. * under the License.
  43. */
  44. var PiecewiseVisualMapView = VisualMapView.extend({
  45. type: 'visualMap.piecewise',
  46. /**
  47. * @protected
  48. * @override
  49. */
  50. doRender: function () {
  51. var thisGroup = this.group;
  52. thisGroup.removeAll();
  53. var visualMapModel = this.visualMapModel;
  54. var textGap = visualMapModel.get('textGap');
  55. var textStyleModel = visualMapModel.textStyleModel;
  56. var textFont = textStyleModel.getFont();
  57. var textFill = textStyleModel.getTextColor();
  58. var itemAlign = this._getItemAlign();
  59. var itemSize = visualMapModel.itemSize;
  60. var viewData = this._getViewData();
  61. var endsText = viewData.endsText;
  62. var showLabel = zrUtil.retrieve(visualMapModel.get('showLabel', true), !endsText);
  63. endsText && this._renderEndsText(thisGroup, endsText[0], itemSize, showLabel, itemAlign);
  64. zrUtil.each(viewData.viewPieceList, renderItem, this);
  65. endsText && this._renderEndsText(thisGroup, endsText[1], itemSize, showLabel, itemAlign);
  66. layout.box(visualMapModel.get('orient'), thisGroup, visualMapModel.get('itemGap'));
  67. this.renderBackground(thisGroup);
  68. this.positionGroup(thisGroup);
  69. function renderItem(item) {
  70. var piece = item.piece;
  71. var itemGroup = new graphic.Group();
  72. itemGroup.onclick = zrUtil.bind(this._onItemClick, this, piece);
  73. this._enableHoverLink(itemGroup, item.indexInModelPieceList);
  74. var representValue = visualMapModel.getRepresentValue(piece);
  75. this._createItemSymbol(itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]]);
  76. if (showLabel) {
  77. var visualState = this.visualMapModel.getValueState(representValue);
  78. itemGroup.add(new graphic.Text({
  79. style: {
  80. x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
  81. y: itemSize[1] / 2,
  82. text: piece.text,
  83. textVerticalAlign: 'middle',
  84. textAlign: itemAlign,
  85. textFont: textFont,
  86. textFill: textFill,
  87. opacity: visualState === 'outOfRange' ? 0.5 : 1
  88. }
  89. }));
  90. }
  91. thisGroup.add(itemGroup);
  92. }
  93. },
  94. /**
  95. * @private
  96. */
  97. _enableHoverLink: function (itemGroup, pieceIndex) {
  98. itemGroup.on('mouseover', zrUtil.bind(onHoverLink, this, 'highlight')).on('mouseout', zrUtil.bind(onHoverLink, this, 'downplay'));
  99. function onHoverLink(method) {
  100. var visualMapModel = this.visualMapModel;
  101. visualMapModel.option.hoverLink && this.api.dispatchAction({
  102. type: method,
  103. batch: helper.makeHighDownBatch(visualMapModel.findTargetDataIndices(pieceIndex), visualMapModel)
  104. });
  105. }
  106. },
  107. /**
  108. * @private
  109. */
  110. _getItemAlign: function () {
  111. var visualMapModel = this.visualMapModel;
  112. var modelOption = visualMapModel.option;
  113. if (modelOption.orient === 'vertical') {
  114. return helper.getItemAlign(visualMapModel, this.api, visualMapModel.itemSize);
  115. } else {
  116. // horizontal, most case left unless specifying right.
  117. var align = modelOption.align;
  118. if (!align || align === 'auto') {
  119. align = 'left';
  120. }
  121. return align;
  122. }
  123. },
  124. /**
  125. * @private
  126. */
  127. _renderEndsText: function (group, text, itemSize, showLabel, itemAlign) {
  128. if (!text) {
  129. return;
  130. }
  131. var itemGroup = new graphic.Group();
  132. var textStyleModel = this.visualMapModel.textStyleModel;
  133. itemGroup.add(new graphic.Text({
  134. style: {
  135. x: showLabel ? itemAlign === 'right' ? itemSize[0] : 0 : itemSize[0] / 2,
  136. y: itemSize[1] / 2,
  137. textVerticalAlign: 'middle',
  138. textAlign: showLabel ? itemAlign : 'center',
  139. text: text,
  140. textFont: textStyleModel.getFont(),
  141. textFill: textStyleModel.getTextColor()
  142. }
  143. }));
  144. group.add(itemGroup);
  145. },
  146. /**
  147. * @private
  148. * @return {Object} {peiceList, endsText} The order is the same as screen pixel order.
  149. */
  150. _getViewData: function () {
  151. var visualMapModel = this.visualMapModel;
  152. var viewPieceList = zrUtil.map(visualMapModel.getPieceList(), function (piece, index) {
  153. return {
  154. piece: piece,
  155. indexInModelPieceList: index
  156. };
  157. });
  158. var endsText = visualMapModel.get('text'); // Consider orient and inverse.
  159. var orient = visualMapModel.get('orient');
  160. var inverse = visualMapModel.get('inverse'); // Order of model pieceList is always [low, ..., high]
  161. if (orient === 'horizontal' ? inverse : !inverse) {
  162. viewPieceList.reverse();
  163. } // Origin order of endsText is [high, low]
  164. else if (endsText) {
  165. endsText = endsText.slice().reverse();
  166. }
  167. return {
  168. viewPieceList: viewPieceList,
  169. endsText: endsText
  170. };
  171. },
  172. /**
  173. * @private
  174. */
  175. _createItemSymbol: function (group, representValue, shapeParam) {
  176. group.add(createSymbol(this.getControllerVisual(representValue, 'symbol'), shapeParam[0], shapeParam[1], shapeParam[2], shapeParam[3], this.getControllerVisual(representValue, 'color')));
  177. },
  178. /**
  179. * @private
  180. */
  181. _onItemClick: function (piece) {
  182. var visualMapModel = this.visualMapModel;
  183. var option = visualMapModel.option;
  184. var selected = zrUtil.clone(option.selected);
  185. var newKey = visualMapModel.getSelectedMapKey(piece);
  186. if (option.selectedMode === 'single') {
  187. selected[newKey] = true;
  188. zrUtil.each(selected, function (o, key) {
  189. selected[key] = key === newKey;
  190. });
  191. } else {
  192. selected[newKey] = !selected[newKey];
  193. }
  194. this.api.dispatchAction({
  195. type: 'selectDataRange',
  196. from: this.uid,
  197. visualMapId: this.visualMapModel.id,
  198. selected: selected
  199. });
  200. }
  201. });
  202. var _default = PiecewiseVisualMapView;
  203. module.exports = _default;