@visactor/vrender-components 0.14.0-alpha.9 → 0.14.1-alpha.0

package/dist/index.js

@@ -273,9 +273,9 @@
             e.stopPropagation();
             const { direction } = this.attribute;
             this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onSliderPointerMove);
-                vrender.global.addEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onSliderPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.addEventListener('pointermove', this._onSliderPointerMove);
@@ -306,9 +306,9 @@
         };
         _onSliderPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onSliderPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onSliderPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
             }
             else {
                 this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
@@ -1618,6 +1618,10 @@
         _lastHover;
         _lastSelect;
         _enableAnimation;
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+            const arcs = [];
+            return arcs;
+        }
         render() {
             this._prepare();
             const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -1753,15 +1757,18 @@
         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 = {
+                    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) {
@@ -1772,6 +1779,20 @@
                 text.setAttributes(textLocation);
                 labels.push(text);
             }
+            if (this.attribute.type === 'arc') {
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray);
+                for (let i = 0; i < data.length; i++) {
+                    const textData = data[i];
+                    const basedArc = arcs.find(arc => arc.labelText === textData.text);
+                    const labelAttribute = {
+                        x: basedArc.labelPosition.x,
+                        y: basedArc.labelPosition.y,
+                        angle: this.attribute.angle ?? basedArc.angle,
+                        labelLinePath: basedArc.labelLinePath
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                }
+            }
             return labels;
         }
         _overlapping(labels) {
@@ -1828,6 +1849,20 @@
                         continue;
                     }
                 }
