@visactor/vrender-components 0.17.0-alpha.8 → 0.17.0

package/cjs/label/base.d.ts

@@ -1,52 +1,62 @@
-import type { IGroup, IGraphic, IText, ILine } from '@visactor/vrender-core';
-import type { IAABBBounds, IBoundsLike } from '@visactor/vutils';
+import type { IGroup, IGraphic, IText, ILine, IRichText } from '@visactor/vrender-core';
+import type { IAABBBounds, IBoundsLike, IPointLike } from '@visactor/vutils';
 import { AbstractComponent } from '../core/base';
 import type { PointLocationCfg } from '../core/type';
 import type { Bitmap } from './overlap';
 import { bitmapTool } from './overlap';
-import type { BaseLabelAttrs, ILabelAnimation, LabelItem } from './type';
+import type { BaseLabelAttrs, ILabelAnimation, LabelItem, ILabelEnterAnimation, ILabelExitAnimation, ILabelUpdateAnimation } from './type';
+import type { ComponentOptions } from '../interface';
 export declare class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
     name: string;
     protected _baseMarks?: IGraphic[];
+    protected _isCollectionBase: boolean;
     protected _bitmap?: Bitmap;
+    protected _animationConfig?: {
+        enter: ILabelEnterAnimation;
+        exit: ILabelExitAnimation;
+        update: ILabelUpdateAnimation;
+    };
     static defaultAttributes: Partial<BaseLabelAttrs>;
     setBitmap(bitmap: Bitmap): void;
     protected _bmpTool?: ReturnType<typeof bitmapTool>;
     setBitmapTool(bmpTool: ReturnType<typeof bitmapTool>): void;
     protected _graphicToText: Map<IGraphic, {
-        text: IText;
+        text: IText | IRichText;
         labelLine?: ILine;
     }>;
     protected _idToGraphic: Map<string, IGraphic>;
+    protected _idToPoint: Map<string, IPointLike>;
     onAfterLabelOverlap?: (bitmap: Bitmap) => void;
     private _lastHover;
     private _lastSelect;
     private _enableAnimation;
-    constructor(attributes: BaseLabelAttrs);
+    constructor(attributes: BaseLabelAttrs, options?: ComponentOptions);
     protected labeling(textBounds: IBoundsLike, graphicBounds: IBoundsLike, position?: BaseLabelAttrs['position'], offset?: number): {
         x: number;
         y: number;
     } | undefined;
-    protected _labelLine(text: IText): ILine | undefined;
+    protected _labelLine(text: LabelItem): ILine | undefined;
     protected render(): void;
     private _bindEvent;
-    private _setStates;
+    private _setStatesOfText;
+    private _setStatesOfLabelLine;
     private _onHover;
     private _onUnHover;
     private _onClick;
-    protected _createLabelText(attributes: LabelItem): IText;
+    protected _createLabelText(attributes: LabelItem): IRichText | IText;
     private _prepare;
-    protected _layout(data?: LabelItem[]): IText[];
-    protected _overlapping(labels: IText[]): IText[];
+    protected getRelatedGrphic(item: LabelItem): IGraphic<Partial<import("@visactor/vrender-core").IGraphicAttribute>>;
+    protected _layout(data?: LabelItem[]): (IText | IRichText)[];
+    protected _overlapping(labels: (IText | IRichText)[]): (IRichText | IText)[];
     protected getBaseMarkGroup(): IGroup;
