Merge pull request #3321 from VisActor/refactor/tooltip-dom

refactor: refactor dom tooltip of vchart

Author: xile611

packages/vchart/src/plugin/components/tooltip-handler/base.ts

@@ -1,5 +1,4 @@
 import { DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT } from '../../../constant/base';
-import type { Options } from './constants';
 // eslint-disable-next-line no-duplicate-imports
 import { DEFAULT_OPTIONS } from './constants';
 import type { Maybe, IPoint, RenderMode } from '../../../typings';
@@ -28,21 +27,20 @@ import {
 import type { IGroup } from '@visactor/vrender-core';
 import type { AABBBounds } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
-import { isNumber, isObject, isValidNumber, isValid, throttle, isNil, isFunction } from '@visactor/vutils';
+import { isNumber, isObject, isValidNumber, isValid, isFunction } from '@visactor/vutils';
 import type { IElement } from '@visactor/vgrammar-core';
 import type { ILayoutModel } from '../../../model/interface';
 import type { Compiler } from '../../../compile/compiler';
 import type { IContainerSize } from '@visactor/vrender-components';
-import { getTooltipAttributes } from './utils/attribute';
 import type { IChartOption } from '../../../chart/interface';
 import type { ITooltipSpec, Tooltip, TooltipHandlerParams } from '../../../component/tooltip';
 // eslint-disable-next-line no-duplicate-imports
 import { TooltipResult } from '../../../component/tooltip';
 import type { IComponentPlugin, IComponentPluginService } from '../interface';
 import { BasePlugin } from '../../base/base-plugin';
-import type { ITooltipAttributes } from './interface';
 import { getTooltipPatternValue } from '../../../component/tooltip/utils';
 import type { IDimensionData, IDimensionInfo } from '../../../event/events/dimension/interface';
+import type { ITooltipHandlerOptions } from './interface';
 
 type ChangeTooltipFunc = (visible: boolean, params: TooltipHandlerParams, data?: TooltipData) => TooltipResult;
 
@@ -62,7 +60,7 @@ export abstract class BaseTooltipHandler extends BasePlugin implements ITooltipH
 
   // protected _style: ITooltipStyle = {};
 
-  protected _option: Options;
+  protected _option: ITooltipHandlerOptions;
 
   protected _chartOption: IChartOption;
 
@@ -72,7 +70,6 @@ export abstract class BaseTooltipHandler extends BasePlugin implements ITooltipH
   }
 
   protected _component: Tooltip;
-  protected _attributes?: ITooltipAttributes | null = null;
 
   protected _chartContainer: Maybe<HTMLElement>;
   protected _compiler: Compiler;
@@ -192,16 +189,17 @@ export abstract class BaseTooltipHandler extends BasePlugin implements ITooltipH
 
   protected abstract _updateTooltip(visible: boolean, params: TooltipHandlerParams): void;
   protected abstract _removeTooltip(): void;
+  protected abstract _getTooltipBoxSize(
+    actualTooltip: ITooltipActual,
+    changePositionOnly: boolean
+  ): IContainerSize | undefined;
 
   /* -----需要子类继承的方法结束----- */
 
