@visactor/vrender-components 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, sqrt, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, acos, Color, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isEqual, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isPointInLine, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, sqrt, Color, OBBBounds, isNil, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isEqual, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -596,14 +596,14 @@ class PerformanceRAF {
   }
 }
 
-var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   },
-  __metadata$F = undefined && undefined.__metadata || function (k, v) {
+  __metadata$G = undefined && undefined.__metadata || function (k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
   },
   __param$A = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -818,7 +818,7 @@ let DefaultGlobal = class {
     return this._env || this.setEnv("browser"), this.envContribution.copyToClipBoard(text);
   }
 };
-DefaultGlobal = __decorate$P([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(EnvContribution)), __metadata$F("design:paramtypes", [Object])], DefaultGlobal);
+DefaultGlobal = __decorate$Q([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(EnvContribution)), __metadata$G("design:paramtypes", [Object])], DefaultGlobal);
 
 var MeasureModeEnum;
 !function (MeasureModeEnum) {
@@ -1063,15 +1063,19 @@ function drawArc(context, x, y, coords) {
     context.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5]);
   }
 }
-const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) => {
-  const delta = Math.abs(endAngle - startAngle),
-    count = delta > .5 * Math.PI ? Math.ceil(2 * delta / Math.PI) : 1,
-    stepAngle = (endAngle - startAngle) / count;
+const addArcToBezierPath = function (bezierPath, startAngle, endAngle, cx, cy, rx, ry) {
+  let counterclockwise = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : !1;
+  const PI2 = 2 * Math.PI,
+    sAngle = (startAngle % PI2 + PI2) % PI2;
+  let deltaAngle,
+    eAngle = (endAngle % PI2 + PI2) % PI2;
+  counterclockwise ? (eAngle >= sAngle && (eAngle -= PI2), deltaAngle = eAngle - sAngle) : (eAngle <= sAngle && (eAngle += PI2), deltaAngle = eAngle - sAngle);
+  const count = Math.ceil(Math.abs(deltaAngle) / (.5 * Math.PI)),
+    stepAngle = deltaAngle / 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,
+    const sa = sAngle + stepAngle * i,
+      ea = sAngle + stepAngle * (i + 1),
+      len = 4 / 3 * Math.tan(Math.abs(stepAngle) / 4),
       c1 = Math.cos(sa),
       s1 = Math.sin(sa),
       c2 = Math.cos(ea),
@@ -1080,8 +1084,9 @@ const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) =>
       y1 = s1 * ry + cy,
       x4 = c2 * rx + cx,
       y4 = s2 * ry + cy,
-      hx = rx * len * dir,
-      hy = ry * len * dir;
+      sign = counterclockwise ? -1 : 1,
+      hx = rx * len * sign,
+      hy = ry * len * sign;
     bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
   }
 };
@@ -1642,6 +1647,11 @@ let Step$1 = class Step {
     return this.context.tryUpdateLength();
   }
 };
