TooltipRichContent.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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 = /** @class */function () {
  45. function TooltipRichContent(api) {
  46. this._show = false;
  47. this._styleCoord = [0, 0, 0, 0];
  48. this._alwaysShowContent = false;
  49. this._enterable = true;
  50. this._zr = api.getZr();
  51. makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
  52. }
  53. /**
  54. * Update when tooltip is rendered
  55. */
  56. TooltipRichContent.prototype.update = function (tooltipModel) {
  57. var alwaysShowContent = tooltipModel.get('alwaysShowContent');
  58. alwaysShowContent && this._moveIfResized();
  59. // update alwaysShowContent
  60. this._alwaysShowContent = alwaysShowContent;
  61. };
  62. TooltipRichContent.prototype.show = function () {
  63. if (this._hideTimeout) {
  64. clearTimeout(this._hideTimeout);
  65. }
  66. this.el.show();
  67. this._show = true;
  68. };
  69. /**
  70. * Set tooltip content
  71. */
  72. TooltipRichContent.prototype.setContent = function (content, markupStyleCreator, tooltipModel, borderColor, arrowPosition) {
  73. var _this = this;
  74. if (zrUtil.isObject(content)) {
  75. throwError(process.env.NODE_ENV !== 'production' ? 'Passing DOM nodes as content is not supported in richText tooltip!' : '');
  76. }
  77. if (this.el) {
  78. this._zr.remove(this.el);
  79. }
  80. var textStyleModel = tooltipModel.getModel('textStyle');
  81. this.el = new ZRText({
  82. style: {
  83. rich: markupStyleCreator.richTextStyles,
  84. text: content,
  85. lineHeight: 22,
  86. borderWidth: 1,
  87. borderColor: borderColor,
  88. textShadowColor: textStyleModel.get('textShadowColor'),
  89. fill: tooltipModel.get(['textStyle', 'color']),
  90. padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
  91. verticalAlign: 'top',
  92. align: 'left'
  93. },
  94. z: tooltipModel.get('z')
  95. });
  96. zrUtil.each(['backgroundColor', 'borderRadius', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'], function (propName) {
  97. _this.el.style[propName] = tooltipModel.get(propName);
  98. });
  99. zrUtil.each(['textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'], function (propName) {
  100. _this.el.style[propName] = textStyleModel.get(propName) || 0;
  101. });
  102. this._zr.add(this.el);
  103. var self = this;
  104. this.el.on('mouseover', function () {
  105. // clear the timeout in hideLater and keep showing tooltip
  106. if (self._enterable) {
  107. clearTimeout(self._hideTimeout);
  108. self._show = true;
  109. }
  110. self._inContent = true;
  111. });
  112. this.el.on('mouseout', function () {
  113. if (self._enterable) {
  114. if (self._show) {
  115. self.hideLater(self._hideDelay);
  116. }
  117. }
  118. self._inContent = false;
  119. });
  120. };
  121. TooltipRichContent.prototype.setEnterable = function (enterable) {
  122. this._enterable = enterable;
  123. };
  124. TooltipRichContent.prototype.getSize = function () {
  125. var el = this.el;
  126. var bounding = this.el.getBoundingRect();
  127. // 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);
  142. // rich text x, y do not include border.
  143. el.x = x + borderWidth + shadowOuterSize.left;
  144. el.y = y + borderWidth + shadowOuterSize.top;
  145. el.markRedraw();
  146. }
  147. };
  148. /**
  149. * when `alwaysShowContent` is true,
  150. * move the tooltip after chart resized
  151. */
  152. TooltipRichContent.prototype._moveIfResized = function () {
  153. // The ratio of left to width
  154. var ratioX = this._styleCoord[2];
  155. // The ratio of top to height
  156. var ratioY = this._styleCoord[3];
  157. this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
  158. };
  159. TooltipRichContent.prototype.hide = function () {
  160. if (this.el) {
  161. this.el.hide();
  162. }
  163. this._show = false;
  164. };
  165. TooltipRichContent.prototype.hideLater = function (time) {
  166. if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
  167. if (time) {
  168. this._hideDelay = time;
  169. // Set show false to avoid invoke hideLater multiple times
  170. this._show = false;
  171. this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
  172. } else {
  173. this.hide();
  174. }
  175. }
  176. };
  177. TooltipRichContent.prototype.isShow = function () {
  178. return this._show;
  179. };
  180. TooltipRichContent.prototype.dispose = function () {
  181. this._zr.remove(this.el);
  182. };
  183. return TooltipRichContent;
  184. }();
  185. function mathMaxWith0(val) {
  186. return Math.max(0, val);
  187. }
  188. function calcShadowOuterSize(style) {
  189. var shadowBlur = mathMaxWith0(style.shadowBlur || 0);
  190. var shadowOffsetX = mathMaxWith0(style.shadowOffsetX || 0);
  191. var shadowOffsetY = mathMaxWith0(style.shadowOffsetY || 0);
  192. return {
  193. left: mathMaxWith0(shadowBlur - shadowOffsetX),
  194. right: mathMaxWith0(shadowBlur + shadowOffsetX),
  195. top: mathMaxWith0(shadowBlur - shadowOffsetY),
  196. bottom: mathMaxWith0(shadowBlur + shadowOffsetY)
  197. };
  198. }
  199. function makeStyleCoord(out, zr, zrX, zrY) {
  200. out[0] = zrX;
  201. out[1] = zrY;
  202. out[2] = out[0] / zr.getWidth();
  203. out[3] = out[1] / zr.getHeight();
  204. }
  205. export default TooltipRichContent;