@visactor/vrender-components 0.22.11 → 0.22.12

package/es/label/base.js

@@ -8,12 +8,10 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { graphicCreator, AttributeUpdateType, IContainPointMode, CustomPath2D } from "@visactor/vrender-core";
+import { graphicCreator, AttributeUpdateType, CustomPath2D } from "@visactor/vrender-core";
 
 import { isFunction, isEmpty, isValid, isString, merge, isRectIntersect, isNil, isArray, isObject, pointInRect } from "@visactor/vutils";
 
-import { AbstractComponent } from "../core/base";
-
 import { labelSmartInvert, contrastAccessibilityChecker, smartInvertStrategy } from "../util/label-smartInvert";
 
 import { createTextGraphicByType, getMarksByName, getNoneGroupMarksByName, traverseGroup } from "../util";
@@ -22,7 +20,7 @@ import { StateValue } from "../constant";
 
 import { bitmapTool, boundToRange, canPlace, clampText, place } from "./overlap";
 
-import { DefaultLabelAnimation, getAnimationAttributes, updateAnimation } from "./animate/animate";
+import { DefaultLabelAnimation } from "./animate/animate";
 
 import { connectLineBetweenBounds, getPointsOfLineArea } from "./util";
 
@@ -30,9 +28,11 @@ import { loadLabelComponent } from "./register";
 
 import { shiftY } from "./overlap/shiftY";
 
+import { AnimateComponent } from "../animation/animate-component";
+
 loadLabelComponent();
 
-export class LabelBase extends AbstractComponent {
+export class LabelBase extends AnimateComponent {
     setBitmap(bitmap) {
         this._bitmap = bitmap;
     }
@@ -88,13 +88,17 @@ export class LabelBase extends AbstractComponent {
                     baseMark: baseMark
                 }, attrs, new CustomPath2D);
             }
-            return baseMark && baseMark.attribute.fill && lineGraphic.setAttribute("stroke", baseMark.attribute.fill), 
+            return baseMark && baseMark.getAttributes(!0).fill && lineGraphic.setAttribute("stroke", baseMark.getAttributes(!0).fill), 
             this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), 
             this._setStatesOfLabelLine(lineGraphic), lineGraphic;
         }
     }
     render() {
         if (this._prepare(), isNil(this._idToGraphic) || this._isCollectionBase && isNil(this._idToPoint)) return;
+        const markAttributeList = [];
+        !1 !== this._enableAnimation && this._baseMarks.forEach((mark => {
+            markAttributeList.push(mark.attribute), mark.initAttributes(mark.getAttributes(!0));
+        }));
         const {overlap: overlap, smartInvert: smartInvert, dataFilter: dataFilter, customLayoutFunc: customLayoutFunc, customOverlapFunc: customOverlapFunc} = this.attribute;
         let data = this.attribute.data;
         if (isFunction(dataFilter) && (data = dataFilter(data)), data && data.length) {
@@ -107,7 +111,10 @@ export class LabelBase extends AbstractComponent {
         isFunction(this.attribute.onAfterOverlapping) && this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this), 
         labels && labels.length && labels.forEach((label => {
             this._bindEvent(label), this._setStatesOfText(label);
-        })), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
+        })), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels), 
+        !1 !== this._enableAnimation && this._baseMarks.forEach(((mark, index) => {
+            mark.initAttributes(markAttributeList[index]);
+        }));
     }
     _bindEvent(target) {
         if (this.attribute.disableTriggerEvent) return;
@@ -160,18 +167,7 @@ export class LabelBase extends AbstractComponent {
                 textData && baseMark && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), 
                 this._idToGraphic.set(textData.id, baseMark));
             }
-            if (!1 !== this.attribute.animation) {
-                const {animation: animation, animationEnter: animationEnter, animationExit: animationExit, animationUpdate: animationUpdate} = this.attribute, animationCfg = isObject(animation) ? animation : {};
-                this._animationConfig = {
-                    enter: !1 !== animationEnter && merge({}, DefaultLabelAnimation, animationCfg, null != animationEnter ? animationEnter : {}),
-                    exit: !1 !== animationExit && merge({}, DefaultLabelAnimation, animationCfg, null != animationExit ? animationExit : {}),
-                    update: !1 !== animationUpdate && (isArray(animationUpdate) ? animationUpdate : merge({}, DefaultLabelAnimation, animationCfg, null != animationUpdate ? animationUpdate : {}))
-                };
-            } else this._animationConfig = {
-                enter: !1,
-                exit: !1,
-                update: !1
-            };
+            this._prepareAnimate(DefaultLabelAnimation);
         }
     }
     getRelatedGraphic(item) {
@@ -182,8 +178,8 @@ export class LabelBase extends AbstractComponent {
         for (let i = 0; i < data.length; i++) {
             const textData = data[i], baseMark = this.getRelatedGraphic(textData);
             if (!baseMark) continue;
-            const 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
+            const graphicAttribute = baseMark.getAttributes(!0), labelAttribute = Object.assign(Object.assign({
+                fill: this._isCollectionBase ? isArray(graphicAttribute.stroke) ? graphicAttribute.stroke.find((entry => !!entry && !0 !== entry)) : graphicAttribute.stroke : graphicAttribute.fill
             }, textStyle), textData), text = this._createLabelText(labelAttribute);
             labels.push(text);
         }
@@ -335,8 +331,15 @@ export class LabelBase extends AbstractComponent {
         if (baseMarkGroupName) return this.getRootNode().find((node => node.name === baseMarkGroupName), !0);
     }
     getGraphicBounds(graphic, point = {}, position) {
+        var _a;
         if (graphic) {
-            if (!1 !== graphic.attribute.visible) return graphic.AABBBounds;
+            if (!1 !== graphic.attribute.visible) {
+                if (null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.animationState) {
+                    const clonedGraphic = graphic.clone();
+                    return Object.assign(clonedGraphic.attribute, graphic.getAttributes(!0)), clonedGraphic.AABBBounds;
+                }
+                return graphic.AABBBounds;
+            }
             const {x: x, y: y} = graphic.attribute;
             return {
                 x1: x,
@@ -369,64 +372,88 @@ export class LabelBase extends AbstractComponent {
             var _a;
             const relatedGraphic = this.getRelatedGraphic(text.attribute), textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic, state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
             let labelLine;
-            if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), 
-            syncState && this.updateStatesOfLabels([ labelLine ? {
-                text: text,
-                labelLine: labelLine
-            } : {
-                text: text
-            } ], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), "enter" === state) texts.push(text), 
-            currentTextMap.set(textKey, labelLine ? {
+            showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic));
+            const currentLabel = labelLine ? {
                 text: text,
                 labelLine: labelLine
             } : {
                 text: text
-            }), this._addLabel({
-                text: text,
-                labelLine: labelLine
-            }, texts, labelLines, index); else if ("update" === state) {
+            };
+            if (syncState && this.updateStatesOfLabels([ currentLabel ], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), 
+            "enter" === state) texts.push(text), currentTextMap.set(textKey, currentLabel), 
+            this._addLabel(currentLabel, texts, labelLines, index); else if ("update" === state) {
                 const prevLabel = prevTextMap.get(textKey);
-                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), this._updateLabel(prevLabel, {
-                    text: text,
-                    labelLine: labelLine
-                });
+                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), this._updateLabel(prevLabel, currentLabel);
             }
         })), this._removeLabel(prevTextMap), this._graphicToText = currentTextMap;
     }
+    runEnterAnimation(text, labelLine) {
+        if (!1 === this._enableAnimation || !this._animationConfig.enter) return;
+        const relatedGraphic = this.getRelatedGraphic(text.attribute), {enter: enter} = this._animationConfig;
+        [ text, labelLine ].filter(Boolean).forEach((item => item.applyAnimationState([ "enter" ], [ {
+            name: "enter",
+            animation: Object.assign(Object.assign({}, enter), {
+                type: "labelEnter",
+                selfOnly: !0,
+                customParameters: {
+                    relatedGraphic: relatedGraphic,
+                    relatedGraphics: this._idToGraphic,
+                    config: Object.assign(Object.assign({}, enter), {
+                        type: item === text ? enter.type : "fadeIn"
+                    })
+                }
+            })
+        } ])));
+    }
+    _runUpdateAnimation(prevLabel, currentLabel) {
+        const {text: prevText, labelLine: prevLabelLine} = prevLabel, {text: curText, labelLine: curLabelLine} = currentLabel;
+        prevText.applyAnimationState([ "update" ], [ {
+            name: "update",
+            animation: Object.assign(Object.assign({
+                type: "labelUpdate"
+            }, this._animationConfig.update), {
+                customParameters: {
+                    prevText: prevText,
+                    curText: curText,
+                    prevLabelLine: prevLabelLine,
+                    curLabelLine: curLabelLine
+                }
+            })
+        } ]);
+    }
+    _syncStateWithRelatedGraphic(relatedGraphic) {
+        this.attribute.syncState && relatedGraphic && relatedGraphic.on("afterStateUpdate", this._handleRelatedGraphicSetState);
+    }
     _addLabel(label, texts, labelLines, index) {
         const {text: text, labelLine: labelLine} = label, relatedGraphic = this.getRelatedGraphic(text.attribute);
-        if (this._syncStateWithRelatedGraphic(relatedGraphic), !1 !== this._enableAnimation && !1 !== this._animationConfig.enter) {
-            if (relatedGraphic) {
-                const {from: from, to: to} = getAnimationAttributes(text.attribute, "fadeIn");
-                text && this.add(text), labelLine && (labelLines.push(labelLine), this.add(labelLine)), 
-                this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", (a => {
-                    text.setAttributes(from), labelLine && labelLine.setAttributes(from);
-                    const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
-                    relatedGraphic.on("afterAttributeUpdate", listener);
-                }));
-            }
-        } else text && this.add(text), labelLine && this.add(labelLine);
+        this._syncStateWithRelatedGraphic(relatedGraphic), text && this.add(text), labelLine && this.add(labelLine), 
+        this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
         const {text: prevText, labelLine: prevLabelLine} = prevLabel, {text: curText, labelLine: curLabelLine} = currentLabel;
-        if (!1 !== this._enableAnimation && !1 !== this._animationConfig.update) {
-            const {duration: duration, easing: easing} = this._animationConfig.update;
-            updateAnimation(prevText, curText, this._animationConfig.update), prevLabelLine && curLabelLine && prevLabel.labelLine.animate().to(curLabelLine.attribute, duration, easing);
-        } else prevLabel.text.setAttributes(curText.attribute), prevLabelLine && curLabelLine && prevLabel.labelLine.setAttributes(curLabelLine.attribute);
+        !1 === this._enableAnimation || !1 === this._animationConfig.update ? (prevLabel.text.setAttributes(curText.attribute), 
+        prevLabelLine && curLabelLine && prevLabel.labelLine.setAttributes(curLabelLine.attribute)) : this._runUpdateAnimation(prevLabel, currentLabel);
     }
     _removeLabel(textMap) {
         const removeLabelAndLine = label => {
             this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
         };
-        if (!1 !== this._enableAnimation && !1 !== this._animationConfig.exit) {
-            const {duration: duration, easing: easing} = this._animationConfig.exit;
-            textMap.forEach((label => {
-                var _a;
-                null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, duration, easing).onEnd((() => {
-                    removeLabelAndLine(label);
-                }));
-            }));
-        } else textMap.forEach((label => {
+        !1 !== this._enableAnimation && !1 !== this._animationConfig.exit ? textMap.forEach((label => {
+            var _a;
+            label.text.applyAnimationState([ "exit" ], [ {
+                name: "exit",
+                animation: Object.assign(Object.assign({}, this._animationConfig.exit), {
+                    type: "fadeOut"
+                })
+            } ], (() => {
+                removeLabelAndLine(label);
+            })), null === (_a = label.labelLine) || void 0 === _a || _a.applyAnimationState([ "exit" ], [ {
+                name: "exit",
+                animation: Object.assign(Object.assign({}, this._animationConfig.exit), {
+                    type: "fadeOut"
+                })
+            } ], (() => {}));
+        })) : textMap.forEach((label => {
             removeLabelAndLine(label);
         }));
     }
@@ -435,51 +462,6 @@ export class LabelBase extends AbstractComponent {
             label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
         }));
     }
-    _syncStateWithRelatedGraphic(relatedGraphic) {
-        this.attribute.syncState && relatedGraphic && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
-    }
-    _afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, {mode: mode, duration: duration, easing: easing, delay: delay}) {
-        const listener = event => {
-            var _a, _b, _c;
-            const {detail: detail} = event;
-            if (!detail) return {};
-            const step = null === (_a = detail.animationState) || void 0 === _a ? void 0 : _a.step;
-            if (!(detail.type === AttributeUpdateType.ANIMATE_UPDATE && step && !("wait" === step.type && null == (null === (_b = step.prev) || void 0 === _b ? void 0 : _b.type)))) return {};
-            if (detail.type === AttributeUpdateType.ANIMATE_END) return text.setAttributes(to), 
-            void (labelLine && labelLine.setAttributes(to));
-            const onStart = () => {
-                relatedGraphic && (relatedGraphic.onAnimateBind = void 0, relatedGraphic.removeEventListener("afterAttributeUpdate", listener));
-            };
-            switch (mode) {
-              case "after":
-                detail.animationState.end && (text.animate({
-                    onStart: onStart
-                }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
-                break;
-
-              case "after-all":
-                index === texts.length - 1 && detail.animationState.end && (texts.forEach((t => {
-                    t.animate({
-                        onStart: onStart
-                    }).wait(delay).to(to, duration, easing);
-                })), labelLines.forEach((t => {
-                    t.animate().wait(delay).to(to, duration, easing);
-                })));
-                break;
-
-              default:
-                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 === (_c = this.stage) || void 0 === _c ? void 0 : _c.getPickerService()) || (text.animate({
-                        onStart: onStart
-                    }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
-                } else detail.animationState.isFirstFrameOfStep && (text.animate({
-                    onStart: onStart
-                }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
-            }
-        };
-        return listener;
-    }
     _smartInvert(labels) {
         var _a, _b, _c, _d, _e, _f, _g;
         const option = isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {}, {textType: textType, contrastRatiosThreshold: contrastRatiosThreshold, alternativeColors: alternativeColors, mode: mode, interactInvertType: interactInvertType} = 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;
@@ -487,7 +469,7 @@ export class LabelBase extends AbstractComponent {
             const label = labels[i];
             if (!label) continue;
             const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.attribute.fill, foregroundColor = label.attribute.fill;
+            let backgroundColor = baseMark.getAttributes(!0).fill, foregroundColor = label.attribute.fill;
             if (isObject(backgroundColor) && backgroundColor.gradient) {
                 const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
                 firstStopColor && (backgroundColor = firstStopColor, foregroundColor = firstStopColor);