+class StepClosed extends Step$1 {
+  lineEnd() {
+    this.context.closePath();
+  }
+}
 function genStepSegments(points, t) {
   let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -1655,6 +1665,16 @@ function genStepSegments(points, t) {
 function genStepTypeSegments(path, points) {
   return genCurveSegments(path, points);
 }
+function genStepClosedSegments(points, t) {
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    direction: direction,
+    startPoint: startPoint
+  } = params;
+  if (points.length < 2 - Number(!!startPoint)) return null;
+  const segContext = new SegContext("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction.ROW : Direction.COLUMN);
+  return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+}
 
 class LinearClosed extends Linear {
   lineEnd() {
@@ -1884,6 +1904,8 @@ function calcLineCache(points, curveType, params) {
       return genMonotoneYSegments(points, params);
     case "step":
       return genStepSegments(points, .5, params);
+    case "stepClosed":
+      return genStepClosedSegments(points, .5, params);
     case "stepBefore":
       return genStepSegments(points, 0, params);
     case "stepAfter":
@@ -1954,8 +1976,14 @@ class CustomPath2D extends CurvePath {
     if (!this.toStringCbList) {
       const list = [];
       list[enumCommandMap.M] = cmd => `M${cmd[1]} ${cmd[2]}`, list[enumCommandMap.L] = cmd => `L${cmd[1]} ${cmd[2]}`, list[enumCommandMap.Q] = cmd => `Q${cmd[1]} ${cmd[2]} ${cmd[3]} ${cmd[4]}`, list[enumCommandMap.C] = cmd => `C${cmd[1]} ${cmd[2]} ${cmd[3]} ${cmd[4]} ${cmd[5]} ${cmd[6]}`, list[enumCommandMap.A] = cmd => {
-        const bezierPathList = [];
-        addArcToBezierPath(bezierPathList, cmd[4], cmd[5], cmd[1], cmd[2], cmd[3], cmd[3]);
+        const bezierPathList = [],
+          x = cmd[1],
+          y = cmd[2],
+          radius = cmd[3],
+          startAngle = cmd[4],
+          endAngle = cmd[5],
+          counterclockwise = cmd[6];
+        addArcToBezierPath(bezierPathList, startAngle, endAngle, x, y, radius, radius, counterclockwise);
         let path = "";
         for (let i = 0; i < bezierPathList.length; i += 6) path += `C${bezierPathList[i]} ${bezierPathList[i + 1]} ${bezierPathList[i + 2]} ${bezierPathList[i + 3]} ${bezierPathList[i + 4]} ${bezierPathList[i + 5]}`;
         return path;
@@ -2318,7 +2346,8 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   filter: "",
   cursor: null,
   html: null,
-  react: null
+  react: null,
+  vue: null
 }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
 const DefaultConnectAttribute = {
   connectedType: "none",
@@ -2353,7 +2382,8 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   overflow: "hidden",
   shadowPickMode: "graphic",
   keepStrokeScale: !1,
-  clipConfig: null
+  clipConfig: null,
+  roughStyle: null
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   startAngle: 0,
@@ -2426,6 +2456,12 @@ const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute
   cornerRadius: 0,
   closePath: !0
 });
+const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+  width: 100,
+  height: 100,
+  spikes: 5,
+  thickness: .5
+});
 const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   width: 0,
   height: 0,
@@ -2751,6 +2787,7 @@ function getScaledStroke(context, width, dpr) {
 function createColor(context, c, params) {
   let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
   let result, color;
   if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -2764,9 +2801,10 @@ function createColor(context, c, params) {
     if (params.attribute) {
       const {
         scaleX = 1,
-        scaleY = 1
+        scaleY = 1,
+        angle = 0
       } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = null !== (_a = params.x1WithoutTransform) && void 0 !== _a ? _a : 0, y = null !== (_b = params.y1WithoutTransform) && void 0 !== _b ? _b : 0, w = null !== (_c = params.widthWithoutTransform) && void 0 !== _c ? _c : w, h = null !== (_d = params.heightWithoutTransform) && void 0 !== _d ? _d : h);
     }
     "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
@@ -2791,7 +2829,7 @@ function createConicGradient(context, color, x, y, w, h) {
   const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
   return color.stops.forEach(stop => {
     canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  }), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
 }
 
 const DIRECTION_KEY = {
@@ -2921,7 +2959,7 @@ function measureTextCanvas(text, character) {
   return result.width += space, result;
 }
 
-var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
   var d,
     c = arguments.length,
     r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -3313,9 +3351,9 @@ let ATextMeasure = class {
     return data.str = data.result, data.width += suffixWidth, data;
   }
 };
-ATextMeasure = __decorate$O([injectable()], ATextMeasure);
+ATextMeasure = __decorate$P([injectable()], ATextMeasure);
 
-var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
   var d,
     c = arguments.length,
     r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -3324,7 +3362,7 @@ var __decorate$N = undefined && undefined.__decorate || function (decorators, ta
 };
 const TextMeasureContribution = Symbol.for("TextMeasureContribution");
 let DefaultTextMeasureContribution = class extends ATextMeasure {};
-DefaultTextMeasureContribution = __decorate$N([injectable()], DefaultTextMeasureContribution);
+DefaultTextMeasureContribution = __decorate$O([injectable()], DefaultTextMeasureContribution);
 
 const container = new Container();
 
@@ -3333,6 +3371,355 @@ const CanvasFactory = Symbol.for("CanvasFactory");
 function wrapCanvas(params) {
   return container.getNamed(CanvasFactory, application.global.env)(params);
 }
+const EPSILON_NUMERIC = 1e-4,
+  THREE_SQRT = Math.sqrt(3),
+  ONE_THIRD = 1 / 3;
+function isAroundZero(val) {
+  return val > -EPSILON && val < EPSILON;
+}
+function isNotAroundZero(val) {
+  return val > EPSILON || val < -EPSILON;
+}
+const _v0 = [0, 0],
+  _v1 = [0, 0],
+  _v2 = [0, 0];
+function distanceSquare(v1, v2) {
+  return (v1[0] - v2[0]) * (v1[0] - v2[0]) + (v1[1] - v2[1]) * (v1[1] - v2[1]);
+}
+function quadraticAt(p0, p1, p2, t) {
+  const onet = 1 - t;
+  return onet * (onet * p0 + 2 * t * p1) + t * t * p2;
+}
+function cubicAt(p0, p1, p2, p3, t) {
+  const onet = 1 - t;
+  return onet * onet * (onet * p0 + 3 * t * p1) + t * t * (t * p3 + 3 * onet * p2);
+}
+function quadraticRootAt(p0, p1, p2, val, roots) {
+  const a = p0 - 2 * p1 + p2,
+    b = 2 * (p1 - p0),
+    c = p0 - val;
+  let n = 0;
+  if (isAroundZero(a)) {
+    if (isNotAroundZero(b)) {
+      const t1 = -c / b;
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+    }
+  } else {
+    const disc = b * b - 4 * a * c;
+    if (isAroundZero(disc)) {
+      const t1 = -b / (2 * a);
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+    } else if (disc > 0) {
+      const discSqrt = Math.sqrt(disc),
+        t1 = (-b + discSqrt) / (2 * a),
+        t2 = (-b - discSqrt) / (2 * a);
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1), t2 >= 0 && t2 <= 1 && (roots[n++] = t2);
+    }
+  }
+  return n;
+}
+function quadraticExtremum(p0, p1, p2) {
+  const divider = p0 + p2 - 2 * p1;
+  return 0 === divider ? .5 : (p0 - p1) / divider;
+}
+function quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, out) {
+  let t = 0,
+    interval = .005,
+    d = 1 / 0;
+  _v0[0] = x, _v0[1] = y;
+  for (let _t = 0; _t < 1; _t += .05) {
+    _v1[0] = quadraticAt(x0, x1, x2, _t), _v1[1] = quadraticAt(y0, y1, y2, _t);
+    const d1 = distanceSquare(_v0, _v1);
+    d1 < d && (t = _t, d = d1);
+  }
+  d = 1 / 0;
+  for (let i = 0; i < 32 && !(interval < EPSILON_NUMERIC); i++) {
+    const prev = t - interval,
+      next = t + interval;
+    _v1[0] = quadraticAt(x0, x1, x2, prev), _v1[1] = quadraticAt(y0, y1, y2, prev);
+    const d1 = distanceSquare(_v1, _v0);
+    if (prev >= 0 && d1 < d) t = prev, d = d1;else {
+      _v2[0] = quadraticAt(x0, x1, x2, next), _v2[1] = quadraticAt(y0, y1, y2, next);
+      const d2 = distanceSquare(_v2, _v0);
+      next <= 1 && d2 < d ? (t = next, d = d2) : interval *= .5;
+    }
+  }
+  return out && (out[0] = quadraticAt(x0, x1, x2, t), out[1] = quadraticAt(y0, y1, y2, t)), Math.sqrt(d);
+}
+function cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, out) {
+  let prev,
+    next,
+    d1,
+    d2,
+    t = 0,
+    interval = .005,
+    d = 1 / 0;
+  _v0[0] = x, _v0[1] = y;
+  for (let _t = 0; _t < 1; _t += .05) _v1[0] = cubicAt(x0, x1, x2, x3, _t), _v1[1] = cubicAt(y0, y1, y2, y3, _t), d1 = distanceSquare(_v0, _v1), d1 < d && (t = _t, d = d1);
+  d = 1 / 0;
+  for (let i = 0; i < 32 && !(interval < EPSILON_NUMERIC); i++) prev = t - interval, next = t + interval, _v1[0] = cubicAt(x0, x1, x2, x3, prev), _v1[1] = cubicAt(y0, y1, y2, y3, prev), d1 = distanceSquare(_v1, _v0), prev >= 0 && d1 < d ? (t = prev, d = d1) : (_v2[0] = cubicAt(x0, x1, x2, x3, next), _v2[1] = cubicAt(y0, y1, y2, y3, next), d2 = distanceSquare(_v2, _v0), next <= 1 && d2 < d ? (t = next, d = d2) : interval *= .5);
+  return out && (out[0] = cubicAt(x0, x1, x2, x3, t), out[1] = cubicAt(y0, y1, y2, y3, t)), Math.sqrt(d);
+}
+function normalizeRadian(angle) {
+  return (angle %= pi2) < 0 && (angle += pi2), angle;
+}
+function containQuadStroke(x0, y0, x1, y1, x2, y2, lineWidth, x, y) {
+  if (0 === lineWidth) return !1;
+  const _l = lineWidth;
+  if (y > y0 + _l && y > y1 + _l && y > y2 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l) return !1;
+  return quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, null) <= _l / 2;
+}
+function containCubicStroke(x0, y0, x1, y1, x2, y2, x3, y3, lineWidth, x, y) {
+  if (0 === lineWidth) return !1;
+  const _l = lineWidth;
+  if (y > y0 + _l && y > y1 + _l && y > y2 + _l && y > y3 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l && y < y3 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l && x > x3 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l && x < x3 - _l) return !1;
+  return cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, null) <= _l / 2;
+}
+function containArcStroke(cx, cy, r, startAngle, endAngle, anticlockwise, lineWidth, x, y) {
+  if (0 === lineWidth) return !1;
+  const _l = lineWidth;
+  x -= cx, y -= cy;
+  const d = Math.sqrt(x * x + y * y);
+  if (d - _l > r || d + _l < r) return !1;
+  if (Math.abs(startAngle - endAngle) % pi2 < 1e-4) return !0;
+  if (anticlockwise) {
+    const tmp = startAngle;
+    startAngle = normalizeRadian(endAngle), endAngle = normalizeRadian(tmp);
+  } else startAngle = normalizeRadian(startAngle), endAngle = normalizeRadian(endAngle);
+  startAngle > endAngle && (endAngle += pi2);
+  let angle = Math.atan2(y, x);
+  return angle < 0 && (angle += pi2), angle >= startAngle && angle <= endAngle || angle + pi2 >= startAngle && angle + pi2 <= endAngle;
+}
+function containLineStroke(x0, y0, x1, y1, lineWidth, x, y) {
+  if (0 === lineWidth) return !1;
+  const _l = lineWidth,
+    _halfL = lineWidth / 2;
+  let _a = 0,
+    _b = x0;
+  if (y > y0 + _halfL && y > y1 + _halfL || y < y0 - _halfL && y < y1 - _halfL || x > x0 + _halfL && x > x1 + _halfL || x < x0 - _halfL && x < x1 - _halfL) return !1;
+  if (x0 === x1) return Math.abs(x - x0) <= _l / 2;
+  _a = (y0 - y1) / (x0 - x1), _b = (x0 * y1 - x1 * y0) / (x0 - x1);
+  const tmp = _a * x - y + _b;
+  return tmp * tmp / (_a * _a + 1) <= _l / 2 * _l / 2;
+}
+const EPSILON = 1e-4;
+function cubicRootAt(p0, p1, p2, p3, val, roots) {
+  const a = p3 + 3 * (p1 - p2) - p0,
+    b = 3 * (p2 - 2 * p1 + p0),
+    c = 3 * (p1 - p0),
+    d = p0 - val,
+    A = b * b - 3 * a * c,
+    B = b * c - 9 * a * d,
+    C = c * c - 3 * b * d;
+  let n = 0;
+  if (isAroundZero(A) && isAroundZero(B)) {
+    if (isAroundZero(b)) roots[0] = 0;else {
+      const t1 = -c / b;
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+    }
+  } else {
+    const disc = B * B - 4 * A * C;
+    if (isAroundZero(disc)) {
+      const K = B / A,
+        t1 = -b / a + K,
+        t2 = -K / 2;
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1), t2 >= 0 && t2 <= 1 && (roots[n++] = t2);
+    } else if (disc > 0) {
+      const discSqrt = Math.sqrt(disc);
+      let Y1 = A * b + 1.5 * a * (-B + discSqrt),
+        Y2 = A * b + 1.5 * a * (-B - discSqrt);
+      Y1 = Y1 < 0 ? -Math.pow(-Y1, ONE_THIRD) : Math.pow(Y1, ONE_THIRD), Y2 = Y2 < 0 ? -Math.pow(-Y2, ONE_THIRD) : Math.pow(Y2, ONE_THIRD);
+      const t1 = (-b - (Y1 + Y2)) / (3 * a);
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+    } else {
+      const T = (2 * A * b - 3 * a * B) / (2 * Math.sqrt(A * A * A)),
+        theta = Math.acos(T) / 3,
+        ASqrt = Math.sqrt(A),
+        tmp = Math.cos(theta),
+        t1 = (-b - 2 * ASqrt * tmp) / (3 * a),
+        t2 = (-b + ASqrt * (tmp + THREE_SQRT * Math.sin(theta))) / (3 * a),
+        t3 = (-b + ASqrt * (tmp - THREE_SQRT * Math.sin(theta))) / (3 * a);
+      t1 >= 0 && t1 <= 1 && (roots[n++] = t1), t2 >= 0 && t2 <= 1 && (roots[n++] = t2), t3 >= 0 && t3 <= 1 && (roots[n++] = t3);
+    }
+  }
+  return n;
+}
+function cubicExtrema(p0, p1, p2, p3, extrema) {
+  const b = 6 * p2 - 12 * p1 + 6 * p0,
+    a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2,
+    c = 3 * p1 - 3 * p0;
+  let n = 0;
+  if (isAroundZero(a)) {
+    if (isNotAroundZero(b)) {
+      const t1 = -c / b;
+      t1 >= 0 && t1 <= 1 && (extrema[n++] = t1);
+    }
+  } else {
+    const disc = b * b - 4 * a * c;
+    if (isAroundZero(disc)) extrema[0] = -b / (2 * a);else if (disc > 0) {
+      const discSqrt = Math.sqrt(disc),
+        t1 = (-b + discSqrt) / (2 * a),
+        t2 = (-b - discSqrt) / (2 * a);
+      t1 >= 0 && t1 <= 1 && (extrema[n++] = t1), t2 >= 0 && t2 <= 1 && (extrema[n++] = t2);
+    }
+  }
+  return n;
+}
+function isAroundEqual(a, b) {
+  return Math.abs(a - b) < EPSILON;
+}
+const roots = [-1, -1, -1],
+  extrema = [-1, -1];
+function swapExtrema() {
+  const tmp = extrema[0];
+  extrema[0] = extrema[1], extrema[1] = tmp;
+}
+function windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) {
+  if (y > y0 && y > y1 && y > y2 && y > y3 || y < y0 && y < y1 && y < y2 && y < y3) return 0;
+  const nRoots = cubicRootAt(y0, y1, y2, y3, y, roots);
+  if (0 === nRoots) return 0;
+  let w = 0,
+    nExtrema = -1,
+    y0_ = 0,
+    y1_ = 0;
+  for (let i = 0; i < nRoots; i++) {
+    const t = roots[i],
+      unit = 0 === t || 1 === t ? .5 : 1;
+    cubicAt(x0, x1, x2, x3, t) < x || (nExtrema < 0 && (nExtrema = cubicExtrema(y0, y1, y2, y3, extrema), extrema[1] < extrema[0] && nExtrema > 1 && swapExtrema(), y0_ = cubicAt(y0, y1, y2, y3, extrema[0]), nExtrema > 1 && (y1_ = cubicAt(y0, y1, y2, y3, extrema[1]))), 2 === nExtrema ? t < extrema[0] ? w += y0_ < y0 ? unit : -unit : t < extrema[1] ? w += y1_ < y0_ ? unit : -unit : w += y3 < y1_ ? unit : -unit : t < extrema[0] ? w += y0_ < y0 ? unit : -unit : w += y3 < y0_ ? unit : -unit);
+  }
+  return w;
+}
+function windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) {
+  if (y > y0 && y > y1 && y > y2 || y < y0 && y < y1 && y < y2) return 0;
+  const nRoots = quadraticRootAt(y0, y1, y2, y, roots);
+  if (0 === nRoots) return 0;
+  const t = quadraticExtremum(y0, y1, y2);
+  if (t >= 0 && t <= 1) {
+    let w = 0;
+    const y_ = quadraticAt(y0, y1, y2, t);
+    for (let i = 0; i < nRoots; i++) {
+      const unit = 0 === roots[i] || 1 === roots[i] ? .5 : 1;
+      quadraticAt(x0, x1, x2, roots[i]) < x || (roots[i] < t ? w += y_ < y0 ? unit : -unit : w += y2 < y_ ? unit : -unit);
+    }
+    return w;
+  }
+  const unit = 0 === roots[0] || 1 === roots[0] ? .5 : 1;
+  return quadraticAt(x0, x1, x2, roots[0]) < x ? 0 : y2 < y0 ? unit : -unit;
+}
+function windingArc(cx, cy, r, startAngle, endAngle, anticlockwise, x, y) {
+  if ((y -= cy) > r || y < -r) return 0;
+  const tmp = Math.sqrt(r * r - y * y);
+  roots[0] = -tmp, roots[1] = tmp;
+  const dTheta = Math.abs(startAngle - endAngle);
+  if (dTheta < 1e-4) return 0;
+  if (dTheta >= pi2 - 1e-4) {
+    startAngle = 0, endAngle = pi2;
+    const dir = anticlockwise ? 1 : -1;
+    return x >= roots[0] + cx && x <= roots[1] + cx ? dir : 0;
+  }
+  if (startAngle > endAngle) {
+    const tmp = startAngle;
+    startAngle = endAngle, endAngle = tmp;
+  }
+  startAngle < 0 && (startAngle += pi2, endAngle += pi2);
+  let w = 0;
+  for (let i = 0; i < 2; i++) {
+    const x_ = roots[i];
+    if (x_ + cx > x) {
+      let angle = Math.atan2(y, x_),
+        dir = anticlockwise ? 1 : -1;
+      angle < 0 && (angle = pi2 + angle), (angle >= startAngle && angle <= endAngle || angle + pi2 >= startAngle && angle + pi2 <= endAngle) && (angle > pi / 2 && angle < 1.5 * pi && (dir = -dir), w += dir);
+    }
+  }
+  return w;
+}
+function modpi2(radian) {
+  return Math.round(radian / pi * 1e8) / 1e8 % 2 * pi;
+}
+function normalizeArcAngles(angles, anticlockwise) {
+  let newStartAngle = modpi2(angles[0]);
+  newStartAngle < 0 && (newStartAngle += pi2);
+  const delta = newStartAngle - angles[0];
+  let newEndAngle = angles[1];
+  newEndAngle += delta, !anticlockwise && newEndAngle - newStartAngle >= pi2 ? newEndAngle = newStartAngle + pi2 : anticlockwise && newStartAngle - newEndAngle >= pi2 ? newEndAngle = newStartAngle - pi2 : !anticlockwise && newStartAngle > newEndAngle ? newEndAngle = newStartAngle + (pi2 - modpi2(newStartAngle - newEndAngle)) : anticlockwise && newStartAngle < newEndAngle && (newEndAngle = newStartAngle - (pi2 - modpi2(newEndAngle - newStartAngle))), angles[0] = newStartAngle, angles[1] = newEndAngle;
+}
+const tmpAngles = [0, 0];
+function containPath(commands, lineWidth, isStroke, x, y) {
+  const data = commands,
+    len = commands.length;
+  let x1,
+    y1,
+    w = 0,
+    xi = 0,
+    yi = 0,
+    x0 = 0,
+    y0 = 0;
+  for (let i = 0; i < len; i++) {
+    const command = data[i],
+      isFirst = 0 === i;
+    command[0] === enumCommandMap.M && i > 1 && (isStroke || (w += isPointInLine(xi, yi, x0, y0, x, y))), isFirst && (xi = command[1], yi = command[2], x0 = xi, y0 = yi);
+    const c0 = command[0],
+      c1 = command[1],
+      c2 = command[2],
+      c3 = command[3],
+      c4 = command[4],
+      c5 = command[5],
+      c6 = command[6];
+    let startAngle = c4,
+      endAngle = c5;
+    tmpAngles[0] = startAngle, tmpAngles[1] = endAngle, normalizeArcAngles(tmpAngles, Boolean(command[6])), startAngle = tmpAngles[0], endAngle = tmpAngles[1];
+    const theta = startAngle,
+      dTheta = endAngle - startAngle,
+      anticlockwise = !!(1 - (command[6] ? 0 : 1)),
+      _x = (x - c1) * c3 / c3 + c1;
+    switch (c0) {
+      case enumCommandMap.M:
+        x0 = c1, y0 = c2, xi = x0, yi = y0;
+        break;
+      case enumCommandMap.L:
+        if (isStroke) {
+          if (containLineStroke(xi, yi, c1, c2, lineWidth, x, y)) return !0;
+        } else w += isPointInLine(xi, yi, c1, c2, x, y) || 0;
+        xi = c1, yi = c2;
+        break;
+      case enumCommandMap.C:
+        if (isStroke) {
+          if (containCubicStroke(xi, yi, c1, c2, c3, c4, c5, c6, lineWidth, x, y)) return !0;
+        } else w += windingCubic(xi, yi, c1, c2, c3, c4, c5, c6, x, y) || 0;
+        xi = c5, yi = c6;
+        break;
+      case enumCommandMap.Q:
+        if (isStroke) {
+          if (containQuadStroke(xi, yi, c1, c2, c3, c4, lineWidth, x, y)) return !0;
+        } else w += windingQuadratic(xi, yi, c1, c2, c3, c4, x, y) || 0;
+        xi = c3, yi = c4;
+        break;
+      case enumCommandMap.A:
+        if (x1 = Math.cos(theta) * c3 + c1, y1 = Math.sin(theta) * c3 + c2, isFirst ? (x0 = x1, y0 = y1) : w += isPointInLine(xi, yi, x1, y1, x, y), isStroke) {
+          if (containArcStroke(c1, c2, c3, theta, theta + dTheta, anticlockwise, lineWidth, _x, y)) return !0;
+        } else w += windingArc(c1, c2, c3, theta, theta + dTheta, anticlockwise, _x, y);
+        xi = Math.cos(theta + dTheta) * c3 + c1, yi = Math.sin(theta + dTheta) * c3 + c2;
+        break;
+      case enumCommandMap.R:
+        if (x0 = xi = c1, y0 = yi = c2, x1 = x0 + c3, y1 = y0 + c4, isStroke) {
+          if (containLineStroke(x0, y0, x1, y0, lineWidth, x, y) || containLineStroke(x1, y0, x1, y1, lineWidth, x, y) || containLineStroke(x1, y1, x0, y1, lineWidth, x, y) || containLineStroke(x0, y1, x0, y0, lineWidth, x, y)) return !0;
+        } else w += isPointInLine(x1, y0, x1, y1, x, y), w += isPointInLine(x0, y1, x0, y0, x, y);
+        break;
+      case enumCommandMap.Z:
+        if (isStroke) {
+          if (containLineStroke(xi, yi, x0, y0, lineWidth, x, y)) return !0;
+        } else w += isPointInLine(xi, yi, x0, y0, x, y);
+        xi = x0, yi = y0;
+    }
+  }
+  return isStroke || isAroundEqual(yi, y0) || (w += isPointInLine(xi, yi, x0, y0, x, y) || 0), 0 !== w;
+}
+function contain(commands, x, y) {
+  return containPath(commands, 0, !1, x, y);
+}
+function containStroke(commands, lineWidth, x, y) {
+  return containPath(commands, lineWidth, !0, x, y);
+}
 
 class DefaultCanvasAllocate {
   constructor() {
@@ -3385,14 +3772,14 @@ class DefaultCanvasAllocate {
 }
 const canvasAllocate = new DefaultCanvasAllocate();
 
-var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   },
-  __metadata$E = undefined && undefined.__metadata || function (k, v) {
+  __metadata$F = undefined && undefined.__metadata || function (k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
   };
 const VWindow = Symbol.for("VWindow");
@@ -3529,16 +3916,16 @@ let DefaultWindow = class {
     return this._handler.getTopLeft(baseWindow);
   }
 };
-DefaultWindow = __decorate$M([injectable(), __metadata$E("design:paramtypes", [])], DefaultWindow);
+DefaultWindow = __decorate$N([injectable(), __metadata$F("design:paramtypes", [])], DefaultWindow);
 
-var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
     if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   },
-  __metadata$D = undefined && undefined.__metadata || function (k, v) {
+  __metadata$E = undefined && undefined.__metadata || function (k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
   },
   __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -3636,7 +4023,7 @@ let DefaultGraphicUtil = class {
     return c.nativeCanvas ? c.nativeCanvas : null;
   }
 };
