@visactor/vrender-components 0.13.9-alpha.6 → 0.13.9-alpha.8

package/dist/index.js

@@ -1311,9 +1311,6 @@
                 _clear(index >>> DIV, ~(1 << (index & MOD)));
             },
             getRange: ({ x1, y1, x2, y2 }) => {
-                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
-                    return true;
-                }
                 let r = y2;
                 let start;
                 let end;
@@ -1346,9 +1343,6 @@
                 return false;
             },
             setRange: ({ x1, y1, x2, y2 }) => {
-                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
-                    return;
-                }
                 let start;
                 let end;
                 let indexStart;
@@ -1598,6 +1592,10 @@
         _lastHover;
         _lastSelect;
         _enableAnimation;
+        layoutArcLabels(position, attribute, currentMarks) {
+            const arcs = [];
+            return arcs;
+        }
         render() {
             this._prepare();
             const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -1615,7 +1613,7 @@
                     labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
                 }
                 else {
-                    if (overlap !== false) {
+                    if (overlap !== false && this.attribute.type !== 'arc') {
                         labels = this._overlapping(labels);
                     }
                 }
@@ -1737,20 +1735,45 @@
                 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);
                 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 (this.attribute.type === 'arc') {
+                    const graphicAttributes = baseMark.attribute;
+                    const { width, height } = this.attribute;
+                    this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset, graphicAttributes, textData, width, height, this.attribute);
+                    labels.push(text);
+                }
+                else {
+                    const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
+                    if (!textLocation) {
+                        continue;
+                    }
+                    labelAttribute.x = textLocation.x;
+                    labelAttribute.y = textLocation.y;
+                    text.setAttributes(textLocation);
+                    labels.push(text);
+                }
+            }
+            if (this.attribute.type === 'arc') {
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()));
+                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
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                    labels[i].pointA = basedArc.pointA;
+                    labels[i].pointB = basedArc.pointB;
+                    labels[i].pointC = basedArc.pointC;
                 }
-                labelAttribute.x = textLocation.x;
-                labelAttribute.y = textLocation.y;
-                text.setAttributes(textLocation);
-                labels.push(text);
             }
             return labels;
         }
@@ -1796,15 +1819,6 @@
                         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);
-                    if (hasPlace !== false) {
-                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
-                        result.push(text);
-                        break;
-                    }
-                }
                 if (clampForce) {
                     const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
                     if (!(dx === 0 && dy === 0) &&
@@ -1815,11 +1829,19 @@
                             y2: text.AABBBounds.y2 + dy
                         })) {
                         text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
-                        bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         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);
+                    if (hasPlace !== false) {
+                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
+                        result.push(text);
+                        break;
+                    }
+                }
                 !hasPlace && !hideOnHit && result.push(text);
             }
             if (vutils.isFunction(this.onAfterLabelOverlap)) {
@@ -1861,14 +1883,29 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
+                let labelLine;
+                if (this.attribute.type === 'arc' && this.attribute.position === 'outside') {
+                    labelLine = vrender.createPath({
+                        visible: text.attribute?.visible ?? true,
+                        stroke: text.attribute?.line?.stroke ?? text.attribute?.fill,
+                        lineWidth: 1,
+                        path: `M${Math.round(text.pointA.x)},${Math.round(text.pointA.y)}` +
+                            ` L${Math.round(text.pointB.x)},${Math.round(text.pointB.y)}` +
+                            ` L${Math.round(text.pointC.x)},${Math.round(text.pointC.y)}`
+                    });
+                }
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
+                    if (this.attribute.type === 'arc' && this.attribute.position === 'outside') ;
                     currentTextMap.set(relatedGraphic, text);
                     if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
+                        if (this.attribute.type === 'arc' && this.attribute.position === 'outside') {
+                            this.add(labelLine);
+                        }
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -1883,6 +1920,9 @@
                     }
                     else {
                         this.add(text);
+                        if (this.attribute.type === 'arc' && this.attribute.position === 'outside') {
+                            this.add(labelLine);
+                        }
                     }
                 }
                 if (state === 'update') {
@@ -1976,7 +2016,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)
@@ -2203,9 +2251,774 @@
         }
     }
 
