Breadcrumb.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. var graphic = require("../../util/graphic");
  2. var layout = require("../../util/layout");
  3. var zrUtil = require("zrender/lib/core/util");
  4. var _helper = require("./helper");
  5. var wrapTreePathInfo = _helper.wrapTreePathInfo;
  6. var TEXT_PADDING = 8;
  7. var ITEM_GAP = 8;
  8. var ARRAY_LENGTH = 5;
  9. function Breadcrumb(containerGroup) {
  10. /**
  11. * @private
  12. * @type {module:zrender/container/Group}
  13. */
  14. this.group = new graphic.Group();
  15. containerGroup.add(this.group);
  16. }
  17. Breadcrumb.prototype = {
  18. constructor: Breadcrumb,
  19. render: function (seriesModel, api, targetNode, onSelect) {
  20. var model = seriesModel.getModel('breadcrumb');
  21. var thisGroup = this.group;
  22. thisGroup.removeAll();
  23. if (!model.get('show') || !targetNode) {
  24. return;
  25. }
  26. var normalStyleModel = model.getModel('itemStyle.normal'); // var emphasisStyleModel = model.getModel('itemStyle.emphasis');
  27. var textStyleModel = normalStyleModel.getModel('textStyle');
  28. var layoutParam = {
  29. pos: {
  30. left: model.get('left'),
  31. right: model.get('right'),
  32. top: model.get('top'),
  33. bottom: model.get('bottom')
  34. },
  35. box: {
  36. width: api.getWidth(),
  37. height: api.getHeight()
  38. },
  39. emptyItemWidth: model.get('emptyItemWidth'),
  40. totalWidth: 0,
  41. renderList: []
  42. };
  43. this._prepare(targetNode, layoutParam, textStyleModel);
  44. this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect);
  45. layout.positionElement(thisGroup, layoutParam.pos, layoutParam.box);
  46. },
  47. /**
  48. * Prepare render list and total width
  49. * @private
  50. */
  51. _prepare: function (targetNode, layoutParam, textStyleModel) {
  52. for (var node = targetNode; node; node = node.parentNode) {
  53. var text = node.getModel().get('name');
  54. var textRect = textStyleModel.getTextRect(text);
  55. var itemWidth = Math.max(textRect.width + TEXT_PADDING * 2, layoutParam.emptyItemWidth);
  56. layoutParam.totalWidth += itemWidth + ITEM_GAP;
  57. layoutParam.renderList.push({
  58. node: node,
  59. text: text,
  60. width: itemWidth
  61. });
  62. }
  63. },
  64. /**
  65. * @private
  66. */
  67. _renderContent: function (seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect) {
  68. // Start rendering.
  69. var lastX = 0;
  70. var emptyItemWidth = layoutParam.emptyItemWidth;
  71. var height = seriesModel.get('breadcrumb.height');
  72. var availableSize = layout.getAvailableSize(layoutParam.pos, layoutParam.box);
  73. var totalWidth = layoutParam.totalWidth;
  74. var renderList = layoutParam.renderList;
  75. for (var i = renderList.length - 1; i >= 0; i--) {
  76. var item = renderList[i];
  77. var itemNode = item.node;
  78. var itemWidth = item.width;
  79. var text = item.text; // Hdie text and shorten width if necessary.
  80. if (totalWidth > availableSize.width) {
  81. totalWidth -= itemWidth - emptyItemWidth;
  82. itemWidth = emptyItemWidth;
  83. text = null;
  84. }
  85. var el = new graphic.Polygon({
  86. shape: {
  87. points: makeItemPoints(lastX, 0, itemWidth, height, i === renderList.length - 1, i === 0)
  88. },
  89. style: zrUtil.defaults(normalStyleModel.getItemStyle(), {
  90. lineJoin: 'bevel',
  91. text: text,
  92. textFill: textStyleModel.getTextColor(),
  93. textFont: textStyleModel.getFont()
  94. }),
  95. z: 10,
  96. onclick: zrUtil.curry(onSelect, itemNode)
  97. });
  98. this.group.add(el);
  99. packEventData(el, seriesModel, itemNode);
  100. lastX += itemWidth + ITEM_GAP;
  101. }
  102. },
  103. /**
  104. * @override
  105. */
  106. remove: function () {
  107. this.group.removeAll();
  108. }
  109. };
  110. function makeItemPoints(x, y, itemWidth, itemHeight, head, tail) {
  111. var points = [[head ? x : x - ARRAY_LENGTH, y], [x + itemWidth, y], [x + itemWidth, y + itemHeight], [head ? x : x - ARRAY_LENGTH, y + itemHeight]];
  112. !tail && points.splice(2, 0, [x + itemWidth + ARRAY_LENGTH, y + itemHeight / 2]);
  113. !head && points.push([x, y + itemHeight / 2]);
  114. return points;
  115. } // Package custom mouse event.
  116. function packEventData(el, seriesModel, itemNode) {
  117. el.eventData = {
  118. componentType: 'series',
  119. componentSubType: 'treemap',
  120. seriesIndex: seriesModel.componentIndex,
  121. seriesName: seriesModel.name,
  122. seriesType: 'treemap',
  123. selfType: 'breadcrumb',
  124. // Distinguish with click event on treemap node.
  125. nodeData: {
  126. dataIndex: itemNode && itemNode.dataIndex,
  127. name: itemNode && itemNode.name
  128. },
  129. treePathInfo: itemNode && wrapTreePathInfo(itemNode, seriesModel)
  130. };
  131. }
  132. var _default = Breadcrumb;
  133. module.exports = _default;