@visactor/vrender-components 0.15.0-alpha.6 → 0.15.1

package/dist/index.js

@@ -36,7 +36,7 @@
             });
         }
         setAttribute(key, value, forceUpdateTag) {
-            if (vutils.isPlainObject(this.attribute[key])) {
+            if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value)) {
                 vutils.merge(this.attribute[key], value);
             }
             else {
@@ -77,7 +77,7 @@
             }
             for (let i = 0; i < keys.length; i++) {
                 const key = keys[i];
-                if (vutils.isPlainObject(this.attribute[key])) {
+                if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(params[key])) {
                     vutils.merge(this.attribute[key], params[key]);
                 }
                 else {
@@ -495,6 +495,20 @@
         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];
@@ -561,16 +575,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,
@@ -696,6 +710,7 @@
         }
     };
 
+    const _tBounds = new vutils.AABBBounds();
     class PopTip extends AbstractComponent {
         constructor(attributes) {
             super(vutils.merge({}, PopTip.defaultAttributes, attributes));
@@ -703,14 +718,17 @@
             this.positionList = ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'];
         }
         render() {
-            var _a, _b, _c, _d, _e;
-            const { title = '', titleStyle = {}, position, content = '', contentStyle = {}, panel = {}, space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, visible, state, dx = 0, dy = 0 } = this.attribute;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const { titleStyle = {}, position, contentStyle = {}, panel = {}, space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
+            let { title = '', content = '' } = this.attribute;
+            title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
+            content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
             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;
             }
@@ -722,8 +740,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;
             }
@@ -740,7 +758,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)
@@ -748,8 +766,30 @@
                 : 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 = (_h = this.attribute.x) !== null && _h !== void 0 ? _h : b.x1;
+                const rightWidth = range[0] - b.x1;
+                let maxSpace = Math.max(leftWidth, rightWidth);
+                const buf = (vutils.isArray(symbolSize) ? symbolSize[0] : 12) + 3;
+                maxSpace = Math.min(maxSpace - buf, maxSpace * maxWidthPercent);
+                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;
@@ -772,7 +812,8 @@
                     y: -offset[1] + dy
                 });
                 if (layout && range) {
-                    const b = this.AABBBounds;
+                    _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
+                    const b = _tBounds;
                     const stageBounds = new vutils.Bounds().setValue(0, 0, range[0], range[1]);
                     if (vutils.rectInsideAnotherRect(b, stageBounds, false)) {
                         break;
@@ -850,6 +891,7 @@
             textAlign: 'left',
             textBaseline: 'top'
         },
+        maxWidthPercent: 0.8,
         space: 8,
         padding: 10
     };
@@ -920,8 +962,13 @@
                 if (visible === false || (visibleCb && visibleCb(graphic) === false)) {
                     return;
                 }
+                const attribute = {};
+                vutils.merge(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {});
                 if (!this.poptipComponent) {
-                    this.poptipComponent = new PopTip(graphic.attribute.poptip);
+                    this.poptipComponent = new PopTip(attribute);
+                }
+                else {
+                    this.poptipComponent.initAttributes(attribute);
                 }
                 let poptip = graphic.attribute.poptip || {};
                 if (graphic.type === 'text' && poptip.title == null && poptip.content == null) {
@@ -1056,16 +1103,21 @@
         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)) {
+            bind(PopTipRenderContribution).toSelf().inSingletonScope();
+            bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
+        }
+        if (!isBound(PopTipPlugin)) {
+            bind(PopTipPlugin).toSelf();
+            bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
+        }
+        if (!isBound(PopTipForClipedTextPlugin)) {
+            bind(PopTipForClipedTextPlugin).toSelf();
+            bind(vrender.AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
+        }
     });
-    function loadPoptip(defaultPoptipTheme) {
-        vutils.merge(theme.poptip, defaultPoptipTheme);
+    function loadPoptip() {
         vrender.container.load(popTipModule);
     }
     function setPoptipTheme(defaultPoptipTheme) {
@@ -1395,26 +1447,29 @@
         };
     }
 
-    function canPlace($, bitmap, bound, checkBound = true) {
-        const range = boundToRange($, bound);
+    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);
         const outOfBounds = checkBound && bitmap.outOfBounds(range);
         if (outOfBounds) {
             return false;
         }
         return !bitmap.getRange(range);
     }
-    function canPlaceInside(textBound, shapeBound) {
-        if (!textBound || !shapeBound) {
-            return false;
-        }
-        return shapeBound.encloses(textBound);
-    }
-    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true) {
+    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true, pad = 0) {
         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)) {
+            if (canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce, pad)) {
                 bitmap.setRange(boundToRange($, tempText.AABBBounds, true));
                 return candidates[i];
             }
@@ -1422,13 +1477,15 @@
         return false;
     }
     function place($, bitmap, s, attrs, text, bounds, labeling) {
-        var _a, _b, _c;
+        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;
         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, (_a = attrs.overlap) === null || _a === void 0 ? void 0 : _a.clampForce);
+                return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
             }
             return false;
         }
@@ -1437,14 +1494,14 @@
             const candidates = offset.map(dy => {
                 return { x: text.attribute.x, y: text.attribute.y + dy };
             });
-            return placeToCandidates($, bitmap, text, candidates, (_b = attrs.overlap) === null || _b === void 0 ? void 0 : _b.clampForce);
+            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
         }
         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, (_c = attrs.overlap) === null || _c === void 0 ? void 0 : _c.clampForce);
+            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
         }
         return false;
     }
@@ -1532,8 +1589,14 @@
     };
 
     class LabelBase extends AbstractComponent {
-        constructor() {
-            super(...arguments);
+        setBitmap(bitmap) {
+            this._bitmap = bitmap;
+        }
+        setBitmapTool(bmpTool) {
+            this._bmpTool = bmpTool;
+        }
+        constructor(attributes) {
+            super(vutils.merge({}, LabelBase.defaultAttributes, attributes));
             this.name = 'label';
             this._onHover = (e) => {
                 const target = e.target;
@@ -1581,18 +1644,17 @@
                 }
             };
         }
-        setBitmap(bitmap) {
-            this._bitmap = bitmap;
-        }
-        setBitmapTool(bmpTool) {
-            this._bmpTool = bmpTool;
+        labeling(textBounds, graphicBounds, position, offset) {
+            return;
         }
-        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
-            const arcs = [];
-            return arcs;
+        _labelLine(text) {
+            return;
         }
         render() {
             this._prepare();
+            if (vutils.isNil(this._idToGraphic)) {
+                return;
+            }
             const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
             let data = this.attribute.data;
             if (vutils.isFunction(dataFilter)) {
@@ -1603,14 +1665,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) {
@@ -1649,8 +1711,14 @@
         }
         _prepare() {
             var _a;
-            const baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
             const currentBaseMarks = [];
+            let baseMarks;
+            if (vutils.isFunction(this.attribute.getBaseMarks)) {
+                baseMarks = this.attribute.getBaseMarks();
+            }
+            else {
+                baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
+            }
             baseMarks.forEach(mark => {
                 if (mark.releaseStatus !== 'willRelease') {
                     currentBaseMarks.push(mark);
@@ -1679,49 +1747,24 @@
                 }
             }
         }
-        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) {
-                    continue;
+                if (textLocation) {
+                    labelAttribute.x = textLocation.x;
+                    labelAttribute.y = textLocation.y;
+                    text.setAttributes(textLocation);
                 }
-                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) {
@@ -1739,7 +1782,7 @@
             if (size.width === 0 || size.height === 0) {
                 return labels;
             }
-            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [] } = option;
+            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
             const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
             const bitmap = this._bitmap || bmpTool.bitmap();
             const checkBounds = strategy.some(s => s.type === 'bound');
@@ -1767,13 +1810,16 @@
                 const text = labels[i];
                 const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
-                if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
+                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 (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
                     }
-                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
+                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
@@ -1796,7 +1842,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);
@@ -1827,9 +1873,17 @@
                 });
         }
         _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;
