Merge pull request #3637 from VisActor/fix/dom-style-when-has-customi…

…zed-content Fix/dom style when has customized content
VisActor · Jan 7, 2025 · 210873e · 210873e
2 parents 85675fa + d1d6bf2
commit 210873e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 8 deletions.
diff --git a/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2024-12-27-07-43.json b/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2024-12-27-07-43.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix style of dom tooltip when tooltip has customized child, fix #3615\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}
diff --git a/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2024-12-27-07-57.json b/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2024-12-27-07-57.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix error update of dom tooltip when update theme, fix #3619\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}
diff --git a/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2025-01-03-09-47.json b/.../changes/@visactor/vchart/fix-dom-style-when-has-customized-content_2025-01-03-09-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix position of html tooltip when confine is false, fix #3632\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}
diff --git a/packages/vchart/src/plugin/components/tooltip-handler/base.ts b/packages/vchart/src/plugin/components/tooltip-handler/base.ts
@@ -395,9 +395,10 @@ export abstract class BaseTooltipHandler extends BasePlugin implements ITooltipH
 
       /* 三、确保tooltip在视区内 */
       const containerDimSize = dim === 'x' ? containerSize.width : containerSize.height;
-      const leftOrTop =
-        -(tooltipParentElementRect[dim] - (chartElementRect?.[dim] ?? 0) / chartElementScale) /
-        tooltipParentElementScale;
+      const leftOrTop = tooltipSpec.confine
+        ? -(tooltipParentElementRect[dim] - (chartElementRect?.[dim] ?? 0) / chartElementScale) /
+          tooltipParentElementScale
+        : -tooltipParentElementRect[dim] / tooltipParentElementScale;
       const rightOrBottom = containerDimSize / tooltipParentElementScale + leftOrTop - boxSize;
 
       // 处理左右

diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
@@ -285,7 +285,7 @@ export class DomTooltipHandler extends BaseTooltipHandler {
                 styleByRow = { ...styleByRow, ...getTextStyle(entry.valueStyle) };
               }
             } else if (colName === 'shape') {
-              row.innerHTML = getSvgHtml(entry);
+              row.innerHTML = getSvgHtml(entry, `${this.id}_${index}`);
             }
 
             setStyleToDom(row, styleByRow);
@@ -299,9 +299,11 @@ export class DomTooltipHandler extends BaseTooltipHandler {
   protected _updateDomStyle(sizeKey: 'width' | 'height' = 'width') {
     const rootDom = this._rootDom;
 
-    const contentDom = rootDom.children[rootDom.children.length - 1];
+    const contentDom = [...(rootDom.children as any)].find(child =>
+      child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)
+    );
 
-    if (contentDom.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)) {
+    if (contentDom) {
       const tooltipSpec = this._component.getSpec() as ITooltipSpec;
       const contentStyle: Partial<CSSStyleDeclaration> = {};
 
@@ -369,6 +371,14 @@ export class DomTooltipHandler extends BaseTooltipHandler {
   reInit() {
     super.reInit();
     this._initStyle();
+    if (this._rootDom) {
+      setStyleToDom(this._rootDom, this._domStyle.panel);
+    }
+
+    if (this.getVisibility()) {
+      this._updateDomStringByCol(this._tooltipActual);
+      this._updateDomStyle('height');
+    }
   }
 
   protected _updatePosition({ x, y }: ITooltipPositionActual) {

diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts
@@ -5,7 +5,7 @@ import { Symbol } from '@visactor/vrender-core';
 import { Bounds, isObject, isString } from '@visactor/vutils';
 import type { ITooltipShapeActual } from '../../../../typings';
 
-export function getSvgHtml(option: ITooltipShapeActual | undefined, index?: number) {
+export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: string) {
   if (!option || !option.hasShape || !option.shapeType) {
     return '';
   }
@@ -61,7 +61,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, index?: numb
     </svg>`;
   }
   if (isObject(shapeFill)) {
-    fillString = 'gradientColor' + (index ?? '');
+    fillString = 'gradientColor' + (gradientId ?? '');
     let gradient = '';
     const stops = ((shapeFill as IGradientColor).stops ?? [])
       .map(s => `<stop offset="${escapeHTML(s.offset.toString())}" stop-color="${escapeHTML(s.color)}"/>`)