TooltipRichContent.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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 Text = require("zrender/lib/graphic/Text");
  21. /*
  22. * Licensed to the Apache Software Foundation (ASF) under one
  23. * or more contributor license agreements. See the NOTICE file
  24. * distributed with this work for additional information
  25. * regarding copyright ownership. The ASF licenses this file
  26. * to you under the Apache License, Version 2.0 (the
  27. * "License"); you may not use this file except in compliance
  28. * with the License. You may obtain a copy of the License at
  29. *
  30. * http://www.apache.org/licenses/LICENSE-2.0
  31. *
  32. * Unless required by applicable law or agreed to in writing,
  33. * software distributed under the License is distributed on an
  34. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  35. * KIND, either express or implied. See the License for the
  36. * specific language governing permissions and limitations
  37. * under the License.
  38. */
  39. // import Group from 'zrender/src/container/Group';
  40. /**
  41. * @alias module:echarts/component/tooltip/TooltipRichContent
  42. * @constructor
  43. */
  44. function TooltipRichContent(api) {
  45. this._zr = api.getZr();
  46. this._show = false;
  47. /**
  48. * @private
  49. */
  50. this._hideTimeout;
  51. }
  52. TooltipRichContent.prototype = {
  53. constructor: TooltipRichContent,
  54. /**
  55. * @private
  56. * @type {boolean}
  57. */
  58. _enterable: true,
  59. /**
  60. * Update when tooltip is rendered
  61. */
  62. update: function () {// noop
  63. },
  64. show: function (tooltipModel) {
  65. if (this._hideTimeout) {
  66. clearTimeout(this._hideTimeout);
  67. }
  68. this.el.attr('show', true);
  69. this._show = true;
  70. },
  71. /**
  72. * Set tooltip content
  73. *
  74. * @param {string} content rich text string of content
  75. * @param {Object} markerRich rich text style
  76. * @param {Object} tooltipModel tooltip model
  77. */
  78. setContent: function (content, markerRich, tooltipModel) {
  79. if (this.el) {
  80. this._zr.remove(this.el);
  81. }
  82. var markers = {};
  83. var text = content;
  84. var prefix = '{marker';
  85. var suffix = '|}';
  86. var startId = text.indexOf(prefix);
  87. while (startId >= 0) {
  88. var endId = text.indexOf(suffix);
  89. var name = text.substr(startId + prefix.length, endId - startId - prefix.length);
  90. if (name.indexOf('sub') > -1) {
  91. markers['marker' + name] = {
  92. textWidth: 4,
  93. textHeight: 4,
  94. textBorderRadius: 2,
  95. textBackgroundColor: markerRich[name],
  96. // TODO: textOffset is not implemented for rich text
  97. textOffset: [3, 0]
  98. };
  99. } else {
  100. markers['marker' + name] = {
  101. textWidth: 10,
  102. textHeight: 10,
  103. textBorderRadius: 5,
  104. textBackgroundColor: markerRich[name]
  105. };
  106. }
  107. text = text.substr(endId + 1);
  108. startId = text.indexOf('{marker');
  109. }
  110. this.el = new Text({
  111. style: {
  112. rich: markers,
  113. text: content,
  114. textLineHeight: 20,
  115. textBackgroundColor: tooltipModel.get('backgroundColor'),
  116. textBorderRadius: tooltipModel.get('borderRadius'),
  117. textFill: tooltipModel.get('textStyle.color'),
  118. textPadding: tooltipModel.get('padding')
  119. },
  120. z: tooltipModel.get('z')
  121. });
  122. this._zr.add(this.el);
  123. var self = this;
  124. this.el.on('mouseover', function () {
  125. // clear the timeout in hideLater and keep showing tooltip
  126. if (self._enterable) {
  127. clearTimeout(self._hideTimeout);
  128. self._show = true;
  129. }
  130. self._inContent = true;
  131. });
  132. this.el.on('mouseout', function () {
  133. if (self._enterable) {
  134. if (self._show) {
  135. self.hideLater(self._hideDelay);
  136. }
  137. }
  138. self._inContent = false;
  139. });
  140. },
  141. setEnterable: function (enterable) {
  142. this._enterable = enterable;
  143. },
  144. getSize: function () {
  145. var bounding = this.el.getBoundingRect();
  146. return [bounding.width, bounding.height];
  147. },
  148. moveTo: function (x, y) {
  149. if (this.el) {
  150. this.el.attr('position', [x, y]);
  151. }
  152. },
  153. hide: function () {
  154. if (this.el) {
  155. this.el.hide();
  156. }
  157. this._show = false;
  158. },
  159. hideLater: function (time) {
  160. if (this._show && !(this._inContent && this._enterable)) {
  161. if (time) {
  162. this._hideDelay = time; // Set show false to avoid invoke hideLater mutiple times
  163. this._show = false;
  164. this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
  165. } else {
  166. this.hide();
  167. }
  168. }
  169. },
  170. isShow: function () {
  171. return this._show;
  172. },
  173. getOuterSize: function () {
  174. var size = this.getSize();
  175. return {
  176. width: size[0],
  177. height: size[1]
  178. };
  179. }
  180. };
  181. var _default = TooltipRichContent;
  182. module.exports = _default;