@visactor/vchart 1.12.5 → 1.12.7

package/build/index.js

@@ -1167,6 +1167,602 @@
       }
     }
 
+    function degreeToRadian(degree) {
+      return degree * (Math.PI / 180);
+    }
+    function radianToDegree(radian) {
+      return 180 * radian / Math.PI;
+    }
+    const clampRadian = function () {
+      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (angle < 0) for (; angle < -tau$1;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
+      return angle;
+    };
+    const clampAngleByRadian = clampRadian;
+    function polarToCartesian(center, radius, angleInRadian) {
+      return radius ? {
+        x: center.x + radius * Math.cos(angleInRadian),
+        y: center.y + radius * Math.sin(angleInRadian)
+      } : {
+        x: center.x,
+        y: center.y
+      };
+    }
+    function cartesianToPolar(point) {
+      let center = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        x: 0,
+        y: 0
+      };
+      let startAngle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      let endAngle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2 * Math.PI;
+      const {
+          x: x,
+          y: y
+        } = point,
+        {
+          x: centerX,
+          y: centerY
+        } = center;
+      let dx = x - centerX,
+        dy = y - centerY;
+      const radius = Math.sqrt(dx * dx + dy * dy);
+      if (0 === radius) return {
+        radius: 0,
+        angle: 0
+      };
+      dx /= radius, dy /= radius;
+      let radian = Math.atan2(dy, dx);
+      if (radian < startAngle) for (; radian <= startAngle;) radian += 2 * Math.PI;
+      if (radian > endAngle) for (; radian >= endAngle;) radian -= 2 * Math.PI;
+      return {
+        radius: radius,
+        angle: radian
+      };
+    }
+    function getAngleByPoint(center, point) {
+      return Math.atan2(point.y - center.y, point.x - center.x);
+    }
+    function normalizeAngle(angle) {
+      for (; angle < 0;) angle += 2 * Math.PI;
+      for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
+      return angle;
+    }
+    function findBoundaryAngles(startAngle, endAngle) {
+      const deltaAngle = Math.abs(endAngle - startAngle);
+      if (deltaAngle >= 2 * Math.PI || 2 * Math.PI - deltaAngle < 1e-6) return [0, Math.PI / 2, Math.PI, 1.5 * Math.PI];
+      const normalMin = normalizeAngle(Math.min(startAngle, endAngle)),
+        normalMax = normalMin + deltaAngle,
+        steps = [normalMin, normalMax];
+      let directionAngle = Math.floor(normalMin / Math.PI) * Math.PI / 2;
+      for (; directionAngle < normalMax;) directionAngle > normalMin && steps.push(directionAngle), directionAngle += Math.PI / 2;
+      return steps;
+    }
+    function calculateMaxRadius(rect, center, startAngle, endAngle) {
+      const {
+          x: x,
+          y: y
+        } = center,
+        steps = findBoundaryAngles(startAngle, endAngle),
+        {
+          width: width,
+          height: height
+        } = rect,
+        radiusList = [];
+      return steps.forEach(step => {
+        const sin = Math.sin(step),
+          cos = Math.cos(step);
+        1 === sin ? radiusList.push(height - y) : -1 === sin ? radiusList.push(y) : 1 === cos ? radiusList.push(width - x) : -1 === cos ? radiusList.push(x) : (sin > 0 ? radiusList.push(Math.abs((height - y) / cos)) : radiusList.push(Math.abs(y / cos)), cos > 0 ? radiusList.push(Math.abs((width - x) / sin)) : radiusList.push(Math.abs(x / sin)));
+      }), Math.min.apply(null, radiusList);
+    }
+    function computeQuadrant(angle) {
+      return (angle = normalizeAngle(angle)) > 0 && angle <= Math.PI / 2 ? 2 : angle > Math.PI / 2 && angle <= Math.PI ? 3 : angle > Math.PI && angle <= 3 * Math.PI / 2 ? 4 : 1;
+    }
+
+    function sub(out, v1, v2) {
+      out[0] = v1[0] - v2[0], out[1] = v1[1] - v2[1];
+    }
+    function isIntersect(left1, right1, left2, right2) {
+      let min1 = left1[0],
+        max1 = right1[0],
+        min2 = left2[0],
+        max2 = right2[0];
+      return max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1) && (min1 = left1[1], max1 = right1[1], min2 = left2[1], max2 = right2[1], max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1));
+    }
+    function getIntersectPoint(left1, right1, left2, right2) {
+      if (!isIntersect(left1, right1, left2, right2)) return !1;
+      const dir1 = [0, 0],
+        dir2 = [0, 0],
+        tempVec = [0, 0];
+      if (sub(dir1, right1, left1), sub(dir2, right2, left2), fuzzyEqualVec(dir1, dir2)) return !0;
+      sub(tempVec, left2, left1);
+      const t = crossProduct$1(tempVec, dir2) / crossProduct$1(dir1, dir2);
+      return t >= 0 && t <= 1 && [left1[0] + dir1[0] * t, left1[1] + dir1[1] * t];
+    }
+    function getRectIntersect(bbox1, bbox2, format) {
+      if (null === bbox1) return bbox2;
+      if (null === bbox2) return bbox1;
+      const {
+        x11: x11,
+        x12: x12,
+        y11: y11,
+        y12: y12,
+        x21: x21,
+        x22: x22,
+        y21: y21,
+        y22: y22
+      } = formatTwoBBox(bbox1, bbox2, format);
+      return x11 >= x22 || x12 <= x21 || y11 >= y22 || y12 <= y21 ? {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0
+      } : {
+        x1: Math.max(x11, x21),
+        y1: Math.max(y11, y21),
+        x2: Math.min(x12, x22),
+        y2: Math.min(y12, y22)
+      };
+    }
+    var InnerBBox;
+    !function (InnerBBox) {
+      InnerBBox[InnerBBox.NONE = 0] = "NONE", InnerBBox[InnerBBox.BBOX1 = 1] = "BBOX1", InnerBBox[InnerBBox.BBOX2 = 2] = "BBOX2";
+    }(InnerBBox || (InnerBBox = {}));
+    const formatTwoBBox = (bbox1, bbox2, format) => {
+      let x11 = bbox1.x1,
+        x12 = bbox1.x2,
+        y11 = bbox1.y1,
+        y12 = bbox1.y2,
+        x21 = bbox2.x1,
+        x22 = bbox2.x2,
+        y21 = bbox2.y1,
+        y22 = bbox2.y2;
+      return format && (x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), x21 > x22 && ([x21, x22] = [x22, x21]), y21 > y22 && ([y21, y22] = [y22, y21])), {
+        x11: x11,
+        x12: x12,
+        y11: y11,
+        y12: y12,
+        x21: x21,
+        x22: x22,
+        y21: y21,
+        y22: y22
+      };
+    };
+    function rectInsideAnotherRect(bbox1, bbox2, format) {
+      if (!bbox1 || !bbox2) return InnerBBox.NONE;
+      const {
+        x11: x11,
+        x12: x12,
+        y11: y11,
+        y12: y12,
+        x21: x21,
+        x22: x22,
+        y21: y21,
+        y22: y22
+      } = formatTwoBBox(bbox1, bbox2, format);
+      return x11 > x21 && x12 < x22 && y11 > y21 && y12 < y22 ? InnerBBox.BBOX1 : x21 > x11 && x22 < x12 && y21 > y11 && y22 < y12 ? InnerBBox.BBOX2 : InnerBBox.NONE;
+    }
+    function isRectIntersect(bbox1, bbox2, format) {
+      if (bbox1 && bbox2) {
+        if (!format) return !(bbox1.x1 > bbox2.x2 || bbox1.x2 < bbox2.x1 || bbox1.y1 > bbox2.y2 || bbox1.y2 < bbox2.y1);
+        const {
+          x11: x11,
+          x12: x12,
+          y11: y11,
+          y12: y12,
+          x21: x21,
+          x22: x22,
+          y21: y21,
+          y22: y22
+        } = formatTwoBBox(bbox1, bbox2, !0);
+        return !(x11 > x22 || x12 < x21 || y11 > y22 || y12 < y21);
+      }
+      return !0;
+    }
+    function pointInRect(point, bbox, format) {
+      if (!bbox) return !0;
+      if (!format) return point.x >= bbox.x1 && point.x <= bbox.x2 && point.y >= bbox.y1 && point.y <= bbox.y2;
+      let x11 = bbox.x1,
+        x12 = bbox.x2,
+        y11 = bbox.y1,
+        y12 = bbox.y2;
+      return x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), point.x >= x11 && point.x <= x12 && point.y >= y11 && point.y <= y12;
+    }
+    function getProjectionRadius(checkAxis, axis) {
+      return Math.abs(axis[0] * checkAxis[0] + axis[1] * checkAxis[1]);
+    }
+    function rotatePoint(_ref, rad) {
+      let {
+        x: x,
+        y: y
+      } = _ref;
+      let origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+        x: 0,
+        y: 0
+      };
+      return {
+        x: (x - origin.x) * Math.cos(rad) - (y - origin.y) * Math.sin(rad) + origin.x,
+        y: (x - origin.x) * Math.sin(rad) + (y - origin.y) * Math.cos(rad) + origin.y
+      };
+    }
+    function getCenterPoint(box) {
+      return {
+        x: (box.x1 + box.x2) / 2,
+        y: (box.y1 + box.y2) / 2
+      };
+    }
+    function toRect$1(box, isDeg) {
+      const deg = isDeg ? degreeToRadian(box.angle) : box.angle,
+        cp = getCenterPoint(box);
+      return [rotatePoint({
+        x: box.x1,
+        y: box.y1
+      }, deg, cp), rotatePoint({
+        x: box.x2,
+        y: box.y1
+      }, deg, cp), rotatePoint({
+        x: box.x2,
+        y: box.y2
+      }, deg, cp), rotatePoint({
+        x: box.x1,
+        y: box.y2
+      }, deg, cp)];
+    }
+    function isRotateAABBIntersect(box1, box2) {
+      let isDeg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+      let ctx = arguments.length > 3 ? arguments[3] : undefined;
+      const rect1 = toRect$1(box1, isDeg),
+        rect2 = toRect$1(box2, isDeg),
+        vector = (start, end) => [end.x - start.x, end.y - start.y];
+      ctx && (ctx.save(), ctx.fillStyle = "red", ctx.globalAlpha = .6, rect1.forEach((item, index) => {
+        0 === index ? ctx.moveTo(item.x, item.y) : ctx.lineTo(item.x, item.y);
+      }), ctx.fill(), ctx.restore(), ctx.save(), ctx.fillStyle = "green", ctx.globalAlpha = .6, rect2.forEach((item, index) => {
+        0 === index ? ctx.moveTo(item.x, item.y) : ctx.lineTo(item.x, item.y);
+      }), ctx.fill(), ctx.restore());
+      const p1 = getCenterPoint(box1),
+        p2 = getCenterPoint(box2);
+      ctx && ctx.fillRect(p1.x, p1.y, 2, 2), ctx && ctx.fillRect(p2.x, p2.y, 2, 2);
+      const vp1p2 = vector(p1, p2),
+        AB = vector(rect1[0], rect1[1]),
+        BC = vector(rect1[1], rect1[2]),
+        A1B1 = vector(rect2[0], rect2[1]),
+        B1C1 = vector(rect2[1], rect2[2]),
+        deg11 = isDeg ? degreeToRadian(box1.angle) : box1.angle;
+      let deg12 = isDeg ? degreeToRadian(90 - box1.angle) : box1.angle + halfPi$2;
+      const deg21 = isDeg ? degreeToRadian(box2.angle) : box2.angle;
+      let deg22 = isDeg ? degreeToRadian(90 - box2.angle) : box2.angle + halfPi$2;
+      deg12 > pi2 && (deg12 -= pi2), deg22 > pi2 && (deg22 -= pi2);
+      const isCover = (checkAxisRadius, deg, targetAxis1, targetAxis2) => {
+        const checkAxis = [Math.cos(deg), Math.sin(deg)];
+        return checkAxisRadius + (getProjectionRadius(checkAxis, targetAxis1) + getProjectionRadius(checkAxis, targetAxis2)) / 2 > getProjectionRadius(checkAxis, vp1p2);
+      };
+      return isCover((box1.x2 - box1.x1) / 2, deg11, A1B1, B1C1) && isCover((box1.y2 - box1.y1) / 2, deg12, A1B1, B1C1) && isCover((box2.x2 - box2.x1) / 2, deg21, AB, BC) && isCover((box2.y2 - box2.y1) / 2, deg22, AB, BC);
+    }
+
+    let x1$1, y1$1, x2, y2;
+    function getAABBFromPoints(points) {
+      return x1$1 = 1 / 0, y1$1 = 1 / 0, x2 = -1 / 0, y2 = -1 / 0, points.forEach(point => {
+        x1$1 > point.x && (x1$1 = point.x), x2 < point.x && (x2 = point.x), y1$1 > point.y && (y1$1 = point.y), y2 < point.y && (y2 = point.y);
+      }), {
+        x1: x1$1,
+        y1: y1$1,
+        x2: x2,
+        y2: y2
+      };
+    }
+
+    const EPSILON$1 = 1e-8;
+    function lineIntersectPolygon(a1x, a1y, a2x, a2y, points) {
+      for (let i = 0, p2 = points[points.length - 1]; i < points.length; i++) {
+        const p = points[i];
+        if (isIntersect([a1x, a1y], [a2x, a2y], [p.x, p.y], [p2.x, p2.y])) return !0;
+        p2 = p;
+      }
+      return !1;
+    }
+    function polygonContainPoint(points, x, y) {
+      let w = 0,
+        p = points[0];
+      if (!p) return !1;
+      for (let i = 1; i < points.length; i++) {
+        const p2 = points[i];
+        w += isPointInLine(p.x, p.y, p2.x, p2.y, x, y), p = p2;
+      }
+      const p0 = points[0];
+      return isAroundEqual$1(p.x, p0.x) && isAroundEqual$1(p.y, p0.y) || (w += isPointInLine(p.x, p.y, p0.x, p0.y, x, y)), 0 !== w;
+    }
+    function isPointInLine(x0, y0, x1, y1, x, y) {
+      if (y > y0 && y > y1 || y < y0 && y < y1) return 0;
+      if (y1 === y0) return 0;
+      const t = (y - y0) / (y1 - y0);
+      let dir = y1 < y0 ? 1 : -1;
+      1 !== t && 0 !== t || (dir = y1 < y0 ? .5 : -.5);
+      const x_ = t * (x1 - x0) + x0;
+      return x_ === x ? 1 / 0 : x_ > x ? dir : 0;
+    }
+    function isAroundEqual$1(a, b) {
+      return Math.abs(a - b) < EPSILON$1;
+    }
+    function polygonIntersectPolygon(pointsA, pointsB) {
+      for (let i = 0; i < pointsB.length; i++) {
+        if (polygonContainPoint(pointsA, pointsB[i].x, pointsB[i].y)) return !0;
+        if (i > 0 && lineIntersectPolygon(pointsB[i - 1].x, pointsB[i - 1].y, pointsB[i].x, pointsB[i].y, pointsA)) return !0;
+      }
+      return !1;
+    }
+
+    const eastAsianCharacterInfo = character => {
+      let x = character.charCodeAt(0),
+        y = 2 === character.length ? character.charCodeAt(1) : 0,
+        codePoint = x;
+      return 55296 <= x && x <= 56319 && 56320 <= y && y <= 57343 && (x &= 1023, y &= 1023, codePoint = x << 10 | y, codePoint += 65536), 12288 === codePoint || 65281 <= codePoint && codePoint <= 65376 || 65504 <= codePoint && codePoint <= 65510 ? "F" : 8361 === codePoint || 65377 <= codePoint && codePoint <= 65470 || 65474 <= codePoint && codePoint <= 65479 || 65482 <= codePoint && codePoint <= 65487 || 65490 <= codePoint && codePoint <= 65495 || 65498 <= codePoint && codePoint <= 65500 || 65512 <= codePoint && codePoint <= 65518 ? "H" : 4352 <= codePoint && codePoint <= 4447 || 4515 <= codePoint && codePoint <= 4519 || 4602 <= codePoint && codePoint <= 4607 || 9001 <= codePoint && codePoint <= 9002 || 11904 <= codePoint && codePoint <= 11929 || 11931 <= codePoint && codePoint <= 12019 || 12032 <= codePoint && codePoint <= 12245 || 12272 <= codePoint && codePoint <= 12283 || 12289 <= codePoint && codePoint <= 12350 || 12353 <= codePoint && codePoint <= 12438 || 12441 <= codePoint && codePoint <= 12543 || 12549 <= codePoint && codePoint <= 12589 || 12593 <= codePoint && codePoint <= 12686 || 12688 <= codePoint && codePoint <= 12730 || 12736 <= codePoint && codePoint <= 12771 || 12784 <= codePoint && codePoint <= 12830 || 12832 <= codePoint && codePoint <= 12871 || 12880 <= codePoint && codePoint <= 13054 || 13056 <= codePoint && codePoint <= 19903 || 19968 <= codePoint && codePoint <= 42124 || 42128 <= codePoint && codePoint <= 42182 || 43360 <= codePoint && codePoint <= 43388 || 44032 <= codePoint && codePoint <= 55203 || 55216 <= codePoint && codePoint <= 55238 || 55243 <= codePoint && codePoint <= 55291 || 63744 <= codePoint && codePoint <= 64255 || 65040 <= codePoint && codePoint <= 65049 || 65072 <= codePoint && codePoint <= 65106 || 65108 <= codePoint && codePoint <= 65126 || 65128 <= codePoint && codePoint <= 65131 || 110592 <= codePoint && codePoint <= 110593 || 127488 <= codePoint && codePoint <= 127490 || 127504 <= codePoint && codePoint <= 127546 || 127552 <= codePoint && codePoint <= 127560 || 127568 <= codePoint && codePoint <= 127569 || 131072 <= codePoint && codePoint <= 194367 || 177984 <= codePoint && codePoint <= 196605 || 196608 <= codePoint && codePoint <= 262141 ? "W" : 32 <= codePoint && codePoint <= 126 || 162 <= codePoint && codePoint <= 163 || 165 <= codePoint && codePoint <= 166 || 172 === codePoint || 175 === codePoint || 10214 <= codePoint && codePoint <= 10221 || 10629 <= codePoint && codePoint <= 10630 ? "Na" : 161 === codePoint || 164 === codePoint || 167 <= codePoint && codePoint <= 168 || 170 === codePoint || 173 <= codePoint && codePoint <= 174 || 176 <= codePoint && codePoint <= 180 || 182 <= codePoint && codePoint <= 186 || 188 <= codePoint && codePoint <= 191 || 198 === codePoint || 208 === codePoint || 215 <= codePoint && codePoint <= 216 || 222 <= codePoint && codePoint <= 225 || 230 === codePoint || 232 <= codePoint && codePoint <= 234 || 236 <= codePoint && codePoint <= 237 || 240 === codePoint || 242 <= codePoint && codePoint <= 243 || 247 <= codePoint && codePoint <= 250 || 252 === codePoint || 254 === codePoint || 257 === codePoint || 273 === codePoint || 275 === codePoint || 283 === codePoint || 294 <= codePoint && codePoint <= 295 || 299 === codePoint || 305 <= codePoint && codePoint <= 307 || 312 === codePoint || 319 <= codePoint && codePoint <= 322 || 324 === codePoint || 328 <= codePoint && codePoint <= 331 || 333 === codePoint || 338 <= codePoint && codePoint <= 339 || 358 <= codePoint && codePoint <= 359 || 363 === codePoint || 462 === codePoint || 464 === codePoint || 466 === codePoint || 468 === codePoint || 470 === codePoint || 472 === codePoint || 474 === codePoint || 476 === codePoint || 593 === codePoint || 609 === codePoint || 708 === codePoint || 711 === codePoint || 713 <= codePoint && codePoint <= 715 || 717 === codePoint || 720 === codePoint || 728 <= codePoint && codePoint <= 731 || 733 === codePoint || 735 === codePoint || 768 <= codePoint && codePoint <= 879 || 913 <= codePoint && codePoint <= 929 || 931 <= codePoint && codePoint <= 937 || 945 <= codePoint && codePoint <= 961 || 963 <= codePoint && codePoint <= 969 || 1025 === codePoint || 1040 <= codePoint && codePoint <= 1103 || 1105 === codePoint || 8208 === codePoint || 8211 <= codePoint && codePoint <= 8214 || 8216 <= codePoint && codePoint <= 8217 || 8220 <= codePoint && codePoint <= 8221 || 8224 <= codePoint && codePoint <= 8226 || 8228 <= codePoint && codePoint <= 8231 || 8240 === codePoint || 8242 <= codePoint && codePoint <= 8243 || 8245 === codePoint || 8251 === codePoint || 8254 === codePoint || 8308 === codePoint || 8319 === codePoint || 8321 <= codePoint && codePoint <= 8324 || 8364 === codePoint || 8451 === codePoint || 8453 === codePoint || 8457 === codePoint || 8467 === codePoint || 8470 === codePoint || 8481 <= codePoint && codePoint <= 8482 || 8486 === codePoint || 8491 === codePoint || 8531 <= codePoint && codePoint <= 8532 || 8539 <= codePoint && codePoint <= 8542 || 8544 <= codePoint && codePoint <= 8555 || 8560 <= codePoint && codePoint <= 8569 || 8585 === codePoint || 8592 <= codePoint && codePoint <= 8601 || 8632 <= codePoint && codePoint <= 8633 || 8658 === codePoint || 8660 === codePoint || 8679 === codePoint || 8704 === codePoint || 8706 <= codePoint && codePoint <= 8707 || 8711 <= codePoint && codePoint <= 8712 || 8715 === codePoint || 8719 === codePoint || 8721 === codePoint || 8725 === codePoint || 8730 === codePoint || 8733 <= codePoint && codePoint <= 8736 || 8739 === codePoint || 8741 === codePoint || 8743 <= codePoint && codePoint <= 8748 || 8750 === codePoint || 8756 <= codePoint && codePoint <= 8759 || 8764 <= codePoint && codePoint <= 8765 || 8776 === codePoint || 8780 === codePoint || 8786 === codePoint || 8800 <= codePoint && codePoint <= 8801 || 8804 <= codePoint && codePoint <= 8807 || 8810 <= codePoint && codePoint <= 8811 || 8814 <= codePoint && codePoint <= 8815 || 8834 <= codePoint && codePoint <= 8835 || 8838 <= codePoint && codePoint <= 8839 || 8853 === codePoint || 8857 === codePoint || 8869 === codePoint || 8895 === codePoint || 8978 === codePoint || 9312 <= codePoint && codePoint <= 9449 || 9451 <= codePoint && codePoint <= 9547 || 9552 <= codePoint && codePoint <= 9587 || 9600 <= codePoint && codePoint <= 9615 || 9618 <= codePoint && codePoint <= 9621 || 9632 <= codePoint && codePoint <= 9633 || 9635 <= codePoint && codePoint <= 9641 || 9650 <= codePoint && codePoint <= 9651 || 9654 <= codePoint && codePoint <= 9655 || 9660 <= codePoint && codePoint <= 9661 || 9664 <= codePoint && codePoint <= 9665 || 9670 <= codePoint && codePoint <= 9672 || 9675 === codePoint || 9678 <= codePoint && codePoint <= 9681 || 9698 <= codePoint && codePoint <= 9701 || 9711 === codePoint || 9733 <= codePoint && codePoint <= 9734 || 9737 === codePoint || 9742 <= codePoint && codePoint <= 9743 || 9748 <= codePoint && codePoint <= 9749 || 9756 === codePoint || 9758 === codePoint || 9792 === codePoint || 9794 === codePoint || 9824 <= codePoint && codePoint <= 9825 || 9827 <= codePoint && codePoint <= 9829 || 9831 <= codePoint && codePoint <= 9834 || 9836 <= codePoint && codePoint <= 9837 || 9839 === codePoint || 9886 <= codePoint && codePoint <= 9887 || 9918 <= codePoint && codePoint <= 9919 || 9924 <= codePoint && codePoint <= 9933 || 9935 <= codePoint && codePoint <= 9953 || 9955 === codePoint || 9960 <= codePoint && codePoint <= 9983 || 10045 === codePoint || 10071 === codePoint || 10102 <= codePoint && codePoint <= 10111 || 11093 <= codePoint && codePoint <= 11097 || 12872 <= codePoint && codePoint <= 12879 || 57344 <= codePoint && codePoint <= 63743 || 65024 <= codePoint && codePoint <= 65039 || 65533 === codePoint || 127232 <= codePoint && codePoint <= 127242 || 127248 <= codePoint && codePoint <= 127277 || 127280 <= codePoint && codePoint <= 127337 || 127344 <= codePoint && codePoint <= 127386 || 917760 <= codePoint && codePoint <= 917999 || 983040 <= codePoint && codePoint <= 1048573 || 1048576 <= codePoint && codePoint <= 1114109 ? "A" : "N";
+    };
+
+    function getContextFont(text) {
+      let defaultAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      let fontSizeScale = arguments.length > 2 ? arguments[2] : undefined;
+      fontSizeScale || (fontSizeScale = 1);
+      const {
+        fontStyle = defaultAttr.fontStyle,
+        fontVariant = defaultAttr.fontVariant,
+        fontWeight = defaultAttr.fontWeight,
+        fontSize = defaultAttr.fontSize,
+        fontFamily = defaultAttr.fontFamily
+      } = text;
+      return (fontStyle ? fontStyle + " " : "") + (fontVariant ? fontVariant + " " : "") + (fontWeight ? fontWeight + " " : "") + fontSize * fontSizeScale + "px " + (fontFamily || "sans-serif");
+    }
+
+    class TextMeasure {
+      constructor(option, textSpec) {
+        this._numberCharSize = null, this._fullCharSize = null, this._letterCharSize = null, this._specialCharSizeMap = {}, this._canvas = null, this._context = null, this._contextSaved = !1, this._notSupportCanvas = !1, this._notSupportVRender = !1, this._userSpec = {}, this.specialCharSet = "-/: .,@%'\"~", this._option = option, this._userSpec = null != textSpec ? textSpec : {}, this.textSpec = this._initSpec(), isValid$1(option.specialCharSet) && (this.specialCharSet = option.specialCharSet), this._standardMethod = isValid$1(option.getTextBounds) ? this.fullMeasure.bind(this) : this.measureWithNaiveCanvas.bind(this);
+      }
+      initContext() {
+        if (this._notSupportCanvas) return !1;
+        if (isNil$1(this._canvas) && (isValid$1(this._option.getCanvasForMeasure) && (this._canvas = this._option.getCanvasForMeasure()), isNil$1(this._canvas) && "undefined" != typeof window && void 0 !== window.document && globalThis && isValid$1(globalThis.document) && (this._canvas = globalThis.document.createElement("canvas"))), isNil$1(this._context) && isValid$1(this._canvas)) {
+          const context = this._canvas.getContext("2d");
+          isValid$1(context) && (context.save(), context.font = getContextFont(this.textSpec), this._contextSaved = !0, this._context = context);
+        }
+        return !isNil$1(this._context) || (this._notSupportCanvas = !0, !1);
+      }
+      _initSpec() {
+        var _a, _b, _c;
+        const {
+            defaultFontParams = {}
+          } = this._option,
+          {
+            fontStyle = defaultFontParams.fontStyle,
+            fontVariant = defaultFontParams.fontVariant,
+            fontWeight = null !== (_a = defaultFontParams.fontWeight) && void 0 !== _a ? _a : "normal",
+            fontSize = null !== (_b = defaultFontParams.fontSize) && void 0 !== _b ? _b : 12,
+            fontFamily = null !== (_c = defaultFontParams.fontFamily) && void 0 !== _c ? _c : "sans-serif",
+            align: align,
+            textAlign = null != align ? align : "center",
+            baseline: baseline,
+            textBaseline = null != baseline ? baseline : "middle",
+            ellipsis: ellipsis,
+            limit: limit
+          } = this._userSpec;
+        let {
+          lineHeight = fontSize
+        } = this._userSpec;
+        if (isString$1(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
+          const scale = Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100;
+          lineHeight = fontSize * scale;
+        }
+        return {
+          fontStyle: fontStyle,
+          fontVariant: fontVariant,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          textAlign: textAlign,
+          textBaseline: textBaseline,
+          ellipsis: ellipsis,
+          limit: limit,
+          lineHeight: lineHeight
+        };
+      }
+      measure(text, method) {
+        switch (method) {
+          case "vrender":
+          case "canopus":
+            return this.fullMeasure(text);
+          case "canvas":
+            return this.measureWithNaiveCanvas(text);
+          case "simple":
+            return this.quickMeasureWithoutCanvas(text);
+          default:
+            return this.quickMeasure(text);
+        }
+      }
+      fullMeasure(text) {
+        if (isNil$1(text)) return {
+          width: 0,
+          height: 0
+        };
+        if (isNil$1(this._option.getTextBounds) || !this._notSupportVRender) return this.measureWithNaiveCanvas(text);
+        const {
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          textAlign: textAlign,
+          textBaseline: textBaseline,
+          ellipsis: ellipsis,
+          limit: limit,
+          lineHeight: lineHeight
+        } = this.textSpec;
+        let size;
+        try {
+          const bounds = this._option.getTextBounds({
+            text: text,
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            textAlign: textAlign,
+            textBaseline: textBaseline,
+            ellipsis: !!ellipsis,
+            maxLineWidth: limit || 1 / 0,
+            lineHeight: lineHeight
+          });
+          size = {
+            width: bounds.width(),
+            height: bounds.height()
+          };
+        } catch (e) {
+          this._notSupportVRender = !0, size = this.measureWithNaiveCanvas(text);
+        }
+        return size;
+      }
+      measureWithNaiveCanvas(text) {
+        return this._measureReduce(text, this._measureWithNaiveCanvas.bind(this));
+      }
+      _measureWithNaiveCanvas(text) {
+        var _a;
+        if (!this.initContext()) return this._quickMeasureWithoutCanvas(text);
+        const metrics = this._context.measureText(text),
+          {
+            fontSize: fontSize,
+            lineHeight: lineHeight
+          } = this.textSpec;
+        return {
+          width: metrics.width,
+          height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize
+        };
+      }
+      quickMeasure(text) {
+        return this._measureReduce(text, this._quickMeasure.bind(this));
+      }
+      _quickMeasure(text) {
+        const totalSize = {
+          width: 0,
+          height: 0
+        };
+        for (let i = 0; i < text.length; i++) {
+          const char = text[i];
+          let size = this._measureSpecialChar(char);
+          isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
+        }
+        return totalSize;
+      }
+      quickMeasureWithoutCanvas(text) {
+        return this._measureReduce(text, this._quickMeasureWithoutCanvas.bind(this));
+      }
+      _quickMeasureWithoutCanvas(text) {
+        var _a;
+        const totalSize = {
+            width: 0,
+            height: 0
+          },
+          {
+            fontSize: fontSize,
+            lineHeight: lineHeight
+          } = this.textSpec;
+        for (let i = 0; i < text.length; i++) {
+          const char = text[i],
+            size = ["F", "W"].includes(eastAsianCharacterInfo(char)) ? 1 : .53;
+          totalSize.width += size * fontSize;
+        }
+        return totalSize.height = null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize, totalSize;
+      }
+      _measureReduce(text, processor) {
+        var _a;
+        const {
+            fontSize: fontSize,
+            lineHeight: lineHeight
+          } = this.textSpec,
+          defaultResult = {
+            width: 0,
+            height: 0
+          };
+        if (isNil$1(text)) return defaultResult;
+        if (isArray$1(text)) {
+          const textArr = text.filter(isValid$1).map(s => s.toString());
+          return 0 === textArr.length ? defaultResult : 1 === textArr.length ? processor(textArr[0]) : {
+            width: textArr.reduce((maxWidth, cur) => Math.max(maxWidth, processor(cur).width), 0),
+            height: textArr.length * ((null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize) + 1) + 1
+          };
+        }
+        return processor(text.toString());
+      }
+      _measureNumberChar() {
+        if (isNil$1(this._numberCharSize)) {
+          const numberBounds = this._standardMethod(TextMeasure.NUMBERS_CHAR_SET);
+          this._numberCharSize = {
+            width: numberBounds.width / TextMeasure.NUMBERS_CHAR_SET.length,
+            height: numberBounds.height
+          };
+        }
+        return this._numberCharSize;
+      }
+      _measureFullSizeChar() {
+        return isNil$1(this._fullCharSize) && (this._fullCharSize = this._standardMethod(TextMeasure.FULL_SIZE_CHAR)), this._fullCharSize;
+      }
+      _measureLetterChar() {
+        if (isNil$1(this._letterCharSize)) {
+          const alphabetBounds = this._standardMethod(TextMeasure.ALPHABET_CHAR_SET);
+          this._letterCharSize = {
+            width: alphabetBounds.width / TextMeasure.ALPHABET_CHAR_SET.length,
+            height: alphabetBounds.height
+          };
+        }
+        return this._letterCharSize;
+      }
+      _measureSpecialChar(char) {
+        return isValid$1(this._specialCharSizeMap[char]) ? this._specialCharSizeMap[char] : this.specialCharSet.includes(char) ? (this._specialCharSizeMap[char] = this._standardMethod(char), this._specialCharSizeMap[char]) : null;
+      }
+      release() {
+        isValid$1(this._canvas) && (this._canvas = null), isValid$1(this._context) && (this._contextSaved && (this._context.restore(), this._contextSaved = !1), this._context = null);
+      }
+    }
+    TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
+
+    const calculateAnchorOfBounds = (bounds, anchorType) => {
+      const {
+          x1: x1,
+          x2: x2,
+          y1: y1,
+          y2: y2
+        } = bounds,
+        rectWidth = Math.abs(x2 - x1),
+        rectHeight = Math.abs(y2 - y1);
+      let anchorX = (x1 + x2) / 2,
+        anchorY = (y1 + y2) / 2,
+        sx = 0,
+        sy = 0;
+      switch (anchorType) {
+        case "top":
+        case "inside-top":
+          sy = -.5;
+          break;
+        case "bottom":
+        case "inside-bottom":
+          sy = .5;
+          break;
+        case "left":
+        case "inside-left":
+          sx = -.5;
+          break;
+        case "right":
+        case "inside-right":
+          sx = .5;
+          break;
+        case "top-right":
+          sx = .5, sy = -.5;
+          break;
+        case "top-left":
+          sx = -.5, sy = -.5;
+          break;
+        case "bottom-right":
+          sx = .5, sy = .5;
+          break;
+        case "bottom-left":
+          sx = -.5, sy = .5;
+      }
+      return anchorX += sx * rectWidth, anchorY += sy * rectHeight, {
+        x: anchorX,
+        y: anchorY
+      };
+    };
+
     function transformBoundsWithMatrix(out, bounds, matrix) {
       const {
         x1: x1,
@@ -1305,65 +1901,22 @@
       }
     }
     class AABBBounds extends Bounds {}
-
-    function degreeToRadian(degree) {
-      return degree * (Math.PI / 180);
-    }
-    function radianToDegree(radian) {
-      return 180 * radian / Math.PI;
-    }
-    const clampRadian$1 = function () {
-      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      if (angle < 0) for (; angle < -tau$1;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
-      return angle;
-    };
-    const clampAngleByRadian = clampRadian$1;
-    function polarToCartesian(center, radius, angleInRadian) {
-      return radius ? {
-        x: center.x + radius * Math.cos(angleInRadian),
-        y: center.y + radius * Math.sin(angleInRadian)
-      } : {
-        x: center.x,
-        y: center.y
-      };
-    }
-    function getAngleByPoint(center, point) {
-      return Math.atan2(point.y - center.y, point.x - center.x);
-    }
-    function normalizeAngle(angle) {
-      for (; angle < 0;) angle += 2 * Math.PI;
-      for (; angle >= 2 * Math.PI;) angle -= 2 * Math.PI;
-      return angle;
-    }
-    function findBoundaryAngles(startAngle, endAngle) {
-      const deltaAngle = Math.abs(endAngle - startAngle);
-      if (deltaAngle >= 2 * Math.PI || 2 * Math.PI - deltaAngle < 1e-6) return [0, Math.PI / 2, Math.PI, 1.5 * Math.PI];
-      const normalMin = normalizeAngle(Math.min(startAngle, endAngle)),
-        normalMax = normalMin + deltaAngle,
-        steps = [normalMin, normalMax];
-      let directionAngle = Math.floor(normalMin / Math.PI) * Math.PI / 2;
-      for (; directionAngle < normalMax;) directionAngle > normalMin && steps.push(directionAngle), directionAngle += Math.PI / 2;
-      return steps;
-    }
-    function calculateMaxRadius(rect, center, startAngle, endAngle) {
-      const {
-          x: x,
-          y: y
-        } = center,
-        steps = findBoundaryAngles(startAngle, endAngle),
-        {
-          width: width,
-          height: height
-        } = rect,
-        radiusList = [];
-      return steps.forEach(step => {
-        const sin = Math.sin(step),
-          cos = Math.cos(step);
-        1 === sin ? radiusList.push(height - y) : -1 === sin ? radiusList.push(y) : 1 === cos ? radiusList.push(width - x) : -1 === cos ? radiusList.push(x) : (sin > 0 ? radiusList.push(Math.abs((height - y) / cos)) : radiusList.push(Math.abs(y / cos)), cos > 0 ? radiusList.push(Math.abs((width - x) / sin)) : radiusList.push(Math.abs(x / sin)));
-      }), Math.min.apply(null, radiusList);
-    }
-    function computeQuadrant(angle) {
-      return (angle = normalizeAngle(angle)) > 0 && angle <= Math.PI / 2 ? 2 : angle > Math.PI / 2 && angle <= Math.PI ? 3 : angle > Math.PI && angle <= 3 * Math.PI / 2 ? 4 : 1;
+    class OBBBounds extends Bounds {
+      constructor(bounds) {
+        let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        super(bounds), bounds && (this.angle = angle);
+      }
+      intersects(b) {
+        return isRotateAABBIntersect(this, b);
+      }
+      setValue() {
+        let x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        let y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        let x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+        let y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+        let angle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+        return super.setValue(x1, y1, x2, y2), this.angle = angle, this;
+      }
     }
 
     class Matrix {
@@ -1904,619 +2457,114 @@
       }
       setOpacity() {
         let o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-        return this.color.opacity = o, this;
-      }
-      getLuminance() {
-        return (.2126 * this.color.r + .7152 * this.color.g + .0722 * this.color.b) / 255;
-      }
-      getLuminance2() {
-        return (.2627 * this.color.r + .678 * this.color.g + .0593 * this.color.b) / 255;
-      }
-      getLuminance3() {
-        return (.299 * this.color.r + .587 * this.color.g + .114 * this.color.b) / 255;
-      }
-      clone() {
-        return new Color(this.color.toString());
-      }
-      copyGammaToLinear(color) {
-        let gammaFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-        return this.color.r = Math.pow(color.color.r, gammaFactor), this.color.g = Math.pow(color.color.g, gammaFactor), this.color.b = Math.pow(color.color.b, gammaFactor), this;
-      }
-      copyLinearToGamma(color) {
-        let gammaFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-        const safeInverse = gammaFactor > 0 ? 1 / gammaFactor : 1;
-        return this.color.r = Math.pow(color.color.r, safeInverse), this.color.g = Math.pow(color.color.g, safeInverse), this.color.b = Math.pow(color.color.b, safeInverse), this;
-      }
-      convertGammaToLinear(gammaFactor) {
-        return this.copyGammaToLinear(this, gammaFactor), this;
-      }
-      convertLinearToGamma(gammaFactor) {
-        return this.copyLinearToGamma(this, gammaFactor), this;
-      }
-      copySRGBToLinear(color) {
-        return this.color.r = SRGBToLinear(color.color.r), this.color.g = SRGBToLinear(color.color.g), this.color.b = SRGBToLinear(color.color.b), this;
-      }
-      copyLinearToSRGB(color) {
-        return this.color.r = LinearToSRGB(color.color.r), this.color.g = LinearToSRGB(color.color.g), this.color.b = LinearToSRGB(color.color.b), this;
-      }
-      convertSRGBToLinear() {
-        return this.copySRGBToLinear(this), this;
-      }
-      convertLinearToSRGB() {
-        return this.copyLinearToSRGB(this), this;
-      }
-    }
-    class RGB {
-      constructor(r, g, b, opacity) {
-        this.r = isNaN(+r) ? 255 : Math.max(0, Math.min(255, +r)), this.g = isNaN(+g) ? 255 : Math.max(0, Math.min(255, +g)), this.b = isNaN(+b) ? 255 : Math.max(0, Math.min(255, +b)), isValid$1(opacity) ? this.opacity = isNaN(+opacity) ? 1 : Math.max(0, Math.min(1, +opacity)) : this.opacity = 1;
-      }
-      formatHex() {
-        return `#${hex(this.r) + hex(this.g) + hex(this.b) + (1 === this.opacity ? "" : hex(255 * this.opacity))}`;
-      }
-      formatRgb() {
-        const opacity = this.opacity;
-        return `${1 === opacity ? "rgb(" : "rgba("}${this.r},${this.g},${this.b}${1 === opacity ? ")" : `,${opacity})`}`;
-      }
-      formatHsl() {
-        const opacity = this.opacity,
-          {
-            h: h,
-            s: s,
-            l: l
-          } = rgbToHsl(this.r, this.g, this.b);
-        return `${1 === opacity ? "hsl(" : "hsla("}${h},${s}%,${l}%${1 === opacity ? ")" : `,${opacity})`}`;
-      }
-      toString() {
-        return this.formatHex();
-      }
-    }
-
-    function hexToRgb(str) {
-      let r = "",
-        g = "",
-        b = "";
-      const strtIndex = "#" === str[0] ? 1 : 0;
-      for (let i = strtIndex; i < str.length; i++) "#" !== str[i] && (i < strtIndex + 2 ? r += str[i] : i < strtIndex + 4 ? g += str[i] : i < strtIndex + 6 && (b += str[i]));
-      return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
-    }
-
-    function rgbToHex(r, g, b) {
-      return Number((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    }
-
-    function interpolateRgb$1(colorA, colorB) {
-      const redA = colorA.r,
-        redB = colorB.r,
-        greenA = colorA.g,
-        greenB = colorB.g,
-        blueA = colorA.b,
-        blueB = colorB.b,
-        opacityA = colorA.opacity,
-        opacityB = colorB.opacity;
-      return t => {
-        const r = Math.round(redA * (1 - t) + redB * t),
-          g = Math.round(greenA * (1 - t) + greenB * t),
-          b = Math.round(blueA * (1 - t) + blueB * t);
-        return new RGB(r, g, b, opacityA * (1 - t) + opacityB * t);
-      };
-    }
-
-    var ColorUtil = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        Color: Color,
-        DEFAULT_COLORS: DEFAULT_COLORS,
-        RGB: RGB,
-        hexToRgb: hexToRgb,
-        hslToRgb: hslToRgb,
-        interpolateRgb: interpolateRgb$1,
-        rgbToHex: rgbToHex,
-        rgbToHsl: rgbToHsl
-    });
-
-    function sub(out, v1, v2) {
-      out[0] = v1[0] - v2[0], out[1] = v1[1] - v2[1];
-    }
-    function isIntersect(left1, right1, left2, right2) {
-      let min1 = left1[0],
-        max1 = right1[0],
-        min2 = left2[0],
-        max2 = right2[0];
-      return max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1) && (min1 = left1[1], max1 = right1[1], min2 = left2[1], max2 = right2[1], max1 < min1 && ([min1, max1] = [max1, min1]), max2 < min2 && ([max2, min2] = [min2, max2]), !(max1 < min2 || max2 < min1));
-    }
-    function getIntersectPoint(left1, right1, left2, right2) {
-      if (!isIntersect(left1, right1, left2, right2)) return !1;
-      const dir1 = [0, 0],
-        dir2 = [0, 0],
-        tempVec = [0, 0];
-      if (sub(dir1, right1, left1), sub(dir2, right2, left2), fuzzyEqualVec(dir1, dir2)) return !0;
-      sub(tempVec, left2, left1);
-      const t = crossProduct$1(tempVec, dir2) / crossProduct$1(dir1, dir2);
-      return t >= 0 && t <= 1 && [left1[0] + dir1[0] * t, left1[1] + dir1[1] * t];
-    }
-    function getRectIntersect(bbox1, bbox2, format) {
-      if (null === bbox1) return bbox2;
-      if (null === bbox2) return bbox1;
-      const {
-        x11: x11,
-        x12: x12,
-        y11: y11,
-        y12: y12,
-        x21: x21,
-        x22: x22,
-        y21: y21,
-        y22: y22
-      } = formatTwoBBox(bbox1, bbox2, format);
-      return x11 >= x22 || x12 <= x21 || y11 >= y22 || y12 <= y21 ? {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 0
-      } : {
-        x1: Math.max(x11, x21),
-        y1: Math.max(y11, y21),
-        x2: Math.min(x12, x22),
-        y2: Math.min(y12, y22)
-      };
-    }
-    var InnerBBox;
-    !function (InnerBBox) {
-      InnerBBox[InnerBBox.NONE = 0] = "NONE", InnerBBox[InnerBBox.BBOX1 = 1] = "BBOX1", InnerBBox[InnerBBox.BBOX2 = 2] = "BBOX2";
-    }(InnerBBox || (InnerBBox = {}));
-    const formatTwoBBox = (bbox1, bbox2, format) => {
-      let x11 = bbox1.x1,
-        x12 = bbox1.x2,
-        y11 = bbox1.y1,
-        y12 = bbox1.y2,
-        x21 = bbox2.x1,
-        x22 = bbox2.x2,
-        y21 = bbox2.y1,
-        y22 = bbox2.y2;
-      return format && (x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), x21 > x22 && ([x21, x22] = [x22, x21]), y21 > y22 && ([y21, y22] = [y22, y21])), {
-        x11: x11,
-        x12: x12,
-        y11: y11,
-        y12: y12,
-        x21: x21,
-        x22: x22,
-        y21: y21,
-        y22: y22
-      };
-    };
-    function rectInsideAnotherRect(bbox1, bbox2, format) {
-      if (!bbox1 || !bbox2) return InnerBBox.NONE;
-      const {
-        x11: x11,
-        x12: x12,
-        y11: y11,
-        y12: y12,
-        x21: x21,
-        x22: x22,
-        y21: y21,
-        y22: y22
-      } = formatTwoBBox(bbox1, bbox2, format);
-      return x11 > x21 && x12 < x22 && y11 > y21 && y12 < y22 ? InnerBBox.BBOX1 : x21 > x11 && x22 < x12 && y21 > y11 && y22 < y12 ? InnerBBox.BBOX2 : InnerBBox.NONE;
-    }
-    function isRectIntersect(bbox1, bbox2, format) {
-      if (bbox1 && bbox2) {
-        if (!format) return !(bbox1.x1 > bbox2.x2 || bbox1.x2 < bbox2.x1 || bbox1.y1 > bbox2.y2 || bbox1.y2 < bbox2.y1);
-        const {
-          x11: x11,
-          x12: x12,
-          y11: y11,
-          y12: y12,
-          x21: x21,
-          x22: x22,
-          y21: y21,
-          y22: y22
-        } = formatTwoBBox(bbox1, bbox2, !0);
-        return !(x11 > x22 || x12 < x21 || y11 > y22 || y12 < y21);
-      }
-      return !0;
-    }
-    function pointInRect(point, bbox, format) {
-      if (!bbox) return !0;
-      if (!format) return point.x >= bbox.x1 && point.x <= bbox.x2 && point.y >= bbox.y1 && point.y <= bbox.y2;
-      let x11 = bbox.x1,
-        x12 = bbox.x2,
-        y11 = bbox.y1,
-        y12 = bbox.y2;
-      return x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), point.x >= x11 && point.x <= x12 && point.y >= y11 && point.y <= y12;
-    }
-    function getProjectionRadius(checkAxis, axis) {
-      return Math.abs(axis[0] * checkAxis[0] + axis[1] * checkAxis[1]);
-    }
-    function rotate$1(_ref, deg) {
-      let {
-        x: x,
-        y: y
-      } = _ref;
-      let origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-        x: 0,
-        y: 0
-      };
-      return {
-        x: (x - origin.x) * Math.cos(deg) + (y - origin.y) * Math.sin(deg) + origin.x,
-        y: (x - origin.x) * Math.sin(deg) + (origin.y - y) * Math.cos(deg) + origin.y
-      };
-    }
-    function getCenterPoint(box) {
-      return {
-        x: (box.x1 + box.x2) / 2,
-        y: (box.y1 + box.y2) / 2
-      };
-    }
-    function toRect$1(box, isDeg) {
-      const deg = isDeg ? box.angle : degreeToRadian(box.angle),
-        cp = getCenterPoint(box);
-      return [rotate$1({
-        x: box.x1,
-        y: box.y1
-      }, deg, cp), rotate$1({
-        x: box.x2,
-        y: box.y1
-      }, deg, cp), rotate$1({
-        x: box.x2,
-        y: box.y2
-      }, deg, cp), rotate$1({
-        x: box.x1,
-        y: box.y2
-      }, deg, cp)];
-    }
-    function isRotateAABBIntersect(box1, box2) {
-      let isDeg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
-      let ctx = arguments.length > 3 ? arguments[3] : undefined;
-      const rect1 = toRect$1(box1, isDeg),
-        rect2 = toRect$1(box2, isDeg),
-        vector = (start, end) => [end.x - start.x, end.y - start.y];
-      ctx && (ctx.save(), ctx.fillStyle = "red", ctx.globalAlpha = .6, rect1.forEach((item, index) => {
-        0 === index ? ctx.moveTo(item.x, item.y) : ctx.lineTo(item.x, item.y);
-      }), ctx.fill(), ctx.restore(), ctx.save(), ctx.fillStyle = "green", ctx.globalAlpha = .6, rect2.forEach((item, index) => {
-        0 === index ? ctx.moveTo(item.x, item.y) : ctx.lineTo(item.x, item.y);
-      }), ctx.fill(), ctx.restore());
-      const p1 = getCenterPoint(box1),
-        p2 = getCenterPoint(box2);
-      ctx && ctx.fillRect(p1.x, p1.y, 2, 2), ctx && ctx.fillRect(p2.x, p2.y, 2, 2);
-      const vp1p2 = vector(p1, p2),
-        AB = vector(rect1[0], rect1[1]),
-        BC = vector(rect1[1], rect1[2]),
-        A1B1 = vector(rect2[0], rect2[1]),
-        B1C1 = vector(rect2[1], rect2[2]),
-        deg11 = isDeg ? box1.angle : degreeToRadian(box1.angle);
-      let deg12 = isDeg ? box1.angle + halfPi$2 : degreeToRadian(90 - box1.angle);
-      const deg21 = isDeg ? box2.angle : degreeToRadian(box2.angle);
-      let deg22 = isDeg ? box2.angle + halfPi$2 : degreeToRadian(90 - box2.angle);
-      deg12 > pi2 && (deg12 -= pi2), deg22 > pi2 && (deg22 -= pi2);
-      const isCover = (checkAxisRadius, deg, targetAxis1, targetAxis2) => {
-        const checkAxis = [Math.cos(deg), Math.sin(deg)];
-        return checkAxisRadius + (getProjectionRadius(checkAxis, targetAxis1) + getProjectionRadius(checkAxis, targetAxis2)) / 2 > getProjectionRadius(checkAxis, vp1p2);
-      };
-      return isCover((box1.x2 - box1.x1) / 2, deg11, A1B1, B1C1) && isCover((box1.y2 - box1.y1) / 2, deg12, A1B1, B1C1) && isCover((box2.x2 - box2.x1) / 2, deg21, AB, BC) && isCover((box2.y2 - box2.y1) / 2, deg22, AB, BC);
-    }
-
-    let x1$1, y1$1, x2, y2;
-    function getAABBFromPoints(points) {
-      return x1$1 = 1 / 0, y1$1 = 1 / 0, x2 = -1 / 0, y2 = -1 / 0, points.forEach(point => {
-        x1$1 > point.x && (x1$1 = point.x), x2 < point.x && (x2 = point.x), y1$1 > point.y && (y1$1 = point.y), y2 < point.y && (y2 = point.y);
-      }), {
-        x1: x1$1,
-        y1: y1$1,
-        x2: x2,
-        y2: y2
-      };
-    }
-
-    const EPSILON$1 = 1e-8;
-    function lineIntersectPolygon(a1x, a1y, a2x, a2y, points) {
-      for (let i = 0, p2 = points[points.length - 1]; i < points.length; i++) {
-        const p = points[i];
-        if (isIntersect([a1x, a1y], [a2x, a2y], [p.x, p.y], [p2.x, p2.y])) return !0;
-        p2 = p;
-      }
-      return !1;
-    }
-    function polygonContainPoint(points, x, y) {
-      let w = 0,
-        p = points[0];
-      if (!p) return !1;
-      for (let i = 1; i < points.length; i++) {
-        const p2 = points[i];
-        w += isPointInLine(p.x, p.y, p2.x, p2.y, x, y), p = p2;
-      }
-      const p0 = points[0];
-      return isAroundEqual$1(p.x, p0.x) && isAroundEqual$1(p.y, p0.y) || (w += isPointInLine(p.x, p.y, p0.x, p0.y, x, y)), 0 !== w;
-    }
-    function isPointInLine(x0, y0, x1, y1, x, y) {
-      if (y > y0 && y > y1 || y < y0 && y < y1) return 0;
-      if (y1 === y0) return 0;
-      const t = (y - y0) / (y1 - y0);
-      let dir = y1 < y0 ? 1 : -1;
-      1 !== t && 0 !== t || (dir = y1 < y0 ? .5 : -.5);
-      const x_ = t * (x1 - x0) + x0;
-      return x_ === x ? 1 / 0 : x_ > x ? dir : 0;
-    }
-    function isAroundEqual$1(a, b) {
-      return Math.abs(a - b) < EPSILON$1;
-    }
-    function polygonIntersectPolygon(pointsA, pointsB) {
-      for (let i = 0; i < pointsB.length; i++) {
-        if (polygonContainPoint(pointsA, pointsB[i].x, pointsB[i].y)) return !0;
-        if (i > 0 && lineIntersectPolygon(pointsB[i - 1].x, pointsB[i - 1].y, pointsB[i].x, pointsB[i].y, pointsA)) return !0;
+        return this.color.opacity = o, this;
       }
-      return !1;
-    }
-
-    const eastAsianCharacterInfo = character => {
-      let x = character.charCodeAt(0),
-        y = 2 === character.length ? character.charCodeAt(1) : 0,
-        codePoint = x;
-      return 55296 <= x && x <= 56319 && 56320 <= y && y <= 57343 && (x &= 1023, y &= 1023, codePoint = x << 10 | y, codePoint += 65536), 12288 === codePoint || 65281 <= codePoint && codePoint <= 65376 || 65504 <= codePoint && codePoint <= 65510 ? "F" : 8361 === codePoint || 65377 <= codePoint && codePoint <= 65470 || 65474 <= codePoint && codePoint <= 65479 || 65482 <= codePoint && codePoint <= 65487 || 65490 <= codePoint && codePoint <= 65495 || 65498 <= codePoint && codePoint <= 65500 || 65512 <= codePoint && codePoint <= 65518 ? "H" : 4352 <= codePoint && codePoint <= 4447 || 4515 <= codePoint && codePoint <= 4519 || 4602 <= codePoint && codePoint <= 4607 || 9001 <= codePoint && codePoint <= 9002 || 11904 <= codePoint && codePoint <= 11929 || 11931 <= codePoint && codePoint <= 12019 || 12032 <= codePoint && codePoint <= 12245 || 12272 <= codePoint && codePoint <= 12283 || 12289 <= codePoint && codePoint <= 12350 || 12353 <= codePoint && codePoint <= 12438 || 12441 <= codePoint && codePoint <= 12543 || 12549 <= codePoint && codePoint <= 12589 || 12593 <= codePoint && codePoint <= 12686 || 12688 <= codePoint && codePoint <= 12730 || 12736 <= codePoint && codePoint <= 12771 || 12784 <= codePoint && codePoint <= 12830 || 12832 <= codePoint && codePoint <= 12871 || 12880 <= codePoint && codePoint <= 13054 || 13056 <= codePoint && codePoint <= 19903 || 19968 <= codePoint && codePoint <= 42124 || 42128 <= codePoint && codePoint <= 42182 || 43360 <= codePoint && codePoint <= 43388 || 44032 <= codePoint && codePoint <= 55203 || 55216 <= codePoint && codePoint <= 55238 || 55243 <= codePoint && codePoint <= 55291 || 63744 <= codePoint && codePoint <= 64255 || 65040 <= codePoint && codePoint <= 65049 || 65072 <= codePoint && codePoint <= 65106 || 65108 <= codePoint && codePoint <= 65126 || 65128 <= codePoint && codePoint <= 65131 || 110592 <= codePoint && codePoint <= 110593 || 127488 <= codePoint && codePoint <= 127490 || 127504 <= codePoint && codePoint <= 127546 || 127552 <= codePoint && codePoint <= 127560 || 127568 <= codePoint && codePoint <= 127569 || 131072 <= codePoint && codePoint <= 194367 || 177984 <= codePoint && codePoint <= 196605 || 196608 <= codePoint && codePoint <= 262141 ? "W" : 32 <= codePoint && codePoint <= 126 || 162 <= codePoint && codePoint <= 163 || 165 <= codePoint && codePoint <= 166 || 172 === codePoint || 175 === codePoint || 10214 <= codePoint && codePoint <= 10221 || 10629 <= codePoint && codePoint <= 10630 ? "Na" : 161 === codePoint || 164 === codePoint || 167 <= codePoint && codePoint <= 168 || 170 === codePoint || 173 <= codePoint && codePoint <= 174 || 176 <= codePoint && codePoint <= 180 || 182 <= codePoint && codePoint <= 186 || 188 <= codePoint && codePoint <= 191 || 198 === codePoint || 208 === codePoint || 215 <= codePoint && codePoint <= 216 || 222 <= codePoint && codePoint <= 225 || 230 === codePoint || 232 <= codePoint && codePoint <= 234 || 236 <= codePoint && codePoint <= 237 || 240 === codePoint || 242 <= codePoint && codePoint <= 243 || 247 <= codePoint && codePoint <= 250 || 252 === codePoint || 254 === codePoint || 257 === codePoint || 273 === codePoint || 275 === codePoint || 283 === codePoint || 294 <= codePoint && codePoint <= 295 || 299 === codePoint || 305 <= codePoint && codePoint <= 307 || 312 === codePoint || 319 <= codePoint && codePoint <= 322 || 324 === codePoint || 328 <= codePoint && codePoint <= 331 || 333 === codePoint || 338 <= codePoint && codePoint <= 339 || 358 <= codePoint && codePoint <= 359 || 363 === codePoint || 462 === codePoint || 464 === codePoint || 466 === codePoint || 468 === codePoint || 470 === codePoint || 472 === codePoint || 474 === codePoint || 476 === codePoint || 593 === codePoint || 609 === codePoint || 708 === codePoint || 711 === codePoint || 713 <= codePoint && codePoint <= 715 || 717 === codePoint || 720 === codePoint || 728 <= codePoint && codePoint <= 731 || 733 === codePoint || 735 === codePoint || 768 <= codePoint && codePoint <= 879 || 913 <= codePoint && codePoint <= 929 || 931 <= codePoint && codePoint <= 937 || 945 <= codePoint && codePoint <= 961 || 963 <= codePoint && codePoint <= 969 || 1025 === codePoint || 1040 <= codePoint && codePoint <= 1103 || 1105 === codePoint || 8208 === codePoint || 8211 <= codePoint && codePoint <= 8214 || 8216 <= codePoint && codePoint <= 8217 || 8220 <= codePoint && codePoint <= 8221 || 8224 <= codePoint && codePoint <= 8226 || 8228 <= codePoint && codePoint <= 8231 || 8240 === codePoint || 8242 <= codePoint && codePoint <= 8243 || 8245 === codePoint || 8251 === codePoint || 8254 === codePoint || 8308 === codePoint || 8319 === codePoint || 8321 <= codePoint && codePoint <= 8324 || 8364 === codePoint || 8451 === codePoint || 8453 === codePoint || 8457 === codePoint || 8467 === codePoint || 8470 === codePoint || 8481 <= codePoint && codePoint <= 8482 || 8486 === codePoint || 8491 === codePoint || 8531 <= codePoint && codePoint <= 8532 || 8539 <= codePoint && codePoint <= 8542 || 8544 <= codePoint && codePoint <= 8555 || 8560 <= codePoint && codePoint <= 8569 || 8585 === codePoint || 8592 <= codePoint && codePoint <= 8601 || 8632 <= codePoint && codePoint <= 8633 || 8658 === codePoint || 8660 === codePoint || 8679 === codePoint || 8704 === codePoint || 8706 <= codePoint && codePoint <= 8707 || 8711 <= codePoint && codePoint <= 8712 || 8715 === codePoint || 8719 === codePoint || 8721 === codePoint || 8725 === codePoint || 8730 === codePoint || 8733 <= codePoint && codePoint <= 8736 || 8739 === codePoint || 8741 === codePoint || 8743 <= codePoint && codePoint <= 8748 || 8750 === codePoint || 8756 <= codePoint && codePoint <= 8759 || 8764 <= codePoint && codePoint <= 8765 || 8776 === codePoint || 8780 === codePoint || 8786 === codePoint || 8800 <= codePoint && codePoint <= 8801 || 8804 <= codePoint && codePoint <= 8807 || 8810 <= codePoint && codePoint <= 8811 || 8814 <= codePoint && codePoint <= 8815 || 8834 <= codePoint && codePoint <= 8835 || 8838 <= codePoint && codePoint <= 8839 || 8853 === codePoint || 8857 === codePoint || 8869 === codePoint || 8895 === codePoint || 8978 === codePoint || 9312 <= codePoint && codePoint <= 9449 || 9451 <= codePoint && codePoint <= 9547 || 9552 <= codePoint && codePoint <= 9587 || 9600 <= codePoint && codePoint <= 9615 || 9618 <= codePoint && codePoint <= 9621 || 9632 <= codePoint && codePoint <= 9633 || 9635 <= codePoint && codePoint <= 9641 || 9650 <= codePoint && codePoint <= 9651 || 9654 <= codePoint && codePoint <= 9655 || 9660 <= codePoint && codePoint <= 9661 || 9664 <= codePoint && codePoint <= 9665 || 9670 <= codePoint && codePoint <= 9672 || 9675 === codePoint || 9678 <= codePoint && codePoint <= 9681 || 9698 <= codePoint && codePoint <= 9701 || 9711 === codePoint || 9733 <= codePoint && codePoint <= 9734 || 9737 === codePoint || 9742 <= codePoint && codePoint <= 9743 || 9748 <= codePoint && codePoint <= 9749 || 9756 === codePoint || 9758 === codePoint || 9792 === codePoint || 9794 === codePoint || 9824 <= codePoint && codePoint <= 9825 || 9827 <= codePoint && codePoint <= 9829 || 9831 <= codePoint && codePoint <= 9834 || 9836 <= codePoint && codePoint <= 9837 || 9839 === codePoint || 9886 <= codePoint && codePoint <= 9887 || 9918 <= codePoint && codePoint <= 9919 || 9924 <= codePoint && codePoint <= 9933 || 9935 <= codePoint && codePoint <= 9953 || 9955 === codePoint || 9960 <= codePoint && codePoint <= 9983 || 10045 === codePoint || 10071 === codePoint || 10102 <= codePoint && codePoint <= 10111 || 11093 <= codePoint && codePoint <= 11097 || 12872 <= codePoint && codePoint <= 12879 || 57344 <= codePoint && codePoint <= 63743 || 65024 <= codePoint && codePoint <= 65039 || 65533 === codePoint || 127232 <= codePoint && codePoint <= 127242 || 127248 <= codePoint && codePoint <= 127277 || 127280 <= codePoint && codePoint <= 127337 || 127344 <= codePoint && codePoint <= 127386 || 917760 <= codePoint && codePoint <= 917999 || 983040 <= codePoint && codePoint <= 1048573 || 1048576 <= codePoint && codePoint <= 1114109 ? "A" : "N";
-    };
-
-    function getContextFont(text) {
-      let defaultAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      let fontSizeScale = arguments.length > 2 ? arguments[2] : undefined;
-      fontSizeScale || (fontSizeScale = 1);
-      const {
-        fontStyle = defaultAttr.fontStyle,
-        fontVariant = defaultAttr.fontVariant,
-        fontWeight = defaultAttr.fontWeight,
-        fontSize = defaultAttr.fontSize,
-        fontFamily = defaultAttr.fontFamily
-      } = text;
-      return (fontStyle ? fontStyle + " " : "") + (fontVariant ? fontVariant + " " : "") + (fontWeight ? fontWeight + " " : "") + fontSize * fontSizeScale + "px " + (fontFamily || "sans-serif");
-    }
-
-    class TextMeasure {
-      constructor(option, textSpec) {
-        this._numberCharSize = null, this._fullCharSize = null, this._letterCharSize = null, this._specialCharSizeMap = {}, this._canvas = null, this._context = null, this._contextSaved = !1, this._notSupportCanvas = !1, this._notSupportVRender = !1, this._userSpec = {}, this.specialCharSet = "-/: .,@%'\"~", this._option = option, this._userSpec = null != textSpec ? textSpec : {}, this.textSpec = this._initSpec(), isValid$1(option.specialCharSet) && (this.specialCharSet = option.specialCharSet), this._standardMethod = isValid$1(option.getTextBounds) ? this.fullMeasure.bind(this) : this.measureWithNaiveCanvas.bind(this);
+      getLuminance() {
+        return (.2126 * this.color.r + .7152 * this.color.g + .0722 * this.color.b) / 255;
       }
-      initContext() {
-        if (this._notSupportCanvas) return !1;
-        if (isNil$1(this._canvas) && (isValid$1(this._option.getCanvasForMeasure) && (this._canvas = this._option.getCanvasForMeasure()), isNil$1(this._canvas) && "undefined" != typeof window && void 0 !== window.document && globalThis && isValid$1(globalThis.document) && (this._canvas = globalThis.document.createElement("canvas"))), isNil$1(this._context) && isValid$1(this._canvas)) {
-          const context = this._canvas.getContext("2d");
-          isValid$1(context) && (context.save(), context.font = getContextFont(this.textSpec), this._contextSaved = !0, this._context = context);
-        }
-        return !isNil$1(this._context) || (this._notSupportCanvas = !0, !1);
+      getLuminance2() {
+        return (.2627 * this.color.r + .678 * this.color.g + .0593 * this.color.b) / 255;
       }
-      _initSpec() {
-        var _a, _b, _c;
-        const {
-            defaultFontParams = {}
-          } = this._option,
-          {
-            fontStyle = defaultFontParams.fontStyle,
-            fontVariant = defaultFontParams.fontVariant,
-            fontWeight = null !== (_a = defaultFontParams.fontWeight) && void 0 !== _a ? _a : "normal",
-            fontSize = null !== (_b = defaultFontParams.fontSize) && void 0 !== _b ? _b : 12,
-            fontFamily = null !== (_c = defaultFontParams.fontFamily) && void 0 !== _c ? _c : "sans-serif",
-            align: align,
-            textAlign = null != align ? align : "center",
-            baseline: baseline,
-            textBaseline = null != baseline ? baseline : "middle",
-            ellipsis: ellipsis,
-            limit: limit
-          } = this._userSpec;
-        let {
-          lineHeight = fontSize
-        } = this._userSpec;
-        if (isString$1(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
-          const scale = Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100;
-          lineHeight = fontSize * scale;
-        }
-        return {
-          fontStyle: fontStyle,
-          fontVariant: fontVariant,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          textAlign: textAlign,
-          textBaseline: textBaseline,
-          ellipsis: ellipsis,
-          limit: limit,
-          lineHeight: lineHeight
-        };
+      getLuminance3() {
+        return (.299 * this.color.r + .587 * this.color.g + .114 * this.color.b) / 255;
       }
-      measure(text, method) {
-        switch (method) {
-          case "vrender":
-          case "canopus":
-            return this.fullMeasure(text);
-          case "canvas":
-            return this.measureWithNaiveCanvas(text);
-          case "simple":
-            return this.quickMeasureWithoutCanvas(text);
-          default:
-            return this.quickMeasure(text);
-        }
+      clone() {
+        return new Color(this.color.toString());
       }
-      fullMeasure(text) {
-        if (isNil$1(text)) return {
-          width: 0,
-          height: 0
-        };
-        if (isNil$1(this._option.getTextBounds) || !this._notSupportVRender) return this.measureWithNaiveCanvas(text);
-        const {
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          textAlign: textAlign,
-          textBaseline: textBaseline,
-          ellipsis: ellipsis,
-          limit: limit,
-          lineHeight: lineHeight
-        } = this.textSpec;
-        let size;
-        try {
-          const bounds = this._option.getTextBounds({
-            text: text,
-            fontFamily: fontFamily,
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            textAlign: textAlign,
-            textBaseline: textBaseline,
-            ellipsis: !!ellipsis,
-            maxLineWidth: limit || 1 / 0,
-            lineHeight: lineHeight
-          });
-          size = {
-            width: bounds.width(),
-            height: bounds.height()
-          };
-        } catch (e) {
-          this._notSupportVRender = !0, size = this.measureWithNaiveCanvas(text);
-        }
-        return size;
+      copyGammaToLinear(color) {
+        let gammaFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+        return this.color.r = Math.pow(color.color.r, gammaFactor), this.color.g = Math.pow(color.color.g, gammaFactor), this.color.b = Math.pow(color.color.b, gammaFactor), this;
       }
-      measureWithNaiveCanvas(text) {
-        return this._measureReduce(text, this._measureWithNaiveCanvas.bind(this));
+      copyLinearToGamma(color) {
+        let gammaFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+        const safeInverse = gammaFactor > 0 ? 1 / gammaFactor : 1;
+        return this.color.r = Math.pow(color.color.r, safeInverse), this.color.g = Math.pow(color.color.g, safeInverse), this.color.b = Math.pow(color.color.b, safeInverse), this;
       }
-      _measureWithNaiveCanvas(text) {
-        var _a;
-        if (!this.initContext()) return this._quickMeasureWithoutCanvas(text);
-        const metrics = this._context.measureText(text),
-          {
-            fontSize: fontSize,
-            lineHeight: lineHeight
-          } = this.textSpec;
-        return {
-          width: metrics.width,
-          height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize
-        };
+      convertGammaToLinear(gammaFactor) {
+        return this.copyGammaToLinear(this, gammaFactor), this;
       }
-      quickMeasure(text) {
-        return this._measureReduce(text, this._quickMeasure.bind(this));
+      convertLinearToGamma(gammaFactor) {
+        return this.copyLinearToGamma(this, gammaFactor), this;
       }
-      _quickMeasure(text) {
-        const totalSize = {
-          width: 0,
-          height: 0
-        };
-        for (let i = 0; i < text.length; i++) {
-          const char = text[i];
-          let size = this._measureSpecialChar(char);
-          isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
-        }
-        return totalSize;
+      copySRGBToLinear(color) {
+        return this.color.r = SRGBToLinear(color.color.r), this.color.g = SRGBToLinear(color.color.g), this.color.b = SRGBToLinear(color.color.b), this;
       }
-      quickMeasureWithoutCanvas(text) {
-        return this._measureReduce(text, this._quickMeasureWithoutCanvas.bind(this));
+      copyLinearToSRGB(color) {
+        return this.color.r = LinearToSRGB(color.color.r), this.color.g = LinearToSRGB(color.color.g), this.color.b = LinearToSRGB(color.color.b), this;
       }
-      _quickMeasureWithoutCanvas(text) {
-        var _a;
-        const totalSize = {
-            width: 0,
-            height: 0
-          },
-          {
-            fontSize: fontSize,
-            lineHeight: lineHeight
-          } = this.textSpec;
-        for (let i = 0; i < text.length; i++) {
-          const char = text[i],
-            size = ["F", "W"].includes(eastAsianCharacterInfo(char)) ? 1 : .53;
-          totalSize.width += size * fontSize;
-        }
-        return totalSize.height = null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize, totalSize;
+      convertSRGBToLinear() {
+        return this.copySRGBToLinear(this), this;
       }
-      _measureReduce(text, processor) {
-        var _a;
-        const {
-            fontSize: fontSize,
-            lineHeight: lineHeight
-          } = this.textSpec,
-          defaultResult = {
-            width: 0,
-            height: 0
-          };
-        if (isNil$1(text)) return defaultResult;
-        if (isArray$1(text)) {
-          const textArr = text.filter(isValid$1).map(s => s.toString());
-          return 0 === textArr.length ? defaultResult : 1 === textArr.length ? processor(textArr[0]) : {
-            width: textArr.reduce((maxWidth, cur) => Math.max(maxWidth, processor(cur).width), 0),
-            height: textArr.length * ((null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize) + 1) + 1
-          };
-        }
-        return processor(text.toString());
+      convertLinearToSRGB() {
+        return this.copyLinearToSRGB(this), this;
       }
-      _measureNumberChar() {
-        if (isNil$1(this._numberCharSize)) {
-          const numberBounds = this._standardMethod(TextMeasure.NUMBERS_CHAR_SET);
-          this._numberCharSize = {
-            width: numberBounds.width / TextMeasure.NUMBERS_CHAR_SET.length,
-            height: numberBounds.height
-          };
-        }
-        return this._numberCharSize;
+    }
+    class RGB {
+      constructor(r, g, b, opacity) {
+        this.r = isNaN(+r) ? 255 : Math.max(0, Math.min(255, +r)), this.g = isNaN(+g) ? 255 : Math.max(0, Math.min(255, +g)), this.b = isNaN(+b) ? 255 : Math.max(0, Math.min(255, +b)), isValid$1(opacity) ? this.opacity = isNaN(+opacity) ? 1 : Math.max(0, Math.min(1, +opacity)) : this.opacity = 1;
       }
-      _measureFullSizeChar() {
-        return isNil$1(this._fullCharSize) && (this._fullCharSize = this._standardMethod(TextMeasure.FULL_SIZE_CHAR)), this._fullCharSize;
+      formatHex() {
+        return `#${hex(this.r) + hex(this.g) + hex(this.b) + (1 === this.opacity ? "" : hex(255 * this.opacity))}`;
       }
-      _measureLetterChar() {
-        if (isNil$1(this._letterCharSize)) {
-          const alphabetBounds = this._standardMethod(TextMeasure.ALPHABET_CHAR_SET);
-          this._letterCharSize = {
-            width: alphabetBounds.width / TextMeasure.ALPHABET_CHAR_SET.length,
-            height: alphabetBounds.height
-          };
-        }
-        return this._letterCharSize;
+      formatRgb() {
+        const opacity = this.opacity;
+        return `${1 === opacity ? "rgb(" : "rgba("}${this.r},${this.g},${this.b}${1 === opacity ? ")" : `,${opacity})`}`;
       }
-      _measureSpecialChar(char) {
-        return isValid$1(this._specialCharSizeMap[char]) ? this._specialCharSizeMap[char] : this.specialCharSet.includes(char) ? (this._specialCharSizeMap[char] = this._standardMethod(char), this._specialCharSizeMap[char]) : null;
+      formatHsl() {
+        const opacity = this.opacity,
+          {
+            h: h,
+            s: s,
+            l: l
+          } = rgbToHsl(this.r, this.g, this.b);
+        return `${1 === opacity ? "hsl(" : "hsla("}${h},${s}%,${l}%${1 === opacity ? ")" : `,${opacity})`}`;
       }
-      release() {
-        isValid$1(this._canvas) && (this._canvas = null), isValid$1(this._context) && (this._contextSaved && (this._context.restore(), this._contextSaved = !1), this._context = null);
+      toString() {
+        return this.formatHex();
       }
     }
-    TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
 
-    const calculateAnchorOfBounds = (bounds, anchorType) => {
-      const {
-          x1: x1,
-          x2: x2,
-          y1: y1,
-          y2: y2
-        } = bounds,
-        rectWidth = Math.abs(x2 - x1),
-        rectHeight = Math.abs(y2 - y1);
-      let anchorX = (x1 + x2) / 2,
-        anchorY = (y1 + y2) / 2,
-        sx = 0,
-        sy = 0;
-      switch (anchorType) {
-        case "top":
-        case "inside-top":
-          sy = -.5;
-          break;
-        case "bottom":
-        case "inside-bottom":
-          sy = .5;
-          break;
-        case "left":
-        case "inside-left":
-          sx = -.5;
-          break;
-        case "right":
-        case "inside-right":
-          sx = .5;
-          break;
-        case "top-right":
-          sx = .5, sy = -.5;
-          break;
-        case "top-left":
-          sx = -.5, sy = -.5;
-          break;
-        case "bottom-right":
-          sx = .5, sy = .5;
-          break;
-        case "bottom-left":
-          sx = -.5, sy = .5;
-      }
-      return anchorX += sx * rectWidth, anchorY += sy * rectHeight, {
-        x: anchorX,
-        y: anchorY
+    function hexToRgb(str) {
+      let r = "",
+        g = "",
+        b = "";
+      const strtIndex = "#" === str[0] ? 1 : 0;
+      for (let i = strtIndex; i < str.length; i++) "#" !== str[i] && (i < strtIndex + 2 ? r += str[i] : i < strtIndex + 4 ? g += str[i] : i < strtIndex + 6 && (b += str[i]));
+      return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
+    }
+
+    function rgbToHex(r, g, b) {
+      return Number((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+
+    function interpolateRgb$1(colorA, colorB) {
+      const redA = colorA.r,
+        redB = colorB.r,
+        greenA = colorA.g,
+        greenB = colorB.g,
+        blueA = colorA.b,
+        blueB = colorB.b,
+        opacityA = colorA.opacity,
+        opacityB = colorB.opacity;
+      return t => {
+        const r = Math.round(redA * (1 - t) + redB * t),
+          g = Math.round(greenA * (1 - t) + greenB * t),
+          b = Math.round(blueA * (1 - t) + blueB * t);
+        return new RGB(r, g, b, opacityA * (1 - t) + opacityB * t);
       };
-    };
+    }
+
+    var ColorUtil = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Color: Color,
+        DEFAULT_COLORS: DEFAULT_COLORS,
+        RGB: RGB,
+        hexToRgb: hexToRgb,
+        hslToRgb: hslToRgb,
+        interpolateRgb: interpolateRgb$1,
+        rgbToHex: rgbToHex,
+        rgbToHsl: rgbToHsl
+    });
 
     function normalizePadding$1(padding) {
       if (isValidNumber$1(padding)) return [padding, padding, padding, padding];
@@ -7849,7 +7897,7 @@
         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);
@@ -8058,19 +8106,25 @@
     }
     const addArcToBezierPath$1 = (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)];
@@ -12374,8 +12428,9 @@
         }), this.clipRange && (out.clipRange = this.clipRange + (1 - this.clipRange) * ratio), this.segmentsCache && this.to.segments) {
           let start = 0;
           out.segments = this.to.segments.map((segment, index) => {
-            const points = this.points.slice(start, this.segmentsCache[start]);
-            return start += this.segmentsCache[start], Object.assign(Object.assign({}, segment), {
+            const end = start + this.segmentsCache[index],
+              points = this.points.slice(start, end);
+            return start = end, Object.assign(Object.assign({}, segment), {
               points: points
             });
           });
@@ -13802,6 +13857,9 @@
       get AABBBounds() {
         return this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode);
       }
+      get OBBBounds() {
+        return this.tryUpdateOBBBounds();
+      }
       get globalAABBBounds() {
         return this.tryUpdateGlobalAABBBounds();
       }
@@ -13814,7 +13872,7 @@
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
-        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
+        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
       }
       setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -13848,13 +13906,22 @@
         const bounds = this.doUpdateAABBBounds(full);
         return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
       }
+      tryUpdateOBBBounds() {
+        if (this._OBBBounds || (this._OBBBounds = new OBBBounds()), this.tryUpdateAABBBounds(), this.updateOBBBoundsStamp === this.updateAABBBoundsStamp) return this._OBBBounds;
+        if (this.updateOBBBoundsStamp = this.updateAABBBoundsStamp, !this.valid) return this._OBBBounds.clear(), this._OBBBounds;
+        return this.doUpdateOBBBounds();
+      }
       combindShadowAABBBounds(bounds) {
         if (this.shadowRoot) {
           const b = this.shadowRoot.AABBBounds.clone();
           bounds.union(b);
         }
       }
+      doUpdateOBBBounds() {
+        return this._OBBBounds;
+      }
       doUpdateAABBBounds(full) {
+        this.updateAABBBoundsStamp++;
         const graphicTheme = this.getGraphicTheme();
         this._AABBBounds.clear();
         const attribute = this.attribute,
@@ -14831,6 +14898,7 @@
         }), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, this), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
       }
       doUpdateAABBBounds() {
+        this.updateAABBBoundsStamp++;
         const bounds = super.doUpdateAABBBounds();
         return this.parent && this.parent.addChildUpdateBoundTag(), this._emitCustomEvent("AAABBBoundsChange"), bounds;
       }
@@ -15825,6 +15893,7 @@
       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
@@ -18654,7 +18723,10 @@
       }
       beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
         const baseGraphic = graphic.baseGraphic;
-        if (!baseGraphic.stage) {
+        let intree = !!baseGraphic.stage,
+          _g = baseGraphic.parent;
+        for (; intree && _g && _g.stage !== _g;) intree = !!_g.stage, _g = _g.parent;
+        if (!intree) {
           const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
           if (interactiveLayer) {
             this.getShadowRoot(interactiveLayer).removeChild(graphic);
@@ -18957,13 +19029,23 @@
         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;
@@ -18993,6 +19075,35 @@
       getGraphicTheme() {
         return getTheme$1(this).text;
       }
+      doUpdateOBBBounds() {
+        const graphicTheme = this.getGraphicTheme();
+        this._OBBBounds.clear();
+        const attribute = this.attribute,
+          {
+            angle = graphicTheme.angle
+          } = attribute;
+        if (!angle) {
+          const b = this.AABBBounds;
+          return this._OBBBounds.setValue(b.x1, b.y1, b.x2, b.y2), this._OBBBounds;
+        }
+        this.obbText || (this.obbText = new Text({})), this.obbText.setAttributes(Object.assign(Object.assign({}, attribute), {
+          angle: 0
+        }));
+        const bounds1 = this.obbText.AABBBounds,
+          {
+            x: x,
+            y: y
+          } = attribute,
+          boundsCenter = {
+            x: (bounds1.x1 + bounds1.x2) / 2,
+            y: (bounds1.y1 + bounds1.y2) / 2
+          },
+          center = rotatePoint(boundsCenter, angle, {
+            x: x,
+            y: y
+          });
+        return this._OBBBounds.copy(bounds1), this._OBBBounds.translate(center.x - boundsCenter.x, center.y - boundsCenter.y), this._OBBBounds.angle = angle, this._OBBBounds;
+      }
       updateAABBBounds(attribute, textTheme, aabbBounds) {
         const {
           text = textTheme.text
@@ -20309,7 +20420,7 @@
         }), aabbBounds;
       }
       doUpdateAABBBounds() {
-        this._AABBBounds.clear();
+        this.updateAABBBoundsStamp++, this._AABBBounds.clear();
         const bounds = this.updateAABBBounds(this.attribute, this.getGraphicTheme(), this._AABBBounds);
         return this.clearUpdateBoundTag(), bounds;
       }
@@ -20732,10 +20843,22 @@
       }
       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;
@@ -20960,6 +21083,21 @@
       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,
@@ -21445,13 +21583,14 @@
         return super.needUpdateTag(key, ARC_UPDATE_TAG_KEY);
       }
       toCustomPath() {
+        var _a, _b, _c, _d;
         const attribute = this.attribute,
           {
             startAngle: startAngle,
             endAngle: endAngle
           } = this.getParsedAngle();
-        let innerRadius = attribute.innerRadius - (attribute.innerPadding || 0),
-          outerRadius = attribute.outerRadius - (attribute.outerPadding || 0);
+        let innerRadius = (null !== (_a = attribute.innerRadius) && void 0 !== _a ? _a : 0) - (null !== (_b = attribute.innerPadding) && void 0 !== _b ? _b : 0),
+          outerRadius = (null !== (_c = attribute.outerRadius) && void 0 !== _c ? _c : 0) - (null !== (_d = attribute.outerPadding) && void 0 !== _d ? _d : 0);
         const deltaAngle = abs$1(endAngle - startAngle),
           clockwise = endAngle > startAngle;
         if (outerRadius < innerRadius) {
@@ -30031,7 +30170,7 @@
           const {
             width: width,
             height: height
-          } = this._getSliderRenderBounds();
+          } = this.getSliderRenderBounds();
           return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
         }, this._onSliderPointerMove = e => {
           const {
@@ -30119,7 +30258,7 @@
             height: height
           }, railStyle), "rect");
         this._rail = rail;
-        const sliderRenderBounds = this._getSliderRenderBounds(),
+        const sliderRenderBounds = this.getSliderRenderBounds(),
           sliderPos = this._getSliderPos(clampRange$1(range, limitRange[0], limitRange[1])),
           sliderSize = sliderPos[1] - sliderPos[0];
         let sliderAttribute;
@@ -30147,7 +30286,7 @@
           y: containerAABBBounds.y1
         };
       }
-      _getSliderRenderBounds() {
+      getSliderRenderBounds() {
         if (this._sliderRenderBounds) return this._sliderRenderBounds;
         const {
             width: width,
@@ -30174,7 +30313,7 @@
           const {
             width: width,
             height: height
-          } = this._getSliderRenderBounds();
+          } = this.getSliderRenderBounds();
           return "horizontal" === direction ? height : width;
         }
         return 0;
@@ -30188,7 +30327,7 @@
             height: height,
             x1: x1,
             y1: y1
-          } = this._getSliderRenderBounds();
+          } = this.getSliderRenderBounds();
         return "horizontal" === direction ? [width * range[0] + x1, width * range[1] + x1] : [height * range[0] + y1, height * range[1] + y1];
       }
       _getScrollRange() {
@@ -30203,7 +30342,7 @@
             height: height,
             x1: x1,
             y1: y1
-          } = this._getSliderRenderBounds(),
+          } = this.getSliderRenderBounds(),
           sliderSize = this._sliderSize;
         return "horizontal" === direction ? clampRange$1([x1 + min * width, x1 + max * width], x1, width - sliderSize) : clampRange$1([y1 + min * height, y1 + max * height], y1, height - sliderSize);
       }
@@ -30379,7 +30518,7 @@
     }
     function richTextAttributeTransform(attributes) {
       var _a, _b;
-      return attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.maxWidth = attributes.maxLineWidth, attributes.textConfig = attributes.text.text || attributes.text, attributes;
+      return isValid$1(attributes.maxLineWidth) && (attributes.maxWidth = attributes.maxLineWidth, delete attributes.maxLineWidth), attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.textConfig = attributes.text.text || attributes.text, attributes;
     }
     function htmlAttributeTransform(attributes) {
       const {
@@ -30496,6 +30635,8 @@
             zIndex: 1
           }, "group");
         let symbol,
+          tagX = -parsedPadding[3],
+          tagY = -parsedPadding[0],
           tagWidth = parsedPadding[1] + parsedPadding[3],
           tagHeight = parsedPadding[0] + parsedPadding[2],
           textX = 0,
@@ -30530,25 +30671,7 @@
             x: textX,
             y: 0
           });
-          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext");
-          const {
-              visible: bgVisible
-            } = panel,
-            backgroundStyle = __rest$d(panel, ["visible"]);
-          if (visible && isBoolean$1(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(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
-              const customShape = backgroundStyle.customShape;
-              bgRect.pathProxy = attrs => customShape(textShape.attribute, attrs, new CustomPath2D());
-            }
-            this._bgRect = bgRect;
-          }
+          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext"), 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$2(text) && "type" in text && "text" === text.type ? text.text : text,
@@ -30570,11 +30693,9 @@
             textAlign: textAlign,
             textBaseline: textBaseline
           } = textStyle;
-          (isValid$1(minWidth) || isValid$1(maxWidth)) && (isValid$1(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$1(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2])));
-          let x = 0,
-            y = 0,
-            flag = 0;
-          "left" === textAlign || "start" === textAlign ? flag = 1 : "right" === textAlign || "end" === textAlign ? flag = -1 : "center" === textAlign && (flag = 0), flag ? flag < 0 ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : flag > 0 && group.setAttribute("x", parsedPadding[3]) : (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2));
+          (isValid$1(minWidth) || isValid$1(maxWidth)) && (isValid$1(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$1(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2]))), tagX = 0, tagY = 0;
+          let flag = 0;
+          "left" === textAlign || "start" === textAlign ? flag = 1 : "right" === textAlign || "end" === textAlign ? flag = -1 : "center" === textAlign && (flag = 0), flag ? flag < 0 ? (tagX -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : flag > 0 && group.setAttribute("x", parsedPadding[3]) : (tagX -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2));
           const shouldRight = "right" === containerTextAlign || "end" === containerTextAlign,
             shouldLeft = "left" === containerTextAlign || "start" === containerTextAlign;
           if ((containerTextAlign ? "center" === containerTextAlign : textAlwaysCenter) && flag) {
@@ -30618,25 +30739,25 @@
               });
             }
           }
