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

package/es/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/es/label/base.js

@@ -1,6 +1,6 @@
-import { createText, IncreaseCount, AttributeUpdateType } from "@visactor/vrender-core";
+import { graphicCreator, AttributeUpdateType, IContainPointMode } from "@visactor/vrender-core";
 
-import { isFunction, isValidNumber, isEmpty, isValid, isString, merge, isRectIntersect, isNil } from "@visactor/vutils";
+import { isFunction, isEmpty, isValid, isString, merge, isRectIntersect, isNil, isArray } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
@@ -12,7 +12,11 @@ import { StateValue } from "../constant";
 
 import { bitmapTool, boundToRange, canPlace, clampText, place } from "./overlap";
 
-import { DefaultLabelAnimation, getAnimationAttributes } from "./animate/animate";
+import { DefaultLabelAnimation, getAnimationAttributes, updateAnimation } from "./animate/animate";
+
+import { getPointsOfLineArea } from "./util";
+
+import { DEFAULT_HTML_TEXT_SPEC } from "../constant";
 
 export class LabelBase extends AbstractComponent {
     setBitmap(bitmap) {
@@ -21,9 +25,9 @@ export class LabelBase extends AbstractComponent {
     setBitmapTool(bmpTool) {
         this._bmpTool = bmpTool;
     }
-    constructor(attributes) {
-        super(merge({}, LabelBase.defaultAttributes, attributes)), this.name = "label", 
-        this._onHover = e => {
+    constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, LabelBase.defaultAttributes, attributes)), 
+        this.name = "label", this._onHover = e => {
             const target = e.target;
             target === this._lastHover || isEmpty(target.states) || (target.addState(StateValue.hover, !0), 
             traverseGroup(this, (node => {
@@ -42,61 +46,109 @@ export class LabelBase extends AbstractComponent {
             isEmpty(target.states) || (target.addState(StateValue.selected, !0), traverseGroup(this, (node => {
                 node === target || isEmpty(node.states) || node.addState(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) === 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(), isNil(this._idToGraphic)) return;
+        if (this._prepare(), isNil(this._idToGraphic) || this._isCollectionBase && isNil(this._idToPoint)) return;
         const {overlap: overlap, smartInvert: smartInvert, dataFilter: dataFilter, customLayoutFunc: customLayoutFunc, customOverlapFunc: customOverlapFunc} = this.attribute;
         let labels, data = this.attribute.data;
-        isFunction(dataFilter) && (data = dataFilter(data)), labels = isFunction(customLayoutFunc) ? customLayoutFunc(data, (d => this._idToGraphic.get(d.id))) : this._layout(data), 
-        isFunction(customOverlapFunc) ? labels = customOverlapFunc(labels, (d => this._idToGraphic.get(d.id))) : !1 !== overlap && (labels = this._overlapping(labels)), 
+        isFunction(dataFilter) && (data = dataFilter(data)), labels = isFunction(customLayoutFunc) ? customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? d => this._idToPoint.get(d.id) : null) : this._layout(data), 
+        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 && !isEmpty(state) && (target.states = state);
     }
+    _setStatesOfLabelLine(target) {
+        if (!target) return;
+        const state = this.attribute.labelLineState;
+        state && !isEmpty(state) && (target.states = state);
+    }
     _createLabelText(attributes) {
-        const text = createText(attributes);
-        return this._bindEvent(text), this._setStates(text), text;
+        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 = graphicCreator.richtext(attributes);
+            return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
+        if ("html" === attributes.textType) {
+            attributes.textConfig = [], attributes.html = Object.assign(Object.assign({
+                dom: attributes.text
+            }, DEFAULT_HTML_TEXT_SPEC), attributes);
+            const text = graphicCreator.richtext(attributes);
+            return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
+        const text = graphicCreator.text(attributes);
+        return this._bindEvent(text), this._setStatesOfText(text), text;
     }
     _prepare() {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const currentBaseMarks = [];
         let baseMarks;
         if (baseMarks = isFunction(this.attribute.getBaseMarks) ? this.attribute.getBaseMarks() : 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 = getPointsOfLineArea(baseMark);
+                    if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+                        const textData = data[cur];
+                        textData && points[j] && (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 && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), 
                 this._idToGraphic.set(textData.id, baseMark));
             }
+            !1 !== this.attribute.animation && (this._animationConfig = {
+                enter: merge({}, DefaultLabelAnimation, this.attribute.animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
+                exit: merge({}, DefaultLabelAnimation, this.attribute.animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
+                update: isArray(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge({}, 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 ? 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 = 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, 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);
         }
@@ -120,7 +172,7 @@ export class LabelBase extends 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(), !isRectIntersect(baseMark.AABBBounds, {
                 x1: 0,
                 x2: bmpTool.width,
@@ -138,7 +190,7 @@ export class LabelBase extends AbstractComponent {
                 }
             }
             let hasPlace = !1;
-            for (let j = 0; j < strategy.length; j++) if (hasPlace = 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 = 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,
@@ -148,12 +200,17 @@ export class LabelBase extends AbstractComponent {
             }
             if (!hasPlace && clampForce) {
                 const {dx: dx = 0, dy: dy = 0} = clampText(text, bmpTool.width, bmpTool.height);
-                if ((0 !== dx || 0 !== dy) && canPlace(bmpTool, bitmap, {
+                if (0 === dx && 0 === dy) {
+                    if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
+                        bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
+                        continue;
+                    }
+                } else if (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
@@ -182,47 +239,37 @@ export class LabelBase extends 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 : DefaultLabelAnimation.mode, duration = null !== (_c = animationConfig.duration) && void 0 !== _c ? _c : DefaultLabelAnimation.duration, easing = null !== (_d = animationConfig.easing) && void 0 !== _d ? _d : 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} = 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(merge({}, prevLabel.labelLine.attribute, {
+                const prevLabel = prevTextMap.get(textKey);
+                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
+                const prevText = prevLabel.text, {duration: duration, easing: easing} = this._animationConfig.update;
+                updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && prevLabel.labelLine.animate().to(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 && isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text)) && prevText.animate().play(new 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(getAnimationAttributes(label.text.attribute, "fadeOut").to, duration, easing).onEnd((() => {
+            null === (_a = label.text) || void 0 === _a || _a.animate().to(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 +278,16 @@ export class LabelBase extends 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 +295,42 @@ export class LabelBase extends 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 === AttributeUpdateType.ANIMATE_UPDATE && detail.animationState && "wait" !== (null === (_a = detail.animationState.step) || void 0 === _a ? void 0 : _a.type))) return {};
             if (detail.type === 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, 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,11 +338,11 @@ export class LabelBase extends 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 = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors), similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+            const baseMark = this.getRelatedGrphic(label.attribute), backgroundColor = baseMark.attribute.fill, foregroundColor = label.attribute.fill, baseColor = backgroundColor, invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode), similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
             if (outsideEnable) {
                 const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
                 if (fill && label.setAttributes({
@@ -311,7 +366,7 @@ export class LabelBase extends AbstractComponent {
                     if (0 === label.attribute.lineWidth) continue;
                     if (label.attribute.stroke) {
                         label.setAttributes({
-                            fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                            fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
                         });
                         continue;
                     }