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

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

@@ -6,6 +6,15 @@ export const TOOLTIP_EL_CLASS_NAME = "vchart-tooltip-element";
 
 export const TOOLTIP_CONTAINER_EL_CLASS_NAME = "vchart-tooltip-container";
 
+export const TOOLTIP_MAX_LINE_COUNT = 20;
+
+export const TOOLTIP_EMPTY_STRING = "";
+
+export const TOOLTIP_OTHERS_LINE = {
+    key: "其他",
+    value: "..."
+};
+
 export const DEFAULT_OPTIONS = {
     offsetX: 10,
     offsetY: 10,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAC9D,MAAM,CAAC,MAAM,+BAA+B,GAAG,0BAA0B,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG;IAI7B,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;IAOX,QAAQ,EAAE,UAAU;CACrB,CAAC;AAMF,MAAM,OAAO,kBAAkB;;AACtB,sBAAG,GAAG,GAAG,MAAM,sBAAsB,CAAC;AACtC,yBAAM,GAAG,GAAG,MAAM,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,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAC9D,MAAM,CAAC,MAAM,+BAA+B,GAAG,0BAA0B,CAAC;AAC1E,MAAM,CAAC,MAAM,sBAAsB,GAAG,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAEjC,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,KAAK;CACS,CAAC;AAExB,MAAM,CAAC,MAAM,eAAe,GAAG;IAI7B,OAAO,EAAE,EAAE;IAKX,OAAO,EAAE,EAAE;IAOX,QAAQ,EAAE,UAAU;CACrB,CAAC;AAMF,MAAM,OAAO,kBAAkB;;AACtB,sBAAG,GAAG,GAAG,MAAM,sBAAsB,CAAC;AACtC,yBAAM,GAAG,GAAG,MAAM,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/esm/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/esm/component/tooltip/handler/dom/dom-tooltip-handler.js

@@ -1,6 +1,6 @@
 import { BaseTooltipHandler } from "../base";
 
-import { getDomStyles } from "./utils/style";
+import { getDomStyles } from "./util";
 
 import { TooltipModel } from "./model/tooltip-model";
 
@@ -17,14 +17,14 @@ export class DomTooltipHandler extends 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 = TooltipHandlerType.dom, this._tooltipContainer = null === (_a = globalThis.document) || void 0 === _a ? void 0 : _a.body, 
-        this._domStyle = getDomStyles(this._style), this.initEl();
+        super(tooltipId, component), this.type = TooltipHandlerType.dom, this._tooltipContainer = null === (_a = globalThis.document) || void 0 === _a ? void 0 : _a.body, 
+        this._initStyle(), this.initEl();
     }
     initEl() {
-        if (domDocument) {
-            const {parentElement: parentElement} = this._tooltipSpec;
+        const tooltipSpec = this._component.getSpec(), {parentElement: parentElement} = tooltipSpec;
+        if (domDocument && parentElement) {
             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;
@@ -32,8 +32,10 @@ export class DomTooltipHandler extends BaseTooltipHandler {
             this._container || (this._container = domDocument.createElement("div"), this._container.style.position = "relative", 
             this._container.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME), parentElement.appendChild(this._container)), 
             this.model = new 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() {
@@ -43,15 +45,21 @@ export class DomTooltipHandler extends 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 = 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();
+    }
 }
 //# sourceMappingURL=dom-tooltip-handler.js.map

package/esm/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/esm/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/esm/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/esm/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 | HTMLTitleElement | HTMLLabelElement | HTMLStyleElement | HTMLAnchorElement | HTMLDataElement | HTMLSelectElement | HTMLMapElement | HTMLOutputElement | HTMLSourceElement | HTMLHtmlElement | HTMLTrackElement | HTMLLegendElement | HTMLInputElement | 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 | HTMLTimeElement | HTMLTableRowElement | HTMLUListElement | HTMLVideoElement;
-    protected getRenderContent(): IToolTipLineActual[];
+    protected createElement(tag: keyof HTMLElementTagNameMap, classList?: string[], style?: Partial<CSSStyleDeclaration>, id?: string): HTMLElement;
 }

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

@@ -1,35 +1,25 @@
-export const TOOLTIP_MAX_COUNT = 20;
-
-export const TOOLTIP_EMPTY_STRING = "";
-
 export const domDocument = globalThis.document;
 
 export 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]);
         }));
     }
