@visactor/vrender-components 1.0.0-alpha.9 → 1.0.1

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, 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 { 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, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, 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 {
@@ -489,28 +489,39 @@ class Container {
 const ContributionProvider = Symbol("ContributionProvider");
 class ContributionProviderCache {
   constructor(serviceIdentifier, container) {
-    this.serviceIdentifier = serviceIdentifier, this.container = container;
+    this.serviceIdentifier = serviceIdentifier, this.container = container, ContributionStore.setStore(this.serviceIdentifier, this);
   }
   getContributions() {
     return this.caches || (this.caches = [], this.container && this.container.isBound(this.serviceIdentifier) && this.caches.push(...this.container.getAll(this.serviceIdentifier))), this.caches;
   }
+  refresh() {
+    this.caches && (this.caches.length = 0, this.container && this.container.isBound(this.serviceIdentifier) && this.caches.push(...this.container.getAll(this.serviceIdentifier)));
+  }
 }
 function bindContributionProvider(bind, id) {
-  bind(ContributionProvider).toDynamicValue(_ref => {
-    let {
-      container: container
-    } = _ref;
-    return new ContributionProviderCache(id, container);
-  }).inSingletonScope().whenTargetNamed(id);
+  bind(ContributionProvider).toDynamicValue(({
+    container: container
+  }) => new ContributionProviderCache(id, container)).inSingletonScope().whenTargetNamed(id);
 }
 function bindContributionProviderNoSingletonScope(bind, id) {
-  bind(ContributionProvider).toDynamicValue(_ref2 => {
-    let {
-      container: container
-    } = _ref2;
-    return new ContributionProviderCache(id, container);
-  }).whenTargetNamed(id);
+  bind(ContributionProvider).toDynamicValue(({
+    container: container
+  }) => new ContributionProviderCache(id, container)).whenTargetNamed(id);
 }
+class ContributionStore {
+  static getStore(id) {
+    return this.store.get(id);
+  }
+  static setStore(id, cache) {
+    this.store.set(id, cache);
+  }
+  static refreshAllContributions() {
+    this.store.forEach(cache => {
+      cache.refresh();
+    });
+  }
+}
+ContributionStore.store = new Map();
 
 class Hook {
   constructor(args, name) {
@@ -565,10 +576,7 @@ class Hook {
 }
 
 class SyncHook extends Hook {
-  call() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  call(...args) {
     this.taps.map(t => t.fn).forEach(cb => cb(...args));
   }
 }
@@ -577,22 +585,67 @@ const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
+class Application {}
+const application = new Application();
+
+let idx = 0;
 class PerformanceRAF {
   constructor() {
-    this.nextAnimationFrameCbs = [], this._rafHandle = null, this.runAnimationFrame = time => {
+    this.nextAnimationFrameCbs = new Map(), this._rafHandle = null, this.runAnimationFrame = time => {
       this._rafHandle = null;
       const cbs = this.nextAnimationFrameCbs;
-      this.nextAnimationFrameCbs = [];
-      for (let i = 0; i < cbs.length; i++) cbs[i] && cbs[i](time);
+      this.nextAnimationFrameCbs = new Map(), cbs.forEach(cb => cb(time));
     }, this.tryRunAnimationFrameNextFrame = () => {
-      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame));
+      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.size && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
     };
   }
   addAnimationFrameCb(callback) {
-    return this.nextAnimationFrameCbs.push(callback), this.tryRunAnimationFrameNextFrame(), this.nextAnimationFrameCbs.length - 1;
+    return this.nextAnimationFrameCbs.set(++idx, callback), this.tryRunAnimationFrameNextFrame(), idx;
   }
   removeAnimationFrameCb(index) {
-    return index >= 0 && index < this.nextAnimationFrameCbs.length && (this.nextAnimationFrameCbs[index] = null, !0);
+    return !!this.nextAnimationFrameCbs.has(index) && (this.nextAnimationFrameCbs.delete(index), !0);
+  }
+}
+
+class EventListenerManager {
+  constructor() {
+    this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
+  }
+  setEventListenerTransformer(transformer) {
+    this._eventListenerTransformer = transformer || (event => event);
+  }
+  addEventListener(type, listener, options) {
+    if (!listener) return;
+    const wrappedListener = event => {
+      const transformedEvent = this._eventListenerTransformer(event);
+      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
+    };
+    this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
+  }
+  removeEventListener(type, listener, options) {
+    var _a;
+    if (!listener) return;
+    const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
+    wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
+  }
+  dispatchEvent(event) {
+    return this._nativeDispatchEvent(event);
+  }
+  clearAllEventListeners() {
+    this._listenerMap.forEach((listenersMap, type) => {
+      listenersMap.forEach((wrappedListener, originalListener) => {
+        this._nativeRemoveEventListener(type, wrappedListener, void 0);
+      });
+    }), this._listenerMap.clear();
+  }
+  _nativeAddEventListener(type, listener, options) {
+    throw new Error("_nativeAddEventListener must be implemented by derived classes");
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
+  }
+  _nativeDispatchEvent(event) {
+    throw new Error("_nativeDispatchEvent must be implemented by derived classes");
   }
 }
 
@@ -636,7 +689,7 @@ var __decorate$Q = undefined && undefined.__decorate || function (decorators, ta
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
-let DefaultGlobal = class {
+let DefaultGlobal = class extends EventListenerManager {
   get env() {
     return this._env;
   }
@@ -680,10 +733,19 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    super(), this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
+  _nativeAddEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
+  }
+  _nativeDispatchEvent(event) {
+    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
+  }
   bindContribution(params) {
     const promiseArr = [];
     if (this.contributions.getContributions().forEach(contribution => {
@@ -724,15 +786,6 @@ let DefaultGlobal = class {
   releaseCanvas(canvas) {
     return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
   }
-  addEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
-  }
-  removeEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
-  }
-  dispatchEvent(event) {
-    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
-  }
   getRequestAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
   }
@@ -799,16 +852,13 @@ let DefaultGlobal = class {
   updateDom(dom, params) {
     return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
   }
-  getElementTop(dom) {
-    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  getElementTop(dom, baseWindow = !1) {
     return this._env || this.setEnv("browser"), this.envContribution.getElementTop(dom, baseWindow);
   }
-  getElementLeft(dom) {
-    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  getElementLeft(dom, baseWindow = !1) {
     return this._env || this.setEnv("browser"), this.envContribution.getElementLeft(dom, baseWindow);
   }
-  getElementTopLeft(dom) {
-    let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  getElementTopLeft(dom, baseWindow = !1) {
     return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
   }
   isMacOS() {
@@ -830,6 +880,11 @@ var AnimateMode;
   AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
 }(AnimateMode || (AnimateMode = {}));
 
+var STATUS$1;
+!function (STATUS) {
+  STATUS[STATUS.INITIAL = 0] = "INITIAL", STATUS[STATUS.RUNNING = 1] = "RUNNING", STATUS[STATUS.PAUSE = 2] = "PAUSE";
+}(STATUS$1 || (STATUS$1 = {}));
+
 var AnimateStepType;
 !function (AnimateStepType) {
   AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
@@ -888,7 +943,7 @@ class BoundsContext {
   clear() {
     this.bounds.clear();
   }
-  release() {}
+  release(...params) {}
 }
 
 class CurvePath {
@@ -1063,8 +1118,7 @@ function drawArc(context, x, y, coords) {
     context.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5]);
   }
 }
-const addArcToBezierPath = function (bezierPath, startAngle, endAngle, cx, cy, rx, ry) {
-  let counterclockwise = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : !1;
+const addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, counterclockwise = !1) => {
   const PI2 = 2 * Math.PI,
     sAngle = (startAngle % PI2 + PI2) % PI2;
   let deltaAngle,
@@ -1092,12 +1146,7 @@ const addArcToBezierPath = function (bezierPath, startAngle, endAngle, cx, cy, r
 };
 
 const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
-function renderCommandList(commandList, context) {
-  let x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let sx = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-  let sy = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
-  let z = arguments.length > 6 ? arguments[6] : undefined;
+function renderCommandList(commandList, context, x = 0, y = 0, sx = 1, sy = 1, z) {
   for (let i = 0; i < commandList.length; i++) {
     const command = commandList[i];
     commandFuncs[command[0]](command, context, x, y, sx, sy, z);
@@ -1147,44 +1196,6 @@ function quadLength(p0, p1, p2, iterationCount) {
   return snapLength([p0.x, p1.x, p2.x], [p0.y, p1.y, p2.y]);
 }
 
-class QuadraticBezierCurve extends Curve {
-  constructor(p0, p1, p2) {
-    super(), this.type = CurveTypeEnum.QuadraticBezierCurve, this.p0 = p0, this.p1 = p1, this.p2 = p2;
-  }
-  _validPoint() {
-    return Number.isFinite(this.p0.x + this.p0.y + this.p1.x + this.p1.y + this.p2.x + this.p2.y);
-  }
-  getPointAt(t) {
-    if (!1 !== this.defined) return quadPointAt(this.p0, this.p1, this.p2, t);
-    throw new Error("defined为false的点不能getPointAt");
-  }
-  calcLength() {
-    return this._validPoint() ? quadLength(this.p0, this.p1, this.p2) : 60;
-  }
-  calcProjLength(direction) {
-    return direction === Direction.ROW ? abs(this.p0.x - this.p2.x) : direction === Direction.COLUMN ? abs(this.p0.y - this.p2.y) : 0;
-  }
-  getAngleAt(t) {
-    const minT = max(t - .01, 0),
-      maxT = min(t + .01, 1),
-      minP = this.getPointAt(minT),
-      maxP = this.getPointAt(maxT);
-    return atan2(maxP.y - minP.y, maxP.x - minP.x);
-  }
-  draw(path, x, y, sx, sy, percent) {
-    if (path.moveTo(this.p0.x * sx + x, this.p0.y * sy + y), percent >= 1) path.quadraticCurveTo(this.p1.x * sx + x, this.p1.y * sy + y, this.p2.x * sx + x, this.p2.y * sy + y);else if (percent > 0) {
-      const [curve1] = divideQuad(this, percent);
-      path.quadraticCurveTo(curve1.p1.x * sx + x, curve1.p1.y * sy + y, curve1.p2.x * sx + x, curve1.p2.y * sy + y);
-    }
-  }
-  getYAt(x) {
-    throw new Error("QuadraticBezierCurve暂不支持getYAt");
-  }
-  includeX(x) {
-    throw new Error("QuadraticBezierCurve暂不支持includeX");
-  }
-}
-
 function divideCubic(curve, t) {
   const {
       p0: p0,
@@ -1200,17 +1211,6 @@ function divideCubic(curve, t) {
     c23 = PointService.pointAtPP(c2, c3, t);
   return [new CubicBezierCurve(p0, c1, c12, pt), new CubicBezierCurve(pt, c23, c3, p3)];
 }
-function divideQuad(curve, t) {
-  const {
-      p0: p0,
-      p1: p1,
-      p2: p2
-    } = curve,
-    pt = quadPointAt(p0, p1, p2, t),
-    c1 = PointService.pointAtPP(p0, p1, t),
-    c2 = PointService.pointAtPP(p1, p2, t);
-  return [new QuadraticBezierCurve(p0, c1, pt), new QuadraticBezierCurve(pt, c2, p2)];
-}
 class CubicBezierCurve extends Curve {
   constructor(p0, p1, p2, p3) {
     super(), this.type = CurveTypeEnum.CubicBezierCurve, this.p0 = p0, this.p1 = p1, this.p2 = p2, this.p3 = p3;
@@ -1387,7 +1387,7 @@ class ReflectSegContext extends SegContext {
   }
 }
 
-function genCurveSegments(path, points) {
+function genCurveSegments(path, points, step = 1) {
   let defined0 = !1;
   for (let i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
 }
@@ -1430,8 +1430,7 @@ class Linear {
     return this.context.tryUpdateLength();
   }
 }
-function genLinearSegments(points) {
-  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function genLinearSegments(points, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1441,7 +1440,7 @@ function genLinearSegments(points) {
   return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
 }
 function genLinearTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 1);
 }
 
 function point$3(curveClass, x, y, defined, p) {
@@ -1484,10 +1483,9 @@ class Basis {
   }
 }
 function genBasisTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 2);
 }
-function genBasisSegments(points) {
-  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function genBasisSegments(points, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1580,10 +1578,9 @@ class MonotoneY extends MonotoneX {
   }
 }
 function genMonotoneXTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 2);
 }
-function genMonotoneXSegments(points) {
-  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function genMonotoneXSegments(points, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1594,10 +1591,9 @@ function genMonotoneXSegments(points) {
   return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
 }
 function genMonotoneYTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 2);
 }
-function genMonotoneYSegments(points) {
-  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function genMonotoneYSegments(points, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1609,9 +1605,7 @@ function genMonotoneYSegments(points) {
 }
 
 let Step$1 = class Step {
-  constructor(context) {
-    let t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
-    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
+  constructor(context, t = .5, startPoint) {
     this.context = context, this._t = t, this.startPoint = startPoint;
   }
   areaStart() {
@@ -1652,8 +1646,7 @@ class StepClosed extends Step$1 {
     this.context.closePath();
   }
 }
-function genStepSegments(points, t) {
-  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+function genStepSegments(points, t, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1663,10 +1656,9 @@ function genStepSegments(points, t) {
   return genStepTypeSegments(new Step$1(segContext, t, startPoint), points), segContext;
 }
 function genStepTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 1);
 }
-function genStepClosedSegments(points, t) {
-  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+function genStepClosedSegments(points, t, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1681,8 +1673,7 @@ class LinearClosed extends Linear {
     this.context.closePath();
   }
 }
-function genLinearClosedSegments(points) {
-  let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function genLinearClosedSegments(points, params = {}) {
   const {
     direction: direction,
     startPoint: startPoint
@@ -1692,7 +1683,7 @@ function genLinearClosedSegments(points) {
   return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
 }
 function genLinearClosedTypeSegments(path, points) {
-  return genCurveSegments(path, points);
+  return genCurveSegments(path, points, 1);
 }
 
 function point$1(curveClass, x, y, defined, p) {
@@ -1713,9 +1704,7 @@ function point$1(curveClass, x, y, defined, p) {
   curveClass.context.bezierCurveTo(x1, y1, x2, y2, curveClass._x2, curveClass._y2, defined, curveClass.lastPoint1);
 }
 class CatmullRom {
-  constructor(context) {
-    let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
-    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
+  constructor(context, alpha = .5, startPoint) {
     this.context = context, this.startPoint = startPoint, this._alpha = alpha;
   }
   areaStart() {
@@ -1769,8 +1758,7 @@ class CatmullRom {
   }
 }
 function commonGenCatmullRomSegments(type, cons) {
-  return function (points, alpha) {
-    let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return function (points, alpha, params = {}) {
     const {
       direction: direction,
       startPoint: startPoint
@@ -1779,15 +1767,13 @@ function commonGenCatmullRomSegments(type, cons) {
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
     const segContext = genSegContext(type, direction, points),
       gatmullRom = new cons(segContext, alpha, startPoint);
-    return genCurveSegments(gatmullRom, points), segContext;
+    return genCurveSegments(gatmullRom, points, 2), segContext;
   };
 }
 const genCatmullRomSegments = commonGenCatmullRomSegments("catmullRom", CatmullRom);
 
 class CatmullRomClosed {
-  constructor(context) {
-    let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
-    let startPoint = arguments.length > 2 ? arguments[2] : undefined;
+  constructor(context, alpha = .5, startPoint) {
     this.context = context, this.startPoint = startPoint, this._alpha = alpha;
   }
   areaStart() {
@@ -1851,6 +1837,55 @@ class CatmullRomClosed {
 }
 const genCatmullRomClosedSegments = commonGenCatmullRomSegments("catmullRomClosed", CatmullRomClosed);
 
+function divideQuad(curve, t) {
+  const {
+      p0: p0,
+      p1: p1,
+      p2: p2
+    } = curve,
+    pt = quadPointAt(p0, p1, p2, t),
+    c1 = PointService.pointAtPP(p0, p1, t),
+    c2 = PointService.pointAtPP(p1, p2, t);
+  return [new QuadraticBezierCurve(p0, c1, pt), new QuadraticBezierCurve(pt, c2, p2)];
+}
+class QuadraticBezierCurve extends Curve {
+  constructor(p0, p1, p2) {
+    super(), this.type = CurveTypeEnum.QuadraticBezierCurve, this.p0 = p0, this.p1 = p1, this.p2 = p2;
+  }
+  _validPoint() {
+    return Number.isFinite(this.p0.x + this.p0.y + this.p1.x + this.p1.y + this.p2.x + this.p2.y);
+  }
+  getPointAt(t) {
+    if (!1 !== this.defined) return quadPointAt(this.p0, this.p1, this.p2, t);
+    throw new Error("defined为false的点不能getPointAt");
+  }
+  calcLength() {
+    return this._validPoint() ? quadLength(this.p0, this.p1, this.p2) : 60;
+  }
+  calcProjLength(direction) {
+    return direction === Direction.ROW ? abs(this.p0.x - this.p2.x) : direction === Direction.COLUMN ? abs(this.p0.y - this.p2.y) : 0;
+  }
+  getAngleAt(t) {
+    const minT = max(t - .01, 0),
+      maxT = min(t + .01, 1),
+      minP = this.getPointAt(minT),
+      maxP = this.getPointAt(maxT);
+    return atan2(maxP.y - minP.y, maxP.x - minP.x);
+  }
+  draw(path, x, y, sx, sy, percent) {
+    if (path.moveTo(this.p0.x * sx + x, this.p0.y * sy + y), percent >= 1) path.quadraticCurveTo(this.p1.x * sx + x, this.p1.y * sy + y, this.p2.x * sx + x, this.p2.y * sy + y);else if (percent > 0) {
+      const [curve1] = divideQuad(this, percent);
+      path.quadraticCurveTo(curve1.p1.x * sx + x, curve1.p1.y * sy + y, curve1.p2.x * sx + x, curve1.p2.y * sy + y);
+    }
+  }
+  getYAt(x) {
+    throw new Error("QuadraticBezierCurve暂不支持getYAt");
+  }
+  includeX(x) {
+    throw new Error("QuadraticBezierCurve暂不支持includeX");
+  }
+}
+
 class CurveContext {
   constructor(path) {
     this.path = path, this._lastX = this._lastY = this._startX = this._startY = 0;
@@ -2048,11 +2083,7 @@ class CustomPath2D extends CurvePath {
     cmd[1] = cmd[1] * sx + x, cmd[2] = cmd[2] * sy + y, cmd[3] = cmd[3] * (sx + sy) / 2;
   }
   closePathTransform() {}
-  _runCommandStrList(commandStrList) {
-    let l = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let sX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-    let sY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  _runCommandStrList(commandStrList, l = 0, t = 0, sX = 1, sY = 1) {
     let current,
       tempX,
       tempY,
@@ -2126,11 +2157,7 @@ class CustomPath2D extends CurvePath {
       previous = current;
     }
   }
-  _runCommandList(commandList) {
-    let l = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let sX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-    let sY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  _runCommandList(commandList, l = 0, t = 0, sX = 1, sY = 1) {
     if (0 !== l || 0 !== t || 1 !== sX || 1 !== sY) for (let i = 0, len = commandList.length; i < len; ++i) {
       const current = commandList[i].slice();
       switch (current[0]) {
@@ -2541,9 +2568,6 @@ const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImag
   opacity: 1
 });
 
-class Application {}
-const application = new Application();
-
 const parse = function () {
   const tokens = {
     linearGradient: /^(linear\-gradient)/i,
@@ -2784,9 +2808,7 @@ function getScaledStroke(context, width, dpr) {
     scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
   return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
 }
-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;
+function createColor(context, c, params, offsetX = 0, offsetY = 0) {
   var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
   let result, color;
@@ -2925,8 +2947,7 @@ function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter)
   }
   return needTestLetter && (index = testLetter(desc, index)), index;
 }
-function testLetter(string, index) {
-  let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+function testLetter(string, index, negativeWrongMatch = !1) {
   let i = index;
   for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
   return i;
@@ -2936,8 +2957,7 @@ function testLetter2(string, index) {
   for (; regLetter.test(string[i + 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
   return i + 1;
 }
-function measureTextCanvas(text, character) {
-  let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
+function measureTextCanvas(text, character, mode = "actual") {
   var _a;
   if ("" === text) return {
     ascent: 0,
@@ -3007,10 +3027,9 @@ let ATextMeasure = class {
     }
     return metrics;
   }
-  estimate(text, _ref) {
-    let {
-      fontSize = DefaultTextAttribute.fontSize
-    } = _ref;
+  estimate(text, {
+    fontSize = DefaultTextAttribute.fontSize
+  }) {
     let eCharLen = 0,
       cCharLen = 0;
     for (let i = 0; i < text.length; i++) text.charCodeAt(i) < 128 ? eCharLen++ : cCharLen++;
@@ -3321,8 +3340,7 @@ let ATextMeasure = class {
       });
     });
   }
-  clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
-    let forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
+  clipTextWithSuffix(text, options, width, suffix, wordBreak, position, forceSuffix = !1) {
     if ("" === suffix) return this.clipText(text, options, width, wordBreak);
     if (0 === text.length) return {
       str: "",
@@ -3766,7 +3784,7 @@ class DefaultCanvasAllocate {
   get length() {
     return this.pools.length;
   }
-  release() {
+  release(...params) {
     this.pools = [];
   }
 }
@@ -3784,7 +3802,7 @@ var __decorate$N = undefined && undefined.__decorate || function (decorators, ta
   };
 const VWindow = Symbol.for("VWindow");
 const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
-let DefaultWindow = class {
+let DefaultWindow = class extends EventListenerManager {
   get width() {
     if (this._handler) {
       const wh = this._handler.getWH();
@@ -3803,7 +3821,7 @@ let DefaultWindow = class {
     return this._handler.getDpr();
   }
   constructor() {
-    this.hooks = {
+    super(), this.hooks = {
       onChange: new SyncHook(["x", "y", "width", "height"])
     }, this.active = () => {
       const global = this.global;
@@ -3811,6 +3829,15 @@ let DefaultWindow = class {
       container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
     }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
   }
+  _nativeAddEventListener(type, listener, options) {
+    return this._handler.addEventListener(type, listener, options);
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    return this._handler.removeEventListener(type, listener, options);
+  }
+  _nativeDispatchEvent(event) {
+    return this._handler.dispatchEvent(event);
+  }
   postInit() {
     this.global.hooks.onSetEnv.tap("window", this.active), this.active();
   }
@@ -3850,7 +3877,7 @@ let DefaultWindow = class {
     throw new Error("暂不支持");
   }
   release() {
-    return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
+    return this.global.hooks.onSetEnv.unTap("window", this.active), this.clearAllEventListeners(), this._handler.releaseWindow();
   }
   getContext() {
     return this._handler.getContext();
@@ -3861,15 +3888,6 @@ let DefaultWindow = class {
   getImageBuffer(type) {
     return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
   }
-  addEventListener(type, listener, options) {
-    return this._handler.addEventListener(type, listener, options);
-  }
-  removeEventListener(type, listener, options) {
-    return this._handler.removeEventListener(type, listener, options);
-  }
-  dispatchEvent(event) {
-    return this._handler.dispatchEvent(event);
-  }
   getBoundingClientRect() {
     return this._handler.getBoundingClientRect();
   }
@@ -3962,8 +3980,7 @@ let DefaultGraphicUtil = class {
   bindTextMeasure(tm) {
     this._textMeasure = tm;
   }
-  measureText(text, tc) {
-    let method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "native";
+  measureText(text, tc, method = "native") {
     var _a;
     this.configure(this.global, this.global.env);
     const m = this.global.measureTextMethod;
@@ -4146,8 +4163,7 @@ class Theme {
     for (; group.parent;) if ((group = group.parent).theme) return group;
     return null;
   }
-  applyTheme(group, pt) {
-    let force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+  applyTheme(group, pt, force = !1) {
     if (this.dirty) {
       const parentGroup = this.getParentWithTheme(group);
       if (parentGroup) {
@@ -4246,8 +4262,7 @@ class Node extends EventEmitter {
   constructor() {
     super(), this._uid = Generator.GenAutoIncrementId(), this._firstChild = null, this._lastChild = null, this.parent = null, this._count = 1;
   }
-  forEachChildren(cb) {
-    let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  forEachChildren(cb, reverse = !1) {
     if (reverse) {
       let child = this._lastChild,
         i = 0;
@@ -4264,8 +4279,7 @@ class Node extends EventEmitter {
       }
     }
   }
-  forEachChildrenAsync(cb) {
-    let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  forEachChildrenAsync(cb, reverse = !1) {
     return __awaiter$3(this, void 0, void 0, function* () {
       if (reverse) {
         let child = this._lastChild,
@@ -4289,13 +4303,12 @@ class Node extends EventEmitter {
   forEach(cb) {
     return this.forEachChildren(cb);
   }
-  appendChild(node) {
-    let highPerformance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  appendChild(node, highPerformance = !0) {
     if (this._uid === node._uid) return null;
     if (!highPerformance && node.isAncestorsOf(this)) throw new Error("【Node::appendChild】不能将父辈元素append为子元素");
     return node.parent && node.parent.removeChild(node), node.parent = this, this._lastChild ? (this._lastChild._next = node, node._prev = this._lastChild, this._lastChild = node) : (this._firstChild = this._lastChild = node, node._prev = node._next = null), this._idMap || (this._idMap = new Map()), this._idMap.set(node._uid, node), this.setCount(node.count), this._structEdit = !0, node;
   }
-  appendChildArrHighPerformance(nodes) {
+  appendChildArrHighPerformance(nodes, replace = !1) {
     return console.error("暂不支持该函数"), nodes;
   }
   insertBefore(newNode, referenceNode) {
@@ -4363,8 +4376,7 @@ class Node extends EventEmitter {
   replaceChild(newChild, oldChild) {
     throw new Error("暂不支持");
   }
-  find(callback) {
-    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  find(callback, deep = !1) {
     let target = null;
     return this.forEachChildren((node, index) => !(node === this || !callback(node, index)) && (target = node, !0)), deep && this.forEachChildren(child => {
       if (child.isContainer) {
@@ -4374,8 +4386,7 @@ class Node extends EventEmitter {
       return !1;
     }), target;
   }
-  findAll(callback) {
-    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  findAll(callback, deep = !1) {
     let nodes = [];
     return this.forEachChildren((node, index) => {
       node !== this && callback(node, index) && nodes.push(node);
@@ -4404,8 +4415,7 @@ class Node extends EventEmitter {
   getElementsByType(type) {
     return this.findAll(node => node.type === type, !0);
   }
-  getChildByName(name) {
-    let deep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  getChildByName(name, deep = !1) {
     return this.find(node => node.name === name, deep);
   }
   getChildAt(idx) {
@@ -4524,10 +4534,7 @@ class Node extends EventEmitter {
   removeAllListeners() {
     return this.removeAllEventListeners();
   }
-  dispatchEvent(event) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+  dispatchEvent(event, ...args) {
     return super.emit(event.type, event, ...args), !event.defaultPrevented;
   }
   emit(event, data) {
@@ -4922,8 +4929,7 @@ class SquareSymbol extends BaseSymbol {
 }
 var square$1 = new SquareSymbol();
 
-function trianglUpOffset(ctx, r, x, y) {
-  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function trianglUpOffset(ctx, r, x, y, offset = 0) {
   return ctx.moveTo(x + r + 2 * offset, r + y + offset), ctx.lineTo(x - r - 2 * offset, r + y + offset), ctx.lineTo(x, y - r - 2 * offset), ctx.closePath(), !0;
 }
 class TriangleUpSymbol extends BaseSymbol {
@@ -5069,8 +5075,7 @@ class TriangleLeftSymbol extends BaseSymbol {
 }
 var triangleLeft = new TriangleLeftSymbol();
 
-function trianglRightOffset(ctx, r, x, y) {
-  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function trianglRightOffset(ctx, r, x, y, offset = 0) {
   return ctx.moveTo(x - r - offset, r + y + 2 * offset), ctx.lineTo(r + x + 2 * offset, y), ctx.lineTo(x - r - offset, y - r - 2 * offset), ctx.closePath(), !0;
 }
 class TriangleRightSymbol extends BaseSymbol {
@@ -5086,8 +5091,7 @@ class TriangleRightSymbol extends BaseSymbol {
 }
 var triangleRight = new TriangleRightSymbol();
 
-function trianglDownOffset(ctx, r, x, y) {
-  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function trianglDownOffset(ctx, r, x, y, offset = 0) {
   return ctx.moveTo(x - r - 2 * offset, y - r - offset), ctx.lineTo(x + r + 2 * offset, y - r - offset), ctx.lineTo(x, y + r + 2 * offset), ctx.closePath(), !0;
 }
 class TriangleDownSymbol extends BaseSymbol {
@@ -5304,8 +5308,7 @@ var rect = new RectSymbol();
 
 const tempBounds = new AABBBounds();
 class CustomSymbolClass {
-  constructor(type, path) {
-    let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+  constructor(type, path, isSvg = !1) {
     this.pathStr = "", this.type = type, isArray(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
   }
   drawOffset(ctx, size, x, y, offset, z, cb) {
@@ -5327,10 +5330,9 @@ class CustomSymbolClass {
   bounds(size, bounds) {
     if (size = this.parseSize(size), this.isSvg) {
       if (!this.svgCache) return;
-      return bounds.clear(), void this.svgCache.forEach(_ref => {
-        let {
-          path: path
-        } = _ref;
+      return bounds.clear(), void this.svgCache.forEach(({
+        path: path
+      }) => {
         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);
       });
     }
@@ -5386,8 +5388,7 @@ function findClosingIndex(xmlData, str, i, errMsg) {
   if (-1 === closingIndex) throw new Error(errMsg);
   return closingIndex + str.length - 1;
 }
-function tagExpWithClosingIndex(xmlData, i) {
-  let closingChar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ">";
+function tagExpWithClosingIndex(xmlData, i, closingChar = ">") {
   let attrBoundary,
     tagExp = "";
   for (let index = i; index < xmlData.length; index++) {
@@ -5405,8 +5406,7 @@ function tagExpWithClosingIndex(xmlData, i) {
     tagExp += ch;
   }
 }
-function readTagExp(xmlData, i, removeNSPrefix) {
-  let closingChar = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ">";
+function readTagExp(xmlData, i, removeNSPrefix, closingChar = ">") {
   const result = tagExpWithClosingIndex(xmlData, i + 1, closingChar);
   if (!result) return;
   let tagExp = result.data;
@@ -5568,8 +5568,7 @@ undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator)
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-function boundStroke(bounds, halfW, miter) {
-  let pad = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+function boundStroke(bounds, halfW, miter, pad = 0) {
   return bounds.expand(halfW + (pad / 2 + (miter ? miterAdjustment(miter, halfW) : 0))), bounds;
 }
 function miterAdjustment(miter, strokeWidth) {
@@ -5754,7 +5753,7 @@ class DefaultMatrixAllocate {
   get length() {
     return this.pools.length;
   }
-  release() {
+  release(...params) {
     this.pools = [];
   }
 }
@@ -5782,7 +5781,7 @@ class DefaultMat4Allocate {
   get length() {
     return this.pools.length;
   }
-  release() {
+  release(...params) {
     this.pools = [];
   }
 }
@@ -5817,8 +5816,7 @@ let EmptyContext2d = class {
   getContext() {
     throw new Error("不支持getContext");
   }
-  setTransformForCurrent() {
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+  setTransformForCurrent(force = !1) {
     !force && this.applyedMatrix.equalToMatrix(this.matrix) || (this.applyedMatrix = this.cloneMatrix(this.matrix));
   }
   get currentMatrix() {
@@ -5839,8 +5837,7 @@ let EmptyContext2d = class {
   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;
+  rotate(rad, setTransform = !0) {
     this.matrix.rotate(rad), setTransform && this.setTransformForCurrent();
   }
   save() {
@@ -5851,55 +5848,41 @@ let EmptyContext2d = class {
     const matrix = this.cloneMatrix(this.matrix);
     this.stack.push(matrix);
   }
-  scale(sx, sy) {
-    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+  scale(sx, sy, setTransform = !0) {
     this.matrix.scale(sx, sy), setTransform && this.setTransformForCurrent();
   }
-  setScale(sx, sy) {
-    let setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+  setScale(sx, sy, setTransform = !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;
+  scalePoint(sx, sy, px, py, setTransform = !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;
+  setTransform(a, b, c, d, e, f, setTransform = !0, dpr = 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;
+  setTransformFromMatrix(matrix, setTransform = !0, dpr = 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;
+  resetTransform(setTransform = !0, dpr = 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;
+  transform(a, b, c, d, e, f, setTransform = !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;
+  translate(x, y, setTransform = !0) {
     this.matrix.translate(x, y), setTransform && this.setTransformForCurrent();
   }
-  rotateDegrees(deg) {
-    let setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  rotateDegrees(deg, setTransform = !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;
+  rotateAbout(rad, x, y, setTransform = !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;
+  rotateDegreesAbout(deg, x, y, setTransform = !0) {
     this.translate(x, y, !1), this.rotateDegrees(deg, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
   }
   beginPath() {
@@ -5993,19 +5976,16 @@ let EmptyContext2d = class {
   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;
+  clearMatrix(setTransform = !0, dpr = 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;
+  onlyTranslate(dpr = this.dpr) {
     return this.matrix.a === dpr && 0 === this.matrix.b && 0 === this.matrix.c && this.matrix.d === dpr;
   }
-  release() {
+  release(...params) {
     this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
   }
 };
@@ -6016,9 +5996,7 @@ var 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];
+  static Get(str, size = ColorType.Color1, arr = [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;
@@ -6046,8 +6024,7 @@ class ColorStore {
 }
 ColorStore.store255 = {}, ColorStore.store1 = {};
 
-function colorArrayToString(color) {
-  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+function colorArrayToString(color, alphaChannel = !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) {
@@ -6231,11 +6208,14 @@ class Graphic extends Node {
   get globalTransMatrix() {
     return this.tryUpdateGlobalTransMatrix(!0);
   }
-  constructor() {
-    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(params = {}) {
     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);
   }
+  getGraphicService() {
+    var _a, _b;
+    return null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.graphicService) && void 0 !== _b ? _b : application.graphicService;
+  }
   getAttributes() {
     return this.attribute;
   }
@@ -6248,8 +6228,7 @@ class Graphic extends Node {
   set2dMode() {
     this.in3dMode = !1;
   }
-  getOffsetXY(attr) {
-    let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  getOffsetXY(attr, includeScroll = !1) {
     var _a, _b;
     const {
       dx = attr.dx,
@@ -6265,13 +6244,12 @@ class Graphic extends Node {
     this._emitCustomEvent("animate-bind", animate);
   }
   tryUpdateAABBBounds() {
-    var _a, _b;
     const full = "imprecise" === this.attribute.boundsMode;
     if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
     if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
-    null === (_a = this.stage) || void 0 === _a || _a.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+    this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
     const bounds = this.doUpdateAABBBounds(full);
-    return null === (_b = this.stage) || void 0 === _b || _b.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+    return this.getGraphicService().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;
@@ -6361,7 +6339,7 @@ class Graphic extends Node {
     const b = this.AABBBounds;
     return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
   }
-  tryUpdateGlobalTransMatrix() {
+  tryUpdateGlobalTransMatrix(clearTag = !0) {
     if (this._globalTransMatrix) {
       if (this.parent) {
         const m = this.parent.globalTransMatrix;
@@ -6373,12 +6351,11 @@ class Graphic extends Node {
   shouldUpdateGlobalMatrix() {
     return !0;
   }
-  tryUpdateLocalTransMatrix() {
-    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+  tryUpdateLocalTransMatrix(clearTag = !0) {
     return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
   }
   shouldUpdateAABBBounds() {
-    return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
+    return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && this.getGraphicService().validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && this.getGraphicService().validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
   }
   shouldSelfChangeUpdateAABBBounds() {
     return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
@@ -6414,23 +6391,17 @@ class Graphic extends Node {
   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;
+  setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context) {
     this.setAttributes(params, forceUpdateTag, context), this.animates && this.animates.forEach(animate => {
       Object.keys(params).forEach(key => {
         animate.preventAttr(key);
       });
     });
   }
-  setAttributes(params) {
-    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-    let context = arguments.length > 2 ? arguments[2] : undefined;
+  setAttributes(params, forceUpdateTag = !1, context) {
     (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
   }
-  _setAttributes(params) {
-    let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-    let context = arguments.length > 2 ? arguments[2] : undefined;
+  _setAttributes(params, forceUpdateTag = !1, context) {
     const keys = Object.keys(params);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
@@ -6445,16 +6416,14 @@ class Graphic extends Node {
     }, this.attribute, key, context);
     params ? this._setAttributes(params, forceUpdateTag, context) : isNil(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
   }
-  needUpdateTags(keys) {
-    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
+  needUpdateTags(keys, k = GRAPHIC_UPDATE_TAG_KEY) {
     for (let i = 0; i < k.length; i++) {
       const attrKey = k[i];
       if (-1 !== keys.indexOf(attrKey)) return !0;
     }
     return !1;
   }
-  needUpdateTag(key) {
-    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
+  needUpdateTag(key, k = GRAPHIC_UPDATE_TAG_KEY) {
     for (let i = 0; i < k.length; i++) {
       if (key === k[i]) return !0;
     }
@@ -6559,8 +6528,7 @@ class Graphic extends Node {
     return this;
   }
   onAttributeUpdate(context) {
-    var _a;
-    context && context.skipUpdateCallback || (null === (_a = this.stage) || void 0 === _a || _a.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
+    context && context.skipUpdateCallback || (this.getGraphicService().onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
   }
   update(d) {
     d ? (d.bounds && this.tryUpdateAABBBounds(), d.trans && this.tryUpdateLocalTransMatrix()) : (this.tryUpdateAABBBounds(), this.tryUpdateLocalTransMatrix());
@@ -6597,6 +6565,9 @@ class Graphic extends Node {
     } else this.stopStateAnimates(), this.setAttributesAndPreventAnimate(attrs, !1, {
       type: AttributeUpdateType.STATE
     });
+    this._emitCustomEvent("afterStateUpdate", {
+      type: AttributeUpdateType.STATE
+    });
   }
   updateNormalAttrs(stateAttrs) {
     const newNormalAttrs = {};
@@ -6608,8 +6579,7 @@ class Graphic extends Node {
       newNormalAttrs[key] = this.getNormalAttribute(key);
     }), this.normalAttrs = newNormalAttrs;
   }
-  stopStateAnimates() {
-    let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
+  stopStateAnimates(type = "end") {
     this.animates && this.animates.forEach(animate => {
       animate.stateNames && (animate.stop(type), this.animates.delete(animate.id));
     });
@@ -6747,7 +6717,6 @@ class Graphic extends Node {
     }
   }
   setStage(stage, layer) {
-    var _a;
     if (this.stage !== stage) {
       if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), this.animates && this.animates.size) {
         const timeline = stage.getTimeline();
@@ -6755,7 +6724,7 @@ class Graphic extends Node {
           a.timeline.isGlobal && (a.setTimeline(timeline), timeline.addAnimate(a));
         });
       }
-      this._onSetStage && this._onSetStage(this, stage, layer), null === (_a = this.stage) || void 0 === _a || _a.graphicService.onSetStage(this, stage);
+      this._onSetStage && this._onSetStage(this, stage, layer), this.getGraphicService().onSetStage(this, stage);
     }
   }
   setStageToShadowRoot(stage, layer) {
@@ -6774,8 +6743,7 @@ class Graphic extends Node {
     var _a;
     return null !== (_a = this.attribute[name]) && void 0 !== _a ? _a : this.getDefaultAttribute(name);
   }
-  onSetStage(cb) {
-    let immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  onSetStage(cb, immediate = !1) {
     this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
   }
   attachShadow(shadowRoot) {
@@ -6796,8 +6764,7 @@ class Graphic extends Node {
   createPathProxy(path) {
     return isString(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
   }
-  loadImage(image) {
-    let background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  loadImage(image, background = !1) {
     if (!image || background && backgroundNotImage(image)) return;
     const url = image;
     this.resources || (this.resources = new Map());
@@ -6827,8 +6794,7 @@ class Graphic extends Node {
       animate.stop();
     });
   }
-  stopAnimates() {
-    let stopChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+  stopAnimates(stopChildren = !1) {
     this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), this.isContainer && stopChildren && this.forEachChildren(c => {
       c.stopAnimates(stopChildren);
     });
@@ -6903,12 +6869,11 @@ class Group extends Graphic {
     return !!super.shouldUpdateAABBBounds() || !!(this._childUpdateTag & UpdateTag.UPDATE_BOUNDS);
   }
   tryUpdateAABBBounds() {
-    var _a, _b;
     if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
-    null === (_a = this.stage) || void 0 === _a || _a.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
+    this.getGraphicService().beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
     const selfChange = this.shouldSelfChangeUpdateAABBBounds(),
       bounds = this.doUpdateAABBBounds();
-    return this.addUpdateLayoutTag(), null === (_b = this.stage) || void 0 === _b || _b.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
+    return this.addUpdateLayoutTag(), this.getGraphicService().afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, selfChange), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
   }
   doUpdateLocalMatrix() {
     const {
@@ -6968,19 +6933,16 @@ class Group extends Graphic {
     return this.theme.getTheme(this);
   }
   incrementalAppendChild(node) {
-    var _a;
     const data = super.appendChild(node);
-    return this.stage && data && (data.stage = this.stage, data.layer = this.layer), this.addUpdateBoundTag(), null === (_a = this.stage) || void 0 === _a || _a.graphicService.onAddIncremental(node, this, this.stage), data;
+    return this.stage && data && (data.stage = this.stage, data.layer = this.layer), this.addUpdateBoundTag(), this.getGraphicService().onAddIncremental(node, this, this.stage), data;
   }
   incrementalClearChild() {
-    var _a;
-    super.removeAllChild(), this.addUpdateBoundTag(), null === (_a = this.stage) || void 0 === _a || _a.graphicService.onClearIncremental(this, this.stage);
+    super.removeAllChild(), this.addUpdateBoundTag(), this.getGraphicService().onClearIncremental(this, this.stage);
   }
   _updateChildToStage(child) {
     return this.stage && child && child.setStage(this.stage, this.layer), this.addUpdateBoundTag(), child;
   }
-  appendChild(node) {
-    let addStage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  appendChild(node, addStage = !0) {
     const data = super.appendChild(node);
     return addStage && this.stage && data && data.setStage(this.stage, this.layer), this.addUpdateBoundTag(), data;
   }
@@ -6994,20 +6956,16 @@ class Group extends Graphic {
     return this._updateChildToStage(super.insertInto(newNode, idx));
   }
   removeChild(child) {
-    var _a;
     const data = super.removeChild(child);
-    return child.stage = null, null === (_a = this.stage) || void 0 === _a || _a.graphicService.onRemove(child), this.addUpdateBoundTag(), data;
+    return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
   }
-  removeAllChild() {
-    let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+  removeAllChild(deep = !1) {
     this.forEachChildren(child => {
-      var _a;
-      null === (_a = this.stage) || void 0 === _a || _a.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
+      this.getGraphicService().onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
     }), super.removeAllChild(), this.addUpdateBoundTag();
   }
   setStage(stage, layer) {
-    var _a;
-    this.stage !== stage && (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), null === (_a = this.stage) || void 0 === _a || _a.graphicService.onSetStage(this, stage), this.forEachChildren(item => {
+    this.stage !== stage && (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), this._onSetStage && this._onSetStage(this, stage, layer), this.getGraphicService().onSetStage(this, stage), this.forEachChildren(item => {
       item.setStage(stage, this.layer);
     }));
   }
@@ -7021,8 +6979,7 @@ class Group extends Graphic {
       g.isContainer && g.addUpdateGlobalPositionTag();
     });
   }
-  tryUpdateGlobalTransMatrix() {
-    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+  tryUpdateGlobalTransMatrix(clearTag = !0) {
     if (this.shouldUpdateGlobalMatrix()) {
       if (this._globalTransMatrix) {
         if (this.parent) {
@@ -7096,8 +7053,7 @@ class Layer extends Group {
       zIndex: null !== (_a = params.zIndex) && void 0 !== _a ? _a : 0
     }), this.layer = this, this.subLayers = new Map(), this.theme = new Theme(), this.background = "rgba(0, 0, 0, 0)", this.afterDrawCbs = [];
   }
-  combineSubLayer() {
-    let removeIncrementalKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+  combineSubLayer(removeIncrementalKey = !0) {
     const subLayers = Array.from(this.subLayers.values()).sort((a, b) => a.zIndex - b.zIndex);
     this.layerHandler.merge(subLayers.map(l => (l.layer.subLayers.size && l.layer.combineSubLayer(removeIncrementalKey), l.layer.getNativeHandler()))), removeIncrementalKey && subLayers.forEach(l => {
       l.group && (l.group.incremental = 0);
@@ -7206,10 +7162,9 @@ let DefaultLayerService = DefaultLayerService_1 = class {
     let layerHandler;
     return layerHandler = "static" === layerMode ? container.get(StaticLayerHandlerContribution) : "dynamic" === layerMode ? container.get(DynamicLayerHandlerContribution) : container.get(VirtualLayerHandlerContribution), layerHandler;
   }
-  createLayer(stage) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      main: !1
-    };
+  createLayer(stage, options = {
+    main: !1
+  }) {
     var _a;
     this.tryInit();
     let layerMode = this.getRecommendedLayerType(options.layerMode);
@@ -7450,8 +7405,7 @@ const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContrib
 function textDrawOffsetX(textAlign, width) {
   return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
 }
-function textLayoutOffsetY(baseline, lineHeight, fontSize) {
-  let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+function textLayoutOffsetY(baseline, lineHeight, fontSize, buf = 0) {
   return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
 }
 
@@ -7634,7 +7588,7 @@ let DefaultGraphicService = class {
     const {
       visible = theme.visible
     } = attribute;
-    return !(!graphic.valid || !visible) || (aabbBounds.empty() || (graphic.parent && aabbBounds.transformWithMatrix(graphic.parent.globalTransMatrix), application.graphicService.clearAABBBounds(graphic, graphic.stage, aabbBounds), aabbBounds.clear()), !1);
+    return !(!graphic.valid || !visible) || (aabbBounds.empty() || (graphic.parent && aabbBounds.transformWithMatrix(graphic.parent.globalTransMatrix), this.clearAABBBounds(graphic, graphic.stage, aabbBounds), aabbBounds.clear()), !1);
   }
   updateTempAABBBounds(aabbBounds) {
     const tb1 = this.tempAABBBounds1,
@@ -7665,10 +7619,9 @@ const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
 
 const CIRCLE_UPDATE_TAG_KEY = ["radius", "startAngle", "endAngle", ...GRAPHIC_UPDATE_TAG_KEY];
 class Circle extends Graphic {
-  constructor() {
-    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      radius: 1
-    };
+  constructor(params = {
+    radius: 1
+  }) {
     super(params), this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
   }
   isValid() {
@@ -7750,10 +7703,7 @@ class CanvasTextLayout {
     } else bbox.yOffset = -bbox.height;
     return bbox;
   }
-  GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
-    let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
-    let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
-    let params = arguments.length > 6 ? arguments[6] : undefined;
+  GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = "", wordBreak, params) {
     const {
       lineWidth: lineWidth,
       suffixPosition = "end",
@@ -7876,11 +7826,10 @@ class Text extends Graphic {
   get isMultiLine() {
     return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
   }
-  constructor() {
-    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      text: "",
-      fontSize: 16
-    };
+  constructor(params = {
+    text: "",
+    fontSize: 16
+  }) {
     super(params), this.type = "text", this.numberType = TEXT_NUMBER_TYPE, this.cache = {};
   }
   isValid() {
@@ -8212,12 +8161,10 @@ class Text extends Graphic {
     var _a;
     return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
   }
-  needUpdateTags(keys) {
-    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
+  needUpdateTags(keys, k = TEXT_UPDATE_TAG_KEY) {
     return super.needUpdateTags(keys, k);
   }
-  needUpdateTag(key) {
-    let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
+  needUpdateTag(key, k = TEXT_UPDATE_TAG_KEY) {
     return super.needUpdateTag(key, k);
   }
   _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
@@ -8420,19 +8367,15 @@ const updateBoundsOfSymbolOuterBorder = (attribute, symbolTheme, aabbBounds) =>
 
 const SYMBOL_UPDATE_TAG_KEY = ["symbolType", "size", ...GRAPHIC_UPDATE_TAG_KEY];
 let Symbol$1 = class Symbol extends Graphic {
-  constructor() {
-    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      symbolType: "circle"
-    };
+  constructor(params = {
+    symbolType: "circle"
+  }) {
     super(params), this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
   }
   getParsedPath() {
     return this.shouldUpdateShape() && (this._parsedPath = this.doUpdateParsedPath(), this.clearUpdateShapeTag()), this._parsedPath;
   }
-  getParsedPath2D() {
-    let x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  getParsedPath2D(x = 0, y = 0, size = 1) {
     let path = null;
     try {
       path = new Path2D();
@@ -8517,8 +8460,7 @@ function createSymbol(attributes) {
 
 const LINE_UPDATE_TAG_KEY = ["segments", "points", "curveType", "curveTension", ...GRAPHIC_UPDATE_TAG_KEY];
 let Line$1 = class Line extends Graphic {
-  constructor() {
-    let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(params = {}) {
     super(params), this.type = "line", this.numberType = LINE_NUMBER_TYPE;
   }
   isValid() {
@@ -9256,8 +9198,7 @@ class Wrapper {
       line = new Line(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
     this.frame.lines.push(line), this.frame.actualHeight += line.height, this.y += line.height, this.lineBuffer.length = 0, this.lineWidth = this.maxAscent = this.maxDescent = this.maxAscentForBlank = this.maxDescentForBlank = 0;
   }
-  deal(paragraph) {
-    let singleLine = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  deal(paragraph, singleLine = !1) {
     paragraph instanceof RichTextIcon ? "horizontal" === this.direction && 0 === this.width || "vertical" === this.direction && 0 === this.height || this.lineWidth + paragraph[this.directionKey.width] <= this[this.directionKey.width] ? this.store(paragraph) : 0 === this.lineBuffer.length ? (this.store(paragraph), this.send()) : (this.send(), this.deal(paragraph)) : "number" != typeof this.width || this.width < 0 || (paragraph.newLine && this.send(), (0 !== paragraph.text.length || this.newLine) && ("horizontal" === this.direction && 0 === this.width || "vertical" === this.direction && 0 === this.height || this.lineWidth + paragraph[this.directionKey.width] <= this[this.directionKey.width] ? this.store(paragraph) : this.lineWidth === this[this.directionKey.width] ? (this.send(), this.deal(paragraph)) : this.cut(paragraph, singleLine)));
   }
   cut(paragraph, singleLine) {
@@ -10568,9 +10509,7 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
 const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
 const halfPi = pi / 2;
-function createRectPath(path, x, y, width, height, rectCornerRadius) {
-  let roundCorner = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
-  let edgeCb = arguments.length > 7 ? arguments[7] : undefined;
+function createRectPath(path, x, y, width, height, rectCornerRadius, roundCorner = !0, edgeCb) {
   let cornerRadius;
   if (Array.isArray(roundCorner) && (edgeCb = roundCorner, roundCorner = !0), width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
     const cornerRadiusArr = rectCornerRadius;
@@ -10845,6 +10784,9 @@ class BaseRender {
   init(contributions) {
     contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions || (this.builtinContributions = []), this.builtinContributions.push(defaultBaseClipRenderBeforeContribution), this.builtinContributions.push(defaultBaseClipRenderAfterContribution), this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
   }
+  reInit() {
+    this.init(this.graphicRenderContributions);
+  }
   beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
     this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
       if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
@@ -10908,8 +10850,7 @@ class BaseRender {
       doStroke: doStroke
     };
   }
-  transform(graphic, graphicAttribute, context) {
-    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+  transform(graphic, graphicAttribute, context, use3dMatrixIn3dMode = !1) {
     const {
         x = graphicAttribute.x,
         y = graphicAttribute.y,
@@ -11014,8 +10955,8 @@ var __decorate$G = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasArcRender = class extends BaseRender {
-  constructor(arcRenderContribitions) {
-    super(), this.arcRenderContribitions = arcRenderContribitions, this.numberType = ARC_NUMBER_TYPE, this.builtinContributions = [defaultArcRenderContribution, defaultArcBackgroundRenderContribution, defaultArcTextureRenderContribution], this.init(arcRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = ARC_NUMBER_TYPE, this.builtinContributions = [defaultArcRenderContribution, defaultArcBackgroundRenderContribution, defaultArcTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawArcTailCapPath(arc, context, cx, cy, outerRadius, innerRadius, _sa, _ea) {
     const capAngle = _ea - _sa,
@@ -11122,7 +11063,7 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb), this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb)) : (this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb), this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb))), !isFullStroke && doStroke) {
+    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(arc, context, x, y, arcAttribute, doStroke, isFullStroke, sVisible, strokeCb), this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb)) : (this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb), this._runStroke(arc, context, x, y, arcAttribute, doStroke, isFullStroke, sVisible, strokeCb))), !isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -11161,8 +11102,8 @@ let DefaultCanvasArcRender = class extends BaseRender {
   _runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb) {
     doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
   }
-  _runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb) {
-    doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+  _runStroke(arc, context, x, y, arcAttribute, doStroke, isFullStroke, sVisible, strokeCb) {
+    doStroke && isFullStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
   }
   draw(arc, renderService, drawContext, params) {
     const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc;
@@ -11187,8 +11128,8 @@ var __decorate$F = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasCircleRender = class extends BaseRender {
-  constructor(circleRenderContribitions) {
-    super(), this.circleRenderContribitions = circleRenderContribitions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(circleRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(circle, context, x, y, drawContext, params, fillCb, strokeCb) {
     const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle,
@@ -11574,8 +11515,8 @@ var __decorate$D = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasAreaRender = class extends BaseRender {
-  constructor(areaRenderContribitions) {
-    super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -11818,8 +11759,8 @@ var __decorate$C = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasPathRender = class extends BaseRender {
-  constructor(pathRenderContribitions) {
-    super(), this.pathRenderContribitions = pathRenderContribitions, this.numberType = PATH_NUMBER_TYPE, this.builtinContributions = [defaultPathBackgroundRenderContribution, defaultPathTextureRenderContribution], this.init(pathRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = PATH_NUMBER_TYPE, this.builtinContributions = [defaultPathBackgroundRenderContribution, defaultPathTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(path, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -11874,8 +11815,8 @@ var __decorate$B = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasRectRender = class extends BaseRender {
-  constructor(rectRenderContribitions) {
-    super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(rectRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb, rectAttribute) {
     rectAttribute = null != rectAttribute ? rectAttribute : getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -11944,8 +11885,8 @@ var __decorate$A = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasSymbolRender = class extends BaseRender {
-  constructor(symbolRenderContribitions) {
-    super(), this.symbolRenderContribitions = symbolRenderContribitions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(symbolRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb, symbolAttribute) {
     var _a;
@@ -12031,7 +11972,7 @@ class DefaultBoundsAllocate {
   get length() {
     return this.pools.length;
   }
-  release() {
+  release(...params) {
     this.pools = [];
   }
 }
@@ -12115,8 +12056,8 @@ var __decorate$z = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasTextRender = class extends BaseRender {
-  constructor(textRenderContribitions) {
-    super(), this.textRenderContribitions = textRenderContribitions, this.numberType = TEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init(textRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = TEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(text, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -12251,11 +12192,12 @@ let DefaultCanvasTextRender = class extends BaseRender {
 DefaultCanvasTextRender = __decorate$z([injectable(), __param$q(0, inject(ContributionProvider)), __param$q(0, named(TextRenderContribution)), __metadata$t("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
 function drawPolygon(path, points, x, y) {
-  path.moveTo(points[0].x + x, points[0].y + y);
-  for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+  if (points && points.length) {
+    path.moveTo(points[0].x + x, points[0].y + y);
+    for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+  }
 }
-function drawRoundedPolygon(path, points, x, y, cornerRadius) {
-  let closePath = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : !0;
+function drawRoundedPolygon(path, points, x, y, cornerRadius, closePath = !0) {
   var _a;
   if (points.length < 3) return void drawPolygon(path, points, x, y);
   let startI = 0,
@@ -12320,8 +12262,8 @@ var __decorate$y = undefined && undefined.__decorate || function (decorators, ta
     };
   };
 let DefaultCanvasPolygonRender = class extends BaseRender {
-  constructor(polygonRenderContribitions) {
-    super(), this.polygonRenderContribitions = polygonRenderContribitions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(polygonRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(polygon, context, x, y, drawContext, params, fillCb, strokeCb) {
     const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon,
@@ -12376,6 +12318,9 @@ let DefaultCanvasGroupRender = class {
   constructor(groupRenderContribitions) {
     this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
   }
+  reInit() {
+    this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution);
+  }
   drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb, groupAttribute) {
     const {
       clip: clip,
@@ -12436,7 +12381,7 @@ let DefaultCanvasGroupRender = class {
     });
   }
   draw(group, renderService, drawContext, params) {
-    var _a;
+    var _a, _b;
     const {
       context: context
     } = drawContext;
@@ -12456,7 +12401,7 @@ let DefaultCanvasGroupRender = class {
           height: height
         } = group.attribute,
         canvas = context.canvas,
-        newCanvas = vglobal.createCanvas({
+        newCanvas = application.global.createCanvas({
           width: canvas.width,
           height: canvas.height,
           dpr: 1
@@ -12481,7 +12426,7 @@ let DefaultCanvasGroupRender = class {
       scrollY: scrollY
     } = group.attribute;
     let p;
-    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.renderInGroup && (p = params.renderInGroup(params.skipDraw, group, drawContext, null === (_a = params.renderInGroupParams) || void 0 === _a ? void 0 : _a.nextM)), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
+    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.renderInGroup && (p = params.renderInGroup(null === (_a = params.renderInGroupParams) || void 0 === _a ? void 0 : _a.skipSort, group, drawContext, null === (_b = params.renderInGroupParams) || void 0 === _b ? void 0 : _b.nextM)), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
       const {
           x: x,
           y: y,
@@ -12518,8 +12463,8 @@ var __decorate$w = undefined && undefined.__decorate || function (decorators, ta
   };
 const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
 let DefaultCanvasImageRender = class extends BaseRender {
-  constructor(imageRenderContribitions) {
-    super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
     const imageAttribute = getTheme(image).image,
@@ -12701,12 +12646,12 @@ let CommonDrawItemInterceptorContribution = class {
     this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
   }
   afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !graphic.attribute._debug_bounds && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
     for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
     return !1;
   }
   beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !graphic.attribute._debug_bounds && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
     for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
     return !1;
   }
@@ -12843,6 +12788,9 @@ let DefaultRenderService = class {
   afterDraw(params) {
     this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
   }
+  reInit() {
+    this.drawContribution.reInit();
+  }
   render(groups, params) {
     this.renderTreeRoots = groups, this.drawParams = params;
     const updateBounds = params.updateBounds;
@@ -13007,7 +12955,7 @@ let DefaultPluginService = class {
   unRegister(plugin) {
     "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
   }
-  release() {
+  release(...params) {
     this.onStartupFinishedPlugin.forEach(plugin => {
       plugin.deactivate(this);
     }), this.onStartupFinishedPlugin = [], this.onRegisterPlugin.forEach(plugin => {
@@ -13154,9 +13102,7 @@ function parseChildMap(graphic, defaultZIndex, reverse) {
     zIdxArray: zIdxArray
   };
 }
-function foreach(graphic, defaultZIndex, cb) {
-  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-  let sort3d = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+function foreach(graphic, defaultZIndex, cb, reverse = !1, sort3d = !1) {
   let needSort = !1;
   if (sort3d) needSort = !0;else {
     let lastZIndex;
@@ -13187,14 +13133,12 @@ function foreach(graphic, defaultZIndex, cb) {
     }
   } else graphic.forEachChildren(cb, reverse);
 }
-function foreachAsync(graphic, defaultZIndex, cb) {
-  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+function foreachAsync(graphic, defaultZIndex, cb, reverse = !1) {
   return __awaiter$2(this, void 0, void 0, function* () {
     yield graphic.forEachChildrenAsync(cb, reverse);
   });
 }
-function findNextGraphic(graphic, id, defaultZIndex) {
-  let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+function findNextGraphic(graphic, id, defaultZIndex, reverse = !1) {
   let needSort = !1;
   graphic.forEachChildren((item, i) => {
     const {
@@ -13251,6 +13195,11 @@ let DefaultDrawContribution = class {
       }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
     }, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray(this.contributions) || (this.contributions = [this.contributions]), this.init();
   }
+  reInit() {
+    this.init(), this.contributions.forEach(item => {
+      item.reInit();
+    });
+  }
   init() {
     this.contributions.forEach(item => {
       if (item.style) {
@@ -14031,6 +13980,13 @@ class AbstractComponent extends Group {
         changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
         this.dispatchEvent(changeEvent);
     }
+    eventPosToStagePos(e) {
+        var _a, _b;
+        const result = { x: 0, y: 0 };
+        const stagePoints = (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
+        this.globalTransMatrix.transformPoint(stagePoints, result);
+        return result;
+    }
 }
 
 const MathPickerContribution = Symbol.for("MathPickerContribution");
@@ -14972,6 +14928,11 @@ class ScrollBar extends AbstractComponent {
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, ScrollBar.defaultAttributes, attributes));
         this.name = 'scrollbar';
+        this._handleTouchMove = (e) => {
+            if (isValid(this._prePos)) {
+                e.preventDefault();
+            }
+        };
         this._onRailPointerDown = (e) => {
             const { viewX, viewY } = e;
             const { direction, width, height, range } = this.attribute;
@@ -15010,7 +14971,7 @@ class ScrollBar extends AbstractComponent {
             });
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onSliderPointerUp);
             });
@@ -15035,7 +14996,6 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
-            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -15053,6 +15013,7 @@ class ScrollBar extends AbstractComponent {
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
             const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
+            this._prePos = null;
             this._dispatchEvent(SCROLLBAR_END_EVENT, {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
@@ -15107,6 +15068,9 @@ class ScrollBar extends AbstractComponent {
         if (this._slider) {
             this._slider.addEventListener('pointerdown', this._onSliderPointerDown);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     render() {
         this._reset();
@@ -15193,7 +15157,7 @@ class ScrollBar extends AbstractComponent {
     _clearDragEvents() {
         const triggers = getEndTriggersOfDrag();
         const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onSliderPointerUp);
         });
@@ -15202,6 +15166,13 @@ class ScrollBar extends AbstractComponent {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 ScrollBar.defaultAttributes = {
     direction: 'horizontal',
@@ -17628,7 +17599,7 @@ class AxisBase extends AnimateComponent {
     getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
         currentAttribute.scale = this.attribute.scale;
-        merge(this.attribute, attributes);
+        this.attribute = attributes;
         const offscreenGroup = graphicCreator.group({
             x: this.attribute.x,
             y: this.attribute.y
@@ -17991,7 +17962,7 @@ class AxisBase extends AnimateComponent {
                 var _a;
                 if (el.type !== 'group' && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    el.setFinalAttribute(el.attribute);
+                    el.setFinalAttributes(el.attribute);
                     if (oldEl) {
                         oldEl.release();
                         const oldAttrs = oldEl.attribute;
@@ -18722,9 +18693,10 @@ function commonInterpolateUpdate(key, from, to, ratio, step, target) {
 function noop() {}
 class Step {
   constructor(type, props, duration, easing) {
+    var _a;
     this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
       this.target.setAttributes(this.target.attribute);
-    }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
+    }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : null !== (_a = Easing[easing]) && void 0 !== _a ? _a : Easing.linear : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
   }
   bind(target, animate) {
     this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
@@ -18741,8 +18713,7 @@ class Step {
   getLastProps() {
     return this.prev ? this.prev.props || {} : this.animate.getStartProps();
   }
-  setDuration(duration) {
-    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  setDuration(duration, updateDownstream = !0) {
     this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
   }
   getDuration() {
@@ -18763,8 +18734,7 @@ class Step {
       } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
     }), this.interpolateUpdateFunctions = funcs;
   }
-  setStartTime(time) {
-    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  setStartTime(time, updateDownstream = !0) {
     this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
   }
   getStartTime() {
@@ -18846,12 +18816,12 @@ class WaitStep extends Step {
   determineInterpolateUpdateFunction() {}
 }
 
-class DefaultTimeline {
+class DefaultTimeline extends EventEmitter {
   get animateCount() {
     return this._animateCount;
   }
   constructor() {
-    this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
+    super(), this.head = null, this.tail = null, this.animateMap = new Map(), this._animateCount = 0, this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this.id = Generator.GenAutoIncrementId(), this.paused = !1;
   }
   isRunning() {
     return !this.paused && this._animateCount > 0;
@@ -18883,15 +18853,14 @@ class DefaultTimeline {
     const scaledDelta = delta * this._playSpeed;
     this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
       animate.status === AnimateStatus.END ? this.removeAnimate(animate, !0) : animate.status !== AnimateStatus.RUNNING && animate.status !== AnimateStatus.INITIAL || animate.advance(scaledDelta);
-    });
+    }), 0 === this._animateCount && this.emit("animationEnd");
   }
   clear() {
     this.forEachAccessAnimate(animate => {
       animate.release();
     }), this.head = null, this.tail = null, this.animateMap.clear(), this._animateCount = 0, this._totalDuration = 0;
   }
-  removeAnimate(animate) {
-    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+  removeAnimate(animate, release = !0) {
     const node = this.animateMap.get(animate);
     node && (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), node.prev ? node.prev.next = node.next : this.head = node.next, node.next ? node.next.prev = node.prev : this.tail = node.prev, this.animateMap.delete(animate), this._animateCount--, animate.getStartTime() + animate.getDuration() >= this._totalDuration && this.recalculateTotalDuration());
   }
@@ -18929,10 +18898,7 @@ const defaultTimeline = new DefaultTimeline();
 defaultTimeline.isGlobal = !0;
 
 class Animate {
-  constructor() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
-    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
-    let slience = arguments.length > 2 ? arguments[2] : undefined;
+  constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
     this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
   }
   getStartProps() {
@@ -18953,9 +18919,7 @@ class Animate {
   bind(target) {
     return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
   }
-  to(props) {
-    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+  to(props, duration = 300, easing = "linear") {
     const step = new Step(AnimateStepType.to, props, duration, easing);
     return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
   }
@@ -18985,9 +18949,7 @@ class Animate {
       this._endProps[key] = currentStep.props[key];
     }), currentStep = currentStep.next;
   }
-  from(props) {
-    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+  from(props, duration = 300, easing = "linear") {
     const step = new Step(AnimateStepType.from, props, duration, easing);
     return this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.updateDuration(), this;
   }
@@ -19126,6 +19088,227 @@ class Animate {
   }
 }
 
+const performanceRAF = new PerformanceRAF();
+class RAFTickHandler {
+  constructor() {
+    this.released = !1;
+  }
+  tick(interval, cb) {
+    performanceRAF.addAnimationFrameCb(() => {
+      if (!this.released) return cb(this);
+    });
+  }
+  release() {
+    this.released = !0;
+  }
+  getTime() {
+    return Date.now();
+  }
+}
+class DefaultTicker extends EventEmitter {
+  constructor(stage) {
+    super(), this.timelines = [], this.frameTimeHistory = [], this.handleTick = (handler, params) => {
+      const {
+        once = !1
+      } = null != params ? params : {};
+      if (this.ifCanStop()) return this.stop(), !1;
+      const currentTime = handler.getTime();
+      this._lastTickTime = currentTime, this.lastFrameTime < 0 && (this.lastFrameTime = currentTime - this.interval + this.timeOffset, this.frameTimeHistory.push(this.lastFrameTime));
+      const delta = currentTime - this.lastFrameTime,
+        skip = this.checkSkip(delta);
+      return skip || (this._handlerTick(delta), this.lastFrameTime = currentTime, this.frameTimeHistory.push(this.lastFrameTime)), once || handler.tick(this.interval, this.handleTick), !skip;
+    }, this._handlerTick = delta => {
+      this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(timeline => {
+        timeline.tick(delta);
+      }), this.emit("tick", delta));
+    }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.stage = stage, this.autoStop = !0, this.interval = 16, this.computeTimeOffsetAndJitter();
+  }
+  bindStage(stage) {
+    this.stage = stage;
+  }
+  computeTimeOffsetAndJitter() {
+    this.timeOffset = Math.floor(Math.random() * this.interval), this._jitter = Math.min(Math.max(.2 * this.interval, 6), .7 * this.interval);
+  }
+  init() {
+    this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
+      this.initHandler();
+    }), application.global.env && this.initHandler();
+  }
+  addTimeline(timeline) {
+    this.timelines.push(timeline);
+  }
+  remTimeline(timeline) {
+    this.timelines = this.timelines.filter(t => t !== timeline);
+  }
+  getTimelines() {
+    return this.timelines;
+  }
+  initHandler() {
+    this.setupTickHandler();
+  }
+  setupTickHandler() {
+    const handler = new RAFTickHandler();
+    return this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
+  }
+  setInterval(interval) {
+    this.interval = interval, this.computeTimeOffsetAndJitter();
+  }
+  getInterval() {
+    return this.interval;
+  }
+  setFPS(fps) {
+    this.setInterval(Math.floor(1e3 / fps));
+  }
+  getFPS() {
+    return 1e3 / this.interval;
+  }
+  tick(interval) {
+    this.tickerHandler.tick(interval, handler => this.handleTick(handler, {
+      once: !0
+    }));
+  }
+  tickTo(t) {
+    this.tickerHandler.tickTo && this.tickerHandler.tickTo(t, handler => {
+      this.handleTick(handler, {
+        once: !0
+      });
+    });
+  }
+  pause() {
+    return this.status !== STATUS$1.INITIAL && (this.status = STATUS$1.PAUSE, !0);
+  }
+  resume() {
+    return this.status !== STATUS$1.INITIAL && (this.status = STATUS$1.RUNNING, !0);
+  }
+  ifCanStop() {
+    if (this.autoStop) {
+      if (!this.timelines.length) return !0;
+      if (this.timelines.every(timeline => !timeline.isRunning())) return !0;
+    }
+    return !1;
+  }
+  start(force = !1) {
+    if (this.status === STATUS$1.RUNNING) return !1;
+    if (!this.tickerHandler) return !1;
+    if (!force) {
+      if (this.status === STATUS$1.PAUSE) return !1;
+      if (this.ifCanStop()) return !1;
+    }
+    return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
+  }
+  stop() {
+    this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
+  }
+  trySyncTickStatus() {
+    this.status === STATUS$1.INITIAL && this.timelines.some(timeline => timeline.isRunning()) ? this.start() : this.status === STATUS$1.RUNNING && this.timelines.every(timeline => !timeline.isRunning()) && this.stop();
+  }
+  release() {
+    var _a;
+    this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
+  }
+  checkSkip(delta) {
+    if ("performance" === this.stage.params.optimize.tickRenderMode) return !1;
+    return delta < this.interval + 2 * (Math.random() - .5) * this._jitter;
+  }
+}
+
+class AnimationTransitionRegistry {
+  constructor() {
+    this.transitions = new Map(), this.registerDefaultTransitions();
+  }
+  static getInstance() {
+    return AnimationTransitionRegistry.instance || (AnimationTransitionRegistry.instance = new AnimationTransitionRegistry()), AnimationTransitionRegistry.instance;
+  }
+  registerDefaultTransitions() {
+    this.registerTransition("appear", "*", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !1
+    })), this.registerTransition("appear", "appear", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("appear", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("appear", "exit", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("normal", "*", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !1
+    })), this.registerTransition("normal", "normal", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("normal", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("normal", "exit", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("exit", "*", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("exit", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("exit", "enter", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("exit", "exit", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("enter", "*", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !1
+    })), this.registerTransition("enter", "enter", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("enter", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("enter", "exit", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("disappear", "*", () => ({
+      allowTransition: !1,
+      stopOriginalTransition: !1
+    })), this.registerTransition("disappear", "appear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("update", "*", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !1
+    })), this.registerTransition("update", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("update", "exit", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("state", "*", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !1
+    })), this.registerTransition("state", "disappear", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })), this.registerTransition("state", "exit", () => ({
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    }));
+  }
+  isTransitionAllowed(fromState, toState, graphic) {
+    var _a, _b, _c, _d;
+    let func = null === (_a = this.transitions.get(fromState)) || void 0 === _a ? void 0 : _a.get(toState);
+    return func ? func(graphic, fromState) : (func = null === (_b = this.transitions.get(fromState)) || void 0 === _b ? void 0 : _b.get("*"), func ? func(graphic, fromState) : (func = null === (_c = this.transitions.get("*")) || void 0 === _c ? void 0 : _c.get(toState), func ? func(graphic, fromState) : (func = null === (_d = this.transitions.get("*")) || void 0 === _d ? void 0 : _d.get("*"), func ? func(graphic, fromState) : {
+      allowTransition: !0,
+      stopOriginalTransition: !0
+    })));
+  }
+  registerTransition(fromState, toState, transition) {
+    let fromStateMap = this.transitions.get(fromState);
+    fromStateMap || (fromStateMap = new Map(), this.transitions.set(fromState, fromStateMap)), fromStateMap.set(toState, transition);
+  }
+}
+AnimationTransitionRegistry.getInstance();
+
 class AnimateExecutor {
   static registerBuiltInAnimate(name, animate) {
     AnimateExecutor.builtInAnimateMap[name] = animate;
@@ -19364,14 +19547,10 @@ class AnimateExecutor {
     var _a, _b;
     return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
   }
-  executeItem(params, graphic) {
-    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  executeItem(params, graphic, index = 0, count = 1) {
     return Array.isArray(params) ? params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean) : [this._executeItem(params, graphic, index, count)].filter(Boolean);
   }
-  _executeItem(params, graphic) {
-    let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  _executeItem(params, graphic, index = 0, count = 1) {
     if (!graphic) return null;
     const isTimeline = ("timeSlices" in params);
     let animate = null;
@@ -19388,6 +19567,211 @@ class AnimateExecutor {
 }
 AnimateExecutor.builtInAnimateMap = {};
 
+const AnimationStates = {
+  APPEAR: "appear",
+  DISAPPEAR: "disappear",
+  UPDATE: "update",
+  HIGHLIGHT: "highlight",
+  UNHIGHLIGHT: "unhighlight",
+  SELECT: "select",
+  UNSELECT: "unselect",
+  HOVER: "hover",
+  UNHOVER: "unhover",
+  ACTIVE: "active",
+  INACTIVE: "inactive"
+};
+class AnimationStateStore {
+  constructor(graphic) {
+    this.graphic = graphic;
+  }
+  registerState(state) {
+    this.states || (this.states = new Map()), this.states.set(state.name, state);
+  }
+  clearStates() {
+    var _a;
+    null === (_a = this.states) || void 0 === _a || _a.clear();
+  }
+}
+class AnimationStateManager {
+  constructor(graphic) {
+    this.stateList = null, this.graphic = graphic;
+  }
+  applyState(nextState, animationConfig, callback) {
+    const registry = AnimationTransitionRegistry.getInstance(),
+      shouldStopState = [],
+      shouldApplyState = [];
+    if (this.stateList && this.stateList.length ? nextState.forEach((state, index) => {
+      const result = {
+        allowTransition: !0,
+        stopOriginalTransition: !0
+      };
+      this.stateList.forEach(currState => {
+        const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
+        result.allowTransition = result.allowTransition && _result.allowTransition;
+      }), result.allowTransition && (shouldApplyState.push({
+        state: state,
+        animationConfig: isArray(animationConfig[index]) ? animationConfig[index].map(item => item.animation) : animationConfig[index].animation,
+        executor: new AnimateExecutor(this.graphic)
+      }), this.stateList.forEach(currState => {
+        registry.isTransitionAllowed(currState.state, state, this.graphic).stopOriginalTransition && shouldStopState.push(currState);
+      }));
+    }) : nextState.forEach((state, index) => {
+      shouldApplyState.push({
+        state: state,
+        animationConfig: isArray(animationConfig[index]) ? animationConfig[index].map(item => item.animation) : animationConfig[index].animation,
+        executor: new AnimateExecutor(this.graphic)
+      });
+    }), shouldStopState.forEach(state => {
+      state.executor.stop();
+    }), shouldApplyState.length) {
+      shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
+      for (let i = 0; i < shouldApplyState.length; i++) {
+        const nextState = shouldApplyState[i + 1],
+          currentState = shouldApplyState[i];
+        currentState.executor.onEnd(() => {
+          nextState && nextState.executor.execute(nextState.animationConfig), this.stateList = this.stateList.filter(state => state !== currentState), i === shouldApplyState.length - 1 && callback && callback(!1);
+        });
+      }
+    } else callback && callback(!0);
+    this.stateList ? this.stateList = this.stateList.filter(state => !shouldStopState.includes(state)) : this.stateList = [], this.stateList.push(...shouldApplyState);
+  }
+  applyAppearState(animationConfig, callback) {
+    this.applyState([AnimationStates.APPEAR], [{
+      name: AnimationStates.APPEAR,
+      animation: animationConfig
+    }], callback);
+  }
+  applyDisappearState(animationConfig, callback) {
+    this.applyState([AnimationStates.DISAPPEAR], [{
+      name: AnimationStates.DISAPPEAR,
+      animation: animationConfig
+    }], callback);
+  }
+  applyUpdateState(animationConfig, callback) {
+    this.applyState([AnimationStates.UPDATE], [{
+      name: AnimationStates.UPDATE,
+      animation: animationConfig
+    }], callback);
+  }
+  applyHighlightState(animationConfig, callback) {
+    this.applyState([AnimationStates.HIGHLIGHT], [{
+      name: AnimationStates.HIGHLIGHT,
+      animation: animationConfig
+    }], callback);
+  }
+  applyUnhighlightState(animationConfig, callback) {
+    this.applyState([AnimationStates.UNHIGHLIGHT], [{
+      name: AnimationStates.UNHIGHLIGHT,
+      animation: animationConfig
+    }], callback);
+  }
+  stopState(state, type) {
+    var _a;
+    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+    stateInfo && stateInfo.executor.stop(type);
+  }
+  clearState() {
+    var _a;
+    null === (_a = this.stateList) || void 0 === _a || _a.forEach(state => {
+      state.executor.stop();
+    }), this.stateList = null;
+  }
+}
+
+class GraphicStateExtension {
+  _getAnimationStateManager(graphic) {
+    return graphic._animationStateManager || (graphic._animationStateManager = new AnimationStateManager(graphic)), graphic._animationStateManager;
+  }
+  _getAnimationStateStore(graphic) {
+    return graphic._animationStateStore || (graphic._animationStateStore = new AnimationStateStore(graphic)), graphic._animationStateStore;
+  }
+  registerAnimationState(state) {
+    return this._getAnimationStateStore(this).registerState(state), this;
+  }
+  applyAnimationState(state, animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyState(state, animationConfig, callback), this;
+  }
+  applyAppearState(animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyAppearState(animationConfig, callback), this;
+  }
+  applyDisappearState(animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyDisappearState(animationConfig, callback), this;
+  }
+  applyUpdateState(animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyUpdateState(animationConfig, callback), this;
+  }
+  applyHighlightState(animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyHighlightState(animationConfig, callback), this;
+  }
+  applyUnhighlightState(animationConfig, callback) {
+    return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
+  }
+  stopAnimationState(state, type) {
+    return this._getAnimationStateManager(this).stopState(state, type), this;
+  }
+  clearAnimationStates() {
+    return this._getAnimationStateManager(this).clearState(), this;
+  }
+  static extend(graphic) {
+    return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
+  }
+}
+
+class AnimateExtension {
+  getAttributes(final = !1) {
+    return final && this.finalAttribute ? this.finalAttribute : this.attribute;
+  }
+  animate(params) {
+    var _a, _b, _c;
+    this.animates || (this.animates = new Map());
+    const animate = new Animate(null == params ? void 0 : params.id, null !== (_b = null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline()) && void 0 !== _b ? _b : defaultTimeline, null == params ? void 0 : params.slience);
+    if (animate.bind(this), params) {
+      const {
+        onStart: onStart,
+        onEnd: onEnd,
+        onRemove: onRemove
+      } = params;
+      null != onStart && animate.onStart(onStart), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove);
+    }
+    return this.animates.set(animate.id, animate), animate.onRemove(() => {
+      animate.stop(), this.animates.delete(animate.id);
+    }), null === (_c = this.stage) || void 0 === _c || _c.ticker.start(), animate;
+  }
+  createTimeline() {
+    return new DefaultTimeline();
+  }
+  createTicker(stage) {
+    return new DefaultTicker(stage);
+  }
+  setFinalAttributes(finalAttribute) {
+    this.finalAttribute || (this.finalAttribute = {}), Object.assign(this.finalAttribute, finalAttribute);
+  }
+  initFinalAttributes(finalAttribute) {
+    this.finalAttribute = finalAttribute;
+  }
+  initAnimateExecutor() {
+    this._animateExecutor || (this._animateExecutor = new AnimateExecutor(this));
+  }
+  executeAnimation(config) {
+    return this.initAnimateExecutor(), this._animateExecutor.execute(config), this;
+  }
+  executeAnimations(configs) {
+    return this.initAnimateExecutor(), configs.forEach(config => {
+      this._animateExecutor.execute(config);
+    }), this;
+  }
+  getFinalAttribute() {
+    return this.finalAttribute;
+  }
+  getGraphicAttribute(key, prev = !1) {
+    return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
+  }
+}
+
+function registerAnimate() {
+  mixin(Graphic, GraphicStateExtension), mixin(Graphic, AnimateExtension);
+}
+
 class ACustomAnimate extends Step {
   constructor(customFrom, customTo, duration, easing, params) {
     super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
@@ -19461,6 +19845,99 @@ function createComponentAnimator(component) {
   return new ComponentAnimator(component);
 }
 
+class IncreaseCount extends ACustomAnimate {
+  constructor(from, to, duration, easing, params) {
+    super(from, to, duration, easing, params), this.formatTemplate = null, this.decimalLength = null == params ? void 0 : params.decimalLength, (null == params ? void 0 : params.formatTemplate) && params.formatTemplate.includes("{{var}}") && (this.formatTemplate = params.formatTemplate);
+  }
+  onFirstRun() {
+    var _a, _b, _c;
+    const fromProps = this.getLastProps(),
+      toProps = this.getEndProps(),
+      fromText = null !== (_a = fromProps.text) && void 0 !== _a ? _a : 0,
+      toText = null !== (_b = toProps.text) && void 0 !== _b ? _b : 0;
+    this.valid = !0;
+    let fromNum = 0,
+      toNum = 0,
+      fromFormat = "",
+      toFormat = "",
+      maxDecimalLength = 0;
+    if ("number" == typeof fromText) {
+      fromNum = fromText;
+      const decimalPart = fromText.toString().split(".")[1] || "";
+      maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+    } else {
+      if ("string" != typeof fromText) return void (this.valid = !1);
+      if (fromText.endsWith("%")) {
+        fromFormat = "%";
+        const cleanNumStr = fromText.substring(0, fromText.length - 1).replace(/,/g, "");
+        if (fromNum = parseFloat(cleanNumStr) / 100, isNaN(fromNum)) return void (this.valid = !1);
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+      } else {
+        const cleanNumStr = fromText.replace(/,/g, "");
+        if (fromNum = parseFloat(cleanNumStr), isNaN(fromNum)) return void (this.valid = !1);
+        fromText.includes(",") && (fromFormat = ",");
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+      }
+    }
+    if ("number" == typeof toText) {
+      toNum = toText;
+      const decimalPart = toText.toString().split(".")[1] || "";
+      maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+    } else {
+      if ("string" != typeof toText) return void (this.valid = !1);
+      if (toText.endsWith("%")) {
+        toFormat = "%";
+        const cleanNumStr = toText.substring(0, toText.length - 1).replace(/,/g, "");
+        if (toNum = parseFloat(cleanNumStr) / 100, isNaN(toNum)) return void (this.valid = !1);
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+      } else {
+        const cleanNumStr = toText.replace(/,/g, "");
+        if (toNum = parseFloat(cleanNumStr), isNaN(toNum)) return void (this.valid = !1);
+        toText.includes(",") && (toFormat = ",");
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+      }
+    }
+    if (null === (_c = this.params) || void 0 === _c ? void 0 : _c.format) {
+      switch (this.params.format) {
+        case "percent":
+          this.format = "%";
+          break;
+        case "thousandth":
+          this.format = ",";
+          break;
+        case "none":
+          this.format = "";
+          break;
+        default:
+          this.format = toFormat || fromFormat;
+      }
+      "%" === this.format && "%" !== toFormat && "%" !== fromFormat && void 0 === this.decimalLength && (this.decimalLength = 2), "%" === this.format || "%" !== toFormat && "%" !== fromFormat || (fromNum *= 100, toNum *= 100);
+    } else this.format = toFormat || fromFormat;
+    this.fromNumber = fromNum, this.toNumber = toNum, void 0 === this.decimalLength && (this.decimalLength = maxDecimalLength);
+  }
+  onEnd(cb) {
+    super.onEnd(cb), cb || this.props && this.target.setAttributes(this.props);
+  }
+  onUpdate(end, ratio, out) {
+    if (!this.valid) return;
+    const currentNumber = this.fromNumber + (this.toNumber - this.fromNumber) * ratio;
+    let formattedText = "";
+    const format = this.format,
+      numberWithDecimals = ("%" === format ? 100 * currentNumber : currentNumber).toFixed(this.decimalLength);
+    let formattedWithBasicFormat,
+      formattedNumber = numberWithDecimals;
+    if (parseFloat(numberWithDecimals) === Math.floor(parseFloat(numberWithDecimals)) && (formattedNumber = Math.floor(parseFloat(numberWithDecimals))), "%" === format) formattedWithBasicFormat = `${formattedNumber}%`;else if ("," === format) {
+      const parts = formattedNumber.toString().split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
+    } else formattedWithBasicFormat = formattedNumber;
+    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+  }
+}
+
 class AxisEnter extends AComponentAnimate {
     onBind() {
         var _a;
@@ -21672,6 +22149,7 @@ class LabelEnter extends AComponentAnimate {
     }
 }
 function registerLabelAnimate() {
+    AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
     AnimateExecutor.registerBuiltInAnimate('labelUpdate', LabelUpdate);
     AnimateExecutor.registerBuiltInAnimate('labelEnter', LabelEnter);
 }
@@ -22393,19 +22871,20 @@ class LabelBase extends AnimateComponent {
                 if (showLabelLine) {
                     labelLine = this._createLabelLine(text, relatedGraphic);
                 }
+                const currentLabel = labelLine ? { text, labelLine } : { text };
                 if (syncState) {
-                    this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], (_a = relatedGraphic.currentStates) !== null && _a !== void 0 ? _a : []);
+                    this.updateStatesOfLabels([currentLabel], (_a = relatedGraphic.currentStates) !== null && _a !== void 0 ? _a : []);
                 }
                 if (state === 'enter') {
                     texts.push(text);
-                    currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
-                    this._addLabel({ text, labelLine }, texts, labelLines, index);
+                    currentTextMap.set(textKey, currentLabel);
+                    this._addLabel(currentLabel, texts, labelLines, index);
                 }
                 else if (state === 'update') {
                     const prevLabel = prevTextMap.get(textKey);
                     prevTextMap.delete(textKey);
                     currentTextMap.set(textKey, prevLabel);
-                    this._updateLabel(prevLabel, { text, labelLine });
+                    this._updateLabel(prevLabel, currentLabel);
                 }
             });
         this._removeLabel(prevTextMap);
@@ -22429,31 +22908,29 @@ class LabelBase extends AnimateComponent {
         ]));
     }
     _runUpdateAnimation(prevLabel, currentLabel) {
-        if (this._enableAnimation === false || !this._animationConfig.update) {
-            return;
-        }
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
-        const { duration, easing } = this._animationConfig.update;
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
-                animation: {
-                    type: 'labelUpdate',
-                    duration,
-                    easing,
-                    customParameters: {
+                animation: Object.assign(Object.assign({ type: 'labelUpdate' }, this._animationConfig.update), { customParameters: {
                         prevText,
                         curText,
                         prevLabelLine,
                         curLabelLine
-                    }
-                }
+                    } })
             }
         ]);
     }
+    _syncStateWithRelatedGraphic(relatedGraphic) {
+        if (this.attribute.syncState && relatedGraphic) {
+            relatedGraphic.on('afterStateUpdate', this._handleRelatedGraphicSetState);
+        }
+    }
     _addLabel(label, texts, labelLines, index) {
         const { text, labelLine } = label;
+        const relatedGraphic = this.getRelatedGraphic(text.attribute);
+        this._syncStateWithRelatedGraphic(relatedGraphic);
         if (text) {
             this.add(text);
         }
@@ -22465,7 +22942,7 @@ class LabelBase extends AnimateComponent {
     _updateLabel(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
-        if (this._enableAnimation === false || !this._animationConfig.update) {
+        if (this._enableAnimation === false || this._animationConfig.update === false) {
             prevLabel.text.setAttributes(curText.attribute);
             if (prevLabelLine && curLabelLine) {
                 prevLabel.labelLine.setAttributes(curLabelLine.attribute);
@@ -24219,13 +24696,14 @@ class DataZoom extends AbstractComponent {
             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 });
+            this.addEventListener('pointermove', this._onHandlerPointerMove, {
+                capture: true
+            });
             triggers.forEach((trigger) => {
                 evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
             });
         };
         this._pointerMove = (e) => {
-            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -24367,10 +24845,6 @@ class DataZoom extends AbstractComponent {
         this.state.end = end;
         shouldRender && this.setAttributes({ start, end });
     }
-    eventPosToStagePos(e) {
-        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();
@@ -24378,7 +24852,9 @@ class DataZoom extends AbstractComponent {
         triggers.forEach((trigger) => {
             evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
         });
-        this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+        this.removeEventListener('pointermove', this._onHandlerPointerMove, {
+            capture: true
+        });
     }
     _onHandlerPointerEnter(e) {
         this._showText = true;
@@ -24552,10 +25028,12 @@ class DataZoom extends AbstractComponent {
         if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
             const direction = this.attribute.orient === 'bottom' || this.attribute.orient === 'right' ? -1 : 1;
             if (this._isHorizontal) {
-                this._startText.setAttribute('dy', startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2));
+                const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
+                this._startText.setAttribute('dy', startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
             }
             else {
-                this._startText.setAttribute('dx', startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+                const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
+                this._startText.setAttribute('dx', startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
             }
         }
         else {
@@ -24965,22 +25443,27 @@ var IMarkPointItemPosition;
 function loadBaseMarker() {
     registerGroup();
     loadTagComponent();
+    registerAnimate();
 }
 function loadMarkLineComponent() {
     loadBaseMarker();
     loadSegmentComponent();
+    registerAnimate();
 }
 function loadMarkArcLineComponent() {
     loadBaseMarker();
     loadArcSegmentComponent();
+    registerAnimate();
 }
 function loadMarkAreaComponent() {
     loadBaseMarker();
     registerPolygon();
+    registerAnimate();
 }
 function loadMarkArcAreaComponent() {
     loadBaseMarker();
     registerArc();
+    registerAnimate();
 }
 function loadMarkPointComponent() {
     loadBaseMarker();
@@ -24989,6 +25472,7 @@ function loadMarkPointComponent() {
     registerSymbol();
     registerImage();
     registerLine();
+    registerAnimate();
 }
 
 class Marker extends AbstractComponent {
@@ -25892,25 +26376,7 @@ const DEFAULT_MARK_POINT_THEME = {
     itemContent: {
         type: 'text',
         position: 'middle',
-        refX: 10,
-        symbolStyle: {
-            symbolType: 'star',
-            fill: 'rgb(48, 115, 242)',
-            fillOpacity: 0.8,
-            size: 20
-        },
-        textStyle: {
-            dx: 0,
-            dy: 0
-        },
-        imageStyle: {
-            width: 80,
-            height: 80
-        },
-        richTextStyle: {
-            width: 100,
-            height: 100
-        }
+        refX: 10
     }
 };
 const DEFAULT_MARK_POINT_TEXT_STYLE_MAP = {
@@ -26441,7 +26907,7 @@ class MarkPoint extends Marker {
         if (!item) {
             return;
         }
-        const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, textStyle = {}, richTextStyle = {}, imageStyle = {}, position: positionType = IMarkPointItemPosition.middle } = itemContent;
+        const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, style, position: positionType = IMarkPointItemPosition.middle } = itemContent;
         const { state } = this.attribute;
         const lineEndAngle = ((_a = this._line) === null || _a === void 0 ? void 0 : _a.getEndAngle()) || 0;
         const itemRefOffsetX = refX * Math.cos(lineEndAngle) + refY * Math.cos(lineEndAngle - Math.PI / 2);
@@ -26449,24 +26915,24 @@ class MarkPoint extends Marker {
         if (itemType === 'text') {
             const offsetX = newItemPosition.x - newPosition.x;
             const offsetY = newItemPosition.y - newPosition.y;
-            item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, this.getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, (_b = itemContent.position) !== null && _b !== void 0 ? _b : 'end')), textStyle.textStyle), state: {
+            item.setAttributes(Object.assign(Object.assign({}, style), { textStyle: Object.assign(Object.assign({}, this.getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, (_b = itemContent.position) !== null && _b !== void 0 ? _b : 'end')), style.textStyle), state: {
                     panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.textBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.text)
+                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent)
                 } }));
         }
         else if (itemType === 'richText') {
             item.setAttributes({
-                dx: this.getItemDx(item, positionType, richTextStyle) + (richTextStyle.dx || 0),
-                dy: this.getItemDy(item, positionType, richTextStyle) + (richTextStyle.dy || 0)
+                dx: this.getItemDx(item, positionType, style) + (style.dx || 0),
+                dy: this.getItemDy(item, positionType, style) + (style.dy || 0)
             });
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.richText);
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         else if (itemType === 'image') {
             item.setAttributes({
-                dx: this.getItemDx(item, positionType, imageStyle) + (imageStyle.dx || 0),
-                dy: this.getItemDy(item, positionType, imageStyle) + (imageStyle.dy || 0)
+                dx: this.getItemDx(item, positionType, style) + (style.dx || 0),
+                dy: this.getItemDy(item, positionType, style) + (style.dy || 0)
             });
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.image);
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         const itemAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle - Math.PI;
         item.setAttributes({
@@ -26499,29 +26965,29 @@ class MarkPoint extends Marker {
     }
     initItem(itemContent, newPosition, newItemPosition) {
         const { state } = this.attribute;
-        const { type = 'text', symbolStyle, richTextStyle, imageStyle, renderCustomCallback } = itemContent;
+        const { type = 'text', style, renderCustomCallback } = itemContent;
         let item;
         if (type === 'symbol') {
-            item = graphicCreator.symbol(Object.assign(Object.assign({}, newItemPosition), symbolStyle));
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.symbol);
+            item = graphicCreator.symbol(Object.assign(Object.assign({}, newItemPosition), style));
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         else if (type === 'text') {
             item = new Tag(Object.assign(Object.assign({}, newItemPosition), { state: {
                     panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.textBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.text)
+                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent)
                 } }));
         }
         else if (type === 'richText') {
-            item = graphicCreator.richtext(Object.assign(Object.assign({}, newItemPosition), richTextStyle));
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.richText);
+            item = graphicCreator.richtext(Object.assign(Object.assign({}, newItemPosition), style));
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         else if (type === 'image') {
-            item = graphicCreator.image(Object.assign(Object.assign({}, newItemPosition), imageStyle));
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.image);
+            item = graphicCreator.image(Object.assign(Object.assign({}, newItemPosition), style));
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         else if (type === 'custom' && renderCustomCallback) {
             item = renderCustomCallback();
-            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.customMark);
+            item.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.itemContent);
         }
         item.name = `mark-point-${type}`;
         this.setItemAttributes(item, itemContent, newPosition, newItemPosition, type);
@@ -26709,7 +27175,7 @@ class MarkPoint extends Marker {
         const { itemContent = {}, targetSymbol, itemLine } = this.attribute;
         const { offsetX: itemContentOffsetX = 0, offsetY: itemContentOffsetY = 0 } = itemContent;
         const { offset: targetSymbolOffset = 0, style: targetSymbolStyle, visible: targetItemvisible = false, size: targetSymbolSize } = targetSymbol;
-        const targetSize = targetItemvisible ? (_b = (_a = targetSymbolStyle.size) !== null && _a !== void 0 ? _a : targetSymbolSize) !== null && _b !== void 0 ? _b : 20 : 0;
+        const targetSize = targetItemvisible ? ((_b = (_a = targetSymbolStyle.size) !== null && _a !== void 0 ? _a : targetSymbolSize) !== null && _b !== void 0 ? _b : 20) : 0;
         let targetOffsetAngle;
         if (itemLine.type === 'type-do') {
             targetOffsetAngle = deltaXYToAngle(itemContentOffsetY, itemContentOffsetX / 2);
@@ -28432,14 +28898,13 @@ class Slider extends AbstractComponent {
             this._prePos = this._isHorizontal ? x : y;
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onHandlerPointerUp);
             });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -28491,13 +28956,12 @@ class Slider extends AbstractComponent {
             this._prePos = this._isHorizontal ? x : y;
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onTrackPointerUp);
             });
         };
         this._onTrackPointerMove = (e) => {
-            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -28947,11 +29411,11 @@ class Slider extends AbstractComponent {
     _clearAllDragEvents() {
         const triggers = getEndTriggersOfDrag();
         const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onHandlerPointerUp);
         });
-        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onTrackPointerUp);
         });
@@ -30841,6 +31305,7 @@ class Brush extends AbstractComponent {
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, Brush.defaultAttributes, attributes));
         this.name = 'brush';
+        this._activeBrushState = false;
         this._activeDrawState = false;
         this._cacheDrawPoints = [];
         this._activeMoveState = false;
@@ -30851,13 +31316,6 @@ class Brush extends AbstractComponent {
         this._brushMaskAABBBoundsDict = {};
         this._firstUpdate = true;
         this._onBrushStart = (e) => {
-            if (this._outOfInteractiveRange(e)) {
-                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));
@@ -30921,9 +31379,7 @@ class Brush extends AbstractComponent {
         brushMode === 'single' && this._clearMask();
         this._addBrushMask();
         this._dispatchBrushEvent(IOperateType.drawStart, e);
-        if (Object.keys(this._brushMaskAABBBoundsDict).length === 1) {
-            this._dispatchBrushEvent(IOperateType.brushActive, e);
-        }
+        this._activeBrushState = false;
     }
     _initMove(e) {
         var _a, _b;
@@ -30945,7 +31401,7 @@ class Brush extends AbstractComponent {
     _drawing(e) {
         var _a;
         const pos = this.eventPosToStagePos(e);
-        const { brushType } = this.attribute;
+        const { brushType, sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute;
         const cacheLength = this._cacheDrawPoints.length;
         if (cacheLength > 0) {
             const lastPos = (_a = this._cacheDrawPoints[this._cacheDrawPoints.length - 1]) !== null && _a !== void 0 ? _a : {};
@@ -30961,7 +31417,17 @@ class Brush extends AbstractComponent {
         }
         const maskPoints = this._computeMaskPoints();
         this._operatingMask.setAttribute('points', maskPoints);
-        this._dispatchBrushEvent(IOperateType.drawing, e);
+        const { x: x1, y: y1 } = this._startPos;
+        const { x: x2, y: y2 } = this.eventPosToStagePos(e);
+        if (Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold) {
+            if (Object.keys(this._brushMaskAABBBoundsDict).length === 1 && !this._activeBrushState) {
+                this._activeBrushState = true;
+                this._dispatchBrushEvent(IOperateType.brushActive, e);
+            }
+            else {
+                this._dispatchBrushEvent(IOperateType.drawing, e);
+            }
+        }
     }
     _moving(e) {
         const startPos = this._cacheMovePoint;
@@ -31103,7 +31569,7 @@ 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);
@@ -31136,9 +31602,6 @@ class Brush extends AbstractComponent {
         }
         return false;
     }
-    eventPosToStagePos(e) {
-        return this.stage.eventPointTransform(e);
-    }
     _dispatchBrushEvent(operateType, e) {
         this._dispatchEvent(operateType, {
             operateMask: this._operatingMask,
@@ -31148,7 +31611,7 @@ class Brush extends AbstractComponent {
     }
     _clearMask() {
         this._brushMaskAABBBoundsDict = {};
-        this._container.incrementalClearChild();
+        this._container.removeAllChild();
         this._operatingMask = null;
     }
     _isEmptyMask() {
@@ -32605,6 +33068,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.0-alpha.9";
+const version = "1.0.1";
 
 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 };