+    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;
+        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));
+        }
+        labeling(textBounds, graphicBounds, position = 'outside', offset = 0, graphicAttributes, textData, width, height, attribute) {
+            if (!textBounds || !graphicBounds) {
+                return;
+            }
+            const radiusRatio = this.computeLayoutOuterRadius(graphicAttributes.outerRadius, width, height);
+            const radius = this.computeRadius(radiusRatio, width, height);
+            const center = { x: graphicAttributes?.x ?? 0, y: graphicAttributes?.y ?? 0 };
+            const item = textData;
+            const arcMiddleAngle = (graphicAttributes.startAngle + graphicAttributes.endAngle) / 2;
+            const intervalAngle = graphicAttributes.endAngle - graphicAttributes.startAngle;
+            const arcQuadrant = computeQuadrant(graphicAttributes.endAngle - intervalAngle / 2);
+            const arcMiddle = circlePoint(center.x, center.y, graphicAttributes.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, graphicAttributes.outerRadius), arc.middleAngle);
+            arc.labelSize = {
+                width: textBounds.x2 - textBounds.x1,
+                height: textBounds.y2 - textBounds.y1
+            };
+            if (isQuadrantRight(arc.quadrant)) {
+                arc.textAlign = 'left';
+                arc.textBaseline = 'middle';
+                this._arcRight.set(arc.refDatum, arc);
+            }
+            else if (isQuadrantLeft(arc.quadrant)) {
+                arc.textAlign = 'right';
+                arc.textBaseline = 'middle';
+                this._arcLeft.set(arc.refDatum, arc);
+            }
+        }
+        layoutArcLabels(position, attribute, currentMarks) {
+            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.textAlign = 'center'), (arc.textBaseline = 'middle');
+                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.labelPosition.x = isQuadrantLeft(arc.quadrant)
+                    ? arc.labelPosition.x
+                    : arc.labelPosition.x + 0.5 * arc.labelSize.width;
+            });
+            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;
+            const align = 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 = this._computeAlignOffset(align, labelWidth, -flag);
+                labelPosition.x = flag > 0 ? plotLayout.width + alignOffset : alignOffset;
+            }
+            else {
+                const alignOffset = this._computeAlignOffset(align, labelWidth, flag);
+                labelPosition.x = cx + alignOffset + flag * spaceWidth;
+            }
+            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';
@@ -8896,17 +9709,6 @@
         }
     }
 
-    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',
@@ -8938,8 +9740,6 @@
         _container;
         _activeDrawState = false;
         _cacheDrawPoints = [];
-        _cacheStartTime;
-        _isDrawedBeforeEnd = false;
         _activeMoveState = false;
         _operatingMaskMoveDx = 0;
         _operatingMaskMoveDy = 0;
@@ -8995,41 +9795,36 @@
             this._activeMoveState && this._moving(e);
         };
         _onBrushEnd = (e) => {
-            const { removeOnClick } = 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 {
-                this._updateDragMaskCallback &&
-                    this._updateDragMaskCallback({
-                        operateType: this._activeDrawState ? exports.IOperateType.drawEnd : exports.IOperateType.moveEnd,
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-                    });
+            if (this._outOfInteractiveRange(e)) {
+                return;
             }
+            this._updateDragMaskCallback &&
+                this._updateDragMaskCallback({
+                    operateType: this._activeDrawState ? 'brushEnd' : 'brushMaskUp',
+                    operateMask: this._operatingMask,
+                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                });
             this._activeDrawState = false;
             this._activeMoveState = false;
-            this._isDrawedBeforeEnd = false;
             this._operatingMask.setAttribute('pickable', false);
         };
         _initDraw(e) {
-            const { brushMode } = this.attribute;
+            const { brushMode, removeOnClick } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             this._cacheDrawPoints = [pos];
-            this._isDrawedBeforeEnd = false;
-            if (brushMode === 'single') {
+            if (!this._operatingMask) {
+                this._addBrushMask();
+            }
+            if (brushMode === 'single' && removeOnClick) {
                 this._container.incrementalClearChild();
+                this._addBrushMask();
+            }
+            else if (brushMode === 'multiple') {
+                this._addBrushMask();
             }
-            this._addBrushMask();
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: exports.IOperateType.drawStart,
+                    operateType: 'brushStart',
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9050,14 +9845,13 @@
             this._operatingMask.setAttribute('pickable', true);
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: exports.IOperateType.moveStart,
+                    operateType: 'brushMaskDown',
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
         }
         _drawing(e) {
             const pos = this.eventPosToStagePos(e);
-            this._isDrawedBeforeEnd = true;
             if (this._cacheDrawPoints.length > 0) {
                 const lastPos = this._cacheDrawPoints[this._cacheDrawPoints.length - 1];
                 if (pos.x === lastPos?.x && pos.y === lastPos?.y) {
@@ -9070,7 +9864,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: exports.IOperateType.drawing,
+                    operateType: 'brushing',
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9094,7 +9888,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: exports.IOperateType.moving,
+                    operateType: 'brushMaskMove',
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9621,9 +10415,11 @@
         }
     }
 
-    const version = "0.13.9-alpha.6";
+    const version = "0.13.9-alpha.8";
 
     exports.AbstractComponent = AbstractComponent;
+    exports.ArcInfo = ArcInfo;
+    exports.ArcLabel = ArcLabel;
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;