@visactor/vrender-components 1.0.0-alpha.12 → 1.0.0-alpha.14

package/dist/index.es.js

@@ -577,6 +577,9 @@ 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();
+
 class PerformanceRAF {
   constructor() {
     this.nextAnimationFrameCbs = [], this._rafHandle = null, this.runAnimationFrame = time => {
@@ -585,7 +588,7 @@ class PerformanceRAF {
       this.nextAnimationFrameCbs = [];
       for (let i = 0; i < cbs.length; i++) cbs[i] && cbs[i](time);
     }, this.tryRunAnimationFrameNextFrame = () => {
-      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame));
+      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
     };
   }
   addAnimationFrameCb(callback) {
@@ -830,6 +833,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 +1155,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 +1170,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 +1810,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 +2549,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,
@@ -6236,6 +6241,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 +6274,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 +6386,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 +6567,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());
@@ -6750,7 +6757,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();
@@ -6758,7 +6764,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) {
@@ -6906,12 +6912,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 {
@@ -6971,13 +6976,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;
@@ -6997,20 +7000,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);
     }));
   }
@@ -7637,7 +7637,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,
@@ -12459,7 +12459,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
@@ -19129,6 +19129,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;
@@ -19391,6 +19613,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);
+  }
+  setFinalAttribute(finalAttribute) {
+    this.finalAttribute || (this.finalAttribute = {}), Object.assign(this.finalAttribute, finalAttribute);
+  }
+  initFinalAttribute(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;
@@ -24975,22 +25404,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();
@@ -24999,6 +25433,7 @@ function loadMarkPointComponent() {
     registerSymbol();
     registerImage();
     registerLine();
+    registerAnimate();
 }
 
 class Marker extends AbstractComponent {
@@ -26451,7 +26886,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);
@@ -26459,24 +26894,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), { style: 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({
@@ -26509,29 +26944,25 @@ 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);
-        }
         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);
@@ -26719,7 +27150,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);
@@ -32615,6 +33046,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "1.0.0-alpha.12";
+const version = "1.0.0-alpha.14";
 
 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 };