@visactor/vrender-components 0.14.6-alpha.8 → 0.14.6-alpha.9

package/dist/index.js

@@ -310,14 +310,14 @@
         scrollRange: [0, 1]
     };
 
-    function _typeof(o) {
+    function _typeof(obj) {
       "@babel/helpers - typeof";
 
-      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-        return typeof o;
-      } : function (o) {
-        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-      }, _typeof(o);
+      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+        return typeof obj;
+      } : function (obj) {
+        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      }, _typeof(obj);
     }
 
     function __rest(s, e) {
@@ -495,20 +495,6 @@
         const { r, g, b } = c.color;
         return '#' + vutils.ColorUtil.rgbToHex(r, g, b);
     }
-    function smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor) {
-        let result;
-        switch (fillStrategy) {
-            case 'base':
-                result = baseColor;
-                break;
-            case 'invertBase':
-                result = invertColor;
-                break;
-            case 'similarBase':
-                result = similarColor;
-        }
-        return result;
-    }
 
     function scale(vector, scale) {
         return [vector[0] * scale, vector[1] * scale];
@@ -575,16 +561,16 @@
             }, getTextBounds: useNaiveCanvas ? undefined : vrender.getTextBounds, specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), textSpec);
     };
     function measureTextSize(text, textSpec) {
-        var _a, _b;
+        var _a;
         if (!text) {
             return { width: 0, height: 0 };
         }
         const bounds = vrender.getTextBounds({
             text,
-            fontFamily: (_a = textSpec.fontFamily) !== null && _a !== void 0 ? _a : '',
+            fontFamily: textSpec.fontFamily,
             fontSize: textSpec.fontSize || 12,
             fontWeight: textSpec.fontWeight,
-            textAlign: (_b = textSpec.textAlign) !== null && _b !== void 0 ? _b : 'center',
+            textAlign: (_a = textSpec.textAlign) !== null && _a !== void 0 ? _a : 'center',
             textBaseline: textSpec.textBaseline,
             ellipsis: !!textSpec.ellipsis,
             maxLineWidth: textSpec.maxLineWidth || Infinity,
@@ -717,14 +703,14 @@
             this.positionList = ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'];
         }
         render() {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             const { title = '', titleStyle = {}, position, content = '', contentStyle = {}, panel = {}, space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, visible, state, dx = 0, dy = 0 } = this.attribute;
             const parsedPadding = vutils.normalizePadding(padding);
             const group = this.createOrUpdateChild('poptip-content', { x: 0, y: 0, zIndex: 1 }, 'group');
             const maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3];
             const titleVisible = vutils.isValid(title) && visible !== false;
-            const titleAttrs = Object.assign(Object.assign({ text: title, visible: titleVisible }, titleStyle), { x: parsedPadding[3], y: parsedPadding[0], maxLineWidth, textAlign: 'left', textBaseline: 'top' });
-            const titleShape = group.createOrUpdateChild('poptip-title', titleAttrs, 'text');
+            const titleAttrs = Object.assign(Object.assign({ text: vutils.isArray(title) ? title : [title], visible: titleVisible }, titleStyle), { x: parsedPadding[3], y: parsedPadding[0], maxLineWidth, textAlign: 'left', textBaseline: 'top' });
+            const titleShape = group.createOrUpdateChild('poptip-title', titleAttrs, 'wrapText');
             if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.title)) {
                 titleShape.states = state.title;
             }
@@ -736,8 +722,8 @@
                 height = 0;
             }
             const contentVisible = vutils.isValid(content) && visible !== false;
-            const contentAttrs = Object.assign(Object.assign({ text: content, visible: contentVisible }, contentStyle), { x: parsedPadding[3], y: parsedPadding[0] + height, maxLineWidth, textAlign: 'left', textBaseline: 'top' });
-            const contentShape = group.createOrUpdateChild('poptip-content', contentAttrs, 'text');
+            const contentAttrs = Object.assign(Object.assign({ text: vutils.isArray(content) ? content : [content], visible: contentVisible }, contentStyle), { x: parsedPadding[3], y: parsedPadding[0] + height, maxLineWidth, textAlign: 'left', textBaseline: 'top' });
+            const contentShape = group.createOrUpdateChild('poptip-content', contentAttrs, 'wrapText');
             if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.content)) {
                 contentShape.states = state.content;
             }