-    protected getGraphicBounds(graphic?: IGraphic, point?: Partial<PointLocationCfg>): IBoundsLike;
-    protected _renderLabels(labels: IText[]): void;
-    protected _renderWithAnimation(labels: IText[]): void;
-    protected _renderWithOutAnimation(labels: IText[]): void;
-    protected _afterRelatedGraphicAttributeUpdate(text: IText, texts: IText[], index: number, relatedGraphic: IGraphic, { mode, duration, easing, to, delay }: ILabelAnimation & {
-        to: any;
-    }): (event: any) => {};
-    protected _smartInvert(labels: IText[]): void;
+    protected getGraphicBounds(graphic?: IGraphic, point?: Partial<PointLocationCfg>, position?: string): IBoundsLike;
+    protected _renderLabels(labels: (IText | IRichText)[]): void;
+    protected _renderWithAnimation(labels: (IText | IRichText)[]): void;
+    protected _renderWithOutAnimation(labels: (IText | IRichText)[]): void;
+    protected _handleRelatedGraphicSetState: (e: any) => void;
+    protected _syncStateWithRelatedGraphic(relatedGraphic: IGraphic): void;
+    protected _afterRelatedGraphicAttributeUpdate(text: IText | IRichText, texts: (IText | IRichText)[], index: number, relatedGraphic: IGraphic, to: any, { mode, duration, easing, delay }: ILabelAnimation): (event: any) => {};
+    protected _smartInvert(labels: (IText | IRichText)[]): void;
     protected _canPlaceInside(textBound: IBoundsLike, shapeBound: IAABBBounds): boolean;
     setLocation(point: PointLocationCfg): void;
     disableAnimation(): void;

package/cjs/label/base.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.LabelBase = void 0;
 
-const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), label_smartInvert_1 = require("../util/label-smartInvert"), util_1 = require("../util"), constant_1 = require("../constant"), overlap_1 = require("./overlap"), animate_1 = require("./animate/animate");
+const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), label_smartInvert_1 = require("../util/label-smartInvert"), util_1 = require("../util"), constant_1 = require("../constant"), overlap_1 = require("./overlap"), animate_1 = require("./animate/animate"), util_2 = require("./util"), constant_2 = require("../constant");
 
 class LabelBase extends base_1.AbstractComponent {
     setBitmap(bitmap) {
@@ -13,9 +13,9 @@ class LabelBase extends base_1.AbstractComponent {
     setBitmapTool(bmpTool) {
         this._bmpTool = bmpTool;
     }
-    constructor(attributes) {
-        super((0, vutils_1.merge)({}, LabelBase.defaultAttributes, attributes)), this.name = "label", 
-        this._onHover = e => {
+    constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, LabelBase.defaultAttributes, attributes)), 
+        this.name = "label", this._onHover = e => {
             const target = e.target;
             target === this._lastHover || (0, vutils_1.isEmpty)(target.states) || (target.addState(constant_1.StateValue.hover, !0), 
             (0, util_1.traverseGroup)(this, (node => {
@@ -37,62 +37,113 @@ class LabelBase extends base_1.AbstractComponent {
             (0, util_1.traverseGroup)(this, (node => {
                 node === target || (0, vutils_1.isEmpty)(node.states) || node.addState(constant_1.StateValue.selectedReverse, !0);
             })), this._lastSelect = target);
+        }, this._handleRelatedGraphicSetState = e => {
+            var _a, _b, _c;
+            if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === vrender_core_1.AttributeUpdateType.STATE) {
+                const currentStates = null !== (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.currentStates) && void 0 !== _c ? _c : [];
+                (this._isCollectionBase ? [ ...this._graphicToText.values() ] : [ this._graphicToText.get(e.target) ]).forEach((label => {
+                    label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
+                }));
+            }
         };
     }
     labeling(textBounds, graphicBounds, position, offset) {}
     _labelLine(text) {}
     render() {
-        if (this._prepare(), (0, vutils_1.isNil)(this._idToGraphic)) return;
+        if (this._prepare(), (0, vutils_1.isNil)(this._idToGraphic) || this._isCollectionBase && (0, 
+        vutils_1.isNil)(this._idToPoint)) return;
         const {overlap: overlap, smartInvert: smartInvert, dataFilter: dataFilter, customLayoutFunc: customLayoutFunc, customOverlapFunc: customOverlapFunc} = this.attribute;
         let labels, data = this.attribute.data;
         (0, vutils_1.isFunction)(dataFilter) && (data = dataFilter(data)), labels = (0, 
-        vutils_1.isFunction)(customLayoutFunc) ? customLayoutFunc(data, (d => this._idToGraphic.get(d.id))) : this._layout(data), 
-        (0, vutils_1.isFunction)(customOverlapFunc) ? labels = customOverlapFunc(labels, (d => this._idToGraphic.get(d.id))) : !1 !== overlap && (labels = this._overlapping(labels)), 
+        vutils_1.isFunction)(customLayoutFunc) ? customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : this._layout(data), 
+        (0, vutils_1.isFunction)(customOverlapFunc) ? labels = customOverlapFunc(labels, this.getRelatedGrphic, this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : !1 !== overlap && (labels = this._overlapping(labels)), 
         !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
     }
     _bindEvent(target) {
+        if (this.attribute.disableTriggerEvent) return;
         if (!target) return;
         const {hover: hover, select: select} = this.attribute;
         hover && (target.addEventListener("pointermove", this._onHover), target.addEventListener("pointerout", this._onUnHover)), 
         select && target.addEventListener("pointerdown", this._onClick);
     }
-    _setStates(target) {
+    _setStatesOfText(target) {
         if (!target) return;
         const state = this.attribute.state;
         state && !(0, vutils_1.isEmpty)(state) && (target.states = state);
     }
+    _setStatesOfLabelLine(target) {
+        if (!target) return;
+        const state = this.attribute.labelLineState;
+        state && !(0, vutils_1.isEmpty)(state) && (target.states = state);
+    }
     _createLabelText(attributes) {
+        var _a, _b;
+        if ("rich" === attributes.textType) {
+            attributes.textConfig = attributes.text, attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, 
+            attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0;
+            const text = (0, vrender_core_1.createRichText)(attributes);
+            return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
+        if ("html" === attributes.textType) {
+            attributes.textConfig = [], attributes.html = Object.assign(Object.assign({
+                dom: attributes.text
+            }, constant_2.DEFAULT_HTML_TEXT_SPEC), attributes);
+            const text = (0, vrender_core_1.createRichText)(attributes);
+            return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
         const text = (0, vrender_core_1.createText)(attributes);
-        return this._bindEvent(text), this._setStates(text), text;
+        return this._bindEvent(text), this._setStatesOfText(text), text;
     }
     _prepare() {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const currentBaseMarks = [];
         let baseMarks;
         if (baseMarks = (0, vutils_1.isFunction)(this.attribute.getBaseMarks) ? this.attribute.getBaseMarks() : (0, 
         util_1.getMarksByName)(this.getRootNode(), this.attribute.baseMarkGroupName), baseMarks.forEach((mark => {
             "willRelease" !== mark.releaseStatus && currentBaseMarks.push(mark);
-        })), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), this._baseMarks = currentBaseMarks, 
+        })), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), 
+        this._baseMarks = currentBaseMarks, this._isCollectionBase = "line-data" === this.attribute.type, 
         !currentBaseMarks || 0 === currentBaseMarks.length) return;
         const {data: data} = this.attribute;
         if (data && 0 !== data.length) {
-            this._idToGraphic || (this._idToGraphic = new Map);
-            for (let i = 0; i < currentBaseMarks.length; i++) {
+            if (this._idToGraphic || (this._idToGraphic = new Map), this._isCollectionBase) {
+                this._idToPoint || (this._idToPoint = new Map);
+                let cur = 0;
+                for (let i = 0; i < currentBaseMarks.length; i++) {
+                    const baseMark = currentBaseMarks[i], points = (0, util_2.getPointsOfLineArea)(baseMark);
+                    if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+                        const textData = data[cur];
+                        textData && points[j] && ((0, vutils_1.isValid)(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), 
+                        this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), 
+                        cur++;
+                    }
+                }
+            } else for (let i = 0; i < currentBaseMarks.length; i++) {
                 const textData = data[i], baseMark = currentBaseMarks[i];
                 textData && baseMark && ((0, vutils_1.isValid)(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), 
                 this._idToGraphic.set(textData.id, baseMark));
             }
+            !1 !== this.attribute.animation && (this._animationConfig = {
+                enter: (0, vutils_1.merge)({}, animate_1.DefaultLabelAnimation, this.attribute.animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
+                exit: (0, vutils_1.merge)({}, animate_1.DefaultLabelAnimation, this.attribute.animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
+                update: (0, vutils_1.isArray)(this.attribute.animationUpdate) ? this.attribute.animationUpdate : (0, 
+                vutils_1.merge)({}, animate_1.DefaultLabelAnimation, this.attribute.animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
+            });
         }
     }
+    getRelatedGrphic(item) {
+        return this._idToGraphic.get(item.id);
+    }
     _layout(data = []) {
         const {textStyle: textStyle = {}, position: position, offset: offset} = this.attribute, labels = [];
         for (let i = 0; i < data.length; i++) {
-            const textData = data[i], baseMark = this._idToGraphic.get(textData.id), labelAttribute = Object.assign(Object.assign({
-                fill: baseMark.attribute.fill
-            }, textStyle), textData), text = this._createLabelText(labelAttribute), textBounds = this.getGraphicBounds(text), graphicBounds = this.getGraphicBounds(baseMark, {
+            const textData = data[i], baseMark = this.getRelatedGrphic(textData), labelAttribute = Object.assign(Object.assign({
+                fill: this._isCollectionBase ? (0, vutils_1.isArray)(baseMark.attribute.stroke) ? baseMark.attribute.stroke.find((entry => !!entry && !0 !== entry)) : baseMark.attribute.stroke : baseMark.attribute.fill
+            }, textStyle), textData), text = this._createLabelText(labelAttribute), textBounds = this.getGraphicBounds(text), actualPosition = (0, 
+            vutils_1.isFunction)(position) ? position(textData) : position, graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition) : this.getGraphicBounds(baseMark, {
                 x: textData.x,
                 y: textData.y
-            }), textLocation = this.labeling(textBounds, graphicBounds, (0, vutils_1.isFunction)(position) ? position(textData) : position, offset);
+            }, actualPosition), textLocation = this.labeling(textBounds, graphicBounds, actualPosition, offset);
             textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, 
             text.setAttributes(textLocation)), labels.push(text);
         }
@@ -117,7 +168,7 @@ class LabelBase extends base_1.AbstractComponent {
         }));
         for (let i = 0; i < labels.length; i++) {
             if (!1 === labels[i].visible) continue;
-            const text = labels[i], baseMark = this._idToGraphic.get(text.attribute.id);
+            const text = labels[i], baseMark = this.getRelatedGrphic(text.attribute);
             if (text.update(), !(0, vutils_1.isRectIntersect)(baseMark.AABBBounds, {
                 x1: 0,
                 x2: bmpTool.width,
@@ -135,7 +186,7 @@ class LabelBase extends base_1.AbstractComponent {
                 }
             }
             let hasPlace = !1;
-            for (let j = 0; j < strategy.length; j++) if (hasPlace = (0, overlap_1.place)(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), 
+            for (let j = 0; j < strategy.length; j++) if (hasPlace = (0, overlap_1.place)(bmpTool, bitmap, strategy[j], this.attribute, text, this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(labels[i].attribute.id)) : this.getGraphicBounds(baseMark, labels[i].attribute), this.labeling), 
             !1 !== hasPlace) {
                 text.setAttributes({
                     x: hasPlace.x,
@@ -145,12 +196,17 @@ class LabelBase extends base_1.AbstractComponent {
             }
             if (!hasPlace && clampForce) {
                 const {dx: dx = 0, dy: dy = 0} = (0, overlap_1.clampText)(text, bmpTool.width, bmpTool.height);
-                if ((0 !== dx || 0 !== dy) && (0, overlap_1.canPlace)(bmpTool, bitmap, {
+                if (0 === dx && 0 === dy) {
+                    if ((0, overlap_1.canPlace)(bmpTool, bitmap, text.AABBBounds)) {
+                        bitmap.setRange((0, overlap_1.boundToRange)(bmpTool, text.AABBBounds, !0)), result.push(text);
+                        continue;
+                    }
+                } else if ((0, overlap_1.canPlace)(bmpTool, bitmap, {
                     x1: text.AABBBounds.x1 + dx,
                     x2: text.AABBBounds.x2 + dx,
                     y1: text.AABBBounds.y1 + dy,
                     y2: text.AABBBounds.y2 + dy
-                }, void 0, overlapPadding)) {
+                })) {
                     text.setAttributes({
                         x: text.attribute.x + dx,
                         y: text.attribute.y + dy
@@ -180,49 +236,38 @@ class LabelBase extends base_1.AbstractComponent {
         !1 === this._enableAnimation || !1 === this.attribute.animation ? this._renderWithOutAnimation(labels) : this._renderWithAnimation(labels);
     }
     _renderWithAnimation(labels) {
-        var _a, _b, _c, _d, _e;
-        const animationConfig = null !== (_a = this.attribute.animation) && void 0 !== _a ? _a : {}, mode = null !== (_b = animationConfig.mode) && void 0 !== _b ? _b : animate_1.DefaultLabelAnimation.mode, duration = null !== (_c = animationConfig.duration) && void 0 !== _c ? _c : animate_1.DefaultLabelAnimation.duration, easing = null !== (_d = animationConfig.easing) && void 0 !== _d ? _d : animate_1.DefaultLabelAnimation.easing, delay = null !== (_e = animationConfig.delay) && void 0 !== _e ? _e : 0, currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [];
+        const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [];
         labels.forEach(((text, index) => {
             var _a, _b, _c, _d, _e, _f, _g;
-            const labelLine = this._labelLine(text), relatedGraphic = this._idToGraphic.get(text.attribute.id), state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
+            const labelLine = this._labelLine(text), relatedGraphic = this.getRelatedGrphic(text.attribute), textId = text.attribute.id, textKey = this._isCollectionBase ? textId : relatedGraphic, state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
             if ("enter" === state) {
-                if (texts.push(text), currentTextMap.set(relatedGraphic, labelLine ? {
+                if (texts.push(text), currentTextMap.set(textKey, labelLine ? {
                     text: text,
                     labelLine: labelLine
                 } : {
                     text: text
                 }), relatedGraphic) {
                     const {from: from, to: to} = (0, animate_1.getAnimationAttributes)(text.attribute, "fadeIn");
-                    this.add(text), labelLine && this.add(labelLine), relatedGraphic.once("animate-bind", (() => {
+                    this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), this.add(labelLine)), 
+                    this._syncStateWithRelatedGraphic(relatedGraphic), relatedGraphic.once("animate-bind", (a => {
                         text.setAttributes(from);
-                        const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
-                            mode: mode,
-                            duration: duration,
-                            easing: easing,
-                            to: to,
-                            delay: delay
-                        });
+                        const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, this._animationConfig.enter);
                         relatedGraphic.on("afterAttributeUpdate", listener);
                     }));
                 }
             } else if ("update" === state) {
-                const prevLabel = prevTextMap.get(relatedGraphic);
-                prevTextMap.delete(relatedGraphic), currentTextMap.set(relatedGraphic, prevLabel);
-                const prevText = prevLabel.text;
-                prevText.animate().to(text.attribute, duration, easing), prevLabel.labelLine && prevLabel.labelLine.animate().to((0, 
+                const prevLabel = prevTextMap.get(textKey);
+                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
+                const prevText = prevLabel.text, {duration: duration, easing: easing} = this._animationConfig.update;
+                (0, animate_1.updateAnimation)(prevText, text, this._animationConfig.update), prevLabel.labelLine && prevLabel.labelLine.animate().to((0, 
                 vutils_1.merge)({}, prevLabel.labelLine.attribute, {
                     visible: null === (_f = null !== (_d = (null === (_b = null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.line) || void 0 === _b ? void 0 : _b.visible) && (null === (_c = text.attribute) || void 0 === _c ? void 0 : _c.visible)) && void 0 !== _d ? _d : null === (_e = text.attribute) || void 0 === _e ? void 0 : _e.visible) || void 0 === _f || _f,
                     points: null === (_g = text.attribute) || void 0 === _g ? void 0 : _g.points
-                }), duration, easing), !1 !== animationConfig.increaseEffect && prevText.attribute.text !== text.attribute.text && (0, 
-                vutils_1.isValidNumber)(Number(prevText.attribute.text) * Number(text.attribute.text)) && prevText.animate().play(new vrender_core_1.IncreaseCount({
-                    text: prevText.attribute.text
-                }, {
-                    text: text.attribute.text
-                }, duration, easing));
+                }), duration, easing);
             }
         })), prevTextMap.forEach((label => {
             var _a;
-            null === (_a = label.text) || void 0 === _a || _a.animate().to((0, animate_1.getAnimationAttributes)(label.text.attribute, "fadeOut").to, duration, easing).onEnd((() => {
+            null === (_a = label.text) || void 0 === _a || _a.animate().to((0, animate_1.getAnimationAttributes)(label.text.attribute, "fadeOut").to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd((() => {
                 this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
             }));
         })), this._graphicToText = currentTextMap;
@@ -231,16 +276,16 @@ class LabelBase extends base_1.AbstractComponent {
         const currentTextMap = new Map, prevTextMap = this._graphicToText || new Map, texts = [];
         labels.forEach((text => {
             var _a;
-            const labelLine = this._labelLine(text), relatedGraphic = this._idToGraphic.get(text.attribute.id), state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
-            if ("enter" === state) texts.push(text), currentTextMap.set(relatedGraphic, labelLine ? {
+            const labelLine = this._labelLine(text), relatedGraphic = this.getRelatedGrphic(text.attribute), state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter", textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
+            if ("enter" === state) texts.push(text), currentTextMap.set(textKey, labelLine ? {
                 text: text,
                 labelLine: labelLine
             } : {
                 text: text
-            }), this.add(text), labelLine && this.add(labelLine); else if ("update" === state) {
-                const prevLabel = prevTextMap.get(relatedGraphic);
-                prevTextMap.delete(relatedGraphic), currentTextMap.set(relatedGraphic, prevLabel), 
-                prevLabel.text.setAttributes(text.attribute), (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
+            }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic); else if ("update" === state) {
+                const prevLabel = prevTextMap.get(textKey);
+                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), 
+                (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
                     points: null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points
                 });
             }
@@ -248,34 +293,42 @@ class LabelBase extends base_1.AbstractComponent {
             this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
         })), this._graphicToText = currentTextMap;
     }
-    _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {mode: mode, duration: duration, easing: easing, to: to, delay: delay}) {
+    _syncStateWithRelatedGraphic(relatedGraphic) {
+        this.attribute.syncState && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
+    }
+    _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, {mode: mode, duration: duration, easing: easing, delay: delay}) {
         const listener = event => {
-            var _a;
+            var _a, _b;
             const {detail: detail} = event;
             if (!detail) return {};
             if (!(detail && detail.type === vrender_core_1.AttributeUpdateType.ANIMATE_UPDATE && detail.animationState && "wait" !== (null === (_a = detail.animationState.step) || void 0 === _a ? void 0 : _a.type))) return {};
             if (detail.type === vrender_core_1.AttributeUpdateType.ANIMATE_END) return void text.setAttributes(to);
-            const onEnd = () => {
+            const onStart = () => {
                 relatedGraphic && (relatedGraphic.onAnimateBind = void 0, relatedGraphic.removeEventListener("afterAttributeUpdate", listener));
             };
             switch (mode) {
               case "after":
                 detail.animationState.end && text.animate({
-                    onEnd: onEnd
+                    onStart: onStart
                 }).wait(delay).to(to, duration, easing);
                 break;
 
               case "after-all":
                 index === texts.length - 1 && detail.animationState.end && texts.forEach((t => {
                     t.animate({
-                        onEnd: onEnd
+                        onStart: onStart
                     }).wait(delay).to(to, duration, easing);
                 }));
                 break;
 
               default:
-                detail.animationState.isFirstFrameOfStep && text.animate({
-                    onEnd: onEnd
+                if (this._isCollectionBase) {
+                    const point = this._idToPoint.get(text.attribute.id);
+                    !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, vrender_core_1.IContainPointMode.LOCAL, null === (_b = this.stage) || void 0 === _b ? void 0 : _b.pickerService) || text.animate({
+                        onStart: onStart
+                    }).wait(delay).to(to, duration, easing);
+                } else detail.animationState.isFirstFrameOfStep && text.animate({
+                    onStart: onStart
                 }).wait(delay).to(to, duration, easing);
             }
         };
@@ -283,12 +336,12 @@ class LabelBase extends base_1.AbstractComponent {
     }
     _smartInvert(labels) {
         var _a, _b, _c, _d, _e;
-        const option = this.attribute.smartInvert || {}, {textType: textType, contrastRatiosThreshold: contrastRatiosThreshold, alternativeColors: alternativeColors} = option, fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase", strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base", brightColor = null !== (_c = option.brightColor) && void 0 !== _c ? _c : "#ffffff", darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000", outsideEnable = null !== (_e = option.outsideEnable) && void 0 !== _e && _e;
+        const option = this.attribute.smartInvert || {}, {textType: textType, contrastRatiosThreshold: contrastRatiosThreshold, alternativeColors: alternativeColors, mode: mode} = option, fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase", strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base", brightColor = null !== (_c = option.brightColor) && void 0 !== _c ? _c : "#ffffff", darkColor = null !== (_d = option.darkColor) && void 0 !== _d ? _d : "#000000", outsideEnable = null !== (_e = option.outsideEnable) && void 0 !== _e && _e;
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
             const label = labels[i];
             if (!label) continue;
-            const baseMark = this._idToGraphic.get(label.attribute.id), backgroundColor = baseMark.attribute.fill, foregroundColor = label.attribute.fill, baseColor = backgroundColor, invertColor = (0, 
-            label_smartInvert_1.labelSmartInvert)(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors), similarColor = (0, 
+            const baseMark = this.getRelatedGrphic(label.attribute), backgroundColor = baseMark.attribute.fill, foregroundColor = label.attribute.fill, baseColor = backgroundColor, invertColor = (0, 
+            label_smartInvert_1.labelSmartInvert)(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode), similarColor = (0, 
             label_smartInvert_1.contrastAccessibilityChecker)(invertColor, brightColor) ? brightColor : darkColor;
             if (outsideEnable) {
                 const fill = (0, label_smartInvert_1.smartInvertStrategy)(fillStrategy, baseColor, invertColor, similarColor);
@@ -313,7 +366,7 @@ class LabelBase extends base_1.AbstractComponent {
                     if (0 === label.attribute.lineWidth) continue;
                     if (label.attribute.stroke) {
                         label.setAttributes({
-                            fill: (0, label_smartInvert_1.labelSmartInvert)(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                            fill: (0, label_smartInvert_1.labelSmartInvert)(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
                         });
                         continue;
                     }