+                if (clampForce) {
+                    const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                    if (!(dx === 0 && dy === 0) &&
+                        canPlace(bmpTool, bitmap, {
+                            x1: text.AABBBounds.x1 + dx,
+                            x2: text.AABBBounds.x2 + dx,
+                            y1: text.AABBBounds.y1 + dy,
+                            y2: text.AABBBounds.y2 + dy
+                        })) {
+                        text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                        result.push(text);
+                        continue;
+                    }
+                }
                 let hasPlace = false;
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
@@ -1886,6 +1921,14 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
+                const labelLine = text.attribute?.labelLinePath
+                    ? vrender.createPath({
+                        visible: text.attribute?.visible ?? true,
+                        stroke: text.attribute?.line?.stroke ?? text.attribute?.fill,
+                        lineWidth: 1,
+                        path: text.attribute?.labelLinePath
+                    })
+                    : undefined;
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
@@ -1894,6 +1937,9 @@
                     if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -1908,6 +1954,9 @@
                     }
                     else {
                         this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                     }
                 }
                 if (state === 'update') {
@@ -2001,7 +2050,15 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                const isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                if (this.attribute.type === 'arc') {
+                    if (this.attribute.position === 'inside') {
+                        isInside = true;
+                    }
+                    else {
+                        isInside = false;
+                    }
+                }
                 if (label.attribute.stroke && label.attribute.lineWidth > 0) {
                     label.setAttributes({
                         fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
@@ -2228,9 +2285,782 @@
         }
     }
 
+    function polarToCartesian(point) {
+        if (!point.radius) {
+            return { x: 0, y: 0 };
+        }
+        return {
+            x: Math.cos(point.angle) * point.radius,
+            y: Math.sin(point.angle) * point.radius
+        };
+    }
+    function circlePoint(x0, y0, radius, radian) {
+        const offset = polarToCartesian({
+            radius,
+            angle: radian
+        });
+        return {
+            x: x0 + offset.x,
+            y: y0 + offset.y
+        };
+    }
+    function computeQuadrant(angle) {
+        angle = normalizeAngle(angle);
+        if (angle > 0 && angle <= Math.PI / 2) {
+            return 2;
+        }
+        else if (angle > Math.PI / 2 && angle <= Math.PI) {
+            return 3;
+        }
+        else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
+            return 4;
+        }
+        return 1;
+    }
+    function normalizeAngle(angle) {
+        while (angle < 0) {
+            angle += Math.PI * 2;
+        }
+        while (angle >= Math.PI * 2) {
+            angle -= Math.PI * 2;
+        }
+        return angle;
+    }
+    function isQuadrantLeft(quadrant) {
+        return quadrant === 3 || quadrant === 4;
+    }
+    function isQuadrantRight(quadrant) {
+        return quadrant === 1 || quadrant === 2;
+    }
+    function lineCirclePoints(a, b, c, x0, y0, r) {
+        if ((a === 0 && b === 0) || r <= 0) {
+            return [];
+        }
+        if (a === 0) {
+            const y1 = -c / b;
+            const fy = (y1 - y0) ** 2;
+            const fd = r ** 2 - fy;
+            if (fd < 0) {
+                return [];
+            }
+            else if (fd === 0) {
+                return [{ x: x0, y: y1 }];
+            }
+            const x1 = Math.sqrt(fd) + x0;
+            const x2 = -Math.sqrt(fd) + x0;
+            return [
+                { x: x1, y: y1 },
+                { x: x2, y: y1 }
+            ];
+        }
+        else if (b === 0) {
+            const x1 = -c / a;
+            const fx = (x1 - x0) ** 2;
+            const fd = r ** 2 - fx;
+            if (fd < 0) {
+                return [];
+            }
+            else if (fd === 0) {
+                return [{ x: x1, y: y0 }];
+            }
+            const y1 = Math.sqrt(fd) + y0;
+            const y2 = -Math.sqrt(fd) + y0;
+            return [
+                { x: x1, y: y1 },
+                { x: x1, y: y2 }
+            ];
+        }
+        const fa = (b / a) ** 2 + 1;
+        const fb = 2 * ((c / a + x0) * (b / a) - y0);
+        const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
+        const fd = fb ** 2 - 4 * fa * fc;
+        if (fd < 0) {
+            return [];
+        }
+        const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
+        const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
+        const x1 = -(b * y1 + c) / a;
+        const x2 = -(b * y2 + c) / a;
+        if (fd === 0) {
+            return [{ x: x1, y: y1 }];
+        }
+        return [
+            { x: x1, y: y1 },
+            { x: x2, y: y2 }
+        ];
+    }
+    function connectLineRadian(radius, length) {
+        if (length > radius * 2) {
+            return NaN;
+        }
+        return Math.asin(length / 2 / radius) * 2;
+    }
+    function checkBoundsOverlap(boundsA, boundsB) {
+        const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
+        const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
+        return !((ax1 <= bx1 && ax2 <= bx1) ||
+            (ax1 >= bx2 && ax2 >= bx2) ||
+            (ay1 <= by1 && ay2 <= by1) ||
+            (ay1 >= by2 && ay2 >= by2));
+    }
+
+    class ArcInfo {
+        key;
+        refDatum;
+        center;
+        outerCenter;
+        labelSize;
+        labelPosition;
+        labelLimit;
+        labelVisible;
+        lastLabelY;
+        labelYRange;
+        labelText;
+        pointA;
+        pointB;
+        pointC;
+        labelLinePath;
+        quadrant;
+        radian;
+        middleAngle;
+        k;
+        textAlign;
+        textBaseline;
+        angle;
+        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle) {
+            this.refDatum = refDatum;
+            this.center = center;
+            this.outerCenter = outerCenter;
+            this.quadrant = quadrant;
+            this.radian = radian;
+            this.middleAngle = middleAngle;
+            this.labelVisible = true;
+            this.labelLimit = 0;
+        }
+        getLabelBounds() {
+            if (!this.labelPosition || !this.labelSize) {
+                return { x1: 0, x2: 0, y1: 0, y2: 0 };
+            }
+            return {
+                x1: this.labelPosition.x - this.labelSize.width / 2,
+                y1: this.labelPosition.y - this.labelSize.height / 2,
+                x2: this.labelPosition.x + this.labelSize.width / 2,
+                y2: this.labelPosition.y + this.labelSize.height / 2
+            };
+        }
+    }
+    class ArcLabel extends LabelBase {
+        name = 'arc-label';
+        static defaultAttributes = {
+            coverEnable: false,
+            spaceWidth: 5,
+            layoutArcGap: 6,
+            textStyle: {
+                visible: true,
+                fontSize: 14,
+                fontWeight: 'normal',
+                fillOpacity: 1,
+                textAlign: 'center',
+                textBaseline: 'middle'
+            },
+            position: 'outside',
+            offset: 0,
+            line: {
+                visible: true,
+                line1MinLength: 20,
+                line2MinLength: 10
+            },
+            layout: {
+                align: 'arc',
+                strategy: 'priority',
+                tangentConstraint: true
+            }
+        };
+        _ellipsisWidth = 0;
+        _arcLeft = new Map();
+        _arcRight = new Map();
+        constructor(attributes) {
+            super(vutils.merge({}, ArcLabel.defaultAttributes, attributes));
+        }
+        _overlapping(labels) {
+            return labels;
+        }
+        labeling(textBounds, graphicBounds, position = 'outside', offset = 0) {
+            if (!textBounds || !graphicBounds) {
+                return;
+            }
+            return { x: 0, y: 0 };
+        }
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+            this._arcLeft.clear();
+            this._arcRight.clear();
+            const { width, height } = attribute;
+            currentMarks.forEach((currentMark, index) => {
+                const graphicAttribute = currentMark.attribute;
+                const radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height);
+                const radius = this.computeRadius(radiusRatio, width, height);
+                const center = { x: graphicAttribute?.x ?? 0, y: graphicAttribute?.y ?? 0 };
+                const item = data[index];
+                const textBounds = textBoundsArray[index];
+                const arcMiddleAngle = (graphicAttribute.startAngle + graphicAttribute.endAngle) / 2;
+                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), arc.middleAngle);
+                arc.labelSize = {
+                    width: textBounds.x2 - textBounds.x1,
+                    height: textBounds.y2 - textBounds.y1
+                };
+                if (isQuadrantRight(arc.quadrant)) {
+                    this._arcRight.set(arc.refDatum, arc);
+                }
+                else if (isQuadrantLeft(arc.quadrant)) {
+                    this._arcLeft.set(arc.refDatum, arc);
+                }
+            });
+            const leftArcs = Array.from(this._arcLeft.values());
+            const rightArcs = Array.from(this._arcRight.values());
+            const arcs = [];
+            if (position === 'inside') {
+                arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
+                arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
+            }
+            else {
+                arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
+                arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
+            }
+            return arcs;
+        }
+        _layoutInsideLabels(arcs, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 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) => {
+                const { labelSize, radian } = arc;
+                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, 1);
+                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, 1);
+                const minRadian = connectLineRadian(outerRadius, labelSize.height);
+                let limit;
+                if (radian < minRadian) {
+                    limit = 0;
+                }
+                else {
+                    let minRadius;
+                    if (radian >= Math.PI) {
+                        minRadius = innerRadius;
+                    }
+                    else {
+                        minRadius = Math.max(innerRadius, labelSize.height / 2 / Math.tan(radian / 2));
+                    }
+                    limit = outerRadius - minRadius - spaceWidth;
+                }
+                if (labelConfig?.rotate !== true) {
+                    limit = outerRadius - spaceWidth;
+                }
+                const text = this._getFormatLabelText(arc.refDatum, limit);
+                arc.labelText = text;
+                const labelWidth = Math.min(limit, arc.labelSize.width);
+                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.labelLimit = labelWidth;
+                if (!vutils.isGreater(labelWidth, 0)) {
+                    arc.labelVisible = false;
+                }
+                arc.angle = arc.middleAngle;
+            });
+            return arcs;
+        }
+        _layoutOutsideLabels(arcs, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const height = center.y * 2;
+            const line2MinLength = attribute.line.line2MinLength;
+            const labelLayout = attribute.layout;
+            const spaceWidth = attribute.spaceWidth;
+            arcs.forEach(arc => {
+                const direction = isQuadrantLeft(arc.quadrant) ? -1 : 1;
+                arc.labelPosition = {
+                    x: arc.outerCenter.x + direction * (arc.labelSize.width / 2 + line2MinLength + spaceWidth),
+                    y: arc.outerCenter.y
+                };
+            });
+            arcs.sort((a, b) => {
+                return a.labelPosition.y - b.labelPosition.y;
+            });
+            if (attribute.coverEnable !== false || labelLayout.strategy === 'none') {
+                for (const arc of arcs) {
+                    const { labelPosition, labelSize } = arc;
+                    arc.labelLimit = labelSize.width;
+                    arc.pointB = isQuadrantLeft(arc.quadrant)
+                        ? {
+                            x: labelPosition.x + labelSize.width / 2 + line2MinLength + spaceWidth,
+                            y: labelPosition.y
+                        }
+                        : {
+                            x: labelPosition.x - labelSize.width / 2 - line2MinLength - spaceWidth,
+                            y: labelPosition.y
+                        };
+                    this._computeX(arc, attribute, currentMarks);
+                }
+                if (attribute.coverEnable === false && labelLayout.strategy === 'none') {
+                    this._coverLabels(arcs);
+                }
+            }
+            else {
+                const maxLabels = height / (attribute.textStyle?.fontSize || 16);
+                this._adjustY(arcs, maxLabels, attribute, currentMarks);
+                const { minY, maxY } = arcs.reduce((yInfo, arc) => {
+                    const { y1, y2 } = arc.getLabelBounds();
+                    yInfo.minY = Math.max(0, Math.min(y1, yInfo.minY));
+                    yInfo.maxY = Math.min(height, Math.max(y2, yInfo.maxY));
+                    return yInfo;
+                }, { minY: Infinity, maxY: -Infinity });
+                const halfY = Math.max(Math.abs(height / 2 - minY), Math.abs(maxY - height / 2));
+                const r = this._computeLayoutRadius(halfY, attribute, currentMarks);
+                for (const arc of arcs) {
+                    this._computePointB(arc, r, attribute, currentMarks);
+                    this._computeX(arc, attribute, currentMarks);
+                }
+            }
+            const width = center.x * 2;
+            arcs.forEach(arc => {
+                if (arc.labelVisible &&
+                    (vutils.isLess(arc.pointB.x, line2MinLength + spaceWidth) ||
+                        vutils.isGreater(arc.pointB.x, width - line2MinLength - spaceWidth))) {
+                    arc.labelVisible = false;
+                }
+                arc.angle = 0;
+                arc.labelLinePath =
+                    `M${Math.round(arc.pointA.x)},${Math.round(arc.pointA.y)}` +
+                        ` L${Math.round(arc.pointB.x)},${Math.round(arc.pointB.y)}` +
+                        ` L${Math.round(arc.pointC.x)},${Math.round(arc.pointC.y)}`;
+            });
+            return arcs;
+        }
+        _computeX(arc, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotLayout = { width: center.x * 2, height: center.y * 2 };
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = attribute.line.line1MinLength;
+            const line2MinLength = attribute.line.line2MinLength;
+            const labelLayoutAlign = attribute.layout?.align;
+            const spaceWidth = attribute.spaceWidth;
+            this._computeAlign(arc, attribute);
+            const { labelPosition, quadrant, pointB } = arc;
+            if (!vutils.isValidNumber(pointB.x * pointB.y)) {
+                arc.pointC = { x: NaN, y: NaN };
+                labelPosition.x = NaN;
+                arc.labelLimit = 0;
+            }
+            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;
+            let limit = restWidth - line2MinLength - spaceWidth;
+            if (labelLayoutAlign === 'labelLine') {
+                cx = (radius + line1MinLength + line2MinLength) * flag + center.x;
+                limit = (flag > 0 ? plotLayout.width - cx : cx) - spaceWidth;
+            }
+            const text = this._getFormatLabelText(arc.refDatum, limit);
+            arc.labelText = text;
+            let labelWidth = Math.min(limit, arc.labelSize.width);
+            switch (labelLayoutAlign) {
+                case 'labelLine':
+                    break;
+                case 'edge':
+                    cx = flag > 0 ? plotLayout.width - labelWidth - spaceWidth : labelWidth + spaceWidth;
+                    break;
+                case 'arc':
+                default:
+                    cx = pointB.x + flag * line2MinLength;
+                    break;
+            }
+            labelWidth = Math.max(this._ellipsisWidth, labelWidth);
+            arc.pointC = { x: cx, y: labelPosition.y };
+            if (labelLayoutAlign === 'edge') {
+                const alignOffset = 0;
+                labelPosition.x = flag > 0 ? plotLayout.width + alignOffset : alignOffset;
+            }
+            else {
+                const alignOffset = 0;
+                labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * arc.labelSize.width);
+            }
+            arc.labelLimit = labelWidth;
+        }
+        _computeAlignOffset(align, labelWidth, alignFlag) {
+            switch (align) {
+                case 'left':
+                    return alignFlag < 0 ? -labelWidth : 0;
+                case 'right':
+                    return alignFlag < 0 ? 0 : labelWidth;
+                case 'center':
+                default:
+                    return (labelWidth / 2) * alignFlag;
+            }
+        }
+        _computeAlign(arc, attribute) {
+            const labelConfig = attribute;
+            const textAlign = labelConfig.textStyle?.textAlign ?? labelConfig.textStyle?.align;
+            const layoutAlign = labelConfig.layout?.textAlign ?? labelConfig.layout?.align;
+            if (labelConfig.position !== 'inside') {
+                if (vutils.isNil(textAlign) || textAlign === 'auto') {
+                    if (layoutAlign === 'edge') {
+                        return isQuadrantLeft(arc.quadrant) ? 'left' : 'right';
+                    }
+                    return isQuadrantLeft(arc.quadrant) ? 'right' : 'left';
+                }
+                return textAlign;
+            }
+            return vutils.isNil(textAlign) || textAlign === 'auto' ? 'center' : textAlign;
+        }
+        _getFormatLabelText(value, limit) {
+            return value.text;
+        }
+        _adjustY(arcs, maxLabels, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotRect = { width: center.x * 2, height: center.y * 2 };
+            const labelLayout = attribute.layout;
+            if (labelLayout.strategy === 'vertical') {
+                let lastY = 0;
+                let delta;
+                const len = arcs.length;
+                if (len <= 0) {
+                    return;
+                }
+                for (let i = 0; i < len; i++) {
+                    const { y1 } = arcs[i].getLabelBounds();
+                    delta = y1 - lastY;
+                    if (vutils.isLess(delta, 0)) {
+                        const index = this._shiftY(arcs, i, len - 1, -delta);
+                        this._shiftY(arcs, index, 0, delta / 2);
+                    }
+                    const { y2 } = arcs[i].getLabelBounds();
+                    lastY = y2;
+                }
+                const { y1: firstY1 } = arcs[0].getLabelBounds();
+                delta = firstY1 - 0;
+                if (vutils.isLess(delta, 0)) {
+                    this._shiftY(arcs, 0, len - 1, -delta);
+                }
+                for (let i = arcs.length - 1; i >= 0; i--) {
+                    if (arcs[i].getLabelBounds().y2 > plotRect.height) {
+                        arcs[i].labelVisible = false;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else if (labelLayout.strategy !== 'none') {
+                const priorityArcs = arcs.map((arc, i) => {
+                    return {
+                        arc,
+                        originIndex: i,
+                        priorityIndex: 0
+                    };
+                });
+                priorityArcs.sort((a, b) => {
+                    return b.arc.radian - a.arc.radian;
+                });
+                priorityArcs.forEach((priorityArc, i) => {
+                    priorityArc.priorityIndex = i;
+                    priorityArc.arc.labelVisible = false;
+                });
+                let topLabelIndex = Infinity;
+                let bottomLabelIndex = -Infinity;
+                for (let i = 0; i < maxLabels && i < arcs.length; i++) {
+                    this._storeY(arcs);
+                    const arc = priorityArcs[i].arc;
+                    this._computeYRange(arc, attribute, currentMarks);
+                    arc.labelVisible = true;
+                    const curY = arc.labelPosition.y;
+                    const { lastIndex, nextIndex } = this._findNeighborIndex(arcs, priorityArcs[i]);
+                    const lastArc = arcs[lastIndex];
+                    const nextArc = arcs[nextIndex];
+                    if (lastIndex === -1 && nextIndex !== -1) {
+                        const nextY = nextArc.labelPosition.y;
+                        if (curY > nextY) {
+                            arc.labelPosition.y = nextY - nextArc.labelSize.height / 2 - arc.labelSize.height / 2;
+                        }
+                        else {
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                    }
+                    else if (lastIndex !== -1 && nextIndex === -1) {
+                        const lastY = lastArc.labelPosition.y;
+                        if (curY < lastY) {
+                            arc.labelPosition.y = lastY + lastArc.labelSize.height / 2 + arc.labelSize.height / 2;
+                        }
+                        else {
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                        }
+                    }
+                    else if (lastIndex !== -1 && nextIndex !== -1) {
+                        const lastY = lastArc.labelPosition.y;
+                        const nextY = nextArc.labelPosition.y;
+                        if (curY > nextY) {
+                            arc.labelPosition.y = nextY - nextArc.labelSize.height / 2 - arc.labelSize.height / 2;
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                        }
+                        else if (curY < lastY) {
+                            arc.labelPosition.y = lastY + lastArc.labelSize.height / 2 + arc.labelSize.height / 2;
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                        else {
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                    }
+                    const nextTopIndex = Math.min(topLabelIndex, priorityArcs[i].originIndex);
+                    const nextBottomIndex = Math.max(bottomLabelIndex, priorityArcs[i].originIndex);
+                    let delta;
+                    delta = arcs[nextBottomIndex].getLabelBounds().y2 - plotRect.height;
+                    if (vutils.isGreater(delta, 0)) {
+                        this._shiftY(arcs, nextBottomIndex, 0, -delta);
+                    }
+                    delta = arcs[nextTopIndex].getLabelBounds().y1 - 0;
+                    if (vutils.isLess(delta, 0)) {
+                        this._shiftY(arcs, nextTopIndex, arcs.length - 1, -delta);
+                    }
+                    delta = arcs[nextBottomIndex].getLabelBounds().y2 - plotRect.height;
+                    if (vutils.isGreater(delta, 0)) {
+                        arc.labelVisible = false;
+                        this._restoreY(arcs);
+                        break;
+                    }
+                    else if (labelLayout.tangentConstraint && !this._checkYRange(arcs)) {
+                        arc.labelVisible = false;
+                        this._restoreY(arcs);
+                    }
+                    else {
+                        topLabelIndex = nextTopIndex;
+                        bottomLabelIndex = nextBottomIndex;
+                    }
+                }
+            }
+        }
+        _shiftY(arcs, start, end, delta) {
+            const direction = start < end ? 1 : -1;
+            let index = start;
+            while (index !== -1) {
+                arcs[index].labelPosition.y += delta;
+                const nextIndex = this._findNextVisibleIndex(arcs, index, end, direction);
+                if (nextIndex >= 0 && nextIndex < arcs.length) {
+                    const { y1: curY1, y2: curY2 } = arcs[index].getLabelBounds();
+                    const { y1: nextY1, y2: nextY2 } = arcs[nextIndex].getLabelBounds();
+                    if ((direction > 0 && curY2 < nextY1) || (direction < 0 && curY1 > nextY2)) {
+                        return index;
+                    }
+                }
+                index = nextIndex;
+            }
+            return end;
+        }
+        _findNextVisibleIndex(arcs, start, end, direction) {
+            const diff = (end - start) * direction;
+            for (let i = 1; i <= diff; i++) {
+                const index = start + i * direction;
+                if (arcs[index].labelVisible) {
+                    return index;
+                }
+            }
+            return -1;
+        }
+        _computePointB(arc, r, attribute, currentMarks) {
+            const labelConfig = attribute;
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = labelConfig.line.line1MinLength;
+            const labelLayout = labelConfig.layout;
+            if (labelLayout.strategy === 'none') {
+                arc.pointB = {
+                    x: arc.outerCenter.x,
+                    y: arc.outerCenter.y
+                };
+            }
+            else {
+                const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+                const { labelPosition, quadrant } = arc;
+                const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
+                const rd = r - outerR;
+                const x = Math.sqrt(r ** 2 - Math.abs(center.y - labelPosition.y) ** 2) - rd;
+                if (vutils.isValidNumber(x)) {
+                    arc.pointB = {
+                        x: center.x + x * (isQuadrantLeft(quadrant) ? -1 : 1),
+                        y: labelPosition.y
+                    };
+                }
+                else {
+                    arc.pointB = { x: NaN, y: NaN };
+                }
+            }
+        }
+        _storeY(arcs) {
+            for (const arc of arcs) {
+                if (arc.labelVisible) {
+                    arc.lastLabelY = arc.labelPosition.y;
+                }
+            }
+        }
+        _computeYRange(arc, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotRect = { width: center.x * 2, height: center.y * 2 };
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = attribute.line.line1MinLength;
+            const { width, height } = plotRect;
+            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;
+            let a;
+            let b;
+            let c;
+            if (vutils.isNumberClose(width / 2, cx)) {
+                a = 0;
+                b = 1;
+                c = -cy;
+            }
+            else if (vutils.isNumberClose(height / 2, cy)) {
+                a = 1;
+                b = 0;
+                c = -cx;
+            }
+            else {
+                const k = -1 / (cy / cx);
+                a = k;
+                b = -1;
+                c = cy - k * cx;
+            }
+            const points = lineCirclePoints(a, b, c, line1MinLength + radius - r, 0, r);
+            if (points.length < 2) {
+                return;
+            }
+            let min;
+            let max;
+            if (points[0].x > points[1].x) {
+                points.reverse();
+            }
+            if (points[0].x < 0) {
+                if (vutils.isNumberClose(points[0].y, points[1].y)) {
+                    if (Math.abs(arc.middleAngle) < Math.PI / 2) {
+                        min = 0;
+                        max = points[1].y + height / 2;
+                    }
+                    else {
+                        min = points[1].y + height / 2;
+                        max = height;
+                    }
+                }
+                else if (points[0].y < points[1].y) {
+                    min = 0;
+                    max = points[1].y + height / 2;
+                }
+                else {
+                    min = points[1].y + height / 2;
+                    max = plotRect.height;
+                }
+            }
+            else {
+                min = Math.min(points[0].y, points[1].y) + height / 2;
+                max = Math.max(points[0].y, points[1].y) + height / 2;
+            }
+            arc.labelYRange = [min, max];
+        }
+        _computeLayoutRadius(halfYLength, attribute, currentMarks) {
+            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 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);
+        }
+        _findNeighborIndex(arcs, priorityArc) {
+            const index = priorityArc.originIndex;
+            let lastIndex = -1;
+            let nextIndex = -1;
+            for (let i = index - 1; i >= 0; i--) {
+                if (arcs[i].labelVisible) {
+                    lastIndex = i;
+                    break;
+                }
+            }
+            for (let i = index + 1; i < arcs.length; i++) {
+                if (arcs[i].labelVisible) {
+                    nextIndex = i;
+                    break;
+                }
+            }
+            return {
+                lastIndex,
+                nextIndex
+            };
+        }
+        _twoWayShift(arcs, lastArc, nextArc, nextIndex) {
+            const delta = nextArc.getLabelBounds().y1 - lastArc.getLabelBounds().y2;
+            if (vutils.isLess(delta, 0)) {
+                const i = this._shiftY(arcs, nextIndex, arcs.length - 1, -delta);
+                this._shiftY(arcs, i, 0, delta / 2);
+            }
+        }
+        _restoreY(arcs) {
+            for (const arc of arcs) {
+                if (arc.labelVisible) {
+                    arc.labelPosition.y = arc.lastLabelY;
+                }
+            }
+        }
+        _checkYRange(arcs) {
+            for (const arc of arcs) {
+                const { labelYRange, labelPosition } = arc;
+                if (arc.labelVisible &&
+                    labelYRange &&
+                    (vutils.isLess(labelPosition.y, labelYRange[0]) || vutils.isGreater(labelPosition.y, labelYRange[1]))) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        _coverLabels(arcs) {
+            if (arcs.length <= 1) {
+                return;
+            }
+            let lastBounds = arcs[0].getLabelBounds();
+            for (let i = 1; i < arcs.length; i++) {
+                const bounds = arcs[i].getLabelBounds();
+                if (!checkBoundsOverlap(lastBounds, bounds)) {
+                    lastBounds = bounds;
+                }
+                else {
+                    arcs[i].labelVisible = false;
+                }
+            }
+        }
+        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);
+        }
+        computeLayoutOuterRadius(r, width, height) {
+            return r / (Math.min(width, height) / 2);
+        }
+        computeDatumRadius(width, height, outerRadius) {
+            const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
+        }
+    }
+
     const labelComponentMap = {
         rect: RectLabel,
-        symbol: SymbolLabel
+        symbol: SymbolLabel,
+        arc: ArcLabel
     };
     class DataLabel extends AbstractComponent {
         name = 'data-label';
@@ -2858,7 +3688,7 @@
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
                 if (vutils.isEmpty(this.attribute.tick?.state)) {
-                    line.states = null;
+                    line.states = DEFAULT_STATES$2;
                 }
                 else {
                     const data = this.data[index];
@@ -2884,7 +3714,7 @@
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
                         if (vutils.isEmpty(subTick.state)) {
-                            line.states = null;
+                            line.states = DEFAULT_STATES$2;
                         }
                         else {
                             const subTickLineState = vutils.merge({}, DEFAULT_STATES$2, subTick.state);
@@ -2921,7 +3751,7 @@
                 text.name = exports.AXIS_ELEMENT_NAME.label;
                 text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
                 if (vutils.isEmpty(this.attribute.label?.state)) {
-                    text.states = null;
+                    text.states = DEFAULT_STATES$2;
                 }
                 else {
                     const labelState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
@@ -2977,7 +3807,17 @@
         getTextAlign(vector) {
             let align = 'center';
             if (vutils.isNumberClose(vector[0], 0)) {
-                align = 'center';
+                if (vutils.isNumberClose(vector[1], 0)) {
+                    if (Object.is(vector[1], -0)) {
+                        align = 'start';
+                    }
+                    else if (Object.is(vector[0], -0)) {
+                        align = 'end';
+                    }
+                }
+                else {
+                    align = 'center';
+                }
             }
             else if (vector[0] > 0) {
                 align = 'start';
@@ -3105,7 +3945,7 @@
             }
             const point = this.getVerticalCoord(tickDatum.point, offset, inside);
             const vector = this.getVerticalVector(offset, inside, point);
-            const text = formatMethod ? formatMethod(tickDatum.label, tickDatum, index, tickData, layer) : tickDatum.label;
+            const text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
             let { style: textStyle } = tagAttributes;
             textStyle = vutils.isFunction(textStyle)
                 ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
@@ -3366,14 +4206,25 @@
             return;
         }
         labels.forEach(label => {
-            const limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
+            if ((orient === 'top' || orient === 'bottom') && Math.floor(label.AABBBounds.height()) <= limitLength) {
+                return;
+            }
+            if ((orient === 'left' || orient === 'right') && Math.floor(label.AABBBounds.width()) <= limitLength) {
+                return;
+            }
+            let limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
                 ? orient === 'top' || orient === 'bottom'
                     ? null
                     : limitLength
                 : Math.abs(limitLength / Math.sin(label.attribute.angle));
+            if (vutils.isValidNumber(label.attribute.maxLineWidth)) {
+                limitLabelLength = vutils.isValidNumber(limitLabelLength)
+                    ? Math.min(label.attribute.maxLineWidth, limitLabelLength)
+                    : label.attribute.maxLineWidth;
+            }
             label.setAttributes({
                 maxLineWidth: limitLabelLength,
-                ellipsis
+                ellipsis: label.attribute.ellipsis || ellipsis
             });
         });
     }
@@ -3471,9 +4322,7 @@
                 });
                 bgRect.name = exports.AXIS_ELEMENT_NAME.background;
                 bgRect.id = this._getNodeId('background');
-                if (!vutils.isEmpty(panel.state)) {
-                    bgRect.states = vutils.merge({}, DEFAULT_STATES$1, panel.state);
-                }
+                bgRect.states = vutils.merge({}, DEFAULT_STATES$1, panel.state ?? {});
                 axisContainer.insertBefore(bgRect, axisContainer.firstChild);
             }
         }
@@ -3641,13 +4490,11 @@
                     textBaseline,
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             attrs.angle = angle;
             if (shape && shape.visible) {
@@ -3769,7 +4616,7 @@
             const { verticalFactor = 1 } = this.attribute;
             const factor = (inside ? 1 : -1) * verticalFactor;
             if (vutils.isNumberClose(vector[1], 0)) {
-                if (vutils.isNumberClose(vector[0], 0)) {
+                if (vutils.isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
                     base = factor === 1 ? 'bottom' : 'top';
                 }
                 else {
@@ -3995,13 +4842,11 @@
                     textAlign: 'center',
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             const { angle } = restAttrs;
             attrs.angle = angle;
@@ -4519,9 +5364,9 @@
             if (this._selectedPreviewGroup) {
                 this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
             }
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
-                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this));
+                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
             }
             this.addEventListener('pointermove', this._onHandlerPointerMove);
             this.addEventListener('pointerup', this._onHandlerPointerUp);
@@ -5211,7 +6056,10 @@
             }
             if (markerVisible) {
                 if (!this._container) {
-                    const group = vrender.createGroup({});
+                    const group = vrender.createGroup({
+                        ...this.attribute?.clipRange,
+                        clip: vutils.isValid(this.attribute?.clipRange) ?? false
+                    });
                     group.name = 'marker-container';
                     this.add(group);
                     this._container = group;
@@ -7196,9 +8044,9 @@
             e.stopPropagation();
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.global.addEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove);
@@ -7240,9 +8088,9 @@
         _onHandlerPointerUp = (e) => {
             e.preventDefault();
             this._currentHandler = null;
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onHandlerPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onHandlerPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onHandlerPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
             }
             else {
                 const currentTarget = e.target;
@@ -7254,9 +8102,9 @@
         _onTrackPointerdown = (e) => {
             e.stopPropagation();
             this._prePos = this._isHorizontal ? e.clientX : e.clientY;
-            if (vrender.global.env === 'browser') {
-                vrender.global.addEventListener('pointermove', this._onTrackPointerMove);
-                vrender.global.addEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.addEventListener('pointermove', this._onTrackPointerMove);
+                vrender.vglobal.addEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.addEventListener('pointermove', this._onTrackPointerMove);
@@ -7308,9 +8156,9 @@
         };
         _onTrackPointerUp = (e) => {
             e.preventDefault();
-            if (vrender.global.env === 'browser') {
-                vrender.global.removeEventListener('pointermove', this._onTrackPointerMove);
-                vrender.global.removeEventListener('pointerup', this._onTrackPointerUp);
+            if (vrender.vglobal.env === 'browser') {
+                vrender.vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
+                vrender.vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
             }
             else {
                 this._track.removeEventListener('pointermove', this._onTrackPointerMove);
@@ -8851,7 +9699,7 @@
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
             this._isReachEnd = false;
             this._tickTime = Date.now();
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, true));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, true));
         };
         _play = (isFirstPlay) => {
             const now = Date.now();
@@ -8874,7 +9722,7 @@
                 (this._direction === 'reverse' && this._dataIndex <= this._minIndex)) {
                 this._isReachEnd = true;
             }
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this, false));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this, false));
         };
         _updateDataIndex = (dataIndex) => {
             this._dataIndex = dataIndex;
@@ -8883,7 +9731,7 @@
         _playEnd = () => {
             this._isPlaying = false;
             this._controller.togglePlay();
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._activeIndex = -1;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -8892,7 +9740,7 @@
                 return;
             }
             this._isPlaying = false;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -9003,7 +9851,7 @@
             }
             this._startTime = Date.now() - this._elapsed;
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPlay);
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
         };
         _play = () => {
             this._elapsed = Date.now() - this._startTime;
@@ -9013,11 +9861,11 @@
                 this._playEnd();
                 return;
             }
