@visactor/vrender-components 1.1.0-alpha.9 → 1.1.0

package/cjs/label/base.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.LabelBase = void 0;
 
-const vrender_core_1 = require("@visactor/vrender-core"), graphic_creator_1 = require("../util/graphic-creator"), vutils_1 = require("@visactor/vutils"), 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"), register_1 = require("./register"), shiftY_1 = require("./overlap/shiftY"), animate_component_1 = require("../animation/animate-component"), static_truth_1 = require("../animation/static-truth");
+const constant_1 = require("@visactor/vrender-core/event/constant"), path_1 = require("@visactor/vrender-core/path"), graphic_creator_1 = require("../util/graphic-creator"), vutils_1 = require("@visactor/vutils"), label_smartInvert_1 = require("../util/label-smartInvert"), util_1 = require("../util"), constant_2 = require("../constant"), overlap_1 = require("./overlap"), animate_1 = require("./animate/animate"), util_2 = require("./util"), register_1 = require("./register"), shiftY_1 = require("./overlap/shiftY"), animate_component_1 = require("../animation/animate-component"), static_truth_1 = require("../animation/static-truth"), exit_release_1 = require("../animation/exit-release");
 
 (0, register_1.loadLabelComponent)();
 
@@ -32,29 +32,29 @@ class LabelBase extends animate_component_1.AnimateComponent {
         }, (0, vutils_1.merge)({}, LabelBase.defaultAttributes, restAttributes))), 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), 
+            target === this._lastHover || (0, vutils_1.isEmpty)(target.states) || (target.addState(constant_2.StateValue.hover, !0), 
             (0, util_1.traverseGroup)(this, (node => {
-                node === target || (0, vutils_1.isEmpty)(node.states) || node.addState(constant_1.StateValue.hoverReverse, !0);
+                node === target || (0, vutils_1.isEmpty)(node.states) || node.addState(constant_2.StateValue.hoverReverse, !0);
             })), this._lastHover = target);
         }, this._onUnHover = e => {
             this._lastHover && ((0, util_1.traverseGroup)(this, (node => {
-                (0, vutils_1.isEmpty)(node.states) || (node.removeState(constant_1.StateValue.hoverReverse), 
-                node.removeState(constant_1.StateValue.hover));
+                (0, vutils_1.isEmpty)(node.states) || (node.removeState(constant_2.StateValue.hoverReverse), 
+                node.removeState(constant_2.StateValue.hover));
             })), this._lastHover = null);
         }, this._onClick = e => {
             const target = e.target;
             if (this._lastSelect === target && target.hasState("selected")) return this._lastSelect = null, 
             void (0, util_1.traverseGroup)(this, (node => {
-                (0, vutils_1.isEmpty)(node.states) || (node.removeState(constant_1.StateValue.selectedReverse), 
-                node.removeState(constant_1.StateValue.selected));
+                (0, vutils_1.isEmpty)(node.states) || (node.removeState(constant_2.StateValue.selectedReverse), 
+                node.removeState(constant_2.StateValue.selected));
             }));
-            (0, vutils_1.isEmpty)(target.states) || (target.addState(constant_1.StateValue.selected, !0), 
+            (0, vutils_1.isEmpty)(target.states) || (target.addState(constant_2.StateValue.selected, !0), 
             (0, util_1.traverseGroup)(this, (node => {
-                node === target || (0, vutils_1.isEmpty)(node.states) || node.addState(constant_1.StateValue.selectedReverse, !0);
+                node === target || (0, vutils_1.isEmpty)(node.states) || node.addState(constant_2.StateValue.selectedReverse, !0);
             })), this._lastSelect = target);
         }, this._handleRelatedGraphicSetState = e => {
             var _a, _b, _c, _d, _e;
-            if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === vrender_core_1.AttributeUpdateType.STATE || (null === (_b = e.detail) || void 0 === _b ? void 0 : _b.type) === vrender_core_1.AttributeUpdateType.ANIMATE_UPDATE && (null === (_c = e.detail.animationState) || void 0 === _c ? void 0 : _c.isFirstFrameOfStep)) {
+            if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === constant_1.AttributeUpdateType.STATE || (null === (_b = e.detail) || void 0 === _b ? void 0 : _b.type) === constant_1.AttributeUpdateType.ANIMATE_UPDATE && (null === (_c = e.detail.animationState) || void 0 === _c ? void 0 : _c.isFirstFrameOfStep)) {
                 const currentStates = null !== (_e = null === (_d = e.target) || void 0 === _d ? void 0 : _d.currentStates) && void 0 !== _e ? _e : [], labels = this._isCollectionBase ? [ ...this._graphicToText.values() ] : [ this._graphicToText.get(e.target) ];
                 this.updateStatesOfLabels(labels, currentStates);
             }
@@ -62,7 +62,7 @@ class LabelBase extends animate_component_1.AnimateComponent {
     }
     labeling(textBounds, graphicBounds, position, offset) {}
     _getLabelLinePoints(text, baseMark) {
-        return (0, util_2.connectLineBetweenBounds)(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
+        return (0, util_2.connectLineBetweenBounds)(text.AABBBounds, this.getGraphicFinalLayoutBounds(baseMark));
     }
     _createLabelLine(text, baseMark) {
         const points = this._getLabelLinePoints(text, baseMark);
@@ -75,20 +75,67 @@ class LabelBase extends animate_component_1.AnimateComponent {
                 lineGraphic.pathProxy = attrs => customShape({
                     text: text,
                     baseMark: baseMark
-                }, attrs, new vrender_core_1.CustomPath2D);
+                }, attrs, new path_1.CustomPath2D);
             }
-            return baseMark && baseMark.getAttributes(!0).fill && lineGraphic.setAttribute("stroke", baseMark.getAttributes(!0).fill), 
+            const baseMarkAttrs = baseMark && this.getGraphicFinalLayoutAttributes(baseMark);
+            return (null == baseMarkAttrs ? void 0 : baseMarkAttrs.fill) && lineGraphic.setAttribute("stroke", baseMarkAttrs.fill), 
             this.attribute.line && !(0, vutils_1.isEmpty)(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), 
             this._setStatesOfLabelLine(lineGraphic), lineGraphic;
         }
     }
