@visactor/vchart 1.12.15 → 1.13.0

package/esm/plugin/components/tooltip-handler/{canvas/canvas-tooltip-handler.d.ts → canvas-tooltip-handler.d.ts}

@@ -1,7 +1,10 @@
-import { BaseTooltipHandler } from '../base';
+import { BaseTooltipHandler } from './base';
 import { Tooltip as TooltipComponent } from '@visactor/vrender-components';
-import type { TooltipHandlerParams } from '../../../../component/tooltip';
-import type { IComponentPluginService } from '../../interface';
+import type { TooltipHandlerParams } from '../../../component/tooltip';
+import type { IComponentPluginService } from '../interface';
+import type { ITooltipActual } from '../../../typings';
+import type { IContainerSize } from '@visactor/vrender-components';
+import type { ITooltipAttributes } from './interface';
 export declare class CanvasTooltipHandler extends BaseTooltipHandler {
     static readonly type: string;
     readonly type: string;
@@ -9,10 +12,12 @@ export declare class CanvasTooltipHandler extends BaseTooltipHandler {
     protected _el?: HTMLCanvasElement;
     protected _tooltipCanvasId?: string;
     protected _tooltipComponent: TooltipComponent;
+    protected _attributes?: ITooltipAttributes | null;
     constructor();
     onAdd(service: IComponentPluginService<any>): void;
     private _initTooltipComponent;
     private _getLayer;
+    protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined;
     protected _removeTooltip(): void;
     protected _updateTooltip(visible: boolean, params: TooltipHandlerParams): void;
     isTooltipShown(): boolean;

package/esm/plugin/components/tooltip-handler/{canvas/canvas-tooltip-handler.js → canvas-tooltip-handler.js}

@@ -1,16 +1,18 @@
-import { BaseTooltipHandler } from "../base";
+import { BaseTooltipHandler } from "./base";
 
 import { Tooltip as TooltipComponent } from "@visactor/vrender-components";
 
-import { isValid } from "@visactor/vutils";
+import { isValid, isNil } from "@visactor/vutils";
 
-import { registerComponentPlugin } from "../../register";
+import { registerComponentPlugin } from "../register";
 
-import { TooltipHandlerType } from "../../../../component/tooltip/constant";
+import { TooltipHandlerType } from "../../../component/tooltip/constant";
+
+import { getTooltipAttributes } from "./utils/attribute";
 
 export class CanvasTooltipHandler extends BaseTooltipHandler {
     constructor() {
-        super(CanvasTooltipHandler.type), this.type = TooltipHandlerType.canvas;
+        super(CanvasTooltipHandler.type), this.type = TooltipHandlerType.canvas, this._attributes = null;
     }
     onAdd(service) {
         var _a;
@@ -30,6 +32,18 @@ export class CanvasTooltipHandler extends BaseTooltipHandler {
         return layerCanvas && layerCanvas.style && (layerCanvas.style.touchAction = "none", 
         layerCanvas.style.pointerEvents = "none"), this._layer;
     }
+    _getTooltipBoxSize(actualTooltip, changePositionOnly) {
+        var _a, _b, _c;
+        if (!changePositionOnly || isNil(this._attributes)) {
+            const chartTheme = null !== (_b = null === (_a = this._chartOption) || void 0 === _a ? void 0 : _a.getTheme()) && void 0 !== _b ? _b : {};
+            this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartTheme);
+        }
+        const {panel: panel} = null !== (_c = this._attributes) && void 0 !== _c ? _c : {};
+        return {
+            width: panel.width + panel.lineWidth,
+            height: panel.height + panel.lineWidth
+        };
+    }
     _removeTooltip() {
         this._layer && this._layer.removeAllChild(), this._attributes = null;
     }

package/esm/plugin/components/tooltip-handler/canvas-tooltip-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin/components/tooltip-handler/canvas-tooltip-handler.ts"],"names":[],"mappings":"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","file":"canvas-tooltip-handler.js","sourcesContent":["import type { ILayer, INode, Stage } from '@visactor/vrender-core';\nimport { BaseTooltipHandler } from './base';\nimport { Tooltip as TooltipComponent } from '@visactor/vrender-components';\nimport { isValid, isNil } from '@visactor/vutils';\nimport type { TooltipHandlerParams } from '../../../component/tooltip';\nimport type { IComponentPluginService } from '../interface';\nimport { registerComponentPlugin } from '../register';\nimport { TooltipHandlerType } from '../../../component/tooltip/constant';\nimport type { ITooltipActual } from '../../../typings';\nimport type { IContainerSize } from '@visactor/vrender-components';\nimport { getTooltipAttributes } from './utils/attribute';\nimport type { ITooltipAttributes } from './interface';\n\n/**\n * The tooltip handler class.\n */\nexport class CanvasTooltipHandler extends BaseTooltipHandler {\n  static readonly type = TooltipHandlerType.canvas;\n  readonly type = TooltipHandlerType.canvas;\n\n  private _layer: ILayer;\n  protected _el?: HTMLCanvasElement;\n  protected _tooltipCanvasId?: string;\n  protected _tooltipComponent: TooltipComponent;\n  protected _attributes?: ITooltipAttributes | null = null;\n\n  constructor() {\n    super(CanvasTooltipHandler.type);\n  }\n\n  onAdd(service: IComponentPluginService<any>): void {\n    super.onAdd(service);\n    this._tooltipCanvasId = (this._chartOption.modeParams as any)?.tooltipCanvasId;\n  }\n\n  private _initTooltipComponent(stage: Stage) {\n    const layer = this._getLayer(stage);\n    this._tooltipComponent = new TooltipComponent({\n      autoCalculatePosition: false,\n      autoMeasure: false\n    });\n    layer.add(this._tooltipComponent as unknown as INode);\n  }\n\n  private _getLayer(stage: Stage) {\n    if (this._layer) {\n      return this._layer;\n    }\n\n    this._layer = stage.createLayer(this._tooltipCanvasId);\n\n    // 需要关闭 layer 对应的 canvas 的事件\n    const layerCanvas = this._layer.layerHandler.canvas.nativeCanvas as HTMLCanvasElement;\n    // TODO：待 vrender 支持\n    if (layerCanvas && layerCanvas.style) {\n      layerCanvas.style.touchAction = 'none';\n      layerCanvas.style.pointerEvents = 'none';\n    }\n\n    return this._layer;\n  }\n\n  // 计算 tooltip 内容区域的宽高，并缓存结果\n  protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined {\n    if (!changePositionOnly || isNil(this._attributes)) {\n      const chartTheme = this._chartOption?.getTheme() ?? {};\n      this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartTheme);\n    }\n    const { panel } = this._attributes ?? {};\n    // canvas模式下, size需要考虑border size, 目的是为了精准判断边界是否超出画布，达到confine效果\n    // html模式不提供confine, 所以不考虑精准计算size\n\n    return {\n      width: panel.width + panel.lineWidth,\n      height: panel.height + panel.lineWidth\n    };\n  }\n\n  protected _removeTooltip() {\n    if (this._layer) {\n      this._layer.removeAllChild();\n      // this._layer.render();\n    }\n    this._attributes = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams) {\n    this._visible = visible;\n\n    const stage = this._compiler.getStage();\n    if (!stage) {\n      return;\n    }\n\n    if (!visible) {\n      if (this._tooltipComponent && this._tooltipComponent.attribute.visible) {\n        this._tooltipComponent.hideAll();\n        this._tooltipComponent.setAttributes({\n          visibleAll: false\n        });\n      }\n      return;\n    }\n\n    if (!this._tooltipComponent) {\n      this._initTooltipComponent(stage);\n    }\n\n    const { activeTooltipSpec } = params;\n    const pos = activeTooltipSpec.position;\n    if (!params.changePositionOnly) {\n      this._tooltipComponent.setAttributes({\n        ...this._attributes,\n        ...pos\n      });\n    } else if (isValid(pos)) {\n      this._tooltipComponent.setAttributes(pos);\n    }\n\n    if (!this._tooltipComponent.attribute.visible) {\n      this._tooltipComponent.showAll();\n      this._tooltipComponent.setAttributes({\n        visibleAll: true\n      });\n    }\n  }\n\n  isTooltipShown() {\n    return this._tooltipComponent?.attribute.visibleAll;\n  }\n\n  release() {\n    super.release();\n    this._layer?.release();\n  }\n}\n\nexport const registerCanvasTooltipHandler = () => {\n  registerComponentPlugin(CanvasTooltipHandler);\n};\n"]}

package/esm/plugin/components/tooltip-handler/constants.d.ts

@@ -1,9 +1,8 @@
-import { escapeHTML } from './utils/common';
-export declare const TOOLTIP_CONTAINER_EL_CLASS_NAME = "vchart-tooltip-container";
+import type { ITooltipHandlerOptions } from './interface';
+export declare const TOOLTIP_PREFIX = "vchart-tooltip";
+export declare const TOOLTIP_CONTAINER_EL_CLASS_NAME: string;
+export declare const TOOLTIP_TITLE_CLASS_NAME: string;
+export declare const TOOLTIP_CONTENT_BOX_CLASS_NAME: string;
 export declare const TOOLTIP_EMPTY_STRING = "";
-export declare const DEFAULT_OPTIONS: {
-    offsetX: number;
-    offsetY: number;
-    sanitize: typeof escapeHTML;
-};
-export type Options = typeof DEFAULT_OPTIONS;
+export declare const DEFAULT_OPTIONS: ITooltipHandlerOptions;
+export declare const DEFAULT_TOOLTIP_Z_INDEX = "99999999999999";

package/esm/plugin/components/tooltip-handler/constants.js

@@ -1,12 +1,17 @@
-import { escapeHTML } from "./utils/common";
+export const TOOLTIP_PREFIX = "vchart-tooltip";
 
-export const TOOLTIP_CONTAINER_EL_CLASS_NAME = "vchart-tooltip-container";
+export const TOOLTIP_CONTAINER_EL_CLASS_NAME = `${TOOLTIP_PREFIX}-container`;
+
+export const TOOLTIP_TITLE_CLASS_NAME = `${TOOLTIP_PREFIX}-title`;
+
+export const TOOLTIP_CONTENT_BOX_CLASS_NAME = `${TOOLTIP_PREFIX}-content-box`;
 
 export const TOOLTIP_EMPTY_STRING = "";
 
 export const DEFAULT_OPTIONS = {
     offsetX: 10,
-    offsetY: 10,
-    sanitize: escapeHTML
+    offsetY: 10
 };
+
+export const DEFAULT_TOOLTIP_Z_INDEX = "99999999999999";
 //# sourceMappingURL=constants.js.map

package/esm/plugin/components/tooltip-handler/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin/components/tooltip-handler/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,+BAA+B,GAAG,0BAA0B,CAAC;AAC1E,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAAG;IAI7B,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;IAOX,QAAQ,EAAE,UAAU;CACrB,CAAC","file":"constants.js","sourcesContent":["import { escapeHTML } from './utils/common';\n\nexport const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';\nexport const TOOLTIP_EMPTY_STRING = '';\n\nexport const DEFAULT_OPTIONS = {\n  /**\n   * X offset.\n   */\n  offsetX: 10,\n\n  /**\n   * Y offset.\n   */\n  offsetY: 10,\n\n  /**\n   * HTML sanitizer function that removes dangerous HTML to prevent XSS.\n   *\n   * This should be a function from string to string. You may replace it with a formatter such as a markdown formatter.\n   */\n  sanitize: escapeHTML\n};\n\n// FIXME: 命名规范\nexport type Options = typeof DEFAULT_OPTIONS;\n"]}
+{"version":3,"sources":["../src/plugin/components/tooltip-handler/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAC/C,MAAM,CAAC,MAAM,+BAA+B,GAAG,GAAG,cAAc,YAAY,CAAC;AAC7E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,cAAc,QAAQ,CAAC;AAClE,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,cAAc,cAAc,CAAC;AAC9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAA2B;IAIrD,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;CACZ,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,gBAAgB,CAAC","file":"constants.js","sourcesContent":["import type { ITooltipHandlerOptions } from './interface';\n\nexport const TOOLTIP_PREFIX = 'vchart-tooltip';\nexport const TOOLTIP_CONTAINER_EL_CLASS_NAME = `${TOOLTIP_PREFIX}-container`;\nexport const TOOLTIP_TITLE_CLASS_NAME = `${TOOLTIP_PREFIX}-title`;\nexport const TOOLTIP_CONTENT_BOX_CLASS_NAME = `${TOOLTIP_PREFIX}-content-box`;\nexport const TOOLTIP_EMPTY_STRING = '';\n\nexport const DEFAULT_OPTIONS: ITooltipHandlerOptions = {\n  /**\n   * X offset.\n   */\n  offsetX: 10,\n\n  /**\n   * Y offset.\n   */\n  offsetY: 10\n};\nexport const DEFAULT_TOOLTIP_Z_INDEX = '99999999999999';\n"]}

package/esm/plugin/components/tooltip-handler/{dom/dom-tooltip-handler.d.ts → dom-tooltip-handler.d.ts}

@@ -1,28 +1,39 @@
-import type { ITooltipActual, ITooltipPositionActual } from '../../../../typings/tooltip';
-import { BaseTooltipHandler } from '../base';
-import type { IDomTooltipStyle } from './interface';
-import { TooltipModel } from './model/tooltip-model';
+import type { ITooltipActual, ITooltipPositionActual } from '../../../typings/tooltip';
+import { BaseTooltipHandler } from './base';
 import { type Maybe } from '@visactor/vutils';
-import type { ITooltipSpec, TooltipHandlerParams } from '../../../../component/tooltip';
-import type { IComponentPluginService } from '../../interface';
-import type { ILayoutPoint } from '../../../../typings';
+import type { IContainerSize } from '@visactor/vrender-components';
+import type { ITooltipSpec, TooltipHandlerParams } from '../../../component/tooltip';
+import type { IComponentPluginService } from '../interface';
+import type { ILayoutPoint } from '../../../typings';
 export declare class DomTooltipHandler extends BaseTooltipHandler {
     static readonly type: string;
     readonly type: string;
     protected _tooltipContainer: HTMLElement;
-    protected _domStyle: IDomTooltipStyle;
+    protected _domStyle: {
+        panelPadding?: number[];
+        panel: Partial<CSSStyleDeclaration>;
+        row: Partial<CSSStyleDeclaration>;
+        title: Partial<CSSStyleDeclaration>;
+        shape: Partial<CSSStyleDeclaration>;
+        key: Partial<CSSStyleDeclaration>;
+        value: Partial<CSSStyleDeclaration>;
+    };
+    protected _rootDom?: HTMLElement;
     protected _tooltipActual?: ITooltipActual;
     protected _container: Maybe<HTMLDivElement>;
+    protected _domString?: string;
     protected _cacheCustomTooltipPosition: ILayoutPoint;
-    protected model: TooltipModel;
     getVisibility(): boolean;
     setVisibility(_value: boolean): void;
     constructor();
     onAdd(service: IComponentPluginService<any>): void;
     initEl(): void;
+    protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined;
     protected _removeTooltip(): void;
     protected _updateTooltip(visible: boolean, params: TooltipHandlerParams): void;
     protected _initStyle(): void;
+    protected _updateDomStringByCol(actualTooltip?: ITooltipActual): void;
+    protected _updateDomStyle(sizeKey?: 'width' | 'height'): void;
     protected _getParentElement(spec: ITooltipSpec): HTMLElement;
     isTooltipShown(): boolean;
     reInit(): void;

package/esm/plugin/components/tooltip-handler/dom-tooltip-handler.js

@@ -0,0 +1,191 @@
+import { BaseTooltipHandler } from "./base";
+
+import { cssToStyleString, getDomStyle, getTextStyle, setStyleToDom } from "./utils/style";
+
+import { TOOLTIP_CONTAINER_EL_CLASS_NAME, DEFAULT_TOOLTIP_Z_INDEX, TOOLTIP_PREFIX, TOOLTIP_CONTENT_BOX_CLASS_NAME, TOOLTIP_TITLE_CLASS_NAME } from "./constants";
+
+import { isNil, isValid } from "@visactor/vutils";
+
+import { domDocument } from "../../../util/env";
+
+import { registerComponentPlugin } from "../register";
+
+import { TooltipHandlerType } from "../../../component/tooltip/constant";
+
+import { getSvgHtml } from "./utils/svg";
+
+import { formatContent } from "./utils/common";
+
+import { token } from "../../../theme/token";
+
+import { calcLayoutNumber } from "../../../util/space";
+
+export class DomTooltipHandler extends BaseTooltipHandler {
+    getVisibility() {
+        return !!this._rootDom && "visible" === this._rootDom.style.visibility;
+    }
+    setVisibility(_value) {
+        _value !== this.getVisibility() && this._rootDom && (this._rootDom.style.visibility = _value ? "visible" : "hidden");
+    }
+    constructor() {
+        super(DomTooltipHandler.type), this.type = TooltipHandlerType.dom, this._tooltipContainer = null == domDocument ? void 0 : domDocument.body;
+    }
+    onAdd(service) {
+        super.onAdd(service), this._initStyle(), this.initEl();
+    }
+    initEl() {
+        var _a, _b, _c, _d;
+        const parentElement = this._component.getSpec().parentElement;
+        if (domDocument && parentElement && parentElement.children && parentElement.children.length) {
+            for (let i = 0; i < parentElement.children.length; i++) if (parentElement.children[i].classList.contains(TOOLTIP_CONTAINER_EL_CLASS_NAME)) {
+                this._container = parentElement.children[i];
+                break;
+            }
+            this._container || (this._container = domDocument.createElement("div"), this._container.style.position = "relative", 
+            this._container.style.zIndex = DEFAULT_TOOLTIP_Z_INDEX, this._container.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME), 
+            parentElement.appendChild(this._container));
+            const tooltipElement = document.createElement("div"), globalTheme = null !== (_b = null === (_a = this._chartOption) || void 0 === _a ? void 0 : _a.getTheme()) && void 0 !== _b ? _b : {};
+            setStyleToDom(tooltipElement, Object.assign({
+                left: "0",
+                top: "0",
+                pointerEvents: "none",
+                padding: "12px",
+                position: "absolute",
+                zIndex: DEFAULT_TOOLTIP_Z_INDEX,
+                fontFamily: null !== (_c = null == globalTheme ? void 0 : globalTheme.fontFamily) && void 0 !== _c ? _c : token.fontFamily,
+                fontSize: "11px",
+                borderRadius: "3px",
+                borderStyle: "solid",
+                lineHeight: "initial",
+                background: "#fff",
+                boxShadow: "2px 2px 4px rgba(0, 0, 0, 0.1)",
+                maxWidth: "100wh",
+                maxHeight: "100vh"
+            }, null === (_d = this._domStyle) || void 0 === _d ? void 0 : _d.panel)), this._container.appendChild(tooltipElement), 
+            this._rootDom = tooltipElement;
+        }
+    }
+    _getTooltipBoxSize(actualTooltip, changePositionOnly) {
+        var _a, _b;
+        changePositionOnly && !isNil(this._domString) || this._updateDomStringByCol(actualTooltip), 
+        this._rootDom.innerHTML = null !== (_a = this._domString) && void 0 !== _a ? _a : "", 
+        this._updateDomStyle("height");
+        const rect = null === (_b = this._rootDom) || void 0 === _b ? void 0 : _b.getBoundingClientRect();
+        return {
+            width: null == rect ? void 0 : rect.width,
+            height: null == rect ? void 0 : rect.height
+        };
+    }
+    _removeTooltip() {
+        this._rootDom && this._rootDom.parentNode && (this._rootDom.parentNode.removeChild(this._rootDom), 
+        this._rootDom = null), this._container = null;
+    }
+    _updateTooltip(visible, params) {
+        var _a, _b;
+        if (visible && this._rootDom) {
+            const {tooltipSpec: tooltipSpec, activeTooltipSpec: activeTooltipSpec} = params;
+            params.changePositionOnly || (this._tooltipActual = activeTooltipSpec), this.setVisibility(visible);
+            const el = this._rootDom;
+            if (el) {
+                const {x: x = 0, y: y = 0} = null !== (_a = activeTooltipSpec.position) && void 0 !== _a ? _a : {};
+                if (tooltipSpec.updateElement) {
+                    this._updatePosition(null !== (_b = this._cacheCustomTooltipPosition) && void 0 !== _b ? _b : {
+                        x: x,
+                        y: y
+                    }), tooltipSpec.updateElement(el, activeTooltipSpec, params);
+                    const position = this._getActualTooltipPosition(activeTooltipSpec, params, {
+                        width: el.offsetWidth,
+                        height: el.offsetHeight
+                    });
+                    this._updatePosition(position), this._cacheCustomTooltipPosition = position;
+                } else this._updatePosition({
+                    x: x,
+                    y: y
+                });
+            }
+        } else this.setVisibility(visible), this._cacheCustomTooltipPosition = void 0;
+    }
+    _initStyle() {
+        const tooltipSpec = this._component.getSpec();
+        this._domStyle = getDomStyle(tooltipSpec);
+    }
+    _updateDomStringByCol(actualTooltip) {
+        var _a;
+        let domString = "";
+        const {title: title = {}, content: content} = actualTooltip, hasContent = content && content.length, rowStyle = this._domStyle.row;
+        if (!1 !== title.visible && (domString += `<h2 class="${TOOLTIP_TITLE_CLASS_NAME}" style="${cssToStyleString(Object.assign(Object.assign(Object.assign({}, this._domStyle.title), hasContent ? rowStyle : {
+            marginBottom: "0px"
+        }), {
+            marginTop: "0px"
+        }))}"><span>${null !== (_a = title.value) && void 0 !== _a ? _a : ""}</span></h2>`), 
+        hasContent) {
+            let shapeItems = "", keyItems = "", valueItems = "";
+            content.forEach(((entry, index) => {
+                const styleByRow = index === content.length - 1 ? null : rowStyle;
+                shapeItems += `<div class="${TOOLTIP_PREFIX}-shape" style="${cssToStyleString(styleByRow)}">${getSvgHtml(entry)}</div>`, 
+                keyItems += `<div class="${TOOLTIP_PREFIX}-key" style="${cssToStyleString(Object.assign(Object.assign({}, styleByRow), entry.keyStyle ? getTextStyle(entry.keyStyle) : null))}">${formatContent(entry.key)}</div>`, 
+                valueItems += `<div class="${TOOLTIP_PREFIX}-value" style="${cssToStyleString(Object.assign(Object.assign({}, styleByRow), entry.valueStyle ? getTextStyle(entry.valueStyle) : null))}">${formatContent(entry.value)}</div>`;
+            })), domString += `<div class="${TOOLTIP_CONTENT_BOX_CLASS_NAME}">\n        <div class="${TOOLTIP_PREFIX}-shape-column" style="${cssToStyleString(Object.assign(Object.assign({}, this._domStyle.shape), {
+                display: "inline-block",
+                verticalAlign: "top"
+            }))}">\n        ${shapeItems}\n        </div>\n        <div class="${TOOLTIP_PREFIX}-key-column" style="${cssToStyleString(Object.assign(Object.assign({}, this._domStyle.key), {
+                display: "inline-block",
+                verticalAlign: "top"
+            }))}">\n        ${keyItems}\n        </div>\n        <div class="${TOOLTIP_PREFIX}-value-column" style="${cssToStyleString(Object.assign(Object.assign({}, this._domStyle.value), {
+                display: "inline-block",
+                verticalAlign: "top"
+            }))}">\n        ${valueItems}\n        </div>\n      </div>`;
+        }
+        this._domString = domString;
+    }
+    _updateDomStyle(sizeKey = "width") {
+        var _a, _b, _c, _d;
+        const rootDom = this._rootDom;
+        if (rootDom) {
+            const contentDom = rootDom.children[rootDom.children.length - 1];
+            if (contentDom.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)) {
+                const tooltipSpec = this._component.getSpec(), contentStyle = {};
+                if (isValid(null === (_a = null == tooltipSpec ? void 0 : tooltipSpec.style) || void 0 === _a ? void 0 : _a.maxContentHeight)) {
+                    const titleDom = rootDom.children[0], titleHeight = titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME) ? titleDom.getBoundingClientRect().height + (null !== (_b = tooltipSpec.style.spaceRow) && void 0 !== _b ? _b : 0) : 0, viewRect = this._chartOption.getChartViewRect(), maxHeight = calcLayoutNumber(tooltipSpec.style.maxContentHeight, Math.min(viewRect.height, document.body.clientHeight) - titleHeight - (this._domStyle.panelPadding ? this._domStyle.panelPadding[0] + this._domStyle.panelPadding[1] : 0));
+                    maxHeight > 0 && (contentStyle.maxHeight = `${maxHeight}px`, contentStyle.overflowY = "auto", 
+                    contentStyle.width = `calc(100% + ${this._domStyle.panelPadding ? this._domStyle.panelPadding[1] + "px" : "10px"})`, 
+                    setStyleToDom(contentDom, contentStyle));
+                }
+                const rows = contentDom.children, widthByCol = [];
+                if (rows) {
+                    for (let i = 0; i < rows.length; i++) {
+                        const cols = null !== (_c = rows[i].children) && void 0 !== _c ? _c : [];
+                        for (let j = 0; j < cols.length; j++) {
+                            const width = cols[j].getBoundingClientRect()[sizeKey];
+                            (void 0 === widthByCol[j] || widthByCol[j] < width) && (widthByCol[j] = width);
+                        }
+                    }
+                    for (let i = 0; i < rows.length; i++) {
+                        const cols = null !== (_d = rows[i].children) && void 0 !== _d ? _d : [];
+                        for (let j = 0; j < cols.length; j++) cols[j].style[sizeKey] = `${widthByCol[j]}px`;
+                    }
+                }
+            }
+        }
+    }
+    _getParentElement(spec) {
+        var _a;
+        return null !== (_a = this._container) && void 0 !== _a ? _a : super._getParentElement(spec);
+    }
+    isTooltipShown() {
+        return this.getVisibility();
+    }
+    reInit() {
+        super.reInit(), this._initStyle();
+    }
+    _updatePosition({x: x, y: y}) {
+        this._rootDom && (this._rootDom.style.transform = `translate3d(${x}px, ${y}px, 0)`);
+    }
+}
+
+DomTooltipHandler.type = TooltipHandlerType.dom;
+
+export const registerDomTooltipHandler = () => {
+    registerComponentPlugin(DomTooltipHandler);
+};
+//# sourceMappingURL=dom-tooltip-handler.js.map

package/esm/plugin/components/tooltip-handler/dom-tooltip-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin/components/tooltip-handler/dom-tooltip-handler.ts"],"names":[],"mappings":"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","file":"dom-tooltip-handler.js","sourcesContent":["import type { ITooltipActual, ITooltipPositionActual } from '../../../typings/tooltip';\nimport { BaseTooltipHandler } from './base';\nimport { cssToStyleString, getDomStyle, getTextStyle, setStyleToDom } from './utils/style';\nimport {\n  TOOLTIP_CONTAINER_EL_CLASS_NAME,\n  DEFAULT_TOOLTIP_Z_INDEX,\n  TOOLTIP_PREFIX,\n  TOOLTIP_CONTENT_BOX_CLASS_NAME,\n  TOOLTIP_TITLE_CLASS_NAME\n} from './constants';\nimport { type Maybe, isNil, isValid } from '@visactor/vutils';\nimport type { IContainerSize } from '@visactor/vrender-components';\nimport { domDocument } from '../../../util/env';\nimport type { ITooltipSpec, TooltipHandlerParams } from '../../../component/tooltip';\nimport type { IComponentPluginService } from '../interface';\nimport { registerComponentPlugin } from '../register';\nimport type { ILayoutPoint } from '../../../typings';\nimport { TooltipHandlerType } from '../../../component/tooltip/constant';\nimport { getSvgHtml } from './utils/svg';\nimport { formatContent } from './utils/common';\nimport { token } from '../../../theme/token';\nimport { calcLayoutNumber } from '../../../util/space';\n/**\n * The tooltip handler class.\n */\nexport class DomTooltipHandler extends BaseTooltipHandler {\n  static readonly type = TooltipHandlerType.dom;\n  readonly type = TooltipHandlerType.dom;\n\n  protected _tooltipContainer = domDocument?.body;\n  protected _domStyle: {\n    panelPadding?: number[];\n    panel: Partial<CSSStyleDeclaration>;\n    row: Partial<CSSStyleDeclaration>;\n    title: Partial<CSSStyleDeclaration>;\n    shape: Partial<CSSStyleDeclaration>;\n    key: Partial<CSSStyleDeclaration>;\n    value: Partial<CSSStyleDeclaration>;\n  };\n  protected _rootDom?: HTMLElement;\n  protected _tooltipActual?: ITooltipActual;\n  protected declare _container: Maybe<HTMLDivElement>;\n  protected _domString?: string;\n\n  /** 自定义 tooltip 的位置缓存 */\n  protected _cacheCustomTooltipPosition: ILayoutPoint;\n\n  getVisibility() {\n    return this._rootDom ? this._rootDom.style.visibility === 'visible' : false;\n  }\n\n  setVisibility(_value: boolean) {\n    // 这里做个节流\n    if (_value !== this.getVisibility() && this._rootDom) {\n      this._rootDom.style.visibility = _value ? 'visible' : 'hidden';\n    }\n  }\n\n  constructor() {\n    super(DomTooltipHandler.type);\n  }\n\n  onAdd(service: IComponentPluginService<any>): void {\n    super.onAdd(service);\n    this._initStyle();\n    this.initEl();\n  }\n\n  initEl() {\n    const tooltipSpec = this._component.getSpec() as ITooltipSpec;\n    const parentElement = tooltipSpec.parentElement as HTMLElement | HTMLCanvasElement;\n    if (domDocument && parentElement && parentElement.children && parentElement.children.length) {\n      for (let i = 0; i < parentElement.children.length; i++) {\n        if (parentElement.children[i].classList.contains(TOOLTIP_CONTAINER_EL_CLASS_NAME)) {\n          this._container = parentElement.children[i] as HTMLDivElement;\n          break;\n        }\n      }\n      if (!this._container) {\n        this._container = domDocument.createElement('div');\n        this._container.style.position = 'relative';\n        this._container.style.zIndex = DEFAULT_TOOLTIP_Z_INDEX;\n        this._container.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME);\n        parentElement.appendChild(this._container);\n      }\n      const tooltipElement = document.createElement('div');\n      const globalTheme = this._chartOption?.getTheme() ?? {};\n\n      setStyleToDom(tooltipElement, {\n        left: '0',\n        top: '0',\n        pointerEvents: 'none',\n        padding: '12px',\n        position: 'absolute',\n        zIndex: DEFAULT_TOOLTIP_Z_INDEX,\n        fontFamily: (globalTheme?.fontFamily ?? token.fontFamily) as string,\n        fontSize: '11px',\n        borderRadius: '3px',\n        borderStyle: 'solid',\n        lineHeight: 'initial',\n        background: '#fff',\n        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',\n        maxWidth: '100wh',\n        maxHeight: '100vh',\n        ...this._domStyle?.panel\n      } as CSSStyleDeclaration);\n\n      this._container.appendChild(tooltipElement);\n      this._rootDom = tooltipElement;\n    }\n  }\n\n  // 计算 tooltip 内容区域的宽高，并缓存结果\n  protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined {\n    if (!changePositionOnly || isNil(this._domString)) {\n      this._updateDomStringByCol(actualTooltip);\n    }\n    this._rootDom.innerHTML = this._domString ?? '';\n\n    this._updateDomStyle('height');\n\n    const rect = this._rootDom?.getBoundingClientRect();\n\n    return {\n      width: rect?.width,\n      height: rect?.height\n    };\n  }\n\n  protected _removeTooltip() {\n    if (this._rootDom && this._rootDom.parentNode) {\n      this._rootDom.parentNode.removeChild(this._rootDom);\n      this._rootDom = null;\n    }\n    this._container = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams) {\n    if (!visible || !this._rootDom) {\n      this.setVisibility(visible);\n      this._cacheCustomTooltipPosition = undefined;\n    } else {\n      const { tooltipSpec, activeTooltipSpec } = params;\n\n      if (!params.changePositionOnly) {\n        this._tooltipActual = activeTooltipSpec;\n      }\n      this.setVisibility(visible);\n\n      // 位置\n      const el = this._rootDom;\n      if (el) {\n        const { x = 0, y = 0 } = activeTooltipSpec.position ?? {};\n        if (tooltipSpec.updateElement) {\n          // 此处先设定一次位置，防止页面暂时出现滚动条（优先设置上次的位置）\n          this._updatePosition(this._cacheCustomTooltipPosition ?? { x, y });\n          // 更新 tooltip dom\n          tooltipSpec.updateElement(el, activeTooltipSpec, params);\n          // 重新计算 tooltip 位置\n          const position = this._getActualTooltipPosition(activeTooltipSpec, params, {\n            width: el.offsetWidth,\n            height: el.offsetHeight\n          });\n          // 更新位置\n          this._updatePosition(position);\n          // 更新缓存\n          this._cacheCustomTooltipPosition = position;\n        } else {\n          this._updatePosition({ x, y });\n        }\n      }\n    }\n  }\n\n  protected _initStyle() {\n    const tooltipSpec = this._component.getSpec() as ITooltipSpec;\n\n    this._domStyle = getDomStyle(tooltipSpec);\n  }\n\n  protected _updateDomStringByCol(actualTooltip?: ITooltipActual) {\n    let domString = '';\n    const { title = {}, content } = actualTooltip;\n    const hasContent = content && content.length;\n    const rowStyle = this._domStyle.row;\n\n    if (title.visible !== false) {\n      domString += `<h2 class=\"${TOOLTIP_TITLE_CLASS_NAME}\" style=\"${cssToStyleString({\n        ...this._domStyle.title,\n        ...(hasContent ? rowStyle : { marginBottom: '0px' }),\n        marginTop: '0px'\n      })}\"><span>${title.value ?? ''}</span></h2>`;\n    }\n    if (hasContent) {\n      let shapeItems = '';\n      let keyItems = '';\n      let valueItems = '';\n      content.forEach((entry, index) => {\n        const styleByRow = index === content.length - 1 ? null : rowStyle;\n\n        shapeItems += `<div class=\"${TOOLTIP_PREFIX}-shape\" style=\"${cssToStyleString(styleByRow)}\">${getSvgHtml(\n          entry\n        )}</div>`;\n\n        keyItems += `<div class=\"${TOOLTIP_PREFIX}-key\" style=\"${cssToStyleString({\n          ...styleByRow,\n          ...(entry.keyStyle ? getTextStyle(entry.keyStyle) : null)\n        })}\">${formatContent(entry.key)}</div>`;\n\n        valueItems += `<div class=\"${TOOLTIP_PREFIX}-value\" style=\"${cssToStyleString({\n          ...styleByRow,\n          ...(entry.valueStyle ? getTextStyle(entry.valueStyle) : null)\n        })}\">${formatContent(entry.value)}</div>`;\n      });\n\n      domString += `<div class=\"${TOOLTIP_CONTENT_BOX_CLASS_NAME}\">\n        <div class=\"${TOOLTIP_PREFIX}-shape-column\" style=\"${cssToStyleString({\n        ...this._domStyle.shape,\n        display: 'inline-block',\n        verticalAlign: 'top'\n      })}\">\n        ${shapeItems}\n        </div>\n        <div class=\"${TOOLTIP_PREFIX}-key-column\" style=\"${cssToStyleString({\n        ...this._domStyle.key,\n        display: 'inline-block',\n        verticalAlign: 'top'\n      })}\">\n        ${keyItems}\n        </div>\n        <div class=\"${TOOLTIP_PREFIX}-value-column\" style=\"${cssToStyleString({\n        ...this._domStyle.value,\n        display: 'inline-block',\n        verticalAlign: 'top'\n      })}\">\n        ${valueItems}\n        </div>\n      </div>`;\n    }\n\n    this._domString = domString;\n  }\n  protected _updateDomStyle(sizeKey: 'width' | 'height' = 'width') {\n    const rootDom = this._rootDom;\n\n    if (rootDom) {\n      const contentDom = rootDom.children[rootDom.children.length - 1];\n\n      if (contentDom.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)) {\n        const tooltipSpec = this._component.getSpec() as ITooltipSpec;\n        const contentStyle: Partial<CSSStyleDeclaration> = {};\n\n        if (isValid(tooltipSpec?.style?.maxContentHeight)) {\n          const titleDom = rootDom.children[0];\n          const titleHeight =\n            titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME)\n              ? titleDom.getBoundingClientRect().height + (tooltipSpec.style.spaceRow ?? 0)\n              : 0;\n          const viewRect = (this._chartOption as any).getChartViewRect();\n          const maxHeight = calcLayoutNumber(\n            tooltipSpec.style.maxContentHeight,\n            Math.min(viewRect.height, document.body.clientHeight) -\n              titleHeight -\n              (this._domStyle.panelPadding ? this._domStyle.panelPadding[0] + this._domStyle.panelPadding[1] : 0)\n          );\n\n          if (maxHeight > 0) {\n            contentStyle.maxHeight = `${maxHeight}px`;\n            contentStyle.overflowY = 'auto';\n            // todo 让内容宽度往外阔一点，给滚动条留出位置\n            contentStyle.width = `calc(100% + ${\n              this._domStyle.panelPadding ? this._domStyle.panelPadding[1] + 'px' : '10px'\n            })`;\n\n            setStyleToDom(contentDom as HTMLElement, contentStyle);\n          }\n        }\n\n        const rows = contentDom.children;\n        const widthByCol: number[] = [];\n        if (rows) {\n          for (let i = 0; i < rows.length; i++) {\n            const row = rows[i];\n            const cols = row.children ?? ([] as HTMLElement[]);\n\n            for (let j = 0; j < cols.length; j++) {\n              const width = cols[j].getBoundingClientRect()[sizeKey];\n              if (widthByCol[j] === undefined || widthByCol[j] < width) {\n                widthByCol[j] = width;\n              }\n            }\n          }\n\n          for (let i = 0; i < rows.length; i++) {\n            const row = rows[i];\n            const cols = row.children ?? ([] as HTMLElement[]);\n\n            for (let j = 0; j < cols.length; j++) {\n              (cols[j] as HTMLElement).style[sizeKey] = `${widthByCol[j]}px`;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  protected _getParentElement(spec: ITooltipSpec): HTMLElement {\n    return this._container ?? super._getParentElement(spec);\n  }\n\n  isTooltipShown() {\n    return this.getVisibility();\n  }\n\n  reInit() {\n    super.reInit();\n    this._initStyle();\n  }\n\n  protected _updatePosition({ x, y }: ITooltipPositionActual) {\n    if (this._rootDom) {\n      // translate3d 性能较好：https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance\n      this._rootDom.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n    }\n  }\n}\n\nexport const registerDomTooltipHandler = () => {\n  registerComponentPlugin(DomTooltipHandler);\n};\n"]}

package/esm/plugin/components/tooltip-handler/index.d.ts

@@ -1,2 +1,2 @@
-export * from './dom';
-export * from './canvas';
+export * from './dom-tooltip-handler';
+export * from './canvas-tooltip-handler';

package/esm/plugin/components/tooltip-handler/index.js

@@ -1,4 +1,4 @@
-export * from "./dom";
+export * from "./dom-tooltip-handler";
 
-export * from "./canvas";
+export * from "./canvas-tooltip-handler";
 //# sourceMappingURL=index.js.map

package/esm/plugin/components/tooltip-handler/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin/components/tooltip-handler/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC","file":"index.js","sourcesContent":["export * from './dom';\nexport * from './canvas';\n"]}
+{"version":3,"sources":["../src/plugin/components/tooltip-handler/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC","file":"index.js","sourcesContent":["export * from './dom-tooltip-handler';\nexport * from './canvas-tooltip-handler';\n"]}

package/esm/plugin/components/tooltip-handler/interface/index.d.ts

@@ -1,2 +1,15 @@
-export * from './style';
-export * from './common';
+import type { TooltipAttributes } from '@visactor/vrender-components';
+import type { ITextAttribute, IFillStyle } from '@visactor/vrender-core';
+export interface ITooltipTextStyle extends Partial<ITextAttribute & IFillStyle> {
+    spacing?: number;
+    multiLine?: boolean;
+    maxWidth?: number;
+    autoWidth?: boolean;
+}
+export interface ITooltipAttributes extends TooltipAttributes {
+    align?: 'left' | 'right';
+}
+export interface ITooltipHandlerOptions {
+    offsetX?: number;
+    offsetY?: number;
+}

package/esm/plugin/components/tooltip-handler/interface/index.js

@@ -1,4 +1,2 @@
-export * from "./style";
-
-export * from "./common";
+export { };
 //# sourceMappingURL=index.js.map

package/esm/plugin/components/tooltip-handler/interface/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin/components/tooltip-handler/interface/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC","file":"index.js","sourcesContent":["export * from './style';\nexport * from './common';\n"]}
+{"version":3,"sources":["../src/plugin/components/tooltip-handler/interface/index.ts"],"names":[],"mappings":"","file":"index.js","sourcesContent":["import type { TooltipAttributes } from '@visactor/vrender-components';\nimport type { ITextAttribute, IFillStyle } from '@visactor/vrender-core';\n\nexport interface ITooltipTextStyle extends Partial<ITextAttribute & IFillStyle> {\n  /** 和相邻元素的水平间距 */\n  spacing?: number;\n  /** 是否支持换行 */\n  multiLine?: boolean;\n  /** 文本元素的最大宽度 */\n  maxWidth?: number;\n  /** 是否开启自动宽度 */\n  autoWidth?: boolean;\n}\n\nexport interface ITooltipAttributes extends TooltipAttributes {\n  /**\n   * @since 1.11.5\n   *\n   * shape、key、value的对齐方式，可选项如下：\n   * 'left': 从左到右对齐\n   * 'right': 从右到左对齐\n   */\n  align?: 'left' | 'right';\n}\n\nexport interface ITooltipHandlerOptions {\n  offsetX?: number;\n  offsetY?: number;\n}\n"]}

package/esm/plugin/components/tooltip-handler/utils/attribute.d.ts

@@ -1,8 +1,15 @@
-import type { TooltipPanelAttrs } from '@visactor/vrender-components';
-import type { ITooltipActual } from '../../../../typings';
+import type { TooltipPanelAttrs, TooltipRichTextAttrs } from '@visactor/vrender-components';
+import type { ITooltipActual, MaybeArray } from '../../../../typings';
 import type { ITooltipAttributes, ITooltipTextStyle } from '../interface';
 import type { ITheme } from '../../../../theme';
 import type { ITooltipSpec, ITooltipTextTheme, ITooltipTheme } from '../../../../component/tooltip';
+interface ITooltipTextInfo {
+    width: number;
+    height: number;
+    text: MaybeArray<number> | MaybeArray<string> | TooltipRichTextAttrs;
+}
+export declare const measureTooltipText: (text: string | TooltipRichTextAttrs, style: ITooltipTextStyle) => ITooltipTextInfo;
 export declare function getTextAttributes(style?: ITooltipTextTheme, globalTheme?: ITheme, defaultAttributes?: Partial<ITooltipTextStyle>): ITooltipTextStyle;
 export declare const getPanelAttributes: (style: ITooltipTheme['panel']) => TooltipPanelAttrs;
 export declare const getTooltipAttributes: (actualTooltip: ITooltipActual, spec: ITooltipSpec, globalTheme: ITheme) => ITooltipAttributes;
+export {};

package/esm/plugin/components/tooltip-handler/utils/attribute.js

@@ -4,16 +4,38 @@ import { mergeSpec } from "@visactor/vutils-extension";
 
 import { normalizeLayoutPaddingSpec } from "../../../../util/space";
 
-import { measureTooltipText } from "./common";
-
 import { token } from "../../../../theme/token";
 
+import { getRichTextBounds } from "@visactor/vrender-core";
+
 const DEFAULT_TEXT_ATTRIBUTES = {
     fontFamily: token.fontFamily,
     spacing: 10,
     wordBreak: "break-word"
 };
 
+export const measureTooltipText = (text, style) => {
+    var _a;
+    let textLines, textConfig;
+    "rich" !== (null == text ? void 0 : text.type) && "html" !== (null == text ? void 0 : text.type) ? (text = (null != text ? text : "").toString(), 
+    style.multiLine ? (textLines = text.split("\n"), textLines = textLines.map(((line, i) => i < textLines.length - 1 ? line + "\n" : line))) : textLines = [ text ], 
+    textConfig = textLines.map((line => Object.assign(Object.assign({}, style), {
+        text: line
+    })))) : (textConfig = text.text, textLines = text);
+    const bound = getRichTextBounds({
+        wordBreak: null !== (_a = style.wordBreak) && void 0 !== _a ? _a : "break-word",
+        maxWidth: style.maxWidth ? style.maxWidth : void 0,
+        width: 0,
+        height: 0,
+        textConfig: textConfig
+    });
+    return {
+        width: bound.width(),
+        height: bound.height(),
+        text: textLines
+    };
+};
+
 export function getTextAttributes(style = {}, globalTheme, defaultAttributes) {
     var _a, _b;
     return Object.assign(Object.assign({}, null != defaultAttributes ? defaultAttributes : DEFAULT_TEXT_ATTRIBUTES), {
@@ -49,7 +71,7 @@ export const getPanelAttributes = style => {
 
 export const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
     var _a, _b, _c, _d, _e;
-    const {style: style = {}, enterable: enterable, transitionDuration: transitionDuration} = spec, {panel: panel = {}, titleLabel: titleLabel, shape: shape, keyLabel: keyLabel, valueLabel: valueLabel, spaceRow: commonSpaceRow, maxContentHeight: maxContentHeight, align: align} = style, padding = normalizePadding(panel.padding), paddingSpec = normalizeLayoutPaddingSpec(panel.padding), titleStyle = getTextAttributes(Object.assign({
+    const {style: style = {}, enterable: enterable, transitionDuration: transitionDuration} = spec, {panel: panel = {}, titleLabel: titleLabel, shape: shape, keyLabel: keyLabel, valueLabel: valueLabel, spaceRow: commonSpaceRow, align: align} = style, padding = normalizePadding(panel.padding), paddingSpec = normalizeLayoutPaddingSpec(panel.padding), titleStyle = getTextAttributes(Object.assign({
         textAlign: "right" === align ? "right" : "left"
     }, titleLabel), globalTheme), keyStyle = getTextAttributes(Object.assign({
         textAlign: "right" === align ? "right" : "left"
@@ -75,12 +97,11 @@ export const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
         hasContentShape: !1,
         keyWidth: 0,
         valueWidth: 0,
-        maxContentHeight: maxContentHeight,
         enterable: enterable,
         transitionDuration: transitionDuration,
         align: align
     }, {title: title = {}, content: content = []} = actualTooltip;
-    let panelWidth = paddingSpec.left + paddingSpec.right, panelHeight = paddingSpec.top + paddingSpec.bottom, panelDomHeight = paddingSpec.top + paddingSpec.bottom, contentMaxWidth = 0;
+    let panelWidth = paddingSpec.left + paddingSpec.right, panelHeight = paddingSpec.top + paddingSpec.bottom, contentMaxWidth = 0;
     const hasContent = !!content.length;
     let maxKeyWidth = 0, maxAdaptiveKeyWidth = 0, maxValueWidth = 0, maxShapeWidth = 0;
     if (hasContent) {
@@ -126,8 +147,8 @@ export const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
             };
             return itemAttrs.height = itemHeight, contentHeight += itemHeight, i < content.length - 1 && (contentHeight += itemAttrs.spaceRow), 
             itemAttrs;
-        })), panelHeight += contentHeight, panelDomHeight += Math.min(contentHeight, null != maxContentHeight ? maxContentHeight : 1 / 0), 
-        maxKeyWidth = keyWidths.length ? maxInArray(keyWidths) : 0, maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? maxInArray(adaptiveKeyWidths) : 0, 
+        })), panelHeight += contentHeight, maxKeyWidth = keyWidths.length ? maxInArray(keyWidths) : 0, 
+        maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? maxInArray(adaptiveKeyWidths) : 0, 
         maxValueWidth = valueWidths.length ? maxInArray(valueWidths) : 0, maxShapeWidth = shapeWidths.length ? maxInArray(shapeWidths) + shapeStyle.spacing : 0, 
         contentMaxWidth = Math.max(maxShapeWidth + maxKeyWidth + keyStyle.spacing + maxValueWidth + valueStyle.spacing, maxShapeWidth + maxAdaptiveKeyWidth, contentMaxWidth), 
         attributes.hasContentShape = !!shapeWidths.length, attributes.keyWidth = maxKeyWidth, 
@@ -151,15 +172,14 @@ export const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
         }), titleMaxWidth = attributes.title.value.width, titleMaxHeight = attributes.title.value.height, 
         titleHeightWithSpace = titleMaxHeight + (hasContent ? attributes.title.spaceRow : 0);
     }
-    return panelHeight += titleHeightWithSpace, panelDomHeight += titleHeightWithSpace, 
-    attributes.title.width = titleMaxWidth, attributes.title.height = titleMaxHeight, 
-    isAutoWidthMode() ? panelWidth += contentMaxWidth || titleMaxWidth : panelWidth += Math.max(titleMaxWidth, contentMaxWidth), 
+    return panelHeight += titleHeightWithSpace, attributes.title.width = titleMaxWidth, 
+    attributes.title.height = titleMaxHeight, isAutoWidthMode() ? panelWidth += contentMaxWidth || titleMaxWidth : panelWidth += Math.max(titleMaxWidth, contentMaxWidth), 
     hasContent && attributes.content.forEach((item => {
         var _a;
         const value = item.value;
         value && (null === (_a = value.autoWidth) || void 0 === _a || _a) && (value.width = panelWidth - paddingSpec.left - paddingSpec.right - maxShapeWidth - maxKeyWidth - keyStyle.spacing - valueStyle.spacing, 
         value.maxWidth || (value.maxWidth = Math.ceil(value.width)), attributes.valueWidth = Math.max(attributes.valueWidth, value.width));
     })), attributes.panel.width = panelWidth, attributes.panel.height = panelHeight, 
-    attributes.panelDomHeight = panelDomHeight, attributes;
+    attributes;
 };
 //# sourceMappingURL=attribute.js.map