-            this._rafId = vrender.global.getRequestAnimationFrame()(this._play.bind(this));
+            this._rafId = vrender.vglobal.getRequestAnimationFrame()(this._play.bind(this));
         };
         _playEnd = () => {
             this._isPlaying = false;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnEnd);
         };
@@ -9027,7 +9875,7 @@
             }
             this._isPlaying = false;
             this._elapsed = Date.now() - this._startTime;
-            vrender.global.getCancelAnimationFrame()(this._rafId);
+            vrender.vglobal.getCancelAnimationFrame()(this._rafId);
             this._controller.togglePlay();
             this.dispatchCustomEvent(exports.PlayerEventEnum.OnPause);
         };
@@ -9066,6 +9914,17 @@
         }
     }
 
+    exports.IOperateType = void 0;
+    (function (IOperateType) {
+        IOperateType["drawStart"] = "drawStart";
+        IOperateType["drawEnd"] = "drawEnd";
+        IOperateType["drawing"] = "drawing";
+        IOperateType["moving"] = "moving";
+        IOperateType["moveStart"] = "moveStart";
+        IOperateType["moveEnd"] = "moveEnd";
+        IOperateType["brushClear"] = "brushClear";
+    })(exports.IOperateType || (exports.IOperateType = {}));
+
     const DEFAULT_BRUSH_ATTRIBUTES = {
         brushMode: 'single',
         brushType: 'rect',
@@ -9086,6 +9945,7 @@
             x2: Infinity
         }
     };
+    const DEFAULT_SIZE_THRESHOLD = 5;
 
     const delayMap = {
         debounce: vutils.debounce,
@@ -9097,6 +9957,7 @@
         _container;
         _activeDrawState = false;
         _cacheDrawPoints = [];
+        _isDrawedBeforeEnd = false;
         _activeMoveState = false;
         _operatingMaskMoveDx = 0;
         _operatingMaskMoveDy = 0;
@@ -9152,36 +10013,41 @@
             this._activeMoveState && this._moving(e);
         };
         _onBrushEnd = (e) => {
-            if (this._outOfInteractiveRange(e)) {
-                return;
+            const { removeOnClick = true } = this.attribute;
+            if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
+                this._container.incrementalClearChild();
+                this._updateDragMaskCallback &&
+                    this._updateDragMaskCallback({
+                        operateType: exports.IOperateType.brushClear,
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                    });
+            }
+            else if (!this._outOfInteractiveRange(e)) {
+                this._updateDragMaskCallback &&
+                    this._updateDragMaskCallback({
+                        operateType: this._activeDrawState ? exports.IOperateType.drawEnd : exports.IOperateType.moveEnd,
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                    });
             }
-            this._updateDragMaskCallback &&
-                this._updateDragMaskCallback({
-                    operateType: this._activeDrawState ? 'brushEnd' : 'brushMaskUp',
-                    operateMask: this._operatingMask,
-                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-                });
             this._activeDrawState = false;
             this._activeMoveState = false;
-            this._operatingMask.setAttribute('pickable', false);
+            this._isDrawedBeforeEnd = false;
+            this._operatingMask?.setAttribute('pickable', false);
         };
         _initDraw(e) {
-            const { brushMode, removeOnClick } = this.attribute;
+            const { brushMode } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             this._cacheDrawPoints = [pos];
-            if (!this._operatingMask) {
-                this._addBrushMask();
-            }
-            if (brushMode === 'single' && removeOnClick) {
+            this._isDrawedBeforeEnd = false;
+            if (brushMode === 'single') {
                 this._container.incrementalClearChild();
-                this._addBrushMask();
-            }
-            else if (brushMode === 'multiple') {
-                this._addBrushMask();
             }
+            this._addBrushMask();
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushStart',
+                    operateType: exports.IOperateType.drawStart,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9202,13 +10068,16 @@
             this._operatingMask.setAttribute('pickable', true);
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushMaskDown',
+                    operateType: exports.IOperateType.moveStart,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
         }
         _drawing(e) {
             const pos = this.eventPosToStagePos(e);
+            const { x1 = 0, x2 = 0, y1 = 0, y2 = 0 } = this._operatingMask?._AABBBounds;
+            const { sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute;
+            this._isDrawedBeforeEnd = !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
             if (this._cacheDrawPoints.length > 0) {
                 const lastPos = this._cacheDrawPoints[this._cacheDrawPoints.length - 1];
                 if (pos.x === lastPos?.x && pos.y === lastPos?.y) {
@@ -9221,7 +10090,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushing',
+                    operateType: exports.IOperateType.drawing,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9245,7 +10114,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushMaskMove',
+                    operateType: exports.IOperateType.moving,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9772,9 +10641,11 @@
         }
     }
 
-    const version = "0.14.0-alpha.9";
+    const version = "0.14.1-alpha.0";
 
     exports.AbstractComponent = AbstractComponent;
+    exports.ArcInfo = ArcInfo;
+    exports.ArcLabel = ArcLabel;
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;