@visactor/vchart 2.0.1-alpha.5 → 2.0.2

package/build/index.es.js

@@ -17747,9 +17747,10 @@ class Polygon extends Graphic {
     return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
   }
   toCustomPath() {
-    const points = this.attribute.points,
-      path = new CustomPath2D();
-    return points.forEach((point, index) => {
+    let path = super.toCustomPath();
+    if (path) return path;
+    const points = this.attribute.points;
+    return path = new CustomPath2D(), points.forEach((point, index) => {
       0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
     }), path.closePath(), path;
   }
@@ -21014,6 +21015,7 @@ let DefaultDrawContribution = class {
     drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
   }
   draw(renderService, drawContext) {
+    var _a;
     this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
     const {
       context: context,
@@ -21028,7 +21030,7 @@ let DefaultDrawContribution = class {
       dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
     }
     const d = context.dpr % 1;
-    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
+    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
       var _a, _b;
       return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
     }).forEach(group => {
@@ -21164,7 +21166,7 @@ let DefaultDrawContribution = class {
     return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
   }
   clearScreen(renderService, context, drawContext) {
-    var _a, _b;
+    var _a, _b, _c;
     const {
         clear: clear,
         viewBox: viewBox
@@ -21172,9 +21174,9 @@ let DefaultDrawContribution = class {
       width = viewBox.width(),
       height = viewBox.height();
     if (clear) {
-      context.clearRect(0, 0, width, height);
-      const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-      if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+      context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
+      const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
+      if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
         const res = stage.resources.get(clear);
         res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
       } else context.fillStyle = createColor(context, clear, {
@@ -21702,13 +21704,19 @@ class Stage extends Group$1 {
       } else this._skipRender = 1;
     }, this.beforeRender = stage => {
       this._beforeRender && this._beforeRender(stage);
+    }, this.afterClearScreen = drawParams => {
+      this._afterClearScreen && this._afterClearScreen(drawParams);
+    }, this.afterClearRect = drawParams => {
+      this._afterClearRect && this._afterClearRect(drawParams);
     }, this.afterRender = stage => {
       this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
     }, this.afterTickCb = () => {
       this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
     }, this.params = params, this.theme = new Theme(), this.hooks = {
       beforeRender: new SyncHook(["stage"]),
-      afterRender: new SyncHook(["stage"])
+      afterRender: new SyncHook(["stage"]),
+      afterClearScreen: new SyncHook(["stage"]),
+      afterClearRect: new SyncHook(["stage"])
     }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
       width: params.width,
       height: params.height,
@@ -21720,7 +21728,7 @@ class Stage extends Group$1 {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
       tickRenderMode: "effect"
     }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
@@ -32642,7 +32650,10 @@ class AnimationStateManager {
   reApplyState(state) {
     var _a;
     const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-    stateInfo && (stateInfo.executor.stop(), stateInfo.executor.execute(stateInfo.animationConfig));
+    if (stateInfo) {
+      const stateList = this.stateList.slice();
+      stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+    }
   }
 }
 
@@ -32680,10 +32691,12 @@ class GraphicStateExtension {
     }), this;
   }
   clearAnimationStates() {
-    return this._getAnimationStateManager(this).clearState(), this;
+    const stateManager = this._animationStateManager;
+    return stateManager && stateManager.clearState(), this;
   }
   reApplyAnimationState(state, deep = !1) {
-    return this._getAnimationStateManager(this).reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+    const stateManager = this._animationStateManager;
+    return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
       child.reApplyAnimationState(state, deep);
     }), this;
   }
@@ -36093,9 +36106,8 @@ class StreamLight extends ACustomAnimate {
         w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
         width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
       this.rect.setAttributes({
-        x: x,
-        width: width,
-        dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+        x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
+        width: width
       }, !1, {
         type: AttributeUpdateType.ANIMATE_PLAY,
         animationState: {
@@ -36112,9 +36124,8 @@ class StreamLight extends ACustomAnimate {
       const h = Math.min(parentHeight - currentY, maxLength);
       let height;
       y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-        y: y,
-        height: height,
-        dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+        y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
+        height: height
       }, !1, {
         type: AttributeUpdateType.ANIMATE_PLAY,
         animationState: {
@@ -50254,7 +50265,7 @@ class Compiler {
         return this._stage;
     }
     initView() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (this._released) {
             return;
         }
@@ -50265,36 +50276,14 @@ class Compiler {
         const { autoRefreshDpr, dpr, mode, modeParams, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
         vglobal.setEnv(toRenderMode(mode), modeParams !== null && modeParams !== void 0 ? modeParams : {});
         this._stage =
-            (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage({
-                background,
-                width: this._width,
-                height: this._height,
-                container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null,
-                canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null,
-                dpr,
-                viewBox: this._option.viewBox,
-                canvasControled: this._option.canvasControled,
-                beforeRender: (stage) => {
+            (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage(Object.assign({ background, width: this._width, height: this._height, container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null, canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
                     var _a, _b, _c;
                     (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
                     (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
-                },
-                afterRender: this._option.afterRender,
-                disableDirtyBounds: true,
-                autoRender: true,
-                ticker: this._option.ticker,
-                pluginList: this._option.pluginList,
-                enableHtmlAttribute: this._option.enableHtmlAttribute,
-                optimize: this._option.optimize,
-                supportsTouchEvents: this._option.supportsTouchEvents,
-                supportsPointerEvents: this._option.supportsPointerEvents,
-                event: {
+                }, afterRender: this._option.afterRender, disableDirtyBounds: true, autoRender: true, ticker: this._option.ticker, pluginList: this._option.pluginList, enableHtmlAttribute: this._option.enableHtmlAttribute, optimize: this._option.optimize, supportsTouchEvents: this._option.supportsTouchEvents, supportsPointerEvents: this._option.supportsPointerEvents, event: {
                     clickInterval: clickInterval,
                     autoPreventDefault: autoPreventDefault
-                },
-                ReactDOM: this._option.ReactDOM,
-                autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr)
-            });
+                }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_d = this._option.renderHooks) !== null && _d !== void 0 ? _d : {})));
         this._stage.enableIncrementalAutoRender();
         this._stage.setTheme({
             symbol: {
@@ -56915,7 +56904,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.1-alpha.5";
+const version = "2.0.2";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -89714,11 +89703,15 @@ class Tooltip extends BaseComponent {
             });
         };
         this._handleClickToLock = (params) => {
+            var _a, _b;
             if (this._clickLock) {
                 this._handleChartMouseOut(params);
                 this._clickLock = false;
             }
             else {
+                if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                    return;
+                }
                 this._clickLock = true;
             }
         };
@@ -90017,6 +90010,9 @@ class Tooltip extends BaseComponent {
                     return;
                 }
                 this._isEnterTooltip = false;
+                if (this._spec.triggerOff === 'none') {
+                    return;
+                }
                 if (this._cacheEnterableRect) {
                     const newRect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                     if (newRect &&

package/build/index.js

@@ -17753,9 +17753,10 @@
         return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        const points = this.attribute.points,
-          path = new CustomPath2D();
-        return points.forEach((point, index) => {
+        let path = super.toCustomPath();
+        if (path) return path;
+        const points = this.attribute.points;
+        return path = new CustomPath2D(), points.forEach((point, index) => {
           0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
         }), path.closePath(), path;
       }
@@ -21020,6 +21021,7 @@
         drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
       }
       draw(renderService, drawContext) {
+        var _a;
         this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
         const {
           context: context,
@@ -21034,7 +21036,7 @@
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
@@ -21170,7 +21172,7 @@
         return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b;
+        var _a, _b, _c;
         const {
             clear: clear,
             viewBox: viewBox
@@ -21178,9 +21180,9 @@
           width = viewBox.width(),
           height = viewBox.height();
         if (clear) {
-          context.clearRect(0, 0, width, height);
-          const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+          context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
+          const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
+          if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
             res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
@@ -21708,13 +21710,19 @@
           } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
+        }, this.afterClearScreen = drawParams => {
+          this._afterClearScreen && this._afterClearScreen(drawParams);
+        }, this.afterClearRect = drawParams => {
+          this._afterClearRect && this._afterClearRect(drawParams);
         }, this.afterRender = stage => {
           this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
           this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
-          afterRender: new SyncHook(["stage"])
+          afterRender: new SyncHook(["stage"]),
+          afterClearScreen: new SyncHook(["stage"]),
+          afterClearRect: new SyncHook(["stage"])
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
@@ -21726,7 +21734,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -32648,7 +32656,10 @@
       reApplyState(state) {
         var _a;
         const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-        stateInfo && (stateInfo.executor.stop(), stateInfo.executor.execute(stateInfo.animationConfig));
+        if (stateInfo) {
+          const stateList = this.stateList.slice();
+          stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+        }
       }
     }
 
@@ -32686,10 +32697,12 @@
         }), this;
       }
       clearAnimationStates() {
-        return this._getAnimationStateManager(this).clearState(), this;
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.clearState(), this;
       }
       reApplyAnimationState(state, deep = !1) {
-        return this._getAnimationStateManager(this).reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
           child.reApplyAnimationState(state, deep);
         }), this;
       }
@@ -36099,9 +36112,8 @@
             w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
             width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
           this.rect.setAttributes({
-            x: x,
-            width: width,
-            dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+            x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
+            width: width
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -36118,9 +36130,8 @@
           const h = Math.min(parentHeight - currentY, maxLength);
           let height;
           y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-            y: y,
-            height: height,
-            dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+            y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
+            height: height
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -50260,7 +50271,7 @@
             return this._stage;
         }
         initView() {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (this._released) {
                 return;
             }
@@ -50271,36 +50282,14 @@
             const { autoRefreshDpr, dpr, mode, modeParams, gestureConfig, interactive, clickInterval, autoPreventDefault, background } = this._option;
             vglobal.setEnv(toRenderMode(mode), modeParams !== null && modeParams !== void 0 ? modeParams : {});
             this._stage =
-                (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage({
-                    background,
-                    width: this._width,
-                    height: this._height,
-                    container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null,
-                    canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null,
-                    dpr,
-                    viewBox: this._option.viewBox,
-                    canvasControled: this._option.canvasControled,
-                    beforeRender: (stage) => {
+                (_a = this._option.stage) !== null && _a !== void 0 ? _a : new Stage(Object.assign({ background, width: this._width, height: this._height, container: (_b = this._container.dom) !== null && _b !== void 0 ? _b : null, canvas: (_c = this._container.canvas) !== null && _c !== void 0 ? _c : null, dpr, viewBox: this._option.viewBox, canvasControled: this._option.canvasControled, beforeRender: (stage) => {
                         var _a, _b, _c;
                         (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onBeforeRender();
                         (_c = (_b = this._option).beforeRender) === null || _c === void 0 ? void 0 : _c.call(_b, stage);
-                    },
-                    afterRender: this._option.afterRender,
-                    disableDirtyBounds: true,
-                    autoRender: true,
-                    ticker: this._option.ticker,
-                    pluginList: this._option.pluginList,
-                    enableHtmlAttribute: this._option.enableHtmlAttribute,
-                    optimize: this._option.optimize,
-                    supportsTouchEvents: this._option.supportsTouchEvents,
-                    supportsPointerEvents: this._option.supportsPointerEvents,
-                    event: {
+                    }, afterRender: this._option.afterRender, disableDirtyBounds: true, autoRender: true, ticker: this._option.ticker, pluginList: this._option.pluginList, enableHtmlAttribute: this._option.enableHtmlAttribute, optimize: this._option.optimize, supportsTouchEvents: this._option.supportsTouchEvents, supportsPointerEvents: this._option.supportsPointerEvents, event: {
                         clickInterval: clickInterval,
                         autoPreventDefault: autoPreventDefault
-                    },
-                    ReactDOM: this._option.ReactDOM,
-                    autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr)
-                });
+                    }, ReactDOM: this._option.ReactDOM, autoRefresh: isValid$1(autoRefreshDpr) ? autoRefreshDpr : !isValid$1(dpr) }, ((_d = this._option.renderHooks) !== null && _d !== void 0 ? _d : {})));
             this._stage.enableIncrementalAutoRender();
             this._stage.setTheme({
                 symbol: {
@@ -56921,7 +56910,7 @@
         });
     };
 
-    const version = "2.0.1-alpha.5";
+    const version = "2.0.2";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -89720,11 +89709,15 @@
                 });
             };
             this._handleClickToLock = (params) => {
+                var _a, _b;
                 if (this._clickLock) {
                     this._handleChartMouseOut(params);
                     this._clickLock = false;
                 }
                 else {
+                    if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                        return;
+                    }
                     this._clickLock = true;
                 }
             };
@@ -90023,6 +90016,9 @@
                         return;
                     }
                     this._isEnterTooltip = false;
+                    if (this._spec.triggerOff === 'none') {
+                        return;
+                    }
                     if (this._cacheEnterableRect) {
                         const newRect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                         if (newRect &&