-          "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
-          const {
-              visible: bgVisible
-            } = panel,
-            backgroundStyle = __rest$d(panel, ["visible"]);
-          if (visible && isBoolean$1(bgVisible)) {
-            const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
-              visible: bgVisible && !!text,
-              x: x,
-              y: y,
-              width: tagWidth,
-              height: tagHeight
-            }), "rect");
-            if (isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
-              const customShape = backgroundStyle.customShape;
-              bgRect.pathProxy = attrs => customShape(textShape.attribute, attrs, new CustomPath2D());
-            }
-            this._bgRect = bgRect;
+          "middle" === textBaseline ? (tagY -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (tagY -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
+        }
+        const {
+            visible: bgVisible
+          } = panel,
+          backgroundStyle = __rest$d(panel, ["visible"]);
+        if (visible && isBoolean$1(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(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
+            const customShape = backgroundStyle.customShape;
+            bgRect.pathProxy = attrs => customShape(this, attrs, new CustomPath2D());
           }
+          this._bgRect = bgRect;
         }
         this._textShape = textShape, this._symbol = symbol, this.resetStates();
       }
@@ -31870,7 +31991,10 @@
             } = text.attribute;
           if (line.customShape) {
             const customShape = line.customShape;
-            lineGraphic.pathProxy = attrs => customShape(text.attribute, attrs, new CustomPath2D());
+            lineGraphic.pathProxy = attrs => customShape({
+              text: text,
+              baseMark: baseMark
+            }, attrs, new CustomPath2D());
           }
           return baseMark && baseMark.attribute.fill && lineGraphic.setAttribute("stroke", baseMark.attribute.fill), this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(lineGraphic), lineGraphic;
         }
