You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/03/22 19:57:36 UTC
[echarts] 02/02: fix: [tooltip] (1) add missing test:visual (2) fix
tooltip component default position: should apply `position` on option
firstly.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/geo-svg
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit c35a522a6e009cff4c95e290f5bdef571f76c969
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Mar 23 03:56:33 2021 +0800
fix: [tooltip]
(1) add missing test:visual
(2) fix tooltip component default position: should apply `position` on option firstly.
---
src/component/tooltip/TooltipView.ts | 92 ++++++++++++++++++++---------
test/runTest/actions/tooltip-component.json | 1 +
test/tooltip-component.html | 36 ++++++++++-
3 files changed, 97 insertions(+), 32 deletions(-)
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index ff5685f..c76b489 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -57,7 +57,6 @@ import { DataByCoordSys, DataByAxis } from '../axisPointer/axisTrigger';
import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat';
import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup';
import { findEventDispatcher } from '../../util/event';
-import ComponentModel from '../../model/Component';
const bind = zrUtil.bind;
const each = zrUtil.each;
@@ -123,6 +122,10 @@ interface TryShowParams {
tooltipOption?: ComponentItemTooltipOption<TooltipCallbackDataParams | TooltipCallbackDataParams[]>
position?: TooltipOption['position']
+ /**
+ * If `position` is not set in payload nor option, use it.
+ */
+ positionDefault?: TooltipOption['position']
}
type TooltipCallbackDataParams = CallbackDataParams & {
@@ -304,7 +307,10 @@ class TooltipView extends ComponentView {
offsetX: rect.x + rect.width / 2,
offsetY: rect.y + rect.height / 2,
target: cmptRef.el,
- position: payload.position || 'bottom'
+ position: payload.position,
+ // When manully trigger, the mouse is not on the el, so we'd better to
+ // position tooltip on the bottom of the el and display arrow is possible.
+ positionDefault: 'bottom'
}, dispatchAction);
}
else if (payload.tooltip && payload.x != null && payload.y != null) {
@@ -347,8 +353,11 @@ class TooltipView extends ComponentView {
this._tryShow({
offsetX: cx,
offsetY: cy,
+ target: pointInfo.el,
position: payload.position,
- target: pointInfo.el
+ // When manully trigger, the mouse is not on the el, so we'd better to
+ // position tooltip on the bottom of the el and display arrow is possible.
+ positionDefault: 'bottom'
}, dispatchAction);
}
}
@@ -415,10 +424,9 @@ class TooltipView extends ComponentView {
const data = seriesModel.getData();
const tooltipCascadedModel = buildTooltipModel([
data.getItemModel<TooltipableOption>(dataIndex),
- seriesModel,
- (seriesModel.coordinateSystem || {}).model,
- tooltipModel
- ]);
+ seriesModel as Model<TooltipableOption>,
+ (seriesModel.coordinateSystem || {}).model as Model<TooltipableOption>
+ ], this._tooltipModel);
if (tooltipCascadedModel.get('trigger') !== 'axis') {
return;
@@ -510,10 +518,10 @@ class TooltipView extends ComponentView {
const ecModel = this._ecModel;
const globalTooltipModel = this._tooltipModel;
const point = [e.offsetX, e.offsetY];
- const singleTooltipModel = buildTooltipModel([
- e.tooltipOption,
+ const singleTooltipModel = buildTooltipModel(
+ [e.tooltipOption],
globalTooltipModel
- ]);
+ );
const renderMode = this._renderMode;
const cbParamsList: TooltipCallbackDataParams[] = [];
const articleMarkup = createTooltipMarkup('section', {
@@ -634,12 +642,16 @@ class TooltipView extends ComponentView {
const data = dataModel.getData(dataType);
const renderMode = this._renderMode;
- const tooltipModel = buildTooltipModel([
- data.getItemModel<TooltipableOption>(dataIndex),
- dataModel,
- seriesModel && (seriesModel.coordinateSystem || {}).model,
- this._tooltipModel
- ]);
+ const positionDefault = e.positionDefault;
+ const tooltipModel = buildTooltipModel(
+ [
+ data.getItemModel<TooltipableOption>(dataIndex),
+ dataModel,
+ seriesModel && (seriesModel.coordinateSystem || {}).model as Model<TooltipableOption>
+ ],
+ this._tooltipModel,
+ positionDefault ? { position: positionDefault } : null
+ );
const tooltipTrigger = tooltipModel.get('trigger');
if (tooltipTrigger != null && tooltipTrigger !== 'item') {
@@ -706,12 +718,17 @@ class TooltipView extends ComponentView {
};
}
- const tooltipModelCascade = [tooltipOpt] as Parameters<typeof buildTooltipModel>[0];
+ const tooltipModelCascade = [tooltipOpt] as TooltipModelOptionCascade[];
const cmpt = this._ecModel.getComponent(tooltipConfig.componentMainType, tooltipConfig.componentIndex);
- cmpt && tooltipModelCascade.push(cmpt);
- tooltipModelCascade.push(this._tooltipModel);
-
- const subTooltipModel = buildTooltipModel(tooltipModelCascade) as Model<ComponentItemTooltipOption<unknown>>;
+ if (cmpt) {
+ tooltipModelCascade.push(cmpt as Model<TooltipableOption>);
+ }
+ const positionDefault = e.positionDefault;
+ const subTooltipModel = buildTooltipModel(
+ tooltipModelCascade,
+ this._tooltipModel,
+ positionDefault ? { position: positionDefault } : null
+ );
const defaultHtml = subTooltipModel.get('content');
const asyncTicket = Math.random() + '';
@@ -963,16 +980,30 @@ class TooltipView extends ComponentView {
type TooltipableOption = {
tooltip?: CommonTooltipOption<unknown>;
};
+type TooltipModelOptionCascade =
+ Model<TooltipableOption> | CommonTooltipOption<unknown> | string;
/**
* From top to bottom. (the last one should be globalTooltipModel);
*/
-function buildTooltipModel(modelCascade: (
- TooltipModel | Model<TooltipableOption> | CommonTooltipOption<unknown> | ComponentModel | string
-)[]) {
+function buildTooltipModel(
+ modelCascade: TooltipModelOptionCascade[],
+ globalTooltipModel: TooltipModel,
+ defaultTooltipOption?: CommonTooltipOption<unknown>
+): Model<TooltipOption & ComponentItemTooltipOption<unknown>> {
// Last is always tooltip model.
- let resultModel = modelCascade.pop() as Model<TooltipOption>;
- while (modelCascade.length) {
- let tooltipOpt = modelCascade.pop();
+ const ecModel = globalTooltipModel.ecModel;
+ let resultModel: Model<TooltipOption & ComponentItemTooltipOption<unknown>>;
+
+ if (defaultTooltipOption) {
+ resultModel = new Model(defaultTooltipOption, ecModel, ecModel);
+ resultModel = new Model(globalTooltipModel.option, resultModel, ecModel);
+ }
+ else {
+ resultModel = globalTooltipModel as Model<TooltipOption & ComponentItemTooltipOption<unknown>>;
+ }
+
+ for (let i = modelCascade.length - 1; i >= 0; i--) {
+ let tooltipOpt = modelCascade[i];
if (tooltipOpt) {
if (tooltipOpt instanceof Model) {
tooltipOpt = (tooltipOpt as Model<TooltipableOption>).get('tooltip', true);
@@ -987,10 +1018,13 @@ function buildTooltipModel(modelCascade: (
formatter: tooltipOpt
};
}
- resultModel = new Model(tooltipOpt, resultModel, resultModel.ecModel) as Model<TooltipOption>;
+ if (tooltipOpt) {
+ resultModel = new Model(tooltipOpt, resultModel, ecModel);
+ }
}
}
- return resultModel;
+
+ return resultModel as Model<TooltipOption & ComponentItemTooltipOption<unknown>>;
}
function makeDispatchAction(payload: ShowTipPayload | HideTipPayload, api: ExtensionAPI) {
diff --git a/test/runTest/actions/tooltip-component.json b/test/runTest/actions/tooltip-component.json
new file mode 100644
index 0000000..e990064
--- /dev/null
+++ b/test/runTest/actions/tooltip-component.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":704,"x":783,"y":18},{"type":"mousemove","time":910,"x":555,"y":63},{"type":"mousemove","time":1120,"x":152,"y":215},{"type":"mousemove","time":1320,"x":147,"y":215},{"type":"mousemove","time":1403,"x":147,"y":214},{"type":"mousemove","time":1603,"x":121,"y":175},{"type":"mousemove","time":1804,"x":115,"y":151},{"type":"mousemove","time":2012,"x":115,"y":147},{"type":"mousemove","time":2246,"x":116,"y":147},{"type":"mousemove","time":2 [...]
\ No newline at end of file
diff --git a/test/tooltip-component.html b/test/tooltip-component.html
index 2e05b5e..09b0668 100644
--- a/test/tooltip-component.html
+++ b/test/tooltip-component.html
@@ -353,7 +353,7 @@ under the License.
height: 40
},
textContent: {
- style: { text: 'show tooltip asdf\nin fontSize: 20 red' }
+ style: { text: 'show tooltip\nasdf\nfontSize: 20 red' }
},
textConfig: {
position: 'bottom'
@@ -398,7 +398,7 @@ under the License.
height: 40
},
textContent: {
- style: { text: 'show tooltip JSON params\nin fontSize: 20 red' }
+ style: { text: 'show tooltip\nJSON params\nfontSize: 20 red' }
},
textConfig: {
position: 'bottom'
@@ -417,7 +417,28 @@ under the License.
height: 40
},
textContent: {
- style: { text: 'show tooltip "stringstring"\nin fontSize: 10 red' }
+ style: { text: 'show tooltip\n"stringstring"\nfontSize: 10 red' }
+ },
+ textConfig: {
+ position: 'bottom'
+ },
+ style: {
+ fill: 'blue'
+ }
+ }, {
+ tooltip: {
+ position: 'left'
+ },
+ type: 'rect',
+ name: '5nd',
+ shape: {
+ y: 20,
+ x: 650,
+ width: 40,
+ height: 40
+ },
+ textContent: {
+ style: { text: 'show tooltip\n"5nd"\nfontSize: 10 red\nposition: "left"' }
},
textConfig: {
position: 'bottom'
@@ -453,6 +474,15 @@ under the License.
name: '3rd'
});
}
+ }, {
+ text: 'trigger 5nd graphic tooltip',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'showTip',
+ graphicIndex: 0,
+ name: '5nd'
+ });
+ }
}]
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org