@visactor/vrender-components 0.13.5-alpha.0 → 0.13.5-alpha.6

package/dist/index.js

@@ -543,7 +543,7 @@
             super(vutils.merge({}, Tag.defaultAttributes, attributes));
         }
         render() {
-            const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, formatMethod } = this.attribute;
+            const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state } = this.attribute;
             const parsedPadding = vutils.normalizePadding(padding);
             const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
             let symbol;
@@ -574,7 +574,7 @@
             tagWidth += symbolPlaceWidth;
             textX += symbolPlaceWidth;
             const textAttrs = {
-                text: formatMethod ? formatMethod(text) : text,
+                text,
                 visible: vutils.isValid(text) && visible !== false,
                 lineHeight: textStyle?.fontSize,
                 ...textStyle,
@@ -963,6 +963,7 @@
                     x: matrix.e,
                     y: matrix.f
                 });
+                drawContext.stage.tryInitInteractiveLayer();
                 const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
                 if (interactiveLayer) {
                     interactiveLayer.add(this.poptipComponent);
@@ -1513,6 +1514,28 @@
                 return DefaultPositions;
         }
     }
+    function clampText(text, width, height) {
+        const { x1, x2, y1, y2 } = text.AABBBounds;
+        const minX = Math.min(x1, x2);
+        const maxX = Math.max(x1, x2);
+        const minY = Math.min(y1, y2);
+        const maxY = Math.max(y1, y2);
+        let dx = 0;
+        let dy = 0;
+        if (minX < 0 && maxX - minX <= width) {
+            dx = -minX;
+        }
+        else if (maxX > width && minX - (maxX - width) >= 0) {
+            dx = width - maxX;
+        }
+        if (minY < 0 && maxY - minY <= height) {
+            dy = -minY;
+        }
+        else if (maxY > height && minY - (maxY - height) >= 0) {
+            dy = height - maxY;
+        }
+        return { dx, dy };
+    }
 
     const fadeIn = (textAttribute = {}) => {
         return {
@@ -1563,17 +1586,43 @@
         setBitmapTool(bmpTool) {
             this._bmpTool = bmpTool;
         }
-        _relationMap;
-        _prevRelationMap;
-        _textMap;
+        _graphicToText;
+        _idToGraphic;
         onAfterLabelOverlap;
         _lastHover;
         _lastSelect;
         _enableAnimation;
+        layoutArcLabels(position, attribute, currentMarks) {
+            const arcs = [];
+            return arcs;
+        }
         render() {
-            const currentBaseMarks = this._checkMarks();
-            const labels = this.layout(currentBaseMarks);
-            this._smartInvert(labels);
+            this._prepare();
+            const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
+            let data = this.attribute.data;
+            if (vutils.isFunction(dataFilter)) {
+                data = dataFilter(data);
+            }
+            let labels;
+            if (vutils.isFunction(customLayoutFunc)) {
+                labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
+            }
+            else {
+                labels = this.layout(data);
+                if (this.attribute.type !== 'arc') {
+                    if (vutils.isFunction(customOverlapFunc)) {
+                        labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+                    }
+                    else {
+                        if (overlap !== false) {
+                            labels = this._overlapping(labels);
+                        }
+                    }
+                }
+            }
+            if (smartInvert !== false) {
+                this._smartInvert(labels);
+            }
             this._renderLabels(labels);
         }
         _bindEvent(target) {
@@ -1650,7 +1699,7 @@
             this._setStates(text);
             return text;
         }
-        _checkMarks() {
+        _prepare() {
             const baseMarks = this.getBaseMarks();
             const currentBaseMarks = [];
             baseMarks.forEach(mark => {
@@ -1658,59 +1707,84 @@
                     currentBaseMarks.push(mark);
                 }
             });
-            this._prevRelationMap = new Map(this._relationMap);
-            this._relationMap?.clear();
-            return currentBaseMarks;
-        }
-        layout(currentMarks) {
-            const { textStyle, position, offset } = this.attribute;
-            let { data } = this.attribute;
-            if (vutils.isFunction(data)) {
-                data = data({});
+            this._idToGraphic?.clear();
+            this._baseMarks = currentBaseMarks;
+            if (!currentBaseMarks || currentBaseMarks.length === 0) {
+                return;
             }
+            const { data } = this.attribute;
             if (!data || data.length === 0) {
-                return [];
+                return;
             }
-            let labels = [];
-            if (vutils.isFunction(this.attribute.sort) && currentMarks && currentMarks.length) {
-                currentMarks = currentMarks.sort(this.attribute.sort);
+            if (!this._idToGraphic) {
+                this._idToGraphic = new Map();
             }
-            if (!this._relationMap) {
-                this._relationMap = new Map();
+            for (let i = 0; i < currentBaseMarks.length; i++) {
+                const textData = data[i];
+                const baseMark = currentBaseMarks[i];
+                if (textData && baseMark) {
+                    if (!vutils.isValid(textData.id)) {
+                        textData.id = `vrender-component-${this.name}-${i}`;
+                    }
+                    this._idToGraphic.set(textData.id, baseMark);
+                }
             }
+        }
+        layout(data = []) {
+            const { textStyle = {}, position, offset } = this.attribute;
+            const labels = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
-                const baseMark = currentMarks?.[i];
+                const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = {
                     ...textStyle,
-                    ...textData,
-                    _relatedIndex: i
+                    ...textData
                 };
-                this._relationMap.set(i, baseMark);
-                if (textData) {
-                    const text = vrender.createText(labelAttribute);
-                    text.update();
-                    const textBounds = this.getGraphicBounds(text);
-                    const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
-                    const textAttributes = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
-                    if (!textAttributes) {
+                const text = this._createLabelText(labelAttribute);
+                const textBounds = this.getGraphicBounds(text);
+                const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
+                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 = textAttributes.x;
-                    labelAttribute.y = textAttributes.y;
-                    labels.push(labelAttribute);
+                    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,
+                        textAlign: basedArc.textAlign,
+                        textBaseline: basedArc.textBaseline,
+                        angle: basedArc.angle
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                    labels[i].pointA = basedArc.pointA;
+                    labels[i].pointB = basedArc.pointB;
+                    labels[i].pointC = basedArc.pointC;
                 }
             }
-            this._baseMarks = currentMarks;
-            if (this.attribute.overlap !== false) {
-                labels = this.overlapping(labels, this.attribute.overlap);
-            }
             return labels;
         }
-        overlapping(labels, option = {}) {
+        _overlapping(labels) {
             if (labels.length === 0) {
                 return [];
             }
+            const option = this.attribute.overlap;
             const result = [];
             const baseMarkGroup = this.getBaseMarkGroup();
             const size = option.size ?? {
@@ -1733,18 +1807,32 @@
                 if (labels[i].visible === false) {
                     continue;
                 }
-                const text = vrender.createText(labels[i]);
-                const baseMark = this._baseMarks?.[i];
+                const text = labels[i];
+                const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
                 if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
                         continue;
                     }
                     if (checkBounds && baseMark?.AABBBounds && canPlaceInside(text.AABBBounds, baseMark?.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
-                        result.push({ ...text.attribute });
+                        result.push(text);
+                        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;
                     }
                 }
@@ -1752,15 +1840,12 @@
                 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) {
-                        result.push({
-                            ...text.attribute,
-                            x: hasPlace.x,
-                            y: hasPlace.y
-                        });
+                        text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
+                        result.push(text);
                         break;
                     }
                 }
-                !hasPlace && !hideOnHit && result.push({ ...text.attribute });
+                !hasPlace && !hideOnHit && result.push(text);
             }
             if (vutils.isFunction(this.onAfterLabelOverlap)) {
                 this.onAfterLabelOverlap(bitmap);
@@ -1798,18 +1883,32 @@
             const easing = animationConfig.easing ?? DefaultLabelAnimation.easing;
             const delay = animationConfig.delay ?? 0;
             const currentTextMap = new Map();
-            const prevTextMap = this._textMap || new Map();
+            const prevTextMap = this._graphicToText || new Map();
             const texts = [];
-            labels.forEach((label, index) => {
-                const text = this._createLabelText(label);
-                const relatedGraphic = this._relationMap.get(label._relatedIndex);
+            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(label, 'fadeIn');
+                        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, {
@@ -1858,7 +1957,7 @@
                     });
                 }
             });
-            this._textMap = currentTextMap;
+            this._graphicToText = currentTextMap;
         }
         _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
             const listener = (event) => {
@@ -1909,30 +2008,42 @@
             return listener;
         }
         _smartInvert(labels) {
-            if (this.attribute.smartInvert === false) {
-                return;
-            }
+            const option = (this.attribute.smartInvert || {});
+            const { textType, contrastRatiosThreshold, alternativeColors } = option;
             for (let i = 0; i < labels.length; i++) {
-                const label = labels?.[i];
+                const label = labels[i];
                 if (!label) {
                     continue;
                 }
-                const isInside = canPlaceInside(vrender.createText(label).AABBBounds, this._relationMap.get(label._relatedIndex)?.AABBBounds);
-                if (label.stroke && label.lineWidth > 0) {
-                    label.fill = labelSmartInvert(label.fill, label.stroke, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                const baseMark = this._idToGraphic.get(label.attribute.id);
+                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)
+                    });
                 }
                 else if (isInside) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
                     const backgroundColor = baseMark.attribute.fill;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
-                else if (label.lineWidth > 0) {
-                    const baseMark = this._relationMap.get(label._relatedIndex);
-                    label.stroke = baseMark.attribute.fill;
-                    const backgroundColor = label.stroke;
-                    const foregroundColor = label.fill;
-                    label.fill = labelSmartInvert(foregroundColor, backgroundColor, this.attribute.smartInvert?.textType, this.attribute.smartInvert?.contrastRatiosThreshold, this.attribute.smartInvert?.alternativeColors);
+                else if (label.attribute.lineWidth > 0) {
+                    const backgroundColor = label.attribute.stroke;
+                    const foregroundColor = label.attribute.fill;
+                    label.setAttributes({
+                        stroke: baseMark.attribute.fill,
+                        fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+                    });
                 }
             }
         }
@@ -2140,9 +2251,748 @@
         }
     }
 