@@ -754,7 +740,7 @@
             else if (popTipWidth < minWidth) {
                 popTipWidth = minWidth;
             }
-            const poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
+            let poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
             const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
             const symbolSize = (_a = backgroundStyle.size) !== null && _a !== void 0 ? _a : 12;
             const spaceSize = vutils.isArray(symbolSize)
@@ -762,8 +748,29 @@
                 : symbolSize + ((_d = backgroundStyle.space) !== null && _d !== void 0 ? _d : 0);
             const lineWidth = (_e = backgroundStyle.lineWidth) !== null && _e !== void 0 ? _e : 1;
             const range = this.stage
-                ? [this.stage.width, this.stage.height]
+                ? [
+                    (_f = this.stage.viewWidth) !== null && _f !== void 0 ? _f : this.stage.width,
+                    (_g = this.stage.viewHeight) !== null && _g !== void 0 ? _g : this.stage.height
+                ]
                 : undefined;
+            if (range) {
+                const b = this.AABBBounds;
+                const leftWidth = b.x1;
+                const rightWidth = range[0] - b.x1;
+                let maxSpace = Math.max(leftWidth, rightWidth);
+                maxSpace = Math.max(maxSpace - 10, maxSpace * 0.7);
+                if (maxSpace < popTipWidth) {
+                    popTipWidth = maxSpace;
+                    const buf = parsedPadding[1] + parsedPadding[3];
+                    titleShape.setAttribute('maxLineWidth', maxSpace - buf);
+                    contentShape.setAttribute('maxLineWidth', maxSpace - buf);
+                    poptipHeight = parsedPadding[0] + parsedPadding[2];
+                    if (titleVisible) {
+                        poptipHeight += titleShape.AABBBounds.height() + space;
+                    }
+                    poptipHeight += contentShape.AABBBounds.height();
+                }
+            }
             const layout = position === 'auto';
             let maxBBoxI;
             let maxBBoxSize = -Infinity;
@@ -1070,13 +1077,20 @@
         injectable()
     ], PopTipForClipedTextPlugin);
 
