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

feature: support tooltip.appendToBody. #12024

Merged
merged 1 commit into from
Jan 13, 2020
Merged

feature: support tooltip.appendToBody. #12024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
77 changes: 54 additions & 23 deletions src/component/tooltip/TooltipContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import * as zrUtil from 'zrender/src/core/util';
import * as zrColor from 'zrender/src/tool/color';
import * as eventUtil from 'zrender/src/core/event';
import * as domUtil from 'zrender/src/core/dom';
import env from 'zrender/src/core/env';
import * as formatUtil from '../../util/format';

Expand Down Expand Up @@ -121,24 +122,63 @@ function assembleCssText(tooltipModel) {
return cssText.join(';') + ';';
}

// If not able to make, do not modify the input `out`.
function makeStyleCoord(out, zr, appendToBody, zrX, zrY) {
var zrPainter = zr && zr.painter;

if (appendToBody) {
var zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
if (zrViewportRoot) {
// Some APPs might use scale on body, so we support CSS transform here.
domUtil.transformLocalCoord(out, zrViewportRoot, document.body, zrX, zrY);
}
}
else {
out[0] = zrX;
out[1] = zrY;
// xy should be based on canvas root. But tooltipContent is
// the sibling of canvas root. So padding of ec container
// should be considered here.
var viewportRootOffset = zrPainter && zrPainter.getViewportRootOffset();
if (viewportRootOffset) {
out[0] += viewportRootOffset.offsetLeft;
out[1] += viewportRootOffset.offsetTop;
}
}
}

