@visactor/vrender-components 0.22.15-alpha.1 → 0.22.16

package/es/label/base.js

@@ -8,10 +8,12 @@ var __rest = this && this.__rest || function(s, e) {
     return t;
 };
 
-import { graphicCreator, AttributeUpdateType, CustomPath2D } from "@visactor/vrender-core";
+import { graphicCreator, AttributeUpdateType, IContainPointMode, 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";
@@ -20,7 +22,7 @@ import { StateValue } from "../constant";
 
 import { bitmapTool, boundToRange, canPlace, clampText, place } from "./overlap";
 
-import { DefaultLabelAnimation } from "./animate/animate";
+import { DefaultLabelAnimation, getAnimationAttributes, updateAnimation } from "./animate/animate";
 
 import { connectLineBetweenBounds, getPointsOfLineArea } from "./util";
 
@@ -28,11 +30,9 @@ import { loadLabelComponent } from "./register";
 
 import { shiftY } from "./overlap/shiftY";
 
-import { AnimateComponent } from "../animation/animate-component";
-
 loadLabelComponent();
 
-export class LabelBase extends AnimateComponent {
+export class LabelBase extends AbstractComponent {
     setBitmap(bitmap) {
         this._bitmap = bitmap;
     }
@@ -88,17 +88,13 @@ export class LabelBase extends AnimateComponent {
                     baseMark: baseMark
                 }, attrs, new CustomPath2D);
             }
-            return baseMark && baseMark.getAttributes(!0).fill && lineGraphic.setAttribute("stroke", baseMark.getAttributes(!0).fill), 
+            return baseMark && baseMark.attribute.fill && lineGraphic.setAttribute("stroke", baseMark.attribute.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) {
@@ -111,10 +107,7 @@ export class LabelBase extends AnimateComponent {
         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 !== this._enableAnimation && this._baseMarks.forEach(((mark, index) => {
-            mark.initAttributes(markAttributeList[index]);
-        }));
+        })), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
     }
     _bindEvent(target) {
         if (this.attribute.disableTriggerEvent) return;
@@ -167,7 +160,18 @@ export class LabelBase extends AnimateComponent {
                 textData && baseMark && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), 
                 this._idToGraphic.set(textData.id, baseMark));
             }
-            this._prepareAnimate(DefaultLabelAnimation);
+            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
+            };
         }
     }
     getRelatedGraphic(item) {
@@ -178,8 +182,8 @@ export class LabelBase extends AnimateComponent {
         for (let i = 0; i < data.length; i++) {
             const textData = data[i], baseMark = this.getRelatedGraphic(textData);
             if (!baseMark) continue;
-            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
+            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
             }, textStyle), textData), text = this._createLabelText(labelAttribute);
             labels.push(text);
         }
@@ -217,13 +221,15 @@ export class LabelBase extends AnimateComponent {
     }
     _overlapGlobal(labels, option, bmpTool, bitmap) {
         let result = labels.filter((label => label.attribute.visible && 0 !== label.attribute.opacity && this.isMarkInsideRect(this.getRelatedGraphic(label.attribute), bmpTool)));
-        const {clampForce: clampForce = !0, hideOnHit: hideOnHit = !0, overlapPadding: overlapPadding, strategy: strategy} = option;
-        if (clampForce) for (let i = 0; i < result.length; i++) {
+        const {clampForce: clampForce = !0, hideOnHit: hideOnHit = !0, hideOnOverflow: hideOnOverflow = !1, overlapPadding: overlapPadding, strategy: strategy} = option;
+        if (clampForce || hideOnOverflow) for (let i = 0; i < result.length; i++) {
             const text = labels[i], {dx: dx = 0, dy: dy = 0} = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
-            0 === dx && 0 === dy || (text.setAttributes({
+            0 === dx && 0 === dy || (hideOnOverflow ? text.setAttributes({
+                visible: !1
+            }) : (text.setAttributes({
                 x: text.attribute.x + dx,
                 y: text.attribute.y + dy
-            }), text._isClamped = !0);
+            }), text._isClamped = !0));
         }
         result = shiftY(result, Object.assign(Object.assign({
             maxY: bmpTool.height
@@ -236,9 +242,9 @@ export class LabelBase extends AnimateComponent {
         for (let i = 0; i < result.length; i++) {
             const text = result[i], bounds = text.AABBBounds, range = boundToRange(bmpTool, bounds, !0);
             if (canPlace(bmpTool, bitmap, bounds, clampForce, overlapPadding)) bitmap.setRange(range); else {
-                if (clampForce) {
-                    if (this._processClampForce(text, bmpTool, bitmap, overlapPadding)) continue;
-                }
+                if (hideOnOverflow) {
+                    if (this._processHideOnOverflow(text, bmpTool)) continue;
+                } else if (clampForce && this._processClampForce(text, bmpTool, bitmap, overlapPadding)) continue;
                 hideOnHit ? text.setAttributes({
                     visible: !1
                 }) : bitmap.setRange(range);
@@ -246,6 +252,12 @@ export class LabelBase extends AnimateComponent {
         }
         return result;
     }
+    _processHideOnOverflow(text, bmpTool) {
+        const {dy: dy = 0, dx: dx = 0} = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
+        return 0 === dx && 0 === dy || (text.setAttributes({
+            visible: !1
+        }), !1);
+    }
     _processClampForce(text, bmpTool, bitmap, overlapPadding = 0) {
         const {dy: dy = 0, dx: dx = 0} = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
         if (0 === dx && 0 === dy) {
@@ -264,7 +276,7 @@ export class LabelBase extends AnimateComponent {
     }
     _overlapByStrategy(labels, option, bmpTool, bitmap) {
         var _a;
-        const {avoidBaseMark: avoidBaseMark, strategy: strategy = [], hideOnHit: hideOnHit = !0, clampForce: clampForce = !0, avoidMarks: avoidMarks = [], overlapPadding: overlapPadding} = option, result = [], checkBounds = strategy.some((s => "bound" === s.type));
+        const {avoidBaseMark: avoidBaseMark, strategy: strategy = [], hideOnHit: hideOnHit = !0, clampForce: clampForce = !0, avoidMarks: avoidMarks = [], overlapPadding: overlapPadding, hideOnOverflow: hideOnOverflow = !1} = option, result = [], checkBounds = strategy.some((s => "bound" === s.type));
         avoidBaseMark && (null === (_a = this._baseMarks) || void 0 === _a || _a.forEach((mark => {
             mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, !0));
         }))), avoidMarks.length > 0 && avoidMarks.forEach((avoid => {
@@ -288,15 +300,16 @@ export class LabelBase extends AnimateComponent {
             }
             let hasPlace = !1;
             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,
-                    y: hasPlace.y
-                }), result.push(text);
+            !1 !== hasPlace && (text.setAttributes({
+                x: hasPlace.x,
+                y: hasPlace.y
+            }), !hideOnOverflow || this._processHideOnOverflow(text, bmpTool))) {
+                result.push(text);
                 break;
             }
-            if (!hasPlace && clampForce) {
-                if (this._processClampForce(text, bmpTool, bitmap, overlapPadding)) {
+            if (!hasPlace) {
+                if (hideOnOverflow && !this._processHideOnOverflow(text, bmpTool)) continue;
+                if (clampForce && this._processClampForce(text, bmpTool, bitmap, overlapPadding)) {
                     result.push(text);
                     continue;
                 }
@@ -331,15 +344,8 @@ export class LabelBase extends AnimateComponent {
         if (baseMarkGroupName) return this.getRootNode().find((node => node.name === baseMarkGroupName), !0);
     }
     getGraphicBounds(graphic, point = {}, position) {
-        var _a;
         if (graphic) {
-            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;
-            }
+            if (!1 !== graphic.attribute.visible) return graphic.AABBBounds;
             const {x: x, y: y} = graphic.attribute;
             return {
                 x1: x,
@@ -372,88 +378,64 @@ export class LabelBase extends AnimateComponent {
             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;
-            showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic));
-            const currentLabel = labelLine ? {
+            if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), 
+            syncState && this.updateStatesOfLabels([ labelLine ? {
                 text: text,
                 labelLine: labelLine
             } : {
                 text: text
-            };
-            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) {
+            } ], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), "enter" === state) texts.push(text), 
+            currentTextMap.set(textKey, labelLine ? {
+                text: text,
+                labelLine: labelLine
+            } : {
+                text: text
+            }), this._addLabel({
+                text: text,
+                labelLine: labelLine
+            }, texts, labelLines, index); else if ("update" === state) {
                 const prevLabel = prevTextMap.get(textKey);
-                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), this._updateLabel(prevLabel, currentLabel);
+                prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), this._updateLabel(prevLabel, {
+                    text: text,
+                    labelLine: labelLine
+                });
             }
         })), 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);
-        this._syncStateWithRelatedGraphic(relatedGraphic), text && this.add(text), labelLine && this.add(labelLine), 
-        this.runEnterAnimation(text, labelLine);
+        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);
     }
     _updateLabel(prevLabel, currentLabel) {
         const {text: prevText, labelLine: prevLabelLine} = prevLabel, {text: curText, labelLine: curLabelLine} = currentLabel;
-        !1 === this._enableAnimation || !1 === this._animationConfig.update ? (prevLabel.text.setAttributes(curText.attribute), 
-        prevLabelLine && curLabelLine && prevLabel.labelLine.setAttributes(curLabelLine.attribute)) : this._runUpdateAnimation(prevLabel, 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);
     }
     _removeLabel(textMap) {
         const removeLabelAndLine = label => {
             this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
         };
-        !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 => {
+        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 => {
             removeLabelAndLine(label);
         }));
     }
@@ -462,6 +444,51 @@ export class LabelBase extends AnimateComponent {
             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;
@@ -469,7 +496,7 @@ export class LabelBase extends AnimateComponent {
             const label = labels[i];
             if (!label) continue;
             const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.getAttributes(!0).fill, foregroundColor = label.attribute.fill;
+            let backgroundColor = baseMark.attribute.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);