-    const popTipModule = new ContainerModule(bind => {
-        bind(PopTipRenderContribution).toSelf().inSingletonScope();
-        bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
-        bind(PopTipPlugin).toSelf().inSingletonScope();
-        bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
-        bind(PopTipForClipedTextPlugin).toSelf().inSingletonScope();
-        bind(vrender.AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
+    const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+        if (!isBound(PopTipRenderContribution) || !isBound(PopTipPlugin) || !isBound(PopTipForClipedTextPlugin)) {
+            bind(PopTipRenderContribution).toSelf().inSingletonScope();
+            bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
+            bind(PopTipPlugin).toSelf();
+            bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
+            bind(PopTipForClipedTextPlugin).toSelf();
+            bind(vrender.AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
+        }
+        else {
+            rebind(PopTipRenderContribution).toSelf().inSingletonScope();
+            rebind(PopTipPlugin).toSelf();
+            rebind(PopTipForClipedTextPlugin).toSelf();
+        }
     });
     function loadPoptip(defaultPoptipTheme) {
         vutils.merge(theme.poptip, defaultPoptipTheme);
@@ -1409,29 +1423,26 @@
         };
     }
 
-    function canPlace($, bitmap, bound, checkBound = true, pad = 0) {
-        let range = bound;
-        if (pad > 0) {
-            range = {
-                x1: bound.x1 - pad,
-                x2: bound.x2 + pad,
-                y1: bound.y1 - pad,
-                y2: bound.y2 + pad
-            };
-        }
-        range = boundToRange($, range);
+    function canPlace($, bitmap, bound, checkBound = true) {
+        const range = boundToRange($, bound);
         const outOfBounds = checkBound && bitmap.outOfBounds(range);
         if (outOfBounds) {
             return false;
         }
         return !bitmap.getRange(range);
     }
-    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true, pad = 0) {
+    function canPlaceInside(textBound, shapeBound) {
+        if (!textBound || !shapeBound) {
+            return false;
+        }
+        return shapeBound.encloses(textBound);
+    }
+    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true) {
         for (let i = 0; i < candidates.length; i++) {
             const tempText = text.clone();
             tempText.setAttributes(candidates[i]);
             tempText.update();
-            if (canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce, pad)) {
+            if (canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce)) {
                 bitmap.setRange(boundToRange($, tempText.AABBBounds, true));
                 return candidates[i];
             }
@@ -1439,15 +1450,13 @@
         return false;
     }
     function place($, bitmap, s, attrs, text, bounds, labeling) {
-        var _a, _b;
-        const clampForce = (_a = attrs.overlap) === null || _a === void 0 ? void 0 : _a.clampForce;
-        const overlapPadding = (_b = attrs.overlap) === null || _b === void 0 ? void 0 : _b.overlapPadding;
+        var _a, _b, _c;
         if (s.type === 'bound' || s.type === 'position') {
             if (vutils.isFunction(labeling)) {
                 const userPosition = vutils.isFunction(s.position) ? s.position(text.attribute) : s.position;
                 const positions = (userPosition || defaultLabelPosition(attrs.type));
                 const candidates = positions.map(p => labeling(text.AABBBounds, bounds, p, attrs.offset));
-                return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+                return placeToCandidates($, bitmap, text, candidates, (_a = attrs.overlap) === null || _a === void 0 ? void 0 : _a.clampForce);
             }
             return false;
         }
@@ -1456,14 +1465,14 @@
             const candidates = offset.map(dy => {
                 return { x: text.attribute.x, y: text.attribute.y + dy };
             });
-            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+            return placeToCandidates($, bitmap, text, candidates, (_b = attrs.overlap) === null || _b === void 0 ? void 0 : _b.clampForce);
         }
         if (s.type === 'moveX') {
             const offset = s.offset ? (vutils.isFunction(s.offset) ? s.offset(text.attribute) : s.offset) : [];
             const candidates = offset.map(dx => {
                 return { x: text.attribute.x + dx, y: text.attribute.y };
             });
-            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+            return placeToCandidates($, bitmap, text, candidates, (_c = attrs.overlap) === null || _c === void 0 ? void 0 : _c.clampForce);
         }
         return false;
     }