@@ -32294,45 +32418,33 @@
           const baseMark = this.getRelatedGraphic(label.attribute),
             backgroundColor = baseMark.attribute.fill,
             foregroundColor = label.attribute.fill,
-            baseColor = backgroundColor,
             invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode),
             similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
-          if (outsideEnable) {
-            const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
+          if (outsideEnable || this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
+            const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
             if (fill && label.setAttributes({
               fill: fill
             }), 0 === label.attribute.lineWidth) continue;
-            const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
+            const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
             stroke && label.setAttributes({
               stroke: stroke
             });
-          } else {
-            if (this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
-              const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-              if (fill && label.setAttributes({
-                fill: fill
-              }), 0 === label.attribute.lineWidth) continue;
-              const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-              stroke && label.setAttributes({
-                stroke: stroke
-              });
-            } else {
-              if (0 === label.attribute.lineWidth) continue;
-              if (label.attribute.stroke) {
-                label.setAttributes({
-                  fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
-                });
-                continue;
-              }
-              const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-              fill && label.setAttributes({
-                fill: fill
-              });
-              const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-              stroke && label.setAttributes({
-                stroke: stroke
+          } else if (label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds)) {
+            if (0 === label.attribute.lineWidth) continue;
+            if (label.attribute.stroke) {
+              label.setAttributes({
+                fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
               });
+              continue;
             }
+            const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
+            fill && label.setAttributes({
+              fill: fill
+            });
+            const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
+            stroke && label.setAttributes({
+              stroke: stroke
+            });
           }
         }
       }
@@ -32531,7 +32643,7 @@
     };
     class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