-DefaultGraphicUtil = __decorate$L([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(TextMeasureContribution)), __metadata$D("design:paramtypes", [Object])], DefaultGraphicUtil);
+DefaultGraphicUtil = __decorate$M([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(TextMeasureContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGraphicUtil);
 var TransformMode;
 !function (TransformMode) {
   TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -3694,7 +4081,7 @@ let DefaultTransformUtil = class {
     return this;
   }
 };
-DefaultTransformUtil = __decorate$L([injectable(), __metadata$D("design:paramtypes", [])], DefaultTransformUtil);
+DefaultTransformUtil = __decorate$M([injectable(), __metadata$E("design:paramtypes", [])], DefaultTransformUtil);
 
 const defaultThemeObj = {
     arc: DefaultArcAttribute,
@@ -3706,6 +4093,7 @@ const defaultThemeObj = {
     text: DefaultTextAttribute,
     rect: DefaultRectAttribute,
     polygon: DefaultPolygonAttribute,
+    star: DefaultStarAttribute,
     richtext: DefaultRichTextAttribute,
     richtextIcon: DefaultRichTextIconAttribute,
     image: DefaultImageAttribute,
@@ -3724,6 +4112,7 @@ function newThemeObj() {
     text: Object.assign({}, defaultThemeObj.text),
     rect: Object.assign({}, defaultThemeObj.rect),
     polygon: Object.assign({}, defaultThemeObj.polygon),
+    star: Object.assign({}, defaultThemeObj.star),
     richtext: Object.assign({}, defaultThemeObj.richtext),
     richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
     image: Object.assign({}, defaultThemeObj.image),
@@ -4913,7 +5302,7 @@ class RectSymbol extends BaseSymbol {
 }
 var rect = new RectSymbol();
 
-const tempBounds$1 = new AABBBounds();
+const tempBounds = new AABBBounds();
 class CustomSymbolClass {
   constructor(type, path) {
     let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -4942,7 +5331,7 @@ class CustomSymbolClass {
         let {
           path: path
         } = _ref;
-        tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+        tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
       });
     }
     this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -5237,6 +5626,7 @@ genNumberType();
 const RECT_NUMBER_TYPE = genNumberType();
 genNumberType();
 const RICHTEXT_NUMBER_TYPE = genNumberType();
+genNumberType();
 const SYMBOL_NUMBER_TYPE = genNumberType();
 const TEXT_NUMBER_TYPE = genNumberType();
 const GraphicService = Symbol.for("GraphicService");
@@ -5259,109 +5649,630 @@ const DefaultStateAnimateConfig = {
   easing: "cubicOut"
 };
 
-const _tempBounds = new AABBBounds(),
-  tempMatrix = new Matrix(),
-  tempBounds = new AABBBounds();
-const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
-const tempConstantXYKey = ["x", "y"],
-  tempConstantScaleXYKey = ["scaleX", "scaleY"],
-  tempConstantAngleKey = ["angle"],
-  point = new Point();
-const NOWORK_ANIMATE_ATTR = {
-  strokeSeg: 1,
-  boundsPadding: 2,
-  pickMode: 1,
-  boundsMode: 1,
-  customPickShape: 1,
-  pickable: 1,
-  childrenPickable: 1,
-  visible: 1,
-  zIndex: 1,
-  layout: 1,
-  keepDirIn3d: 1,
-  globalZIndex: 1,
-  outerBorder: 1,
-  innerBorder: 1,
-  lineDash: 1,
-  lineCap: 1,
-  lineJoin: 1,
-  miterLimit: 2,
-  strokeBoundsBuffer: 2,
-  scaleCenter: 1,
-  anchor: 1,
-  anchor3d: 1,
-  postMatrix: 1,
-  backgroundMode: 2,
-  background: 1,
-  texture: 1,
-  cursor: 1,
-  html: 1
-};
-class Graphic extends Node {
-  static mixin(source) {
-    const keys = Object.keys(source);
-    for (let i = 0; i < keys.length; ++i) {
-      const propertyName = keys[i];
-      Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
-    }
+function identityMat4(out) {
+  return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, out;
+}
+function rotateX(out, a, rad) {
+  const s = Math.sin(rad),
+    c = Math.cos(rad),
+    a10 = a[4],
+    a11 = a[5],
+    a12 = a[6],
+    a13 = a[7],
+    a20 = a[8],
+    a21 = a[9],
+    a22 = a[10],
+    a23 = a[11];
+  return a !== out && (out[0] = a[0], out[1] = a[1], out[2] = a[2], out[3] = a[3], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[4] = a10 * c + a20 * s, out[5] = a11 * c + a21 * s, out[6] = a12 * c + a22 * s, out[7] = a13 * c + a23 * s, out[8] = a20 * c - a10 * s, out[9] = a21 * c - a11 * s, out[10] = a22 * c - a12 * s, out[11] = a23 * c - a13 * s, out;
+}
+function rotateY(out, a, rad) {
+  const s = Math.sin(rad),
+    c = Math.cos(rad),
+    a00 = a[0],
+    a01 = a[1],
+    a02 = a[2],
+    a03 = a[3],
+    a20 = a[8],
+    a21 = a[9],
+    a22 = a[10],
+    a23 = a[11];
+  return a !== out && (out[4] = a[4], out[5] = a[5], out[6] = a[6], out[7] = a[7], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[0] = a00 * c - a20 * s, out[1] = a01 * c - a21 * s, out[2] = a02 * c - a22 * s, out[3] = a03 * c - a23 * s, out[8] = a00 * s + a20 * c, out[9] = a01 * s + a21 * c, out[10] = a02 * s + a22 * c, out[11] = a03 * s + a23 * c, out;
+}
+function rotateZ(out, a, rad) {
+  const s = Math.sin(rad),
+    c = Math.cos(rad),
+    a00 = a[0],
+    a01 = a[1],
+    a02 = a[2],
+    a03 = a[3],
+    a10 = a[4],
+    a11 = a[5],
+    a12 = a[6],
+    a13 = a[7];
+  return a !== out && (out[8] = a[8], out[9] = a[9], out[10] = a[10], out[11] = a[11], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[0] = a00 * c + a10 * s, out[1] = a01 * c + a11 * s, out[2] = a02 * c + a12 * s, out[3] = a03 * c + a13 * s, out[4] = a10 * c - a00 * s, out[5] = a11 * c - a01 * s, out[6] = a12 * c - a02 * s, out[7] = a13 * c - a03 * s, out;
+}
+function translate(out, a, v) {
+  const x = v[0],
+    y = v[1],
+    z = v[2];
+  let a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23;
+  return a === out ? (out[12] = a[0] * x + a[4] * y + a[8] * z + a[12], out[13] = a[1] * x + a[5] * y + a[9] * z + a[13], out[14] = a[2] * x + a[6] * y + a[10] * z + a[14], out[15] = a[3] * x + a[7] * y + a[11] * z + a[15]) : (a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3], a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7], a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11], out[0] = a00, out[1] = a01, out[2] = a02, out[3] = a03, out[4] = a10, out[5] = a11, out[6] = a12, out[7] = a13, out[8] = a20, out[9] = a21, out[10] = a22, out[11] = a23, out[12] = a00 * x + a10 * y + a20 * z + a[12], out[13] = a01 * x + a11 * y + a21 * z + a[13], out[14] = a02 * x + a12 * y + a22 * z + a[14], out[15] = a03 * x + a13 * y + a23 * z + a[15]), out;
+}
+function mat3Tomat4(out, b) {
+  out[0] = b.a, out[1] = b.b, out[2] = 0, out[3] = 0, out[4] = b.c, out[5] = b.d, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = b.e, out[13] = b.f, out[14] = 0, out[15] = 1;
+}
+function scaleMat4(out, a, v) {
+  const x = v[0],
+    y = v[1],
+    z = v[2];
+  return out[0] = a[0] * x, out[1] = a[1] * x, out[2] = a[2] * x, out[3] = a[3] * x, out[4] = a[4] * y, out[5] = a[5] * y, out[6] = a[6] * y, out[7] = a[7] * y, out[8] = a[8] * z, out[9] = a[9] * z, out[10] = a[10] * z, out[11] = a[11] * z, out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15], out;
+}
+function multiplyMat4Mat4(out, a, b) {
+  const a00 = a[0],
+    a01 = a[1],
+    a02 = a[2],
+    a03 = a[3],
+    a10 = a[4],
+    a11 = a[5],
+    a12 = a[6],
+    a13 = a[7],
+    a20 = a[8],
+    a21 = a[9],
+    a22 = a[10],
+    a23 = a[11],
+    a30 = a[12],
+    a31 = a[13],
+    a32 = a[14],
+    a33 = a[15];
+  let b0 = b[0],
+    b1 = b[1],
+    b2 = b[2],
+    b3 = b[3];
+  return out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[4], b1 = b[5], b2 = b[6], b3 = b[7], out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[8], b1 = b[9], b2 = b[10], b3 = b[11], out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[12], b1 = b[13], b2 = b[14], b3 = b[15], out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, out;
+}
+
+function createMat4() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+class DefaultMatrixAllocate {
+  constructor() {
+    this.pools = [];
   }
-  get AABBBounds() {
-    return this.tryUpdateAABBBounds();
+  allocate(a, b, c, d, e, f) {
+    if (!this.pools.length) return new Matrix(a, b, c, d, e, f);
+    const m = this.pools.pop();
+    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
   }
-  get OBBBounds() {
-    return this.tryUpdateOBBBounds();
+  allocateByObj(matrix) {
+    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+    const m = this.pools.pop();
+    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
   }
-  get globalAABBBounds() {
-    return this.tryUpdateGlobalAABBBounds();
+  free(d) {
+    this.pools.push(d);
   }
-  get transMatrix() {
-    return this.tryUpdateLocalTransMatrix(!0);
+  get length() {
+    return this.pools.length;
   }
-  get globalTransMatrix() {
-    return this.tryUpdateGlobalTransMatrix(!0);
+  release() {
+    this.pools = [];
   }
+}
+class DefaultMat4Allocate {
   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(), 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);
-  }
-  getAttributes() {
-    return this.attribute;
+    this.pools = [];
   }
-  setMode(mode) {
-    "3d" === mode ? this.set3dMode() : this.set2dMode();
+  static identity(out) {
+    return identityMat4(out);
   }
-  set3dMode() {
-    this.in3dMode = !0;
+  allocate() {
+    if (!this.pools.length) return createMat4();
+    const m = this.pools.pop();
+    return DefaultMat4Allocate.identity(m), m;
   }
-  set2dMode() {
-    this.in3dMode = !1;
+  allocateByObj(d) {
+    let m;
+    m = this.pools.length ? this.pools.pop() : createMat4();
+    for (let i = 0; i < m.length; i++) m[i] = d[i];
+    return m;
   }
-  getOffsetXY(attr) {
-    let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-    var _a, _b;
-    const {
-      dx = attr.dx,
-      dy = attr.dy
-    } = this.attribute;
-    if (includeScroll && this.parent) {
-      const attribute = this.parent.attribute;
-      point.x = dx + (null !== (_a = attribute.scrollX) && void 0 !== _a ? _a : 0), point.y = dy + (null !== (_b = attribute.scrollY) && void 0 !== _b ? _b : 0);
-    } else point.x = dx, point.y = dy;
-    return point;
+  free(m) {
+    m && this.pools.push(m);
   }
-  onAnimateBind(animate) {
-    this._emitCustomEvent("animate-bind", animate);
+  get length() {
+    return this.pools.length;
   }
-  tryUpdateAABBBounds() {
-    const full = "imprecise" === this.attribute.boundsMode;
-    if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
-    if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
-    application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
-    const bounds = this.doUpdateAABBBounds(full);
-    return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+  release() {
+    this.pools = [];
   }
-  tryUpdateOBBBounds() {
+}
+const matrixAllocate = new DefaultMatrixAllocate();
+const mat4Allocate = new DefaultMat4Allocate();
+
+var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  },
+  __metadata$D = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  };
+const initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
+  globalPoint = {
+    x: 0,
+    y: 0
+  };
+let EmptyContext2d = class {
+  get nativeContext() {
+    return this.path;
+  }
+  constructor(canvas, dpr) {
+    this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D(), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+  }
+  getCanvas() {
+    throw new Error("不支持getCanvas");
+  }
+  getContext() {
+    throw new Error("不支持getContext");
+  }
+  setTransformForCurrent() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+    !force && this.applyedMatrix.equalToMatrix(this.matrix) || (this.applyedMatrix = this.cloneMatrix(this.matrix));
+  }
+  get currentMatrix() {
+    return this.matrix;
+  }
+  cloneMatrix(m) {
+    return matrixAllocate.allocateByObj(m);
+  }
+  clear() {
+    this.save(), this.resetTransform(), this.restore();
+  }
+  reset() {
+    this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0;
+  }
+  restore() {
+    this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop(), this.setTransformForCurrent());
+  }
+  highPerformanceRestore() {
+    this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop());
+  }
+  rotate(rad) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    this.matrix.rotate(rad), setTransform && this.setTransformForCurrent();
+  }
+  save() {
+    const matrix = this.cloneMatrix(this.matrix);
+    this.stack.push(matrix);
+  }
+  highPerformanceSave() {
+    const matrix = this.cloneMatrix(this.matrix);
+    this.stack.push(matrix);
+  }
+  scale(sx, sy) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+    this.matrix.scale(sx, sy), setTransform && this.setTransformForCurrent();
+  }
+  setScale(sx, sy) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+    this.matrix.setScale(sx, sy), setTransform && this.setTransformForCurrent();
+  }
+  scalePoint(sx, sy, px, py) {
+    let setTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !0;
+    this.translate(px, py, !1), this.scale(sx, sy, !1), this.translate(-px, -py, !1), setTransform && this.setTransformForCurrent();
+  }
+  setTransform(a, b, c, d, e, f) {
+    let setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+    let dpr = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : this.dpr;
+    this.matrix.setValue(dpr * a, dpr * b, dpr * c, dpr * d, dpr * e, dpr * f), setTransform && this.setTransformForCurrent();
+  }
+  setTransformFromMatrix(matrix) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    let dpr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.dpr;
+    this.matrix.setValue(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr), setTransform && this.setTransformForCurrent();
+  }
+  resetTransform() {
+    let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
+    this.setTransform(dpr, 0, 0, dpr, 0, 0), setTransform && this.setTransformForCurrent();
+  }
+  transform(a, b, c, d, e, f) {
+    let setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+    this.matrix.multiply(a, b, c, d, e, f), setTransform && this.setTransformForCurrent();
+  }
+  transformFromMatrix(matrix, setTransform) {
+    this.matrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), setTransform && this.setTransformForCurrent();
+  }
+  translate(x, y) {
+    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+    this.matrix.translate(x, y), setTransform && this.setTransformForCurrent();
+  }
+  rotateDegrees(deg) {
+    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    const rad = deg * Math.PI / 180;
+    this.rotate(rad, setTransform);
+  }
+  rotateAbout(rad, x, y) {
+    let setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
+    this.translate(x, y, !1), this.rotate(rad, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
+  }
+  rotateDegreesAbout(deg, x, y) {
+    let setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
+    this.translate(x, y, !1), this.rotateDegrees(deg, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
+  }
+  beginPath() {
+    this.path.clear();
+  }
+  clip(path, fillRule) {}
+  arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+    this.path.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+  }
+  arcTo(x1, y1, x2, y2, radiusX) {
+    this.path.arcTo(x1, y1, x2, y2, radiusX);
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+  closePath() {
+    this.path.closePath();
+  }
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {}
+  lineTo(x, y) {
+    this.path.lineTo(x, y);
+  }
+  moveTo(x, y) {
+    this.path.moveTo(x, y);
+  }
+  quadraticCurveTo(cpx, cpy, x, y) {
+    this.path.quadraticCurveTo(cpx, cpy, x, y);
+  }
+  rect(x, y, w, h) {
+    this.path.rect(x, y, w, h);
+  }
+  createImageData(imageDataOrSw, sh) {
+    return null;
+  }
+  createLinearGradient(x0, y0, x1, y1) {
+    throw new Error("不支持createLinearGradient");
+  }
+  createPattern(image, repetition) {
+    throw new Error("不支持createPattern");
+  }
+  createRadialGradient(x0, y0, r0, x1, y1, r1) {
+    throw new Error("不支持createRadialGradient");
+  }
+  createConicGradient(x, y, startAngle, endAngle) {
+    return null;
+  }
+  fill(path, fillRule) {}
+  fillRect(x, y, width, height) {
+    this.path.rect(x, y, width, height);
+  }
+  clearRect(x, y, w, h) {}
+  fillText(text, x, y) {}
+  getImageData(sx, sy, sw, sh) {
+    return null;
+  }
+  getLineDash() {
+    return [];
+  }
+  isPointInPath(x, y) {
+    return this.matrix.transformPoint({
+      x: x,
+      y: y
+    }, globalPoint), contain(this.path.commandList, globalPoint.x, globalPoint.y);
+  }
+  isPointInStroke(x, y) {
+    if (!this.lineWidth) return !1;
+    this.matrix.transformPoint({
+      x: x,
+      y: y
+    }, globalPoint);
+    const lineWidth = getScaledStroke(this, this.lineWidth, this.dpr);
+    return containStroke(this.path.commandList, lineWidth, globalPoint.x, globalPoint.y);
+  }
+  measureText(text) {
+    throw new Error("不支持measureText");
+  }
+  putImageData(imagedata, dx, dy) {
+    throw new Error("不支持measureText");
+  }
+  setLineDash(segments) {}
+  stroke(path) {}
+  strokeRect(x, y, width, height) {
+    this.path.rect(x, y, width, height);
+  }
+  strokeText(text, x, y) {}
+  drawImage() {}
+  setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {}
+  _setCommonStyle(params, offsetX, offsetY, defaultParams) {}
+  setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {}
+  _setStrokeStyle(params, offsetX, offsetY, defaultParams) {}
+  setTextStyleWithoutAlignBaseline(params, defaultParams) {}
+  setTextStyle(params, defaultParams) {}
+  draw() {}
+  clearMatrix() {
+    let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
+    this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+  }
+  setClearMatrix(a, b, c, d, e, f) {
+    this._clearMatrix.setValue(a, b, c, d, e, f);
+  }
+  onlyTranslate() {
+    let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
+    return this.matrix.a === dpr && 0 === this.matrix.b && 0 === this.matrix.c && this.matrix.d === dpr;
+  }
+  release() {
+    this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
+  }
+};
+EmptyContext2d = __decorate$L([injectable(), __metadata$D("design:paramtypes", [Object, Number])], EmptyContext2d);
+
+var ColorType;
+!function (ColorType) {
+  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
+}(ColorType || (ColorType = {}));
+class ColorStore {
+  static Get(str) {
+    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
+    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
+    if (size === ColorType.Color1) {
+      const color = ColorStore.store1[str];
+      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+      const c = Color.parseColorString(str);
+      if (c) {
+        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
+      }
+      return arr;
+    }
+    const color = ColorStore.store255[str];
+    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+    const c = Color.parseColorString(str);
+    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
+  }
+  static Set(str, size, arr) {
+    if (size === ColorType.Color1) {
+      if (ColorStore.store1[str]) return;
+      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
+    } else {
+      if (ColorStore.store255[str]) return;
+      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
+    }
+  }
+}
+ColorStore.store255 = {}, ColorStore.store1 = {};
+
+function colorArrayToString(color) {
+  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
+}
+function interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
+    return new Array(4).fill(0).map((_, index) => {
+      var _a, _b;
+      return _interpolateColor(isArray(from) ? null !== (_a = from[index]) && void 0 !== _a ? _a : from[0] : from, isArray(to) ? null !== (_b = to[index]) && void 0 !== _b ? _b : to[0] : to, ratio, alphaChannel);
+    });
+  }
+  return _interpolateColor(from, to, ratio, alphaChannel, cb);
+}
+function _interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
+  let fromArray,
+    toArray,
+    fromGradient = !1,
+    toGradient = !1;
+  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
+    const gradient = fromGradient ? from : to,
+      pure = fromGradient ? to : from,
+      gradientFromPure = Object.assign(Object.assign({}, gradient), {
+        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
+          color: colorArrayToString(pure)
+        }))
+      });
+    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
+  }
+  if (fromGradient) {
+    if (from.gradient === to.gradient) {
+      const fc = from,
+        tc = to,
+        fromStops = fc.stops,
+        toStops = tc.stops;
+      if (fromStops.length !== toStops.length) return !1;
+      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
+      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
+      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
+    }
+    return !1;
+  }
+  cb && cb(fromArray, toArray);
+  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
+}
+function interpolateGradientLinearColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "linear",
+    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolateGradientRadialColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "radial",
+    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
+    r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolateGradientConicalColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "conical",
+    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
+    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
+    x: fc.x + (tc.x - fc.x) * ratio,
+    y: fc.y + (tc.y - fc.y) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
+}
+function interpolatePureColorArray(from, to, ratio) {
+  return [from[0] + (to[0] - from[0]) * ratio, from[1] + (to[1] - from[1]) * ratio, from[2] + (to[2] - from[2]) * ratio, from[3] + (to[3] - from[3]) * ratio];
+}
+function interpolatePureColorArrayToStr(from, to, ratio) {
+  return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
+}
+const _fromColorRGB = [0, 0, 0, 0],
+  _toColorRGB = [0, 0, 0, 0];
+function colorStringInterpolationToStr(fromColor, toColor, ratio) {
+  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
+}
+
+function getConicGradientAt(x, y, angle, color) {
+  const {
+    stops: stops,
+    startAngle: startAngle,
+    endAngle: endAngle
+  } = color;
+  for (; angle < 0;) angle += pi2;
+  for (; angle > pi2;) angle -= pi2;
+  if (angle < startAngle) return stops[0].color;
+  if (angle > endAngle) return stops[0].color;
+  let startStop,
+    endStop,
+    percent = (angle - startAngle) / (endAngle - startAngle);
+  for (let i = 0; i < stops.length; i++) if (stops[i].offset >= percent) {
+    startStop = stops[i - 1], endStop = stops[i];
+    break;
+  }
+  return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), interpolateColor(startStop.color, endStop.color, percent, !1);
+}
+
+const _tempBounds = new AABBBounds(),
+  tempMatrix = new Matrix();
+  new AABBBounds();
+const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
+const tempConstantXYKey = ["x", "y"],
+  tempConstantScaleXYKey = ["scaleX", "scaleY"],
+  tempConstantAngleKey = ["angle"],
+  point = new Point();
+const NOWORK_ANIMATE_ATTR = {
+  strokeSeg: 1,
+  boundsPadding: 2,
+  pickMode: 1,
+  boundsMode: 1,
+  customPickShape: 1,
+  pickable: 1,
+  childrenPickable: 1,
+  visible: 1,
+  zIndex: 1,
+  layout: 1,
+  keepDirIn3d: 1,
+  globalZIndex: 1,
+  outerBorder: 1,
+  innerBorder: 1,
+  lineDash: 1,
+  lineCap: 1,
+  lineJoin: 1,
+  miterLimit: 2,
+  strokeBoundsBuffer: 2,
+  scaleCenter: 1,
+  anchor: 1,
+  anchor3d: 1,
+  postMatrix: 1,
+  backgroundMode: 2,
+  background: 1,
+  texture: 1,
+  cursor: 1,
+  html: 1
+};
+class Graphic extends Node {
+  static mixin(source) {
+    const keys = Object.keys(source);
+    for (let i = 0; i < keys.length; ++i) {
+      const propertyName = keys[i];
+      Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
+    }
+  }
+  get AABBBounds() {
+    return this.tryUpdateAABBBounds();
+  }
+  get OBBBounds() {
+    return this.tryUpdateOBBBounds();
+  }
+  get globalAABBBounds() {
+    return this.tryUpdateGlobalAABBBounds();
+  }
+  get transMatrix() {
+    return this.tryUpdateLocalTransMatrix(!0);
+  }
+  get globalTransMatrix() {
+    return this.tryUpdateGlobalTransMatrix(!0);
+  }
+  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(), 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);
+  }
+  getAttributes() {
+    return this.attribute;
+  }
+  setMode(mode) {
+    "3d" === mode ? this.set3dMode() : this.set2dMode();
+  }
+  set3dMode() {
+    this.in3dMode = !0;
+  }
+  set2dMode() {
+    this.in3dMode = !1;
+  }
+  getOffsetXY(attr) {
+    let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+    var _a, _b;
+    const {
+      dx = attr.dx,
+      dy = attr.dy
+    } = this.attribute;
+    if (includeScroll && this.parent) {
+      const attribute = this.parent.attribute;
+      point.x = dx + (null !== (_a = attribute.scrollX) && void 0 !== _a ? _a : 0), point.y = dy + (null !== (_b = attribute.scrollY) && void 0 !== _b ? _b : 0);
+    } else point.x = dx, point.y = dy;
+    return point;
+  }
+  onAnimateBind(animate) {
+    this._emitCustomEvent("animate-bind", animate);
+  }
+  tryUpdateAABBBounds() {
+    const full = "imprecise" === this.attribute.boundsMode;
+    if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
+    if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
+    application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+    const bounds = this.doUpdateAABBBounds(full);
+    return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), 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();
@@ -5499,6 +6410,9 @@ class Graphic extends Node {
       y: y
     });
   }