@@ -1551,14 +1560,8 @@
     };
 
     class LabelBase extends AbstractComponent {
-        setBitmap(bitmap) {
-            this._bitmap = bitmap;
-        }
-        setBitmapTool(bmpTool) {
-            this._bmpTool = bmpTool;
-        }
-        constructor(attributes) {
-            super(vutils.merge({}, LabelBase.defaultAttributes, attributes));
+        constructor() {
+            super(...arguments);
             this.name = 'label';
             this._onHover = (e) => {
                 const target = e.target;
@@ -1606,11 +1609,15 @@
                 }
             };
         }
-        labeling(textBounds, graphicBounds, position, offset) {
-            return;
+        setBitmap(bitmap) {
+            this._bitmap = bitmap;
         }
-        _labelLine(text) {
-            return;
+        setBitmapTool(bmpTool) {
+            this._bmpTool = bmpTool;
+        }
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
+            const arcs = [];
+            return arcs;
         }
         render() {
             this._prepare();
@@ -1624,14 +1631,14 @@
                 labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
             }
             else {
-                labels = this._layout(data);
-            }
-            if (vutils.isFunction(customOverlapFunc)) {
-                labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
-            }
-            else {
-                if (overlap !== false) {
-                    labels = this._overlapping(labels);
+                labels = this.layout(data);
+                if (vutils.isFunction(customOverlapFunc)) {
+                    labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+                }
+                else {
+                    if (overlap !== false) {
+                        labels = this._overlapping(labels);
+                    }
                 }
             }
             if (smartInvert !== false) {
@@ -1700,24 +1707,49 @@
                 }
             }
         }
-        _layout(data = []) {
+        layout(data = []) {
             const { textStyle = {}, position, offset } = this.attribute;
             const labels = [];
+            const textBoundsArray = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
                 const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = Object.assign(Object.assign({ fill: baseMark.attribute.fill }, textStyle), textData);
                 const text = this._createLabelText(labelAttribute);
                 const textBounds = this.getGraphicBounds(text);
+                textBoundsArray.push(textBounds);
                 const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
                 const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                if (textLocation) {
-                    labelAttribute.x = textLocation.x;
-                    labelAttribute.y = textLocation.y;
-                    text.setAttributes(textLocation);
+                if (!textLocation) {
+                    continue;
                 }
+                labelAttribute.x = textLocation.x;
+                labelAttribute.y = textLocation.y;
+                text.setAttributes(textLocation);
                 labels.push(text);
             }
+            if (this.attribute.type === 'arc') {
+                const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
+                const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
+                const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
+                const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
+                for (let i = 0; i < data.length; i++) {
+                    const textData = data[i];
+                    const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
+                    const labelAttribute = {
+                        visible: basedArc.labelVisible,
+                        x: basedArc.labelPosition.x,
+                        y: basedArc.labelPosition.y,
+                        angle: basedArc.angle,
+                        maxLineWidth: basedArc.labelLimit,
+                        points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
+                            ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
+                            : undefined
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                }
+            }
             return labels;
         }
         _overlapping(labels) {
@@ -1735,7 +1767,7 @@
             if (size.width === 0 || size.height === 0) {
                 return labels;
             }
-            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [] } = option;
             const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
             const bitmap = this._bitmap || bmpTool.bitmap();
             const checkBounds = strategy.some(s => s.type === 'bound');
@@ -1763,16 +1795,13 @@
                 const text = labels[i];
                 const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
-                if (!vutils.isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
-                    continue;
-                }
-                if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce, overlapPadding)) {
+                if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
                     }
-                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
+                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
@@ -1795,7 +1824,7 @@
                             x2: text.AABBBounds.x2 + dx,
                             y1: text.AABBBounds.y1 + dy,
                             y2: text.AABBBounds.y2 + dy
-                        }, undefined, overlapPadding)) {
+                        })) {
                         text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
@@ -1826,17 +1855,9 @@
                 });
         }
         _renderLabels(labels) {
-            const disableAnimation = this._enableAnimation === false || this.attribute.animation === false;
-            if (disableAnimation) {
-                this._renderWithOutAnimation(labels);
-            }
-            else {
-                this._renderWithAnimation(labels);
-            }
-        }
-        _renderWithAnimation(labels) {
             var _a, _b, _c, _d, _e;
             const animationConfig = ((_a = this.attribute.animation) !== null && _a !== void 0 ? _a : {});
+            const disableAnimation = this._enableAnimation === false || animationConfig === false;
             const mode = (_b = animationConfig.mode) !== null && _b !== void 0 ? _b : DefaultLabelAnimation.mode;
             const duration = (_c = animationConfig.duration) !== null && _c !== void 0 ? _c : DefaultLabelAnimation.duration;
             const easing = (_d = animationConfig.easing) !== null && _d !== void 0 ? _d : DefaultLabelAnimation.easing;
@@ -1845,18 +1866,27 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                var _a;
-                const labelLine = this._labelLine(text);
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
+                    ? vrender.createLine({
+                        visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
+                        stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
+                        lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
+                        points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
+                    })
+                    : undefined;
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    if (relatedGraphic) {
+                    if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
-                        labelLine && this.add(labelLine);
-                        relatedGraphic.once('animate-bind', () => {
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
+                        relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                                 mode,
@@ -1866,69 +1896,58 @@
                                 delay
                             });
                             relatedGraphic.on('afterAttributeUpdate', listener);
-                        });
+                        };
+                    }
+                    else {
+                        this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                     }
                 }