-        this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0, this.labelLimit = 0;
+        this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0;
       }
       getLabelBounds() {
         return this.labelPosition && this.labelSize ? {
@@ -32567,7 +32679,7 @@
         };
       }
       _layout(texts) {
-        var _a;
+        var _a, _b, _c;
         if (!texts || !texts.length) return;
         const labels = super._layout(texts),
           textBoundsArray = labels.map(label => this.getGraphicBounds(label)),
@@ -32596,11 +32708,10 @@
               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] : void 0,
               line: basedArc.labelLine
             };
-            "richtext" === labels[i].type && (labelAttribute.width = basedArc.labelLimit), labels[i].setAttributes(labelAttribute);
+            "richtext" === labels[i].type ? labelAttribute.width = null !== (_b = basedArc.labelLimit) && void 0 !== _b ? _b : labels[i].attribute.width : labelAttribute.maxLineWidth = null !== (_c = basedArc.labelLimit) && void 0 !== _c ? _c : labels[i].attribute.maxLineWidth, labels[i].setAttributes(labelAttribute);
           }
         }
         return labels;
@@ -32766,7 +32877,7 @@
         const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
           flag = isQuadrantLeft(quadrant) ? -1 : 1;
         let cx = 0,
-          limit = (flag > 0 ? plotLayout_x2 - pointB.x : pointB.x - plotLayout_x1) - this._line2MinLength - spaceWidth;
+          limit = (flag > 0 ? plotLayout_x2 - pointB.x + this._alignOffset : pointB.x - plotLayout_x1 - this._alignOffset) - this._line2MinLength - spaceWidth;
         "labelLine" === labelLayoutAlign && (cx = (radius + line1MinLength + this._line2MinLength) * flag + center.x, limit = (flag > 0 ? plotLayout_x2 - cx : cx - plotLayout_x1) - spaceWidth);
         const text = this._getFormatLabelText(arc.refDatum, limit);
         arc.labelText = text;
@@ -32780,12 +32891,14 @@
           default:
             cx = pointB.x + flag * this._line2MinLength;
         }
-        labelWidth = Math.max(this._ellipsisWidth, labelWidth), arc.labelLimit = labelWidth, arc.pointC = {
+        labelWidth = Math.max(this._ellipsisWidth, labelWidth);
+        const needAdjustLimit = labelWidth < arc.labelSize.width - 1;
+        arc.labelLimit = needAdjustLimit ? labelWidth : null, arc.pointC = {
           x: cx,
           y: labelPosition.y
         };
         const align = this._computeAlign(arc, attribute),
-          targetCenterOffset = getAlignOffset(align) * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+          targetCenterOffset = getAlignOffset(align) * (needAdjustLimit ? labelWidth : arc.labelSize.width);
         "edge" === labelLayoutAlign ? (labelPosition.x = (flag > 0 ? plotLayout_x2 : plotLayout_x1) - flag * targetCenterOffset + flag * this._alignOffset, arc.pointC.x += flag * this._alignOffset) : labelPosition.x = cx + flag * (this._alignOffset + spaceWidth + targetCenterOffset);
       }
       _computeAlign(arc, attribute) {
@@ -33485,34 +33598,10 @@
       zIndex: 1
     };
 
-    const clampRadian = function () {
-      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      if (angle < 0) for (; angle < 0;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
-      return angle;
-    };
-    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: text
-        }, style)),
-        width = labelBounds.width(),
-        height = labelBounds.height(),
-        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
-        PI_3_4 = 3 * Math.PI / 4,
-        PI_1_4 = Math.PI / 4,
-        PI_1_2 = Math.PI / 2,
-        baseX = tickPosition.x;
-      let dx = 0;
-      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
-      const x = baseX - dx,
-        baseY = tickPosition.y;
-      let dy = 0;
-      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
+    function getCircleLabelPosition(tickPosition, tickVector) {
       return {
-        x: x,
-        y: baseY - dy
+        x: tickPosition.x + tickVector[0],
+        y: tickPosition.y + tickVector[1]
       };
     }
     function getAxisBreakSymbolAttrs() {
@@ -33555,13 +33644,13 @@
         baseline: 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),
         labelPoint = getVerticalCoord(point, getCircleVerticalVector(labelOffset, point, center, inside));
-      return getCircleLabelPosition(labelPoint, getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside), text, style);
+      return getCircleLabelPosition(labelPoint, getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside));
     }
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
       const points = [],
@@ -33753,10 +33842,6 @@
       getVerticalCoord(point, offset, inside) {
         return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
       }
-      getTextAlign(vector) {
-        let align = "center";
-        return isNumberClose(vector[0], 0) ? isNumberClose(vector[1], 0) ? Object.is(vector[1], -0) ? align = "start" : Object.is(vector[0], -0) && (align = "end") : align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
-      }
       getTickLineItems() {
         const {
             tick: tick
@@ -33900,49 +33985,6 @@
       }
     }
 
-    function rotate(x, y, deg, originX, originY) {
-      return {
-        x: (x - originX) * Math.cos(deg) + (y - originY) * Math.sin(deg) + originX,
-        y: (x - originX) * Math.sin(deg) + (originY - y) * Math.cos(deg) + originY
-      };
-    }
-    function genNormalBounds(item) {
-      const bounds = item.AABBBounds;
-      return {
-        x1: bounds.x1,
-        x2: bounds.x2,
-        y1: bounds.y1,
-        y2: bounds.y2,
-        centerX: item.attribute.x,
-        centerY: item.attribute.y,
-        angle: item.attribute.angle
-      };
-    }
-    function genRotateBounds(items) {
-      items.forEach(item => {
-        if (item.rotatedBounds || !item.attribute.angle) return;
-        const bounds = genNormalBounds(item),
-          rotatedCenter = rotate(bounds.centerX, bounds.centerY, bounds.angle, item.attribute.x, item.attribute.y),
-          deltaX = rotatedCenter.x - bounds.centerX,
-          deltaY = rotatedCenter.y - bounds.centerY;
-        bounds.x1 += deltaX, bounds.x2 += deltaX, bounds.y1 += deltaY, bounds.y2 += deltaY, bounds.centerX += deltaX, bounds.centerY += deltaY, item.rotatedBounds = bounds;
-      });
-    }
-    function itemIntersect(item1, item2) {
-      return isRectIntersect(item1.AABBBounds, item2.AABBBounds, !1) && (!item1.rotatedBounds || !item2.rotatedBounds || isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, !0));
-    }
-    const DELTA_ANGLE = Math.sin(Math.PI / 10);
-    function isAngleVertical(angle) {
-      const hasAngle = !isNil$1(angle) && 0 !== angle,
-        cos = hasAngle ? Math.cos(angle) : 1;
-      return hasAngle && Math.abs(cos) <= DELTA_ANGLE;
-    }
-    function isAngleHorizontal(angle) {
-      const hasAngle = !isNil$1(angle) && 0 !== angle,
-        sin = hasAngle ? Math.sin(angle) : 0;
-      return !hasAngle || Math.abs(sin) <= DELTA_ANGLE;
-    }
-
     const methods$2 = {
       parity: function (items) {
         return items.filter((item, i) => i % 2 ? item.setAttribute("opacity", 0) : 1);
@@ -33953,16 +33995,16 @@
       }
     };
     function intersect$1(textA, textB, sep) {
-      const a = textA.AABBBounds,
-        b = textB.AABBBounds;
-      return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2) && (!textA.rotatedBounds || !textB.rotatedBounds || sep > Math.max(textB.rotatedBounds.x1 - textA.rotatedBounds.x2, textA.rotatedBounds.x1 - textB.rotatedBounds.x2, textB.rotatedBounds.y1 - textA.rotatedBounds.y2, textA.rotatedBounds.y1 - textB.rotatedBounds.y2));
+      let a = textA.OBBBounds,
+        b = textB.OBBBounds;
+      return a && b && !a.empty() && !b.empty() ? a.intersects(b) : (a = textA.AABBBounds, b = textB.AABBBounds, sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2));
     }
     function hasOverlap$2(items, pad) {
       for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (intersect$1(a, b = items[i], pad)) return !0;
     }
     function hasBounds(item) {
-      const b = item.AABBBounds;
-      return b.width() > 1 && b.height() > 1;
+      let bounds;
+      return bounds = item.OBBBounds.empty() ? item.AABBBounds : item.OBBBounds, bounds.width() > 1 && bounds.height() > 1;
     }
     function reset$1(items) {
       return items.forEach(item => item.setAttribute("opacity", 1)), items;
@@ -33972,7 +34014,7 @@
       const source = labels.filter(hasBounds);
       if (isEmpty(source)) return;
       let items;
-      items = reset$1(source), genRotateBounds(items);
+      items = reset$1(source);
       const {
           method = "parity",
           separation: sep = 0
@@ -33998,6 +34040,50 @@
       });
     }
 
+    function genNormalBounds(item) {
+      const bounds = item.AABBBounds;
+      return {
+        x1: bounds.x1,
+        x2: bounds.x2,
+        y1: bounds.y1,
+        y2: bounds.y2,
+        centerX: item.attribute.x,
+        centerY: item.attribute.y,
+        angle: item.attribute.angle
+      };
+    }
+    function genRotateBounds(items) {
+      items.forEach(item => {
+        if (item.rotatedBounds || !item.attribute.angle) return;
+        const bounds = genNormalBounds(item),
+          rotatedCenter = rotatePoint({
+            x: item.attribute.x,
+            y: item.attribute.y
+          }, bounds.angle, {
+            x: bounds.centerX,
+            y: bounds.centerY
+          }),
+          deltaX = rotatedCenter.x - bounds.centerX,
+          deltaY = rotatedCenter.y - bounds.centerY;
+        bounds.x1 += deltaX, bounds.x2 += deltaX, bounds.y1 += deltaY, bounds.y2 += deltaY, bounds.centerX += deltaX, bounds.centerY += deltaY, item.rotatedBounds = bounds;
+      });
+    }
+    function itemIntersect(item1, item2) {
+      var _a, _b;
+      return (null === (_a = item1.OBBBounds) || void 0 === _a ? void 0 : _a.empty()) || (null === (_b = item2.OBBBounds) || void 0 === _b ? void 0 : _b.empty()) ? isRectIntersect(item1.AABBBounds, item2.AABBBounds, !1) && (!item1.rotatedBounds || !item2.rotatedBounds || isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, !0)) : item1.OBBBounds.intersects(item2.OBBBounds);
+    }
+    const DELTA_ANGLE = Math.sin(Math.PI / 10);
+    function isAngleVertical(angle) {
+      const hasAngle = !isNil$1(angle) && 0 !== angle,
+        cos = hasAngle ? Math.cos(angle) : 1;
+      return hasAngle && Math.abs(cos) <= DELTA_ANGLE;
+    }
+    function isAngleHorizontal(angle) {
+      const hasAngle = !isNil$1(angle) && 0 !== angle,
+        sin = hasAngle ? Math.sin(angle) : 0;
+      return !hasAngle || Math.abs(sin) <= DELTA_ANGLE;
+    }
+
     function autoRotate(items, rotateConfig) {
       if (isEmpty(items)) return;
       const {
@@ -34360,6 +34446,10 @@
         const axisLineGroup = new Segment(lineAttrs);
         axisLineGroup.name = AXIS_ELEMENT_NAME.line, axisLineGroup.id = this._getNodeId("line"), container.add(axisLineGroup);
       }
+      getTextAlign(vector) {
+        let align = "center";
+        return isNumberClose(vector[0], 0) ? isNumberClose(vector[1], 0) ? Object.is(vector[1], -0) ? align = "start" : Object.is(vector[0], -0) && (align = "end") : align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
+      }
       getTitleAttribute() {
         var _a, _b, _c;
         const _d = this.attribute.title,
@@ -34684,6 +34774,70 @@
       }
     }
 
+    function findSiblingLabels(labels, selfIndex) {
+      const len = labels.length;
+      return {
+        prevLabel: selfIndex >= 1 ? labels[selfIndex - 1] : labels[len - 1],
+        nextLabel: selfIndex < len - 1 ? labels[selfIndex + 1] : labels[0]
+      };
+    }
+    function adjustMaxLineWidth(label, maxLineWidth, ellipsis) {
+      var _a;
+      label.setAttributes({
+        maxLineWidth: maxLineWidth,
+        ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis
+      });
+    }
+    function adjustMaxHeight(labels, selfIndex, bounds) {
+      const siblings = [];
+      if (labels.length >= 3) {
+        const {
+          prevLabel: prevLabel,
+          nextLabel: nextLabel
+        } = findSiblingLabels(labels, selfIndex);
+        siblings.push(prevLabel, nextLabel);
+      } else 2 === labels.length && siblings.push(labels[0 === selfIndex ? 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));
+      }), heightLimit > 0 && label.setAttributes({
+        whiteSpace: "normal",
+        heightLimit: heightLimit
+      });
+    }
+    function circleAutoLimit(labels, config) {
+      const {
+        ellipsis: ellipsis,
+        inside: inside,
+        bounds: bounds,
+        autoWrap: autoWrap,
+        center: center
+      } = config;
+      inside || labels.forEach((label, index) => {
+        const {
+            x: x,
+            y: y
+          } = label.attribute,
+          b = label.AABBBounds;
+        if (isNumberClose(x, center.x)) {
+          if (y > bounds.y2 || y < bounds.y1) return void adjustMaxLineWidth(label, 0, ellipsis);
+          const boxWidth = bounds.x2 - bounds.x1;
+          if (labels.length >= 3) {
+            const {
+              prevLabel: prevLabel,
+              nextLabel: nextLabel
+            } = findSiblingLabels(labels, index);
+            let leftX = prevLabel.attribute.x,
+              rightX = nextLabel.attribute.x;
+            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));
+            label.AABBBounds.width() > maxWidth && adjustMaxLineWidth(label, maxWidth, ellipsis);
+          } else label.AABBBounds.width() > boxWidth && adjustMaxLineWidth(label, boxWidth, ellipsis);
+        } else x > center.x && b.x2 > bounds.x2 ? (adjustMaxLineWidth(label, bounds.x2 - x, ellipsis), autoWrap && adjustMaxHeight(labels, index, bounds)) : x < center.x && b.x1 < bounds.x1 && (adjustMaxLineWidth(label, x - bounds.x1, ellipsis), autoWrap && adjustMaxHeight(labels, index, bounds));
+      });
+    }
+
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -34815,21 +34969,71 @@
         }
         return subTickLineItems;
       }
-      getTextBaseline(vector) {
-        let base = "middle";
-        return isNumberClose(vector[1], 0) ? base = "middle" : vector[1] > 0 && vector[1] > Math.abs(vector[0]) ? base = "top" : vector[1] < 0 && Math.abs(vector[1]) > Math.abs(vector[0]) && (base = "bottom"), base;
-      }
       beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
-      handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+      handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        if (isEmpty(labelShapes)) return;
+        const {
+            inside: inside,
+            radius: radius,
+            center: center,
+            width: width,
+            height: height,
+            label: label,
+            orient: orient
+          } = this.attribute,
+          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
+          },
+          {
+            layoutFunc: layoutFunc,
+            autoLimit: autoLimit,
+            limitEllipsis: limitEllipsis,
+            autoHide: autoHide$1,
+            autoHideMethod: autoHideMethod,
+            autoHideSeparation: autoHideSeparation,
+            autoWrap: autoWrap
+          } = label;
+        isFunction$1(layoutFunc) ? layoutFunc(labelShapes, labelData, layer, this) : ((autoLimit || autoWrap) && circleAutoLimit(labelShapes, {
+          inside: inside,
+          autoWrap: autoWrap,
+          bounds: bounds,
+          ellipsis: limitEllipsis,
+          center: center
+        }), autoHide$1 && autoHide(labelShapes, {
+          orient: orient,
+          method: autoHideMethod,
+          separation: autoHideSeparation
+        }));
+      }
       afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+      getTextBaseline(vector) {
+        return Math.abs(vector[1] / vector[0]) < .3 ? "middle" : vector[1] < 0 ? "bottom" : vector[1] > 0 ? "top" : "middle";
+      }
       getLabelAlign(vector, inside, angle) {
-        return {
+        return isNumberClose(vector[0], 0) ? {
+          textAlign: "center",
+          textBaseline: vector[1] > 0 ? "top" : "bottom"
+        } : vector[0] < 0 ? {
+          textAlign: "right",
+          textBaseline: this.getTextBaseline(vector)
+        } : vector[0] > 0 ? {
+          textAlign: "left",
+          textBaseline: this.getTextBaseline(vector)
+        } : {
           textAlign: "center",
           textBaseline: "middle"
         };
       }
       getLabelPosition(point, vector, text, style) {
-        return getCircleLabelPosition(point, vector, text, style);
+        return point;
       }
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(CircleAxis, CircleAxisMixin);
@@ -36173,32 +36377,33 @@
         } = op,
         radius = null == getRadius ? void 0 : getRadius(),
         labelAngle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0,
