plainheart commented on a change in pull request #14393:
URL: https://github.com/apache/echarts/pull/14393#discussion_r635387439
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -60,17 +60,21 @@ function mirrorPos(pos: string): string {
}
function assembleArrow(
- backgroundColor: ColorString,
+ tooltipModel: Model<TooltipOption>,
borderColor: ZRColor,
arrowPosition: TooltipOption['position']
) {
if (!isString(arrowPosition) || arrowPosition === 'inside') {
return '';
}
+ const backgroundColor = tooltipModel.get('backgroundColor');
+ const borderWidth = tooltipModel.get('borderWidth');
+
borderColor = convertToColorString(borderColor);
const arrowPos = mirrorPos(arrowPosition);
- let positionStyle = `${arrowPos}:-6px;`;
+ const arrowSize = borderWidth >= 5 ? borderWidth : 5;
Review comment:
It seems to be not necessary to limit border width?
##########
File path: src/component/tooltip/TooltipView.ts
##########
@@ -1100,20 +1101,20 @@ function calcTooltipPosition(
y = rect.y + rectHeight / 2 - domHeight / 2;
break;
case 'top':
- x = rect.x + rectWidth / 2 - domWidth / 2;
+ x = rect.x + rectWidth / 2 - domWidth / 2 - borderWidth / 2;
Review comment:
I just found the offset is caused by the `getSize` function.
https://github.com/apache/echarts/blob/2b39cb408712ce3710801dd5219d0a14aad5b3ce/src/component/tooltip/TooltipHTMLContent.ts#L441-L444
We can see it's currently using `clientWidth` and `clientHeight`, which
doesn't include the border width.
So it would be fixed easily if we use `offsetWidth` and `offsetHeight`. And
then it would be unnecessary to subtract border width here.
##########
File path: src/component/tooltip/TooltipView.ts
##########
@@ -1084,7 +1084,8 @@ function confineTooltipPosition(
function calcTooltipPosition(
position: TooltipOption['position'],
rect: ZRRectLike,
- contentSize: number[]
+ contentSize: number[],
+ borderWidth: number
): [number, number] {
Review comment:
By the review comment in
https://github.com/apache/echarts/blob/2b39cb408712ce3710801dd5219d0a14aad5b3ce/src/component/tooltip/TooltipView.ts#L1104
the tooltip may be a bit far away from the element.
Let us take a look at the following lines
https://github.com/apache/echarts/blob/2b39cb408712ce3710801dd5219d0a14aad5b3ce/src/component/tooltip/TooltipView.ts#L1092-L1093
The usage of `offset` and `gap` looks similar and their value is a fixed
number. May we merge them into one value calculated with the border width?
For example,
```js
// Sure, if `borderWidth` is very small or 0, we could also set a limit of
minimized value.
Math.sqrt(2 * borderWidth * borderWidth)
```
##########
File path: src/component/tooltip/TooltipHTMLContent.ts
##########
@@ -60,17 +60,21 @@ function mirrorPos(pos: string): string {
}
function assembleArrow(
- backgroundColor: ColorString,
+ tooltipModel: Model<TooltipOption>,
borderColor: ZRColor,
arrowPosition: TooltipOption['position']
) {
if (!isString(arrowPosition) || arrowPosition === 'inside') {
return '';
}
+ const backgroundColor = tooltipModel.get('backgroundColor');
+ const borderWidth = tooltipModel.get('borderWidth');
+
borderColor = convertToColorString(borderColor);
const arrowPos = mirrorPos(arrowPosition);
- let positionStyle = `${arrowPos}:-6px;`;
+ const arrowSize = borderWidth >= 5 ? borderWidth : 5;
+ let positionStyle = `${arrowPos}:-${Math.sqrt(2 * arrowSize * arrowSize) /
2 + borderWidth}px;`;
Review comment:
Still here. I think it would be better to retain 1 decimal place.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