-                else if (state === 'update') {
+                if (state === 'update') {
                     const prevLabel = prevTextMap.get(relatedGraphic);
                     prevTextMap.delete(relatedGraphic);
                     currentTextMap.set(relatedGraphic, prevLabel);
-                    const prevText = prevLabel.text;
-                    prevText.animate().to(text.attribute, duration, easing);
-                    if (prevLabel.labelLine) {
-                        prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
-                            points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points
-                        }), duration, easing);
+                    if (!disableAnimation) {
+                        const prevText = prevLabel.text;
+                        prevText.animate().to(text.attribute, duration, easing);
+                        if (prevLabel.labelLine) {
+                            prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
+                                points: (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.points
+                            }), duration, easing);
+                        }
+                        if (animationConfig.increaseEffect !== false &&
+                            prevText.attribute.text !== text.attribute.text &&
+                            vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
+                            prevText
+                                .animate()
+                                .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
+                        }
                     }
-                    if (animationConfig.increaseEffect !== false &&
-                        prevText.attribute.text !== text.attribute.text &&
-                        vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
-                        prevText
-                            .animate()
-                            .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
+                    else {
+                        prevLabel.text.setAttributes(text.attribute);
+                        if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
+                            prevLabel.labelLine.setAttributes({ points: (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.points });
+                        }
                     }
                 }
             });
             prevTextMap.forEach(label => {
                 var _a;
-                (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+                if (disableAnimation) {
                     this.removeChild(label.text);
                     if (label === null || label === void 0 ? void 0 : label.labelLine) {
                         this.removeChild(label.labelLine);
                     }
-                });
-            });
-            this._graphicToText = currentTextMap;
-        }
-        _renderWithOutAnimation(labels) {
-            const currentTextMap = new Map();
-            const prevTextMap = this._graphicToText || new Map();
-            labels.forEach(text => {
-                var _a;
-                const labelLine = this._labelLine(text);
-                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
-                const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
-                if (state === 'enter') {
-                    currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    this.add(text);
-                    if (labelLine) {
-                        this.add(labelLine);
-                    }
-                }
-                else if (state === 'update') {
-                    const prevLabel = prevTextMap.get(relatedGraphic);
-                    prevTextMap.delete(relatedGraphic);
-                    currentTextMap.set(relatedGraphic, prevLabel);
-                    prevLabel.text.setAttributes(text.attribute);
-                    if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
-                        prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
-                    }
                 }
-            });
-            prevTextMap.forEach(label => {
-                this.removeChild(label.text);
-                if (label === null || label === void 0 ? void 0 : label.labelLine) {
-                    this.removeChild(label.labelLine);
+                else {
+                    (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+                        this.removeChild(label.text);
+                        if (label === null || label === void 0 ? void 0 : label.labelLine) {
+                            this.removeChild(label.labelLine);
+                        }
+                    });
                 }
             });
             this._graphicToText = currentTextMap;
@@ -1999,20 +2018,21 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                let isInside = canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                if (this.attribute.type === 'arc') {
+                    isInside = this.attribute.position === 'inside';
+                }
                 const backgroundColor = baseMark.attribute.fill;
                 const foregroundColor = label.attribute.fill;
                 const baseColor = backgroundColor;
                 const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
-                const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+                const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
                 if (isInside) {
-                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-                    fill && label.setAttributes({ fill });
+                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
                     if (label.attribute.lineWidth === 0) {
                         continue;
                     }
-                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-                    stroke && label.setAttributes({ stroke });
+                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
                 }
                 else {
                     if (label.attribute.lineWidth === 0) {
@@ -2024,18 +2044,47 @@
                         });
                         continue;
                     }
-                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-                    fill && label.setAttributes({ fill });
-                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-                    stroke && label.setAttributes({ stroke });
+                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
+                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
                 }
             }
         }