-        textMeasure = initTextMeasure$1(labelStyle),
-        labelBoundsList = domain.map(v => {
-          var _a, _b;
-          const str = labelFormatter ? labelFormatter(v) : `${v}`,
-            {
-              width: width,
-              height: height
-            } = textMeasure.quickMeasure(str),
-            textWidth = Math.max(width, MIN_TICK_GAP),
-            textHeight = Math.max(height, MIN_TICK_GAP),
-            angle = scale.scale(v);
-          let textX = 0,
-            textY = 0;
-          const orient_align = null !== (_a = labelStyle.textAlign) && void 0 !== _a ? _a : "center",
-            orient_baseline = null !== (_b = labelStyle.textBaseline) && void 0 !== _b ? _b : "middle",
-            {
-              x: x,
-              y: y
-            } = getPolarAngleLabelPosition(angle, {
-              x: 0,
-              y: 0
-            }, radius, labelOffset, inside, str, labelStyle);
-          textX = x + ("right" === orient_align ? -textWidth : "center" === orient_align ? -textWidth / 2 : 0), textY = y + ("bottom" === orient_baseline ? -textHeight : "middle" === orient_baseline ? -textHeight / 2 : 0);
-          return new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight).rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
-        });
-      return labelBoundsList;
+        textMeasure = initTextMeasure$1(labelStyle);
+      return domain.map(v => {
+        const str = labelFormatter ? labelFormatter(v) : `${v}`,
+          {
+            width: width,
+            height: height
+          } = textMeasure.quickMeasure(str),
+          textWidth = Math.max(width, MIN_TICK_GAP),
+          textHeight = Math.max(height, MIN_TICK_GAP),
+          angle = scale.scale(v),
+          center = {
+            x: 0,
+            y: 0
+          };
+        let textX = 0,
+          textY = 0;
+        const orient = {
+            align: labelStyle.textAlign,
+            baseline: labelStyle.textBaseline
+          },
+          {
+            x: x,
+            y: y
+          } = getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside);
+        orient.align || (isNumberClose(x, center.x) ? orient.baseline || (orient.baseline = y > center.y ? "top" : "bottom") : x > center.x ? orient.align = "left" : x < center.x && (orient.align = "right")), textX = x + ("right" === orient.align ? -textWidth : "left" === orient.align ? 0 : -textWidth / 2), textY = y + ("bottom" === orient.baseline ? -textHeight : "top" === orient.baseline ? 0 : -textHeight / 2);
+        return new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight).rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
+      });
     };
     const polarAngleAxisDiscreteTicks = (scale, op) => {
       const {
@@ -36389,10 +36594,19 @@
           shape.name = `${name}-line`, shape.id = this._getNodeId(`${name}-path-${id}`), container.add(shape);
         }), items.length > 1 && alternateColor) {
           const colors = isArray$1(alternateColor) ? alternateColor : [alternateColor, "transparent"],
-            getColor = index => colors[index % colors.length];
-          for (let index = 0; index < items.length - 1; index++) {
-            const [prev, curr] = [items[index].points, items[index + 1].points],
-              path = getRegionPath(prev, curr, gridAttrs),
+            getColor = index => colors[index % colors.length],
+            originalItems = this.attribute.items,
+            firstItem = originalItems[0],
+            lastItem = originalItems[originalItems.length - 1],
+            noZero = !isNumberClose(firstItem.value, 0) && !isNumberClose(lastItem.value, 0),
+            noOne = !isNumberClose(firstItem.value, 1) && !isNumberClose(lastItem.value, 1),
+            allPoints = [],
+            isDesc = firstItem.value > lastItem.value;
+          (isDesc && noOne || !isDesc && noZero) && allPoints.push(this.getGridPointsByValue(isDesc ? 1 : 0)), items.forEach(item => {
+            allPoints.push(item.points);
+          }), (isDesc && noZero || !isDesc && noOne) && allPoints.push(this.getGridPointsByValue(isDesc ? 0 : 1));
+          for (let index = 0; index < allPoints.length - 1; index++) {
+            const path = getRegionPath(allPoints[index], allPoints[index + 1], gridAttrs),
               shape = graphicCreator.path({
                 path: path,
                 fill: getColor(index)
@@ -36469,6 +36683,10 @@
         }
         return gridPoints;
       }
+      getGridPointsByValue(value) {
+        const basePoint = this.getTickCoord(value);
+        return this._getGridPoint(this.attribute.type, basePoint);
+      }
       getGridAttribute(isSubGrid) {
         const {
             type: gridType,
@@ -36482,7 +36700,7 @@
           const subGridItems = [],
             {
               count: subCount = 4
-            } = this.attribute.subGrid || {};
+            } = gridAttribute;
           if (this.data.length >= 2) {
             const points = this._getPointsOfSubGrid(tickSegment, alignWithLabel);
             for (let i = 0; i < points.length - 1; i++) {
@@ -36490,22 +36708,21 @@
                 next = points[i + 1];
               subGridItems.push({
                 id: `sub-${i}-0`,
-                points: this._getGridPoint(gridType, this.getTickCoord(pre.value)),
+                points: this.getGridPointsByValue(pre.value),
                 datum: {}
               });
               for (let j = 0; j < subCount; j++) {
                 const percent = (j + 1) / (subCount + 1),
-                  value = (1 - percent) * pre.value + percent * next.value,
-                  point = this.getTickCoord(value);
+                  value = (1 - percent) * pre.value + percent * next.value;
                 subGridItems.push({
                   id: `sub-${i}-${j + 1}`,
-                  points: this._getGridPoint(gridType, point),
+                  points: this.getGridPointsByValue(value),
                   datum: {}
                 });
               }
               i === points.length - 2 && subGridItems.push({
                 id: `sub-${i}-${subCount + 1}`,
-                points: this._getGridPoint(gridType, this.getTickCoord(next.value)),
+                points: this.getGridPointsByValue(next.value),
                 datum: {}
               });
             }
@@ -36551,6 +36768,14 @@
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BaseGrid.defaultAttributes, attributes), options);
       }
+      getGridPointsByValue(value) {
+        const basePoint = this.getTickCoord(value),
+          {
+            radius: radius,
+            innerRadius = 0
+          } = this.attribute;
+        return [basePoint, this.getVerticalCoord(basePoint, radius - innerRadius, !0)];
+      }
       getGridAttribute(isSubGrid) {
         let gridAttribute,
           items = [];
@@ -36958,6 +37183,7 @@
         return !1;
       }
       setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const {
             startTextStyle: startTextStyle,
             endTextStyle: endTextStyle
@@ -36997,10 +37223,10 @@
           y: position.y + height / 2
         }, startTextAlignStyle = {
           textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
-          textBaseline: "middle"
+          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
         }, endTextAlignStyle = {
           textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
-          textBaseline: "middle"
+          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
         }) : (startTextPosition = {
           x: position.x + width / 2,
           y: position.y + start * height
@@ -37008,10 +37234,10 @@
           x: position.x + width / 2,
           y: position.y + end * height
         }, startTextAlignStyle = {
-          textAlign: "center",
+          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
           textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
         }, endTextAlignStyle = {
-          textAlign: "center",
+          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
           textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
         }), this._startText = this.maybeAddLabel(this._container, merge$2({}, restStartTextStyle, {
           text: startTextValue,
@@ -39732,11 +39958,11 @@
           focusShape = graphicCreator.symbol(Object.assign(Object.assign({
             x: 0,
             y: -focusSize / 2 - 1,
-            strokeBoundsBuffer: 0
+            strokeBoundsBuffer: 0,
+            boundsPadding: parsedPadding
           }, focusIconStyle), {
             visible: !0,
-            pickMode: "imprecise",
-            boundsPadding: parsedPadding
+            pickMode: "imprecise"
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
         }
         const text = labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label,
@@ -39891,6 +40117,20 @@
             let newPage = value[0] * this._itemContext.totalPage;
             return pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1, newPage;
           } : e => e.detail.current,
+          onScroll = e => {
+            e.preventDefault();
+            const scrollComponent = this._pagerComponent,
+              preScrollRange = scrollComponent.getScrollRange(),
+              {
+                direction: direction
+              } = scrollComponent.attribute,
+              {
+                width: width,
+                height: height
+              } = scrollComponent.getSliderRenderBounds(),
+              currentScrollValue = "vertical" === direction ? e.deltaY / height : e.deltaX / width;
+            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0);
+          },
           onPaging = e => {
             const newPage = pageParser(e);
             if (newPage !== this._itemContext.currentPage) {
@@ -39904,7 +40144,12 @@
               }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
           };
-        this._itemContext.isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
+        if (this._itemContext.isScrollbar) {
+          if (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging), this.attribute.pager.roamScroll) {
+            const THROTTLE_TIME = 50;
+            this.addEventListener("wheel", throttle(onScroll, THROTTLE_TIME));
+          }
+        } else this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging);
       }
       _renderPager() {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
@@ -43515,7 +43760,8 @@
                 discreteLegendPagerTextColor: 'rgb(51, 51, 51)',
                 discreteLegendPagerHandlerColor: 'rgb(47, 69, 84)',
                 discreteLegendPagerHandlerDisableColor: 'rgb(170, 170, 170)',
-                emptyCircleColor: '#e3e5e8'
+                emptyCircleColor: '#e3e5e8',
+                linearProgressTrackColor: '#E7EBED'
             }
         }
     };
@@ -43726,7 +43972,7 @@
         },
         track: {
             style: {
-                fill: '#E7EBED',
+                fill: { type: 'palette', key: 'linearProgressTrackColor' },
                 fillOpacity: 1
             }
         }
@@ -45235,7 +45481,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 discreteLegendPagerTextColor: '#BBBDC3',
                 discreteLegendPagerHandlerColor: '#BBBDC3',
                 discreteLegendPagerHandlerDisableColor: '#55595F',
-                emptyCircleColor: '#bbbdc3'
+                emptyCircleColor: '#bbbdc3',
+                linearProgressTrackColor: '#404349'
             }
         }
     };
@@ -48432,12 +48679,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const NAME_PREFIX = "@";
     const ID_PREFIX = "#";
 
-    function getExtendedEvents(view, event, item, type, source) {
+    function getExtendedEvents(view, event, type, source) {
+      var _a, _b;
       if (source === EVENT_SOURCE_WINDOW) {
         const e = event.changedTouches ? event.changedTouches[0] : event;
         point(e);
       }
-      return event.element = item, event;
+      let element = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey];
+      if (!element && source === EVENT_SOURCE_VIEW) {
+        let target = event.target;
+        const rootGraphic = null === (_b = view.rootMark) || void 0 === _b ? void 0 : _b.graphicItem;
+        for (; (null == target ? void 0 : target.parent) && target.parent !== rootGraphic;) if (target = target.parent, target[BridgeElementKey]) {
+          element = target[BridgeElementKey];
+          break;
+        }
+      }
+      return event.element = element, event;
     }
 
     class Signal extends GrammarBase {
@@ -48723,19 +48980,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }), this.differ.updateToCurrent(), this.needClear = !1);
       }
       evaluateMainTasks(data, parameters) {
-        var _a;
+        var _a, _b;
         if (this.needSkipBeforeLayout() && this.view.getLayoutState() === LayoutState.before) return this;
         const stage = null === (_a = this.view.renderer) || void 0 === _a ? void 0 : _a.stage();
         this.init(stage, parameters);
-        const transformData = this.evaluateTransform(this._getTransformsBeforeJoin(), null != data ? data : DefaultMarkData, parameters);
-        let inputData = (null == transformData ? void 0 : transformData.progressive) ? data : transformData;
-        return this.evaluateGroup(inputData), this.renderContext = this.parseRenderContext(inputData, parameters), this.renderContext.progressive ? (this.differ.reset(), this.elementMap.clear(), this.evaluateProgressive()) : ((null == transformData ? void 0 : transformData.progressive) && (this.renderContext.parameters = parameters, this.renderContext.beforeTransformProgressive = transformData.progressive, inputData = transformData.progressive.output()), this.emit(HOOK_EVENT.BEFORE_MARK_JOIN), this.evaluateJoin(inputData), this.emit(HOOK_EVENT.AFTER_MARK_JOIN), this.emit(HOOK_EVENT.BEFORE_MARK_STATE), this.evaluateState(this.elements, this.spec.state, parameters), this.emit(HOOK_EVENT.AFTER_MARK_STATE), this.emit(HOOK_EVENT.BEFORE_MARK_ENCODE), this.evaluateEncode(this.elements, this._getEncoders(), parameters), this.emit(HOOK_EVENT.AFTER_MARK_ENCODE)), this.emit(HOOK_EVENT.BEFORE_MARK_UPDATE), this.update(this.spec), this.emit(HOOK_EVENT.AFTER_MARK_UPDATE), this;
+        const transformData = this.evaluateTransform(this._getTransformsBeforeJoin(), null != data ? data : DefaultMarkData, parameters),
+          progressiveTransform = null == transformData ? void 0 : transformData.progressive;
+        if (progressiveTransform ? this.renderContext = {
+          large: !1
+        } : (this.evaluateGroup(transformData), this.renderContext = this.parseRenderContext(transformData, parameters)), null === (_b = this.renderContext) || void 0 === _b ? void 0 : _b.progressive) this.differ.reset(), this.elementMap.clear(), this.evaluateProgressive();else {
+          let inputData = null;
+          if (progressiveTransform) {
+            if (this.renderContext.parameters = parameters, this.renderContext.beforeTransformProgressive = transformData.progressive, inputData = transformData.progressive.output(), transformData.progressive.canAnimate && transformData.progressive.unfinished()) return this.update(this.spec), this;
+          } else inputData = transformData;
+          this.emit(HOOK_EVENT.BEFORE_MARK_JOIN), this.evaluateJoin(inputData), this.emit(HOOK_EVENT.AFTER_MARK_JOIN), this.emit(HOOK_EVENT.BEFORE_MARK_STATE), this.evaluateState(this.elements, this.spec.state, parameters), this.emit(HOOK_EVENT.AFTER_MARK_STATE), this.emit(HOOK_EVENT.BEFORE_MARK_ENCODE), this.evaluateEncode(this.elements, this._getEncoders(), parameters), this.emit(HOOK_EVENT.AFTER_MARK_ENCODE);
+        }
+        return this.update(this.spec), this;
       }
       evaluateGroup(data) {
         if (this.markType === GrammarMarkType.group) return;
-        const res = groupData(null != data ? data : DefaultMarkData, this.spec.groupBy, this.spec.groupSort),
-          groupKeys = res.keys;
-        this._groupKeys = groupKeys, this._groupEncodeResult = null, this.differ.setCurrentData(res);
+        const res = groupData(null != data ? data : DefaultMarkData, this.spec.groupBy, this.spec.groupSort);
+        this._groupEncodeResult = null, this._groupedData = res;
       }
       _getTransformsAfterEncodeItems() {
         return this.transforms && this.transforms.filter(entry => "afterEncodeItems" === entry.markPhase);
@@ -48861,12 +49126,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       init(stage, parameters) {
         var _b, _c, _d, _e, _f;
         if (this._delegateEvent || (this._delegateEvent = (event, type) => {
-          var _a;
-          const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey];
-          if ((null == activeElement ? void 0 : activeElement.mark) === this) {
-            const extendedEvt = getExtendedEvents(this.view, event, activeElement, type, EVENT_SOURCE_VIEW);
-            this.emitGrammarEvent(type, extendedEvt, activeElement);
-          }
+          const extendedEvt = getExtendedEvents(this.view, event, type, EVENT_SOURCE_VIEW),
+            activeElement = event.element;
+          (null == activeElement ? void 0 : activeElement.mark) === this && this.emitGrammarEvent(type, extendedEvt, activeElement);
         }, this.initEvent()), null === (_b = this.initAnimate) || void 0 === _b || _b.call(this, this.spec), !this.group) {
           const group = getGrammarOutput(this.spec.group, parameters);
           this.group = group, group && group.appendChild(this);
@@ -48887,7 +49149,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }
       update(spec) {
         var _b;
-        if (this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || null === (_b = this.updateAnimate) || void 0 === _b || _b.call(this, spec), this.markType !== GrammarMarkType.group) {
+        if (this.emit(HOOK_EVENT.BEFORE_MARK_UPDATE), this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || null === (_b = this.updateAnimate) || void 0 === _b || _b.call(this, spec), this.markType !== GrammarMarkType.group) {
           if (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), !isNil$1(spec.clipPath)) {
             const paths = isArray$1(spec.clipPath) ? spec.clipPath : spec.clipPath(this.elements);
             paths && paths.length ? this.graphicItem.setAttribute("path", paths) : this.graphicItem.setAttributes({
@@ -48901,6 +49163,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         } else this.elementMap.forEach(element => {
           element.updateGraphicItem();
         });
+        this.emit(HOOK_EVENT.AFTER_MARK_UPDATE);
       }
       createElement() {
         return new Element$1(this);
@@ -48935,7 +49198,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           enterElements.delete(element);
         });
         const currentData = null != data ? data : DefaultMarkData;
-        isCollectionMark || this.differ.setCurrentData(groupData(currentData, datum => `${groupKeyGetter(datum)}-${keyGetter(datum)}`, void 0)), this.differ.doDiff(), enterElements.forEach(element => {
+        isCollectionMark ? this.differ.setCurrentData(this._groupedData) : this.differ.setCurrentData(groupData(currentData, datum => `${groupKeyGetter(datum)}-${keyGetter(datum)}`, void 0)), this.differ.doDiff(), enterElements.forEach(element => {
           this.elementMap.delete(isCollectionMark ? element.groupKey : `${element.groupKey}-${element.key}`), element.remove(), element.release();
         }), this.elements = elements, sort && this.elements.length >= 2 && this.elements.sort((elementA, elementB) => sort(elementA.getDatum(), elementB.getDatum()));
       }
@@ -48945,9 +49208,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
       }
       evaluateGroupEncode(elements, groupEncode, parameters) {
-        if (!this._groupKeys || !groupEncode) return;
+        if (!this._groupedData || !groupEncode) return;
         const res = {};
-        return this._groupKeys.forEach(key => {
+        return this._groupedData.keys.forEach(key => {
           const el = elements.find(el => el.groupKey === key);
           el && (res[key] = invokeEncoder(groupEncode, el.items && el.items[0] && el.items[0].datum, el, parameters));
         }), this._groupEncodeResult = res, res;
@@ -48992,8 +49255,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (graphicItem) {
           if (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) {
             let group;
-            if (this._groupKeys) {
-              const index = this._groupKeys.indexOf(groupKey);
+            if (this._groupedData) {
+              const index = this._groupedData.keys.indexOf(groupKey);
               index >= 0 && (group = this.graphicParent.getChildAt(index));
             } else group = this.graphicParent.at(0);
             this.isCollectionMark() ? (graphicItem.incremental = 1, group.appendChild(graphicItem)) : group.incrementalAppendChild(graphicItem);
@@ -49005,7 +49268,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const enableProgressive = this.markType !== GrammarMarkType.group && this.spec.progressiveStep > 0 && this.spec.progressiveThreshold > 0 && this.spec.progressiveStep < this.spec.progressiveThreshold,
           large = this.spec.large && this.spec.largeThreshold > 0 && data.length >= this.spec.largeThreshold;
         if (enableProgressive) {
-          const groupedData = this.differ.getCurrentData();
+          const groupedData = this._groupedData;
           return groupedData && groupedData.keys && groupedData.keys.some(key => groupedData.data.get(key).length > this.spec.progressiveThreshold) ? {
             large: large,
             parameters: parameters,
@@ -49046,7 +49309,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const currentIndex = this.renderContext.progressive.currentIndex,
           keyGetter = parseField(null !== (_c = null !== (_a = this.spec.key) && void 0 !== _a ? _a : null === (_b = this.grammarSource) || void 0 === _b ? void 0 : _b.getDataIDKey()) && void 0 !== _c ? _c : () => DefaultKey),
           elements = [];
-        if (this.isCollectionMark()) return this._groupKeys.forEach((key, index) => {
+        if (this.isCollectionMark()) return this._groupedData.keys.forEach((key, index) => {
           const data = this.renderContext.progressive.groupedData.get(key),
             groupStep = this.renderContext.progressive.step,
             dataSlice = data.slice(currentIndex * groupStep, (currentIndex + 1) * groupStep);
@@ -49059,7 +49322,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           }
         }), elements;
         const groupElements = {};
-        return this._groupKeys.forEach(key => {
+        return this._groupedData.keys.forEach(key => {
           const data = this.renderContext.progressive.groupedData.get(key),
             groupStep = this.renderContext.progressive.step,
             dataSlice = data.slice(currentIndex * groupStep, (currentIndex + 1) * groupStep),
@@ -49089,8 +49352,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       evaluateProgressive() {
         var _a, _b, _c;
         if (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.beforeTransformProgressive) {
-          this.renderContext.beforeTransformProgressive.progressiveRun();
-          const output = this.renderContext.beforeTransformProgressive.output();
+          const transform = this.renderContext.beforeTransformProgressive;
+          transform.progressiveRun();
+          const output = transform.output();
+          if (transform.canAnimate) {
+            if (transform.unfinished()) return;
+            this.evaluateGroup(output);
+          }
           return this.emit(HOOK_EVENT.BEFORE_MARK_JOIN), this.evaluateJoin(output), this.emit(HOOK_EVENT.AFTER_MARK_JOIN), this.emit(HOOK_EVENT.BEFORE_MARK_STATE), this.evaluateState(this.elements, this.spec.state, this.renderContext.parameters), this.emit(HOOK_EVENT.AFTER_MARK_STATE), this.emit(HOOK_EVENT.BEFORE_MARK_ENCODE), this.evaluateEncode(this.elements, this._getEncoders(), this.renderContext.parameters), void this.emit(HOOK_EVENT.AFTER_MARK_ENCODE);
         }
         if (!(null === (_b = this.renderContext) || void 0 === _b ? void 0 : _b.progressive)) return;
@@ -49098,7 +49366,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         this.emit(HOOK_EVENT.BEFORE_MARK_JOIN);
         const result = this.evaluateJoinProgressive(),
           elements = Array.isArray(result) ? result : result.elements;
-        if (this.emit(HOOK_EVENT.AFTER_MARK_JOIN), 0 === this.renderContext.progressive.currentIndex ? (this.graphicParent.removeAllChild(), this._groupKeys.forEach(key => {
+        if (this.emit(HOOK_EVENT.AFTER_MARK_JOIN), 0 === this.renderContext.progressive.currentIndex ? (this.graphicParent.removeAllChild(), this._groupedData.keys.forEach(key => {
           const graphicItem = createGraphicItem(this, GrammarMarkType.group, {
             pickable: !1,
             zIndex: this.spec.zIndex
@@ -49172,10 +49440,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }
       prepareRelease() {
         var _a;
-        null === (_a = this.animate) || void 0 === _a || _a.stop(), this.elementMap.forEach(element => element.diffState = DiffState.exit), this._finalParameters = this.parameters();
+        this.differ.setCurrentData(null), null === (_a = this.animate) || void 0 === _a || _a.stop(), this.elementMap.forEach(element => element.diffState = DiffState.exit), this._finalParameters = this.parameters();
       }
       release() {
-        this.releaseEvent(), this.elements.forEach(element => element.release()), this.elementMap.clear(), this._finalParameters = null, this.animate && this.animate.release(), this.graphicItem && removeGraphicItem(this.graphicItem), this.detachAll(), super.release();
+        this.releaseEvent(), this.elements.forEach(element => element.release()), this.differ = null, this.elements = [], this.elementMap.clear(), this._finalParameters = null, this.animate && this.animate.release(), this.graphicItem && removeGraphicItem(this.graphicItem), this.detachAll(), super.release();
       }
     }
 
@@ -50243,10 +50511,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           const size = _this._getContainerSize();
           size && _this.resize(size.width, size.height);
         }, 100), this.delegateEvent = (event, type) => {
-          var _a;
-          const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey],
-            extendedEvt = getExtendedEvents(this, event, activeElement, type, EVENT_SOURCE_VIEW);
-          this.emit(type, extendedEvt, activeElement);
+          const extendedEvt = getExtendedEvents(this, event, type, EVENT_SOURCE_VIEW);
+          this.emit(type, extendedEvt, event.element);
         }, this.handleProgressiveFrame = () => {
           this._progressiveMarks.length && this._progressiveMarks.forEach(mark => {
             mark.isDoingProgressive() && mark.evaluateProgressive();
@@ -50630,7 +50896,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           var _b;
           const matched = 1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType,
             enableMarkMorphConfig = diff.prev.every(mark => mark.getMorphConfig().morph) && diff.next.every(mark => mark.getMorphConfig().morph);
-          runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
+          this.morph && (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
             prev: diff.prev,
             next: diff.next
           }) : matched && runningConfig.reuse && (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0]));
@@ -50723,7 +50989,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       resize(width, height) {
         let render = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
         let needDataflow = !1;
-        return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), needDataflow && (render ? this.evaluate() : this._dataflow.evaluate()), this;
+        return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), needDataflow && (render ? this.evaluate({
+          morph: !1
+        }) : this._dataflow.evaluate()), this;
       }
       _resizeRenderer() {
         const width = this.width(),
@@ -55547,8 +55815,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         return viewData;
     }
-    function dataToDataView(data, dataSet, sourceDataViews = [], ctx = {}) {
-        var _a, _b, _c;
+    function dataToDataView(data, dataSet, sourceDataViews = []) {
+        var _a;
         if (data instanceof DataView) {
             return data;
         }
@@ -55570,7 +55838,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (typeof fromDataId === 'string') {
                 const fromDataView = sourceDataViews.find(dv => dv.name === fromDataId);
                 if (!fromDataView) {
-                    ((_a = ctx.onError) !== null && _a !== void 0 ? _a : error$1)(`no data matches fromDataId ${fromDataId}`);
+                    warn(`no data matches fromDataId ${fromDataId}`);
                     return null;
                 }
                 dataView.parse([fromDataView], {
@@ -55583,7 +55851,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else if (typeof fromDataIndex === 'number') {
                 const fromDataView = sourceDataViews[fromDataIndex];
                 if (!fromDataView) {
-                    ((_b = ctx.onError) !== null && _b !== void 0 ? _b : error$1)(`no data matches fromDataIndex ${fromDataIndex}`);
+                    warn(`no data matches fromDataIndex ${fromDataIndex}`);
                     return null;
                 }
                 dataView.parse([fromDataView], {
@@ -55597,7 +55865,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 dataView.parse(values, parser);
             }
             else if (isString$1(values) && (!parser || ['csv', 'dsv', 'tsv'].includes(parser.type))) {
-                dataView.parse(values, (_c = parser) !== null && _c !== void 0 ? _c : { type: 'csv' });
+                dataView.parse(values, (_a = parser) !== null && _a !== void 0 ? _a : { type: 'csv' });
             }
             else {
                 dataView.parse([]);
@@ -57821,12 +58089,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compileMarks(group) {
             this.getMarks().forEach(m => {
                 var _a;
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                }).layout((group, children, parentLayoutBounds, options) => {
+                m.compile({ group, context: { model: this } });
+                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.layout((group, children, parentLayoutBounds, options) => {
                 });
             });
         }
@@ -59034,7 +59298,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.compileState();
             this.compileEncode();
             this.compileAnimation();
-            this.compileContext();
+            this.compileContext(option === null || option === void 0 ? void 0 : option.context);
             this.compileTransform();
         }
         _initProduct(group) {
@@ -59149,16 +59413,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
-        compileContext() {
+        compileContext(extraContext) {
             const config = {
                 interactive: this.getInteractive(),
                 zIndex: this.getZIndex(),
-                context: {
-                    markId: this.id,
-                    modelId: this.model.id,
-                    markUserId: this._userId,
-                    modelUserId: this.model.userId
-                },
+                context: Object.assign({ markId: this.id, modelId: this.model.id, markUserId: this._userId, modelUserId: this.model.userId }, extraContext),
                 skipTheme: this.getSkipTheme(),
                 support3d: this.getSupport3d(),
                 enableSegments: !!this._enableSegments,
@@ -59833,6 +60092,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 plugin.onAfterChartSpecTransform && plugin.onAfterChartSpecTransform(this, chartSpec, actionSource);
             });
         }
+        onAfterModelSpecTransform(chartSpec, chartSpecInfo, actionSource) {
+            this._plugins.forEach(plugin => {
+                plugin.onAfterModelSpecTransform &&
+                    plugin.onAfterModelSpecTransform(this, chartSpec, chartSpecInfo, actionSource);
+            });
+        }
         onBeforeInitChart(chartSpec, actionSource) {
             this._plugins.forEach(plugin => {
                 plugin.onBeforeInitChart && plugin.onBeforeInitChart(this, chartSpec, actionSource);
@@ -59921,7 +60186,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._dataSet;
         }
         constructor(spec, options) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             this.id = createID();
             this._userEvents = [];
             this._autoSize = true;
@@ -59936,9 +60201,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             this._observer = null;
             this._context = {};
-            this._onResize = debounce((...args) => {
-                this._doResize();
-            }, 100);
+            this._doResize = () => {
+                const { width, height } = this.getCurrentSize();
+                if (this._currentSize.width !== width || this._currentSize.height !== height) {
+                    this._currentSize = { width, height };
+                    this.resizeSync(width, height);
+                }
+            };
             this._renderSync = (option = {}) => {
                 var _a;
                 const self = this;
@@ -59953,6 +60222,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 var _a, _b;
                 const lastSpec = this._spec;
                 const result = {
+                    changeBackground: false,
                     reTransformSpec: false,
                     change: false,
                     reMake: false,
@@ -59980,14 +60250,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     result.changeTheme = true;
                     return result;
                 }
-                this._initChartSpec(this._spec, 'render');
+                this._initChartSpec(this._spec, 'updateSpec');
                 const res = mergeUpdateResult(this._chart.updateSpec(this._spec), result);
                 return userUpdateOptions
                     ? Object.assign(Object.assign({}, res), userUpdateOptions) : res;
             };
             this._option = merge$2(this._option, { animation: spec.animation !== false }, options);
             this._onError = (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError;
-            const _g = this._option, { dom, renderCanvas, mode, stage, poptip } = _g, restOptions = __rest$e(_g, ["dom", "renderCanvas", "mode", "stage", "poptip"]);
+            const _j = this._option, { dom, renderCanvas, mode, stage, poptip } = _j, restOptions = __rest$e(_j, ["dom", "renderCanvas", "mode", "stage", "poptip"]);
             const isTrueBrowseEnv = isTrueBrowser(mode);
             if (isTrueBrowseEnv) {
                 registerBrowserEnv();
@@ -60028,6 +60298,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._bindVGrammarViewEvent();
             this._initChartPlugin();
             InstanceManager.registerInstance(this);
+            (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCreateVChart) === null || _h === void 0 ? void 0 : _h.call(_g, this);
         }
         _setNewSpec(spec, forceMerge) {
             if (!spec) {
@@ -60118,13 +60389,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _bindResizeEvent() {
-            var _a;
+            var _a, _b;
             if (this._autoSize) {
+                this._onResize = throttle(this._doResize, (_a = this._option.resizeDelay) !== null && _a !== void 0 ? _a : 100);
                 if (this._container) {
                     const ResizeObserverWindow = window.ResizeObserver;
                     if (ResizeObserverWindow) {
                         this._observer = new ResizeObserverWindow(this._onResize);
-                        (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(this._container);
+                        (_b = this._observer) === null || _b === void 0 ? void 0 : _b.observe(this._container);
                     }
                 }
                 window.addEventListener('resize', this._onResize);
@@ -60151,13 +60423,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 height: (_d = (_c = this._currentSize) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : DEFAULT_CHART_HEIGHT
             });
         }
-        _doResize() {
-            const { width, height } = this.getCurrentSize();
-            if (this._currentSize.width !== width || this._currentSize.height !== height) {
-                this._currentSize = { width, height };
-                this.resizeSync(width, height);
-            }
-        }
         _initDataSet(dataSet) {
             if (dataSet instanceof DataSet) {
                 this._dataSet = dataSet;
@@ -60200,7 +60465,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._beforeRender(option);
         }
         _reCompile(updateResult, morphConfig) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             if (updateResult.reMake) {
                 this._releaseData();
                 this._initDataSet();
@@ -60229,8 +60494,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_h = this._compiler) === null || _h === void 0 ? void 0 : _h.setBackground(this._getBackground());
                 }
                 if (updateResult.reCompile) {
-                    (_j = this._compiler) === null || _j === void 0 ? void 0 : _j.clear({ chart: this._chart, vChart: this }, !this._option.animation || !this._spec.animation);
-                    (_k = this._compiler) === null || _k === void 0 ? void 0 : _k.compile({ chart: this._chart, vChart: this }, {});
+                    (_j = this._compiler) === null || _j === void 0 ? void 0 : _j.clear({ chart: this._chart, vChart: this }, ((_k = this._option) === null || _k === void 0 ? void 0 : _k.animation) === false || ((_l = this._spec) === null || _l === void 0 ? void 0 : _l.animation) === false);
+                    (_m = this._compiler) === null || _m === void 0 ? void 0 : _m.compile({ chart: this._chart, vChart: this }, {});
                 }
                 if (updateResult.reSize) {
                     const { width, height } = this.getCurrentSize();
@@ -60252,9 +60517,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._initChartSpec(this._spec, 'render');
             }
             this._chartPluginApply('onBeforeInitChart', this._spec, actionSource);
-            (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a, this);
             this._initChart(this._spec);
-            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterInitializeChart) === null || _d === void 0 ? void 0 : _d.call(_c);
+            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterInitializeChart) === null || _d === void 0 ? void 0 : _d.call(_c, this);
             if (!this._chart || !this._compiler) {
                 return false;
             }
@@ -60414,7 +60679,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const prevData = array(this._spec.data);
             const list = array(data);
             list.forEach(d => {
-                var _a;
                 const { id, values, parser, fields } = d;
                 const preDV = prevData.find(dv => dv.name === id);
                 if (preDV) {
@@ -60429,9 +60693,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
                 else {
-                    const dataView = dataToDataView(d, this._dataSet, prevData, {
-                        onError: (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError
-                    });
+                    const dataView = dataToDataView(d, this._dataSet, prevData);
                     if (isArray$1(this._spec.data)) {
                         this._spec.data.push(dataView);
                     }
@@ -61145,7 +61407,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.5";
+    const version = "1.12.7";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -61541,6 +61803,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         data: true
     };
     const defaultSeriesCompileCheckKeys = {
+        invalidType: true,
         animation: true,
         animationAppear: true,
         animationEnter: true,
@@ -62271,14 +62534,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initData() {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const d = (_a = this._spec.data) !== null && _a !== void 0 ? _a : this._option.getSeriesData(this._spec.dataId, this._spec.dataIndex);
             if (d) {
-                this._rawData = dataToDataView(d, this._dataSet, this._option.sourceDataList, {
-                    onError: (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError
-                });
+                this._rawData = dataToDataView(d, this._dataSet, this._option.sourceDataList);
             }
-            (_d = (_c = this._rawData) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.addListener('change', this.rawDataUpdate.bind(this));
+            (_c = (_b = this._rawData) === null || _b === void 0 ? void 0 : _b.target) === null || _c === void 0 ? void 0 : _c.addListener('change', this.rawDataUpdate.bind(this));
             this._addDataIndexAndKey();
             if (this._rawData) {
                 if (this.getStack()) {
@@ -62794,8 +63055,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initTooltip() {
             this._tooltipHelper = new BaseSeriesTooltipHelper(this);
         }
+        _compareExtensionMarksSpec(newMarks, prevMarks, compareResult) {
+            if (newMarks.length !== prevMarks.length ||
+                prevMarks.some((prev, index) => {
+                    return prev.type !== newMarks[index].type || prev.id !== newMarks[index].id;
+                })) {
+                compareResult.reMake = true;
+            }
+            else if (prevMarks.some((prev, index) => {
+                return prev.visible !== newMarks[index].visible;
+            })) {
+                compareResult.reCompile = true;
+            }
+        }
+        _compareLabelSpec(newLabels, prevLabels, compareResult) {
+            if (newLabels.length !== prevLabels.length ||
+                prevLabels.some((prev, index) => {
+                    return prev.labelLayout !== newLabels[index].labelLayout;
+                })) {
+                compareResult.reMake = true;
+            }
+            else if (!compareResult.reCompile &&
+                prevLabels.some((prev, index) => {
+                    return !isEqual(prev, newLabels[index]);
+                })) {
+                compareResult.reCompile = true;
+            }
+        }
         _compareSpec(spec, prevSpec, ignoreCheckKeys) {
-            var _a, _b;
             const result = super._compareSpec(spec, prevSpec);
             const currentKeys = Object.keys(prevSpec || {}).sort();
             const nextKeys = Object.keys(spec || {}).sort();
@@ -62803,36 +63090,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.reMake = true;
                 return result;
             }
-            ignoreCheckKeys = Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys);
-            ignoreCheckKeys.invalidType = true;
-            if (spec.invalidType !== prevSpec.invalidType) {
-                result.reCompile = true;
-            }
-            ignoreCheckKeys.extensionMark = true;
-            if (array(spec.extensionMark).length !== array(prevSpec.extensionMark).length ||
-                ((_a = prevSpec.extensionMark) === null || _a === void 0 ? void 0 : _a.some((mark, index) => mark.type !== spec.extensionMark[index].type || mark.id !== spec.extensionMark[index].id))) {
-                result.reMake = true;
-            }
+            const ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys), { extensionMark: true, label: true, totalLabel: true });
+            this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result);
+            !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result);
+            !result.reMake &&
+                this._compareLabelSpec(array(spec.totalLabel), array(prevSpec.totalLabel), result);
             if (result.reMake) {
                 return result;
             }
-            if ((_b = prevSpec.extensionMark) === null || _b === void 0 ? void 0 : _b.some((mark, index) => mark.visible !== spec.extensionMark[index].visible)) {
+            if (!result.reCompile &&
+                this._marks.getMarks().some(m => {
+                    var _a, _b;
+                    ignores[m.name] = true;
+                    return ((_a = prevSpec[m.name]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec[m.name]) === null || _b === void 0 ? void 0 : _b.visible);
+                })) {
                 result.reCompile = true;
             }
-            if (this._marks.getMarks().some(m => {
-                var _a, _b;
-                ignoreCheckKeys[m.name] = true;
-                return ((_a = prevSpec[m.name]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec[m.name]) === null || _b === void 0 ? void 0 : _b.visible);
-            })) {
+            if (!result.reCompile &&
+                currentKeys.some((k) => {
+                    return defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
+                })) {
                 result.reCompile = true;
             }
             if (currentKeys.some((k) => {
-                return defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
-            })) {
-                result.reCompile = true;
-            }
-            if (currentKeys.some((k) => {
-                return !ignoreCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
+                return !ignores[k] && !isEqual(spec[k], prevSpec[k]);
             })) {
                 result.reMake = true;
                 return result;
@@ -64714,13 +64995,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks(group) {
             this.getMarks().forEach(m => {
-                var _a;
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                });
+                m.compile({ group, context: { model: this } });
             });
         }
         reAppendComponents() {
@@ -65015,11 +65290,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             return result;
         }
-        _delegateAxisContainerEvent(component) {
-            if (component.listenerCount('*') === 0) {
-                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-            }
-        }
         _getAxisAttributes() {
             const spec = this._spec;
             const axisAttrs = {
@@ -65614,7 +65884,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 this.pluginService && plugin.onDidLayoutVertical && plugin.onDidLayoutVertical(this.pluginService, this);
                             });
                         }
-                        this._delegateAxisContainerEvent(product.getGroupGraphicItem());
                         if (this._unitText) {
                             const { x, y } = this.getLayoutStartPoint();
                             const pos = isXAxis(this._orient)
@@ -65729,12 +65998,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const attrs = this._getUpdateAttribute(true);
                 const axisComponent = product.getGroupGraphicItem();
                 const spec = mergeSpec(Object.assign({}, this.getLayoutStartPoint()), this._axisStyle, attrs, { line: { visible: false } });
-                const updateBounds = axisComponent.getBoundsWithoutRender(spec);
+                let updateBounds = axisComponent.getBoundsWithoutRender(spec);
+                if (updateBounds.empty()) {
+                    updateBounds = new Bounds().set(spec.x, spec.y, spec.x, spec.y);
+                }
                 hasBounds = true;
                 this._latestBounds = updateBounds;
-                if (isFinite(updateBounds.width())) {
-                    result = this._appendAxisUnit(updateBounds, isX);
-                }
+                result = this._appendAxisUnit(updateBounds, isX);
             }
             if (!hasBounds) {
                 this._latestBounds = product.getBounds();
@@ -67062,16 +67332,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         get dataList() {
             return this._dataArr;
         }
-        constructor(dataSet, onError) {
+        constructor(dataSet) {
             this._dataArr = [];
-            this._onError = onError;
             this._dataSet = dataSet;
         }
         parseData(dataSpec) {
             this._dataArr = [];
             const list = array(dataSpec);
             for (let i = 0; i < list.length; i++) {
-                this._dataArr.push(dataToDataView(list[i], this._dataSet, this._dataArr, { onError: this._onError }));
+                this._dataArr.push(dataToDataView(list[i], this._dataSet, this._dataArr));
             }
         }
         updateData(dataSpec, fullUp = false, forceMerge = true) {
@@ -67100,7 +67369,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         getSeriesData(id, index) {
-            var _a, _b;
             if (!this._dataArr.length) {
                 return null;
             }
@@ -67111,15 +67379,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (metchData[0]) {
                     return metchData[0];
                 }
-                (_a = this._onError) === null || _a === void 0 ? void 0 : _a.call(this, `no data matches dataId ${id}!`);
-                return null;
+                warn(`no data matches dataId ${id}!`);
             }
             if (typeof index === 'number') {
                 if (this._dataArr[index]) {
                     return this._dataArr[index];
                 }
-                (_b = this._onError) === null || _b === void 0 ? void 0 : _b.call(this, `no data matches dataIndex ${index}!`);
-                return null;
+                warn(`no data matches dataIndex ${index}!`);
             }
             return this._dataArr[0];
         }
@@ -67479,7 +67745,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._chartData;
         }
         constructor(spec, option) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             super(option);
             this.type = 'chart';
             this.id = createID();
@@ -67609,8 +67875,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._paddingSpec = normalizeLayoutPaddingSpec((_a = spec.padding) !== null && _a !== void 0 ? _a : option.getTheme().padding);
             this._event = new Event$1(option.eventDispatcher, option.mode);
             this._dataSet = option.dataSet;
-            this._chartData = new ChartData(this._dataSet, (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError);
-            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError, disableTriggerEvent: ((_d = this._option) === null || _d === void 0 ? void 0 : _d.disableTriggerEvent) === true, getSeriesData: this._chartData.getSeriesData.bind(this._chartData) });
+            this._chartData = new ChartData(this._dataSet);
+            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError, disableTriggerEvent: ((_c = this._option) === null || _c === void 0 ? void 0 : _c.disableTriggerEvent) === true, getSeriesData: this._chartData.getSeriesData.bind(this._chartData) });
             this._spec = spec;
         }
         created() {
@@ -67936,6 +68202,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._globalScale.getScale('color').range(colorSpec.range);
             }
         }
+        _getSpecKeys(spec) {
+            const ignoreKeys = { width: true, height: true };
+            return Object.keys(spec)
+                .filter(key => !ignoreKeys[key])
+                .sort();
+        }
         updateSpec(spec) {
             const result = {
                 change: false,
@@ -67949,9 +68221,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.reMake = true;
                 return result;
             }
-            const currentKeys = Object.keys(this._spec).sort();
-            const nextKeys = Object.keys(spec).sort();
-            if (JSON.stringify(currentKeys) !== JSON.stringify(nextKeys)) {
+            const currentKeys = this._getSpecKeys(this._spec);
+            const nextKeys = this._getSpecKeys(spec);
+            if (!isEqual(currentKeys, nextKeys)) {
                 result.reMake = true;
                 return result;
             }
@@ -68050,10 +68322,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
             }
+            const isVisible = (compSpec) => compSpec && compSpec.visible !== false;
             Object.keys(checkVisibleComponents).forEach(type => {
                 if (checkVisibleComponents[type]) {
                     const compSpec = this._spec[type];
-                    const switchToVisible = isArray$1(compSpec) ? compSpec.some(entry => entry === null || entry === void 0 ? void 0 : entry.visible) : compSpec === null || compSpec === void 0 ? void 0 : compSpec.visible;
+                    const switchToVisible = isArray$1(compSpec) ? compSpec.some(isVisible) : isVisible(compSpec);
                     if (switchToVisible) {
                         result.reMake = true;
                     }
@@ -68143,13 +68416,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._backgroundMark) {
                 return;
             }
-            this._backgroundMark.compile();
-            (_a = this._backgroundMark
-                .getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                context: {
-                    model: this
-                }
-            }).layout(() => {
+            this._backgroundMark.compile({ context: { model: this } });
+            (_a = this._backgroundMark.getProduct()) === null || _a === void 0 ? void 0 : _a.layout(() => {
             });
         }
         compileRegions() {
@@ -72324,15 +72592,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ? (_c = series.getXAxisHelper()) === null || _c === void 0 ? void 0 : _c.isInverse()
             : (_d = series.getYAxisHelper()) === null || _d === void 0 ? void 0 : _d.isInverse();
         let position = originPosition;
-        if (isString$1(originPosition) && originPosition === 'outside') {
-            position = (data) => {
-                const { data: datum } = data;
+        position = (datum) => {
+            var _a;
+            const { data } = datum;
+            const labelPosition = (_a = (typeof labelSpec.position === 'function'
+                ? labelSpec.position(data)
+                : labelSpec.position)) !== null && _a !== void 0 ? _a : 'outside';
+            if (labelPosition === 'outside') {
                 const dataField = series.getMeasureField()[0];
                 const positionMap = { vertical: ['top', 'bottom'], horizontal: ['right', 'left'] };
-                const index = ((datum === null || datum === void 0 ? void 0 : datum[dataField]) >= 0 && isInverse) || ((datum === null || datum === void 0 ? void 0 : datum[dataField]) < 0 && !isInverse) ? 1 : 0;
+                const index = ((data === null || data === void 0 ? void 0 : data[dataField]) >= 0 && isInverse) || ((data === null || data === void 0 ? void 0 : data[dataField]) < 0 && !isInverse) ? 1 : 0;
                 return positionMap[direction][index];
-            };
-        }
+            }
+            return labelPosition;
+        };
         let overlap;
         if (labelSpec.overlap === false) {
             overlap = false;
@@ -75173,17 +75446,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             return Object.assign(Object.assign({}, super._tickTransformOption()), { noDecimal: (_a = this._tick) === null || _a === void 0 ? void 0 : _a.noDecimals, startAngle: this.startAngle, labelOffset: getAxisLabelOffset(this._spec), getRadius: () => this.getOuterRadius(), inside: this._spec.inside });
         }
-        afterCompile() {
-            var _a;
-            const product = (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct();
-            if (product) {
-                product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                    if (this._isLayout === false) {
-                        this._delegateAxisContainerEvent(product.getGroupGraphicItem());
-                    }
-                });
-            }
-        }
         updateScaleRange() {
             const prevRange = this._scale.range();
             let newRange;
@@ -75269,29 +75531,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return polarToCartesian(center, point.radius, point.angle);
         }
         pointToCoord(point) {
-            const { x: centerX, y: centerY } = this.getCenter();
-            let dx = point.x - centerX;
-            let dy = point.y - centerY;
+            const center = this.getCenter();
             const startAngle = this._startAngle;
             const endAngle = this._endAngle;
-            const radius = Math.sqrt(dx * dx + dy * dy);
-            dx /= radius;
-            dy /= radius;
-            let radian = Math.atan2(dy, dx);
-            if (radian < startAngle) {
-                while (radian <= startAngle) {
-                    radian += Math.PI * 2;
-                }
-            }
-            if (radian > endAngle) {
-                while (radian >= endAngle) {
-                    radian -= Math.PI * 2;
-                }
-            }
-            return {
-                radius,
-                angle: radian
-            };
+            return cartesianToPolar(point, center, startAngle, endAngle);
         }
         getOuterRadius() {
             return this.computeLayoutOuterRadius();
@@ -75343,7 +75586,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 innerRadius, startAngle: this._startAngle, endAngle: this._endAngle, sides: ((_c = (_b = (_a = this._getRelatedAxis(this._option.radiusAxisIndex)) === null || _a === void 0 ? void 0 : _a.getSpec()) === null || _b === void 0 ? void 0 : _b.grid) === null || _c === void 0 ? void 0 : _c.smooth)
                     ? undefined
                     : this.getScale().domain().length });
-            const attrs = Object.assign(Object.assign({}, commonAttrs), { title: {
+            const attrs = Object.assign(Object.assign(Object.assign({}, commonAttrs), this.getRefLayoutRect()), { title: {
                     text: this._spec.title.text || this._dataFieldText
                 }, items, orient: 'angle' });
             if (this._spec.grid.visible) {
@@ -75648,23 +75891,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class PolarPointUpdate extends ACustomAnimate {
         constructor(from, to, duration, easing, params) {
             super(from, to, duration, easing, params);
-            const pointToCoord = this.params.pointToCoord;
-            const coordToPoint = this.params.coordToPoint;
-            if (!isFunction$1(pointToCoord) || !isFunction$1(coordToPoint)) {
+            this._center = to.center;
+            this._prevCenter = from.center;
+            if (!this._center || !this._prevCenter) {
                 this.valid = false;
             }
-            this._pointToCoord = pointToCoord;
-            this._coordToPoint = coordToPoint;
         }
         getEndProps() {
             if (this.valid === false) {
                 return {};
             }
-            return this._coordToPoint({ angle: this._toAngle, radius: this._toRadius });
+            return polarToCartesian(this._center, this._toRadius, this._toAngle);
         }
         onBind() {
-            const { angle: fromAngle, radius: fromRadius } = this._pointToCoord(this.from);
-            const { angle: toAngle, radius: toRadius } = this._pointToCoord(this.to);
+            const { angle: fromAngle, radius: fromRadius } = cartesianToPolar(this.from, this._prevCenter);
+            const { angle: toAngle, radius: toRadius } = cartesianToPolar(this.to, this._center);
             if (!isValidNumber$1(toAngle * toRadius)) {
                 this.valid = false;
             }
@@ -75686,12 +75927,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { x, y } = this.getEndProps();
                 out.x = x;
                 out.y = y;
+                out.center = this._center;
             }
             else {
-                const { x, y } = this._coordToPoint({
-                    angle: this._fromAngle + (this._toAngle - this._fromAngle) * ratio,
-                    radius: this._fromRadius + (this._toRadius - this._fromRadius) * ratio
-                });
+                const { x, y } = polarToCartesian({
+                    x: this._prevCenter.x + (this._center.x - this._prevCenter.x) * ratio,
+                    y: this._prevCenter.y + (this._center.y - this._prevCenter.y) * ratio
+                }, this._fromRadius + (this._toRadius - this._fromRadius) * ratio, this._fromAngle + (this._toAngle - this._fromAngle) * ratio);
                 out.x = x;
                 out.y = y;
             }
@@ -75700,14 +75942,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class PolarTagPointsUpdate extends TagPointsUpdate {
         constructor(from, to, duration, easing, params) {
             super(from, to, duration, easing, params);
-            const pointToCoord = this.params.pointToCoord;
-            const coordToPoint = this.params.coordToPoint;
-            this._pointToCoord = pointToCoord;
-            this._coordToPoint = coordToPoint;
+            this._center = to.center;
+            this._prevCenter = from.center;
         }
         onUpdate(end, ratio, out) {
             this.points = this.points.map((point, index) => {
                 const newPoint = this.polarPointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+                if (end) {
+                    out.center = this._center;
+                }
                 newPoint.context = point.context;
                 return newPoint;
             });
@@ -75717,8 +75960,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!isValidPoint(pointA) && !isValidPoint(pointB)) {
                 return pointB;
             }
-            const polarPointA = this._pointToCoord(pointA);
-            const polarPointB = this._pointToCoord(pointB);
+            const polarPointA = cartesianToPolar(pointA, this._prevCenter);
+            const polarPointB = cartesianToPolar(pointB, this._center);
             let angleA = normalizeAngle(polarPointA.angle);
             let angleB = normalizeAngle(polarPointB.angle);
             if (!isValidNumber$1(angleA) && isValidNumber$1(angleB)) {
@@ -75729,7 +75972,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const angle = angleA + (angleB - angleA) * ratio;
             const radius = polarPointA.radius + (polarPointB.radius - polarPointA.radius) * ratio;
-            return this._coordToPoint({ angle, radius });
+            return polarToCartesian({
+                x: this._prevCenter.x + (this._center.x - this._prevCenter.x) * ratio,
+                y: this._prevCenter.y + (this._center.y - this._prevCenter.y) * ratio
+            }, radius, angle);
         }
         polarPointInterpolation(pointA, pointB, ratio) {
             const { x, y } = this._interpolationSinglePoint(pointA, pointB, ratio);
@@ -75820,10 +76066,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 disappear: preset === 'clipIn' ? undefined : radarPresetAnimation(params, preset, 'out'),
                 update: [
                     {
-                        options: { excludeChannels: ['points', 'defined'] }
+                        options: { excludeChannels: ['points', 'defined', 'center'] }
                     },
                     {
-                        channel: ['points'],
+                        channel: ['points', 'center'],
                         custom: PolarTagPointsUpdate,
                         customParameters: params,
                         duration: DEFAULT_ANIMATION_CONFIG.update.duration,
@@ -75839,10 +76085,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             disappear: preset === 'clipIn' ? undefined : radarSymbolPresetAnimation(params, preset, 'out'),
             update: [
                 {
-                    options: { excludeChannels: ['x', 'y'] }
+                    options: { excludeChannels: ['x', 'y', 'center'] }
                 },
                 {
-                    channel: ['x', 'y'],
+                    channel: ['x', 'y', 'center'],
                     custom: PolarPointUpdate,
                     customParameters: params,
                     duration: DEFAULT_ANIMATION_CONFIG.update.duration,
@@ -75892,6 +76138,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initAreaMarkStyle();
             this.initLineMarkStyle();
             this.initSymbolMarkStyle();
+            [this._lineMark, this._symbolMark, this._areaMark].forEach(mark => {
+                if (mark) {
+                    this.setMarkStyle(mark, {
+                        center: () => {
+                            var _a;
+                            return (_a = this.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.center();
+                        }
+                    });
+                }
+            });
         }
         initAreaMark(progressive, isSeriesMark) {
             var _a, _b;
@@ -75963,9 +76219,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const rect = this.getLayoutRect();
                     return Math.min(rect.width, rect.height);
                 },
-                startAngle: isValid$1(this._spec.startAngle) ? degreeToRadian(this._spec.startAngle) : POLAR_START_RADIAN,
-                pointToCoord: (point) => { var _a; return (_a = this.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.pointToCoord(point); },
-                coordToPoint: (coord) => this.angleAxisHelper.coordToPoint(coord)
+                startAngle: isValid$1(this._spec.startAngle) ? degreeToRadian(this._spec.startAngle) : POLAR_START_RADIAN
             };
             const appearPreset = ((_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset) !== null && _c !== void 0 ? _c : 'clipIn');
             if (appearPreset === 'clipIn') {
@@ -79939,12 +80193,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._valueField;
         }
         setAttrFromSpec() {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             super.setAttrFromSpec();
             this.setCategoryField(this._spec.categoryField);
             this.setValueField(this._spec.valueField);
             this._funnelOrient = (_a = this._spec.funnelOrient) !== null && _a !== void 0 ? _a : 'top';
             this._shape = (_b = this._spec.shape) !== null && _b !== void 0 ? _b : 'trapezoid';
+            this._minLabelLineWidth = (_e = (_d = (_c = this._spec.outerLabel) === null || _c === void 0 ? void 0 : _c.line) === null || _d === void 0 ? void 0 : _d.minLength) !== null && _e !== void 0 ? _e : FUNNEL_LABEL_LINE_LENGTH;
             if (this._isHorizontal()) {
                 this._funnelAlign = ['top', 'bottom'].includes(this._spec.funnelAlign) ? this._spec.funnelAlign : 'center';
             }
@@ -80452,7 +80707,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return type === 'text' && ((_a = attribute.data) === null || _a === void 0 ? void 0 : _a[categoryField]) === datum[categoryField];
             }, true)) === null || _c === void 0 ? void 0 : _c.AABBBounds;
             const funnelLabelWidth = funnelLabelBounds ? funnelLabelBounds.x2 - funnelLabelBounds.x1 : 0;
-            const outerLineSpace = this._funnelOuterLabelMark.line ? FUNNEL_LABEL_LINE_LENGTH : 0;
+            const outerLineSpace = this._funnelOuterLabelMark.line ? this._minLabelLineWidth : 0;
             let space = this.getLayoutRect().width - Math.max(shapeMiddleWidth, funnelLabelWidth);
             if (this._funnelAlign === 'center') {
                 space /= 2;
@@ -80480,14 +80735,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y1 = this._getPolygonCenter(points).y - shapeMiddleHeight / 2 - spaceWidth;
                     y2 = outerLabelSpec.alignLabel !== false ? (outerLabelMarkBounds === null || outerLabelMarkBounds === void 0 ? void 0 : outerLabelMarkBounds.y2) + spaceWidth : y1 - spaceWidth;
                     x1 = this._getPolygonCenter(points).x;
-                    y1 - y2 < FUNNEL_LABEL_LINE_LENGTH && (y2 = y1 - FUNNEL_LABEL_LINE_LENGTH);
+                    y1 - y2 < this._minLabelLineWidth && (y2 = y1 - this._minLabelLineWidth);
                     x2 = x1;
                 }
                 else {
                     y1 = this._getPolygonCenter(points).y + shapeMiddleHeight / 2 + spaceWidth;
                     y2 = outerLabelSpec.alignLabel !== false ? (outerLabelMarkBounds === null || outerLabelMarkBounds === void 0 ? void 0 : outerLabelMarkBounds.y1) - spaceWidth : y1 + spaceWidth;
                     x1 = this._getPolygonCenter(points).x;
-                    y2 - y1 < FUNNEL_LABEL_LINE_LENGTH && (y2 = y1 + FUNNEL_LABEL_LINE_LENGTH);
+                    y2 - y1 < this._minLabelLineWidth && (y2 = y1 + this._minLabelLineWidth);
                     x2 = x1;
                 }
                 return { x1, x2, y1, y2 };
@@ -80500,14 +80755,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 x1 = this._getPolygonCenter(points).x + Math.max(labelWidth / 2, shapeMiddleWidth / 2) + spaceWidth;
                 x2 = outerLabelSpec.alignLabel !== false ? (outerLabelMarkBounds === null || outerLabelMarkBounds === void 0 ? void 0 : outerLabelMarkBounds.x1) - spaceWidth : x1 + spaceWidth;
                 y1 = this._getPolygonCenter(points).y;
-                x2 - x1 < FUNNEL_LABEL_LINE_LENGTH && (x2 = x1 + FUNNEL_LABEL_LINE_LENGTH);
+                x2 - x1 < this._minLabelLineWidth && (x2 = x1 + this._minLabelLineWidth);
                 y2 = y1;
             }
             else {
                 x1 = this._getPolygonCenter(points).x - Math.max(labelWidth / 2, shapeMiddleWidth / 2) - spaceWidth;
                 x2 = outerLabelSpec.alignLabel !== false ? (outerLabelMarkBounds === null || outerLabelMarkBounds === void 0 ? void 0 : outerLabelMarkBounds.x2) + spaceWidth : x1 - spaceWidth;
                 y1 = this._getPolygonCenter(points).y;
-                x1 - x2 < FUNNEL_LABEL_LINE_LENGTH && (x2 = x1 - FUNNEL_LABEL_LINE_LENGTH);
+                x1 - x2 < this._minLabelLineWidth && (x2 = x1 - this._minLabelLineWidth);
                 y2 = y1;
             }
             return { x1, x2, y1, y2 };
@@ -92355,11 +92610,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         let filter = null;
         if (isContinuous()) {
-            filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= last(newDomain);
+            filter = (d) => {
+                let flag = false;
+                array(datumField).every(field => {
+                    if (d[field] >= newDomain[0] && d[field] <= last(newDomain)) {
+                        flag = true;
+                    }
+                    return;
+                });
+                return flag;
+            };
         }
         else {
             filter = (d) => {
-                return domainMap[d[datumField] + ''] || domainMap[d[datumField]];
+                let flag = false;
+                array(datumField).every(field => {
+                    if (domainMap[d[field] + ''] || domainMap[d[field]]) {
+                        flag = true;
+                    }
+                    return;
+                });
+                return flag;
             };
         }
         return data.filter(filter);
@@ -92769,18 +93040,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 : yAxisHelper;
                     const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
                     const isValidateValueAxis = isContinuous(valueAxisHelper.getScale(0).type);
+                    const isValidateStateAxis = isContinuous(stateAxisHelper.getScale(0).type);
                     dataCollection.push(s.getRawData());
                     const seriesSpec = s.getSpec();
-                    const xFields = array(seriesSpec.xField);
-                    const yFields = array(seriesSpec.yField);
-                    const xField = s.coordinate === 'cartesian' ? xFields[0] : (_a = seriesSpec.angleField) !== null && _a !== void 0 ? _a : seriesSpec.categoryField;
-                    const yField = s.coordinate === 'cartesian' ? yFields[0] : (_b = seriesSpec.radiusField) !== null && _b !== void 0 ? _b : seriesSpec.valueField;
+                    const xField = s.coordinate === 'cartesian'
+                        ? array(seriesSpec.xField)
+                        : array((_a = seriesSpec.angleField) !== null && _a !== void 0 ? _a : seriesSpec.categoryField);
+                    const yField = s.coordinate === 'cartesian'
+                        ? array(seriesSpec.yField)
+                        : array((_b = seriesSpec.radiusField) !== null && _b !== void 0 ? _b : seriesSpec.valueField);
                     originalStateFields[s.id] =
-                        s.type === 'link' ? 'from_xField' : stateAxisHelper === xAxisHelper ? xField : yField;
-                    stateFields.push(originalStateFields[s.id]);
+                        s.type === 'link' ? ['from_xField'] : stateAxisHelper === xAxisHelper ? xField : yField;
+                    if (isValidateStateAxis) {
+                        stateFields.push(originalStateFields[s.id]);
+                    }
+                    else {
+                        stateFields.push(originalStateFields[s.id][0]);
+                    }
                     if (this._valueField) {
-                        const valueField = s.type === 'link' ? 'from_yField' : valueAxisHelper === xAxisHelper ? xField : yField;
-                        valueFields.push(isValidateValueAxis ? valueField : null);
+                        const valueField = s.type === 'link' ? ['from_yField'] : valueAxisHelper === xAxisHelper ? xField : yField;
+                        if (isValidateValueAxis) {
+                            valueFields.push(...valueField);
+                        }
                     }
                 }, {
                     userId: this._seriesUserId,
@@ -96043,11 +96324,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getNeedClearVRenderComponents() {
             return [];
         }
-        _delegateLabelEvent(component) {
-            if (component.listenerCount('*') === 0) {
-                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-            }
-        }
     }
     BaseLabelComponent.type = ComponentTypeEnum.label;
 
@@ -96158,18 +96434,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.event.off(HOOK_EVENT.AFTER_MARK_RENDER_END, enableAnimation);
             };
         }
-        afterCompile() {
-            this._labelComponentMap.forEach((info, component) => {
-                const product = component.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            this._delegateLabelEvent(product.getGroupGraphicItem());
-                        }
-                    });
-                }
-            });
-        }
         _initTextMark() {
             if (!this._labelInfoMap) {
                 this._labelInfoMap = new Map();
@@ -96344,7 +96608,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks() {
             this.getMarks().forEach(m => {
-                var _a;
                 const labelInfo = this._labelComponentMap.get(m)();
                 let group;
                 if (isArray$1(labelInfo)) {
@@ -96353,13 +96616,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     group = labelInfo.series.getRegion().getGroupMark().getProduct();
                 }
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this,
-                        labelInfo
-                    }
-                });
+                m.compile({ group, context: { model: this, labelInfo } });
             });
         }
         getVRenderComponents() {
@@ -96418,6 +96675,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initTextMark();
             this._initLabelComponent();
         }
+        reInit(spec) {
+            super.reInit(spec);
+            this._initTextMark();
+        }
         _initTextMark() {
             var _a;
             const series = this._getSeries();
@@ -96453,18 +96714,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._marks.addMark(component);
             }
         }
-        afterCompile() {
-            this._marks.forEach((componentMark, index) => {
-                const product = componentMark.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            this._delegateLabelEvent(product.getGroupGraphicItem());
-                        }
-                    });
-                }
-            });
-        }
         updateLayoutAttribute() {
             super.updateLayoutAttribute();
             const series = this._getSeries();
@@ -96506,14 +96755,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks() {
             this.getMarks().forEach(m => {
-                var _a;
                 const group = this._regions[0].getGroupMark().getProduct();
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                });
+                m.compile({ group, context: { model: this } });
             });
         }
         getVRenderComponents() {
@@ -97483,21 +97726,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onRender(ctx) {
         }
-        afterCompile() {
-            this.getMarks().forEach(mark => {
-                const product = mark.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            const component = product.getGroupGraphicItem();
-                            if ((component === null || component === void 0 ? void 0 : component.listenerCount('*')) === 0) {
-                                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-                            }
-                        }
-                    });
-                }
-            });
-        }
         _getMarkAttributeContext() {
             return {
                 vchart: this._option.globalInstance,
@@ -100900,9 +101128,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             };
         }
-        afterCompile() {
-            super.afterCompile();
-        }
         _beforeInit() {
             if (this._dataSet) {
                 registerDataSetInstanceTransform(this._dataSet, 'stackSplit', stackSplit);
@@ -101147,6 +101372,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._reInit(false, false);
             }
         }
+        onAfterModelSpecTransform(service, chartSpec, chartInfo, actionSource) {
+            if (!this._initialized) {
+                return;
+            }
+            if (actionSource === 'updateSpec') {
+                this.onBeforeInitChart(service, chartSpec, 'setCurrentTheme');
+            }
+        }
         onBeforeInitChart(service, chartSpec, actionSource) {
             if (!this._initialized) {
                 return;
@@ -101159,7 +101392,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     resetMediaQuery = false;
                     checkMediaQuery = true;
                     break;
-                case 'updateSpec':
                 case 'setCurrentTheme':
                     resetMediaQuery = true;
                     checkMediaQuery = false;