+  setWidthHeightWithoutTransform(aabbBounds) {
+    this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+  }
   setAttributesAndPreventAnimate(params) {
     let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -5666,7 +6580,7 @@ class Graphic extends Node {
       keys.forEach(key => {
         noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
       });
-      const stateAnimateConfig = null !== (_b = null !== (_a = this.context.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : DefaultStateAnimateConfig;
+      const stateAnimateConfig = null !== (_b = null !== (_a = this.context && this.context.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : DefaultStateAnimateConfig;
       this.applyAnimationState(["state"], [{
         name: "state",
         animation: {
@@ -5774,24 +6688,12 @@ class Graphic extends Node {
   needUpdateLayout() {
     return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
   }
-  getAnchor(anchor, params) {
+  getAnchor(anchor, params, resetScale) {
     const _anchor = [0, 0],
       getBounds = () => {
         if (params.b) return params.b;
-        const {
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle
-        } = this.attribute;
-        return tempBounds.copy(this._AABBBounds), this.setAttributes({
-          scaleX: 1,
-          scaleY: 1,
-          angle: 0
-        }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle
-        }), params.b;
+        const graphic = this.clone();
+        return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
       };
     if ("string" == typeof anchor[0]) {
       const ratio = parseFloat(anchor[0]) / 100,
@@ -5818,9 +6720,9 @@ class Graphic extends Node {
     } = this.attribute;
     let _anchor = [0, 0];
     const params = {};
-    if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+    if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
       const m = this._transMatrix;
-      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
         x: _anchor[0],
         y: _anchor[1]
       });
@@ -5938,6 +6840,15 @@ class Graphic extends Node {
       changeEvent.bubbles = !1, changeEvent.manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager, this.dispatchEvent(changeEvent);
     }
   }
+  toCustomPath() {
+    var _a, _b, _c;
+    const renderer = null === (_c = null === (_b = (null === (_a = this.stage) || void 0 === _a ? void 0 : _a.renderService) || application.renderService) || void 0 === _b ? void 0 : _b.drawContribution) || void 0 === _c ? void 0 : _c.getRenderContribution(this);
+    if (renderer) {
+      const context = new EmptyContext2d(null, 1);
+      return renderer.drawShape(this, context, 0, 0, {}, {}), context.path;
+    }
+    return null;
+  }
 }
 function backgroundNotImage(image) {
   return !(!image.fill && !image.stroke);
@@ -6429,246 +7340,90 @@ function calculateArcCornerRadius(arc, startAngle, endAngle, innerRadius, outerR
         by = yore - oc[1],
         kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),
         lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);
-      limitedIcr = min(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
-    }
-  }
-  return {
-    outerDeltaAngle: outerDeltaAngle,
-    xors: xors,
-    yors: yors,
-    xirs: xirs,
-    yirs: yirs,
-    xore: xore,
-    yore: yore,
-    xire: xire,
-    yire: yire,
-    limitedOcr: limitedOcr,
-    limitedIcr: limitedIcr,
-    outerCornerRadiusStart: outerCornerRadiusStart,
-    outerCornerRadiusEnd: outerCornerRadiusEnd,
-    maxOuterCornerRadius: maxOuterCornerRadius,
-    maxInnerCornerRadius: maxInnerCornerRadius,
-    outerStartAngle: outerStartAngle,
-    outerEndAngle: outerEndAngle,
-    innerDeltaAngle: innerDeltaAngle,
-    innerEndAngle: innerEndAngle,
-    innerStartAngle: innerStartAngle,
-    innerCornerRadiusStart: innerCornerRadiusStart,
-    innerCornerRadiusEnd: innerCornerRadiusEnd
-  };
-}
-function drawArcPath(arc, context, cx, cy, outerRadius, innerRadius, partStroke) {
-  const {
-      startAngle: startAngle,
-      endAngle: endAngle
-    } = arc.getParsedAngle(),
-    deltaAngle = abs(endAngle - startAngle),
-    clockwise = endAngle > startAngle;
-  let collapsedToLine = !1;
-  if (outerRadius < innerRadius) {
-    const temp = outerRadius;
-    outerRadius = innerRadius, innerRadius = temp;
-  }
-  if (outerRadius <= epsilon) context.moveTo(cx, cy);else if (deltaAngle >= pi2 - epsilon) context.moveTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (context.moveTo(cx + innerRadius * cos(endAngle), cy + innerRadius * sin(endAngle)), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise));else {
-    const {
-      outerDeltaAngle: outerDeltaAngle,
-      xors: xors,
-      yors: yors,
-      xirs: xirs,
-      yirs: yirs,
-      limitedOcr: limitedOcr,
-      outerCornerRadiusStart: outerCornerRadiusStart,
-      outerCornerRadiusEnd: outerCornerRadiusEnd,
-      maxOuterCornerRadius: maxOuterCornerRadius,
-      xore: xore,
-      yore: yore,
-      xire: xire,
-      yire: yire,
-      outerStartAngle: outerStartAngle,
-      outerEndAngle: outerEndAngle,
-      limitedIcr: limitedIcr,
-      innerDeltaAngle: innerDeltaAngle,
-      innerEndAngle: innerEndAngle,
-      innerStartAngle: innerStartAngle,
-      innerCornerRadiusStart: innerCornerRadiusStart,
-      innerCornerRadiusEnd: innerCornerRadiusEnd,
-      maxInnerCornerRadius: maxInnerCornerRadius
-    } = calculateArcCornerRadius(arc, startAngle, endAngle, innerRadius, outerRadius);
-    if (outerDeltaAngle < .001) partStroke && (partStroke[3] || partStroke[1]) && context.moveTo(cx + xors, cy + yors), collapsedToLine = !0;else if (limitedOcr > epsilon) {
-      const cornerRadiusStart = min(outerCornerRadiusStart, limitedOcr),
-        cornerRadiusEnd = min(outerCornerRadiusEnd, limitedOcr),
-        t0 = cornerTangents(xirs, yirs, xors, yors, outerRadius, cornerRadiusStart, Number(clockwise)),
-        t1 = cornerTangents(xore, yore, xire, yire, outerRadius, cornerRadiusEnd, Number(clockwise));
-      limitedOcr < maxOuterCornerRadius && cornerRadiusStart === cornerRadiusEnd ? !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), context.arc(cx + t0.cx, cy + t0.cy, limitedOcr, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !clockwise)) : context.moveTo(cx + t0.cx + limitedOcr * cos(atan2(t1.y01, t1.x01)), cy + t0.cy + limitedOcr * sin(atan2(t1.y01, t1.x01))) : !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), cornerRadiusStart > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusStart, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, outerRadius, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !clockwise), cornerRadiusEnd > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusEnd, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !clockwise)) : cornerRadiusEnd > 0 ? context.moveTo(cx + t1.cx + cornerRadiusEnd * cos(atan2(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusEnd * sin(atan2(t1.y01, t1.x01))) : context.moveTo(cx + xore, cy + outerRadius * sin(outerEndAngle));
-    } else !partStroke || partStroke[0] ? (context.moveTo(cx + xors, cy + yors), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise)) : context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + outerRadius * sin(outerEndAngle));
-    if (!(innerRadius > epsilon) || innerDeltaAngle < .001) !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), collapsedToLine = !0;else if (limitedIcr > epsilon) {
-      const cornerRadiusStart = min(innerCornerRadiusStart, limitedIcr),
-        cornerRadiusEnd = min(innerCornerRadiusEnd, limitedIcr),
-        t0 = cornerTangents(xire, yire, xore, yore, innerRadius, -cornerRadiusEnd, Number(clockwise)),
-        t1 = cornerTangents(xors, yors, xirs, yirs, innerRadius, -cornerRadiusStart, Number(clockwise));
-      if (!partStroke || partStroke[1] ? context.lineTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01) : context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), limitedIcr < maxInnerCornerRadius && cornerRadiusStart === cornerRadiusEnd) {
-        const arcEndAngle = atan2(t1.y01, t1.x01);
-        !partStroke || partStroke[2] ? context.arc(cx + t0.cx, cy + t0.cy, limitedIcr, atan2(t0.y01, t0.x01), arcEndAngle, !clockwise) : context.moveTo(cx + t0.cx + cos(arcEndAngle), cy + t0.cy + sin(arcEndAngle));
-      } else !partStroke || partStroke[2] ? (cornerRadiusEnd > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusEnd, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, innerRadius, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), clockwise), cornerRadiusStart > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusStart, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !clockwise)) : cornerRadiusStart > 0 ? context.moveTo(cx + t1.cx + cornerRadiusStart * cos(atan2(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusStart * sin(atan2(t1.y01, t1.x01))) : context.moveTo(cx + xirs, cy + yirs);
-    } else !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), !partStroke || partStroke[2] ? context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise) : context.moveTo(cx + innerRadius * cos(innerStartAngle), cy + innerRadius * sin(innerStartAngle));
-  }
-  return partStroke ? partStroke[3] && context.lineTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)) : context.closePath(), collapsedToLine;
-}
-
-var ColorType;
-!function (ColorType) {
-  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
-}(ColorType || (ColorType = {}));
-class ColorStore {
-  static Get(str) {
-    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
-    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
-    if (size === ColorType.Color1) {
-      const color = ColorStore.store1[str];
-      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-      const c = Color.parseColorString(str);
-      if (c) {
-        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
-      }
-      return arr;
-    }
-    const color = ColorStore.store255[str];
-    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-    const c = Color.parseColorString(str);
-    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
-  }
-  static Set(str, size, arr) {
-    if (size === ColorType.Color1) {
-      if (ColorStore.store1[str]) return;
-      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
-    } else {
-      if (ColorStore.store255[str]) return;
-      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
-    }
-  }
-}
-ColorStore.store255 = {}, ColorStore.store1 = {};
-
-function colorArrayToString(color) {
-  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
-}
-function interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
-    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
-  }
-  return _interpolateColor(from, to, ratio, alphaChannel, cb);
-}
-function _interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
-  let fromArray,
-    toArray,
-    fromGradient = !1,
-    toGradient = !1;
-  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
-    const gradient = fromGradient ? from : to,
-      pure = fromGradient ? to : from,
-      gradientFromPure = Object.assign(Object.assign({}, gradient), {
-        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
-          color: colorArrayToString(pure)
-        }))
-      });
-    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
-  }
-  if (fromGradient) {
-    if (from.gradient === to.gradient) {
-      const fc = from,
-        tc = to,
-        fromStops = fc.stops,
-        toStops = tc.stops;
-      if (fromStops.length !== toStops.length) return !1;
-      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
-      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
-      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
-    }
-    return !1;
-  }
-  cb && cb(fromArray, toArray);
-  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
-}
-function interpolateGradientLinearColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "linear",
-    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
-}
-function interpolateGradientRadialColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "radial",
-    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
-    r1: fc.r1 + (tc.r1 - fc.r1) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
-}
-function interpolateGradientConicalColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "conical",
-    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
-    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
-    x: fc.x + (tc.x - fc.x) * ratio,
-    y: fc.y + (tc.y - fc.y) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
+      limitedIcr = min(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
+    }
+  }
+  return {
+    outerDeltaAngle: outerDeltaAngle,
+    xors: xors,
+    yors: yors,
+    xirs: xirs,
+    yirs: yirs,
+    xore: xore,
+    yore: yore,
+    xire: xire,
+    yire: yire,
+    limitedOcr: limitedOcr,
+    limitedIcr: limitedIcr,
+    outerCornerRadiusStart: outerCornerRadiusStart,
+    outerCornerRadiusEnd: outerCornerRadiusEnd,
+    maxOuterCornerRadius: maxOuterCornerRadius,
+    maxInnerCornerRadius: maxInnerCornerRadius,
+    outerStartAngle: outerStartAngle,
+    outerEndAngle: outerEndAngle,
+    innerDeltaAngle: innerDeltaAngle,
+    innerEndAngle: innerEndAngle,
+    innerStartAngle: innerStartAngle,
+    innerCornerRadiusStart: innerCornerRadiusStart,
+    innerCornerRadiusEnd: innerCornerRadiusEnd
   };
 }
-function interpolatePureColorArray(from, to, ratio) {
-  return [from[0] + (to[0] - from[0]) * ratio, from[1] + (to[1] - from[1]) * ratio, from[2] + (to[2] - from[2]) * ratio, from[3] + (to[3] - from[3]) * ratio];
-}
-function interpolatePureColorArrayToStr(from, to, ratio) {
-  return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
-}
-const _fromColorRGB = [0, 0, 0, 0],
-  _toColorRGB = [0, 0, 0, 0];
-function colorStringInterpolationToStr(fromColor, toColor, ratio) {
-  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
-}
-
-function getConicGradientAt(x, y, angle, color) {
+function drawArcPath(arc, context, cx, cy, outerRadius, innerRadius, partStroke) {
   const {
-    stops: stops,
-    startAngle: startAngle,
-    endAngle: endAngle
-  } = color;
-  for (; angle < 0;) angle += pi2;
-  for (; angle > pi2;) angle -= pi2;
-  if (angle < startAngle) return stops[0].color;
-  if (angle > endAngle) return stops[0].color;
-  let startStop,
-    endStop,
-    percent = (angle - startAngle) / (endAngle - startAngle);
-  for (let i = 0; i < stops.length; i++) if (stops[i].offset >= percent) {
-    startStop = stops[i - 1], endStop = stops[i];
-    break;
+      startAngle: startAngle,
+      endAngle: endAngle
+    } = arc.getParsedAngle(),
+    deltaAngle = abs(endAngle - startAngle),
+    clockwise = endAngle > startAngle;
+  let collapsedToLine = !1;
+  if (outerRadius < innerRadius) {
+    const temp = outerRadius;
+    outerRadius = innerRadius, innerRadius = temp;
   }
-  return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), interpolateColor(startStop.color, endStop.color, percent, !1);
+  if (outerRadius <= epsilon) context.moveTo(cx, cy);else if (deltaAngle >= pi2 - epsilon) context.moveTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (context.moveTo(cx + innerRadius * cos(endAngle), cy + innerRadius * sin(endAngle)), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise));else {
+    const {
+      outerDeltaAngle: outerDeltaAngle,
+      xors: xors,
+      yors: yors,
+      xirs: xirs,
+      yirs: yirs,
+      limitedOcr: limitedOcr,
+      outerCornerRadiusStart: outerCornerRadiusStart,
+      outerCornerRadiusEnd: outerCornerRadiusEnd,
+      maxOuterCornerRadius: maxOuterCornerRadius,
+      xore: xore,
+      yore: yore,
+      xire: xire,
+      yire: yire,
+      outerStartAngle: outerStartAngle,
+      outerEndAngle: outerEndAngle,
+      limitedIcr: limitedIcr,
+      innerDeltaAngle: innerDeltaAngle,
+      innerEndAngle: innerEndAngle,
+      innerStartAngle: innerStartAngle,
+      innerCornerRadiusStart: innerCornerRadiusStart,
+      innerCornerRadiusEnd: innerCornerRadiusEnd,
+      maxInnerCornerRadius: maxInnerCornerRadius
+    } = calculateArcCornerRadius(arc, startAngle, endAngle, innerRadius, outerRadius);
+    if (outerDeltaAngle < .001) partStroke && (partStroke[3] || partStroke[1]) && context.moveTo(cx + xors, cy + yors), collapsedToLine = !0;else if (limitedOcr > epsilon) {
+      const cornerRadiusStart = min(outerCornerRadiusStart, limitedOcr),
+        cornerRadiusEnd = min(outerCornerRadiusEnd, limitedOcr),
+        t0 = cornerTangents(xirs, yirs, xors, yors, outerRadius, cornerRadiusStart, Number(clockwise)),
+        t1 = cornerTangents(xore, yore, xire, yire, outerRadius, cornerRadiusEnd, Number(clockwise));
+      limitedOcr < maxOuterCornerRadius && cornerRadiusStart === cornerRadiusEnd ? !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), context.arc(cx + t0.cx, cy + t0.cy, limitedOcr, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !clockwise)) : context.moveTo(cx + t0.cx + limitedOcr * cos(atan2(t1.y01, t1.x01)), cy + t0.cy + limitedOcr * sin(atan2(t1.y01, t1.x01))) : !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), cornerRadiusStart > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusStart, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, outerRadius, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !clockwise), cornerRadiusEnd > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusEnd, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !clockwise)) : cornerRadiusEnd > 0 ? context.moveTo(cx + t1.cx + cornerRadiusEnd * cos(atan2(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusEnd * sin(atan2(t1.y01, t1.x01))) : context.moveTo(cx + xore, cy + outerRadius * sin(outerEndAngle));
+    } else !partStroke || partStroke[0] ? (context.moveTo(cx + xors, cy + yors), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise)) : context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + outerRadius * sin(outerEndAngle));
+    if (!(innerRadius > epsilon) || innerDeltaAngle < .001) !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), collapsedToLine = !0;else if (limitedIcr > epsilon) {
+      const cornerRadiusStart = min(innerCornerRadiusStart, limitedIcr),
+        cornerRadiusEnd = min(innerCornerRadiusEnd, limitedIcr),
+        t0 = cornerTangents(xire, yire, xore, yore, innerRadius, -cornerRadiusEnd, Number(clockwise)),
+        t1 = cornerTangents(xors, yors, xirs, yirs, innerRadius, -cornerRadiusStart, Number(clockwise));
+      if (!partStroke || partStroke[1] ? context.lineTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01) : context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), limitedIcr < maxInnerCornerRadius && cornerRadiusStart === cornerRadiusEnd) {
+        const arcEndAngle = atan2(t1.y01, t1.x01);
+        !partStroke || partStroke[2] ? context.arc(cx + t0.cx, cy + t0.cy, limitedIcr, atan2(t0.y01, t0.x01), arcEndAngle, !clockwise) : context.moveTo(cx + t0.cx + cos(arcEndAngle), cy + t0.cy + sin(arcEndAngle));
+      } else !partStroke || partStroke[2] ? (cornerRadiusEnd > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusEnd, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, innerRadius, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), clockwise), cornerRadiusStart > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusStart, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !clockwise)) : cornerRadiusStart > 0 ? context.moveTo(cx + t1.cx + cornerRadiusStart * cos(atan2(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusStart * sin(atan2(t1.y01, t1.x01))) : context.moveTo(cx + xirs, cy + yirs);
+    } else !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), !partStroke || partStroke[2] ? context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise) : context.moveTo(cx + innerRadius * cos(innerStartAngle), cy + innerRadius * sin(innerStartAngle));
+  }
+  return partStroke ? partStroke[3] && context.lineTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)) : context.closePath(), collapsedToLine;
 }
 
 const ArcRenderContribution = Symbol.for("ArcRenderContribution");
@@ -6691,146 +7446,6 @@ function textLayoutOffsetY(baseline, lineHeight, fontSize) {
   return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
 }
 
-function identityMat4(out) {
-  return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, out;
-}
-function rotateX(out, a, rad) {
-  const s = Math.sin(rad),
-    c = Math.cos(rad),
-    a10 = a[4],
-    a11 = a[5],
-    a12 = a[6],
-    a13 = a[7],
-    a20 = a[8],
-    a21 = a[9],
-    a22 = a[10],
-    a23 = a[11];
-  return a !== out && (out[0] = a[0], out[1] = a[1], out[2] = a[2], out[3] = a[3], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[4] = a10 * c + a20 * s, out[5] = a11 * c + a21 * s, out[6] = a12 * c + a22 * s, out[7] = a13 * c + a23 * s, out[8] = a20 * c - a10 * s, out[9] = a21 * c - a11 * s, out[10] = a22 * c - a12 * s, out[11] = a23 * c - a13 * s, out;
-}
-function rotateY(out, a, rad) {
-  const s = Math.sin(rad),
-    c = Math.cos(rad),
-    a00 = a[0],
-    a01 = a[1],
-    a02 = a[2],
-    a03 = a[3],
-    a20 = a[8],
-    a21 = a[9],
-    a22 = a[10],
-    a23 = a[11];
-  return a !== out && (out[4] = a[4], out[5] = a[5], out[6] = a[6], out[7] = a[7], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[0] = a00 * c - a20 * s, out[1] = a01 * c - a21 * s, out[2] = a02 * c - a22 * s, out[3] = a03 * c - a23 * s, out[8] = a00 * s + a20 * c, out[9] = a01 * s + a21 * c, out[10] = a02 * s + a22 * c, out[11] = a03 * s + a23 * c, out;
-}
-function rotateZ(out, a, rad) {
-  const s = Math.sin(rad),
-    c = Math.cos(rad),
-    a00 = a[0],
-    a01 = a[1],
-    a02 = a[2],
-    a03 = a[3],
-    a10 = a[4],
-    a11 = a[5],
-    a12 = a[6],
-    a13 = a[7];
-  return a !== out && (out[8] = a[8], out[9] = a[9], out[10] = a[10], out[11] = a[11], out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15]), out[0] = a00 * c + a10 * s, out[1] = a01 * c + a11 * s, out[2] = a02 * c + a12 * s, out[3] = a03 * c + a13 * s, out[4] = a10 * c - a00 * s, out[5] = a11 * c - a01 * s, out[6] = a12 * c - a02 * s, out[7] = a13 * c - a03 * s, out;
-}
-function translate(out, a, v) {
-  const x = v[0],
-    y = v[1],
-    z = v[2];
-  let a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23;
-  return a === out ? (out[12] = a[0] * x + a[4] * y + a[8] * z + a[12], out[13] = a[1] * x + a[5] * y + a[9] * z + a[13], out[14] = a[2] * x + a[6] * y + a[10] * z + a[14], out[15] = a[3] * x + a[7] * y + a[11] * z + a[15]) : (a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3], a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7], a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11], out[0] = a00, out[1] = a01, out[2] = a02, out[3] = a03, out[4] = a10, out[5] = a11, out[6] = a12, out[7] = a13, out[8] = a20, out[9] = a21, out[10] = a22, out[11] = a23, out[12] = a00 * x + a10 * y + a20 * z + a[12], out[13] = a01 * x + a11 * y + a21 * z + a[13], out[14] = a02 * x + a12 * y + a22 * z + a[14], out[15] = a03 * x + a13 * y + a23 * z + a[15]), out;
-}
-function mat3Tomat4(out, b) {
-  out[0] = b.a, out[1] = b.b, out[2] = 0, out[3] = 0, out[4] = b.c, out[5] = b.d, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = b.e, out[13] = b.f, out[14] = 0, out[15] = 1;
-}
-function scaleMat4(out, a, v) {
-  const x = v[0],
-    y = v[1],
-    z = v[2];
-  return out[0] = a[0] * x, out[1] = a[1] * x, out[2] = a[2] * x, out[3] = a[3] * x, out[4] = a[4] * y, out[5] = a[5] * y, out[6] = a[6] * y, out[7] = a[7] * y, out[8] = a[8] * z, out[9] = a[9] * z, out[10] = a[10] * z, out[11] = a[11] * z, out[12] = a[12], out[13] = a[13], out[14] = a[14], out[15] = a[15], out;
-}
-function multiplyMat4Mat4(out, a, b) {
-  const a00 = a[0],
-    a01 = a[1],
-    a02 = a[2],
-    a03 = a[3],
-    a10 = a[4],
-    a11 = a[5],
-    a12 = a[6],
-    a13 = a[7],
-    a20 = a[8],
-    a21 = a[9],
-    a22 = a[10],
-    a23 = a[11],
-    a30 = a[12],
-    a31 = a[13],
-    a32 = a[14],
-    a33 = a[15];
-  let b0 = b[0],
-    b1 = b[1],
-    b2 = b[2],
-    b3 = b[3];
-  return out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[4], b1 = b[5], b2 = b[6], b3 = b[7], out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[8], b1 = b[9], b2 = b[10], b3 = b[11], out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[12], b1 = b[13], b2 = b[14], b3 = b[15], out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, out;
-}
-
-function createMat4() {
-  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-}
-class DefaultMatrixAllocate {
-  constructor() {
-    this.pools = [];
-  }
-  allocate(a, b, c, d, e, f) {
-    if (!this.pools.length) return new Matrix(a, b, c, d, e, f);
-    const m = this.pools.pop();
-    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
-  }
-  allocateByObj(matrix) {
-    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-    const m = this.pools.pop();
-    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
-  }
-  free(d) {
-    this.pools.push(d);
-  }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-class DefaultMat4Allocate {
-  constructor() {
-    this.pools = [];
-  }
-  static identity(out) {
-    return identityMat4(out);
-  }
-  allocate() {
-    if (!this.pools.length) return createMat4();
-    const m = this.pools.pop();
-    return DefaultMat4Allocate.identity(m), m;
-  }
-  allocateByObj(d) {
-    let m;
-    m = this.pools.length ? this.pools.pop() : createMat4();
-    for (let i = 0; i < m.length; i++) m[i] = d[i];
-    return m;
-  }
-  free(m) {
-    m && this.pools.push(m);
-  }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-const matrixAllocate = new DefaultMatrixAllocate();
-const mat4Allocate = new DefaultMat4Allocate();
-
 var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -7067,7 +7682,7 @@ class Circle extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
   }
   updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) {
     const {
@@ -7091,12 +7706,13 @@ class Circle extends Graphic {
   }
   toCustomPath() {
     var _a, _b, _c;
+    let path = super.toCustomPath();
+    if (path) return path;
     const attribute = this.attribute,
       radius = null !== (_a = attribute.radius) && void 0 !== _a ? _a : this.getDefaultAttribute("radius"),
       startAngle = null !== (_b = attribute.startAngle) && void 0 !== _b ? _b : this.getDefaultAttribute("startAngle"),
-      endAngle = null !== (_c = attribute.endAngle) && void 0 !== _c ? _c : this.getDefaultAttribute("endAngle"),
-      path = new CustomPath2D();
-    return path.arc(0, 0, radius, startAngle, endAngle), path;
+      endAngle = null !== (_c = attribute.endAngle) && void 0 !== _c ? _c : this.getDefaultAttribute("endAngle");
+    return path = new CustomPath2D(), path.arc(0, 0, radius, startAngle, endAngle), path;
   }
   clone() {
     return new Circle(Object.assign({}, this.attribute));
@@ -7317,7 +7933,7 @@ class Text extends Graphic {
       const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
       boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
     }
-    return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
+    return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
   updateSingallineAABBBounds(text) {
     this.updateMultilineAABBBounds([text]);
@@ -7842,7 +8458,7 @@ let Symbol$1 = class Symbol extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
     const {
       lineJoin = symbolTheme.lineJoin
     } = attribute;
@@ -7914,7 +8530,7 @@ let Line$1 = class Line extends Graphic {
     return getTheme(this).line;
   }
   updateAABBBounds(attribute, lineTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = lineTheme.lineJoin
     } = attribute;
@@ -7949,9 +8565,11 @@ let Line$1 = class Line extends Graphic {
     return super.needUpdateTag(key, LINE_UPDATE_TAG_KEY);
   }
   toCustomPath() {
-    const attribute = this.attribute,
-      path = new CustomPath2D(),
-      segments = attribute.segments,
+    let path = super.toCustomPath();
+    if (path) return path;
+    const attribute = this.attribute;
+    path = new CustomPath2D();
+    const segments = attribute.segments,
       parsePoints = points => {
         if (points && points.length) {
           let isFirst = !0;
@@ -8030,7 +8648,7 @@ class Rect extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
   }
   needUpdateTags(keys) {
     return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
@@ -8039,15 +8657,16 @@ class Rect extends Graphic {
     return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
   }
   toCustomPath() {
+    let path = super.toCustomPath();
+    if (path) return path;
     const attribute = this.attribute,
       {
         x: x,
         y: y,
         width: width,
         height: height
-      } = normalizeRectAttributes(attribute),
-      path = new CustomPath2D();
-    return path.moveTo(x, y), path.rect(x, y, width, height), path;
+      } = normalizeRectAttributes(attribute);
+    return path = new CustomPath2D(), path.moveTo(x, y), path.rect(x, y, width, height), path;
   }
   clone() {
     return new Rect(Object.assign({}, this.attribute));
@@ -8427,7 +9046,7 @@ class Image extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
   }
   getDefaultAttribute(name) {
     return DefaultImageAttribute[name];
@@ -8770,7 +9389,7 @@ class RichText extends Graphic {
       maxWidth = richtextTheme.maxWidth,
       maxHeight = richtextTheme.maxHeight,
       textAlign = richtextTheme.textAlign,
-      verticalDirection = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : richtextTheme.verticalDirection,
+      textBaseline = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : "top",
       editOptions: editOptions
     } = attribute;
     if (width > 0 && height > 0) aabbBounds.set(0, 0, width, height);else {
@@ -8785,7 +9404,7 @@ class RichText extends Graphic {
     }
     editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !(null === (_c = attribute.textConfig) || void 0 === _c ? void 0 : _c.length) && (aabbBounds.y2 = aabbBounds.y1 + (null !== (_d = attribute.fontSize) && void 0 !== _d ? _d : 12), aabbBounds.x2 = aabbBounds.x1 + 2);
     let deltaY = 0;
-    switch (verticalDirection) {
+    switch (textBaseline) {
       case "top":
         deltaY = 0;
         break;
@@ -8806,7 +9425,7 @@ class RichText extends Graphic {
       case "right":
         deltaX = -aabbBounds.width();
     }
-    return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
+    return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
   }
   needUpdateTags(keys) {
     return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -9024,7 +9643,7 @@ class Path extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = pathTheme.lineJoin
     } = attribute;
@@ -9081,7 +9700,7 @@ class Area extends Graphic {
     return getTheme(this).area;
   }
   updateAABBBounds(attribute, areaTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.setWidthHeightWithoutTransform(aabbBounds);
     const {
       lineJoin = areaTheme.lineJoin
     } = attribute;
@@ -9119,8 +9738,10 @@ class Area extends Graphic {
     return super.needUpdateTag(key, AREA_UPDATE_TAG_KEY);
   }
   toCustomPath() {
-    const path = new CustomPath2D(),
-      attribute = this.attribute,
+    let path = super.toCustomPath();
+    if (path) return path;
+    path = new CustomPath2D();
+    const attribute = this.attribute,
       segments = attribute.segments,
       parsePoints = points => {
         if (points && points.length) {
@@ -9286,7 +9907,7 @@ class Arc extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.setWidthHeightWithoutTransform(aabbBounds);
     const {
       lineJoin = arcTheme.lineJoin
     } = attribute;
@@ -9334,6 +9955,8 @@ class Arc extends Graphic {
   }
   toCustomPath() {
     var _a, _b, _c, _d;
+    let path = super.toCustomPath();
+    if (path) return path;
     const attribute = this.attribute,
       {
         startAngle: startAngle,
@@ -9347,8 +9970,7 @@ class Arc extends Graphic {
       const temp = outerRadius;
       outerRadius = innerRadius, innerRadius = temp;
     }
-    const path = new CustomPath2D();
-    if (outerRadius <= epsilon) path.moveTo(0, 0);else if (deltaAngle >= pi2 - epsilon) path.moveTo(0 + outerRadius * cos(startAngle), 0 + outerRadius * sin(startAngle)), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (path.moveTo(0 + innerRadius * cos(endAngle), 0 + innerRadius * sin(endAngle)), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise));else {
+    if (path = new CustomPath2D(), outerRadius <= epsilon) path.moveTo(0, 0);else if (deltaAngle >= pi2 - epsilon) path.moveTo(0 + outerRadius * cos(startAngle), 0 + outerRadius * sin(startAngle)), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (path.moveTo(0 + innerRadius * cos(endAngle), 0 + innerRadius * sin(endAngle)), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise));else {
       const xors = outerRadius * cos(startAngle),
         yors = outerRadius * sin(startAngle),
         xire = innerRadius * cos(endAngle),
@@ -9389,7 +10011,7 @@ class Polygon extends Graphic {
     return getTheme(this).polygon;
   }
   updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = polygonTheme.lineJoin
     } = attribute;
@@ -10735,7 +11357,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
     if (!cache) return;
     context.beginPath();
     const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
-    drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
+    drawSegments(context, cache, clipRange, clipRangeByDimension, {
       offsetX: offsetX,
       offsetY: offsetY,
       offsetZ: z
@@ -11138,7 +11760,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     } else startP = points[0], endP = points[points.length - 1];
     const xTotalLength = abs(endP.x - startP.x),
       yTotalLength = abs(endP.y - startP.y);
-    direction = null == endP.x1 ? Direction.ROW : null == endP.y1 ? Direction.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN : Direction.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+    direction = null == endP.x1 ? Direction.ROW : null == endP.y1 ? Direction.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN : Direction.ROW, drawAreaSegments(context, cache, clipRange, {
       offsetX: offsetX,
       offsetY: offsetY,
       offsetZ: offsetZ,
@@ -11157,7 +11779,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
         const {
           stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
         } = attribute;
-        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction.ROW ? "x" : "y", {
+        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction.ROW ? "x" : "y", {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ
@@ -13070,6 +13692,8 @@ const transformUtil = container.get(TransformUtil);
 application.transformUtil = transformUtil;
 const graphicService = container.get(GraphicService);
 application.graphicService = graphicService;
+const renderService = container.get(RenderService);
+application.renderService = renderService;
 const layerService = container.get(LayerService);
 application.layerService = layerService;
 
@@ -14323,6 +14947,13 @@ const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
 const SCROLLBAR_END_EVENT = 'scrollUp';
 
+function getEndTriggersOfDrag() {
+    if (vglobal.env === 'browser') {
+        return ['pointerup', 'pointerleave', 'pointercancel'];
+    }
+    return ['pointerup', 'pointerleave', 'pointerupoutside'];
+}
+
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14356,6 +14987,7 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
+            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14367,15 +14999,12 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.addEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.addEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onSliderPointerUp);
+            });
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -14397,6 +15026,7 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
+            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -14410,7 +15040,6 @@ class ScrollBar extends AbstractComponent {
             ? this._onSliderPointerMove
             : delayMap$2[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
         this._onSliderPointerUp = (e) => {
-            e.preventDefault();
             const { range: preRange, limitRange = [0, 1] } = this.attribute;
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
@@ -14419,15 +15048,7 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            this._clearDragEvents();
         };
     }
     setScrollRange(range, render = true) {
@@ -14560,6 +15181,14 @@ class ScrollBar extends AbstractComponent {
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
             : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
+    _clearDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -16861,24 +17490,17 @@ function getPolygonPath(points, closed) {
 }
 function textIntersect(textA, textB, sep) {
     var _a;
-    let a;
-    let b;
     const angle = (_a = textA.attribute) === null || _a === void 0 ? void 0 : _a.angle;
     const isHorizontal = isAngleHorizontal(angle, Number.EPSILON);
-    const isAABBIntersects = (textA, textB, sep) => {
-        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);
-    };
     if (isHorizontal) {
-        return isAABBIntersects(textA, textB, sep);
+        return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
     }
-    a = textA.OBBBounds;
-    b = textB.OBBBounds;
+    const a = textA.OBBBounds;
+    const b = textB.OBBBounds;
     if (!a || !b || a.empty() || b.empty()) {
-        return isAABBIntersects(textA, textB, sep);
+        return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
     }
-    return a.intersects(b);
+    return a.intersects(b) || sep > obbSeparation(a, b);
 }
 function hasOverlap(items, pad) {
     for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
@@ -18416,7 +19038,7 @@ class Animate {
   stop(type) {
     let step = this._firstStep;
     for (; step;) step.stop(), step = step.next;
-    this.status = AnimateStatus.END, this.onEnd(), this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
+    this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
   }
   release() {
     this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
@@ -18523,19 +19145,25 @@ class AnimateExecutor {
     var _a, _b;
     const totalTime = this.resolveValue(params.totalTime, void 0, void 0),
       startTime = this.resolveValue(params.startTime, void 0, 0),
-      parsedParams = cloneDeep(params);
+      parsedParams = Object.assign({}, params);
     parsedParams.oneByOneDelay = 0, parsedParams.startTime = startTime, parsedParams.totalTime = totalTime;
     const oneByOne = this.resolveValue(params.oneByOne, child, !1);
     if (isTimeline) {
       const timeSlices = parsedParams.timeSlices;
       isArray(timeSlices) || (parsedParams.timeSlices = [timeSlices]);
       let sliceTime = 0;
-      parsedParams.timeSlices.forEach(slice => {
-        slice.delay = this.resolveValue(slice.delay, child, 0), slice.delayAfter = this.resolveValue(slice.delayAfter, child, 0), slice.duration = this.resolveValue(slice.duration, child, 300), sliceTime += slice.delay + slice.duration + slice.delayAfter;
+      parsedParams.timeSlices = parsedParams.timeSlices.map(slice => {
+        const delay = this.resolveValue(slice.delay, child, 0),
+          delayAfter = this.resolveValue(slice.delayAfter, child, 0),
+          duration = this.resolveValue(slice.duration, child, 300);
+        return sliceTime += delay + duration + delayAfter, Object.assign(Object.assign({}, slice), {
+          delay: delay,
+          delayAfter: delayAfter,
+          duration: duration
+        });
       });
-      let oneByOneDelay = 0,
-        oneByOneTime = 0;
-      oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay;
+      let oneByOneDelay = 0;
+      oneByOne && (oneByOneDelay = "number" == typeof oneByOne ? oneByOne : oneByOne ? sliceTime : 0), parsedParams.oneByOneDelay = oneByOneDelay;
       let scale = 1;
       if (totalTime) {
         const _totalTime = sliceTime + oneByOneDelay * (this._target.count - 2);
@@ -18557,19 +19185,18 @@ class AnimateExecutor {
             });
           })
         });
-      }), parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
+      }), parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime * scale;
     } else {
       const delay = this.resolveValue(params.delay, child, 0),
         delayAfter = this.resolveValue(params.delayAfter, child, 0),
         duration = this.resolveValue(params.duration, child, 300);
-      let oneByOneDelay = 0,
-        oneByOneTime = 0;
-      oneByOne && (oneByOneTime = Number(oneByOne), oneByOneDelay = duration + oneByOneTime), parsedParams.oneByOne = oneByOneTime, parsedParams.oneByOneDelay = oneByOneDelay, parsedParams.custom = null !== (_a = params.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = params.type) && void 0 !== _b ? _b : "fromTo"];
+      let oneByOneDelay = 0;
+      oneByOne && (oneByOneDelay = "number" == typeof oneByOne ? oneByOne : oneByOne ? delay + delayAfter + duration : 0), parsedParams.oneByOneDelay = oneByOneDelay, parsedParams.custom = null !== (_a = params.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[null !== (_b = params.type) && void 0 !== _b ? _b : "fromTo"];
       const customType = parsedParams.custom && isFunction(parsedParams.custom) ? /^class\s/.test(Function.prototype.toString.call(parsedParams.custom)) ? 1 : 2 : 0;
       if (parsedParams.customType = customType, totalTime) {
         const _totalTime = delay + delayAfter + duration + oneByOneDelay * (this._target.count - 2),
           scale = totalTime ? totalTime / _totalTime : 1;
-        parsedParams.delay = delay * scale, parsedParams.delayAfter = delayAfter * scale, parsedParams.duration = duration * scale, parsedParams.oneByOne = oneByOneTime * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime;
+        parsedParams.delay = delay * scale, parsedParams.delayAfter = delayAfter * scale, parsedParams.duration = duration * scale, parsedParams.oneByOneDelay = oneByOneDelay * scale, parsedParams.startTime = startTime;
       }
     }
     return parsedParams;
@@ -18661,10 +19288,10 @@ class AnimateExecutor {
     const animate = graphic.animate();
     animate.priority = priority, animate.startAt(startTime), animate.wait(index * oneByOneDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0);
     return (Array.isArray(timeSlices) ? timeSlices : [timeSlices]).forEach(slice => {
-      this.applyTimeSliceToAnimate(slice, animate, graphic);
+      this.applyTimeSliceToAnimate(slice, animate, graphic, controlOptions);
     }), oneByOneDelay && animate.wait(oneByOneDelay * (count - index - 1)), animate;
   }
-  applyTimeSliceToAnimate(slice, animate, graphic) {
+  applyTimeSliceToAnimate(slice, animate, graphic, controlOptions) {
     var _a, _b, _c, _d;
     const {
         effects: effects,
@@ -18690,7 +19317,7 @@ class AnimateExecutor {
       props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic)), from = parsedFromProps.from);
       const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
         customType = effect.customType;
-      this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, null, options, type, graphic);
+      this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
     }), delayAfterValue > 0 && animate.wait(delayAfterValue);
   }
   createCustomInterpolatorAnimation(animate, interpolator, props, duration, easing, customParams) {
@@ -18834,9 +19461,9 @@ class AxisEnter extends AComponentAnimate {
         const easing = this.easing;
         const { config, lastScale, getTickCoord } = this.params;
         let ratio = 1;
-        if (lastScale && getTickCoord) {
+        const currData = this.target.data;
+        if (lastScale && getTickCoord && currData) {
             ratio = 0.7;
-            const currData = this.target.data;
             const oldValue = lastScale.scale(currData.rawValue);
             const point = getTickCoord(oldValue);
             const newX = this.target.attribute.x;
@@ -18860,14 +19487,13 @@ class AxisEnter extends AComponentAnimate {
 }
 class AxisUpdate extends AComponentAnimate {
     onBind() {
-        var _a;
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
         const { config, diffAttrs } = this.params;
         animator.animate(this.target, {
-            type: (_a = config.type) !== null && _a !== void 0 ? _a : 'to',
+            type: 'to',
             to: Object.assign({}, diffAttrs),
             duration,
             easing,
@@ -21324,6 +21950,13 @@ class LabelBase extends AnimateComponent {
         if (isNil(this._idToGraphic) || (this._isCollectionBase && isNil(this._idToPoint))) {
             return;
         }
+        const markAttributeList = [];
+        if (this._enableAnimation !== false) {
+            this._baseMarks.forEach(mark => {
+                markAttributeList.push(mark.attribute);
+                mark.initAttributes(mark.getAttributes(true));
+            });
+        }
         const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
         let data = this.attribute.data;
         if (isFunction(dataFilter)) {
@@ -21361,6 +21994,11 @@ class LabelBase extends AnimateComponent {
             this._smartInvert(labels);
         }
         this._renderLabels(labels);
+        if (this._enableAnimation !== false) {
+            this._baseMarks.forEach((mark, index) => {
+                mark.initAttributes(markAttributeList[index]);
+            });
+        }
     }
     _bindEvent(target) {
         if (this.attribute.disableTriggerEvent) {
@@ -21703,8 +22341,14 @@ class LabelBase extends AnimateComponent {
         return this.getRootNode().find(node => node.name === baseMarkGroupName, true);
     }
     getGraphicBounds(graphic, point = {}, position) {
+        var _a;
         if (graphic) {
             if (graphic.attribute.visible !== false) {
+                if ((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.animationState) {
+                    const clonedGraphic = graphic.clone();
+                    Object.assign(clonedGraphic.attribute, graphic.getAttributes(true));
+                    return clonedGraphic.AABBBounds;
+                }
                 return graphic.AABBBounds;
             }
             const { x, y } = graphic.attribute;
@@ -21770,7 +22414,7 @@ class LabelBase extends AnimateComponent {
                 animation: Object.assign(Object.assign({}, enter), { type: 'labelEnter', selfOnly: true, customParameters: {
                         relatedGraphic,
                         relatedGraphics: this._idToGraphic,
-                        config: Object.assign(Object.assign({}, enter), { type: item === text ? enter.type : 'clipIn' })
+                        config: Object.assign(Object.assign({}, enter), { type: item === text ? enter.type : 'fadeIn' })
                     } })
             }
         ]));
@@ -23533,8 +24177,13 @@ class DataZoom extends AbstractComponent {
             end: 1
         };
         this._statePointToData = state => state;
+        this._handleTouchMove = (e) => {
+            if (this._activeState) {
+                e.preventDefault();
+            }
+        };
         this._onHandlerPointerDown = (e, tag) => {
-            e.stopPropagation();
+            this._clearDragEvents();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
                 this._activeItem = this._startHandlerMask;
@@ -23558,14 +24207,16 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
+            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+            const triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
             this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._pointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23615,7 +24266,6 @@ class DataZoom extends AbstractComponent {
             ? this._pointerMove
             : delayMap$1[this.attribute.delayType](this._pointerMove, this.attribute.delayTime);
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             const { start, end, brushSelect, realTime = true } = this.attribute;
             if (this._activeState) {
                 if (this._activeTag === DataZoomActiveTag.background) {
@@ -23630,12 +24280,7 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            this.removeEventListener('pointerup', this._onHandlerPointerUp);
+            this._clearDragEvents();
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23683,12 +24328,13 @@ class DataZoom extends AbstractComponent {
         if (this._selectedPreviewGroup) {
             this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
         }
-        this.addEventListener('pointerup', this._onHandlerPointerUp);
-        this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
         if (showDetail === 'auto') {
             this.addEventListener('pointerenter', this._onHandlerPointerEnter);
             this.addEventListener('pointerleave', this._onHandlerPointerLeave);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     dragMaskSize() {
         const { position } = this.attribute;
@@ -23716,13 +24362,20 @@ class DataZoom extends AbstractComponent {
         var _a, _b;
         return (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
     }
+    _clearDragEvents() {
+        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+        const triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+    }
     _onHandlerPointerEnter(e) {
-        e.stopPropagation();
         this._showText = true;
         this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        e.stopPropagation();
         this._showText = false;
         this.renderText();
     }
@@ -24232,6 +24885,13 @@ class DataZoom extends AbstractComponent {
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -24521,21 +25181,30 @@ function commonLineClipIn(line, label, duration, delay, easing) {
             .to({ clipRange: 1 }, stepDuration, easing);
     });
     graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing);
-    graphicFadeIn(label.getTextShape(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
-    graphicFadeIn(label.getBgRect(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
+    array(label).forEach(labelNode => {
+        const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
+        graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing);
+        graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, easing);
+    });
 }
 
 function commonLineFadeIn(line, label, duration, delay, easing) {
     segmentFadeIn(line, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function areaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function arcAreaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24551,15 +25220,21 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
     segmentFadeOut(line, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function areaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function arcAreaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24713,6 +25388,48 @@ const DefaultExitMarkerAnimation = {
     delay: 0
 };
 
+class MarkLabelMixin {
+    getLabel() {
+        return this._label;
+    }
+    _addMarkLabels(container, labelName, defaultLabelAttrs) {
+        const { label, state } = this.attribute;
+        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
+        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
+        const labelShapes = array(label).map((labelAttrs, index) => {
+            var _a, _b;
+            const finalLabelAttrs = merge({}, defaultLabelAttrs, labelAttrs);
+            const markLabel = new Tag(Object.assign(Object.assign({}, finalLabelAttrs), { state: {
+                    panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
+                    text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
+                } }));
+            markLabel.name = labelName;
+            container.add(markLabel);
+            this.setLabelPos(markLabel, finalLabelAttrs);
+            return markLabel;
+        });
+        this._label = array(labelShapes).length === 1 ? labelShapes[0] : labelShapes;
+    }
+    _updateMarkLabels(defaultLabelAttrs) {
+        const { label, state } = this.attribute;
+        const labelShapes = array(this._label);
+        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
+        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
+        if (labelShapes.length) {
+            const labels = array(label);
+            labelShapes.forEach((labelItem, index) => {
+                var _a, _b;
+                const finalLabelAttrs = merge({}, defaultLabelAttrs, labels[index]);
+                labelItem.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, finalLabelAttrs), { state: {
+                        panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
+                        text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
+                    } }));
+                this.setLabelPos(labelItem, finalLabelAttrs);
+            });
+        }
+    }
+}
+
 class MarkCommonLine extends Marker {
     constructor() {
         super(...arguments);
@@ -24723,20 +25440,17 @@ class MarkCommonLine extends Marker {
     getLine() {
         return this._line;
     }
-    getLabel() {
-        return this._label;
-    }
-    setLabelPos() {
-        const { label = {}, limitRect } = this.attribute;
-        const { position, confine, autoRotate } = label;
-        const labelPoint = this.getPointAttrByPosition(position);
+    setLabelPos(labelNode, labelAttrs) {
+        const { limitRect } = this.attribute;
+        const { position, confine, autoRotate } = labelAttrs;
+        const labelPoint = this.getPointAttrByPosition(position, labelAttrs);
         const labelAngle = position.toString().toLocaleLowerCase().includes('start')
             ? this._line.getStartAngle() || 0
             : this._line.getEndAngle() || 0;
-        this._label.setAttributes(Object.assign(Object.assign({}, labelPoint.position), { angle: autoRotate ? this.getRotateByAngle(labelPoint.angle) : 0, textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), label.textStyle) }));
+        labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint.position), { angle: autoRotate ? this.getRotateByAngle(labelPoint.angle, labelAttrs) : 0, textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), labelAttrs.textStyle) }));
         if (limitRect && confine) {
             const { x, y, width, height } = limitRect;
-            limitShapeInBounds(this._label, {
+            limitShapeInBounds(labelNode, {
                 x1: x,
                 y1: y,
                 x2: x + width,
@@ -24745,32 +25459,18 @@ class MarkCommonLine extends Marker {
         }
     }
     initMarker(container) {
-        const { label, state } = this.attribute;
         const line = this.createSegment();
         line.name = 'mark-common-line-line';
         this._line = line;
         container.add(line);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
-                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-common-line-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this.addMarkLineLabels(container);
     }
     updateMarker() {
-        const { label, state } = this.attribute;
         this.setLineAttributes();
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-            this.setLabelPos();
-        }
+        this.updateMarkLineLabels();
     }
 }
+mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = 0.001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -24959,6 +25659,7 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
         lineWidth: 0
     },
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -25013,6 +25714,7 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
     interactive: true,
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
             fill: '#fff',
@@ -25271,10 +25973,9 @@ class MarkLine extends MarkCommonLine {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkLine.defaultAttributes, attributes));
         this.name = 'markLine';
     }
-    getPointAttrByPosition(position) {
+    getPointAttrByPosition(position, labelAttrs) {
         var _a;
-        const { label = {} } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+        const { refX = 0, refY = 0 } = labelAttrs;
         const points = this._line.getMainSegmentPoints();
         const lineEndAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
         const labelAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle;
@@ -25306,10 +26007,10 @@ class MarkLine extends MarkCommonLine {
             angle: labelAngle
         };
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
         const itemAngle = isPostiveXAxis(angle) ? angle : angle - Math.PI;
-        return itemAngle + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return itemAngle + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     getTextStyle(position, labelAngle, autoRotate) {
         if (fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) ||
@@ -25380,6 +26081,12 @@ class MarkLine extends MarkCommonLine {
         });
         return validFlag;
     }
+    addMarkLineLabels(container) {
+        this._addMarkLabels(container, 'mark-common-line-label', MarkLine.defaultAttributes.label);
+    }
+    updateMarkLineLabels() {
+        this._updateMarkLabels(MarkLine.defaultAttributes.label);
+    }
 }
 MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
@@ -25396,9 +26103,6 @@ class MarkArea extends Marker {
     getArea() {
         return this._area;
     }
-    getLabel() {
-        return this._label;
-    }
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArea.defaultAttributes, attributes));
         this.name = 'markArea';
@@ -25425,16 +26129,15 @@ class MarkArea extends Marker {
         }
         return result;
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-            const { label = {} } = this.attribute;
-            const labelPosition = (_a = label.position) !== null && _a !== void 0 ? _a : 'middle';
+        if (this._area) {
+            const labelPosition = (_a = labelAttrs.position) !== null && _a !== void 0 ? _a : 'middle';
             const labelPoint = this.getPointAttrByPosition(labelPosition);
-            this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
-            if (this.attribute.limitRect && label.confine) {
+            labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
+            if (this.attribute.limitRect && labelAttrs.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -25444,34 +26147,21 @@ class MarkArea extends Marker {
         }
     }
     initMarker(container) {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, areaStyle, state } = this.attribute;
         const area = graphicCreator.polygon(Object.assign({ points: points }, areaStyle));
         area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         area.name = 'mark-area-polygon';
         this._area = area;
         container.add(area);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
-                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-area-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this._addMarkLabels(container, 'mark-area-label', MarkArea.defaultAttributes.label);
     }
     updateMarker() {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, areaStyle, state } = this.attribute;
         if (this._area) {
             this._area.setAttributes(Object.assign({ points: points }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-        }
-        this.setLabelPos();
+        this._updateMarkLabels(MarkArea.defaultAttributes.label);
     }
     isValidPoints() {
         const { points } = this.attribute;
@@ -25489,6 +26179,7 @@ class MarkArea extends Marker {
     }
 }
 MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
+mixin(MarkArea, MarkLabelMixin);
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -25501,14 +26192,12 @@ class MarkArcLine extends MarkCommonLine {
         }
     }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault)
-            ? attributes
-            : merge({}, MarkArcLine.defaultAttributes, attributes, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcLine.defaultAttributes, attributes));
         this.name = 'markArcLine';
     }
-    getPointAttrByPosition(direction) {
-        const { center, radius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(direction, labelAttrs) {
+        const { center, radius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let angle;
         switch (direction) {
             case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -25540,9 +26229,9 @@ class MarkArcLine extends MarkCommonLine {
     getTextStyle(position) {
         return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
-        return angle - Math.PI / 2 + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     createSegment() {
         const { center, radius, startAngle, endAngle, startSymbol, endSymbol, lineStyle, state } = this
@@ -25585,6 +26274,12 @@ class MarkArcLine extends MarkCommonLine {
     isValidPoints() {
         return true;
     }
+    addMarkLineLabels(container) {
+        this._addMarkLabels(container, 'mark-common-line-label', MarkArcLine.defaultAttributes.label);
+    }
+    updateMarkLineLabels() {
+        this._updateMarkLabels(MarkArcLine.defaultAttributes.label);
+    }
 }
 MarkArcLine.defaultAttributes = DEFAULT_MARK_ARC_LINE_THEME;
 
@@ -25601,20 +26296,15 @@ class MarkArcArea extends Marker {
     getArea() {
         return this._area;
     }
-    getLabel() {
-        return this._label;
-    }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault)
-            ? attributes
-            : merge({}, MarkArcArea.defaultAttributes, attributes, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcArea.defaultAttributes, attributes));
         this.name = 'markArcArea';
         this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation;
         this.defaultExitAnimation = DefaultExitMarkerAnimation;
     }
-    getPointAttrByPosition(position) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(position, labelAttrs) {
+        const { center, innerRadius, outerRadius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let radius;
         let angle;
         switch (position) {
@@ -25658,16 +26348,15 @@ class MarkArcArea extends Marker {
             angle
         };
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-            const { label = {} } = this.attribute;
-            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = label;
-            const labelAttr = this.getPointAttrByPosition(labelPosition);
-            this._label.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = label.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
-            if (this.attribute.limitRect && label.confine) {
+        if (this._area) {
+            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = labelAttrs;
+            const labelAttr = this.getPointAttrByPosition(labelPosition, labelAttrs);
+            labelNode.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
+            if (this.attribute.limitRect && labelAttrs.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -25677,7 +26366,7 @@ class MarkArcArea extends Marker {
         }
     }
     initMarker(container) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
+        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, state } = this
             .attribute;
         const area = graphicCreator.arc(Object.assign({ x: center.x, y: center.y, innerRadius,
             outerRadius,
@@ -25687,14 +26376,7 @@ class MarkArcArea extends Marker {
         area.name = 'polar-mark-area-area';
         this._area = area;
         container.add(area);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
-                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-area-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this._addMarkLabels(container, 'mark-area-label', MarkArcArea.defaultAttributes.label);
     }
     updateMarker() {
         const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
@@ -25706,19 +26388,14 @@ class MarkArcArea extends Marker {
                 endAngle }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-            this.setLabelPos();
-        }
+        this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
     }
     isValidPoints() {
         return true;
     }
 }
 MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
+mixin(MarkArcArea, MarkLabelMixin);
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -27739,28 +28416,21 @@ class Slider extends AbstractComponent {
             this._dispatchTooltipEvent('sliderTooltipHide');
         };
         this._onHandlerPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onHandlerPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27796,44 +28466,29 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
+            this._clearAllDragEvents();
+        };
+        this._handleTouchMove = (e) => {
+            if (this._isChanging) {
+                e.preventDefault();
             }
         };
         this._onTrackPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onTrackPointerUp);
+            });
         };
         this._onTrackPointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27885,24 +28540,11 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onTrackPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            this._clearAllDragEvents();
         };
         this._onRailPointerDown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -28280,6 +28922,9 @@ class Slider extends AbstractComponent {
                 this._track.addEventListener('pointerdown', this._onTrackPointerdown);
             }
             this._railContainer.addEventListener('pointerdown', this._onRailPointerDown);
+            (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+                passive: false
+            });
         }
     }
     _bindTooltipEvents() {
@@ -28290,6 +28935,18 @@ class Slider extends AbstractComponent {
         this._mainContainer.addEventListener('pointermove', this._onTooltipUpdate);
         this._mainContainer.addEventListener('pointerleave', this._onTooltipHide);
     }
+    _clearAllDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -28430,6 +29087,13 @@ class Slider extends AbstractComponent {
             endHandler
         };
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearAllDragEvents();
+    }
 }
 Slider.defaultAttributes = {
     slidable: true,
@@ -30123,13 +30787,14 @@ var IOperateType;
     IOperateType["moving"] = "moving";
     IOperateType["moveStart"] = "moveStart";
     IOperateType["moveEnd"] = "moveEnd";
+    IOperateType["brushActive"] = "brushActive";
     IOperateType["brushClear"] = "brushClear";
 })(IOperateType || (IOperateType = {}));
 
 const DEFAULT_BRUSH_ATTRIBUTES = {
     trigger: 'pointerdown',
     updateTrigger: 'pointermove',
-    endTrigger: 'pointerup',
+    endTrigger: ['pointerup', 'pointerleave'],
     resetTrigger: 'pointerupoutside',
     hasMask: true,
     brushMode: 'single',
@@ -30145,10 +30810,10 @@ const DEFAULT_BRUSH_ATTRIBUTES = {
     delayType: 'throttle',
     delayTime: 10,
     interactiveRange: {
-        y1: -Infinity,
-        y2: Infinity,
-        x1: -Infinity,
-        x2: Infinity
+        minY: -Infinity,
+        maxY: Infinity,
+        minX: -Infinity,
+        maxX: Infinity
     }
 };
 const DEFAULT_SIZE_THRESHOLD = 5;
@@ -30169,145 +30834,87 @@ class Brush extends AbstractComponent {
         this.name = 'brush';
         this._activeDrawState = false;
         this._cacheDrawPoints = [];
-        this._isDrawedBeforeEnd = false;
-        this._isDownBeforeUpOutside = false;
         this._activeMoveState = false;
         this._operatingMaskMoveDx = 0;
         this._operatingMaskMoveDy = 0;
         this._operatingMaskMoveRangeX = [-Infinity, Infinity];
         this._operatingMaskMoveRangeY = [-Infinity, Infinity];
         this._brushMaskAABBBoundsDict = {};
+        this._firstUpdate = true;
         this._onBrushStart = (e) => {
-            var _a;
             if (this._outOfInteractiveRange(e)) {
-                this._isDownBeforeUpOutside = true;
+                if (!this._isEmptyMask()) {
+                    this._clearMask();
+                    this._dispatchBrushEvent(IOperateType.brushClear, e);
+                }
                 return;
             }
+            const { updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, brushMoved = true } = this.attribute;
+            array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay));
+            array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd));
             e.stopPropagation();
-            const brushMoved = (_a = this.attribute.brushMoved) !== null && _a !== void 0 ? _a : true;
+            this._firstUpdate = true;
             this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
             this._activeDrawState = !this._activeMoveState;
-            this._activeDrawState && this._initDraw(e);
-            this._activeMoveState && this._initMove(e);
+            this._startPos = this.eventPosToStagePos(e);
+            this._cacheDrawPoints = [this._startPos];
         };
         this._onBrushing = (e) => {
             if (this._outOfInteractiveRange(e)) {
                 return;
             }
-            if (this._activeDrawState || this._activeMoveState) {
-                e.stopPropagation();
+            e.stopPropagation();
+            if (this._firstUpdate) {
+                this._activeDrawState && this._initDraw(e);
+                this._activeMoveState && this._initMove(e);
+                this._firstUpdate = false;
+            }
+            else {
+                this._activeDrawState && this._drawing(e);
+                this._activeMoveState && this._moving(e);
             }
-            this._activeDrawState && this._drawing(e);
-            this._activeMoveState && this._moving(e);
         };
         this._onBrushingWithDelay = this.attribute.delayTime === 0
             ? this._onBrushing
             : delayMap[this.attribute.delayType](this._onBrushing, this.attribute.delayTime);
         this._onBrushEnd = (e) => {
-            var _a;
-            if (!this._activeDrawState && !this._activeMoveState) {
-                return;
-            }
+            this._releaseBrushUpdateEvents();
             e.preventDefault();
-            const { removeOnClick = true } = this.attribute;
-            if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
-                if ((_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a._AABBBounds.empty()) {
-                    this._dispatchEvent(IOperateType.brushClear, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
-                }
-                this._container.incrementalClearChild();
-                this._brushMaskAABBBoundsDict = {};
-            }
-            else {
-                if (this._activeDrawState) {
-                    this._dispatchEvent(IOperateType.drawEnd, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
-                }
-                if (this._activeMoveState) {
-                    this._dispatchEvent(IOperateType.moveEnd, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
-                }
-            }
+            this._activeDrawState && this._drawEnd(e);
+            this._activeMoveState && this._moveEnd(e);
             this._activeDrawState = false;
             this._activeMoveState = false;
-            this._isDrawedBeforeEnd = false;
-            if (this._operatingMask) {
-                this._operatingMask.setAttribute('pickable', false);
-            }
         };
         this._onBrushClear = (e) => {
             e.preventDefault();
-            const { removeOnClick = true } = this.attribute;
-            if (this._isDownBeforeUpOutside && removeOnClick) {
-                this._dispatchEvent(IOperateType.brushClear, {
-                    operateMask: this._operatingMask,
-                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                    event: e
-                });
-                this._container.incrementalClearChild();
-                this._brushMaskAABBBoundsDict = {};
+            if (!this._isEmptyMask()) {
+                this._clearMask();
+                this._dispatchBrushEvent(IOperateType.brushClear, e);
             }
             this._activeDrawState = false;
             this._activeMoveState = false;
-            this._isDrawedBeforeEnd = false;
-            this._isDownBeforeUpOutside = false;
-            if (this._operatingMask) {
-                this._operatingMask.setAttribute('pickable', false);
-            }
         };
     }
     _bindBrushEvents() {
+        this.releaseBrushEvents();
         if (this.attribute.disableTriggerEvent) {
             return;
         }
-        const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
-        array(trigger).forEach(t => vglobal.addEventListener(t, this._onBrushStart));
-        array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay));
-        array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd));
+        const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this
+            .attribute;
+        array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart));
         array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
     }
-    _isPosInBrushMask(e) {
-        const pos = this.eventPosToStagePos(e);
-        const brushMasks = this._container.getChildren();
-        for (let i = 0; i < brushMasks.length; i++) {
-            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
-            const pointsConsiderOffset = points.map((point) => {
-                return {
-                    x: point.x + dx,
-                    y: point.y + dy
-                };
-            });
-            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
-                this._operatingMask = brushMasks[i];
-                return true;
-            }
-        }
-        return false;
-    }
     _initDraw(e) {
         const { brushMode } = this.attribute;
         const pos = this.eventPosToStagePos(e);
-        this._cacheDrawPoints = [pos];
-        this._isDrawedBeforeEnd = false;
-        if (brushMode === 'single') {
-            this._brushMaskAABBBoundsDict = {};
-            this._container.incrementalClearChild();
-        }
+        this._cacheDrawPoints.push(pos);
+        brushMode === 'single' && this._clearMask();
         this._addBrushMask();
-        this._dispatchEvent(IOperateType.drawStart, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.drawStart, e);
+        if (Object.keys(this._brushMaskAABBBoundsDict).length === 1) {
+            this._dispatchBrushEvent(IOperateType.brushActive, e);
+        }
     }
     _initMove(e) {
         var _a, _b;
@@ -30324,16 +30931,12 @@ class Brush extends AbstractComponent {
         this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX];
         this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY];
         this._operatingMask.setAttribute('pickable', true);
-        this._dispatchEvent(IOperateType.moveStart, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.moveStart, e);
     }
     _drawing(e) {
-        var _a, _b;
+        var _a;
         const pos = this.eventPosToStagePos(e);
-        const { sizeThreshold = DEFAULT_SIZE_THRESHOLD, brushType } = this.attribute;
+        const { brushType } = this.attribute;
         const cacheLength = this._cacheDrawPoints.length;
         if (cacheLength > 0) {
             const lastPos = (_a = this._cacheDrawPoints[this._cacheDrawPoints.length - 1]) !== null && _a !== void 0 ? _a : {};
@@ -30349,18 +30952,7 @@ class Brush extends AbstractComponent {
         }
         const maskPoints = this._computeMaskPoints();
         this._operatingMask.setAttribute('points', maskPoints);
-        const { x1 = 0, x2 = 0, y1 = 0, y2 = 0 } = (_b = this._operatingMask) === null || _b === void 0 ? void 0 : _b._AABBBounds;
-        this._isDrawedBeforeEnd =
-            !this._operatingMask._AABBBounds.empty() &&
-                !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
-        if (this._isDrawedBeforeEnd) {
-            this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-            this._dispatchEvent(IOperateType.drawing, {
-                operateMask: this._operatingMask,
-                operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                event: e
-            });
-        }
+        this._dispatchBrushEvent(IOperateType.drawing, e);
     }
     _moving(e) {
         const startPos = this._cacheMovePoint;
@@ -30379,11 +30971,61 @@ class Brush extends AbstractComponent {
             dy: moveY
         });
         this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-        this._dispatchEvent(IOperateType.moving, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.moving, e);
+    }
+    _drawEnd(e) {
+        const { removeOnClick = true, sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute;
+        if (this._outOfInteractiveRange(e)) {
+            if (!this._isEmptyMask()) {
+                this._clearMask();
+                this._dispatchBrushEvent(IOperateType.brushClear, e);
+            }
+        }
+        else {
+            const { x: x1, y: y1 } = this._startPos;
+            const { x: x2, y: y2 } = this.eventPosToStagePos(e);
+            if (Math.abs(x2 - x1) <= 1 && Math.abs(y2 - y1) <= 1 && removeOnClick) {
+                if (!this._isEmptyMask()) {
+                    this._clearMask();
+                    this._dispatchBrushEvent(IOperateType.brushClear, e);
+                }
+            }
+            else if (Math.abs(x2 - x1) < sizeThreshold && Math.abs(y1 - y2) < sizeThreshold) {
+                delete this._brushMaskAABBBoundsDict[this._operatingMask.name];
+                this._container.setAttributes({});
+                this._container.removeChild(this._operatingMask);
+                if (this._isEmptyMask()) {
+                    this._dispatchBrushEvent(IOperateType.brushClear, e);
+                }
+            }
+            else {
+                this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
+                this._dispatchBrushEvent(IOperateType.drawEnd, e);
+            }
+        }
+    }
+    _moveEnd(e) {
+        if (this._operatingMask) {
+            this._operatingMask.setAttribute('pickable', false);
+        }
+        this._dispatchBrushEvent(IOperateType.moveEnd, e);
+    }
+    render() {
+        this._bindBrushEvents();
+        const group = this.createOrUpdateChild('brush-container', {}, 'group');
+        this._container = group;
+    }
+    releaseBrushEvents() {
+        const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this
+            .attribute;
+        array(trigger).forEach(t => this.stage.removeEventListener(t, this._onBrushStart));
+        array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
+        this._releaseBrushUpdateEvents();
+    }
+    _releaseBrushUpdateEvents() {
+        const { updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger } = this.attribute;
+        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay));
+        array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
     }
     _computeMaskPoints() {
         const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -30452,12 +31094,30 @@ class Brush extends AbstractComponent {
     _addBrushMask() {
         var _a;
         const { brushStyle, hasMask } = this.attribute;
-        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? (_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1 : 0 }));
+        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? ((_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1) : 0 }));
         brushMask.name = `brush-${Date.now()}`;
         this._operatingMask = brushMask;
         this._container.add(brushMask);
         this._brushMaskAABBBoundsDict[brushMask.name] = brushMask.AABBBounds;
     }
+    _isPosInBrushMask(e) {
+        const pos = this.eventPosToStagePos(e);
+        const brushMasks = this._container.getChildren();
+        for (let i = 0; i < brushMasks.length; i++) {
+            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
+            const pointsConsiderOffset = points.map((point) => {
+                return {
+                    x: point.x + dx,
+                    y: point.y + dy
+                };
+            });
+            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
+                this._operatingMask = brushMasks[i];
+                return true;
+            }
+        }
+        return false;
+    }
     _outOfInteractiveRange(e) {
         const { interactiveRange } = this.attribute;
         const { minY = -Infinity, maxY = Infinity, minX = -Infinity, maxX = Infinity } = interactiveRange;
@@ -30470,17 +31130,21 @@ class Brush extends AbstractComponent {
     eventPosToStagePos(e) {
         return this.stage.eventPointTransform(e);
     }
-    render() {
-        this._bindBrushEvents();
-        const group = this.createOrUpdateChild('brush-container', {}, 'group');
-        this._container = group;
+    _dispatchBrushEvent(operateType, e) {
+        this._dispatchEvent(operateType, {
+            operateMask: this._operatingMask,
+            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+            event: e
+        });
     }
-    releaseBrushEvents() {
-        const { delayType = 'throttle', delayTime = 0, trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
-        array(trigger).forEach(t => vglobal.removeEventListener(t, this._onBrushStart));
-        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay));
-        array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
-        array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
+    _clearMask() {
+        this._brushMaskAABBBoundsDict = {};
+        this._container.incrementalClearChild();
+        this._operatingMask = null;
+    }
+    _isEmptyMask() {
+        return (isEmpty(this._brushMaskAABBBoundsDict) ||
+            Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty()));
     }
 }
 Brush.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -31782,10 +32446,10 @@ class Switch extends AbstractComponent {
         });
         this._circle.setAttributes({
             y: circleY,
-            x: this.attribute.checked ? circleX : maxWidth - circleX
+            x: !this.attribute.checked ? circleX : maxWidth - circleX
         });
         this._text.setAttributes({
-            x: this.attribute.checked ? textX : maxWidth - textX - textWidth,
+            x: !this.attribute.checked ? textX : maxWidth - textX - textWidth,
             y: textY
         });
     }
@@ -31932,6 +32596,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.0-alpha.5";
+const version = "1.0.0-alpha.6";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };