@visactor/vrender-components 0.20.5-beta.0 → 0.20.6-alpha.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, isValid, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, isRotateAABBIntersect, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, isRotateAABBIntersect, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -770,7 +770,7 @@ class BoundsContext {
     this.bounds.add(cx + xmin, cy + ymin), this.bounds.add(cx + xmax, cy + ymax);
   }
   arcTo(x1, y1, x2, y2, radius) {
-    throw new Error("不支持arcTo");
+    this.bounds.add(x1, y1);
   }
   bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
     this.bounds.add(cp1x, cp1y), this.bounds.add(cp2x, cp2y), this.bounds.add(x, y);
@@ -979,19 +979,25 @@ function drawArc(context, x, y, coords) {
 }
 const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) => {
   const delta = Math.abs(endAngle - startAngle),
-    len = 4 * Math.tan(delta / 4) / 3,
-    dir = endAngle < startAngle ? -1 : 1,
-    c1 = Math.cos(startAngle),
-    s1 = Math.sin(startAngle),
-    c2 = Math.cos(endAngle),
-    s2 = Math.sin(endAngle),
-    x1 = c1 * rx + cx,
-    y1 = s1 * ry + cy,
-    x4 = c2 * rx + cx,
-    y4 = s2 * ry + cy,
-    hx = rx * len * dir,
-    hy = ry * len * dir;
-  bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+    count = delta > .5 * Math.PI ? Math.ceil(2 * delta / Math.PI) : 1,
+    stepAngle = (endAngle - startAngle) / count;
+  for (let i = 0; i < count; i++) {
+    const sa = startAngle + stepAngle * i,
+      ea = startAngle + stepAngle * (i + 1),
+      len = 4 * Math.tan(Math.abs(stepAngle) / 4) / 3,
+      dir = ea < sa ? -1 : 1,
+      c1 = Math.cos(sa),
+      s1 = Math.sin(sa),
+      c2 = Math.cos(ea),
+      s2 = Math.sin(ea),
+      x1 = c1 * rx + cx,
+      y1 = s1 * ry + cy,
+      x4 = c2 * rx + cx,
+      y4 = s2 * ry + cy,
+      hx = rx * len * dir,
+      hy = ry * len * dir;
+    bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+  }
 };
 
 const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