@@ -1838,27 +1892,18 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                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;
+                var _a, _b, _c, _d, _e, _f, _g;
+                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') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    if (!disableAnimation && relatedGraphic) {
+                    if (relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
-                        if (labelLine) {
-                            this.add(labelLine);
-                        }
-                        relatedGraphic.onAnimateBind = () => {
+                        labelLine && this.add(labelLine);
+                        relatedGraphic.once('animate-bind', () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                                 mode,
@@ -1868,58 +1913,70 @@
                                 delay
                             });
                             relatedGraphic.on('afterAttributeUpdate', listener);
-                        };
-                    }
-                    else {
-                        this.add(text);
-                        if (labelLine) {
-                            this.add(labelLine);
-                        }
+                        });
                     }
                 }
-                if (state === 'update') {
+                else if (state === 'update') {
                     const prevLabel = prevTextMap.get(relatedGraphic);
                     prevTextMap.delete(relatedGraphic);
                     currentTextMap.set(relatedGraphic, prevLabel);
-                    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));
-                        }
-                    }
-                    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 });
-                        }
+                    const prevText = prevLabel.text;
+                    prevText.animate().to(text.attribute, duration, easing);
+                    if (prevLabel.labelLine) {
+                        prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
+                            visible: (_f = (_d = (((_b = (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.line) === null || _b === void 0 ? void 0 : _b.visible) && ((_c = text.attribute) === null || _c === void 0 ? void 0 : _c.visible))) !== null && _d !== void 0 ? _d : (_e = text.attribute) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true,
+                            points: (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.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));
                     }
                 }
             });
             prevTextMap.forEach(label => {
                 var _a;
-                if (disableAnimation) {
+                (_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;
+        }
+        _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 {
-                    (_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);
-                        }
-                    });
+                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);
                 }
             });
             this._graphicToText = currentTextMap;
@@ -1990,21 +2047,20 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                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 isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
                 const backgroundColor = baseMark.attribute.fill;
                 const foregroundColor = label.attribute.fill;
                 const baseColor = backgroundColor;
                 const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
-                const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+                const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
                 if (isInside) {
-                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
+                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+                    fill && label.setAttributes({ fill });
                     if (label.attribute.lineWidth === 0) {
                         continue;
                     }
-                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+                    stroke && label.setAttributes({ stroke });
                 }
                 else {
                     if (label.attribute.lineWidth === 0) {
@@ -2016,47 +2072,18 @@
                         });
                         continue;
                     }
-                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
-                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+                    fill && label.setAttributes({ fill });
+                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+                    stroke && label.setAttributes({ stroke });
                 }
             }
         }
-        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;
+        _canPlaceInside(textBound, shapeBound) {
+            if (!textBound || !shapeBound) {
+                return false;
             }
+            return shapeBound.encloses(textBound);
         }
         setLocation(point) {
             this.translateTo(point.x, point.y);
@@ -2068,6 +2095,16 @@
             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) {
@@ -2383,13 +2420,16 @@
     }
 
     class ArcInfo {
-        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle) {
+        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
             this.refDatum = refDatum;
             this.center = center;
             this.outerCenter = outerCenter;
             this.quadrant = quadrant;
             this.radian = radian;
             this.middleAngle = middleAngle;
+            this.innerRadius = innerRadius;
+            this.outerRadius = outerRadius;
+            this.circleCenter = circleCenter;
             this.labelVisible = true;
             this.labelLimit = 0;
         }
@@ -2422,18 +2462,45 @@
             }
             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,
+                    line: basedArc === null || basedArc === void 0 ? void 0 : basedArc.labelLine
+                };
+                labels[i].setAttributes(labelAttribute);
+            }
+            return labels;
+        }
         layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
-            var _a;
             this._arcLeft.clear();
             this._arcRight.clear();
             this._ellipsisWidth = ellipsisWidth;
-            const { width, height } = attribute;
-            const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
+            let maxRadius = 0;
+            currentMarks.forEach(currentMarks => {
+                if (currentMarks.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMarks.attribute.outerRadius;
+                }
+            });
             currentMarks.forEach((currentMark, index) => {
                 var _a, _b;
                 const graphicAttribute = currentMark.attribute;
-                const radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height);
-                const radius = this.computeRadius(radiusRatio, width, height, centerOffset);
                 const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
                 const item = data[index];
                 const textBounds = textBoundsArray[index];
@@ -2441,9 +2508,9 @@
                 const intervalAngle = graphicAttribute.endAngle - graphicAttribute.startAngle;
                 const arcQuadrant = computeQuadrant(graphicAttribute.endAngle - intervalAngle / 2);
                 const arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle);
-                const outerArcMiddle = circlePoint(center.x, center.y, radius + attribute.line.line1MinLength, arcMiddleAngle);
-                const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle);
-                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius, centerOffset), arc.middleAngle);
+                const outerArcMiddle = circlePoint(center.x, center.y, maxRadius + attribute.line.line1MinLength, arcMiddleAngle);
+                const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle, graphicAttribute.innerRadius, graphicAttribute.outerRadius, center);
+                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), arc.middleAngle);
                 arc.labelSize = {
                     width: textBounds.x2 - textBounds.x1,
                     height: textBounds.y2 - textBounds.y1
@@ -2469,18 +2536,13 @@
             return arcs;
         }
         _layoutInsideLabels(arcs, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e;
-            const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
-            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
-            const innerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.innerRadius, attribute.width, attribute.height);
-            const outerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
             const labelConfig = attribute;
             const spaceWidth = labelConfig.spaceWidth;
             arcs.forEach((arc) => {
                 var _a, _b;
                 const { labelSize, radian } = arc;
-                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
-                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, centerOffset, 1);
+                const innerRadius = arc.innerRadius;
+                const outerRadius = arc.outerRadius;
                 const minRadian = connectLineRadian(outerRadius, labelSize.height);
                 let limit;
                 if (radian < minRadian) {
@@ -2505,7 +2567,7 @@
                 const align = this._computeAlign(arc, attribute);
                 const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
                 const labelRadius = outerRadius - spaceWidth - alignOffset;
-                arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle);
+                arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle);
                 arc.labelLimit = labelWidth;
                 if (!vutils.isGreater(labelWidth, 0)) {
                     arc.labelVisible = false;
@@ -2575,18 +2637,24 @@
                     arc.labelVisible = false;
                 }
                 arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
+                arc.labelLine = Object.assign({}, attribute === null || attribute === void 0 ? void 0 : attribute.line);
             });
             return arcs;
         }
         _computeX(arc, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e, _f;
-            const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
-            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
+            var _a;
+            const center = arc.circleCenter;
             const plotLayout = { width: center.x * 2, height: center.y * 2 };
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const line2MinLength = attribute.line.line2MinLength;
-            const labelLayoutAlign = (_f = attribute.layout) === null || _f === void 0 ? void 0 : _f.align;
+            const labelLayoutAlign = (_a = attribute.layout) === null || _a === void 0 ? void 0 : _a.align;
             const spaceWidth = attribute.spaceWidth;
             const { labelPosition, quadrant, pointB } = arc;
             if (!vutils.isValidNumber(pointB.x * pointB.y)) {
@@ -2594,7 +2662,7 @@
                 labelPosition.x = NaN;
                 arc.labelLimit = 0;
             }
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const flag = isQuadrantLeft(quadrant) ? -1 : 1;
             let cx = 0;
             const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x;
@@ -2812,9 +2880,14 @@
             return -1;
         }
         _computePointB(arc, r, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e;
             const labelConfig = attribute;
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = labelConfig.line.line1MinLength;
             const labelLayout = labelConfig.layout;
             if (labelLayout.strategy === 'none') {
@@ -2824,11 +2897,10 @@
                 };
             }
             else {
-                const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
-                const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
-                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
+                const center = arc.circleCenter;
+                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
                 const { labelPosition, quadrant } = arc;
-                const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
+                const outerR = Math.max(radius + line1MinLength, arc.outerRadius);
                 const rd = r - outerR;
                 const x = Math.sqrt(r ** 2 - Math.abs(center.y - labelPosition.y) ** 2) - rd;
                 if (vutils.isValidNumber(x)) {
@@ -2850,14 +2922,18 @@
             }
         }
         _computeYRange(arc, attribute, currentMarks) {
-            var _a, _b, _c, _d, _e;
-            const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
+            const center = arc.circleCenter;
             const plotRect = { width: center.x * 2, height: center.y * 2 };
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const { width, height } = plotRect;
-            const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const r = this._computeLayoutRadius(height / 2, attribute, currentMarks);
             const cx = Math.abs(arc.center.x - width / 2);
             const cy = arc.center.y - height / 2;
@@ -2916,13 +2992,17 @@
             arc.labelYRange = [min, max];
         }
         _computeLayoutRadius(halfYLength, attribute, currentMarks) {
-            var _a;
             const labelConfig = attribute;
             const layoutArcGap = labelConfig.layoutArcGap;
             const line1MinLength = labelConfig.line.line1MinLength;
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
-            const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
-            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
             const outerR = radius + line1MinLength;
             const a = outerR - layoutArcGap;
             return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
@@ -2988,20 +3068,34 @@
                 }
             }
         }
-        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);
+        _labelLine(text) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+            const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
+                ? vrender.createLine({
+                    visible: (_g = (_e = (((_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.line) === null || _c === void 0 ? void 0 : _c.visible) && ((_d = text.attribute) === null || _d === void 0 ? void 0 : _d.visible))) !== null && _e !== void 0 ? _e : (_f = text.attribute) === null || _f === void 0 ? void 0 : _f.visible) !== null && _g !== void 0 ? _g : true,
+                    stroke: (_l = (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.fill,
+                    lineWidth: (_r = (_q = (_p = (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.line) === null || _p === void 0 ? void 0 : _p.style) === null || _q === void 0 ? void 0 : _q.lineWidth) !== null && _r !== void 0 ? _r : 1,
+                    points: (_s = text.attribute) === null || _s === void 0 ? void 0 : _s.points,
+                    curveType: ((_u = (_t = text.attribute) === null || _t === void 0 ? void 0 : _t.line) === null || _u === void 0 ? void 0 : _u.smooth) ? 'basis' : null
+                })
+                : undefined;
+            return labelLine;
+        }
+        computeRadius(r, width, height, k) {
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k);
         }
         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);
         }
-        computeDatumRadius(width, height, outerRadius, centerOffset) {
-            var _a;
+        computeDatumRadius(width, height, outerRadius) {
             const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
-            return (_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio + centerOffset) !== null && _a !== void 0 ? _a : 0;
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
         }
     }
     ArcLabel.defaultAttributes = {
@@ -3059,7 +3153,8 @@
             const prevComponentMap = this._componentMap;
             for (let i = 0; i < dataLabels.length; i++) {
                 const dataLabel = dataLabels[i];
-                if (labelComponentMap[dataLabel.type]) {
+                const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
+                if (labelComponent) {
                     const { baseMarkGroupName } = dataLabel;
                     let component = this._componentMap.get(baseMarkGroupName);
                     if (component) {
@@ -3069,7 +3164,7 @@
                         currentComponentMap.set(baseMarkGroupName, component);
                     }
                     else {
-                        component = new labelComponentMap[dataLabel.type](dataLabel);
+                        component = new labelComponent(dataLabel);
                         component.setBitmap(bitmap);
                         component.setBitmapTool(tool);
                         this.add(component);
@@ -3103,69 +3198,74 @@
     };
 
     class Segment extends AbstractComponent {
+        getStartAngle() {
+            return this._startAngle;
+        }
+        getEndAngle() {
+            return this._endAngle;
+        }
+        getMainSegmentPoints() {
+            return this._mainSegmentPoints;
+        }
         constructor(attributes) {
             super(vutils.merge({}, Segment.defaultAttributes, attributes));
             this.name = 'segment';
         }
-        computeLineAngle() {
-            const { points } = this.attribute;
-            const start = points[0];
-            const startInside = points[1];
-            const endInside = points[points.length - 2];
-            const end = points[points.length - 1];
-            const startVector = [start.x - startInside.x, start.y - startInside.y];
-            const startAngle = Math.atan2(startVector[1], startVector[0]);
-            const endVector = [end.x - endInside.x, end.y - endInside.y];
-            const endAngle = Math.atan2(endVector[1], endVector[0]);
-            this._startAngle = startAngle;
-            this._endAngle = endAngle;
-        }
         render() {
             this.removeAllChild();
-            const { points, startSymbol, endSymbol, lineStyle, state, visible = true } = this.attribute;
+            this._reset();
+            const { startSymbol, endSymbol, lineStyle, state, visible = true, multiSegment, mainSegmentIndex } = this.attribute;
             if (!visible) {
                 return;
             }
-            if (points.length > 1) {
-                this.computeLineAngle();
-            }
-            const startSymbolShape = this.renderSymbol(startSymbol, 'start');
-            const endSymbolShape = this.renderSymbol(endSymbol, 'end');
+            this._computeLineAngle();
+            const startSymbolShape = this._renderSymbol(startSymbol, 'start');
+            const endSymbolShape = this._renderSymbol(endSymbol, 'end');
             this.startSymbol = startSymbolShape;
             this.endSymbol = endSymbolShape;
-            let pointsAfterClip = points;
-            if (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.visible) {
-                const startSize = (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.clip) ? (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.size) || 10 : 0;
-                const pointsStart = {
-                    x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),
-                    y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)
-                };
-                pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];
-            }
-            if (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.visible) {
-                const endSize = (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.clip) ? (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.size) || 10 : 0;
-                const pointsEnd = {
-                    x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),
-                    y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)
-                };
-                pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+            if (multiSegment) {
+                const points = [...this.attribute.points];
+                if (vutils.isValidNumber(mainSegmentIndex)) {
+                    points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex]);
+                }
+                else {
+                    const clipPoints = this._clipPoints(vutils.flattenArray(points));
+                    points[0][0] = clipPoints[0];
+                    points[points.length - 1][points[points.length - 1].length - 1] =
+                        clipPoints[clipPoints.length - 1];
+                }
+                points.forEach((point, index) => {
+                    var _a, _b;
+                    const line = vrender.createLine(Object.assign(Object.assign({ points: point }, (vutils.isArray(lineStyle) ? (_a = lineStyle[index]) !== null && _a !== void 0 ? _a : lineStyle[lineStyle.length - 1] : lineStyle)), { fill: false }));
+                    line.name = `${this.name}-line`;
+                    line.id = this._getNodeId('line' + index);
+                    if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
+                        line.states = vutils.isArray(state.line) ? (_b = state.line[index]) !== null && _b !== void 0 ? _b : state.line[state.line.length - 1] : state.line;
+                    }
+                    this.add(line);
+                });
             }
