@visactor/vrender-components 1.0.0-alpha.8 → 1.0.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, 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,11 +489,14 @@ 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 => {
@@ -511,6 +514,20 @@ function bindContributionProviderNoSingletonScope(bind, id) {
     return 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) {
@@ -577,22 +594,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 +698,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 +742,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 +795,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();
   }
@@ -830,6 +892,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";
@@ -1147,44 +1214,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 +1229,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;
@@ -1851,6 +1869,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;
@@ -2541,9 +2608,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,
@@ -3784,7 +3848,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 +3867,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 +3875,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 +3923,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 +3934,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();
   }
@@ -6236,6 +6300,10 @@ class Graphic extends Node {
     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;
   }
@@ -6265,13 +6333,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;
@@ -6378,7 +6445,7 @@ class Graphic extends Node {
     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);
@@ -6559,8 +6626,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 +6663,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 = {};
@@ -6747,7 +6816,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 +6823,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) {
@@ -6903,12 +6971,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,13 +7035,11 @@ 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;
@@ -6994,20 +7059,17 @@ 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;
     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);
     }));
   }
@@ -7634,7 +7696,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,
@@ -10845,6 +10907,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) {
@@ -11014,8 +11079,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 +11187,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 +11226,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 +11252,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 +11639,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 +11883,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 +11939,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 +12009,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;
@@ -12115,8 +12180,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,8 +12316,10 @@ 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;
@@ -12320,8 +12387,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 +12443,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 +12506,7 @@ let DefaultCanvasGroupRender = class {
     });
   }
   draw(group, renderService, drawContext, params) {
-    var _a;
+    var _a, _b;
     const {
       context: context
     } = drawContext;
@@ -12456,7 +12526,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 +12551,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 +12588,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 +12771,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 +12913,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;
@@ -13251,6 +13324,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) {
@@ -14972,6 +15050,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 +15093,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 +15118,6 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
-            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -15053,6 +15135,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 +15190,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 +15279,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 +15288,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',
@@ -17991,7 +18084,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 +18815,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();
@@ -18846,12 +18940,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,7 +18977,7 @@ 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 => {
@@ -19126,6 +19220,228 @@ 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() {
+    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !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;
@@ -19388,6 +19704,213 @@ 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() {
+    let final = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !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) {
+    let prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !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 +19984,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 +22288,7 @@ class LabelEnter extends AComponentAnimate {
     }
 }
 function registerLabelAnimate() {
+    AnimateExecutor.registerBuiltInAnimate('increaseCount', IncreaseCount);
     AnimateExecutor.registerBuiltInAnimate('labelUpdate', LabelUpdate);
     AnimateExecutor.registerBuiltInAnimate('labelEnter', LabelEnter);
 }
@@ -22393,19 +23010,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 +23047,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 +23081,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 +24835,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;
@@ -24378,7 +24995,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;
@@ -24965,22 +25584,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 +25613,7 @@ function loadMarkPointComponent() {
     registerSymbol();
     registerImage();
     registerLine();
+    registerAnimate();
 }
 
 class Marker extends AbstractComponent {
@@ -25892,25 +26517,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 +27048,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 +27056,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 +27106,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 +27316,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 +29039,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 +29097,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 +29552,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);
         });
@@ -32605,6 +33210,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.0-alpha.8";
+const version = "1.0.0";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, 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 };