@@ -6322,6 +6328,7 @@ let DefaultGraphicService = class {
   validCheck(attribute, theme, aabbBounds, graphic) {
     if (!graphic) return !0;
     if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
+    if (graphic.shadowRoot) return !0;
     if (!graphic.valid) return aabbBounds.clear(), !1;
     const {
       visible = theme.visible
@@ -9448,13 +9455,23 @@ class Text extends Graphic {
     if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
   }
   get cliped() {
+    var _a, _b;
     const textTheme = this.getGraphicTheme(),
-      attribute = this.attribute;
-    if (this.isMultiLine) return;
-    const {
-      maxLineWidth = textTheme.maxLineWidth
-    } = attribute;
-    return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString());
+      attribute = this.attribute,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        text: text,
+        whiteSpace = textTheme.whiteSpace
+      } = attribute;
+    if (!Number.isFinite(maxLineWidth)) return !1;
+    if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
+      let mergedText = "";
+      this.cache.layoutData.lines.forEach(item => {
+        mergedText += item.str;
+      });
+      return (Array.isArray(text) ? text.join("") : text) !== mergedText;
+    }
+    return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
   }
   get multilineLayout() {
     if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
@@ -11176,10 +11193,22 @@ class Line {
   }
   draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
     if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
-      let otherParagraphWidth = 0;
+      let emptyOverflow = !0,
+        skipEllipsis = !1;
       for (let i = this.paragraphs.length - 1; i >= 0; i--) {
         const paragraph = this.paragraphs[i];
-        if (paragraph.overflow) continue;
+        if (paragraph.overflow) emptyOverflow = emptyOverflow && "" === paragraph.text;else if (emptyOverflow) {
+          skipEllipsis = !0;
+          break;
+        }
+      }
+      let otherParagraphWidth = 0;
+      if (!skipEllipsis) for (let i = this.paragraphs.length - 1; i >= 0; i--) {
+        const paragraph = this.paragraphs[i];
+        if (paragraph.overflow) {
+          if ("" === paragraph.text) break;
+          continue;
+        }
         if (paragraph instanceof RichTextIcon) break;
         if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
           paragraph.verticalEllipsis = !0;
@@ -11404,6 +11433,21 @@ class RichText extends Graphic {
   getFrameCache() {
     return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
   }
+  get cliped() {
+    const frameCache = this.getFrameCache();
+    if (frameCache.actualHeight > frameCache.height) return !0;
+    const {
+      disableAutoWrapLine: disableAutoWrapLine
+    } = this.attribute;
+    if (disableAutoWrapLine) for (let i = 0; i < frameCache.lines.length; i++) {
+      const l = frameCache.lines[i];
+      for (let j = 0; j < l.paragraphs.length; j++) {
+        const p = l.paragraphs[j];
+        if (p.overflow && "" !== p.text) return !0;
+      }
+    }
+    return !1;
+  }
   combinedStyleToCharacter(config) {
     const {
       fill: fill,
@@ -14095,7 +14139,7 @@ class ScrollBar extends AbstractComponent {
             let currentScrollValue;
             let currentPos;
             let delta = 0;
-            const { width, height } = this._getSliderRenderBounds();
+            const { width, height } = this.getSliderRenderBounds();
             if (direction === 'vertical') {
                 currentPos = y;
                 delta = currentPos - this._prePos;
@@ -14197,7 +14241,7 @@ class ScrollBar extends AbstractComponent {
         const rail = group.createOrUpdateChild('scrollbar-rail', Object.assign({ x: 0, y: 0, width,
             height }, railStyle), 'rect');
         this._rail = rail;
-        const sliderRenderBounds = this._getSliderRenderBounds();
+        const sliderRenderBounds = this.getSliderRenderBounds();
         const sliderPos = this._getSliderPos(clampRange(range, limitRange[0], limitRange[1]));
         const sliderSize = sliderPos[1] - sliderPos[0];
         this._sliderSize = sliderSize;
@@ -14227,7 +14271,7 @@ class ScrollBar extends AbstractComponent {
             y: containerAABBBounds.y1
         };
     }
-    _getSliderRenderBounds() {
+    getSliderRenderBounds() {
         if (this._sliderRenderBounds) {
             return this._sliderRenderBounds;
         }
@@ -14247,14 +14291,14 @@ class ScrollBar extends AbstractComponent {
     _getDefaultSliderCornerRadius() {
         const { direction, round } = this.attribute;
         if (round) {
-            const { width, height } = this._getSliderRenderBounds();
+            const { width, height } = this.getSliderRenderBounds();
             return direction === 'horizontal' ? height : width;
         }
         return 0;
     }
     _getSliderPos(range) {
         const { direction } = this.attribute;
-        const { width, height, x1, y1 } = this._getSliderRenderBounds();
+        const { width, height, x1, y1 } = this.getSliderRenderBounds();
         if (direction === 'horizontal') {
             return [width * range[0] + x1, width * range[1] + x1];
         }
@@ -14266,7 +14310,7 @@ class ScrollBar extends AbstractComponent {
         }
         const { limitRange = [0, 1], direction } = this.attribute;
         const [min, max] = clampRange(limitRange, 0, 1);
-        const { width, height, x1, y1 } = this._getSliderRenderBounds();
+        const { width, height, x1, y1 } = this.getSliderRenderBounds();
         const sliderSize = this._sliderSize;
         return direction === 'horizontal'
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
@@ -14615,9 +14659,12 @@ function getTextType(attributes, typeKey = 'type') {
 }
 function richTextAttributeTransform(attributes) {
     var _a, _b;
+    if (isValid(attributes.maxLineWidth)) {
+        attributes.maxWidth = attributes.maxLineWidth;
+        delete attributes.maxLineWidth;
+    }
     attributes.width = (_a = attributes.width) !== null && _a !== void 0 ? _a : 0;
     attributes.height = (_b = attributes.height) !== null && _b !== void 0 ? _b : 0;
-    attributes.maxWidth = attributes.maxLineWidth;
     attributes.textConfig = attributes.text.text || attributes.text;
     return attributes;
 }
@@ -14747,6 +14794,8 @@ class Tag extends AbstractComponent {
         const parsedPadding = normalizePadding(padding);
         const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
         let symbol;
+        let tagX = -parsedPadding[3];
+        let tagY = -parsedPadding[0];
         let tagWidth = parsedPadding[1] + parsedPadding[3];
         let tagHeight = parsedPadding[0] + parsedPadding[2];
         let textX = 0;
@@ -14770,20 +14819,10 @@ class Tag extends AbstractComponent {
         if (isRich) {
             const richTextAttrs = Object.assign(Object.assign(Object.assign({}, richTextAttributeTransform(Object.assign({ type, text }, textStyle))), textStyle), { visible: isValid(text) && visible !== false, x: textX, y: 0 });
             textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
-            const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
-            if (visible && isBoolean(bgVisible)) {
-                const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x: textShape.AABBBounds.x1 - parsedPadding[1], y: textShape.AABBBounds.y1 - parsedPadding[0], width: textShape.AABBBounds.width() + (parsedPadding[1] + parsedPadding[3]), height: textShape.AABBBounds.height() + (parsedPadding[0] + parsedPadding[2]) }), 'rect');
-                if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
-                    bgRect.states = state.panel;
-                }
-                if (backgroundStyle.customShape) {
-                    const customShape = backgroundStyle.customShape;
-                    bgRect.pathProxy = (attrs) => {
-                        return customShape(textShape.attribute, attrs, new CustomPath2D());
-                    };
-                }
-                this._bgRect = bgRect;
-            }
+            tagWidth += textShape.AABBBounds.width();
+            tagHeight += textShape.AABBBounds.height();
+            tagX += textShape.AABBBounds.x1;
+            tagY += textShape.AABBBounds.y1;
         }
         else {
             const textAttrs = Object.assign(Object.assign({ text: isObject(text) && 'type' in text && text.type === 'text' ? text.text : text, visible: isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
@@ -14811,8 +14850,8 @@ class Tag extends AbstractComponent {
                     textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
                 }
             }
-            let x = 0;
-            let y = 0;
+            tagX = 0;
+            tagY = 0;
             let flag = 0;
             if (textAlign === 'left' || textAlign === 'start') {
                 flag = 1;
@@ -14824,14 +14863,14 @@ class Tag extends AbstractComponent {
                 flag = 0;
             }
             if (!flag) {
-                x -= tagWidth / 2;
+                tagX -= tagWidth / 2;
                 if (symbol) {
                     symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
                 }
                 group.setAttribute('x', -symbolPlaceWidth / 2);
             }
             else if (flag < 0) {
-                x -= tagWidth;
+                tagX -= tagWidth;
                 if (symbol) {
                     symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
                 }
@@ -14892,13 +14931,13 @@ class Tag extends AbstractComponent {
                 }
             }
             if (textBaseline === 'middle') {
-                y -= tagHeight / 2;
+                tagY -= tagHeight / 2;
                 if (symbol) {
                     symbol.setAttribute('y', 0);
                 }
             }
             else if (textBaseline === 'bottom') {
-                y -= tagHeight;
+                tagY -= tagHeight;
                 if (symbol) {
                     symbol.setAttribute('y', -textHeight / 2);
                 }
@@ -14910,21 +14949,20 @@ class Tag extends AbstractComponent {
                     symbol.setAttribute('y', textHeight / 2);
                 }
             }
-            const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
-            if (visible && isBoolean(bgVisible)) {
-                const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, x,
-                    y, width: tagWidth, height: tagHeight }), 'rect');
-                if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
-                    bgRect.states = state.panel;
-                }
-                if (backgroundStyle.customShape) {
-                    const customShape = backgroundStyle.customShape;
-                    bgRect.pathProxy = (attrs) => {
-                        return customShape(textShape.attribute, attrs, new CustomPath2D());
-                    };
-                }
-                this._bgRect = bgRect;
+        }
+        const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
+        if (visible && isBoolean(bgVisible)) {
+            const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, width: tagWidth, height: tagHeight, x: tagX, y: tagY }), 'rect');
+            if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                bgRect.states = state.panel;
+            }
+            if (backgroundStyle.customShape) {
+                const customShape = backgroundStyle.customShape;
+                bgRect.pathProxy = (attrs) => {
+                    return customShape(this, attrs, new CustomPath2D());
+                };
             }
+            this._bgRect = bgRect;
         }
         this._textShape = textShape;
         this._symbol = symbol;
@@ -16212,7 +16250,10 @@ class LabelBase extends AbstractComponent {
             if (line.customShape) {
                 const customShape = line.customShape;
                 lineGraphic.pathProxy = (attrs) => {
-                    return customShape(text.attribute, attrs, new CustomPath2D());
+                    return customShape({
+                        text,
+                        baseMark: baseMark
+                    }, attrs, new CustomPath2D());
                 };
             }
             if (baseMark && baseMark.attribute.fill) {
@@ -16974,7 +17015,6 @@ class ArcInfo {
         this.outerRadius = outerRadius;
         this.circleCenter = circleCenter;
         this.labelVisible = true;
-        this.labelLimit = 0;
     }
     getLabelBounds() {
         if (!this.labelPosition || !this.labelSize) {
@@ -17009,12 +17049,14 @@ class ArcLabel extends LabelBase {
         return { x: 0, y: 0 };
     }
     _layout(texts) {
-        var _a;
+        var _a, _b, _c;
         if (!texts || !texts.length) {
             return;
         }
         const labels = super._layout(texts);
-        const textBoundsArray = labels.map(label => this.getGraphicBounds(label));
+        const textBoundsArray = labels.map(label => {
+            return this.getGraphicBounds(label);
+        });
         const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '…' });
         let ellipsisWidth = Infinity;
         if (ellipsisLabelAttribute.ellipsis !== false) {
@@ -17041,14 +17083,18 @@ class ArcLabel extends LabelBase {
                     x: basedArc.labelPosition.x,
                     y: basedArc.labelPosition.y,
                     angle: basedArc.angle,
-                    maxLineWidth: basedArc.labelLimit,
                     points: basedArc.pointA && basedArc.pointB && basedArc.pointC
                         ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
                         : undefined,
                     line: basedArc.labelLine
                 };
                 if (labels[i].type === 'richtext') {
-                    labelAttribute.width = basedArc.labelLimit;
+                    labelAttribute.width =
+                        (_b = basedArc.labelLimit) !== null && _b !== void 0 ? _b : labels[i].attribute.width;
+                }
+                else {
+                    labelAttribute.maxLineWidth =
+                        (_c = basedArc.labelLimit) !== null && _c !== void 0 ? _c : labels[i].attribute.maxLineWidth;
                 }
                 labels[i].setAttributes(labelAttribute);
             }
@@ -17289,10 +17335,16 @@ class ArcLabel extends LabelBase {
                 break;
         }
         labelWidth = Math.max(this._ellipsisWidth, labelWidth);
-        arc.labelLimit = labelWidth;
+        const needAdjustLimit = labelWidth < arc.labelSize.width - 1;
+        if (needAdjustLimit) {
+            arc.labelLimit = labelWidth;
+        }
+        else {
+            arc.labelLimit = null;
+        }
         arc.pointC = { x: cx, y: labelPosition.y };
         const align = this._computeAlign(arc, attribute);
-        const targetCenterOffset = getAlignOffset(align) * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+        const targetCenterOffset = getAlignOffset(align) * (needAdjustLimit ? labelWidth : arc.labelSize.width);
         if (labelLayoutAlign === 'edge') {
             labelPosition.x =
                 (flag > 0 ? plotLayout.x2 : plotLayout.x1) - flag * targetCenterOffset + flag * this._alignOffset;
@@ -18210,45 +18262,11 @@ const clampRadian = (angle = 0) => {
 function isInRange(a, min, max) {
     return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
 }
-function getCircleLabelPosition(tickPosition, tickVector, text, style) {
-    const labelBounds = getTextBounds(Object.assign({ text }, style));
-    const width = labelBounds.width();
-    const height = labelBounds.height();
-    const angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI;
-    const PI_3_4 = (Math.PI * 3) / 4;
-    const PI_1_4 = Math.PI / 4;
-    const PI_1_2 = Math.PI / 2;
-    const baseX = tickPosition.x;
-    let dx = 0;
-    if (isInRange(angle, -PI_3_4, -PI_1_4)) {
-        dx = ((angle + PI_3_4) / PI_1_2 - 0.5) * width;
-    }
-    else if (isInRange(angle, PI_1_4, PI_3_4)) {
-        dx = (0.5 - (angle - PI_1_4) / PI_1_2) * width;
-    }
-    else if (Math.cos(angle) >= 0) {
-        dx = width * 0.5;
-    }
-    else {
-        dx = -width * 0.5;
-    }
-    const x = baseX - dx;
-    const baseY = tickPosition.y;
-    let dy = 0;
-    if (isInRange(angle, -PI_3_4, -PI_1_4)) {
-        dy = -height * 0.5;
-    }
-    else if (isInRange(angle, PI_1_4, PI_3_4)) {
-        dy = height * 0.5;
-    }
-    else if (Math.cos(angle) >= 0) {
-        dy = (0.5 - (PI_1_4 - angle) / PI_1_2) * height;
-    }
-    else {
-        dy = (0.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
-    }
-    const y = baseY - dy;
-    return { x, y };
+function getCircleLabelPosition(tickPosition, tickVector) {
+    return {
+        x: tickPosition.x + tickVector[0],
+        y: tickPosition.y + tickVector[1]
+    };
 }
 function getAxisBreakSymbolAttrs(props = {}) {
     var _a, _b;
@@ -18300,11 +18318,11 @@ function angleLabelOrientAttribute(angle) {
     }
     return { align, baseline };
 }
-function getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside, text, style) {
+function getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside) {
     const point = polarToCartesian({ x: 0, y: 0 }, radius, angle);
     const labelPoint = getVerticalCoord(point, getCircleVerticalVector(labelOffset, point, center, inside));
     const vector = getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside);
-    return getCircleLabelPosition(labelPoint, vector, text, style);
+    return getCircleLabelPosition(labelPoint, vector);
 }
 function getCirclePoints(center, count, radius, startAngle, endAngle) {
     const points = [];
@@ -18602,29 +18620,6 @@ class AxisBase extends AbstractComponent {
     getVerticalCoord(point, offset, inside) {
         return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
     }
-    getTextAlign(vector) {
-        let align = 'center';
-        if (isNumberClose(vector[0], 0)) {
-            if (isNumberClose(vector[1], 0)) {
-                if (Object.is(vector[1], -0)) {
-                    align = 'start';
-                }
-                else if (Object.is(vector[0], -0)) {
-                    align = 'end';
-                }
-            }
-            else {
-                align = 'center';
-            }
-        }
-        else if (vector[0] > 0) {
-            align = 'start';
-        }
-        else if (vector[0] < 0) {
-            align = 'end';
-        }
-        return align;
-    }
     getTickLineItems() {
         const { tick } = this.attribute;
         const data = this.data;
@@ -19361,6 +19356,29 @@ class LineAxis extends AxisBase {
         axisLineGroup.id = this._getNodeId('line');
         container.add(axisLineGroup);
     }
+    getTextAlign(vector) {
+        let align = 'center';
+        if (isNumberClose(vector[0], 0)) {
+            if (isNumberClose(vector[1], 0)) {
+                if (Object.is(vector[1], -0)) {
+                    align = 'start';
+                }
+                else if (Object.is(vector[0], -0)) {
+                    align = 'end';
+                }
+            }
+            else {
+                align = 'center';
+            }
+        }
+        else if (vector[0] > 0) {
+            align = 'start';
+        }
+        else if (vector[0] < 0) {
+            align = 'end';
+        }
+        return align;
+    }
     getTitleAttribute() {
         var _a, _b, _c;
         const _d = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state = {}, maxWidth } = _d, restAttrs = __rest(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
@@ -19773,6 +19791,82 @@ class CircleAxisMixin {
     }
 }
 
+function findSiblingLabels(labels, selfIndex) {
+    const len = labels.length;
+    const prevLabel = selfIndex >= 1 ? labels[selfIndex - 1] : labels[len - 1];
+    const nextLabel = selfIndex < len - 1 ? labels[selfIndex + 1] : labels[0];
+    return { prevLabel, nextLabel };
+}
+function adjustMaxLineWidth(label, maxLineWidth, ellipsis) {
+    var _a;
+    label.setAttributes({
+        maxLineWidth,
+        ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis
+    });
+}
+function adjustMaxHeight(labels, selfIndex, bounds) {
+    const siblings = [];
+    if (labels.length >= 3) {
+        const { prevLabel, nextLabel } = findSiblingLabels(labels, selfIndex);
+        siblings.push(prevLabel, nextLabel);
+    }
+    else if (labels.length === 2) {
+        siblings.push(labels[selfIndex === 0 ? 1 : 0]);
+    }
+    const label = labels[selfIndex];
+    let heightLimit = Math.min(Math.abs(label.attribute.y - bounds.y1), Math.abs(label.attribute.y - bounds.y2));
+    siblings.forEach(sibling => {
+        heightLimit = Math.min(heightLimit, Math.abs(sibling.attribute.y - label.attribute.y));
+    });
+    if (heightLimit > 0) {
+        label.setAttributes({ whiteSpace: 'normal', heightLimit });
+    }
+}
+function circleAutoLimit(labels, config) {
+    const { ellipsis, inside, bounds, autoWrap, center } = config;
+    if (!inside) {
+        labels.forEach((label, index) => {
+            const { x, y } = label.attribute;
+            const b = label.AABBBounds;
+            if (isNumberClose(x, center.x)) {
+                if (y > bounds.y2 || y < bounds.y1) {
+                    adjustMaxLineWidth(label, 0, ellipsis);
+                    return;
+                }
+                const boxWidth = bounds.x2 - bounds.x1;
+                if (labels.length >= 3) {
+                    const { prevLabel, nextLabel } = findSiblingLabels(labels, index);
+                    let leftX = prevLabel.attribute.x;
+                    let rightX = nextLabel.attribute.x;
+                    if (leftX > rightX) {
+                        leftX = nextLabel.attribute.x;
+                        rightX = prevLabel.attribute.x;
+                    }
+                    const maxWidth = leftX === rightX
+                        ? boxWidth
+                        : x >= leftX && x <= rightX
+                            ? rightX - leftX
+                            : Math.min(Math.abs(leftX - x), Math.abs(rightX - x));
+                    if (label.AABBBounds.width() > maxWidth) {
+                        adjustMaxLineWidth(label, maxWidth, ellipsis);
+                    }
+                }
+                else if (label.AABBBounds.width() > boxWidth) {
+                    adjustMaxLineWidth(label, boxWidth, ellipsis);
+                }
+            }
+            else if (x > center.x && b.x2 > bounds.x2) {
+                adjustMaxLineWidth(label, bounds.x2 - x, ellipsis);
+                autoWrap && adjustMaxHeight(labels, index, bounds);
+            }
+            else if (x < center.x && b.x1 < bounds.x1) {
+                adjustMaxLineWidth(label, x - bounds.x1, ellipsis);
+                autoWrap && adjustMaxHeight(labels, index, bounds);
+            }
+        });
+    }
+}
+
 loadCircleAxisComponent();
 class CircleAxis extends AxisBase {
     constructor(attributes, options) {
@@ -19885,36 +19979,85 @@ class CircleAxis extends AxisBase {
         }
         return subTickLineItems;
     }
-    getTextBaseline(vector) {
-        let base = 'middle';
-        if (isNumberClose(vector[1], 0)) {
-            base = 'middle';
-        }
-        else if (vector[1] > 0 && vector[1] > Math.abs(vector[0])) {
-            base = 'top';
-        }
-        else if (vector[1] < 0 && Math.abs(vector[1]) > Math.abs(vector[0])) {
-            base = 'bottom';
-        }
-        return base;
-    }
     beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         return;
     }
     handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-        return;
+        if (isEmpty(labelShapes)) {
+            return;
+        }
+        const { inside, radius, center, width, height, label, orient } = this.attribute;
+        const bounds = width && height
+            ? {
+                x1: 0,
+                y1: 0,
+                x2: width,
+                y2: height
+            }
+            : {
+                x1: center.x - radius,
+                y1: center.y - radius,
+                x2: center.x + radius,
+                y2: center.y + radius
+            };
+        const { layoutFunc, autoLimit, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, autoWrap } = label;
+        if (isFunction(layoutFunc)) {
+            layoutFunc(labelShapes, labelData, layer, this);
+        }
+        else {
+            if (autoLimit || autoWrap) {
+                circleAutoLimit(labelShapes, { inside, autoWrap, bounds, ellipsis: limitEllipsis, center });
+            }
+            if (autoHide$1) {
+                autoHide(labelShapes, {
+                    orient,
+                    method: autoHideMethod,
+                    separation: autoHideSeparation
+                });
+            }
+        }
     }
     afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         return;
     }
+    getTextBaseline(vector) {
+        if (Math.abs(vector[1] / vector[0]) < 0.3) {
+            return 'middle';
+        }
+        else if (vector[1] < 0) {
+            return 'bottom';
+        }
+        else if (vector[1] > 0) {
+            return 'top';
+        }
+        return 'middle';
+    }
     getLabelAlign(vector, inside, angle) {
+        if (isNumberClose(vector[0], 0)) {
+            return {
+                textAlign: 'center',
+                textBaseline: vector[1] > 0 ? 'top' : 'bottom'
+            };
+        }
+        else if (vector[0] < 0) {
+            return {
+                textAlign: 'right',
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
+        else if (vector[0] > 0) {
+            return {
+                textAlign: 'left',
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
         return {
             textAlign: 'center',
             textBaseline: 'middle'
         };
     }
     getLabelPosition(point, vector, text, style) {
-        return getCircleLabelPosition(point, vector, text, style);
+        return point;
     }
 }
 CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
@@ -20410,21 +20553,39 @@ const getPolarAngleLabelBounds = (scale, domain, op) => {
     const labelAngle = (_a = labelStyle.angle) !== null && _a !== void 0 ? _a : 0;
     const textMeasure = initTextMeasure(labelStyle);
     const labelBoundsList = domain.map((v) => {
-        var _a, _b;
         const str = labelFormatter ? labelFormatter(v) : `${v}`;
         const { width, height } = textMeasure.quickMeasure(str);
         const textWidth = Math.max(width, MIN_TICK_GAP);
         const textHeight = Math.max(height, MIN_TICK_GAP);
         const angle = scale.scale(v);
+        const center = { x: 0, y: 0 };
         let textX = 0;
         let textY = 0;
         const orient = {
-            align: (_a = labelStyle.textAlign) !== null && _a !== void 0 ? _a : 'center',
-            baseline: (_b = labelStyle.textBaseline) !== null && _b !== void 0 ? _b : 'middle'
+            align: labelStyle.textAlign,
+            baseline: labelStyle.textBaseline
         };
-        const { x, y } = getPolarAngleLabelPosition(angle, { x: 0, y: 0 }, radius, labelOffset, inside, str, labelStyle);
-        textX = x + (orient.align === 'right' ? -textWidth : orient.align === 'center' ? -textWidth / 2 : 0);
-        textY = y + (orient.baseline === 'bottom' ? -textHeight : orient.baseline === 'middle' ? -textHeight / 2 : 0);
+        const { x, y } = getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside);
+        if (!orient.align) {
+            if (isNumberClose(x, center.x)) {
+                if (!orient.baseline) {
+                    if (y > center.y) {
+                        orient.baseline = 'top';
+                    }
+                    else {
+                        orient.baseline = 'bottom';
+                    }
+                }
+            }
+            else if (x > center.x) {
+                orient.align = 'left';
+            }
+            else if (x < center.x) {
+                orient.align = 'right';
+            }
+        }
+        textX = x + (orient.align === 'right' ? -textWidth : orient.align === 'left' ? 0 : -textWidth / 2);
+        textY = y + (orient.baseline === 'bottom' ? -textHeight : orient.baseline === 'top' ? 0 : -textHeight / 2);
         const bounds = new AABBBounds()
             .set(textX, textY, textX + textWidth, textY + textHeight)
             .rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
@@ -20448,7 +20609,9 @@ const polarAngleAxisDiscreteTicks = (scale, op) => {
     else if (isValid(tickCount)) {
         const range = scale.range();
         const rangeSize = Math.abs(range[range.length - 1] - range[0]);
-        const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+        const count = isFunction(tickCount)
+            ? tickCount({ axisLength: rangeSize, labelStyle })
+            : tickCount;
         scaleTicks = scale.ticks(count);
     }
     else if (op.sampling) {
@@ -21368,6 +21531,7 @@ class DataZoom extends AbstractComponent {
         return false;
     }
     setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { startTextStyle, endTextStyle } = this.attribute;
         const { formatMethod: startTextFormat } = startTextStyle, restStartTextStyle = __rest(startTextStyle, ["formatMethod"]);
         const { formatMethod: endTextFormat } = endTextStyle, restEndTextStyle = __rest(endTextStyle, ["formatMethod"]);
@@ -21398,11 +21562,11 @@ class DataZoom extends AbstractComponent {
             };
             startTextAlignStyle = {
                 textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, 'start') ? 'left' : 'right',
-                textBaseline: 'middle'
+                textBaseline: (_b = (_a = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _a === void 0 ? void 0 : _a.textBaseline) !== null && _b !== void 0 ? _b : 'middle'
             };
             endTextAlignStyle = {
                 textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, 'end') ? 'right' : 'left',
-                textBaseline: 'middle'
+                textBaseline: (_d = (_c = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _c === void 0 ? void 0 : _c.textBaseline) !== null && _d !== void 0 ? _d : 'middle'
             };
         }
         else {
@@ -21415,11 +21579,11 @@ class DataZoom extends AbstractComponent {
                 y: position.y + end * height
             };
             startTextAlignStyle = {
-                textAlign: 'center',
+                textAlign: (_f = (_e = restStartTextStyle === null || restStartTextStyle === void 0 ? void 0 : restStartTextStyle.textStyle) === null || _e === void 0 ? void 0 : _e.textAlign) !== null && _f !== void 0 ? _f : 'center',
                 textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, 'start') ? 'top' : 'bottom'
             };
             endTextAlignStyle = {
-                textAlign: 'center',
+                textAlign: (_h = (_g = restEndTextStyle === null || restEndTextStyle === void 0 ? void 0 : restEndTextStyle.textStyle) === null || _g === void 0 ? void 0 : _g.textAlign) !== null && _h !== void 0 ? _h : 'center',
                 textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, 'end') ? 'bottom' : 'top'
             };
         }
@@ -24536,6 +24700,15 @@ class DiscreteLegend extends LegendBase {
             : (e) => {
                 return e.detail.current;
             };
+        const onScroll = (e) => {
+            e.preventDefault();
+            const scrollComponent = this._pagerComponent;
+            const preScrollRange = scrollComponent.getScrollRange();
+            const { direction } = scrollComponent.attribute;
+            const { width, height } = scrollComponent.getSliderRenderBounds();
+            const currentScrollValue = direction === 'vertical' ? e.deltaY / height : e.deltaX / width;
+            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
+        };
         const onPaging = (e) => {
             const newPage = pageParser(e);
             if (newPage === this._itemContext.currentPage) {
@@ -24560,6 +24733,9 @@ class DiscreteLegend extends LegendBase {
         if (this._itemContext.isScrollbar) {
             this._pagerComponent.addEventListener('scrollDrag', onPaging);
             this._pagerComponent.addEventListener('scrollUp', onPaging);
+            if (this.attribute.pager.roamScroll) {
+                this.addEventListener('wheel', onScroll);
+            }
         }
         else {
             this._pagerComponent.addEventListener('toPrev', onPaging);
@@ -28530,6 +28706,11 @@ class CheckBox extends AbstractComponent {
                 stroke: this.attribute.box.checkedStroke
             });
         }
+        else if (this.attribute.disabled) {
+            this._box.setAttributes({
+                fill: this.attribute.box.disableFill
+            });
+        }
         this.appendChild(this._box);
     }
     renderIcon() {
@@ -28698,6 +28879,11 @@ class Radio extends AbstractComponent {
                 stroke: this.attribute.circle.checkedStroke
             });
         }
+        else if (this.attribute.disabled) {
+            this._circle.setAttributes({
+                fill: this.attribute.circle.disableFill
+            });
+        }
         this.appendChild(this._circle);
     }
     renderText() {
@@ -28828,6 +29014,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.5-beta.0";
+const version = "0.20.6-alpha.0";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };