@visactor/vrender-components 0.13.5 → 0.13.6

package/cjs/label/symbol.d.ts

@@ -1,12 +1,10 @@
-import type { IBoundsLike } from '@visactor/vutils';
+import { IBoundsLike } from '@visactor/vutils';
+import type { ITextGraphicAttribute } from '@visactor/vrender';
 import type { SymbolLabelAttrs } from './type';
 import { LabelBase } from './base';
 export declare class SymbolLabel extends LabelBase<SymbolLabelAttrs> {
     name: string;
     static defaultAttributes: Partial<SymbolLabelAttrs>;
     constructor(attributes: SymbolLabelAttrs);
-    protected labeling(textBounds: IBoundsLike, graphicBounds: IBoundsLike, position?: string, offset?: number): {
-        x: number;
-        y: number;
-    };
+    protected labeling(textBounds: IBoundsLike, graphicBounds: IBoundsLike, position?: string, offset?: number): Partial<ITextGraphicAttribute> | undefined;
 }

package/cjs/label/symbol.js.map

@@ -1 +1 @@
-{"version":3,"sources":["label/symbol.ts"],"names":[],"mappings":"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","file":"symbol.js","sourcesContent":["import type { IBoundsLike } from '@visactor/vutils';\nimport { merge } from '@visactor/vutils';\nimport type { ITextGraphicAttribute } from '@visactor/vrender';\nimport type { SymbolLabelAttrs } from './type';\nimport { LabelBase } from './base';\n\nexport class SymbolLabel extends LabelBase<SymbolLabelAttrs> {\n  name = 'symbol-label';\n\n  static defaultAttributes: Partial<SymbolLabelAttrs> = {\n    textStyle: {\n      fontSize: 12,\n      fill: '#000',\n      textAlign: 'center',\n      textBaseline: 'middle',\n      boundsPadding: [-1, 0, -1, 0] // to ignore the textBound buf\n    },\n    position: 'top',\n    offset: 5,\n    pickable: false\n  };\n\n  constructor(attributes: SymbolLabelAttrs) {\n    super(merge({}, SymbolLabel.defaultAttributes, attributes));\n  }\n\n  protected labeling(textBounds: IBoundsLike, graphicBounds: IBoundsLike, position = 'top', offset = 0) {\n    if (!textBounds) {\n      return;\n    }\n\n    const { x1, y1, x2, y2 } = textBounds;\n    const width = Math.abs(x2 - x1);\n    const height = Math.abs(y2 - y1);\n\n    const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;\n    const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;\n\n    let sx = 0;\n    let sy = 0;\n    let offsetX = 0;\n    let offsetY = 0;\n    if (graphicBounds) {\n      offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;\n      offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;\n    }\n\n    const angle = {\n      'top-right': -235,\n      'top-left': 235,\n      'bottom-right': 45,\n      'bottom-left': -45\n    };\n\n    switch (position) {\n      case 'top':\n        sy = -1;\n        break;\n      case 'bottom':\n        sy = 1;\n        break;\n      case 'left':\n        sx = -1;\n        break;\n      case 'right':\n        sx = 1;\n        break;\n      case 'bottom-left':\n      case 'bottom-right':\n      case 'top-left':\n      case 'top-right':\n        sx = Math.sin(angle[position] * (Math.PI / 180));\n        sy = Math.cos(angle[position] * (Math.PI / 180));\n        break;\n      case 'center':\n        sx = 0;\n        sy = 0;\n        break;\n    }\n\n    const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);\n    const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);\n\n    return { x, y };\n  }\n}\n"]}
+{"version":3,"sources":["label/symbol.ts"],"names":[],"mappings":"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","file":"symbol.js","sourcesContent":["import { merge, IBoundsLike } from '@visactor/vutils';\nimport type { ITextGraphicAttribute } from '@visactor/vrender';\nimport type { SymbolLabelAttrs } from './type';\nimport { LabelBase } from './base';\n\nexport class SymbolLabel extends LabelBase<SymbolLabelAttrs> {\n  name = 'symbol-label';\n\n  static defaultAttributes: Partial<SymbolLabelAttrs> = {\n    textStyle: {\n      fontSize: 12,\n      fill: '#000',\n      textAlign: 'center',\n      textBaseline: 'middle',\n      boundsPadding: [-1, 0, -1, 0] // to ignore the textBound buf\n    },\n    position: 'top',\n    offset: 5,\n    pickable: false\n  };\n\n  constructor(attributes: SymbolLabelAttrs) {\n    super(merge({}, SymbolLabel.defaultAttributes, attributes));\n  }\n\n  protected labeling(\n    textBounds: IBoundsLike,\n    graphicBounds: IBoundsLike,\n    position = 'top',\n    offset = 0\n  ): Partial<ITextGraphicAttribute> | undefined {\n    if (!textBounds) {\n      return;\n    }\n\n    const { x1, y1, x2, y2 } = textBounds;\n    const width = Math.abs(x2 - x1);\n    const height = Math.abs(y2 - y1);\n\n    const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;\n    const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;\n\n    let sx = 0;\n    let sy = 0;\n    let offsetX = 0;\n    let offsetY = 0;\n    if (graphicBounds) {\n      offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;\n      offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;\n    }\n\n    const angle = {\n      'top-right': -235,\n      'top-left': 235,\n      'bottom-right': 45,\n      'bottom-left': -45\n    };\n\n    switch (position) {\n      case 'top':\n        sy = -1;\n        break;\n      case 'bottom':\n        sy = 1;\n        break;\n      case 'left':\n        sx = -1;\n        break;\n      case 'right':\n        sx = 1;\n        break;\n      case 'bottom-left':\n      case 'bottom-right':\n      case 'top-left':\n      case 'top-right':\n        sx = Math.sin(angle[position] * (Math.PI / 180));\n        sy = Math.cos(angle[position] * (Math.PI / 180));\n        break;\n      case 'center':\n        sx = 0;\n        sy = 0;\n        break;\n    }\n\n    const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);\n    const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);\n\n    return { x, y };\n  }\n}\n"]}