-            const line = vrender.createLine(Object.assign({ points: pointsAfterClip, fill: false }, lineStyle));
-            line.name = 'line';
-            line.id = this._getNodeId('line');
-            if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
-                line.states = state.line;
+            else {
+                const line = vrender.createLine(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false }));
+                line.name = `${this.name}-line`;
+                line.id = this._getNodeId('line');
+                if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
+                    line.states = [].concat(state.line)[0];
+                }
+                this.add(line);
             }
-            this.line = line;
-            this.add(line);
         }
-        renderSymbol(attribute, dim) {
+        _renderSymbol(attribute, dim) {
+            const points = this._getMainSegmentPoints();
+            if (!points.length) {
+                return;
+            }
             const { autoRotate = true } = attribute;
             let symbol;
             if (attribute === null || attribute === void 0 ? void 0 : attribute.visible) {
                 const startAngle = this._startAngle;
                 const endAngle = this._endAngle;
-                const { points, state } = this.attribute;
+                const { state } = this.attribute;
                 const start = points[0];
                 const end = points[points.length - 1];
                 const { refX = 0, refY = 0, refAngle = 0, style, symbolType, size = 12 } = attribute;
@@ -3173,20 +3273,22 @@
                 let rotate;
                 if (dim === 'start') {
                     position = {
-                        x: start.x + (startAngle ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
-                        y: start.y + (startAngle ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
+                        x: start.x +
+                            (vutils.isValidNumber(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
+                        y: start.y +
+                            (vutils.isValidNumber(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
                     };
                     rotate = startAngle + Math.PI / 2;
                 }
                 else {
                     position = {
-                        x: end.x + (endAngle ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
-                        y: end.y + (endAngle ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
+                        x: end.x + (vutils.isValidNumber(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
+                        y: end.y + (vutils.isValidNumber(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
                     };
                     rotate = endAngle + Math.PI / 2;
                 }
                 symbol = vrender.createSymbol(Object.assign(Object.assign(Object.assign({}, position), { symbolType: symbolType, size, angle: autoRotate ? rotate + refAngle : 0, strokeBoundsBuffer: 0 }), style));
-                symbol.name = `${dim}-symbol`;
+                symbol.name = `${this.name}-${dim}-symbol`;
                 symbol.id = this._getNodeId(`${dim}-symbol`);
                 if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.symbol)) {
                     symbol.states = state.symbol;
@@ -3195,11 +3297,69 @@
             }
             return symbol;
         }
-        getStartAngle() {
-            return this._startAngle;
+        _getMainSegmentPoints() {
+            if (this._mainSegmentPoints) {
+                return this._mainSegmentPoints;
+            }
+            const { points: originPoints, multiSegment, mainSegmentIndex } = this.attribute;
+            let points;
+            if (multiSegment) {
+                if (vutils.isValidNumber(mainSegmentIndex)) {
+                    points = originPoints[mainSegmentIndex];
+                }
+                else {
+                    points = vutils.flattenArray(originPoints);
+                }
+            }
+            else {
+                points = originPoints;
+            }
+            this._mainSegmentPoints = points;
+            return points;
         }
-        getEndAngle() {
-            return this._endAngle;
+        _clipPoints(points) {
+            const { startSymbol, endSymbol } = this.attribute;
+            let pointsAfterClip = points;
+            if (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.visible) {
+                const startSize = (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.clip) ? (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.size) || 10 : 0;
+                const pointsStart = {
+                    x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),
+                    y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)
+                };
+                pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];
+            }
+            if (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.visible) {
+                const endSize = (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.clip) ? (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.size) || 10 : 0;
+                const pointsEnd = {
+                    x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),
+                    y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)
+                };
+                pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+            }
+            return pointsAfterClip;
+        }
+        _computeLineAngle() {
+            const points = this._getMainSegmentPoints();
+            if (points.length <= 1) {
+                return;
+            }
+            const start = points[0];
+            const startInside = points[1];
+            const endInside = points[points.length - 2];
+            const end = points[points.length - 1];
+            const startVector = [start.x - startInside.x, start.y - startInside.y];
+            const startAngle = Math.atan2(startVector[1], startVector[0]);
+            const endVector = [end.x - endInside.x, end.y - endInside.y];
+            const endAngle = Math.atan2(endVector[1], endVector[0]);
+            this._startAngle = startAngle;
+            this._endAngle = endAngle;
+        }
+        _reset() {
+            this.startSymbol = null;
+            this.endSymbol = null;
+            this._startAngle = null;
+            this._endAngle = null;
+            this._mainSegmentPoints = null;
         }
     }
     Segment.defaultAttributes = {
@@ -3885,12 +4045,14 @@
     }
     function rotateYAxis(orient, items) {
         items.forEach((item, i) => {
-            item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            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.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            item.attribute.angle &&
+                item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function getXAxisLabelAlign(orient, angle = 0) {
@@ -4256,6 +4418,92 @@
             };
         }
         beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const { flush = false } = this.attribute.label || {};
+            if (flush && labelShapes.length) {
+                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) {
@@ -5823,25 +6071,41 @@
     })(exports.IMarkPointItemPosition || (exports.IMarkPointItemPosition = {}));
 
     class Marker extends AbstractComponent {
+        constructor() {
+            super(...arguments);
+            this.name = 'marker';
+        }
         _initContainer() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const groupClip = vrender.createGroup(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
-            groupClip.name = 'marker-container';
-            const group = vrender.createGroup({
-                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
-                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
-            });
-            groupClip.add(group);
-            this._containerClip = groupClip;
-            this.add(groupClip);
+            var _a, _b;
+            const { limitRect, clipInRange } = this.attribute;
+            let group;
+            if (clipInRange) {
+                const groupClip = vrender.createGroup(Object.assign(Object.assign({}, limitRect), { clip: true, pickable: false }));
+                group = vrender.createGroup({
+                    x: -((_a = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _a !== void 0 ? _a : 0),
+                    y: -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _b !== void 0 ? _b : 0)
+                });
+                groupClip.add(group);
+                this._containerClip = groupClip;
+                this.add(groupClip);
+            }
+            else {
+                group = vrender.createGroup({
+                    x: 0,
+                    y: 0
+                });
+                this.add(group);
+            }
+            group.name = 'marker-container';
             this._container = group;
         }
         _updateContainer() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            this._containerClip.setAttributes(Object.assign(Object.assign({}, (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.clipRange), { clip: (_c = vutils.isValid((_b = this.attribute) === null || _b === void 0 ? void 0 : _b.clipRange)) !== null && _c !== void 0 ? _c : false }));
+            var _a, _b, _c;
+            const { limitRect, clipInRange } = this.attribute;
+            (_a = this._containerClip) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({}, limitRect));
             this._container.setAttributes({
-                x: -((_f = (_e = (_d = this.attribute) === null || _d === void 0 ? void 0 : _d.clipRange) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0),
-                y: -((_j = (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.clipRange) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0)
+                x: clipInRange ? -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _b !== void 0 ? _b : 0) : 0,
+                y: clipInRange ? -((_c = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _c !== void 0 ? _c : 0) : 0
             });
         }
         render() {
@@ -5853,7 +6117,7 @@
                 this.setAttribute('childrenPickable', false);
             }
             if (markerVisible) {
-                if (!this._containerClip) {
+                if (!this._container) {
                     this._initContainer();
                     this.initMarker(this._container);
                 }
@@ -6090,47 +6354,84 @@
         }
     };
 
+    function limitShapeInBounds(shape, bounds) {
+        const { x1: regionMinX, y1: regionMinY, x2: regionMaxX, y2: regionMaxY } = bounds;
+        const { x1, y1, x2, y2 } = shape.AABBBounds;
+        const { dx: originDx = 0, dy: originDy = 0 } = shape.attribute;
+        let dx = 0;
+        let dy = 0;
+        if (x1 < regionMinX) {
+            dx = regionMinX - x1;
+        }
+        if (y1 < regionMinY) {
+            dy = regionMinY - y1;
+        }
+        if (x2 > regionMaxX) {
+            dx = regionMaxX - x2;
+        }
+        if (y2 > regionMaxY) {
+            dy = regionMaxY - y2;
+        }
+        if (dx) {
+            shape.setAttribute('dx', dx + originDx);
+        }
+        if (dy) {
+            shape.setAttribute('dy', dy + originDy);
+        }
+    }
+
     class MarkLine extends Marker {
         constructor(attributes) {
             super(vutils.merge({}, MarkLine.defaultAttributes, attributes));
         }
         setLabelPos() {
-            var _a, _b, _c, _d, _e;
-            const { points, label } = this.attribute;
-            const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'end';
-            const labelAngle = this._line.getEndAngle();
-            const labelOffsetX = (label === null || label === void 0 ? void 0 : label.refX) * Math.cos(labelAngle) + label.refY * Math.cos(labelAngle - Math.PI / 2);
-            const labelOffsetY = (label === null || label === void 0 ? void 0 : label.refX) * Math.sin(labelAngle) + label.refY * Math.sin(labelAngle - Math.PI / 2);
-            if (labelPosition.includes('start') || labelPosition.includes('Start')) {
-                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes({
+            var _a, _b;
+            const { label = {}, limitRect } = this.attribute;
+            const { position = 'end', refX = 0, refY = 0, confine } = label;
+            const points = this._line.getMainSegmentPoints();
+            const labelAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
+            const labelOffsetX = refX * Math.cos(labelAngle) + refY * Math.cos(labelAngle - Math.PI / 2);
+            const labelOffsetY = refX * Math.sin(labelAngle) + refY * Math.sin(labelAngle - Math.PI / 2);
+            let labelPoint;
+            if (position.includes('start') || position.includes('Start')) {
+                labelPoint = {
                     x: points[0].x + labelOffsetX,
                     y: points[0].y + labelOffsetY
-                });
+                };
             }
-            else if (labelPosition.includes('middle') || labelPosition.includes('Middle')) {
-                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes({
+            else if (position.includes('middle') || position.includes('Middle')) {
+                labelPoint = {
                     x: (points[0].x + points[points.length - 1].x) / 2 + labelOffsetX,
                     y: (points[0].y + points[points.length - 1].y) / 2 + labelOffsetY
-                });
+                };
             }
             else {
-                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes({
+                labelPoint = {
                     x: points[points.length - 1].x + labelOffsetX,
                     y: points[points.length - 1].y + labelOffsetY
+                };
+            }
+            this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { angle: label.autoRotate ? labelAngle + ((_b = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _b !== void 0 ? _b : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[position]), label.textStyle) }));
+            if (limitRect && confine) {
+                const { x, y, width, height } = limitRect;
+                limitShapeInBounds(this._label, {
+                    x1: x,
+                    y1: y,
+                    x2: x + width,
+                    y2: y + height
                 });
             }
-            this._label.setAttributes({
-                angle: label.autoRotate && labelAngle + ((_e = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _e !== void 0 ? _e : 0),
-                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-            });
         }
         initMarker(container) {
-            const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
+            const { points, startSymbol, endSymbol, label, lineStyle, mainSegmentIndex, multiSegment } = this
+                .attribute;
             const line = new Segment({
                 points,
                 startSymbol,
                 endSymbol,
-                lineStyle
+                lineStyle,
+                mainSegmentIndex,
+                multiSegment
             });
             line.name = 'mark-line-line';
             this._line = line;
@@ -6143,14 +6444,17 @@
         }
         updateMarker() {
             var _a, _b;
-            const { points, startSymbol, endSymbol, label, lineStyle } = this.attribute;
+            const { points, startSymbol, endSymbol, label, lineStyle, mainSegmentIndex, multiSegment } = this
+                .attribute;
             (_a = this._line) === null || _a === void 0 ? void 0 : _a.setAttributes({
                 points,
                 startSymbol,
                 endSymbol,
-                lineStyle
+                lineStyle,
+                mainSegmentIndex,
+                multiSegment
             });
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
             this.setLabelPos();
         }
     }
@@ -6160,58 +6464,54 @@
         constructor(attributes) {
             super(vutils.merge({}, MarkArea.defaultAttributes, attributes));
         }
-        getLeftPos() {
-            return {
-                x: this._area.AABBBounds.x1,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        getRightPos() {
-            return {
-                x: this._area.AABBBounds.x2,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        getTopPos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: this._area.AABBBounds.y1
-            };
-        }
-        getBottomPos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: this._area.AABBBounds.y2
-            };
-        }
-        getMiddlePos() {
-            return {
-                x: (this._area.AABBBounds.x1 + this._area.AABBBounds.x2) / 2,
-                y: (this._area.AABBBounds.y1 + this._area.AABBBounds.y2) / 2
-            };
-        }
-        setLabelPos() {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const { label } = this.attribute;
-            const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
-            if (labelPosition.includes('left') || labelPosition.includes('Left')) {
-                (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, this.getLeftPos()));
+        _getPositionByDirection(area, direction) {
+            const { x1, x2, y1, y2 } = this._area.AABBBounds;
+            if (direction.includes('left') || direction.includes('Left')) {
+                return {
+                    x: x1,
+                    y: (y1 + y2) / 2
+                };
             }
-            else if (labelPosition.includes('right') || labelPosition.includes('Right')) {
-                (_c = this._label) === null || _c === void 0 ? void 0 : _c.setAttributes(Object.assign({}, this.getRightPos()));
+            if (direction.includes('right') || direction.includes('Right')) {
+                return {
+                    x: x2,
+                    y: (y1 + y2) / 2
+                };
             }
-            else if (labelPosition.includes('top') || labelPosition.includes('Top')) {
-                (_d = this._label) === null || _d === void 0 ? void 0 : _d.setAttributes(Object.assign({}, this.getTopPos()));
+            if (direction.includes('top') || direction.includes('Top')) {
+                return {
+                    x: (x1 + x2) / 2,
+                    y: y1
+                };
             }
-            else if (labelPosition.includes('bottom') || labelPosition.includes('Bottom')) {
-                (_e = this._label) === null || _e === void 0 ? void 0 : _e.setAttributes(Object.assign({}, this.getBottomPos()));
+            if (direction.includes('bottom') || direction.includes('Bottom')) {
+                return {
+                    x: (x1 + x2) / 2,
+                    y: y2
+                };
             }
-            else {
-                (_f = this._label) === null || _f === void 0 ? void 0 : _f.setAttributes(Object.assign({}, this.getMiddlePos()));
+            return {
+                x: (x1 + x2) / 2,
+                y: (y1 + y2) / 2
+            };
+        }
+        setLabelPos() {
+            var _a;
+            if (this._label && this._area) {
+                const { label } = this.attribute;
+                const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
+                const labelPoint = this._getPositionByDirection(this._area, labelPosition);
+                this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
+                if (this.attribute.limitRect && (label === null || label === void 0 ? void 0 : label.confine)) {
+                    const { x, y, width, height } = this.attribute.limitRect;
+                    limitShapeInBounds(this._label, {
+                        x1: x,
+                        y1: y,
+                        x2: x + width,
+                        y2: y + height
+                    });
+                }
             }
-            (_g = this._label) === null || _g === void 0 ? void 0 : _g.setAttributes({
-                textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-            });
         }
         initMarker(container) {
             const { points, label, areaStyle } = this.attribute;
@@ -6229,7 +6529,7 @@
             var _a, _b;
             const { points, label, areaStyle } = this.attribute;
             (_a = this._area) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({ points: points }, areaStyle));
-            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({}, label));
+            (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
             this.setLabelPos();
         }
     }
@@ -6243,26 +6543,29 @@
         }
         setItemAttributes(item, itemContent, itemPosition, itemType) {
             var _a;
+            if (!item) {
+                return;
+            }
             const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, textStyle, richTextStyle, imageStyle, position = exports.IMarkPointItemPosition.middle } = itemContent;
             const itemAngle = ((_a = this._line) === null || _a === void 0 ? void 0 : _a.getEndAngle()) || 0;
             const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);
             const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
             if (itemType === 'text') {
-                item === null || item === void 0 ? void 0 : item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
+                item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
             }
             else if (itemType === 'richText') {
-                item === null || item === void 0 ? void 0 : item.setAttributes({
+                item.setAttributes({
                     dx: this.getItemDx(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dx) || 0),
                     dy: this.getItemDy(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dy) || 0)
                 });
             }
             else if (itemType === 'image') {
-                item === null || item === void 0 ? void 0 : item.setAttributes({
+                item.setAttributes({
                     dx: this.getItemDx(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dx) || 0),
                     dy: this.getItemDy(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dy) || 0)
                 });
             }
-            item === null || item === void 0 ? void 0 : item.setAttributes({
+            item.setAttributes({
                 x: itemPosition.x + (itemOffsetX || 0),
                 y: itemPosition.y + (itemOffsetY || 0),
                 angle: autoRotate && itemAngle + refAngle
@@ -6274,7 +6577,7 @@
             if (position.includes('inside')) {
                 return -width;
             }
-            else if (position === 'insideTop') {
+            if (position === 'insideTop') {
                 return 0;
             }
             return 0;
@@ -6285,7 +6588,7 @@
             if (position.includes('top') || position.includes('Top')) {
                 return -height;
             }
-            else if (position.includes('middle') || position.includes('Middle')) {
+            if (position.includes('middle') || position.includes('Middle')) {
                 return -height / 2;
             }
             return 0;
@@ -6481,7 +6784,8 @@
                     const changeEvent = new vrender.CustomEvent('toPrev', {
                         current: this._current,
                         total: this._total,
-                        direction: 'pre'
+                        direction: 'pre',
+                        event: e
                     });
                     changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6500,7 +6804,8 @@
                     const changeEvent = new vrender.CustomEvent('toNext', {
                         current: this._current,
                         total: this._total,
-                        direction: 'next'
+                        direction: 'next',
+                        event: e
                     });
                     changeEvent.manager = (_b = this.stage) === null || _b === void 0 ? void 0 : _b.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6726,16 +7031,16 @@
                     const legendItem = target.delegate;
                     const selected = legendItem.hasState(exports.LegendStateValue.selected);
                     if (selected) {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
                     }
                     else {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
                     }
                     const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
                     if (focusButton) {
                         focusButton.setAttribute('visible', true);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
                 }
             };
             this._onUnHover = (e) => {
@@ -6766,9 +7071,9 @@
                         focusButton.setAttribute('visible', false);
                     }
                     if (attributeUpdate) {
-                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
                 }
             };
             this._onClick = (e) => {
@@ -6781,25 +7086,17 @@
                         legendItem.toggleState(exports.LegendStateValue.focus);
                         if (isFocusSelected) {
                             (_b = this._itemsContainer) === null || _b === void 0 ? void 0 : _b.getChildren().forEach(item => {
-                                this._removeLegendItemState(item, [
-                                    exports.LegendStateValue.unSelected,
-                                    exports.LegendStateValue.unSelectedHover,
-                                    exports.LegendStateValue.focus
-                                ]);
-                                this._setLegendItemState(item, exports.LegendStateValue.selected);
+                                this._removeLegendItemState(item, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover, exports.LegendStateValue.focus], e);
+                                this._setLegendItemState(item, exports.LegendStateValue.selected, e);
                             });
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_c = this._itemsContainer) === null || _c === void 0 ? void 0 : _c.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover,
-                                        exports.LegendStateValue.focus
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover, exports.LegendStateValue.focus], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
@@ -6813,33 +7110,30 @@
                         const currentSelectedItems = this._getSelectedLegends();
                         if (selectMode === 'multiple') {
                             if (allowAllCanceled === false && isSelected && currentSelectedItems.length === 1) {
-                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                                 return;
                             }
                             if (isSelected) {
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover]);
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected, e);
                             }
                             else {
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             }
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_e = this._itemsContainer) === null || _e === void 0 ? void 0 : _e.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                 }
             };
         }
@@ -7210,7 +7504,8 @@
             this._pager.addEventListener('toNext', onPaging);
             return true;
         }
-        _setLegendItemState(legendItem, stateName, keepCurrentStates = true) {
+        _setLegendItemState(legendItem, stateName, e) {
+            const keepCurrentStates = true;
             let attributeUpdate = false;
             if (!legendItem.hasState(stateName)) {
                 attributeUpdate = true;
@@ -7228,10 +7523,10 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
-        _removeLegendItemState(legendItem, stateNames) {
+        _removeLegendItemState(legendItem, stateNames, e) {
             let attributeUpdate = false;
             stateNames.forEach(name => {
                 if (!attributeUpdate && legendItem.hasState(name)) {
@@ -7253,7 +7548,7 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
         _getSelectedLegends() {
@@ -7272,7 +7567,7 @@
             shape.delegate = delegateShape;
             shape.states = vutils.merge({}, DEFAULT_STATES, states);
         }
-        _dispatchEvent(eventName, legendItem) {
+        _dispatchEvent(eventName, legendItem, event) {
             var _a;
             const currentSelectedItems = this._getSelectedLegends();
             currentSelectedItems.sort((pre, next) => pre.index - next.index);
@@ -7282,7 +7577,8 @@
                 data: legendItem.data,
                 selected: legendItem.hasState(exports.LegendStateValue.selected),
                 currentSelectedItems,
-                currentSelected
+                currentSelected,
+                event
             });
             changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
             this.dispatchEvent(changeEvent);
@@ -8770,16 +9066,16 @@
             this._isPaused = true;
             this.updateAttributes = () => {
                 this._startAttr = {
-                    style: Object.assign(Object.assign({ symbolType: iconPlay }, Controller.defaultControllerAttr), this.attribute.start.style)
+                    style: Object.assign(Object.assign(Object.assign({ symbolType: iconPlay }, Controller.defaultControllerAttr), { visible: this.attribute.start.visible }), this.attribute.start.style)
                 };
                 this._pauseAttr = {
-                    style: Object.assign(Object.assign({ symbolType: iconPause }, Controller.defaultControllerAttr), this.attribute.pause.style)
+                    style: Object.assign(Object.assign(Object.assign({ symbolType: iconPause }, Controller.defaultControllerAttr), { visible: this.attribute.pause.visible }), this.attribute.pause.style)
                 };
                 this._forwardAttr = {
-                    style: Object.assign(Object.assign({}, Controller.defaultControllerAttr), this.attribute.forward.style)
+                    style: Object.assign(Object.assign(Object.assign({}, Controller.defaultControllerAttr), { visible: this.attribute.forward.visible }), this.attribute.forward.style)
                 };
                 this._backwardAttr = {
-                    style: Object.assign(Object.assign({}, Controller.defaultControllerAttr), this.attribute.backward.style)
+                    style: Object.assign(Object.assign(Object.assign({}, Controller.defaultControllerAttr), { visible: this.attribute.backward.visible }), this.attribute.backward.style)
                 };
                 this.updateLayout();
             };
@@ -8890,6 +9186,7 @@
         }
     }
     Controller.defaultControllerAttr = {
+        visible: true,
         x: 0,
         y: 0,
         size: 20,
@@ -8898,7 +9195,6 @@
         cursor: 'pointer'
     };
     Controller.defaultAttributes = {
-        visible: true,
         [ControllerTypeEnum.Start]: {},
         [ControllerTypeEnum.Pause]: {},
         [ControllerTypeEnum.Backward]: {},
@@ -8906,6 +9202,7 @@
     };
 
     const defaultControllerAttributes = {
+        visible: true,
         style: {
             x: 0,
             y: 0,
@@ -8926,12 +9223,18 @@
 
     exports.PlayerEventEnum = void 0;
     (function (PlayerEventEnum) {
-        PlayerEventEnum["OnChange"] = "onChange";
-        PlayerEventEnum["OnPlay"] = "onPlay";
-        PlayerEventEnum["OnPause"] = "onPause";
-        PlayerEventEnum["OnBackward"] = "onBackward";
-        PlayerEventEnum["OnForward"] = "onForward";
-        PlayerEventEnum["OnEnd"] = "onEnd";
+        PlayerEventEnum["change"] = "change";
+        PlayerEventEnum["play"] = "play";
+        PlayerEventEnum["pause"] = "pause";
+        PlayerEventEnum["backward"] = "backward";
+        PlayerEventEnum["forward"] = "forward";
+        PlayerEventEnum["end"] = "end";
+        PlayerEventEnum["OnChange"] = "change";
+        PlayerEventEnum["OnPlay"] = "play";
+        PlayerEventEnum["OnPause"] = "pause";
+        PlayerEventEnum["OnBackward"] = "backward";
+        PlayerEventEnum["OnForward"] = "forward";
+        PlayerEventEnum["OnEnd"] = "end";
     })(exports.PlayerEventEnum || (exports.PlayerEventEnum = {}));
 
     const isReachEndByDefault = ({ direction, maxIndex, dataIndex }) => {
@@ -8988,6 +9291,7 @@
                     handlerSize = vutils.max(this._handlerStyle.size[0], this._handlerStyle.size[1]);
                 }
                 const attrs = {
+                    visible: this._sliderVisible,
                     min: this._minIndex,
                     max: this._maxIndex,
                     value: (_a = this.attribute.dataIndex) !== null && _a !== void 0 ? _a : 0,
@@ -9000,7 +9304,6 @@
                     dy: this.attribute.slider.dy,
                     dx: this.attribute.slider.dx,
                     slidable: true,
-                    visible: true,
                     range: false,
                     handlerText: { visible: false },
                     startText: { visible: false },
@@ -9029,11 +9332,12 @@
             this._initSlider = () => {
                 const attrs = this._updateSliderAttrs();
                 this._slider = new Slider(attrs);
-                this.add(this._slider);
+                if (this._sliderVisible) {
+                    this.add(this._slider);
+                }
             };
             this._updateControllerAttrs = () => {
                 const attrs = {
-                    visible: true,
                     start: this._start,
                     pause: this._pause,
                     forward: this._forward,
@@ -9041,40 +9345,26 @@
                 };
                 if (isHorizontal(this._orient)) {
                     attrs.layout = 'horizontal';
-                    attrs.start = {
-                        style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
-                    };
-                    attrs.pause = {
-                        style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
-                    };
-                    attrs.backward = {
-                        style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y })
-                    };
-                    attrs.forward = {
-                        style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y })
-                    };
+                    attrs.start = Object.assign(Object.assign({}, attrs.start), { style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+                    attrs.pause = Object.assign(Object.assign({}, attrs.pause), { style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+                    attrs.backward = Object.assign(Object.assign({}, attrs.backward), { style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y }) });
+                    attrs.forward = Object.assign(Object.assign({}, attrs.forward), { style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y }) });
                 }
                 else {
                     attrs.layout = 'vertical';
-                    attrs.start = {
-                        style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
-                    };
-                    attrs.pause = {
-                        style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y })
-                    };
-                    attrs.backward = {
-                        style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y })
-                    };
-                    attrs.forward = {
-                        style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y })
-                    };
+                    attrs.start = Object.assign(Object.assign({}, attrs.start), { style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+                    attrs.pause = Object.assign(Object.assign({}, attrs.pause), { style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+                    attrs.backward = Object.assign(Object.assign({}, attrs.backward), { style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y }) });
+                    attrs.forward = Object.assign(Object.assign({}, attrs.forward), { style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y }) });
                 }
                 return attrs;
             };
             this._initController = () => {
                 const attrs = this._updateControllerAttrs();
                 this._controller = new Controller(attrs);
-                this.add(this._controller);
+                if (this._controllerVisible) {
+                    this.add(this._controller);
+                }
             };
             this._initAttributes();
             this._initLayoutInfo();
@@ -9082,19 +9372,21 @@
             this._initSlider();
         }
         _initAttributes() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             this._size = this.attribute.size;
             this._orient = this.attribute.orient;
             this._data = this.attribute.data;
             this._minIndex = 0;
             this._maxIndex = this._data.length - 1;
-            this._railStyle = Object.assign({}, (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.slider) === null || _b === void 0 ? void 0 : _b.railStyle);
-            this._trackStyle = Object.assign({}, (_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.slider) === null || _d === void 0 ? void 0 : _d.trackStyle);
-            this._handlerStyle = Object.assign({}, (_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.slider) === null || _f === void 0 ? void 0 : _f.handlerStyle);
-            this._start = Object.assign({}, (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.controller) === null || _h === void 0 ? void 0 : _h.start);
-            this._pause = Object.assign({}, (_k = (_j = this.attribute) === null || _j === void 0 ? void 0 : _j.controller) === null || _k === void 0 ? void 0 : _k.pause);
-            this._forward = Object.assign({}, (_m = (_l = this.attribute) === null || _l === void 0 ? void 0 : _l.controller) === null || _m === void 0 ? void 0 : _m.forward);
-            this._backward = Object.assign({}, (_p = (_o = this.attribute) === null || _o === void 0 ? void 0 : _o.controller) === null || _p === void 0 ? void 0 : _p.backward);
+            this._sliderVisible = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.slider) === null || _b === void 0 ? void 0 : _b.visible;
+            this._railStyle = Object.assign({}, (_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.slider) === null || _d === void 0 ? void 0 : _d.railStyle);
+            this._trackStyle = Object.assign({}, (_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.slider) === null || _f === void 0 ? void 0 : _f.trackStyle);
+            this._handlerStyle = Object.assign({}, (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.slider) === null || _h === void 0 ? void 0 : _h.handlerStyle);
+            this._controllerVisible = (_k = (_j = this.attribute) === null || _j === void 0 ? void 0 : _j.controller) === null || _k === void 0 ? void 0 : _k.visible;
+            this._start = Object.assign({}, (_m = (_l = this.attribute) === null || _l === void 0 ? void 0 : _l.controller) === null || _m === void 0 ? void 0 : _m.start);
+            this._pause = Object.assign({}, (_p = (_o = this.attribute) === null || _o === void 0 ? void 0 : _o.controller) === null || _p === void 0 ? void 0 : _p.pause);
+            this._forward = Object.assign({}, (_r = (_q = this.attribute) === null || _q === void 0 ? void 0 : _q.controller) === null || _r === void 0 ? void 0 : _r.forward);
+            this._backward = Object.assign({}, (_t = (_s = this.attribute) === null || _s === void 0 ? void 0 : _s.controller) === null || _t === void 0 ? void 0 : _t.backward);
         }
         _initLayoutInfo() {
             var _a, _b, _c;
@@ -9107,7 +9399,9 @@
                 const maxSize = vutils.isNumber(size) ? size : vutils.max(size[0], size[1]);
                 return len + controller.space + maxSize;
             }, 0);
-            const sliderPx = (isHorizontal(this._orient) ? (_b = this._size) === null || _b === void 0 ? void 0 : _b.width : (_c = this._size) === null || _c === void 0 ? void 0 : _c.height) - controllerPx;
+            const sliderPx = this._sliderVisible
+                ? (isHorizontal(this._orient) ? (_b = this._size) === null || _b === void 0 ? void 0 : _b.width : (_c = this._size) === null || _c === void 0 ? void 0 : _c.height) - controllerPx
+                : 0;
             const railPx = sliderPx - this.attribute.slider.space;
             const startPx = startControllers.reduce((px, controller) => {
                 const { key, space, style: { size } } = controller;
@@ -9162,6 +9456,7 @@
             width: 300
         },
         slider: {
+            visible: true,
             space: 10,
             dx: 0,
             dy: 0,
@@ -9172,6 +9467,7 @@
             handlerStyle: {}
         },
         controller: {
+            visible: true,
             start: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'start', position: 'start', space: 0 }),
             pause: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'pause', position: 'start' }),
             forward: Object.assign(Object.assign({}, defaultControllerAttributes), { key: 'forward', position: 'end' }),
@@ -9218,7 +9514,7 @@
                     const middle = Math.floor(e.detail.value) + 0.5;
                     this._dataIndex = e.detail.value >= middle ? Math.ceil(e.detail.value) : Math.floor(e.detail.value);
                     this._slider.setValue(this._dataIndex);
-                    this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
+                    this.dispatchCustomEvent(exports.PlayerEventEnum.change);
                 });
             };
             this.play = () => {
@@ -9249,7 +9545,7 @@
                         this._updateDataIndex(this._maxIndex);
                     }
                 }
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.play);
                 this._isReachEnd = false;
                 this._tickTime = Date.now();
                 this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, true));
@@ -9262,14 +9558,14 @@
                     return;
                 }
                 if (isFirstPlay && this._activeIndex !== this._dataIndex) {
-                    this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
+                    this.dispatchCustomEvent(exports.PlayerEventEnum.change);
                     this._activeIndex = this._dataIndex;
                 }
                 else if (now - this._tickTime >= this._interval) {
                     this._tickTime = now;
                     this._updateDataIndex(forwardStep(this._direction, this._dataIndex, this._minIndex, this._maxIndex));
                     this._activeIndex = this._dataIndex;
-                    this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
+                    this.dispatchCustomEvent(exports.PlayerEventEnum.change);
                 }
                 if ((this._direction === 'default' && this._dataIndex >= this._maxIndex) ||
                     (this._direction === 'reverse' && this._dataIndex <= this._minIndex)) {
@@ -9286,7 +9582,7 @@
                 this._controller.togglePlay();
                 vrender.vglobal.getCancelAnimationFrame()(this._rafId);
                 this._activeIndex = -1;
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.end);
             };
             this.pause = () => {
                 if (!this._isPlaying) {
@@ -9295,19 +9591,19 @@
                 this._isPlaying = false;
                 vrender.vglobal.getCancelAnimationFrame()(this._rafId);
                 this._controller.togglePlay();
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.pause);
             };
             this.backward = () => {
                 const index = Math.max(this._dataIndex - 1, this._minIndex);
                 this._updateDataIndex(index);
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnBackward);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.change);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.backward);
             };
             this.forward = () => {
                 const index = Math.min(this._dataIndex + 1, this._maxIndex);
                 this._updateDataIndex(index);
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnForward);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.change);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.forward);
             };
             this._initAttributes();
             this._initEvents();