@@ -44,15 +34,16 @@ export 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 = domDocument.createElement(tag);
+        const element = null == domDocument ? void 0 : 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;
@@ -65,15 +56,6 @@ export 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, 20);
-        return (null == renderContent ? void 0 : renderContent[19]) && (renderContent[19] = Object.assign(Object.assign({}, renderContent[19]), {
-            key: "其他",
-            value: "..."
-        })), renderContent;
-    }
 }
 
 BaseTooltipModel.type = "tooltipModel";

package/esm/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/esm/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/esm/component/tooltip/handler/dom/model/content-column-model.js

@@ -1,31 +1,34 @@
 import { isNumber, isString, merge, toNumber } from "@visactor/vutils";
 
-import { defaultKeyStyle, defaultShapeBoxStyle, defaultValueStyle } from "./style-constants";
+import { defaultKeyStyle, defaultContentColumnStyle, defaultValueStyle, defaultAdaptiveKeyStyle } from "./style-constants";
 
-import { BaseTooltipModel, TOOLTIP_EMPTY_STRING } from "./base-tooltip-model";
+import { BaseTooltipModel } from "./base-tooltip-model";
 
 import { ShapeModel } from "./shape-model";
 
 import { TextModel } from "./text-model";
 
+import { TOOLTIP_EMPTY_STRING } from "../../constants";
+
 export class ContentColumnModel extends 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 = 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 TextModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);