package/cjs/label/type.d.ts

@@ -1,21 +1,17 @@
-import type { EasingType, IGraphic, IGroupGraphicAttribute, ITextGraphicAttribute, Text } from '@visactor/vrender';
+import type { EasingType, IGroupGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender';
 export type LabelItemStateStyle<T> = {
     hover?: T;
     hover_reverse?: T;
     selected?: T;
     selected_reverse?: T;
 };
-export type LabelItem = {
-    id?: string;
-    data?: any;
-    [key: string]: any;
-} & ITextGraphicAttribute;
 export interface BaseLabelAttrs extends IGroupGraphicAttribute {
     type: string;
-    baseMarkGroupName: string;
     select?: boolean;
     hover?: boolean;
-    data: LabelItem[];
+    data: Functional<(ITextGraphicAttribute & Record<string, any>)[]>;
+    sort?: (graphicA: any, graphicB: any) => number;
+    baseMarkGroupName?: string;
     textStyle?: Partial<ITextGraphicAttribute>;
     state?: LabelItemStateStyle<ITextGraphicAttribute>;
     position?: Functional<string>;
@@ -23,9 +19,6 @@ export interface BaseLabelAttrs extends IGroupGraphicAttribute {
     overlap?: OverlapAttrs | false;
     smartInvert?: SmartInvertAttrs | false;
     animation?: ILabelAnimation | false;
-    dataFilter?: (data: LabelItem[]) => LabelItem[];
-    customLayoutFunc?: (data: LabelItem[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[];
-    customOverlapFunc?: (label: Text[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[];
 }
 export interface OverlapAttrs {
     size?: {
@@ -82,6 +75,9 @@ export interface DataLabelAttrs extends IGroupGraphicAttribute {
     };
 }
 export type Functional<T> = T | ((data: any) => T);
+export interface ILabelGraphicAttribute extends ITextGraphicAttribute {
+    _relatedIndex?: number;
+}
 export interface ILabelAnimation {
     mode?: 'same-time' | 'after' | 'after-all';
     duration?: number;

package/cjs/label/type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["label/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { EasingType, IGraphic, IGroupGraphicAttribute, ITextGraphicAttribute, Text } from '@visactor/vrender';\n\nexport type LabelItemStateStyle<T> = {\n  hover?: T;\n  hover_reverse?: T;\n  selected?: T;\n  selected_reverse?: T;\n};\n\nexport type LabelItem = {\n  // 用于动画\n  id?: string;\n  // 原始数据\n  data?: any;\n  [key: string]: any;\n} & ITextGraphicAttribute;\n\nexport interface BaseLabelAttrs extends IGroupGraphicAttribute {\n  type: string;\n  /**\n   *  图元 group 名称\n   */\n  baseMarkGroupName: string;\n  /**\n   * 是否开启选中交互\n   * @default false\n   */\n  select?: boolean;\n  /**\n   * 是否开启 hover 交互\n   * @default false\n   */\n  hover?: boolean;\n  /**\n   * 标签数据\n   */\n  data: LabelItem[];\n\n  /** 文本样式，优先级低于 data */\n  textStyle?: Partial<ITextGraphicAttribute>;\n\n  /** 文本交互样式 */\n  state?: LabelItemStateStyle<ITextGraphicAttribute>;\n\n  /** 标签默认位置 */\n  position?: Functional<string>;\n\n  /** 偏移量 */\n  offset?: number;\n\n  /** 是否开启防重叠\n   * @default true\n   */\n  overlap?: OverlapAttrs | false;\n\n  /** 智能反色 */\n  smartInvert?: SmartInvertAttrs | false;\n\n  /** 动画配置 */\n  animation?: ILabelAnimation | false;\n\n  // 排序 or 删减\n  dataFilter?: (data: LabelItem[]) => LabelItem[];\n\n  /** 自定义布局函数\n   * @description 当配置了 customLayoutFunc 后，默认布局和防重叠逻辑将不再生效。（overlap/position/offset不生效）\n   */\n  customLayoutFunc?: (data: LabelItem[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[];\n\n  /** 自定义标签躲避函数\n   * @description 当配置了 customOverlapFunc 后，会根据 position 和 offset 进行初始布局。配置的防重叠逻辑(overlap)不生效。\n   */\n  customOverlapFunc?: (label: Text[], getRelatedGraphic: (data: LabelItem) => IGraphic) => Text[];\n}\n\nexport interface OverlapAttrs {\n  /**\n   * 防重叠的区域大小\n   */\n  size?: { width: number; height: number };\n\n  /**\n   * 发生重叠后，是否隐藏标签\n   * @default true\n   */\n  hideOnHit?: boolean;\n\n  /**\n   * 是否约束标签在指定 size 的范围内。开启后若标签被区域裁剪，会向内收缩。\n   * @default true\n   */\n  clampForce?: boolean;\n\n  /**\n   * 是否躲避基础图元\n   * @default false\n   */\n  avoidBaseMark?: boolean;\n\n  /**\n   * 发生重叠后的躲避策略\n   */\n  strategy?: Strategy[];\n}\n\nexport interface SmartInvertAttrs {\n  /**\n   * 文本类型\n   * 包含普通文本和大文本，对应不同的对比度标准，label默认为普通文本\n   * 'normalText' ｜ 'largeText'\n   * @default 'normalText'\n   */\n  textType?: string;\n  /**\n   * 自定义对比度阈值\n   */\n  contrastRatiosThreshold?: number;\n  /**\n   * 自定义备选label颜色\n   */\n  alternativeColors?: string | string[];\n}\n\nexport type PositionStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则考虑 position 内的备选位置。\n   */\n  type: 'position';\n  position?: Functional<LabelPosition[]>;\n};\n\nexport type BoundStrategy = {\n  /**\n   * 标签配置在图形内部时使用。\n   * 当图形大小不足以放下标签，则考虑 position 内的备选位置。\n   */\n  type: 'bound';\n  position?: Functional<LabelPosition[]>;\n};\n\nexport type MoveYStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则根据 offset 在Y方向上寻找位置。\n   */\n  type: 'moveY';\n  /**\n   * Y方向上的尝试的位置偏移量\n   */\n  offset: Functional<number[]>;\n};\n\nexport type MoveXStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则根据 offset 在X方向上寻找位置。\n   */\n  type: 'moveX';\n  /**\n   * X方向上的尝试的位置偏移量\n   */\n  offset: Functional<number[]>;\n};\n\nexport type Strategy = PositionStrategy | BoundStrategy | MoveYStrategy | MoveXStrategy;\n\nexport type LabelPosition = SymbolLabelAttrs['position'] | RectLabelAttrs['position'];\n\nexport interface SymbolLabelAttrs extends BaseLabelAttrs {\n  type: 'symbol';\n\n  /**\n   * 标签位置\n   * @default 'top'\n   */\n  position?: Functional<\n    'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center'\n  >;\n}\n\nexport interface RectLabelAttrs extends BaseLabelAttrs {\n  type: 'rect';\n\n  /**\n   *  图元 group 名称\n   */\n  baseMarkGroupName: string;\n\n  /**\n   * 标签位置\n   * @default 'top'\n   */\n  position?: Functional<\n    'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left'\n  >;\n}\n\nexport interface LineLabelAttrs extends BaseLabelAttrs {\n  type: 'line';\n\n  /**\n   *  图元 group 名称\n   */\n  baseMarkGroupName: string;\n\n  /**\n   * 标签位置\n   * @default 'end'\n   */\n  position?: Functional<'start' | 'end'>;\n}\n\nexport interface DataLabelAttrs extends IGroupGraphicAttribute {\n  dataLabels: (RectLabelAttrs | SymbolLabelAttrs)[];\n  /**\n   * 防重叠的区域大小\n   */\n  size: { width: number; height: number };\n}\n\nexport type Functional<T> = T | ((data: any) => T);\n\nexport interface ILabelAnimation {\n  mode?: 'same-time' | 'after' | 'after-all';\n  duration?: number;\n  delay?: number;\n  easing?: EasingType;\n  /** 是否开启 increaseCount 动画\n   * @default true\n   */\n  increaseEffect?: boolean;\n}\n"]}
+{"version":3,"sources":["label/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { EasingType, IGroupGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender';\nimport type { Bounds } from '@visactor/vutils';\n\nexport type LabelItemStateStyle<T> = {\n  hover?: T;\n  hover_reverse?: T;\n  selected?: T;\n  selected_reverse?: T;\n};\n\nexport interface BaseLabelAttrs extends IGroupGraphicAttribute {\n  type: string;\n  /**\n   * 是否开启选中交互\n   * @default false\n   */\n  select?: boolean;\n  /**\n   * 是否开启 hover 交互\n   * @default false\n   */\n  hover?: boolean;\n  /**\n   * 标签数据\n   */\n  data: Functional<(ITextGraphicAttribute & Record<string, any>)[]>;\n\n  sort?: (graphicA: any, graphicB: any) => number;\n\n  /**\n   *  图元 group 名称\n   *  如果不配置，需要在 data 里指定标签定位 x/y\n   */\n  baseMarkGroupName?: string;\n\n  /** 文本样式，优先级低于 data */\n  textStyle?: Partial<ITextGraphicAttribute>;\n\n  /** 文本交互样式 */\n  state?: LabelItemStateStyle<ITextGraphicAttribute>;\n\n  /** 标签默认位置 */\n  position?: Functional<string>;\n\n  /** 偏移量 */\n  offset?: number;\n\n  /** 是否开启防重叠\n   * @default true\n   */\n  overlap?: OverlapAttrs | false;\n\n  /** 智能反色 */\n  smartInvert?: SmartInvertAttrs | false;\n\n  /** 动画配置 */\n  animation?: ILabelAnimation | false;\n}\n\nexport interface OverlapAttrs {\n  /**\n   * 防重叠的区域大小\n   */\n  size?: { width: number; height: number };\n\n  /**\n   * 发生重叠后，是否隐藏标签\n   * @default true\n   */\n  hideOnHit?: boolean;\n\n  /**\n   * 是否约束标签在指定 size 的范围内。开启后若标签被区域裁剪，会向内收缩。\n   * @default true\n   */\n  clampForce?: boolean;\n\n  /**\n   * 是否躲避基础图元\n   * @default false\n   */\n  avoidBaseMark?: boolean;\n\n  /**\n   * 发生重叠后的躲避策略\n   */\n  strategy?: Strategy[];\n}\n\nexport interface SmartInvertAttrs {\n  /**\n   * 文本类型\n   * 包含普通文本和大文本，对应不同的对比度标准，label默认为普通文本\n   * 'normalText' ｜ 'largeText'\n   * @default 'normalText'\n   */\n  textType?: string;\n  /**\n   * 自定义对比度阈值\n   */\n  contrastRatiosThreshold?: number;\n  /**\n   * 自定义备选label颜色\n   */\n  alternativeColors?: string | string[];\n}\n\nexport type PositionStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则考虑 position 内的备选位置。\n   */\n  type: 'position';\n  position?: Functional<LabelPosition[]>;\n};\n\nexport type BoundStrategy = {\n  /**\n   * 标签配置在图形内部时使用。\n   * 当图形大小不足以放下标签，则考虑 position 内的备选位置。\n   */\n  type: 'bound';\n  position?: Functional<LabelPosition[]>;\n};\n\nexport type MoveYStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则根据 offset 在Y方向上寻找位置。\n   */\n  type: 'moveY';\n  /**\n   * Y方向上的尝试的位置偏移量\n   */\n  offset: Functional<number[]>;\n};\n\nexport type MoveXStrategy = {\n  /**\n   * 可选位置策略。\n   * 若默认位置没有足够的空间放置标签，则根据 offset 在X方向上寻找位置。\n   */\n  type: 'moveX';\n  /**\n   * X方向上的尝试的位置偏移量\n   */\n  offset: Functional<number[]>;\n};\n\nexport type Strategy = PositionStrategy | BoundStrategy | MoveYStrategy | MoveXStrategy;\n\nexport type LabelPosition = SymbolLabelAttrs['position'] | RectLabelAttrs['position'];\n\nexport interface SymbolLabelAttrs extends BaseLabelAttrs {\n  type: 'symbol';\n\n  /**\n   * 标签位置\n   * @default 'top'\n   */\n  position?: Functional<\n    'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center'\n  >;\n}\n\nexport interface RectLabelAttrs extends BaseLabelAttrs {\n  type: 'rect';\n\n  /**\n   *  图元 group 名称\n   */\n  baseMarkGroupName: string;\n\n  /**\n   * 标签位置\n   * @default 'top'\n   */\n  position?: Functional<\n    'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left'\n  >;\n}\n\nexport interface LineLabelAttrs extends BaseLabelAttrs {\n  type: 'line';\n\n  /**\n   *  图元 group 名称\n   */\n  baseMarkGroupName: string;\n\n  /**\n   * 标签位置\n   * @default 'end'\n   */\n  position?: Functional<'start' | 'end'>;\n}\n\nexport interface DataLabelAttrs extends IGroupGraphicAttribute {\n  dataLabels: (RectLabelAttrs | SymbolLabelAttrs)[];\n  /**\n   * 防重叠的区域大小\n   */\n  size: { width: number; height: number };\n}\n\nexport type Functional<T> = T | ((data: any) => T);\n\nexport interface ILabelGraphicAttribute extends ITextGraphicAttribute {\n  _relatedIndex?: number;\n}\n\nexport interface ILabelAnimation {\n  mode?: 'same-time' | 'after' | 'after-all';\n  duration?: number;\n  delay?: number;\n  easing?: EasingType;\n  /** 是否开启 increaseCount 动画\n   * @default true\n   */\n  increaseEffect?: boolean;\n}\n"]}

package/dist/index.js

@@ -1514,28 +1514,6 @@
                 return DefaultPositions;
         }
     }
-    function clampText(text, width, height) {
-        const { x1, x2, y1, y2 } = text.AABBBounds;
-        const minX = Math.min(x1, x2);
-        const maxX = Math.max(x1, x2);
-        const minY = Math.min(y1, y2);
-        const maxY = Math.max(y1, y2);
-        let dx = 0;
-        let dy = 0;
-        if (minX < 0 && maxX - minX <= width) {
-            dx = -minX;
-        }
-        else if (maxX > width && minX - (maxX - width) >= 0) {
-            dx = width - maxX;
-        }
-        if (minY < 0 && maxY - minY <= height) {
-            dy = -minY;
-        }
-        else if (maxY > height && minY - (maxY - height) >= 0) {
-            dy = height - maxY;
-        }
-        return { dx, dy };
-    }
 
     const fadeIn = (textAttribute = {}) => {
         return {
@@ -1586,37 +1564,17 @@
         setBitmapTool(bmpTool) {
             this._bmpTool = bmpTool;
         }
-        _graphicToText;
-        _idToGraphic;
+        _relationMap;
+        _prevRelationMap;
+        _textMap;
         onAfterLabelOverlap;
         _lastHover;
         _lastSelect;
         _enableAnimation;
         render() {
-            this._prepare();
-            const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
-            let data = this.attribute.data;
-            if (vutils.isFunction(dataFilter)) {
-                data = dataFilter(data);
-            }
-            let labels;
-            if (vutils.isFunction(customLayoutFunc)) {
-                labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
-            }
-            else {
-                labels = this.layout(data);
-                if (vutils.isFunction(customOverlapFunc)) {
-                    labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
-                }
-                else {
-                    if (overlap !== false) {
-                        labels = this._overlapping(labels);
-                    }
-                }
-            }
-            if (smartInvert !== false) {
-                this._smartInvert(labels);
-            }
+            const currentBaseMarks = this._checkMarks();
+            const labels = this.layout(currentBaseMarks);
+            this._smartInvert(labels);
             this._renderLabels(labels);
         }
         _bindEvent(target) {
@@ -1693,7 +1651,7 @@
             this._setStates(text);
             return text;
         }
-        _prepare() {
+        _checkMarks() {
             const baseMarks = this.getBaseMarks();
             const currentBaseMarks = [];
             baseMarks.forEach(mark => {
@@ -1701,58 +1659,59 @@
                     currentBaseMarks.push(mark);
                 }
             });
-            this._idToGraphic?.clear();
-            this._baseMarks = currentBaseMarks;
-            if (!currentBaseMarks || currentBaseMarks.length === 0) {
-                return;
+            this._prevRelationMap = new Map(this._relationMap);
+            this._relationMap?.clear();
+            return currentBaseMarks;
+        }
+        layout(currentMarks) {
+            const { textStyle, position, offset } = this.attribute;
+            let { data } = this.attribute;
+            if (vutils.isFunction(data)) {
+                data = data({});
             }
-            const { data } = this.attribute;
             if (!data || data.length === 0) {
-                return;
+                return [];
             }
-            if (!this._idToGraphic) {
-                this._idToGraphic = new Map();
+            let labels = [];
+            if (vutils.isFunction(this.attribute.sort) && currentMarks && currentMarks.length) {
+                currentMarks = currentMarks.sort(this.attribute.sort);
             }
-            for (let i = 0; i < currentBaseMarks.length; i++) {
-                const textData = data[i];
-                const baseMark = currentBaseMarks[i];
-                if (textData && baseMark) {
-                    if (!vutils.isValid(textData.id)) {
-                        textData.id = `vrender-component-${this.name}-${i}`;
-                    }
-                    this._idToGraphic.set(textData.id, baseMark);
-                }
+            if (!this._relationMap) {
+                this._relationMap = new Map();
             }
-        }
-        layout(data = []) {
-            const { textStyle = {}, position, offset } = this.attribute;
-            const labels = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
-                const baseMark = this._idToGraphic.get(textData.id);
+                const baseMark = currentMarks?.[i];
                 const labelAttribute = {
                     ...textStyle,
-                    ...textData
+                    ...textData,
+                    _relatedIndex: i
                 };
-                const text = this._createLabelText(labelAttribute);
-                const textBounds = this.getGraphicBounds(text);
-                const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
-                const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                if (!textLocation) {
-                    continue;
+                this._relationMap.set(i, baseMark);
+                if (textData) {
+                    const text = vrender.createText(labelAttribute);
+                    text.update();
+                    const textBounds = this.getGraphicBounds(text);
+                    const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
+                    const textAttributes = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
+                    if (!textAttributes) {
+                        continue;
+                    }
+                    labelAttribute.x = textAttributes.x;
+                    labelAttribute.y = textAttributes.y;
+                    labels.push(labelAttribute);
                 }
-                labelAttribute.x = textLocation.x;
-                labelAttribute.y = textLocation.y;
-                text.setAttributes(textLocation);
-                labels.push(text);
+            }
+            this._baseMarks = currentMarks;
+            if (this.attribute.overlap !== false) {
+                labels = this.overlapping(labels, this.attribute.overlap);
             }
             return labels;
         }
-        _overlapping(labels) {
+        overlapping(labels, option = {}) {
             if (labels.length === 0) {
                 return [];
             }
-            const option = this.attribute.overlap;
             const result = [];
             const baseMarkGroup = this.getBaseMarkGroup();
             const size = option.size ?? {
@@ -1775,32 +1734,18 @@
                 if (labels[i].visible === false) {
                     continue;
                 }
-                const text = labels[i];
-                const baseMark = this._idToGraphic.get(text.attribute.id);
+                const text = vrender.createText(labels[i]);
+                const baseMark = this._baseMarks?.[i];
                 text.update();
                 if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push(text);
+                        result.push({ ...text.attribute });
                         continue;
                     }
                     if (checkBounds && baseMark?.AABBBounds && canPlaceInside(text.AABBBounds, baseMark?.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push(text);
-                        continue;
-                    }
-                }
-                if (clampForce) {
-                    const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
-                    if (!(dx === 0 && dy === 0) &&
-                        canPlace(bmpTool, bitmap, {
-                            x1: text.AABBBounds.x1 + dx,
-                            x2: text.AABBBounds.x2 + dx,
-                            y1: text.AABBBounds.y1 + dy,
-                            y2: text.AABBBounds.y2 + dy
-                        })) {
-                        text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
-                        result.push(text);
+                        result.push({ ...text.attribute });
                         continue;
                     }
                 }
@@ -1808,12 +1753,15 @@
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
                     if (hasPlace !== false) {
-                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
-                        result.push(text);
+                        result.push({
+                            ...text.attribute,
+                            x: hasPlace.x,
+                            y: hasPlace.y
+                        });
                         break;
                     }
                 }
-                !hasPlace && !hideOnHit && result.push(text);
+                !hasPlace && !hideOnHit && result.push({ ...text.attribute });
             }
             if (vutils.isFunction(this.onAfterLabelOverlap)) {
                 this.onAfterLabelOverlap(bitmap);
@@ -1851,16 +1799,17 @@
             const easing = animationConfig.easing ?? DefaultLabelAnimation.easing;
             const delay = animationConfig.delay ?? 0;
             const currentTextMap = new Map();
-            const prevTextMap = this._graphicToText || new Map();
+            const prevTextMap = this._textMap || new Map();
             const texts = [];
-            labels.forEach((text, index) => {
-                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
+            labels.forEach((label, index) => {
+                const text = this._createLabelText(label);
+                const relatedGraphic = this._relationMap.get(label._relatedIndex);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, text);
                     if (!disableAnimation && relatedGraphic) {
-                        const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
+                        const { from, to } = getAnimationAttributes(label, 'fadeIn');
                         this.add(text);
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
@@ -1910,7 +1859,7 @@
                     });
                 }
             });
-            this._graphicToText = currentTextMap;
+            this._textMap = currentTextMap;
         }
         _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
             const listener = (event) => {
@@ -1961,34 +1910,30 @@
             return listener;
         }
         _smartInvert(labels) {
-            const option = (this.attribute.smartInvert || {});
-            const { textType, contrastRatiosThreshold, alternativeColors } = option;
+            if (this.attribute.smartInvert === false) {
+                return;
+            }
             for (let i = 0; i < labels.length; i++) {
-                const label = labels[i];
+                const label = labels?.[i];
                 if (!label) {
                     continue;
                 }
-                const baseMark = this._idToGraphic.get(label.attribute.id);
-                const isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
-                if (label.attribute.stroke && label.attribute.lineWidth > 0) {
-                    label.setAttributes({
-                        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
-                    });
+                const isInside = canPlaceInside(vrender.createText(label).AABBBounds, this._relationMap.get(label._relatedIndex)?.AABBBounds);
+                if (label.stroke && label.lineWidth > 0) {
+                    label.fill = labelSmartInvert(label.fill, label.stroke, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
                 }
                 else if (isInside) {
+                    const baseMark = this._relationMap.get(label._relatedIndex);
                     const backgroundColor = baseMark.attribute.fill;
-                    const foregroundColor = label.attribute.fill;
-                    label.setAttributes({
-                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
-                    });
+                    const foregroundColor = label.fill;
+                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
                 }
-                else if (label.attribute.lineWidth > 0) {
-                    const backgroundColor = label.attribute.stroke;
-                    const foregroundColor = label.attribute.fill;
-                    label.setAttributes({
-                        stroke: baseMark.attribute.fill,
-                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
-                    });
+                else if (label.lineWidth > 0) {
+                    const baseMark = this._relationMap.get(label._relatedIndex);
+                    label.stroke = baseMark.attribute.fill;
+                    const backgroundColor = label.stroke;
+                    const foregroundColor = label.fill;
+                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
                 }
             }
         }
@@ -9588,7 +9533,7 @@
         }
     }
 
-    const version = "0.13.5";
+    const version = "0.13.6";
 
     exports.AbstractComponent = AbstractComponent;
     exports.BasePlayer = BasePlayer;