Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: #12812 #12834

Merged
merged 2 commits into from
Jun 23, 2020
Merged

fix: #12812 #12834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a84425
fix: #12812
liulinboyi Jun 23, 2020
1b0e756
docs(tooltip): fix the spell error
liulinboyi Jun 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions src/component/tooltip/TooltipContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,8 @@ function makeStyleCoord(out, zr, appendToBody, zrX, zrY) {
out[1] += viewportRootOffset.offsetTop;
}
}
liulinboyi marked this conversation as resolved.
Show resolved Hide resolved
out[2] = out[0] / zr.getWidth(); // The ratio of left to width
out[3] = out[1] / zr.getHeight(); // The ratio of top to height
}

/**
Expand All @@ -169,7 +171,7 @@ function TooltipContent(container, api, opt) {
var zr = this._zr = api.getZr();
var appendToBody = this._appendToBody = opt && opt.appendToBody;

this._styleCoord = [0, 0];
this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]

makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);

Expand Down Expand Up @@ -240,7 +242,7 @@ TooltipContent.prototype = {
/**
* Update when tooltip is rendered
*/
update: function () {
update: function (tooltipModel) {
// FIXME
// Move this logic to ec main?
var container = this._container;
Expand All @@ -250,11 +252,25 @@ TooltipContent.prototype = {
if (domStyle.position !== 'absolute' && stl.position !== 'absolute') {
domStyle.position = 'relative';
}
var alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveTooltipIfResized();
// Hide the tooltip
// PENDING
// this.hide();
},

/**
* when `alwaysShowContent` is true,
* we should move the tooltip after chart resized
*/
_moveTooltipIfResized: function () {
var ratioX = this._styleCoord[2]; // The ratio of left to width
var ratioY = this._styleCoord[3]; // The ratio of top to height
var realX = ratioX * this._zr.getWidth();
var realY = ratioY * this._zr.getHeight();
this.moveTo(realX, realY);
},

show: function (tooltipModel) {
clearTimeout(this._hideTimeout);
var el = this.el;
Expand All @@ -269,10 +285,10 @@ TooltipContent.prototype = {

el.style.display = el.innerHTML ? 'block' : 'none';

// If mouse occsionally move over the tooltip, a mouseout event will be
// triggered by canvas, and cuase some unexpectable result like dragging
// If mouse occasionally move over the tooltip, a mouseout event will be
// triggered by canvas, and cause some unexpectable result like dragging
// stop, "unfocusAdjacency". Here `pointer-events: none` is used to solve
// it. Although it is not suppored by IE8~IE10, fortunately it is a rare
// it. Although it is not supported by IE8~IE10, fortunately it is a rare
// scenario.
el.style.pointerEvents = this._enterable ? 'auto' : 'none';

Expand Down Expand Up @@ -310,7 +326,7 @@ TooltipContent.prototype = {
if (this._show && !(this._inContent && this._enterable)) {
if (time) {
this._hideDelay = time;
// Set show false to avoid invoke hideLater mutiple times
// Set show false to avoid invoke hideLater multiple times
this._show = false;
this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
}
Expand Down
37 changes: 32 additions & 5 deletions src/component/tooltip/TooltipRichContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,25 @@ import * as zrUtil from 'zrender/src/core/util';
// import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';


function makeStyleCoord(out, zr, zrX, zrY) {
out[0] = zrX;
out[1] = zrY;
out[2] = out[0] / zr.getWidth(); // The ratio of left to width
out[3] = out[1] / zr.getHeight(); // The ratio of top to height
}

/**
* @alias module:echarts/component/tooltip/TooltipRichContent
* @constructor
*/
function TooltipRichContent(api) {

this._zr = api.getZr();
var zr = this._zr = api.getZr();

this._styleCoord = [0, 0, 0, 0]; // [left, top, left/width, top/height]

makeStyleCoord(this._styleCoord, zr, api.getWidth() / 2, api.getHeight() / 2);

this._show = false;

Expand All @@ -50,8 +62,21 @@ TooltipRichContent.prototype = {
/**
* Update when tooltip is rendered
*/
update: function () {
// noop
update: function (tooltipModel) {
var alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveTooltipIfResized();
},

/**
* when `alwaysShowContent` is true,
* we should move the tooltip after chart resized
*/
_moveTooltipIfResized: function () {
var ratioX = this._styleCoord[2]; // The ratio of left to width
var ratioY = this._styleCoord[3]; // The ratio of top to height
var realX = ratioX * this._zr.getWidth();
var realY = ratioY * this._zr.getHeight();
this.moveTo(realX, realY);
},

show: function (tooltipModel) {
Expand Down Expand Up @@ -150,7 +175,9 @@ TooltipRichContent.prototype = {

moveTo: function (x, y) {
if (this.el) {
this.el.attr('position', [x, y]);
var styleCoord = this._styleCoord;
makeStyleCoord(styleCoord, this._zr, x, y);
this.el.attr('position', [styleCoord[0], styleCoord[1]]);
}
},

Expand All @@ -165,7 +192,7 @@ TooltipRichContent.prototype = {
if (this._show && !(this._inContent && this._enterable)) {
if (time) {
this._hideDelay = time;
// Set show false to avoid invoke hideLater mutiple times
// Set show false to avoid invoke hideLater multiple times
this._show = false;
this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time);
}
Expand Down
8 changes: 4 additions & 4 deletions src/component/tooltip/TooltipView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default echarts.extendComponentView({
this._alwaysShowContent = tooltipModel.get('alwaysShowContent');

var tooltipContent = this._tooltipContent;
tooltipContent.update();
tooltipContent.update(tooltipModel);
tooltipContent.setEnterable(tooltipModel.get('enterable'));

this._initGlobalListener();
Expand Down Expand Up @@ -339,7 +339,7 @@ export default echarts.extendComponentView({
_showOrMove: function (tooltipModel, cb) {
// showDelay is used in this case: tooltip.enterable is set
// as true. User intent to move mouse into tooltip and click
// something. `showDelay` makes it easyer to enter the content
// something. `showDelay` makes it easier to enter the content
// but tooltip do not move immediately.
var delay = tooltipModel.get('showDelay');
cb = zrUtil.bind(cb, this);
Expand Down Expand Up @@ -424,7 +424,7 @@ export default echarts.extendComponentView({

// Default tooltip content
// FIXME
// (1) shold be the first data which has name?
// (1) should be the first data which has name?
// (2) themeRiver, firstDataIndex is array, and first line is unnecessary.
var firstLine = valueLabel;
if (renderMode !== 'html') {
Expand Down Expand Up @@ -540,7 +540,7 @@ export default echarts.extendComponentView({
var asyncTicket = Math.random();

// Do not check whether `trigger` is 'none' here, because `trigger`
// only works on cooridinate system. In fact, we have not found case
// only works on coordinate system. In fact, we have not found case
// that requires setting `trigger` nothing on component yet.

this._showOrMove(subTooltipModel, function () {
Expand Down
Loading