+    _finalizeExitRelease() {
+        var _a, _b, _c, _d;
+        const state = this._exitReleaseState;
+        if (null == state ? void 0 : state.finalized) return;
+        state && (state.finalized = !0);
+        const parent = this.parent, removeFromParent = !!(null == state ? void 0 : state.removeFromParent), callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+        this._exitReleaseState = void 0, this._graphicToText = new Map, null === (_b = this._idToGraphic) || void 0 === _b || _b.clear(), 
+        null === (_c = this._idToPoint) || void 0 === _c || _c.clear(), this._baseMarks = void 0, 
+        this.removeAllChild(!0), super.release(!0), removeFromParent && (null === (_d = null != parent ? parent : this.parent) || void 0 === _d || _d.removeChild(this)), 
+        (0, exit_release_1.runExitReleaseCallbacks)(callbacks);
+    }
+    _runExitAnimationBeforeRelease(options = {}) {
+        var _a, _b;
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, 
+        (0, exit_release_1.appendExitReleaseCallback)(this._exitReleaseState, options.onComplete), 
+        !0;
+        if (!this.stage || !1 === this.attribute.animation || !1 === this.attribute.animationExit || !(null === (_a = this._graphicToText) || void 0 === _a ? void 0 : _a.size)) return !1;
+        if (this._prepareAnimate(animate_1.DefaultLabelAnimation), !(null === (_b = this._animationConfig) || void 0 === _b ? void 0 : _b.exit)) return !1;
+        const exitTargets = new Set;
+        if (this._graphicToText.forEach((label => {
+            (null == label ? void 0 : label.text) && exitTargets.add(label.text), (null == label ? void 0 : label.labelLine) && exitTargets.add(label.labelLine);
+        })), !exitTargets.size) return !1;
+        const existingAnimates = (0, exit_release_1.collectTrackedAnimates)(this);
+        exitTargets.forEach((target => {
+            var _a;
+            target.applyAnimationState([ "exit" ], [ {
+                name: "exit",
+                animation: Object.assign(Object.assign({}, this._animationConfig.exit), {
+                    type: null !== (_a = this._animationConfig.exit.type) && void 0 !== _a ? _a : "fadeOut",
+                    selfOnly: !0
+                })
+            } ]);
+        }));
+        const exitAnimates = (0, exit_release_1.collectTrackedAnimates)(this).filter((animate => !existingAnimates.includes(animate)));
+        if (!exitAnimates.length) return !1;
+        this.setAttribute("childrenPickable", !1), this.releaseStatus = "willRelease";
+        const pendingAnimates = new Set(exitAnimates);
+        return this._exitReleaseState = {
+            pendingAnimates: pendingAnimates,
+            finalized: !1,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [ options.onComplete ] : []
+        }, (0, exit_release_1.bindExitReleaseAnimates)(exitAnimates, (() => this._exitReleaseState), (() => this._finalizeExitRelease())), 
+        !0;
+    }
+    releaseWithExitAnimation(options = {}) {
+        return "released" !== this.releaseStatus && this._runExitAnimationBeforeRelease(options);
+    }
     render() {
-        if (this._prepare(), (0, vutils_1.isNil)(this._idToGraphic) || this._isCollectionBase && (0, 
+        if (this._exitReleaseState) return;
+        if (this._finalLayoutBoundsCache = void 0, this._prepare(), (0, vutils_1.isNil)(this._idToGraphic) || this._isCollectionBase && (0, 
         vutils_1.isNil)(this._idToPoint)) return;
-        const markAttributeList = [];
-        !1 !== this._enableAnimation && this._baseMarks.forEach((mark => {
-            markAttributeList.push(mark.attribute), mark.initAttributes(mark.getAttributes(!0));
-        }));
+        this._finalLayoutBoundsCache = new Map;
         const {overlap: overlap, smartInvert: smartInvert, dataFilter: dataFilter, customLayoutFunc: customLayoutFunc, customOverlapFunc: customOverlapFunc} = this.attribute;
         let data = this.attribute.data;
         if ((0, vutils_1.isFunction)(dataFilter) && (data = dataFilter(data)), data && data.length) {
@@ -109,9 +156,7 @@ class LabelBase extends animate_component_1.AnimateComponent {
         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]);
-        }));
+        this._finalLayoutBoundsCache = void 0;
     }
     _bindEvent(target) {
         if (this.attribute.disableTriggerEvent) return;
@@ -170,12 +215,38 @@ class LabelBase extends animate_component_1.AnimateComponent {
     getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
     }
+    getGraphicFinalLayoutAttributes(graphic) {
+        var _a, _b;
+        return null !== (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs) && void 0 !== _b ? _b : graphic.getAttributes(!0);
+    }
+    hasGraphicContextFinalLayoutAttributes(graphic) {
+        var _a;
+        return !!(null === (_a = null == graphic ? void 0 : graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs);
+    }
+    shouldUseGraphicFinalLayoutAttributes(graphic) {
+        var _a;
+        return !!graphic && (!!(null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.animationState) || this.hasGraphicContextFinalLayoutAttributes(graphic));
+    }
+    getGraphicFinalLayoutBounds(graphic) {
+        var _a, _b;
+        if (!graphic) return;
+        const useFinalAttrs = this.shouldUseGraphicFinalLayoutAttributes(graphic), graphicAttrs = useFinalAttrs ? this.getGraphicFinalLayoutAttributes(graphic) : graphic.attribute;
+        if (!1 === (null == graphicAttrs ? void 0 : graphicAttrs.visible)) return;
+        if (!useFinalAttrs) return graphic.AABBBounds;
+        const cachedBounds = null === (_a = this._finalLayoutBoundsCache) || void 0 === _a ? void 0 : _a.get(graphic);
+        if (cachedBounds) return cachedBounds;
+        const clonedGraphic = graphic.clone();
+        clonedGraphic.initAttributes(Object.assign(Object.assign({}, clonedGraphic.attribute), graphicAttrs));
+        const bounds = clonedGraphic.AABBBounds;
+        return null === (_b = this._finalLayoutBoundsCache) || void 0 === _b || _b.set(graphic, bounds), 
+        bounds;
+    }
     _initText(data = []) {
         const {textStyle: textStyle = {}} = this.attribute, labels = [];
         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({
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(baseMark), labelAttribute = Object.assign(Object.assign({
                 fill: this._isCollectionBase ? (0, vutils_1.isArray)(graphicAttribute.stroke) ? graphicAttribute.stroke.find((entry => !!entry && !0 !== entry)) : graphicAttribute.stroke : graphicAttribute.fill
             }, textStyle), textData), text = this._createLabelText(labelAttribute);
             labels.push(text);
@@ -273,7 +344,8 @@ class LabelBase extends animate_component_1.AnimateComponent {
         var _a;
         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((0, overlap_1.boundToRange)(bmpTool, mark.AABBBounds, !0));
+            const markBounds = this.getGraphicFinalLayoutBounds(mark);
+            markBounds && bitmap.setRange((0, overlap_1.boundToRange)(bmpTool, markBounds, !0));
         }))), avoidMarks.length > 0 && avoidMarks.forEach((avoid => {
             (0, vutils_1.isString)(avoid) ? (0, util_1.getNoneGroupMarksByName)(this.getRootNode(), avoid).forEach((avoidMark => {
                 avoidMark.AABBBounds && bitmap.setRange((0, overlap_1.boundToRange)(bmpTool, avoidMark.AABBBounds, !0));
@@ -288,7 +360,7 @@ class LabelBase extends animate_component_1.AnimateComponent {
                     bitmap.setRange((0, overlap_1.boundToRange)(bmpTool, text.AABBBounds, !0)), result.push(text);
                     continue;
                 }
-                if (checkBounds && baseMark && baseMark.AABBBounds && this._canPlaceInside(text.AABBBounds, baseMark.AABBBounds)) {
+                if (checkBounds && baseMark && this._canPlaceInside(text.AABBBounds, this.getGraphicFinalLayoutBounds(baseMark))) {
                     bitmap.setRange((0, overlap_1.boundToRange)(bmpTool, text.AABBBounds, !0)), result.push(text);
                     continue;
                 }
@@ -314,14 +386,15 @@ class LabelBase extends animate_component_1.AnimateComponent {
         return result;
     }
     isMarkInsideRect(baseMark, bmpTool) {
+        if (!baseMark) return !1;
         const {left: left, right: right, top: top, bottom: bottom} = bmpTool.padding, rect = {
             x1: -left,
             x2: bmpTool.width + right,
             y1: -top,
             y2: bmpTool.height + bottom
-        }, bounds = baseMark.AABBBounds;
-        if (0 !== bounds.width() && 0 !== bounds.height()) return (0, vutils_1.isRectIntersect)(baseMark.AABBBounds, rect, !0);
-        const {attribute: attribute} = baseMark;
+        }, bounds = this.getGraphicFinalLayoutBounds(baseMark);
+        if (bounds && 0 !== bounds.width() && 0 !== bounds.height()) return (0, vutils_1.isRectIntersect)(bounds, rect, !0);
+        const attribute = this.shouldUseGraphicFinalLayoutAttributes(baseMark) ? this.getGraphicFinalLayoutAttributes(baseMark) : baseMark.attribute;
         if ("rect" === baseMark.type) {
             const {x: x, x1: x1, y: y, y1: y1} = attribute;
             return (0, vutils_1.pointInRect)({
@@ -339,16 +412,10 @@ class LabelBase extends animate_component_1.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;
-            }
-            const {x: x, y: y} = graphic.attribute;
+            const graphicAttrs = this.shouldUseGraphicFinalLayoutAttributes(graphic) ? this.getGraphicFinalLayoutAttributes(graphic) : graphic.attribute;
+            if (!1 !== graphicAttrs.visible) return this.getGraphicFinalLayoutBounds(graphic);
+            const {x: x, y: y} = graphicAttrs;
             return {
                 x1: x,
                 x2: x,
@@ -481,16 +548,16 @@ class LabelBase extends animate_component_1.AnimateComponent {
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
             const label = labels[i];
             if (!label) continue;
-            const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.getAttributes(!0).fill;
-            const backgroundOpacity = baseMark.getAttributes(!0).fillOpacity;
+            const baseMark = this.getRelatedGraphic(label.attribute), baseMarkAttrs = this.getGraphicFinalLayoutAttributes(baseMark);
+            let backgroundColor = baseMarkAttrs.fill;
+            const backgroundOpacity = baseMarkAttrs.fillOpacity;
             let foregroundColor = label.attribute.fill;
             if ((0, vutils_1.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);
             }
             const invertColor = (0, label_smartInvert_1.labelSmartInvert)(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode), similarColor = (0, 
-            label_smartInvert_1.contrastAccessibilityChecker)(invertColor, brightColor) ? brightColor : darkColor, isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds), isIntersect = !isInside && label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds);
+            label_smartInvert_1.contrastAccessibilityChecker)(invertColor, brightColor) ? brightColor : darkColor, baseMarkBounds = this.getGraphicFinalLayoutBounds(baseMark), isInside = this._canPlaceInside(label.AABBBounds, baseMarkBounds), isIntersect = !isInside && label.AABBBounds && baseMarkBounds && baseMarkBounds.intersects(label.AABBBounds);
             if (isInside || outsideEnable || isIntersect && "inside" === interactInvertType) {
                 const fill = (0, label_smartInvert_1.smartInvertStrategy)(fillStrategy, backgroundColor, invertColor, similarColor);
                 if (fill && label.setAttributes({
@@ -540,6 +607,12 @@ class LabelBase extends animate_component_1.AnimateComponent {
     _canPlaceInside(textBound, shapeBound) {
         return !(!textBound || !shapeBound) && shapeBound.encloses(textBound);
     }
+    release(all) {
+        var _a, _b;
+        this._exitReleaseState ? this._finalizeExitRelease() : (all && this.removeAllChild(!0), 
+        super.release(all), this._graphicToText = new Map, null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), 
+        null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), this._baseMarks = void 0);
+    }
     setLocation(point) {
         this.translateTo(point.x, point.y);
     }