/**
* @alias module:echarts/component/tooltip/TooltipContent
* @param {HTMLElement} container
* @param {ExtensionAPI} api
* @param {Object} [opt]
* @param {boolean} [opt.appendToBody]
* `false`: the DOM element will be inside the container. Default value.
* `true`: the DOM element will be appended to HTML body, which avoid
* some overflow clip but intrude outside of the container.
* @constructor
*/
function TooltipContent(container, api) {
function TooltipContent(container, api, opt) {
if (env.wxa) {
return null;
}

var el = document.createElement('div');
el.domBelongToZr = true;
this.el = el;
var zr = this._zr = api.getZr();
var appendToBody = this._appendToBody = opt && opt.appendToBody;

this.el = el;
this._styleCoord = [0, 0];

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

document.body.appendChild(el);
if (appendToBody) {
document.body.appendChild(el);
}
else {
container.appendChild(el);
}

this._container = container;

Expand Down Expand Up @@ -172,7 +212,8 @@ function TooltipContent(container, api) {
// Try trigger zrender event to avoid mouse
// in and out shape too frequently
var handler = zr.handler;
eventUtil.normalizeEvent(container, e, true);
var zrViewportRoot = zr.painter.getViewportRoot();
eventUtil.normalizeEvent(zrViewportRoot, e, true);
handler.dispatch('mousemove', e);
}
};
Expand Down Expand Up @@ -217,12 +258,13 @@ TooltipContent.prototype = {
show: function (tooltipModel) {
clearTimeout(this._hideTimeout);
var el = this.el;
var styleCoord = this._styleCoord;

el.style.cssText = gCssText + assembleCssText(tooltipModel)
// Because of the reason described in:
// http://stackoverflow.com/questions/21125587/css3-transition-not-working-in-chrome-anymore
// we should set initial value to `left` and `top`.
+ ';left:' + this._x + 'px;top:' + this._y + 'px;'
+ ';left:' + styleCoord[0] + 'px;top:' + styleCoord[1] + 'px;'
+ (tooltipModel.get('extraCssText') || '');

el.style.display = el.innerHTML ? 'block' : 'none';
Expand Down Expand Up @@ -250,23 +292,13 @@ TooltipContent.prototype = {
return [el.clientWidth, el.clientHeight];
},

moveTo: function (x, y) {
// xy should be based on canvas root. But tooltipContent is
// the sibling of canvas root. So padding of ec container
// should be considered here.
var zr = this._zr;
var viewportRootOffset;
if (zr && zr.painter && (viewportRootOffset = zr.painter.getViewportRootOffset())) {
x += viewportRootOffset.offsetLeft;
y += viewportRootOffset.offsetTop;
}
moveTo: function (zrX, zrY) {
var styleCoord = this._styleCoord;
makeStyleCoord(styleCoord, this._zr, this._appendToBody, zrX, zrY);

var style = this.el.style;
style.left = x + 'px';
style.top = y + 'px';

this._x = x;
this._y = y;
style.left = styleCoord[0] + 'px';
style.top = styleCoord[1] + 'px';
},

hide: function () {
Expand All @@ -292,7 +324,6 @@ TooltipContent.prototype = {
return this._show;
},


dispose: function () {
this.el.parentNode.removeChild(this.el);
},
Expand Down
36 changes: 16 additions & 20 deletions src/component/tooltip/TooltipView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ export default echarts.extendComponentView({

var tooltipContent;
if (this._renderMode === 'html') {
tooltipContent = new TooltipContent(api.getDom(), api);
tooltipContent = new TooltipContent(api.getDom(), api, {
appendToBody: tooltipModel.get('appendToBody', true)
});
this._newLine = '<br/>';
}
else {
Expand All @@ -65,10 +67,6 @@ export default echarts.extendComponentView({
}

this._tooltipContent = tooltipContent;

this._event = {};
this._viewWidth = document.body.clientWidth;
this._viewHeight = document.body.clientHeight;
},

render: function (tooltipModel, ecModel, api) {
Expand Down Expand Up @@ -130,7 +128,6 @@ export default echarts.extendComponentView({
// If 'none', it is not controlled by mouse totally.
if (triggerOn !== 'none') {
if (triggerOn.indexOf(currTrigger) >= 0) {
this._event = e.event;
this._tryShow(e, dispatchAction);
}
else if (currTrigger === 'leave') {
Expand Down Expand Up @@ -206,16 +203,14 @@ export default echarts.extendComponentView({
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
target: el,
event: this._event
target: el
}, dispatchAction);
}
else if (dataByCoordSys) {
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
position: payload.position,
event: this._event,
dataByCoordSys: payload.dataByCoordSys,
tooltipOption: payload.tooltipOption
}, dispatchAction);
Expand All @@ -234,8 +229,7 @@ export default echarts.extendComponentView({
offsetX: cx,
offsetY: cy,
position: payload.position,
target: pointInfo.el,
event: this._event
target: pointInfo.el
}, dispatchAction);
}
}
Expand All @@ -252,8 +246,7 @@ export default echarts.extendComponentView({
offsetX: payload.x,
offsetY: payload.y,
position: payload.position,
target: api.getZr().findHover(payload.x, payload.y).target,
event: this._event
target: api.getZr().findHover(payload.x, payload.y).target
}, dispatchAction);
}
},
Expand Down Expand Up @@ -320,8 +313,8 @@ export default echarts.extendComponentView({
}

// Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
this._lastX = e.event.pageX;
this._lastY = e.event.pageY;
this._lastX = e.offsetX;
this._lastY = e.offsetY;

var dataByCoordSys = e.dataByCoordSys;
if (dataByCoordSys && dataByCoordSys.length) {
Expand Down Expand Up @@ -359,7 +352,9 @@ export default echarts.extendComponentView({
_showAxisTooltip: function (dataByCoordSys, e) {
var ecModel = this._ecModel;
var globalTooltipModel = this._tooltipModel;
var point = [e.event.pageX, e.event.pageY];

var point = [e.offsetX, e.offsetY];

var singleDefaultHTML = [];
var singleParamsList = [];
var singleTooltipModel = buildTooltipModel([
Expand Down Expand Up @@ -515,7 +510,7 @@ export default echarts.extendComponentView({
this._showOrMove(tooltipModel, function () {
this._showTooltipContent(
tooltipModel, defaultHtml, params, asyncTicket,
e.event.pageX, e.event.pageY, e.position, e.target, markers
e.offsetX, e.offsetY, e.position, e.target, markers
);
});

Expand Down Expand Up @@ -551,7 +546,7 @@ export default echarts.extendComponentView({
this._showOrMove(subTooltipModel, function () {
this._showTooltipContent(
subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {},
asyncTicket, e.event.pageX, e.event.pageY, e.position, el
asyncTicket, e.offsetX, e.offsetY, e.position, el
);
});

Expand Down Expand Up @@ -613,8 +608,9 @@ export default echarts.extendComponentView({
* @return {Array.<number>}
*/
_updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) {
var viewWidth = this._viewWidth;
var viewHeight = this._viewHeight;
var viewWidth = this._api.getWidth();
var viewHeight = this._api.getHeight();

positionExpr = positionExpr || tooltipModel.get('position');

var contentSize = content.getSize();
Expand Down
1 change: 1 addition & 0 deletions test/runTest/actions/__meta__.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@
"toolbox-title": 4,
"toolbox-tooltip": 1,
"tooltip": 10,
"tooltip-appendToBody": 4,
"tooltip-axisPointer": 20,
"tooltip-axisPointer2": 1,
"tooltip-cascade": 4,
Expand Down
1 change: 1 addition & 0 deletions test/runTest/actions/tooltip-appendToBody.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"name":"Action 1","ops":[{"type":"mousemove","time":877,"x":731,"y":147},{"type":"mousemove","time":1084,"x":563,"y":160},{"type":"mousemove","time":1309,"x":562,"y":160},{"type":"mousemove","time":1510,"x":364,"y":193},{"type":"mousemove","time":1719,"x":320,"y":194},{"type":"mousemove","time":1926,"x":316,"y":208},{"type":"mousemove","time":2126,"x":316,"y":211},{"type":"mousemove","time":2826,"x":316,"y":212},{"type":"mousemove","time":3026,"x":314,"y":234},{"type":"mousemove","time":3226,"x":315,"y":242},{"type":"mousemove","time":3435,"x":315,"y":242},{"type":"mousemove","time":3493,"x":315,"y":242},{"type":"mousemove","time":3693,"x":315,"y":262},{"type":"mousemove","time":3893,"x":316,"y":273},{"type":"mousemove","time":4093,"x":319,"y":290},{"type":"mousemove","time":4393,"x":319,"y":291},{"type":"mousemove","time":4593,"x":342,"y":290},{"type":"mousemove","time":4797,"x":604,"y":269},{"type":"mousemove","time":4998,"x":612,"y":262},{"type":"mousemove","time":5209,"x":625,"y":249},{"type":"mousemove","time":5415,"x":607,"y":249},{"type":"mousemove","time":5627,"x":505,"y":248},{"type":"mousewheel","time":5764,"x":505,"y":248,"deltaY":1},{"type":"mousewheel","time":5815,"x":505,"y":248,"deltaY":4},{"type":"mousewheel","time":5847,"x":505,"y":248,"deltaY":7},{"type":"mousewheel","time":5873,"x":505,"y":248,"deltaY":4},{"type":"mousewheel","time":5907,"x":505,"y":248,"deltaY":5},{"type":"mousewheel","time":5930,"x":505,"y":248,"deltaY":1},{"type":"mousemove","time":6497,"x":501,"y":251},{"type":"mousemove","time":6697,"x":407,"y":330},{"type":"mousemove","time":6906,"x":405,"y":333},{"type":"mousedown","time":7161,"x":405,"y":333},{"type":"mousemove","time":7199,"x":388,"y":345},{"type":"mousemove","time":7409,"x":368,"y":363},{"type":"mousemove","time":7615,"x":368,"y":363},{"type":"mousemove","time":7828,"x":388,"y":369},{"type":"mousemove","time":8045,"x":389,"y":369},{"type":"mousemove","time":8251,"x":364,"y":359},{"type":"mousemove","time":8460,"x":358,"y":336},{"type":"mouseup","time":8811,"x":358,"y":336},{"time":8812,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8823,"x":349,"y":333},{"type":"mousemove","time":9029,"x":292,"y":282},{"type":"mousemove","time":9231,"x":286,"y":272},{"type":"mousemove","time":9447,"x":283,"y":248},{"type":"mousemove","time":9647,"x":283,"y":251},{"type":"mousemove","time":9847,"x":283,"y":253}],"scrollY":0,"scrollX":0,"timestamp":1578864522547},{"name":"Action 2","ops":[{"type":"mousemove","time":1064,"x":179,"y":319},{"type":"mousemove","time":1264,"x":208,"y":323},{"type":"mousemove","time":1473,"x":239,"y":323},{"type":"mousemove","time":1681,"x":242,"y":323},{"type":"mousemove","time":1881,"x":274,"y":335},{"type":"mousemove","time":2083,"x":302,"y":343},{"type":"mousemove","time":2283,"x":324,"y":346},{"type":"mousemove","time":2483,"x":331,"y":348},{"type":"mousemove","time":2917,"x":331,"y":348},{"type":"mousemove","time":3117,"x":331,"y":336},{"type":"mousemove","time":3327,"x":333,"y":331},{"type":"mousemove","time":3543,"x":337,"y":346},{"type":"mousemove","time":3767,"x":336,"y":354},{"type":"mousemove","time":3975,"x":336,"y":356},{"type":"mousemove","time":4184,"x":336,"y":354},{"type":"mousemove","time":4384,"x":356,"y":323},{"type":"mousemove","time":4594,"x":357,"y":322},{"type":"mousemove","time":4883,"x":358,"y":322},{"type":"mousemove","time":5083,"x":362,"y":325},{"type":"mousemove","time":5283,"x":352,"y":331},{"type":"mousemove","time":5484,"x":344,"y":338},{"type":"mousemove","time":5699,"x":338,"y":343},{"type":"mousemove","time":5907,"x":337,"y":344},{"type":"mousemove","time":6119,"x":352,"y":342},{"type":"mousemove","time":6324,"x":344,"y":346},{"type":"mousemove","time":6532,"x":338,"y":350},{"type":"mousemove","time":6743,"x":334,"y":350},{"type":"mousemove","time":6959,"x":334,"y":350}],"scrollY":157,"scrollX":0,"timestamp":1578864545306},{"name":"Action 3","ops":[{"type":"mousemove","time":880,"x":188,"y":96},{"type":"mousemove","time":1080,"x":218,"y":58},{"type":"mousemove","time":1280,"x":233,"y":35},{"type":"mousemove","time":1487,"x":244,"y":26},{"type":"mousemove","time":1704,"x":247,"y":22},{"type":"mousedown","time":2221,"x":247,"y":22},{"type":"mouseup","time":2537,"x":247,"y":22},{"time":2538,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3186,"x":247,"y":22},{"type":"mouseup","time":3772,"x":247,"y":22},{"time":3773,"delay":400,"type":"screenshot-auto"}],"scrollY":579,"scrollX":0,"timestamp":1578864579827},{"name":"Action 4","ops":[{"type":"mousemove","time":949,"x":276,"y":348},{"type":"mousemove","time":1156,"x":294,"y":338},{"type":"mousemove","time":1365,"x":314,"y":325},{"type":"mousemove","time":1574,"x":334,"y":319},{"type":"mousemove","time":1780,"x":337,"y":316},{"type":"mousemove","time":1989,"x":330,"y":317},{"type":"mousemove","time":2198,"x":331,"y":317},{"type":"mousemove","time":2409,"x":353,"y":311},{"type":"mousemove","time":2626,"x":356,"y":310},{"type":"mousemove","time":3164,"x":361,"y":307},{"type":"mousemove","time":3364,"x":390,"y":293},{"type":"mousemove","time":3575,"x":343,"y":324},{"type":"mousemove","time":3797,"x":348,"y":321},{"type":"mousemove","time":4040,"x":361,"y":305},{"type":"mousemove","time":4265,"x":357,"y":306},{"type":"mousemove","time":4474,"x":356,"y":308},{"type":"mousemove","time":4781,"x":359,"y":306},{"type":"mousemove","time":4990,"x":390,"y":289},{"type":"mousemove","time":5547,"x":390,"y":289},{"type":"mousemove","time":5747,"x":395,"y":291},{"type":"mousemove","time":5958,"x":392,"y":287},{"type":"mousemove","time":6164,"x":391,"y":290},{"type":"mousemove","time":6364,"x":394,"y":289},{"type":"mousemove","time":6567,"x":385,"y":277},{"type":"mousemove","time":6773,"x":385,"y":277},{"type":"mousemove","time":6970,"x":378,"y":281},{"type":"mousemove","time":7170,"x":345,"y":303},{"type":"mousemove","time":7372,"x":338,"y":306},{"type":"mousemove","time":7582,"x":324,"y":306},{"type":"mousemove","time":7797,"x":307,"y":307},{"type":"mousemove","time":7970,"x":307,"y":307},{"type":"mousemove","time":8171,"x":223,"y":294}],"scrollY":579,"scrollX":0,"timestamp":1578864604914}]