TooltipRichContent.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  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';
  41. import ZRText from 'zrender/lib/graphic/Text';
  42. import { getPaddingFromTooltipModel } from './tooltipMarkup';
  43. import { throwError } from '../../util/log';
  44. var TooltipRichContent =
  45. /** @class */
  46. function () {
  47. function TooltipRichContent(api) {
  48. this._show = false;
  49. this._styleCoord = [0, 0, 0, 0];
  50. this._enterable = true;
  51. this._zr = api.getZr();
  52. makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
  53. }
  54. /**
  55. * Update when tooltip is rendered
  56. */
  57. TooltipRichContent.prototype.update = function (tooltipModel) {
  58. var alwaysShowContent = tooltipModel.get('alwaysShowContent');
  59. alwaysShowContent && this._moveIfResized();
  60. };
  61. TooltipRichContent.prototype.show = function () {
  62. if (this._hideTimeout) {
  63. clearTimeout(this._hideTimeout);
  64. }
  65. this.el.show();
  66. this._show = true;
  67. };
  68. /**
  69. * Set tooltip content
  70. */
  71. TooltipRichContent.prototype.setContent = function (content, markupStyleCreator, tooltipModel, borderColor, arrowPosition) {
  72. if (zrUtil.isObject(content)) {
  73. throwError(process.env.NODE_ENV !== 'production' ? 'Passing DOM nodes as content is not supported in richText tooltip!' : '');
  74. }
  75. if (this.el) {
  76. this._zr.remove(this.el);
  77. }
  78. var textStyleModel = tooltipModel.getModel('textStyle');
  79. this.el = new ZRText({
  80. style: {
  81. rich: markupStyleCreator.richTextStyles,
  82. text: content,
  83. lineHeight: 22,
  84. backgroundColor: tooltipModel.get('backgroundColor'),
  85. borderRadius: tooltipModel.get('borderRadius'),
  86. borderWidth: 1,
  87. borderColor: borderColor,
  88. shadowColor: tooltipModel.get('shadowColor'),
  89. shadowBlur: tooltipModel.get('shadowBlur'),
  90. shadowOffsetX: tooltipModel.get('shadowOffsetX'),
  91. shadowOffsetY: tooltipModel.get('shadowOffsetY'),
  92. textShadowColor: textStyleModel.get('textShadowColor'),
  93. textShadowBlur: textStyleModel.get('textShadowBlur') || 0,
  94. textShadowOffsetX: textStyleModel.get('textShadowOffsetX') || 0,
  95. textShadowOffsetY: textStyleModel.get('textShadowOffsetY') || 0,
  96. fill: tooltipModel.get(['textStyle', 'color']),
  97. padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
  98. verticalAlign: 'top',
  99. align: 'left'
  100. },
  101. z: tooltipModel.get('z')
  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)) {
  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;