123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- import * as zrUtil from 'zrender/lib/core/util.js';
- import ZRText from 'zrender/lib/graphic/Text.js';
- import { getPaddingFromTooltipModel } from './tooltipMarkup.js';
- import { throwError } from '../../util/log.js';
- var TooltipRichContent = function () {
- function TooltipRichContent(api) {
- this._show = false;
- this._styleCoord = [0, 0, 0, 0];
- this._alwaysShowContent = false;
- this._enterable = true;
- this._zr = api.getZr();
- makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
- }
-
- TooltipRichContent.prototype.update = function (tooltipModel) {
- var alwaysShowContent = tooltipModel.get('alwaysShowContent');
- alwaysShowContent && this._moveIfResized();
-
- this._alwaysShowContent = alwaysShowContent;
- };
- TooltipRichContent.prototype.show = function () {
- if (this._hideTimeout) {
- clearTimeout(this._hideTimeout);
- }
- this.el.show();
- this._show = true;
- };
-
- TooltipRichContent.prototype.setContent = function (content, markupStyleCreator, tooltipModel, borderColor, arrowPosition) {
- var _this = this;
- if (zrUtil.isObject(content)) {
- throwError(process.env.NODE_ENV !== 'production' ? 'Passing DOM nodes as content is not supported in richText tooltip!' : '');
- }
- if (this.el) {
- this._zr.remove(this.el);
- }
- var textStyleModel = tooltipModel.getModel('textStyle');
- this.el = new ZRText({
- style: {
- rich: markupStyleCreator.richTextStyles,
- text: content,
- lineHeight: 22,
- borderWidth: 1,
- borderColor: borderColor,
- textShadowColor: textStyleModel.get('textShadowColor'),
- fill: tooltipModel.get(['textStyle', 'color']),
- padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
- verticalAlign: 'top',
- align: 'left'
- },
- z: tooltipModel.get('z')
- });
- zrUtil.each(['backgroundColor', 'borderRadius', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'], function (propName) {
- _this.el.style[propName] = tooltipModel.get(propName);
- });
- zrUtil.each(['textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'], function (propName) {
- _this.el.style[propName] = textStyleModel.get(propName) || 0;
- });
- this._zr.add(this.el);
- var self = this;
- this.el.on('mouseover', function () {
-
- if (self._enterable) {
- clearTimeout(self._hideTimeout);
- self._show = true;
- }
- self._inContent = true;
- });
- this.el.on('mouseout', function () {
- if (self._enterable) {
- if (self._show) {
- self.hideLater(self._hideDelay);
- }
- }
- self._inContent = false;
- });
- };
- TooltipRichContent.prototype.setEnterable = function (enterable) {
- this._enterable = enterable;
- };
- TooltipRichContent.prototype.getSize = function () {
- var el = this.el;
- var bounding = this.el.getBoundingRect();
-
-
- var shadowOuterSize = calcShadowOuterSize(el.style);
- return [bounding.width + shadowOuterSize.left + shadowOuterSize.right, bounding.height + shadowOuterSize.top + shadowOuterSize.bottom];
- };
- TooltipRichContent.prototype.moveTo = function (x, y) {
- var el = this.el;
- if (el) {
- var styleCoord = this._styleCoord;
- makeStyleCoord(styleCoord, this._zr, x, y);
- x = styleCoord[0];
- y = styleCoord[1];
- var style = el.style;
- var borderWidth = mathMaxWith0(style.borderWidth || 0);
- var shadowOuterSize = calcShadowOuterSize(style);
-
- el.x = x + borderWidth + shadowOuterSize.left;
- el.y = y + borderWidth + shadowOuterSize.top;
- el.markRedraw();
- }
- };
-
- TooltipRichContent.prototype._moveIfResized = function () {
-
- var ratioX = this._styleCoord[2];
-
- var ratioY = this._styleCoord[3];
- this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
- };
- TooltipRichContent.prototype.hide = function () {
- if (this.el) {
- this.el.hide();
- }
- this._show = false;
- };
- TooltipRichContent.prototype.hideLater = function (time) {
- if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
- if (time) {
- this._hideDelay = time;
-
- this._show = false;
- this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
- } else {
- this.hide();
- }
- }
- };
- TooltipRichContent.prototype.isShow = function () {
- return this._show;
- };
- TooltipRichContent.prototype.dispose = function () {
- this._zr.remove(this.el);
- };
- return TooltipRichContent;
- }();
- function mathMaxWith0(val) {
- return Math.max(0, val);
- }
- function calcShadowOuterSize(style) {
- var shadowBlur = mathMaxWith0(style.shadowBlur || 0);
- var shadowOffsetX = mathMaxWith0(style.shadowOffsetX || 0);
- var shadowOffsetY = mathMaxWith0(style.shadowOffsetY || 0);
- return {
- left: mathMaxWith0(shadowBlur - shadowOffsetX),
- right: mathMaxWith0(shadowBlur + shadowOffsetX),
- top: mathMaxWith0(shadowBlur - shadowOffsetY),
- bottom: mathMaxWith0(shadowBlur + shadowOffsetY)
- };
- }
- function makeStyleCoord(out, zr, zrX, zrY) {
- out[0] = zrX;
- out[1] = zrY;
- out[2] = out[0] / zr.getWidth();
- out[3] = out[1] / zr.getHeight();
- }
- export default TooltipRichContent;
|