This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new c201b68 feature: support `tooltip.appendToBody`. Fix #8049. Based on
the PR ecomfe/zrender#559 .
c201b68 is described below
commit c201b68de0867382003986b74d2a1c2d00c94e3c
Author: 100pah <[email protected]>
AuthorDate: Mon Jan 13 05:50:53 2020 +0800
feature: support `tooltip.appendToBody`. Fix #8049. Based on the PR
ecomfe/zrender#559 .
---
src/component/tooltip/TooltipContent.js | 77 ++++++++++++++++++--------
src/component/tooltip/TooltipView.js | 36 ++++++------
test/runTest/actions/__meta__.json | 1 +
test/runTest/actions/tooltip-appendToBody.json | 1 +
4 files changed, 72 insertions(+), 43 deletions(-)
diff --git a/src/component/tooltip/TooltipContent.js
b/src/component/tooltip/TooltipContent.js
index 95e58ee..6cdbc3f 100644
--- a/src/component/tooltip/TooltipContent.js
+++ b/src/component/tooltip/TooltipContent.js
@@ -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';
@@ -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;
@@ -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);
}
};
@@ -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';
@@ -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 () {
@@ -292,7 +324,6 @@ TooltipContent.prototype = {
return this._show;
},
-
dispose: function () {
this.el.parentNode.removeChild(this.el);
},
diff --git a/src/component/tooltip/TooltipView.js
b/src/component/tooltip/TooltipView.js
index 6931652..8fa9981 100644
--- a/src/component/tooltip/TooltipView.js
+++ b/src/component/tooltip/TooltipView.js
@@ -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 {
@@ -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) {
@@ -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') {
@@ -206,8 +203,7 @@ export default echarts.extendComponentView({
this._tryShow({
offsetX: payload.x,
offsetY: payload.y,
- target: el,
- event: this._event
+ target: el
}, dispatchAction);
}
else if (dataByCoordSys) {
@@ -215,7 +211,6 @@ export default echarts.extendComponentView({
offsetX: payload.x,
offsetY: payload.y,
position: payload.position,
- event: this._event,
dataByCoordSys: payload.dataByCoordSys,
tooltipOption: payload.tooltipOption
}, dispatchAction);
@@ -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);
}
}
@@ -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);
}
},
@@ -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) {
@@ -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([
@@ -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
);
});
@@ -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
);
});
@@ -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();
diff --git a/test/runTest/actions/__meta__.json
b/test/runTest/actions/__meta__.json
index d55e775..4b5c793 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -134,6 +134,7 @@
"toolbox-title": 4,
"toolbox-tooltip": 1,
"tooltip": 10,
+ "tooltip-appendToBody": 4,
"tooltip-axisPointer": 20,
"tooltip-axisPointer2": 1,
"tooltip-cascade": 4,
diff --git a/test/runTest/actions/tooltip-appendToBody.json
b/test/runTest/actions/tooltip-appendToBody.json
new file mode 100644
index 0000000..26033aa
--- /dev/null
+++ b/test/runTest/actions/tooltip-appendToBody.json
@@ -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
[...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