+                const text = new 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 ShapeModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);
+                const shape = new ShapeModel(this.product, this._option, i);
                 shape.init([ "shape" ], void 0, "div"), this.children[i] = shape;
             }
         } else Object.keys(this.children).forEach((key => {
@@ -34,38 +37,40 @@ export class ContentColumnModel extends BaseTooltipModel {
         }));
     }
     setStyle() {
-        if (!this._tooltipStyle) return;
-        super.setStyle(merge({}, defaultShapeBoxStyle, this._tooltipStyle.content));
-        const renderContent = this.getRenderContent();
+        var _a, _b;
+        const tooltipStyle = this._option.getTooltipStyle();
+        super.setStyle(merge({}, 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 = merge({}, defaultKeyStyle, Object.assign({
+                const {key: key, isKeyAdaptive: isKeyAdaptive} = line;
+                childStyle = merge({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign({
                     height: 100 / renderContent.length + "%"
-                }, this._tooltipStyle.content.key));
-                isString(keyContent) && "" !== (null === (_a = null == keyContent ? void 0 : keyContent.trim) || void 0 === _a ? void 0 : _a.call(keyContent)) || isNumber(keyContent) || childStyle.visibility ? childStyle.visibility = "visible" : childStyle.visibility = "hidden", 
+                }, tooltipStyle.keyColumn.item));
+                isString(key) && "" !== (null === (_a = null == key ? void 0 : key.trim) || void 0 === _a ? void 0 : _a.call(key)) || isNumber(key) || childStyle.visibility ? childStyle.visibility = "visible" : childStyle.visibility = "hidden", 
                 this.children[i].setStyle(childStyle);
             } else if ("value-box" === this.className) childStyle = merge({}, 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;
@@ -76,12 +81,29 @@ export class ContentColumnModel extends BaseTooltipModel {
             } 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;
+        }
+    }
 }
 //# sourceMappingURL=content-column-model.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/component/tooltip/handler/dom/model/content-column-model.ts"],"names":[],"mappings":"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","file":"content-column-model.js","sourcesContent":["import { isNumber, isString, merge, toNumber } from '@visactor/vutils';\nimport { defaultKeyStyle, defaultShapeBoxStyle, defaultValueStyle } from './style-constants';\nimport { BaseTooltipModel, TOOLTIP_EMPTY_STRING } from './base-tooltip-model';\nimport type { ITooltipModelOption } from './interface';\nimport type { IShapeSvgOption } from './shape-model';\n// eslint-disable-next-line no-duplicate-imports\nimport { ShapeModel } from './shape-model';\nimport { TextModel } from './text-model';\nimport type { IDomTooltipStyle } from '../interface';\nimport type { IToolTipActual } from '../../../../../typings';\n\nexport type ContentColumnType = 'shape-box' | 'key-box' | 'value-box';\n\nexport class ContentColumnModel extends BaseTooltipModel {\n  readonly className: ContentColumnType;\n\n  constructor(\n    parent: BaseTooltipModel | HTMLElement,\n    option: ITooltipModelOption,\n    className: ContentColumnType,\n    childIndex?: number,\n    tooltipStyle?: IDomTooltipStyle,\n    tooltipActual?: IToolTipActual\n  ) {\n    super(parent, option, childIndex, tooltipStyle, tooltipActual);\n    this.className = className;\n  }\n\n  init(): void {\n    if (!this.product) {\n      this.product = this.createElement('div', [this.className]);\n    }\n    const renderContent = this.getRenderContent();\n\n    if (this.className === 'shape-box' && !renderContent.some(c => c.hasShape && c.shapeType)) {\n      // 当有一行配有形状的时候，其他行要对齐。如果没有一行配有形状，则删除所有的行\n      Object.keys(this.children).forEach(key => {\n        const i = toNumber(key);\n        this.children[i].release();\n        delete this.children[i];\n      });\n    } else {\n      // 删除多余的行\n      Object.keys(this.children).forEach(key => {\n        const i = toNumber(key);\n        if (i >= renderContent.length) {\n          this.children[i].release();\n          delete this.children[i];\n        }\n      });\n      // 新增没有的行\n      for (let i = 0; i < renderContent.length; i++) {\n        if (!this.children[i]) {\n          if (this.className === 'key-box' || this.className === 'value-box') {\n            const text = new TextModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);\n            text.init([this.className.substring(0, this.className.indexOf('-'))], undefined, 'div');\n            this.children[i] = text;\n          } else if (this.className === 'shape-box') {\n            const shape = new ShapeModel(this.product, this._option, i, this._tooltipStyle, this._tooltipActual);\n            shape.init(['shape'], undefined, 'div');\n            this.children[i] = shape;\n          }\n        }\n      }\n    }\n  }\n\n  setStyle() {\n    if (!this._tooltipStyle) {\n      return;\n    }\n\n    super.setStyle(merge({}, defaultShapeBoxStyle, this._tooltipStyle.content));\n\n    const renderContent = this.getRenderContent();\n    renderContent.forEach((line, i) => {\n      let childStyle: any = {};\n      if (this.className === 'key-box') {\n        const keyContent = line.key;\n        childStyle = merge({}, defaultKeyStyle, {\n          height: `${100 / renderContent.length}%`,\n          ...this._tooltipStyle.content.key\n        });\n        const hasContent = (isString(keyContent) && keyContent?.trim?.() !== '') || isNumber(keyContent);\n        if (!hasContent && !childStyle.visibility) {\n          childStyle.visibility = 'hidden';\n        } else {\n          childStyle.visibility = 'visible';\n        }\n        (this.children[i] as TextModel).setStyle(childStyle);\n      } else if (this.className === 'value-box') {\n        childStyle = merge({}, defaultValueStyle, {\n          height: `${100 / renderContent.length}%`,\n          ...this._tooltipStyle.content.value\n        });\n        (this.children[i] as TextModel).setStyle(childStyle);\n      } else if (this.className === 'shape-box') {\n        childStyle = this._tooltipStyle.content.shape;\n        const childContent = {\n          hasShape: line.hasShape,\n          shapeType: line.shapeType,\n          size: this._tooltipStyle.content.shape.width,\n          color: line.shapeColor,\n          hollow: line.shapeHollow\n        } as IShapeSvgOption;\n        (this.children[i] as ShapeModel)?.setStyle(childStyle, childContent);\n      }\n    });\n  }\n\n  setContent(): void {\n    if (!this._tooltipStyle) {\n      return;\n    }\n\n    const renderContent = this.getRenderContent();\n    renderContent.forEach((line, i) => {\n      let childContent: any;\n      if (this.className === 'key-box') {\n        const keyContent = line.key;\n        if ((isString(keyContent) && keyContent?.trim?.() !== '') || isNumber(keyContent)) {\n          childContent = keyContent;\n        } else {\n          childContent = TOOLTIP_EMPTY_STRING;\n        }\n      } else if (this.className === 'value-box') {\n        const valueContent = line.value;\n        if ((isString(valueContent) && valueContent?.trim?.() !== '') || isNumber(valueContent)) {\n          childContent = valueContent;\n        } else {\n          childContent = TOOLTIP_EMPTY_STRING;\n        }\n      } else if (this.className === 'shape-box') {\n        childContent = {\n          hasShape: line.hasShape,\n          shapeType: line.shapeType,\n          size: this._tooltipStyle.content.shape.width,\n          color: line.shapeColor,\n          hollow: line.shapeHollow\n        } as IShapeSvgOption;\n      }\n      this.children[i]?.setContent(childContent);\n    });\n  }\n}\n"]}
+{"version":3,"sources":["../src/component/tooltip/handler/dom/model/content-column-model.ts"],"names":[],"mappings":"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","file":"content-column-model.js","sourcesContent":["import { isNumber, isString, merge, toNumber } from '@visactor/vutils';\nimport {\n  defaultKeyStyle,\n  defaultContentColumnStyle,\n  defaultValueStyle,\n  defaultAdaptiveKeyStyle\n} from './style-constants';\nimport { BaseTooltipModel } from './base-tooltip-model';\nimport type { ITooltipModelOption } from './interface';\nimport type { IShapeSvgOption } from './shape-model';\n// eslint-disable-next-line no-duplicate-imports\nimport { ShapeModel } from './shape-model';\nimport { TextModel } from './text-model';\nimport { TOOLTIP_EMPTY_STRING } from '../../constants';\n\nexport type ContentColumnType = 'shape-box' | 'key-box' | 'value-box';\n\nexport class ContentColumnModel extends BaseTooltipModel {\n  readonly className: ContentColumnType;\n\n  constructor(\n    parent: BaseTooltipModel | HTMLElement,\n    option: ITooltipModelOption,\n    className: ContentColumnType,\n    childIndex?: number\n  ) {\n    super(parent, option, childIndex);\n    this.className = className;\n  }\n\n  init(): void {\n    if (!this.product) {\n      this.product = this.createElement('div', [this.className]);\n    }\n    const renderContent = this._option.getTooltipActual()?.content ?? [];\n\n    if (this.className === 'shape-box' && !renderContent.some(c => c.hasShape && c.shapeType)) {\n      // 当有一行配有形状的时候，其他行要对齐。如果没有一行配有形状，则删除所有的行\n      Object.keys(this.children).forEach(key => {\n        const i = toNumber(key);\n        this.children[i].release();\n        delete this.children[i];\n      });\n    } else {\n      // 删除多余的行\n      Object.keys(this.children).forEach(key => {\n        const i = toNumber(key);\n        if (i >= renderContent.length) {\n          this.children[i].release();\n          delete this.children[i];\n        }\n      });\n      // 新增没有的行\n      for (let i = 0; i < renderContent.length; i++) {\n        if (!this.children[i]) {\n          if (this.className === 'key-box' || this.className === 'value-box') {\n            const text = new TextModel(this.product!, this._option, i);\n            text.init([this.className.substring(0, this.className.indexOf('-'))], undefined, 'div');\n            this.children[i] = text;\n          } else if (this.className === 'shape-box') {\n            const shape = new ShapeModel(this.product!, this._option, i);\n            shape.init(['shape'], undefined, 'div');\n            this.children[i] = shape;\n          }\n        }\n      }\n    }\n  }\n\n  setStyle() {\n    const tooltipStyle = this._option.getTooltipStyle();\n\n    super.setStyle(merge({}, defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));\n\n    const renderContent = this._option.getTooltipActual()?.content ?? [];\n    renderContent.forEach((line, i) => {\n      let childStyle: any = {};\n      if (this.className === 'key-box') {\n        const { key, isKeyAdaptive } = line;\n        childStyle = merge({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, {\n          height: `${100 / renderContent.length}%`,\n          ...tooltipStyle.keyColumn.item\n        });\n        const hasContent = (isString(key) && key?.trim?.() !== '') || isNumber(key);\n        if (!hasContent && !childStyle.visibility) {\n          childStyle.visibility = 'hidden';\n        } else {\n          childStyle.visibility = 'visible';\n        }\n        (this.children[i] as TextModel).setStyle(childStyle);\n      } else if (this.className === 'value-box') {\n        childStyle = merge({}, defaultValueStyle, {\n          height: `${100 / renderContent.length}%`,\n          ...tooltipStyle.valueColumn.item\n        });\n        (this.children[i] as TextModel).setStyle(childStyle);\n      } else if (this.className === 'shape-box') {\n        childStyle = tooltipStyle.shapeColumn.item;\n        const childContent = {\n          hasShape: line.hasShape,\n          shapeType: line.shapeType,\n          size: tooltipStyle.shapeColumn.item?.width,\n          color: line.shapeColor,\n          hollow: line.shapeHollow\n        } as IShapeSvgOption;\n        (this.children[i] as ShapeModel)?.setStyle(childStyle, childContent);\n      }\n    });\n  }\n\n  setContent(): void {\n    const tooltipStyle = this._option.getTooltipStyle();\n\n    const renderContent = this._option.getTooltipActual()?.content ?? [];\n    renderContent.forEach((line, i) => {\n      let childContent: any;\n      if (this.className === 'key-box') {\n        const keyContent = line.key;\n        if ((isString(keyContent) && keyContent?.trim?.() !== '') || isNumber(keyContent)) {\n          childContent = keyContent;\n        } else {\n          childContent = TOOLTIP_EMPTY_STRING;\n        }\n      } else if (this.className === 'value-box') {\n        const valueContent = line.value;\n        if ((isString(valueContent) && valueContent?.trim?.() !== '') || isNumber(valueContent)) {\n          childContent = valueContent;\n        } else {\n          childContent = TOOLTIP_EMPTY_STRING;\n        }\n      } else if (this.className === 'shape-box') {\n        childContent = {\n          hasShape: line.hasShape,\n          shapeType: line.shapeType,\n          size: tooltipStyle.shapeColumn.item?.width,\n          color: line.shapeColor,\n          hollow: line.shapeHollow\n        } as IShapeSvgOption;\n      }\n      this.children[i]?.setContent(childContent);\n    });\n  }\n\n  protected _getContentColumnStyle() {\n    const tooltipStyle = this._option.getTooltipStyle();\n\n    switch (this.className) {\n      case 'shape-box':\n        const renderContent = this._option.getTooltipActual()?.content ?? [];\n        return {\n          ...tooltipStyle.shapeColumn,\n          ...(this.className === 'shape-box' && !renderContent.some(c => c.hasShape && c.shapeType)\n            ? { display: 'none' }\n            : {})\n        };\n      case 'key-box':\n        return tooltipStyle.keyColumn;\n      case 'value-box':\n        return tooltipStyle.valueColumn;\n    }\n  }\n}\n"]}

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

@@ -1,9 +1,10 @@
 import { BaseTooltipModel } from './base-tooltip-model';
 import { ContentColumnModel } from './content-column-model';
+import type { Maybe } from '@visactor/vutils';
 export declare class ContentModel extends BaseTooltipModel {
-    shapeBox: ContentColumnModel;
-    keyBox: ContentColumnModel;
-    valueBox: ContentColumnModel;
+    shapeBox: Maybe<ContentColumnModel>;
+    keyBox: Maybe<ContentColumnModel>;
+    valueBox: Maybe<ContentColumnModel>;
     init(): void;
     private _initShapeBox;
     private _initKeyBox;