-  protected _getDefaultOption(): Options {
+  protected _getDefaultOption(): ITooltipHandlerOptions {
     const { offset } = this._component.getSpec();
-    return {
-      ...DEFAULT_OPTIONS,
-      offsetX: offset?.x ?? DEFAULT_OPTIONS.offsetX,
-      offsetY: offset?.y ?? DEFAULT_OPTIONS.offsetY
-    };
+
+    return offset ? { ...DEFAULT_OPTIONS, ...offset } : DEFAULT_OPTIONS;
   }
 
   /**
@@ -444,23 +442,6 @@ export abstract class BaseTooltipHandler extends BasePlugin implements ITooltipH
     return result;
   };
 
-  // 计算 tooltip 内容区域的宽高，并缓存结果
-  protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined {
-    if (!changePositionOnly || isNil(this._attributes)) {
-      const chartTheme = this._chartOption?.getTheme() ?? {};
-      this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartTheme);
-    }
-    const { panel, panelDomHeight } = this._attributes ?? {};
-    // canvas模式下, size需要考虑border size, 目的是为了精准判断边界是否超出画布，达到confine效果
-    // html模式不提供confine, 所以不考虑精准计算size
-    const isCanvas = this._component.getSpec().renderMode === 'canvas';
-
-    return {
-      width: panel?.width + (isCanvas ? panel.lineWidth : 0),
-      height: (panelDomHeight ?? panel?.height) + (isCanvas ? panel.lineWidth : 0)
-    };
-  }
-
   protected _getParentElement(spec: ITooltipSpec): HTMLElement {
     return spec.parentElement as any;
   }

…handler/canvas/canvas-tooltip-handler.ts …ooltip-handler/canvas-tooltip-handler.tspackages/vchart/src/plugin/components/tooltip-handler/canvas/canvas-tooltip-handler.ts renamed to packages/vchart/src/plugin/components/tooltip-handler/canvas-tooltip-handler.ts packages/vchart/src/plugin/components/tooltip-handler/canvas/canvas-tooltip-handler.ts renamed to packages/vchart/src/plugin/components/tooltip-handler/canvas-tooltip-handler.ts

@@ -1,11 +1,15 @@
 import type { ILayer, INode, Stage } from '@visactor/vrender-core';
-import { BaseTooltipHandler } from '../base';
+import { BaseTooltipHandler } from './base';
 import { Tooltip as TooltipComponent } from '@visactor/vrender-components';
-import { isValid } from '@visactor/vutils';
-import type { TooltipHandlerParams } from '../../../../component/tooltip';
-import type { IComponentPluginService } from '../../interface';
-import { registerComponentPlugin } from '../../register';
-import { TooltipHandlerType } from '../../../../component/tooltip/constant';
+import { isValid, isNil } from '@visactor/vutils';
+import type { TooltipHandlerParams } from '../../../component/tooltip';
+import type { IComponentPluginService } from '../interface';
+import { registerComponentPlugin } from '../register';
+import { TooltipHandlerType } from '../../../component/tooltip/constant';
+import type { ITooltipActual } from '../../../typings';
+import type { IContainerSize } from '@visactor/vrender-components';
+import { getTooltipAttributes } from './utils/attribute';
+import type { ITooltipAttributes } from './interface';
 
 /**
  * The tooltip handler class.
@@ -18,6 +22,7 @@ export class CanvasTooltipHandler extends BaseTooltipHandler {
   protected _el?: HTMLCanvasElement;
   protected _tooltipCanvasId?: string;
   protected _tooltipComponent: TooltipComponent;
+  protected _attributes?: ITooltipAttributes | null = null;
 
   constructor() {
     super(CanvasTooltipHandler.type);
@@ -55,6 +60,22 @@ export class CanvasTooltipHandler extends BaseTooltipHandler {
     return this._layer;
   }
 
+  // 计算 tooltip 内容区域的宽高，并缓存结果
+  protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined {
+    if (!changePositionOnly || isNil(this._attributes)) {
+      const chartTheme = this._chartOption?.getTheme() ?? {};
+      this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartTheme);
+    }
+    const { panel, panelDomHeight } = this._attributes ?? {};
+    // canvas模式下, size需要考虑border size, 目的是为了精准判断边界是否超出画布，达到confine效果
+    // html模式不提供confine, 所以不考虑精准计算size
+
+    return {
+      width: panel.width + panel.lineWidth,
+      height: (panelDomHeight ?? panel.height) + panel.lineWidth
+    };
+  }
+
   protected _removeTooltip() {
     if (this._layer) {
       this._layer.removeAllChild();

packages/vchart/src/plugin/components/tooltip-handler/canvas/index.ts

@@ -1,9 +1,11 @@
-import { escapeHTML } from './utils/common';
+import type { ITooltipHandlerOptions } from './interface';
 
-export const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
+export const TOOLTIP_PREFIX = 'vchart-tooltip';
+export const TOOLTIP_CONTAINER_EL_CLASS_NAME = `${TOOLTIP_PREFIX}-container`;
+export const TOOLTIP_CONTENT_BOX_CLASS_NAME = `${TOOLTIP_PREFIX}-content-box`;
 export const TOOLTIP_EMPTY_STRING = '';
 
-export const DEFAULT_OPTIONS = {
+export const DEFAULT_OPTIONS: ITooltipHandlerOptions = {
   /**
    * X offset.
    */
@@ -12,15 +14,6 @@ export const DEFAULT_OPTIONS = {
   /**
    * Y offset.
    */
-  offsetY: 10,
-
-  /**
-   * HTML sanitizer function that removes dangerous HTML to prevent XSS.
-   *
-   * This should be a function from string to string. You may replace it with a formatter such as a markdown formatter.
-   */
-  sanitize: escapeHTML
+  offsetY: 10
 };
-
-// FIXME: 命名规范
-export type Options = typeof DEFAULT_OPTIONS;
+export const DEFAULT_TOOLTIP_Z_INDEX = '99999999999999';