@@ -9388,7 +9684,7 @@
                     this._dataIndex = index;
                     this._activeIndex = index;
                     if (index !== this._maxIndex) {
-                        this.dispatchCustomEvent(exports.PlayerEventEnum.OnChange);
+                        this.dispatchCustomEvent(exports.PlayerEventEnum.change);
                     }
                 }
             };
@@ -9402,7 +9698,7 @@
                     this._elapsed = 0;
                 }
                 this._startTime = Date.now() - this._elapsed;
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.play);
                 this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
             });
             this._play = () => {
@@ -9419,7 +9715,7 @@
                 this._isPlaying = false;
                 vrender.vglobal.getCancelAnimationFrame()(this._rafId);
                 this._controller.togglePlay();
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.end);
             };
             this.pause = () => {
                 if (!this._isPlaying) {
@@ -9429,7 +9725,7 @@
                 this._elapsed = Date.now() - this._startTime;
                 vrender.vglobal.getCancelAnimationFrame()(this._rafId);
                 this._controller.togglePlay();
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.pause);
             };
             this.backward = () => {
                 const now = Date.now();
@@ -9444,7 +9740,7 @@
                     this._startTime = this._startTime + this._interval;
                 }
                 this._updateSlider();
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnBackward);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.backward);
             };
             this.forward = () => {
                 const now = Date.now();
@@ -9459,7 +9755,7 @@
                     this._elapsed = elapsed;
                 }
                 this._updateSlider();
-                this.dispatchCustomEvent(exports.PlayerEventEnum.OnForward);
+                this.dispatchCustomEvent(exports.PlayerEventEnum.forward);
             };
             this._initAttributes();
             this._initEvents();
@@ -9773,6 +10069,13 @@
         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;
 
@@ -10162,7 +10465,7 @@
         return new Tag(params ? params.attribute : {});
     }
 
-    const version = "0.15.0-alpha.6";
+    const version = "0.15.1";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;