-        _canPlaceInside(textBound, shapeBound) {
-            if (!textBound || !shapeBound) {
-                return false;
+        setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor) {
+            switch (fillStrategy) {
+                case 'base':
+                    label.setAttributes({
+                        fill: baseColor
+                    });
+                    break;
+                case 'invertBase':
+                    label.setAttributes({
+                        fill: invertColor
+                    });
+                    break;
+                case 'similarBase':
+                    label.setAttributes({
+                        fill: simialrColor
+                    });
+            }
+        }
+        setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor) {
+            switch (strokeStrategy) {
+                case 'base':
+                    label.setAttributes({
+                        stroke: baseColor
+                    });
+                    break;
+                case 'invertBase':
+                    label.setAttributes({
+                        stroke: invertColor
+                    });
+                    break;
+                case 'similarBase':
+                    label.setAttributes({
+                        stroke: simialrColor
+                    });
+                    break;
             }
-            return shapeBound.encloses(textBound);
         }
         setLocation(point) {
             this.translateTo(point.x, point.y);
@@ -2047,16 +2096,6 @@
             this._enableAnimation = true;
         }
     }
-    LabelBase.defaultAttributes = {
-        textStyle: {
-            fontSize: 12,
-            textAlign: 'center',
-            textBaseline: 'middle',
-            boundsPadding: [-1, 0, -1, 0]
-        },
-        offset: 0,
-        pickable: false
-    };
 
     class SymbolLabel extends LabelBase {
         constructor(attributes) {
@@ -2411,31 +2450,6 @@
             }
             return { x: 0, y: 0 };
         }
-        _layout(data = []) {
-            const labels = super._layout(data);
-            const textBoundsArray = labels.map(label => this.getGraphicBounds(label));
-            const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
-            const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
-            const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
-            const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
-            const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
-            for (let i = 0; i < data.length; i++) {
-                const textData = data[i];
-                const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
-                const labelAttribute = {
-                    visible: basedArc.labelVisible,
-                    x: basedArc.labelPosition.x,
-                    y: basedArc.labelPosition.y,
-                    angle: basedArc.angle,
-                    maxLineWidth: basedArc.labelLimit,
-                    points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
-                        ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
-                        : undefined
-                };
-                labels[i].setAttributes(labelAttribute);
-            }
-            return labels;
-        }
         layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
             var _a;
             this._arcLeft.clear();
@@ -3002,18 +3016,6 @@
                 }
             }
         }
-        _labelLine(text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
-                ? vrender.createLine({
-                    visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
-                    stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
-                    lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
-                    points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
-                })
-                : undefined;
-            return labelLine;
-        }
         computeRadius(r, width, height, centerOffset, k) {
             var _a;
             return ((_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k) + centerOffset) !== null && _a !== void 0 ? _a : 0);
@@ -3021,9 +3023,6 @@
         computeLayoutRadius(width, height) {
             return Math.min(width / 2, height / 2);
         }
-        _canPlaceInside(textBound, shapeBound) {
-            return this.attribute.position === 'inside';
-        }
         computeLayoutOuterRadius(r, width, height) {
             return r / (Math.min(width, height) / 2);
         }
