TooltipRichContent.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  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. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import * as zrUtil from 'zrender/lib/core/util.js';
  41. import ZRText from 'zrender/lib/graphic/Text.js';
  42. import { getPaddingFromTooltipModel } from './tooltipMarkup.js';
  43. import { throwError } from '../../util/log.js';
  44. var TooltipRichContent =
  45. /** @class */
  46. function () {
  47. function TooltipRichContent(api) {
  48. this._show = false;
  49. this._styleCoord = [0, 0, 0, 0];
  50. this._alwaysShowContent = false;
  51. this._enterable = true;
  52. this._zr = api.getZr();
  53. makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
  54. }
  55. /**
  56. * Update when tooltip is rendered
  57. */
  58. TooltipRichContent.prototype.update = function (tooltipModel) {
  59. var alwaysShowContent = tooltipModel.get('alwaysShowContent');
  60. alwaysShowContent && this._moveIfResized(); // update alwaysShowContent
  61. this._alwaysShowContent = alwaysShowContent;
  62. };
  63. TooltipRichContent.prototype.show = function () {
  64. if (this._hideTimeout) {
  65. clearTimeout(this._hideTimeout);
  66. }
  67. this.el.show();
  68. this._show = true;
  69. };
  70. /**
  71. * Set tooltip content
  72. */
  73. TooltipRichContent.prototype.setContent = function (content, markupStyleCreator, tooltipModel, borderColor, arrowPosition) {
  74. var _this = this;
  75. if (zrUtil.isObject(content)) {
  76. throwError(process.env.NODE_ENV !== 'production' ? 'Passing DOM nodes as content is not supported in richText tooltip!' : '');
  77. }
  78. if (this.el) {
  79. this._zr.remove(this.el);
  80. }
  81. var textStyleModel = tooltipModel.getModel('textStyle');
  82. this.el = new ZRText({
  83. style: {
  84. rich: markupStyleCreator.richTextStyles,
  85. text: content,
  86. lineHeight: 22,
  87. borderWidth: 1,
  88. borderColor: borderColor,
  89. textShadowColor: textStyleModel.get('textShadowColor'),
  90. fill: tooltipModel.get(['textStyle', 'color']),
  91. padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
  92. verticalAlign: 'top',
  93. align: 'left'
  94. },
  95. z: tooltipModel.get('z')
  96. });
  97. zrUtil.each(['backgroundColor', 'borderRadius', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'], function (propName) {
  98. _this.el.style[propName] = tooltipModel.get(propName);
  99. });
  100. zrUtil.each(['textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'], function (propName) {
  101. _this.el.style[propName] = textStyleModel.get(propName) || 0;
  102. });
  103. this._zr.add(this.el);
  104. var self = this;
  105. this.el.on('mouseover', function () {
  106. // clear the timeout in hideLater and keep showing tooltip
  107. if (self._enterable) {
  108. clearTimeout(self._hideTimeout);
  109. self._show = true;
  110. }
  111. self._inContent = true;
  112. });
  113. this.el.on('mouseout', function () {
  114. if (self._enterable) {
  115. if (self._show) {
  116. self.hideLater(self._hideDelay);
  117. }
  118. }
  119. self._inContent = false;
  120. });
  121. };
  122. TooltipRichContent.prototype.setEnterable = function (enterable) {
  123. this._enterable = enterable;
  124. };
  125. TooltipRichContent.prototype.getSize = function () {
  126. var el = this.el;
  127. var bounding = this.el.getBoundingRect(); // bounding rect does not include shadow. For renderMode richText,
  128. // if overflow, it will be cut. So calculate them accurately.
  129. var shadowOuterSize = calcShadowOuterSize(el.style);
  130. return [bounding.width + shadowOuterSize.left + shadowOuterSize.right, bounding.height + shadowOuterSize.top + shadowOuterSize.bottom];
  131. };
  132. TooltipRichContent.prototype.moveTo = function (x, y) {
  133. var el = this.el;
  134. if (el) {
  135. var styleCoord = this._styleCoord;
  136. makeStyleCoord(styleCoord, this._zr, x, y);
  137. x = styleCoord[0];
  138. y = styleCoord[1];
  139. var style = el.style;
  140. var borderWidth = mathMaxWith0(style.borderWidth || 0);
  141. var shadowOuterSize = calcShadowOuterSize(style); // rich text x, y do not include border.
  142. el.x = x + borderWidth + shadowOuterSize.left;
  143. el.y = y + borderWidth + shadowOuterSize.top;
  144. el.markRedraw();
  145. }
  146. };
  147. /**
  148. * when `alwaysShowContent` is true,
  149. * move the tooltip after chart resized
  150. */
  151. TooltipRichContent.prototype._moveIfResized = function () {
  152. // The ratio of left to width
  153. var ratioX = this._styleCoord[2]; // The ratio of top to height
  154. var ratioY = this._styleCoord[3];
  155. this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
  156. };
  157. TooltipRichContent.prototype.hide = function () {
  158. if (this.el) {
  159. this.el.hide();
  160. }
  161. this._show = false;
  162. };
  163. TooltipRichContent.prototype.hideLater = function (time) {
  164. if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
  165. if (time) {
  166. this._hideDelay = time; // Set show false to avoid invoke hideLater multiple times
  167. this._show = false;
  168. this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
  169. } else {
  170. this.hide();
  171. }
  172. }
  173. };
  174. TooltipRichContent.prototype.isShow = function () {
  175. return this._show;
  176. };
  177. TooltipRichContent.prototype.dispose = function () {
  178. this._zr.remove(this.el);
  179. };
  180. return TooltipRichContent;
  181. }();
  182. function mathMaxWith0(val) {
  183. return Math.max(0, val);
  184. }
  185. function calcShadowOuterSize(style) {
  186. var shadowBlur = mathMaxWith0(style.shadowBlur || 0);
  187. var shadowOffsetX = mathMaxWith0(style.shadowOffsetX || 0);
  188. var shadowOffsetY = mathMaxWith0(style.shadowOffsetY || 0);
  189. return {
  190. left: mathMaxWith0(shadowBlur - shadowOffsetX),
  191. right: mathMaxWith0(shadowBlur + shadowOffsetX),
  192. top: mathMaxWith0(shadowBlur - shadowOffsetY),
  193. bottom: mathMaxWith0(shadowBlur + shadowOffsetY)
  194. };
  195. }
  196. function makeStyleCoord(out, zr, zrX, zrY) {
  197. out[0] = zrX;
  198. out[1] = zrY;
  199. out[2] = out[0] / zr.getWidth();
  200. out[3] = out[1] / zr.getHeight();
  201. }
  202. export default TooltipRichContent;