+    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 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));
+    }
+
+    const PREFIX = '__VCHART';
+    const ARC_K = `${PREFIX}_ARC_K`;
+    const ARC_MIDDLE_ANGLE = `${PREFIX}_ARC_MIDDLE_ANGLE`;
+    const ARC_QUADRANT = `${PREFIX}_ARC_QUADRANT`;
+    const ARC_RADIAN = `${PREFIX}_ARC_RADIAN`;
+
+    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, k) {
+            this.refDatum = refDatum;
+            this.center = center;
+            this.outerCenter = outerCenter;
+            this.quadrant = quadrant;
+            this.radian = radian;
+            this.middleAngle = middleAngle;
+            this.k = k;
+            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
+            },
+            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 = attribute.center ?? { x: 0, y: 0 };
+            const item = textData;
+            const arcMiddle = circlePoint(center.x, center.y, radius * item[ARC_K], item[ARC_MIDDLE_ANGLE]);
+            const outerArcMiddle = circlePoint(center.x, center.y, radius + attribute.line.line1MinLength, item[ARC_MIDDLE_ANGLE]);
+            const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, item[ARC_QUADRANT], item[ARC_RADIAN], item[ARC_MIDDLE_ANGLE], item[ARC_K]);
+            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 = 'bottom';
+                this._arcRight.set(arc.refDatum, arc);
+            }
+            else if (isQuadrantLeft(arc.quadrant)) {
+                arc.textAlign = 'right';
+                arc.textBaseline = 'bottom';
+                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 = attribute.center ?? { x: 0, 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 height = attribute.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 = attribute.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;
+            });
+            return arcs;
+        }
+        _computeX(arc, attribute, currentMarks) {
+            const center = attribute.center ?? { x: 0, y: 0 };
+            const plotLayout = { width: attribute.center.x * 2, height: attribute.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 plotRect = { width: attribute.center.x * 2, height: attribute.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 = attribute.center ?? { x: 0, 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 plotRect = { width: attribute.center.x * 2, height: attribute.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';
@@ -9532,9 +10382,11 @@
         }
     }
 
-    const version = "0.13.5-alpha.0";
+    const version = "0.13.5-alpha.6";
 
     exports.AbstractComponent = AbstractComponent;
+    exports.ArcInfo = ArcInfo;
+    exports.ArcLabel = ArcLabel;
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;