Skip to content

Commit 1767746

Browse files
plainheartplainheart
committed
Merge branch 'master' into fix/tooltip/cleanup-styleCoord-markers
2 parents 7d0518b + 4ea877a commit 1767746

File tree

11 files changed

+6617
-46
lines changed

11 files changed

+6617
-46
lines changed

‎src/component/axis/AngleAxisView.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
267267
labelModel = new Model(
268268
rawCategoryItem.textStyle, commonLabelModel, commonLabelModel.ecModel
269269
);
270-
}
270+
}
271271
}
272272

273273
const textEl = new graphic.Text({
@@ -284,6 +284,17 @@ const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisEle
284284
});
285285
group.add(textEl);
286286

287+
graphic.setTooltipConfig({
288+
el: textEl,
289+
componentModel: angleAxisModel,
290+
itemName: labelItem.formattedLabel,
291+
formatterParamsExtra: {
292+
isTruncated: () => textEl.isTruncated,
293+
value: labelItem.rawLabel,
294+
tickIndex: idx
295+
}
296+
});
297+
287298
// Pack data for mouse event
288299
if (triggerEvent) {
289300
const eventData = AxisBuilder.makeAxisEventDataBase(angleAxisModel);

‎src/component/tooltip/TooltipHTMLContent.ts‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,21 @@ function assembleArrow(
103103
return `<div style="${styleCss.join('')}"></div>`;
104104
}
105105

106-
function assembleTransition(duration: number, onlyFade?: boolean): string {
106+
function assembleTransition(duration: number, onlyFadeTransition: boolean, enableDisplayTransition: boolean): string {
107107
const transitionCurve = 'cubic-bezier(0.23,1,0.32,1)';
108-
let transitionOption = ` ${duration / 2}s ${transitionCurve}`;
109-
let transitionText = `opacity${transitionOption},visibility${transitionOption}`;
110-
if (!onlyFade) {
108+
let transitionOption = '';
109+
let transitionText = '';
110+
if (enableDisplayTransition) {
111+
transitionOption = ` ${duration / 2}s ${transitionCurve}`;
112+
transitionText = `opacity${transitionOption},visibility${transitionOption}`;
113+
}
114+
if (!onlyFadeTransition) {
111115
transitionOption = ` ${duration}s ${transitionCurve}`;
112-
transitionText += env.transformSupported
113-
? `,${CSS_TRANSFORM_VENDOR}${transitionOption}`
114-
: `,left${transitionOption},top${transitionOption}`;
116+
transitionText += (transitionText.length ? ',' : '') + (
117+
env.transformSupported
118+
? `${CSS_TRANSFORM_VENDOR}${transitionOption}`
119+
: `,left${transitionOption},top${transitionOption}`
120+
);
115121
}
116122

117123
return CSS_TRANSITION_VENDOR + ':' + transitionText;
@@ -173,7 +179,12 @@ function assembleFont(textStyleModel: Model<TooltipOption['textStyle']>): string
173179
return cssText.join(';');
174180
}
175181

176-
function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?: boolean, onlyFade?: boolean) {
182+
function assembleCssText(
183+
tooltipModel: Model<TooltipOption>,
184+
enableTransition: boolean,
185+
onlyFadeTransition: boolean,
186+
enableDisplayTransition: boolean
187+
) {
177188
const cssText: string[] = [];
178189
const transitionDuration = tooltipModel.get('transitionDuration');
179190
const backgroundColor = tooltipModel.get('backgroundColor');
@@ -186,8 +197,9 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
186197
const boxShadow = `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowColor}`;
187198

188199
cssText.push('box-shadow:' + boxShadow);
189-
// Animation transition. Do not animate when transitionDuration is 0.
190-
enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
200+
// Animation transition. Do not animate when transitionDuration <= 0.
201+
enableTransition && transitionDuration > 0
202+
&& cssText.push(assembleTransition(transitionDuration, onlyFadeTransition, enableDisplayTransition));
191203

192204
if (backgroundColor) {
193205
cssText.push('background-color:' + backgroundColor);
@@ -285,6 +297,8 @@ class TooltipHTMLContent {
285297
*/
286298
private _longHideTimeout: number;
287299

300+
private _enableDisplayTransition: boolean;
301+
288302
constructor(
289303
api: ExtensionAPI,
290304
opt: TooltipContentOption
@@ -379,6 +393,9 @@ class TooltipHTMLContent {
379393
// update alwaysShowContent
380394
this._alwaysShowContent = alwaysShowContent;
381395

396+
this._enableDisplayTransition = tooltipModel.get('displayTransition')
397+
&& tooltipModel.get('transitionDuration') > 0;
398+
382399
// update className
383400
this.el.className = tooltipModel.get('className') || '';
384401

@@ -398,7 +415,7 @@ class TooltipHTMLContent {
398415
}
399416
else {
400417
style.cssText = gCssText
401-
+ assembleCssText(tooltipModel, !this._firstShow, this._longHide)
418+
+ assembleCssText(tooltipModel, !this._firstShow, this._longHide, this._enableDisplayTransition)
402419
// initial transform
403420
+ assembleTransform(styleCoord[0], styleCoord[1], true)
404421
+ `border-color:${convertToColorString(nearPointColor)};`
@@ -502,8 +519,13 @@ class TooltipHTMLContent {
502519

503520
hide() {
504521
const style = this.el.style;
505-
style.visibility = 'hidden';
506-
style.opacity = '0';
522+
if (this._enableDisplayTransition) {
523+
style.visibility = 'hidden';
524+
style.opacity = '0';
525+
}
526+
else {
527+
style.display = 'none';
528+
}
507529
env.transform3dSupported && (style.willChange = '');
508530
this._show = false;
509531
this._longHideTimeout = setTimeout(() => this._longHide = true, 500) as any;

‎src/component/tooltip/TooltipModel.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
5151
*/
5252
trigger?: 'item' | 'axis' | 'none'
5353

54-
displayMode?: 'single' | 'multipleByCoordSys';
55-
5654
/**
5755
* 'auto': use html by default, and use non-html if `document` is not defined
5856
* 'html': use html for tooltip
@@ -106,13 +104,11 @@ class TooltipModel extends ComponentModel<TooltipOption> {
106104

107105
alwaysShowContent: false,
108106

109-
displayMode: 'single', // 'single' | 'multipleByCoordSys'
110-
111107
renderMode: 'auto', // 'auto' | 'html' | 'richText'
112108

113109
// whether restraint content inside viewRect.
114110
// If renderMode: 'richText', default true.
115-
// If renderMode: 'html', defaut false (for backward compat).
111+
// If renderMode: 'html', defaults to `false` (for backward compat).
116112
confine: null,
117113

118114
showDelay: 0,
@@ -122,6 +118,8 @@ class TooltipModel extends ComponentModel<TooltipOption> {
122118
// Animation transition time, unit is second
123119
transitionDuration: 0.4,
124120

121+
displayTransition: true,
122+
125123
enterable: false,
126124

127125
backgroundColor: '#fff',

‎src/data/Graph.ts‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ class GraphNode {
392392
const connectedEdgesMap = zrUtil.createHashMap<boolean, number>();
393393
const connectedNodesMap = zrUtil.createHashMap<boolean, number>();
394394

395-
for (let i = 0; i < this.edges.length; i++) {
395+
for (let i = 0, len = this.edges.length; i < len; i++) {
396396
const adjacentEdge = this.edges[i];
397397
if (adjacentEdge.dataIndex < 0) {
398398
continue;
@@ -409,9 +409,14 @@ class GraphNode {
409409
nodeIteratorIndex++;
410410
connectedNodesMap.set(sourceNode.dataIndex, true);
411411

412-
for (let j = 0; j < sourceNode.inEdges.length; j++) {
413-
connectedEdgesMap.set(sourceNode.inEdges[j].dataIndex, true);
414-
sourceNodesQueue.push(sourceNode.inEdges[j].node1);
412+
const sourceNodeInEdges = sourceNode.inEdges;
413+
for (let j = 0, len = sourceNodeInEdges.length, inEdge, inEdgeDataIndex; j < len; j++) {
414+
inEdge = sourceNodeInEdges[j];
415+
inEdgeDataIndex = inEdge.dataIndex;
416+
if (inEdgeDataIndex >= 0 && !connectedEdgesMap.hasKey(inEdgeDataIndex)) {
417+
connectedEdgesMap.set(inEdgeDataIndex, true);
418+
sourceNodesQueue.push(inEdge.node1);
419+
}
415420
}
416421
}
417422

@@ -420,9 +425,15 @@ class GraphNode {
420425
const targetNode = targetNodesQueue[nodeIteratorIndex];
421426
nodeIteratorIndex++;
422427
connectedNodesMap.set(targetNode.dataIndex, true);
423-
for (let j = 0; j < targetNode.outEdges.length; j++) {
424-
connectedEdgesMap.set(targetNode.outEdges[j].dataIndex, true);
425-
targetNodesQueue.push(targetNode.outEdges[j].node2);
428+
429+
const targetNodeOutEdges = targetNode.outEdges;
430+
for (let j = 0, len = targetNodeOutEdges.length, outEdge, outEdgeDataIndex; j < len; j++) {
431+
outEdge = targetNodeOutEdges[j];
432+
outEdgeDataIndex = outEdge.dataIndex;
433+
if (outEdgeDataIndex >= 0 && !connectedEdgesMap.hasKey(outEdgeDataIndex)) {
434+
connectedEdgesMap.set(outEdgeDataIndex, true);
435+
targetNodesQueue.push(outEdge.node2);
436+
}
426437
}
427438
}
428439
}
@@ -491,9 +502,14 @@ class GraphEdge {
491502

492503
connectedNodesMap.set(sourceNode.dataIndex, true);
493504

494-
for (let j = 0; j < sourceNode.inEdges.length; j++) {
495-
connectedEdgesMap.set(sourceNode.inEdges[j].dataIndex, true);
496-
sourceNodes.push(sourceNode.inEdges[j].node1);
505+
const sourceNodeInEdges = sourceNode.inEdges;
506+
for (let j = 0, len = sourceNodeInEdges.length, inEdge, inEdgeDataIndex; j < len; j++) {
507+
inEdge = sourceNode.inEdges[j];
508+
inEdgeDataIndex = inEdge.dataIndex;
509+
if (inEdgeDataIndex >= 0 && !connectedEdgesMap.hasKey(inEdgeDataIndex)) {
510+
connectedEdgesMap.set(inEdgeDataIndex, true);
511+
sourceNodes.push(inEdge.node1);
512+
}
497513
}
498514
}
499515

@@ -504,9 +520,14 @@ class GraphEdge {
504520

505521
connectedNodesMap.set(targetNode.dataIndex, true);
506522

507-
for (let j = 0; j < targetNode.outEdges.length; j++) {
508-
connectedEdgesMap.set(targetNode.outEdges[j].dataIndex, true);
509-
targetNodes.push(targetNode.outEdges[j].node2);
523+
const targetNodeOutEdges = targetNode.outEdges;
524+
for (let j = 0, len = targetNodeOutEdges.length, outEdge, outEdgeDataIndex; j < len; j++) {
525+
outEdge = targetNode.outEdges[j];
526+
outEdgeDataIndex = outEdge.dataIndex;
527+
if (outEdgeDataIndex >= 0 && !connectedEdgesMap.hasKey(outEdgeDataIndex)) {
528+
connectedEdgesMap.set(outEdgeDataIndex, true);
529+
targetNodes.push(outEdge.node2);
530+
}
510531
}
511532
}
512533

@@ -585,4 +606,4 @@ zrUtil.mixin(GraphEdge, createGraphDataProxyMixin('hostGraph', 'edgeData'));
585606

586607
export default Graph;
587608

588-
export {GraphNode, GraphEdge};
609+
export {GraphNode, GraphEdge};

‎src/util/types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1303,6 +1303,15 @@ export interface CommonTooltipOption<FormatterParams> {
13031303
*/
13041304
enterable?: boolean
13051305

1306+
/**
1307+
* Whether enable display transition when show/hide tooltip.
1308+
* Defaults to `true` for backward compatibility.
1309+
* If set to `false`, the tooltip 'display' will be set to 'none' when hidden.
1310+
* @default true
1311+
* @since v6.0.0
1312+
*/
1313+
displayTransition?: boolean
1314+
13061315
backgroundColor?: ColorString
13071316
borderColor?: ColorString
13081317
borderRadius?: number

‎test/axisLabel.html‎

Lines changed: 49 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/runTest/actions/__meta__.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/runTest/actions/axisLabel.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/runTest/actions/tooltip-displayTransition.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)