Breadcrumb.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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 graphic = require("../../util/graphic");
  20. var layout = require("../../util/layout");
  21. var zrUtil = require("zrender/lib/core/util");
  22. var _treeHelper = require("../helper/treeHelper");
  23. var wrapTreePathInfo = _treeHelper.wrapTreePathInfo;
  24. /*
  25. * Licensed to the Apache Software Foundation (ASF) under one
  26. * or more contributor license agreements. See the NOTICE file
  27. * distributed with this work for additional information
  28. * regarding copyright ownership. The ASF licenses this file
  29. * to you under the Apache License, Version 2.0 (the
  30. * "License"); you may not use this file except in compliance
  31. * with the License. You may obtain a copy of the License at
  32. *
  33. * http://www.apache.org/licenses/LICENSE-2.0
  34. *
  35. * Unless required by applicable law or agreed to in writing,
  36. * software distributed under the License is distributed on an
  37. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  38. * KIND, either express or implied. See the License for the
  39. * specific language governing permissions and limitations
  40. * under the License.
  41. */
  42. var TEXT_PADDING = 8;
  43. var ITEM_GAP = 8;
  44. var ARRAY_LENGTH = 5;
  45. function Breadcrumb(containerGroup) {
  46. /**
  47. * @private
  48. * @type {module:zrender/container/Group}
  49. */
  50. this.group = new graphic.Group();
  51. containerGroup.add(this.group);
  52. }
  53. Breadcrumb.prototype = {
  54. constructor: Breadcrumb,
  55. render: function (seriesModel, api, targetNode, onSelect) {
  56. var model = seriesModel.getModel('breadcrumb');
  57. var thisGroup = this.group;
  58. thisGroup.removeAll();
  59. if (!model.get('show') || !targetNode) {
  60. return;
  61. }
  62. var normalStyleModel = model.getModel('itemStyle'); // var emphasisStyleModel = model.getModel('emphasis.itemStyle');
  63. var textStyleModel = normalStyleModel.getModel('textStyle');
  64. var layoutParam = {
  65. pos: {
  66. left: model.get('left'),
  67. right: model.get('right'),
  68. top: model.get('top'),
  69. bottom: model.get('bottom')
  70. },
  71. box: {
  72. width: api.getWidth(),
  73. height: api.getHeight()
  74. },
  75. emptyItemWidth: model.get('emptyItemWidth'),
  76. totalWidth: 0,
  77. renderList: []
  78. };
  79. this._prepare(targetNode, layoutParam, textStyleModel);
  80. this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect);
  81. layout.positionElement(thisGroup, layoutParam.pos, layoutParam.box);
  82. },
  83. /**
  84. * Prepare render list and total width
  85. * @private
  86. */
  87. _prepare: function (targetNode, layoutParam, textStyleModel) {
  88. for (var node = targetNode; node; node = node.parentNode) {
  89. var text = node.getModel().get('name');
  90. var textRect = textStyleModel.getTextRect(text);
  91. var itemWidth = Math.max(textRect.width + TEXT_PADDING * 2, layoutParam.emptyItemWidth);
  92. layoutParam.totalWidth += itemWidth + ITEM_GAP;
  93. layoutParam.renderList.push({
  94. node: node,
  95. text: text,
  96. width: itemWidth
  97. });
  98. }
  99. },
  100. /**
  101. * @private
  102. */
  103. _renderContent: function (seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect) {
  104. // Start rendering.
  105. var lastX = 0;
  106. var emptyItemWidth = layoutParam.emptyItemWidth;
  107. var height = seriesModel.get('breadcrumb.height');
  108. var availableSize = layout.getAvailableSize(layoutParam.pos, layoutParam.box);
  109. var totalWidth = layoutParam.totalWidth;
  110. var renderList = layoutParam.renderList;
  111. for (var i = renderList.length - 1; i >= 0; i--) {
  112. var item = renderList[i];
  113. var itemNode = item.node;
  114. var itemWidth = item.width;
  115. var text = item.text; // Hdie text and shorten width if necessary.
  116. if (totalWidth > availableSize.width) {
  117. totalWidth -= itemWidth - emptyItemWidth;
  118. itemWidth = emptyItemWidth;
  119. text = null;
  120. }
  121. var el = new graphic.Polygon({
  122. shape: {
  123. points: makeItemPoints(lastX, 0, itemWidth, height, i === renderList.length - 1, i === 0)
  124. },
  125. style: zrUtil.defaults(normalStyleModel.getItemStyle(), {
  126. lineJoin: 'bevel',
  127. text: text,
  128. textFill: textStyleModel.getTextColor(),
  129. textFont: textStyleModel.getFont()
  130. }),
  131. z: 10,
  132. onclick: zrUtil.curry(onSelect, itemNode)
  133. });
  134. this.group.add(el);
  135. packEventData(el, seriesModel, itemNode);
  136. lastX += itemWidth + ITEM_GAP;
  137. }
  138. },
  139. /**
  140. * @override
  141. */
  142. remove: function () {
  143. this.group.removeAll();
  144. }
  145. };
  146. function makeItemPoints(x, y, itemWidth, itemHeight, head, tail) {
  147. var points = [[head ? x : x - ARRAY_LENGTH, y], [x + itemWidth, y], [x + itemWidth, y + itemHeight], [head ? x : x - ARRAY_LENGTH, y + itemHeight]];
  148. !tail && points.splice(2, 0, [x + itemWidth + ARRAY_LENGTH, y + itemHeight / 2]);
  149. !head && points.push([x, y + itemHeight / 2]);
  150. return points;
  151. } // Package custom mouse event.
  152. function packEventData(el, seriesModel, itemNode) {
  153. el.eventData = {
  154. componentType: 'series',
  155. componentSubType: 'treemap',
  156. componentIndex: seriesModel.componentIndex,
  157. seriesIndex: seriesModel.componentIndex,
  158. seriesName: seriesModel.name,
  159. seriesType: 'treemap',
  160. selfType: 'breadcrumb',
  161. // Distinguish with click event on treemap node.
  162. nodeData: {
  163. dataIndex: itemNode && itemNode.dataIndex,
  164. name: itemNode && itemNode.name
  165. },
  166. treePathInfo: itemNode && wrapTreePathInfo(itemNode, seriesModel)
  167. };
  168. }
  169. var _default = Breadcrumb;
  170. module.exports = _default;