@visactor/vchart 1.0.1-alpha.2 → 1.1.0-beta.0

package/cjs/component/tooltip/handler/canvas/canvas-tooltip-handler.d.ts

@@ -1,5 +1,5 @@
 import type { IToolTipActual } from '../../../../typings/tooltip';
-import type { ITooltipSpec, TooltipHandlerParams } from '../../interface';
+import type { TooltipHandlerParams } from '../../interface';
 import { BaseTooltipHandler } from '../base';
 import { Tooltip as TooltipComponent } from '@visactor/vrender-components';
 import type { Tooltip } from '../../tooltip';
@@ -9,7 +9,7 @@ export declare class CanvasTooltipHandler extends BaseTooltipHandler {
     protected _el?: HTMLCanvasElement;
     protected _tooltipCanvasId?: string;
     protected _tooltipComponent: TooltipComponent;
-    constructor(tooltipSpec: ITooltipSpec, tooltipId: string, component: Tooltip);
+    constructor(tooltipId: string, component: Tooltip);
     private _initTooltipComponent;
     private _getLayer;
     protected _removeTooltip(): void;

package/cjs/component/tooltip/handler/canvas/canvas-tooltip-handler.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 const base_1 = require("../base"), vrender_components_1 = require("@visactor/vrender-components"), vutils_1 = require("@visactor/vutils"), constants_1 = require("../constants");
 
 class CanvasTooltipHandler extends base_1.BaseTooltipHandler {
-    constructor(tooltipSpec, tooltipId, component) {
+    constructor(tooltipId, component) {
         var _a;
-        super(tooltipSpec, tooltipId, component), this.type = constants_1.TooltipHandlerType.canvas, 
+        super(tooltipId, component), this.type = constants_1.TooltipHandlerType.canvas, 
         this._tooltipCanvasId = null === (_a = this._chartOption.modeParams) || void 0 === _a ? void 0 : _a.tooltipCanvasId;
     }
     _initTooltipComponent(stage) {

package/cjs/component/tooltip/handler/canvas/canvas-tooltip-handler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/canvas/canvas-tooltip-handler.ts"],"names":[],"mappings":"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","file":"canvas-tooltip-handler.js","sourcesContent":["import type { ILayer, INode, Stage } from '@visactor/vrender';\nimport type { IToolTipActual } from '../../../../typings/tooltip';\nimport type { ITooltipSpec, TooltipHandlerParams } from '../../interface';\nimport { BaseTooltipHandler } from '../base';\nimport { Tooltip as TooltipComponent } from '@visactor/vrender-components';\nimport { isValid } from '@visactor/vutils';\nimport { TooltipHandlerType } from '../constants';\nimport type { Tooltip } from '../../tooltip';\n\n/**\n * The tooltip handler class.\n */\nexport class CanvasTooltipHandler extends BaseTooltipHandler {\n  type = TooltipHandlerType.canvas;\n\n  private _layer: ILayer;\n  protected _el?: HTMLCanvasElement;\n  protected _tooltipCanvasId?: string;\n  protected _tooltipComponent: TooltipComponent;\n\n  constructor(tooltipSpec: ITooltipSpec, tooltipId: string, component: Tooltip) {\n    super(tooltipSpec, tooltipId, component);\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  protected _removeTooltip() {\n    if (this._layer) {\n      this._layer.removeAllChild();\n      // this._layer.render();\n    }\n    this._attributeCache = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams, actualTooltip: IToolTipActual) {\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        stage.renderNextFrame();\n      }\n      return;\n    }\n\n    if (!this._tooltipComponent) {\n      this._initTooltipComponent(stage);\n    }\n\n    const pos = actualTooltip?.position;\n    if (!params.changePositionOnly) {\n      this._tooltipComponent.setAttributes({\n        visible: true,\n        ...this._attributeCache,\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    }\n  }\n\n  release() {\n    super.release();\n    this._layer?.release();\n  }\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/canvas/canvas-tooltip-handler.ts"],"names":[],"mappings":"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","file":"canvas-tooltip-handler.js","sourcesContent":["import type { ILayer, INode, Stage } from '@visactor/vrender';\nimport type { IToolTipActual } from '../../../../typings/tooltip';\nimport type { TooltipHandlerParams } from '../../interface';\nimport { BaseTooltipHandler } from '../base';\nimport { Tooltip as TooltipComponent } from '@visactor/vrender-components';\nimport { isValid } from '@visactor/vutils';\nimport { TooltipHandlerType } from '../constants';\nimport type { Tooltip } from '../../tooltip';\n\n/**\n * The tooltip handler class.\n */\nexport class CanvasTooltipHandler extends BaseTooltipHandler {\n  type = TooltipHandlerType.canvas;\n\n  private _layer: ILayer;\n  protected _el?: HTMLCanvasElement;\n  protected _tooltipCanvasId?: string;\n  protected _tooltipComponent: TooltipComponent;\n\n  constructor(tooltipId: string, component: Tooltip) {\n    super(tooltipId, component);\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  protected _removeTooltip() {\n    if (this._layer) {\n      this._layer.removeAllChild();\n      // this._layer.render();\n    }\n    this._attributeCache = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams, actualTooltip: IToolTipActual) {\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        stage.renderNextFrame();\n      }\n      return;\n    }\n\n    if (!this._tooltipComponent) {\n      this._initTooltipComponent(stage);\n    }\n\n    const pos = actualTooltip?.position;\n    if (!params.changePositionOnly) {\n      this._tooltipComponent.setAttributes({\n        visible: true,\n        ...this._attributeCache,\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    }\n  }\n\n  release() {\n    super.release();\n    this._layer?.release();\n  }\n}\n"]}

package/cjs/component/tooltip/handler/constants.d.ts

@@ -1,6 +1,10 @@
+import type { IToolTipLineActual } from '../../../typings';
 import { escapeHTML } from './utils';
 export declare const TOOLTIP_EL_CLASS_NAME = "vchart-tooltip-element";
 export declare const TOOLTIP_CONTAINER_EL_CLASS_NAME = "vchart-tooltip-container";
+export declare const TOOLTIP_MAX_LINE_COUNT = 20;
+export declare const TOOLTIP_EMPTY_STRING = "";
+export declare const TOOLTIP_OTHERS_LINE: IToolTipLineActual;
 export declare const DEFAULT_OPTIONS: {
     offsetX: number;
     offsetY: number;

package/cjs/component/tooltip/handler/constants.js

@@ -2,12 +2,15 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.TooltipHandlerType = exports.DEFAULT_OPTIONS = exports.TOOLTIP_CONTAINER_EL_CLASS_NAME = exports.TOOLTIP_EL_CLASS_NAME = void 0;
+}), exports.TooltipHandlerType = exports.DEFAULT_OPTIONS = exports.TOOLTIP_OTHERS_LINE = exports.TOOLTIP_EMPTY_STRING = exports.TOOLTIP_MAX_LINE_COUNT = exports.TOOLTIP_CONTAINER_EL_CLASS_NAME = exports.TOOLTIP_EL_CLASS_NAME = void 0;
 
 const constant_1 = require("../../../constant"), utils_1 = require("./utils");
 
 exports.TOOLTIP_EL_CLASS_NAME = "vchart-tooltip-element", exports.TOOLTIP_CONTAINER_EL_CLASS_NAME = "vchart-tooltip-container", 
-exports.DEFAULT_OPTIONS = {
+exports.TOOLTIP_MAX_LINE_COUNT = 20, exports.TOOLTIP_EMPTY_STRING = "", exports.TOOLTIP_OTHERS_LINE = {
+    key: "其他",
+    value: "..."
+}, exports.DEFAULT_OPTIONS = {
     offsetX: 10,
     offsetY: 10,
     sanitize: utils_1.escapeHTML

package/cjs/component/tooltip/handler/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/constants.ts"],"names":[],"mappings":";;;AAAA,gDAA2C;AAC3C,mCAAqC;AAExB,QAAA,qBAAqB,GAAG,wBAAwB,CAAC;AACjD,QAAA,+BAA+B,GAAG,0BAA0B,CAAC;AAE7D,QAAA,eAAe,GAAG;IAI7B,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;IAOX,QAAQ,EAAE,kBAAU;CACrB,CAAC;AAMF,MAAa,kBAAkB;;AAA/B,gDAGC;AAFQ,sBAAG,GAAG,GAAG,iBAAM,sBAAsB,CAAC;AACtC,yBAAM,GAAG,GAAG,iBAAM,yBAAyB,CAAC","file":"constants.js","sourcesContent":["import { PREFIX } from '../../../constant';\nimport { escapeHTML } from './utils';\n\nexport const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';\nexport const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';\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\n/** 内置 handler 类型 */\nexport class TooltipHandlerType {\n  static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`; // 模拟 enum\n  static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/constants.ts"],"names":[],"mappings":";;;AAAA,gDAA2C;AAE3C,mCAAqC;AAExB,QAAA,qBAAqB,GAAG,wBAAwB,CAAC;AACjD,QAAA,+BAA+B,GAAG,0BAA0B,CAAC;AAC7D,QAAA,sBAAsB,GAAG,EAAE,CAAC;AAC5B,QAAA,oBAAoB,GAAG,EAAE,CAAC;AAE1B,QAAA,mBAAmB,GAAG;IAEjC,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,KAAK;CACS,CAAC;AAEX,QAAA,eAAe,GAAG;IAI7B,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;IAOX,QAAQ,EAAE,kBAAU;CACrB,CAAC;AAMF,MAAa,kBAAkB;;AAA/B,gDAGC;AAFQ,sBAAG,GAAG,GAAG,iBAAM,sBAAsB,CAAC;AACtC,yBAAM,GAAG,GAAG,iBAAM,yBAAyB,CAAC","file":"constants.js","sourcesContent":["import { PREFIX } from '../../../constant';\nimport type { IToolTipLineActual } from '../../../typings';\nimport { escapeHTML } from './utils';\n\nexport const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';\nexport const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';\nexport const TOOLTIP_MAX_LINE_COUNT = 20;\nexport const TOOLTIP_EMPTY_STRING = '';\n\nexport const TOOLTIP_OTHERS_LINE = {\n  // TODO: i18n\n  key: '其他',\n  value: '...'\n} as IToolTipLineActual;\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\n/** 内置 handler 类型 */\nexport class TooltipHandlerType {\n  static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`; // 模拟 enum\n  static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;\n}\n"]}

package/cjs/component/tooltip/handler/dom/dom-tooltip-handler.d.ts

@@ -4,17 +4,21 @@ import { BaseTooltipHandler } from '../base';
 import type { IDomTooltipStyle } from './interface';
 import { TooltipModel } from './model/tooltip-model';
 import type { Tooltip } from '../../tooltip';
+import type { Maybe } from '@visactor/vutils';
 export declare class DomTooltipHandler extends BaseTooltipHandler {
     type: string;
     protected _tooltipContainer: HTMLElement;
     protected _domStyle: IDomTooltipStyle;
-    protected _container: HTMLDivElement;
+    protected _tooltipActual: IToolTipActual;
+    protected _container: Maybe<HTMLDivElement>;
     protected model: TooltipModel;
     getVisibility(): boolean;
     setVisibility(_value: boolean): void;
-    constructor(tooltipSpec: ITooltipSpec, tooltipId: string, component: Tooltip);
+    constructor(tooltipId: string, component: Tooltip);
     initEl(): void;
     protected _removeTooltip(): void;
     protected _updateTooltip(visible: boolean, params: TooltipHandlerParams, actualTooltip: IToolTipActual): void;
+    protected _initStyle(): void;
     protected _getParentElement(spec: ITooltipSpec): HTMLElement;
+    reInit(): void;
 }

package/cjs/component/tooltip/handler/dom/dom-tooltip-handler.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.DomTooltipHandler = void 0;
 
-const base_1 = require("../base"), style_1 = require("./utils/style"), tooltip_model_1 = require("./model/tooltip-model"), base_tooltip_model_1 = require("./model/base-tooltip-model"), constants_1 = require("../constants");
+const base_1 = require("../base"), util_1 = require("./util"), tooltip_model_1 = require("./model/tooltip-model"), base_tooltip_model_1 = require("./model/base-tooltip-model"), constants_1 = require("../constants");
 
 class DomTooltipHandler extends base_1.BaseTooltipHandler {
     getVisibility() {
@@ -15,15 +15,14 @@ class DomTooltipHandler extends base_1.BaseTooltipHandler {
         var _a;
         _value !== this.getVisibility() && (null === (_a = this.model) || void 0 === _a || _a.setVisibility(_value));
     }
-    constructor(tooltipSpec, tooltipId, component) {
+    constructor(tooltipId, component) {
         var _a;
-        super(tooltipSpec, tooltipId, component), this.type = constants_1.TooltipHandlerType.dom, 
-        this._tooltipContainer = null === (_a = globalThis.document) || void 0 === _a ? void 0 : _a.body, 
-        this._domStyle = (0, style_1.getDomStyles)(this._style), this.initEl();
+        super(tooltipId, component), this.type = constants_1.TooltipHandlerType.dom, this._tooltipContainer = null === (_a = globalThis.document) || void 0 === _a ? void 0 : _a.body, 
+        this._initStyle(), this.initEl();
     }
     initEl() {
-        if (base_tooltip_model_1.domDocument) {
-            const {parentElement: parentElement} = this._tooltipSpec;
+        const tooltipSpec = this._component.getSpec(), {parentElement: parentElement} = tooltipSpec;
+        if (base_tooltip_model_1.domDocument && parentElement) {
             for (let i = 0; i < parentElement.children.length; i++) if (parentElement.children[i].classList.contains(constants_1.TOOLTIP_CONTAINER_EL_CLASS_NAME)) {
                 this._container = parentElement.children[i];
                 break;
@@ -31,8 +30,10 @@ class DomTooltipHandler extends base_1.BaseTooltipHandler {
             this._container || (this._container = base_tooltip_model_1.domDocument.createElement("div"), 
             this._container.style.position = "relative", this._container.classList.add(constants_1.TOOLTIP_CONTAINER_EL_CLASS_NAME), 
             parentElement.appendChild(this._container)), this.model = new tooltip_model_1.TooltipModel(this._container, {
-                valueToHtml: this._option.sanitize
-            }, [ this._tooltipSpec.className ], this.id, this._domStyle);
+                valueToHtml: this._option.sanitize,
+                getTooltipStyle: () => this._domStyle,
+                getTooltipActual: () => this._tooltipActual
+            }, [ tooltipSpec.className ], this.id);
         }
     }
     _removeTooltip() {
@@ -42,16 +43,22 @@ class DomTooltipHandler extends base_1.BaseTooltipHandler {
     _updateTooltip(visible, params, actualTooltip) {
         var _a;
         if (visible && this.model) {
-            params.changePositionOnly || (this.model.setTooltipActual(actualTooltip), this.model.setStyle(), 
-            this.model.setContent()), this.setVisibility(visible);
-            const {x: x = 0, y: y = 0} = null !== (_a = actualTooltip.position) && void 0 !== _a ? _a : {};
-            this.model.product.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+            params.changePositionOnly || (this._tooltipActual = actualTooltip, this._initStyle(), 
+            this.model.initAll(), this.model.setStyle(), this.model.setContent()), this.setVisibility(visible);
+            const {x: x = 0, y: y = 0} = null !== (_a = actualTooltip.position) && void 0 !== _a ? _a : {}, el = this.model.product;
+            el && (el.style.transform = `translate3d(${x}px, ${y}px, 0)`);
         } else this.setVisibility(visible);
     }
+    _initStyle() {
+        this._domStyle = (0, util_1.getDomStyles)(this._style, this._attributeCache);
+    }
     _getParentElement(spec) {
         var _a;
         return null !== (_a = this._container) && void 0 !== _a ? _a : super._getParentElement(spec);
     }
+    reInit() {
+        super.reInit(), this._initStyle();
+    }
 }
 
 exports.DomTooltipHandler = DomTooltipHandler;

package/cjs/component/tooltip/handler/dom/dom-tooltip-handler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/dom/dom-tooltip-handler.ts"],"names":[],"mappings":"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","file":"dom-tooltip-handler.js","sourcesContent":["import type { IToolTipActual } from '../../../../typings/tooltip';\nimport type { ITooltipSpec, TooltipHandlerParams } from '../../interface';\nimport { BaseTooltipHandler } from '../base';\nimport { getDomStyles } from './utils/style';\nimport type { IDomTooltipStyle } from './interface';\nimport { TooltipModel } from './model/tooltip-model';\nimport { domDocument } from './model/base-tooltip-model';\nimport { TOOLTIP_CONTAINER_EL_CLASS_NAME, TooltipHandlerType } from '../constants';\nimport type { Tooltip } from '../../tooltip';\n\n/**\n * The tooltip handler class.\n */\nexport class DomTooltipHandler extends BaseTooltipHandler {\n  type = TooltipHandlerType.dom;\n\n  protected _tooltipContainer: HTMLElement = globalThis.document?.body;\n  protected _domStyle: IDomTooltipStyle;\n  protected declare _container: HTMLDivElement;\n\n  protected model: TooltipModel;\n\n  getVisibility() {\n    return !!this.model?.getVisibility();\n  }\n\n  setVisibility(_value: boolean) {\n    // 这里做个节流\n    if (_value !== this.getVisibility()) {\n      this.model?.setVisibility(_value);\n    }\n  }\n\n  constructor(tooltipSpec: ITooltipSpec, tooltipId: string, component: Tooltip) {\n    super(tooltipSpec, tooltipId, component);\n\n    this._domStyle = getDomStyles(this._style);\n    this.initEl();\n  }\n\n  initEl() {\n    if (domDocument) {\n      const { parentElement } = this._tooltipSpec;\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.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME);\n        parentElement.appendChild(this._container);\n      }\n      this.model = new TooltipModel(\n        this._container,\n        { valueToHtml: this._option.sanitize },\n        [this._tooltipSpec.className],\n        this.id,\n        this._domStyle\n      );\n    }\n  }\n\n  protected _removeTooltip() {\n    this.model?.release();\n    this._container = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams, actualTooltip: IToolTipActual) {\n    if (!visible || !this.model) {\n      this.setVisibility(visible);\n    } else {\n      if (!params.changePositionOnly) {\n        this.model.setTooltipActual(actualTooltip);\n        this.model.setStyle();\n        this.model.setContent();\n      }\n      this.setVisibility(visible);\n\n      // 位置\n      const { x = 0, y = 0 } = actualTooltip.position ?? {};\n      const el = this.model.product;\n      // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance\n      el.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n    }\n  }\n\n  protected _getParentElement(spec: ITooltipSpec): HTMLElement {\n    return this._container ?? super._getParentElement(spec);\n  }\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/dom/dom-tooltip-handler.ts"],"names":[],"mappings":"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","file":"dom-tooltip-handler.js","sourcesContent":["import type { IToolTipActual } from '../../../../typings/tooltip';\nimport type { ITooltipSpec, TooltipHandlerParams } from '../../interface';\nimport { BaseTooltipHandler } from '../base';\nimport { getDomStyles } from './util';\nimport type { IDomTooltipStyle } from './interface';\nimport { TooltipModel } from './model/tooltip-model';\nimport { domDocument } from './model/base-tooltip-model';\nimport { TOOLTIP_CONTAINER_EL_CLASS_NAME, TooltipHandlerType } from '../constants';\nimport type { Tooltip } from '../../tooltip';\nimport type { Maybe } from '@visactor/vutils';\n\n/**\n * The tooltip handler class.\n */\nexport class DomTooltipHandler extends BaseTooltipHandler {\n  type = TooltipHandlerType.dom;\n\n  protected _tooltipContainer: HTMLElement = globalThis.document?.body;\n  protected _domStyle: IDomTooltipStyle;\n  protected _tooltipActual: IToolTipActual;\n  protected declare _container: Maybe<HTMLDivElement>;\n\n  protected model: TooltipModel;\n\n  getVisibility() {\n    return !!this.model?.getVisibility();\n  }\n\n  setVisibility(_value: boolean) {\n    // 这里做个节流\n    if (_value !== this.getVisibility()) {\n      this.model?.setVisibility(_value);\n    }\n  }\n\n  constructor(tooltipId: string, component: Tooltip) {\n    super(tooltipId, component);\n    this._initStyle();\n    this.initEl();\n  }\n\n  initEl() {\n    const tooltipSpec = this._component.getSpec();\n    const { parentElement } = tooltipSpec;\n    if (domDocument && parentElement) {\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.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME);\n        parentElement.appendChild(this._container);\n      }\n      this.model = new TooltipModel(\n        this._container,\n        {\n          valueToHtml: this._option.sanitize,\n          getTooltipStyle: () => this._domStyle,\n          getTooltipActual: () => this._tooltipActual\n        },\n        [tooltipSpec.className],\n        this.id\n      );\n    }\n  }\n\n  protected _removeTooltip() {\n    this.model?.release();\n    this._container = null;\n  }\n\n  protected _updateTooltip(visible: boolean, params: TooltipHandlerParams, actualTooltip: IToolTipActual) {\n    if (!visible || !this.model) {\n      this.setVisibility(visible);\n    } else {\n      if (!params.changePositionOnly) {\n        this._tooltipActual = actualTooltip;\n        this._initStyle();\n\n        this.model.initAll();\n        this.model.setStyle();\n        this.model.setContent();\n      }\n      this.setVisibility(visible);\n\n      // 位置\n      const { x = 0, y = 0 } = actualTooltip.position ?? {};\n      const el = this.model.product;\n      if (el) {\n        // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance\n        el.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n      }\n    }\n  }\n\n  protected _initStyle() {\n    this._domStyle = getDomStyles(this._style, this._attributeCache);\n  }\n\n  protected _getParentElement(spec: ITooltipSpec): HTMLElement {\n    return this._container ?? super._getParentElement(spec);\n  }\n\n  reInit() {\n    super.reInit();\n    this._initStyle();\n  }\n}\n"]}

package/cjs/component/tooltip/handler/dom/interface.d.ts

@@ -1,6 +1,8 @@
 import type { FontWeight, TextAlign } from '../../../../typings/visual';
 export interface IDomTooltipStyle {
     panel: IPadding & IBorder & {
+        width?: string;
+        height?: string;
         backgroundColor?: string;
         boxShadow?: string;
         maxWidth?: string;
@@ -10,12 +12,21 @@ export interface IDomTooltipStyle {
         transitionProperty?: string;
         transitionTimingFunction?: string;
     };
-    title?: ILabelStyle;
-    content: IMargin & {
-        key?: ILabelStyle;
-        value?: ILabelStyle;
-        shape?: IShapeStyle;
+    title: ILabelStyle;
+    content: IMargin;
+    shapeColumn: IMargin & {
+        width?: string;
+        item?: IShapeStyle;
     };
+    keyColumn: IMargin & {
+        width?: string;
+        item?: ILabelStyle;
+    };
+    valueColumn: IMargin & {
+        width?: string;
+        item?: ILabelStyle;
+    };
+    spaceRow: string;
 }
 export interface ILabelStyle extends IMargin {
     fontFamily?: string;

package/cjs/component/tooltip/handler/dom/interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/dom/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { FontWeight, TextAlign } from '../../../../typings/visual';\n\nexport interface IDomTooltipStyle {\n  panel: IPadding &\n    IBorder & {\n      backgroundColor?: string;\n      boxShadow?: string;\n      maxWidth?: string;\n      minWidth?: string;\n      pointerEvents?: 'auto' | 'none';\n      transitionDuration?: string;\n      transitionProperty?: string;\n      transitionTimingFunction?: string;\n    };\n  title?: ILabelStyle;\n  content: IMargin & {\n    key?: ILabelStyle;\n    value?: ILabelStyle;\n    shape?: IShapeStyle;\n  };\n}\n\nexport interface ILabelStyle extends IMargin {\n  fontFamily?: string;\n  fontSize?: string;\n  color?: string;\n  textAlign?: TextAlign;\n  lineHeight?: string;\n  fontWeight?: FontWeight;\n}\n\nexport interface IShapeStyle extends IMargin {\n  width?: string;\n  height?: string;\n}\n\nexport interface IMargin {\n  marginLeft?: string;\n  marginRight?: string;\n  marginTop?: string;\n  marginBottom?: string;\n}\n\nexport interface IPadding {\n  paddingTop?: string;\n  paddingRight?: string;\n  paddingBottom?: string;\n  paddingLeft?: string;\n}\n\nexport interface IBorder {\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/dom/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { FontWeight, TextAlign } from '../../../../typings/visual';\n\nexport interface IDomTooltipStyle {\n  panel: IPadding &\n    IBorder & {\n      width?: string;\n      height?: string;\n      backgroundColor?: string;\n      boxShadow?: string;\n      maxWidth?: string;\n      minWidth?: string;\n      pointerEvents?: 'auto' | 'none';\n      transitionDuration?: string;\n      transitionProperty?: string;\n      transitionTimingFunction?: string;\n    };\n  title: ILabelStyle;\n  content: IMargin;\n  shapeColumn: IMargin & {\n    width?: string;\n    item?: IShapeStyle;\n  };\n  keyColumn: IMargin & {\n    width?: string;\n    item?: ILabelStyle;\n  };\n  valueColumn: IMargin & {\n    width?: string;\n    item?: ILabelStyle;\n  };\n  spaceRow: string;\n}\n\nexport interface ILabelStyle extends IMargin {\n  fontFamily?: string;\n  fontSize?: string;\n  color?: string;\n  textAlign?: TextAlign;\n  lineHeight?: string;\n  fontWeight?: FontWeight;\n}\n\nexport interface IShapeStyle extends IMargin {\n  width?: string;\n  height?: string;\n}\n\nexport interface IMargin {\n  marginLeft?: string;\n  marginRight?: string;\n  marginTop?: string;\n  marginBottom?: string;\n}\n\nexport interface IPadding {\n  paddingTop?: string;\n  paddingRight?: string;\n  paddingBottom?: string;\n  paddingLeft?: string;\n}\n\nexport interface IBorder {\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n}\n"]}

package/cjs/component/tooltip/handler/dom/model/base-tooltip-model.d.ts

@@ -1,8 +1,6 @@
-import type { IToolTipActual, IToolTipLineActual } from '../../../../../typings';
-import type { IDomTooltipStyle } from '../interface';
+import type { Maybe } from '@visactor/vutils';
+import type { IToolTipLineActual } from '../../../../../typings';
 import type { ITooltipModelOption } from './interface';
-export declare const TOOLTIP_MAX_COUNT = 20;
-export declare const TOOLTIP_EMPTY_STRING = "";
 export declare const domDocument: Document | undefined;
 export declare class BaseTooltipModel {
     static type: string;
@@ -10,23 +8,19 @@ export declare class BaseTooltipModel {
     readonly type: string;
     readonly parent: BaseTooltipModel | HTMLElement;
     readonly childIndex: number;
-    protected _tooltipActual: IToolTipActual | null;
-    setTooltipActual(tooltipActual: IToolTipActual): void;
-    protected _tooltipStyle: IDomTooltipStyle | null;
-    setTooltipStyle(tooltipStyle: IDomTooltipStyle): void;
     protected _option: ITooltipModelOption;
     setOption(option: ITooltipModelOption): void;
-    protected _renderContentCache: IToolTipLineActual[];
+    protected _renderContentCache: IToolTipLineActual[] | null;
     children: Record<number, BaseTooltipModel>;
-    product: HTMLElement;
+    product: Maybe<HTMLElement>;
     getParentEl(): HTMLElement;
-    constructor(parent: BaseTooltipModel | HTMLElement, option: ITooltipModelOption, childIndex?: number, tooltipStyle?: IDomTooltipStyle, tooltipActual?: IToolTipActual);
+    constructor(parent: BaseTooltipModel | HTMLElement, option: ITooltipModelOption, childIndex?: number);
     init(classList?: string[], id?: string): void;
+    initAll(): void;
     setStyle(style?: Partial<CSSStyleDeclaration>): void;
     setContent(content?: any): void;
     setVisibility(visibility: boolean): void;
     getVisibility(): boolean;
     release(): void;
-    protected createElement(tag: keyof HTMLElementTagNameMap, classList?: string[], style?: Partial<CSSStyleDeclaration>, id?: string): HTMLImageElement | HTMLElement | HTMLCanvasElement | HTMLSlotElement | HTMLObjectElement | HTMLProgressElement | HTMLLinkElement | HTMLAreaElement | HTMLMapElement | HTMLStyleElement | HTMLTitleElement | HTMLLabelElement | HTMLAnchorElement | HTMLDataElement | HTMLSelectElement | HTMLTrackElement | HTMLTimeElement | HTMLSourceElement | HTMLLegendElement | HTMLInputElement | HTMLOutputElement | HTMLHtmlElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLLIElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLScriptElement | HTMLSpanElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTableRowElement | HTMLUListElement | HTMLVideoElement;
-    protected getRenderContent(): IToolTipLineActual[];
+    protected createElement(tag: keyof HTMLElementTagNameMap, classList?: string[], style?: Partial<CSSStyleDeclaration>, id?: string): HTMLElement;
 }

package/cjs/component/tooltip/handler/dom/model/base-tooltip-model.js

@@ -2,35 +2,28 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.BaseTooltipModel = exports.domDocument = exports.TOOLTIP_EMPTY_STRING = exports.TOOLTIP_MAX_COUNT = void 0, 
-exports.TOOLTIP_MAX_COUNT = 20, exports.TOOLTIP_EMPTY_STRING = "", exports.domDocument = globalThis.document;
+}), exports.BaseTooltipModel = exports.domDocument = void 0, exports.domDocument = globalThis.document;
 
 class BaseTooltipModel {
     static isInstance(obj) {
         return !!obj && obj.type === BaseTooltipModel.type;
     }
-    setTooltipActual(tooltipActual) {
-        this._tooltipActual = tooltipActual, this._renderContentCache = null, this.init(), 
-        Object.values(this.children).forEach((c => c.setTooltipActual(tooltipActual)));
-    }
-    setTooltipStyle(tooltipStyle) {
-        this._tooltipStyle = tooltipStyle, this.init(), Object.values(this.children).forEach((c => c.setTooltipStyle(tooltipStyle)));
-    }
     setOption(option) {
         this._option = option, Object.values(this.children).forEach((c => c.setOption(option)));
     }
     getParentEl() {
         return BaseTooltipModel.isInstance(this.parent) ? this.parent.product : this.parent;
     }
-    constructor(parent, option, childIndex, tooltipStyle, tooltipActual) {
-        this.type = BaseTooltipModel.type, this._tooltipActual = null, this._tooltipStyle = null, 
-        this._renderContentCache = null, this.children = {}, this.parent = parent, this._option = option, 
-        this.childIndex = null != childIndex ? childIndex : 0, this._tooltipStyle = tooltipStyle, 
-        this._tooltipActual = tooltipActual;
+    constructor(parent, option, childIndex) {
+        this.type = BaseTooltipModel.type, this._renderContentCache = null, this.children = {}, 
+        this.parent = parent, this._option = option, this.childIndex = null != childIndex ? childIndex : 0;
     }
     init(classList, id) {}
+    initAll() {
+        this.init(), Object.values(this.children).forEach((c => c.initAll()));
+    }
     setStyle(style) {
-        style && Object.keys(style).forEach((key => {
+        this.product && style && Object.keys(style).forEach((key => {
             this.product.style[key] !== style[key] && (this.product.style[key] = style[key]);
         }));
     }
@@ -45,15 +38,16 @@ class BaseTooltipModel {
         return !!(null === (_b = null === (_a = this.product) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.visibility) && "hidden" !== this.product.style.visibility;
     }
     release() {
-        Object.values(this.children).forEach((c => c.release())), this.children = {}, this.product && (this.getParentEl().removeChild(this.product), 
+        var _a;
+        Object.values(this.children).forEach((c => c.release())), this.children = {}, this.product && (null === (_a = this.getParentEl()) || void 0 === _a || _a.removeChild(this.product), 
         this.product = null);
     }
     createElement(tag, classList, style, id) {
-        const element = exports.domDocument.createElement(tag);
+        const element = null === exports.domDocument || void 0 === exports.domDocument ? void 0 : exports.domDocument.createElement(tag), parentEl = this.getParentEl();
+        if (!element || !parentEl) return;
         classList && element.classList.add(...classList), style && Object.keys(style).forEach((key => {
             element.style[key] = style[key];
         })), id && (element.id = id);
-        const parentEl = this.getParentEl();
         let ptr = this.childIndex;
         if (BaseTooltipModel.isInstance(this.parent)) {
             let nextChildIndex = Number.MAX_VALUE;
@@ -66,15 +60,6 @@ class BaseTooltipModel {
         return ptr >= parentEl.children.length ? parentEl.appendChild(element) : parentEl.insertBefore(element, parentEl.children[ptr]), 
         element;
     }
-    getRenderContent() {
-        if (!this._tooltipActual) return [];
-        if (this._renderContentCache) return this._renderContentCache;
-        const {content: originContent = []} = this._tooltipActual, renderContent = originContent.slice(0, exports.TOOLTIP_MAX_COUNT);
-        return (null == renderContent ? void 0 : renderContent[exports.TOOLTIP_MAX_COUNT - 1]) && (renderContent[exports.TOOLTIP_MAX_COUNT - 1] = Object.assign(Object.assign({}, renderContent[exports.TOOLTIP_MAX_COUNT - 1]), {
-            key: "其他",
-            value: "..."
-        })), renderContent;
-    }
 }
 
 exports.BaseTooltipModel = BaseTooltipModel, BaseTooltipModel.type = "tooltipModel";

package/cjs/component/tooltip/handler/dom/model/base-tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/dom/model/base-tooltip-model.ts"],"names":[],"mappings":"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","file":"base-tooltip-model.js","sourcesContent":["import type { IToolTipActual, IToolTipLineActual } from '../../../../../typings';\nimport type { IDomTooltipStyle } from '../interface';\nimport type { ITooltipModelOption } from './interface';\n\nexport const TOOLTIP_MAX_COUNT = 20;\nexport const TOOLTIP_EMPTY_STRING = '';\n\nexport const domDocument: Document | undefined = globalThis.document;\n\nexport class BaseTooltipModel {\n  static type = 'tooltipModel';\n  static isInstance(obj: any): obj is BaseTooltipModel {\n    if (!obj) {\n      return false;\n    }\n    return obj.type === BaseTooltipModel.type;\n  }\n  readonly type = BaseTooltipModel.type;\n\n  readonly parent: BaseTooltipModel | HTMLElement;\n  readonly childIndex: number;\n\n  protected _tooltipActual: IToolTipActual | null = null;\n  setTooltipActual(tooltipActual: IToolTipActual) {\n    this._tooltipActual = tooltipActual;\n    this._renderContentCache = null; // 清除缓存\n    this.init();\n    Object.values(this.children).forEach(c => c.setTooltipActual(tooltipActual));\n  }\n\n  protected _tooltipStyle: IDomTooltipStyle | null = null;\n  setTooltipStyle(tooltipStyle: IDomTooltipStyle) {\n    this._tooltipStyle = tooltipStyle;\n    this.init();\n    Object.values(this.children).forEach(c => c.setTooltipStyle(tooltipStyle));\n  }\n\n  protected _option: ITooltipModelOption;\n  setOption(option: ITooltipModelOption) {\n    this._option = option;\n    Object.values(this.children).forEach(c => c.setOption(option));\n  }\n\n  protected _renderContentCache: IToolTipLineActual[] = null;\n\n  children: Record<number, BaseTooltipModel> = {};\n\n  product: HTMLElement;\n\n  getParentEl() {\n    if (BaseTooltipModel.isInstance(this.parent)) {\n      return this.parent.product;\n    }\n    return this.parent;\n  }\n\n  constructor(\n    parent: BaseTooltipModel | HTMLElement,\n    option: ITooltipModelOption,\n    childIndex?: number,\n    tooltipStyle?: IDomTooltipStyle,\n    tooltipActual?: IToolTipActual\n  ) {\n    this.parent = parent;\n    this._option = option;\n    this.childIndex = childIndex ?? 0;\n    this._tooltipStyle = tooltipStyle;\n    this._tooltipActual = tooltipActual;\n  }\n\n  init(classList?: string[], id?: string) {\n    // do nothing\n  }\n\n  setStyle(style?: Partial<CSSStyleDeclaration>) {\n    if (style) {\n      Object.keys(style).forEach(key => {\n        if (this.product.style[key] !== style[key]) {\n          this.product.style[key] = style[key];\n        }\n      });\n    }\n  }\n\n  setContent(content?: any) {\n    // do nothing\n  }\n\n  setVisibility(visibility: boolean) {\n    if (!this.product) {\n      return;\n    }\n    const { style } = this.product;\n    if (visibility) {\n      style.visibility = 'visible';\n    } else {\n      style.visibility = 'hidden';\n    }\n    Object.values(this.children).forEach(c => c.setVisibility(visibility));\n  }\n\n  getVisibility() {\n    if (!this.product?.style?.visibility) {\n      return false;\n    }\n    return this.product.style.visibility !== 'hidden';\n  }\n\n  release() {\n    Object.values(this.children).forEach(c => c.release());\n    this.children = {};\n    if (this.product) {\n      this.getParentEl().removeChild(this.product);\n      this.product = null;\n    }\n  }\n\n  protected createElement(\n    tag: keyof HTMLElementTagNameMap,\n    classList?: string[],\n    style?: Partial<CSSStyleDeclaration>,\n    id?: string\n  ) {\n    const element = domDocument.createElement(tag);\n    if (classList) {\n      element.classList.add(...classList);\n    }\n    if (style) {\n      Object.keys(style).forEach(key => {\n        element.style[key] = style[key];\n      });\n    }\n    if (id) {\n      element.id = id;\n    }\n\n    const parentEl = this.getParentEl();\n    let ptr = this.childIndex;\n    if (BaseTooltipModel.isInstance(this.parent)) {\n      // 按照自身 childIndex 插入对应位置\n      let nextChildIndex = Number.MAX_VALUE;\n      for (let i = 0; i < parentEl.children.length; i++) {\n        const childModel = Object.values(this.parent.children).find(c => c.product === parentEl.children[i]);\n        if (childModel.childIndex > this.childIndex && childModel.childIndex < nextChildIndex) {\n          nextChildIndex = childModel.childIndex;\n          ptr = i;\n        }\n      }\n    }\n    if (ptr >= parentEl.children.length) {\n      parentEl.appendChild(element);\n    } else {\n      parentEl.insertBefore(element, parentEl.children[ptr]);\n    }\n    return element;\n  }\n\n  protected getRenderContent() {\n    if (!this._tooltipActual) {\n      return [];\n    }\n    if (this._renderContentCache) {\n      return this._renderContentCache;\n    }\n\n    const { content: originContent = [] } = this._tooltipActual;\n    const renderContent = originContent.slice(0, TOOLTIP_MAX_COUNT);\n\n    // 最后一行被转化为省略\n    if (renderContent?.[TOOLTIP_MAX_COUNT - 1]) {\n      renderContent[TOOLTIP_MAX_COUNT - 1] = {\n        ...renderContent[TOOLTIP_MAX_COUNT - 1],\n        key: '其他',\n        value: '...'\n      };\n    }\n\n    return renderContent;\n  }\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/dom/model/base-tooltip-model.ts"],"names":[],"mappings":"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","file":"base-tooltip-model.js","sourcesContent":["import type { Maybe } from '@visactor/vutils';\nimport type { IToolTipLineActual } from '../../../../../typings';\nimport type { ITooltipModelOption } from './interface';\n\nexport const domDocument: Document | undefined = globalThis.document;\n\nexport class BaseTooltipModel {\n  static type = 'tooltipModel';\n  static isInstance(obj: any): obj is BaseTooltipModel {\n    if (!obj) {\n      return false;\n    }\n    return obj.type === BaseTooltipModel.type;\n  }\n  readonly type = BaseTooltipModel.type;\n\n  readonly parent: BaseTooltipModel | HTMLElement;\n  readonly childIndex: number;\n\n  protected _option: ITooltipModelOption;\n  setOption(option: ITooltipModelOption) {\n    this._option = option;\n    Object.values(this.children).forEach(c => c.setOption(option));\n  }\n\n  protected _renderContentCache: IToolTipLineActual[] | null = null;\n\n  children: Record<number, BaseTooltipModel> = {};\n\n  product: Maybe<HTMLElement>;\n\n  getParentEl() {\n    if (BaseTooltipModel.isInstance(this.parent)) {\n      return this.parent.product;\n    }\n    return this.parent;\n  }\n\n  constructor(parent: BaseTooltipModel | HTMLElement, option: ITooltipModelOption, childIndex?: number) {\n    this.parent = parent;\n    this._option = option;\n    this.childIndex = childIndex ?? 0;\n  }\n\n  init(classList?: string[], id?: string) {\n    // do nothing\n  }\n\n  initAll() {\n    this.init();\n    Object.values(this.children).forEach(c => c.initAll());\n  }\n\n  setStyle(style?: Partial<CSSStyleDeclaration>) {\n    if (!this.product || !style) {\n      return;\n    }\n    Object.keys(style).forEach(key => {\n      if (this.product!.style[key] !== style[key]) {\n        this.product!.style[key] = style[key];\n      }\n    });\n  }\n\n  setContent(content?: any) {\n    // do nothing\n  }\n\n  setVisibility(visibility: boolean) {\n    if (!this.product) {\n      return;\n    }\n    const { style } = this.product;\n    if (visibility) {\n      style.visibility = 'visible';\n    } else {\n      style.visibility = 'hidden';\n    }\n    Object.values(this.children).forEach(c => c.setVisibility(visibility));\n  }\n\n  getVisibility() {\n    if (!this.product?.style?.visibility) {\n      return false;\n    }\n    return this.product.style.visibility !== 'hidden';\n  }\n\n  release() {\n    Object.values(this.children).forEach(c => c.release());\n    this.children = {};\n    if (this.product) {\n      this.getParentEl()?.removeChild(this.product);\n      this.product = null;\n    }\n  }\n\n  protected createElement(\n    tag: keyof HTMLElementTagNameMap,\n    classList?: string[],\n    style?: Partial<CSSStyleDeclaration>,\n    id?: string\n  ) {\n    const element = domDocument?.createElement(tag);\n    const parentEl = this.getParentEl();\n    if (!element || !parentEl) {\n      return undefined;\n    }\n\n    if (classList) {\n      element.classList.add(...classList);\n    }\n    if (style) {\n      Object.keys(style).forEach(key => {\n        element.style[key] = style[key];\n      });\n    }\n    if (id) {\n      element.id = id;\n    }\n\n    let ptr = this.childIndex;\n    if (BaseTooltipModel.isInstance(this.parent)) {\n      // 按照自身 childIndex 插入对应位置\n      let nextChildIndex = Number.MAX_VALUE;\n      for (let i = 0; i < parentEl.children.length; i++) {\n        const childModel = Object.values(this.parent.children).find(c => c.product === parentEl.children[i])!;\n        if (childModel.childIndex > this.childIndex && childModel.childIndex < nextChildIndex) {\n          nextChildIndex = childModel.childIndex;\n          ptr = i;\n        }\n      }\n    }\n    if (ptr >= parentEl.children.length) {\n      parentEl.appendChild(element);\n    } else {\n      parentEl.insertBefore(element, parentEl.children[ptr]);\n    }\n    return element;\n  }\n}\n"]}

package/cjs/component/tooltip/handler/dom/model/content-column-model.d.ts

@@ -1,12 +1,22 @@
 import { BaseTooltipModel } from './base-tooltip-model';
 import type { ITooltipModelOption } from './interface';
-import type { IDomTooltipStyle } from '../interface';
-import type { IToolTipActual } from '../../../../../typings';
 export type ContentColumnType = 'shape-box' | 'key-box' | 'value-box';
 export declare class ContentColumnModel extends BaseTooltipModel {
     readonly className: ContentColumnType;
-    constructor(parent: BaseTooltipModel | HTMLElement, option: ITooltipModelOption, className: ContentColumnType, childIndex?: number, tooltipStyle?: IDomTooltipStyle, tooltipActual?: IToolTipActual);
+    constructor(parent: BaseTooltipModel | HTMLElement, option: ITooltipModelOption, className: ContentColumnType, childIndex?: number);
     init(): void;
     setStyle(): void;
     setContent(): void;
+    protected _getContentColumnStyle(): (import("../interface").IMargin & {
+        width?: string;
+        item?: import("../interface").ILabelStyle;
+    }) | {
+        display?: string;
+        marginLeft?: string;
+        marginRight?: string;
+        marginTop?: string;
+        marginBottom?: string;
+        width?: string;
+        item?: import("../interface").IShapeStyle;
+    };
 }

package/cjs/component/tooltip/handler/dom/model/content-column-model.js

@@ -4,26 +4,27 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.ContentColumnModel = void 0;
 
-const vutils_1 = require("@visactor/vutils"), style_constants_1 = require("./style-constants"), base_tooltip_model_1 = require("./base-tooltip-model"), shape_model_1 = require("./shape-model"), text_model_1 = require("./text-model");
+const vutils_1 = require("@visactor/vutils"), style_constants_1 = require("./style-constants"), base_tooltip_model_1 = require("./base-tooltip-model"), shape_model_1 = require("./shape-model"), text_model_1 = require("./text-model"), constants_1 = require("../../constants");
 
 class ContentColumnModel extends base_tooltip_model_1.BaseTooltipModel {
-    constructor(parent, option, className, childIndex, tooltipStyle, tooltipActual) {
-        super(parent, option, childIndex, tooltipStyle, tooltipActual), this.className = className;
+    constructor(parent, option, className, childIndex) {
+        super(parent, option, childIndex), this.className = className;
     }
     init() {
+        var _a, _b;
         this.product || (this.product = this.createElement("div", [ this.className ]));
-        const renderContent = this.getRenderContent();
+        const renderContent = null !== (_b = null === (_a = this._option.getTooltipActual()) || void 0 === _a ? void 0 : _a.content) && void 0 !== _b ? _b : [];
         if ("shape-box" !== this.className || renderContent.some((c => c.hasShape && c.shapeType))) {
             Object.keys(this.children).forEach((key => {
                 const i = (0, vutils_1.toNumber)(key);
                 i >= renderContent.length && (this.children[i].release(), delete this.children[i]);
             }));
             for (let i = 0; i < renderContent.length; i++) if (!this.children[i]) if ("key-box" === this.className || "value-box" === this.className) {
-                const text = new text_model_1.TextModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);
+                const text = new text_model_1.TextModel(this.product, this._option, i);
                 text.init([ this.className.substring(0, this.className.indexOf("-")) ], void 0, "div"), 
                 this.children[i] = text;
             } else if ("shape-box" === this.className) {
-                const shape = new shape_model_1.ShapeModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);
+                const shape = new shape_model_1.ShapeModel(this.product, this._option, i);
                 shape.init([ "shape" ], void 0, "div"), this.children[i] = shape;
             }
         } else Object.keys(this.children).forEach((key => {
@@ -32,58 +33,77 @@ class ContentColumnModel extends base_tooltip_model_1.BaseTooltipModel {
         }));
     }
     setStyle() {
-        if (!this._tooltipStyle) return;
-        super.setStyle((0, vutils_1.merge)({}, style_constants_1.defaultShapeBoxStyle, this._tooltipStyle.content));
-        const renderContent = this.getRenderContent();
+        var _a, _b;
+        const tooltipStyle = this._option.getTooltipStyle();
+        super.setStyle((0, vutils_1.merge)({}, style_constants_1.defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));
+        const renderContent = null !== (_b = null === (_a = this._option.getTooltipActual()) || void 0 === _a ? void 0 : _a.content) && void 0 !== _b ? _b : [];
         renderContent.forEach(((line, i) => {
-            var _a, _b;
+            var _a, _b, _c;
             let childStyle = {};
             if ("key-box" === this.className) {
-                const keyContent = line.key;
-                childStyle = (0, vutils_1.merge)({}, style_constants_1.defaultKeyStyle, Object.assign({
+                const {key: key, isKeyAdaptive: isKeyAdaptive} = line;
+                childStyle = (0, vutils_1.merge)({}, isKeyAdaptive ? style_constants_1.defaultAdaptiveKeyStyle : style_constants_1.defaultKeyStyle, Object.assign({
                     height: 100 / renderContent.length + "%"
-                }, this._tooltipStyle.content.key));
-                (0, vutils_1.isString)(keyContent) && "" !== (null === (_a = null == keyContent ? void 0 : keyContent.trim) || void 0 === _a ? void 0 : _a.call(keyContent)) || (0, 
-                vutils_1.isNumber)(keyContent) || childStyle.visibility ? childStyle.visibility = "visible" : childStyle.visibility = "hidden", 
+                }, tooltipStyle.keyColumn.item));
+                (0, vutils_1.isString)(key) && "" !== (null === (_a = null == key ? void 0 : key.trim) || void 0 === _a ? void 0 : _a.call(key)) || (0, 
+                vutils_1.isNumber)(key) || childStyle.visibility ? childStyle.visibility = "visible" : childStyle.visibility = "hidden", 
                 this.children[i].setStyle(childStyle);
             } else if ("value-box" === this.className) childStyle = (0, vutils_1.merge)({}, style_constants_1.defaultValueStyle, Object.assign({
                 height: 100 / renderContent.length + "%"
-            }, this._tooltipStyle.content.value)), this.children[i].setStyle(childStyle); else if ("shape-box" === this.className) {
-                childStyle = this._tooltipStyle.content.shape;
+            }, tooltipStyle.valueColumn.item)), this.children[i].setStyle(childStyle); else if ("shape-box" === this.className) {
+                childStyle = tooltipStyle.shapeColumn.item;
                 const childContent = {
                     hasShape: line.hasShape,
                     shapeType: line.shapeType,
-                    size: this._tooltipStyle.content.shape.width,
+                    size: null === (_b = tooltipStyle.shapeColumn.item) || void 0 === _b ? void 0 : _b.width,
                     color: line.shapeColor,
                     hollow: line.shapeHollow
                 };
-                null === (_b = this.children[i]) || void 0 === _b || _b.setStyle(childStyle, childContent);
+                null === (_c = this.children[i]) || void 0 === _c || _c.setStyle(childStyle, childContent);
             }
         }));
     }
     setContent() {
-        if (!this._tooltipStyle) return;
-        this.getRenderContent().forEach(((line, i) => {
-            var _a, _b, _c;
+        var _a, _b;
+        const tooltipStyle = this._option.getTooltipStyle();
+        (null !== (_b = null === (_a = this._option.getTooltipActual()) || void 0 === _a ? void 0 : _a.content) && void 0 !== _b ? _b : []).forEach(((line, i) => {
+            var _a, _b, _c, _d;
             let childContent;
             if ("key-box" === this.className) {
                 const keyContent = line.key;
                 childContent = (0, vutils_1.isString)(keyContent) && "" !== (null === (_a = null == keyContent ? void 0 : keyContent.trim) || void 0 === _a ? void 0 : _a.call(keyContent)) || (0, 
-                vutils_1.isNumber)(keyContent) ? keyContent : base_tooltip_model_1.TOOLTIP_EMPTY_STRING;
+                vutils_1.isNumber)(keyContent) ? keyContent : constants_1.TOOLTIP_EMPTY_STRING;
             } else if ("value-box" === this.className) {
                 const valueContent = line.value;
                 childContent = (0, vutils_1.isString)(valueContent) && "" !== (null === (_b = null == valueContent ? void 0 : valueContent.trim) || void 0 === _b ? void 0 : _b.call(valueContent)) || (0, 
-                vutils_1.isNumber)(valueContent) ? valueContent : base_tooltip_model_1.TOOLTIP_EMPTY_STRING;
+                vutils_1.isNumber)(valueContent) ? valueContent : constants_1.TOOLTIP_EMPTY_STRING;
             } else "shape-box" === this.className && (childContent = {
                 hasShape: line.hasShape,
                 shapeType: line.shapeType,
-                size: this._tooltipStyle.content.shape.width,
+                size: null === (_c = tooltipStyle.shapeColumn.item) || void 0 === _c ? void 0 : _c.width,
                 color: line.shapeColor,
                 hollow: line.shapeHollow
             });
-            null === (_c = this.children[i]) || void 0 === _c || _c.setContent(childContent);
+            null === (_d = this.children[i]) || void 0 === _d || _d.setContent(childContent);
         }));
     }
+    _getContentColumnStyle() {
+        var _a, _b;
+        const tooltipStyle = this._option.getTooltipStyle();
+        switch (this.className) {
+          case "shape-box":
+            const renderContent = null !== (_b = null === (_a = this._option.getTooltipActual()) || void 0 === _a ? void 0 : _a.content) && void 0 !== _b ? _b : [];
+            return Object.assign(Object.assign({}, tooltipStyle.shapeColumn), "shape-box" !== this.className || renderContent.some((c => c.hasShape && c.shapeType)) ? {} : {
+                display: "none"
+            });
+
+          case "key-box":
+            return tooltipStyle.keyColumn;
+
+          case "value-box":
+            return tooltipStyle.valueColumn;
+        }
+    }
 }
 
 exports.ContentColumnModel = ContentColumnModel;