@@ -3088,8 +3087,7 @@
             const prevComponentMap = this._componentMap;
             for (let i = 0; i < dataLabels.length; i++) {
                 const dataLabel = dataLabels[i];
-                const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
-                if (labelComponent) {
+                if (labelComponentMap[dataLabel.type]) {
                     const { baseMarkGroupName } = dataLabel;
                     let component = this._componentMap.get(baseMarkGroupName);
                     if (component) {
@@ -3099,7 +3097,7 @@
                         currentComponentMap.set(baseMarkGroupName, component);
                     }
                     else {
-                        component = new labelComponent(dataLabel);
+                        component = new labelComponentMap[dataLabel.type](dataLabel);
                         component.setBitmap(bitmap);
                         component.setBitmapTool(tool);
                         this.add(component);
@@ -4099,14 +4097,12 @@
     }
     function rotateYAxis(orient, items) {
         items.forEach((item, i) => {
-            item.attribute.angle &&
-                item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function rotateXAxis(orient, items) {
         items.forEach(item => {
-            item.attribute.angle &&
-                item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function getXAxisLabelAlign(orient, angle = 0) {
@@ -4572,92 +4568,6 @@
             };
         }
         beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            const { flush = false } = this.attribute.label || {};
-            if (flush) {
-                const { orient, start, end } = this.attribute;
-                const isX = orient === 'bottom' || orient === 'top';
-                const first = labelShapes[0];
-                const last = vutils.last(labelShapes);
-                const isInverse = isX ? first.attribute.x > last.attribute.x : first.attribute.y < last.attribute.y;
-                if (isX) {
-                    const width = Math.abs(start.x - end.x);
-                    if (isInverse) {
-                        const start = width;
-                        const end = 0;
-                        const startBound = first.AABBBounds.x2;
-                        const endBound = last.AABBBounds.x1;
-                        if (startBound > start) {
-                            first.setAttributes({
-                                x: start,
-                                textAlign: 'right'
-                            });
-                        }
-                        if (endBound < end) {
-                            last.setAttributes({
-                                x: end,
-                                textAlign: 'left'
-                            });
-                        }
-                    }
-                    else {
-                        const start = 0;
-                        const end = width;
-                        const startBound = first.AABBBounds.x1;
-                        const endBound = last.AABBBounds.x2;
-                        if (startBound < start) {
-                            first.setAttributes({
-                                x: start,
-                                textAlign: 'left'
-                            });
-                        }
-                        if (endBound > end) {
-                            last.setAttributes({
-                                x: end,
-                                textAlign: 'right'
-                            });
-                        }
-                    }
-                }
-                else {
-                    const height = Math.abs(start.y - end.y);
-                    if (isInverse) {
-                        const startBound = first.AABBBounds.y1;
-                        const endBound = last.AABBBounds.y2;
-                        const start = 0;
-                        const end = height;
-                        if (startBound < start) {
-                            first.setAttributes({
-                                y: start,
-                                textBaseline: 'top'
-                            });
-                        }
-                        if (endBound > end) {
-                            last.setAttributes({
-                                y: end,
-                                textBaseline: 'bottom'
-                            });
-                        }
-                    }
-                    else {
-                        const start = height;
-                        const end = 0;
-                        const startBound = first.AABBBounds.y2;
-                        const endBound = last.AABBBounds.y1;
-                        if (startBound > start) {
-                            first.setAttributes({
-                                y: start,
-                                textBaseline: 'bottom'
-                            });
-                        }
-                        if (endBound < end) {
-                            last.setAttributes({
-                                y: end,
-                                textBaseline: 'top'
-                            });
-                        }
-                    }
-                }
-            }
             return;
         }
         handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
@@ -9852,13 +9762,6 @@
         setUpdateDragMaskCallback(callback) {
             vutils.isFunction(callback) && (this._updateDragMaskCallback = callback);
         }
-        releaseBrushEvents() {
-            const { delayType = 'throttle', delayTime = 0 } = this.attribute;
-            this.stage.removeEventListener('pointerdown', this._onBrushStart);
-            this.stage.removeEventListener('pointermove', delayMap[delayType](this._onBrushing, delayTime));
-            this.stage.removeEventListener('pointerup', this._onBrushEnd);
-            this.stage.removeEventListener('pointerupoutside', this._onBrushEnd);
-        }
     }
     Brush.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
 
@@ -10244,7 +10147,11 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.6-alpha.8";
+    function VTag(params) {
+        return new Tag(params ? params.attribute : {});
+    }
+
+    const version = "0.14.6-alpha.9";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;
@@ -10295,6 +10202,7 @@
     exports.Tag = Tag;
     exports.Title = Title;
     exports.Tooltip = Tooltip;
+    exports.VTag = VTag;
     exports.getHorizontalPath = getHorizontalPath;
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;