Skip to content

Commit

Permalink
Merge pull request #13383 from plainheart/feat/tooltip-class
Browse files Browse the repository at this point in the history
feat(tooltip): allow adding classes to tooltip DOM and migrate changes to next branch in #12834.
  • Loading branch information
pissang authored Oct 9, 2020
2 parents 51a13cd + 61c07bb commit 25ceb56
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 18 deletions.
38 changes: 32 additions & 6 deletions src/component/tooltip/TooltipHTMLContent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,9 @@ function makeStyleCoord(out: number[], zr: ZRenderType, appendToBody: boolean, z
out[1] += viewportRootOffset.offsetTop;
}
}

out[2] = out[0] / zr.getWidth();
out[3] = out[1] / zr.getHeight();
}

interface TooltipContentOption {
Expand All @@ -217,7 +220,7 @@ class TooltipHTMLContent {

private _show: boolean = false;

private _styleCoord: [number, number] = [0, 0];
private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];
private _appendToBody: boolean;

private _enterable = true;
Expand Down Expand Up @@ -301,7 +304,7 @@ class TooltipHTMLContent {
/**
* Update when tooltip is rendered
*/
update() {
update(tooltipModel: Model<TooltipOption>) {
// FIXME
// Move this logic to ec main?
const container = this._container;
Expand All @@ -311,6 +314,14 @@ class TooltipHTMLContent {
if (domStyle.position !== 'absolute' && stl.position !== 'absolute') {
domStyle.position = 'relative';
}

// move tooltip if chart resized
const alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveIfResized();

// update className
this.el.className = tooltipModel.get('className') || '';

// Hide the tooltip
// PENDING
// this.hide();
Expand All @@ -332,10 +343,10 @@ class TooltipHTMLContent {

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 @@ -385,6 +396,21 @@ class TooltipHTMLContent {
}
}

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

hide() {
this.el.style.display = 'none';
this._show = false;
Expand All @@ -394,7 +420,7 @@ class TooltipHTMLContent {
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) as any;
}
Expand Down
8 changes: 7 additions & 1 deletion src/component/tooltip/TooltipModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
*/
appendToBody?: boolean

/**
* specified class name of tooltip dom
* Only available when renderMode is html
*/
className?: string

order?: TooltipOrderMode
}

Expand Down Expand Up @@ -173,4 +179,4 @@ class TooltipModel extends ComponentModel<TooltipOption> {

ComponentModel.registerClass(TooltipModel);

export default TooltipModel;
export default TooltipModel;
37 changes: 34 additions & 3 deletions src/component/tooltip/TooltipRichContent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ class TooltipRichContent {

private _show = false;

private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];

private _hideTimeout: number;

private _enterable = true;
Expand All @@ -44,13 +46,15 @@ class TooltipRichContent {

constructor(api: ExtensionAPI) {
this._zr = api.getZr();
makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
}

/**
* Update when tooltip is rendered
*/
update() {
// noop
update(tooltipModel: Model<TooltipOption>) {
const alwaysShowContent = tooltipModel.get('alwaysShowContent');
alwaysShowContent && this._moveIfResized();
}

show() {
Expand Down Expand Up @@ -136,6 +140,10 @@ class TooltipRichContent {
moveTo(x: number, y: number) {
const el = this.el;
if (el) {
const styleCoord = this._styleCoord;
makeStyleCoord(styleCoord, this._zr, x, y);
x = styleCoord[0];
y = styleCoord[1];
const style = el.style;
const borderWidth = mathMaxWith0(style.borderWidth || 0);
const shadowOuterSize = calcShadowOuterSize(style);
Expand All @@ -146,6 +154,22 @@ class TooltipRichContent {
}
}


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

hide() {
if (this.el) {
this.el.hide();
Expand All @@ -157,7 +181,7 @@ class TooltipRichContent {
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) as any;
}
Expand Down Expand Up @@ -200,4 +224,11 @@ function calcShadowOuterSize(style: TextStyleProps) {
};
}

function makeStyleCoord(out: number[], zr: ZRenderType, zrX: number, zrY: number) {
out[0] = zrX;
out[1] = zrY;
out[2] = out[0] / zr.getWidth();
out[3] = out[1] / zr.getHeight();
}

export default TooltipRichContent;
6 changes: 3 additions & 3 deletions src/component/tooltip/TooltipView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ class TooltipView extends ComponentView {
this._alwaysShowContent = tooltipModel.get('alwaysShowContent');

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

this._initGlobalListener();
Expand Down Expand Up @@ -450,7 +450,7 @@ class TooltipView extends ComponentView {
) {
// 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.
const delay = tooltipModel.get('showDelay');
cb = zrUtil.bind(cb, this);
Expand Down Expand Up @@ -666,7 +666,7 @@ class TooltipView extends ComponentView {
const markupStyleCreator = new TooltipMarkupStyleCreator();

// 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 (this: TooltipView) {
Expand Down
44 changes: 39 additions & 5 deletions test/tooltip-windowResize.html

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 25ceb56

Please sign in to comment.