@visactor/vchart 1.10.0-alpha.8 → 1.10.0

package/build/index.js

@@ -9684,15 +9684,27 @@
         container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
       }
       get style() {
-        return this._handler.getStyle();
+        var _a;
+        return null !== (_a = this._handler.getStyle()) && void 0 !== _a ? _a : {};
       }
       set style(style) {
         this._handler.setStyle(style);
       }
       create(params) {
+        var _a, _b;
         this._handler.createWindow(params);
         const windowWH = this._handler.getWH();
-        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
+        this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: this._width,
+          y2: this._height
+        }) : this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
+          y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
+        }), this.title = this._handler.getTitle(), this.resizable = !0;
       }
       setWindowHandler(handler) {
         this._handler = handler;
@@ -9733,8 +9745,35 @@
       getContainer() {
         return this._handler.container;
       }
-      clearViewBox(viewBox, color) {
-        this._handler.clearViewBox(viewBox, color);
+      clearViewBox(color) {
+        this._handler.clearViewBox(color);
+      }
+      setViewBox(viewBox) {
+        this._handler.setViewBox(viewBox);
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this._handler.setViewBoxTransform(a, b, c, d, e, f);
+      }
+      getViewBox() {
+        return this._handler.getViewBox();
+      }
+      getViewBoxTransform() {
+        return this._handler.getViewBoxTransform();
+      }
+      pointTransform(x, y) {
+        const vb = this._handler.getViewBox(),
+          nextP = {
+            x: x,
+            y: y
+          };
+        return this._handler.getViewBoxTransform().transformPoint({
+          x: x,
+          y: y
+        }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
+      }
+      hasSubView() {
+        const viewBox = this._handler.getViewBox();
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -9820,8 +9859,16 @@
         const window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height();
+          height = bounds.height(),
+          x1 = -bounds.x1,
+          y1 = -bounds.y1;
         window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: bounds.x2,
+            y2: bounds.y2
+          },
           width: width,
           height: height,
           canvas: canvas,
@@ -9830,14 +9877,10 @@
           offscreen: !0,
           title: ""
         });
-        const x = -bounds.x1,
-          y = -bounds.y1,
-          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          transMatrix: window.getViewBoxTransform(),
+          viewBox: window.getViewBox(),
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -10661,7 +10704,7 @@
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.viewX, e.viewY, e), e.pickParams || (this._prePointTargetCache = {
           [cacheKey]: target,
           stageRenderCount: null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1
         })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
@@ -10696,12 +10739,14 @@
         return currentTarget;
       }
       createPointerEvent(from, type, target) {
+        var _a, _b;
         const event = this.allocateEvent(FederatedPointerEvent);
-        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), "string" == typeof type && (event.type = type), event;
+        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), "string" == typeof type && (event.type = type), event;
       }
       createWheelEvent(from, target) {
+        var _a, _b;
         const event = this.allocateEvent(FederatedWheelEvent);
-        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), event;
+        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), event;
       }
       clonePointerEvent(from, type) {
         const event = this.allocateEvent(FederatedPointerEvent);
@@ -10805,7 +10850,7 @@
           this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-          const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
+          const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
             normalizedEvents = this.normalizeToPointerData(nativeEvent);
           for (let i = 0, j = normalizedEvents.length; i < j; i++) {
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
@@ -10829,7 +10874,6 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
-          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -10837,7 +10881,7 @@
         } = params;
         this.manager = new EventManager(rootNode, {
           clickInterval: clickInterval
-        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -10879,15 +10923,7 @@
         this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
       }
       mapToViewportPoint(event) {
-        const viewport = this.viewport,
-          {
-            x: x,
-            y: y
-          } = event;
-        return {
-          x: x - viewport.x,
-          y: y - viewport.y
-        };
+        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
       }
       mapToCanvasPoint(nativeEvent) {
         var _a;
@@ -10944,6 +10980,17 @@
       transferMouseData(event, nativeEvent) {
         event.isTrusted = nativeEvent.isTrusted, event.srcElement = nativeEvent.srcElement, event.timeStamp = clock.now(), event.type = nativeEvent.type, event.altKey = nativeEvent.altKey, event.button = nativeEvent.button, event.buttons = nativeEvent.buttons, event.client.x = nativeEvent.clientX, event.client.y = nativeEvent.clientY, event.ctrlKey = nativeEvent.ctrlKey, event.shiftKey = nativeEvent.shiftKey, event.metaKey = nativeEvent.metaKey, event.movement.x = nativeEvent.movementX, event.movement.y = nativeEvent.movementY, event.page.x = nativeEvent.pageX, event.page.y = nativeEvent.pageY, event.relatedTarget = null;
       }
+      isEventOutsideOfTargetViewPort(nativeEvent) {
+        if (this.isEventOutsideOfTargetElement(nativeEvent)) return !0;
+        if (this.domElement.getViewBox) {
+          const p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent)),
+            b = this.domElement.getViewBox(),
+            w = b.width(),
+            h = b.height();
+          return !(p.x < w && p.y < h && p.x > 0 && p.y > 0);
+        }
+        return !1;
+      }
       isEventOutsideOfTargetElement(nativeEvent) {
         let target = nativeEvent.target;
         nativeEvent.composedPath && nativeEvent.composedPath().length > 0 && (target = nativeEvent.composedPath()[0]);
@@ -14371,15 +14418,12 @@
       }
       render(params, userParams) {
         var _a;
-        const stage = this.stage;
         this.layerHandler.render([this], {
           renderService: params.renderService,
-          x: stage.x,
-          y: stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
           stage: this.stage,
           layer: this,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(c => c(this)), this.tryRenderSecondaryLayer(params, userParams);
@@ -14403,33 +14447,18 @@
         throw new Error("暂不支持");
       }
       prepare(dirtyBounds, params) {}
-      combineTo(target, params) {
-        var _a, _b, _c;
-        this.offscreen && (this.layerHandler.drawTo(target, [this], Object.assign({
-          background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
-          renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
-          stage: this.stage,
-          layer: this
-        }, params)), this.afterDrawCbs.forEach(c => c(this)));
-      }
       release() {
         super.release(), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(l => {
           application.layerService.releaseLayer(this.stage, l.layer);
         });
       }
       drawTo(target, params) {
-        var _a, _b, _c;
+        var _a;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(c => c(this));
@@ -21659,10 +21688,10 @@
       render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context
+          context: this.context,
+          viewBox: params.stage.window.getViewBox(),
+          transMatrix: params.stage.window.getViewBoxTransform()
         }, params), {
-          x: 0,
-          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -21677,11 +21706,12 @@
         const context = target.getContext(),
           targetDpr = target.dpr,
           {
-            x = 0,
-            y = 0,
-            width = this.layer.viewWidth,
-            height = this.layer.viewHeight
-          } = params;
+            viewBox: viewBox
+          } = params,
+          x = viewBox.x1,
+          y = viewBox.y1,
+          width = viewBox.width(),
+          height = viewBox.height();
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
       merge(layerHandlers) {}
@@ -21837,32 +21867,22 @@
         const {
           context: context,
           stage: stage,
-          x = 0,
-          y = 0,
-          width: width,
-          height: height
+          viewBox: viewBox,
+          transMatrix: transMatrix
         } = drawContext;
         if (!context) return;
-        if (drawContext.keepMatrix) {
-          if (context.nativeContext && context.nativeContext.getTransform) {
-            const t = context.nativeContext.getTransform();
-            context.setTransformFromMatrix(t, !0, 1);
-          }
-        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        const dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
+        const dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           const b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           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);
-        const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (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), context.save(), 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.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), 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), context.save(), 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 => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
+        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -21986,29 +22006,25 @@
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
         const {
-          clear: clear
-        } = drawContext;
+            clear: clear,
+            viewBox: viewBox
+          } = drawContext,
+          width = viewBox.width(),
+          height = viewBox.height();
         if (clear) {
-          const canvas = context.getCanvas(),
-            {
-              width = canvas.width,
-              height = canvas.height
-            } = drawContext,
-            x = 0,
-            y = 0;
-          context.clearRect(x, y, width, height);
+          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) {
             const res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: x,
-              y1: y,
-              x2: x + width,
-              y2: y + height
+              x1: 0,
+              y1: 0,
+              x2: 0 + width,
+              y2: 0 + height
             }
-          }, 0, 0), context.fillRect(x, y, width, height);
+          }, 0, 0), context.fillRect(0, 0, width, height);
         }
       }
       afterDraw(renderService, drawParams) {}
@@ -22265,25 +22281,16 @@
           this.currentRenderService = renderService;
           const {
             context: context,
-            x = 0,
-            y = 0
+            viewBox: viewBox
           } = drawContext;
-          if (context) {
-            if (drawContext.keepMatrix) {
-              if (context.nativeContext && context.nativeContext.getTransform) {
-                const t = context.nativeContext.getTransform();
-                context.setTransformFromMatrix(t, !0, 1);
-              }
-            } else context.inuse = !0, context.clearMatrix();
-            context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), 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 => {
-              this.renderGroup(group, drawContext);
-            }), this.hooks.completeDraw.tap("top-draw", () => {
-              context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), this.rendering = !1;
-            });
-          }
+          context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(viewBox.x1, viewBox.y1, !0), context.save(), 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 => {
+            this.renderGroup(group, drawContext);
+          }), this.hooks.completeDraw.tap("top-draw", () => {
+            context.restore(), context.restore(), context.draw(), context.inuse = !1, this.rendering = !1;
+          }));
         });
       }
       _increaseRender(group, drawContext) {
@@ -22453,12 +22460,10 @@
           if (!layer || !group.layer.subLayers) return;
           const subLayer = group.layer.subLayers.get(group._uid);
           subLayer && subLayer.drawContribution && subLayer.drawContribution.draw(stage.renderService, Object.assign({
-            x: stage.x,
-            y: stage.y,
-            width: layer.viewWidth,
-            height: layer.viewHeight,
             stage: stage,
             layer: layer,
+            viewBox: stage.window.getViewBox(),
+            transMatrix: stage.window.getViewBoxTransform(),
             clear: "transparent",
             renderService: stage.renderService,
             updateBounds: !1,
@@ -23007,22 +23012,24 @@
     };
     class Stage extends Group$1 {
       set viewBox(b) {
-        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
+        this.window.setViewBox(b);
       }
       get viewBox() {
-        return this._viewBox;
+        return this.window.getViewBox();
       }
       get x() {
-        return this._viewBox.x1;
+        return this.window.getViewBox().x1;
       }
       set x(x) {
-        this._viewBox.translate(x - this._viewBox.x1, 0);
+        const b = this.window.getViewBox();
+        b.translate(x - b.x1, 0), this.window.setViewBox(b);
       }
       get y() {
-        return this._viewBox.y1;
+        return this.window.getViewBox().y1;
       }
       set y(y) {
-        this._viewBox.translate(0, y - this._viewBox.y1);
+        const b = this.window.getViewBox();
+        b.translate(0, y - b.y1), this.window.setViewBox(b);
       }
       get width() {
         return this.window.width;
@@ -23031,13 +23038,13 @@
         this.resize(w, this.height);
       }
       get viewWidth() {
-        return this._viewBox.width();
+        return this.window.getViewBox().width();
       }
       set viewWidth(w) {
         this.resizeView(w, this.viewHeight);
       }
       get viewHeight() {
-        return this._viewBox.height();
+        return this.window.getViewBox().height();
       }
       set viewHeight(h) {
         this.resizeView(this.viewWidth, h);
@@ -23071,7 +23078,13 @@
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
         super({}), this._onVisibleChange = visible => {
-          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
+          if (!(this._skipRender < 0)) if (visible) {
+            if (this.dirtyBounds) {
+              const b = this.window.getViewBox();
+              this.dirtyBounds.setValue(b.x1, b.y1, b.width(), b.height());
+            }
+            this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
+          } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
@@ -23082,17 +23095,24 @@
         }, 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.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
+          viewBox: params.viewBox,
           container: params.container,
           dpr: params.dpr || this.global.devicePixelRatio,
           canvasControled: !1 !== params.canvasControled,
           title: params.title || "",
           canvas: params.canvas
-        }), this._viewBox = new AABBBounds(), params.viewBox ? this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : this._viewBox.setValue(0, 0, this.width, this.height), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
+        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.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(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), 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.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
         });
       }
+      pauseRender() {
+        this._skipRender = -1;
+      }
+      resumeRender() {
+        this._skipRender = 0;
+      }
       tryInitEventSystem() {
         this.global.supportEvent && !this._eventSystem && (this._eventSystem = new EventSystem(Object.assign({
           targetElement: this.window,
@@ -23100,22 +23120,7 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents,
-          viewport: {
-            viewBox: this._viewBox,
-            get x() {
-              return this.viewBox.x1;
-            },
-            get y() {
-              return this.viewBox.y1;
-            },
-            get width() {
-              return this.viewBox.width();
-            },
-            get height() {
-              return this.viewBox.height();
-            }
-          }
+          supportsTouchEvents: this.params.supportsTouchEvents
         }, this.params.event)));
       }
       preventRender(prevent) {
@@ -23262,7 +23267,7 @@
         return this.pluginService.findPluginsByName(name);
       }
       tryUpdateAABBBounds() {
-        const viewBox = this._viewBox;
+        const viewBox = this.window.getViewBox();
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
       combineLayer(ILayer1, ILayer2) {
@@ -23289,12 +23294,12 @@
         this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
       clearViewBox(color) {
-        this.window.clearViewBox(this._viewBox, color);
+        this.window.clearViewBox(color);
       }
       render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -23307,7 +23312,7 @@
       _doRenderInThisFrame() {
         this.timeline.resume(), this.ticker.start();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       renderLayerList(layerList, params) {
         const list = [];
@@ -23319,14 +23324,17 @@
           layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
-            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+            viewBox: this.window.getViewBox(),
+            transMatrix: this.window.getViewBoxTransform()
           }, Object.assign({
-            renderStyle: this.renderStyle,
-            keepMatrix: this.params.renderKeepMatrix
+            renderStyle: this.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+          viewBox: this.window.getViewBox(),
+          transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -23337,9 +23345,9 @@
       }
       resize(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        this.window.resize(w, h), this.forEachChildren(c => {
+        this.window.hasSubView() || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.window.resize(w, h), this.forEachChildren(c => {
           c.resize(w, h);
-        }), this._subView || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
       }
       resizeView(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -23393,47 +23401,41 @@
       getLayer(name) {
         return this.children.filter(layer => layer.name === name)[0];
       }
-      renderTo(window, params) {
+      renderTo(window) {
         this.forEachChildren((layer, i) => {
-          layer.drawTo(window, Object.assign(Object.assign({}, params), {
+          layer.drawTo(window, {
             renderService: this.renderService,
+            viewBox: window.getViewBox(),
+            transMatrix: window.getViewBoxTransform(),
             background: layer === this.defaultLayer ? this.background : void 0,
             clear: 0 === i,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
-          }));
+          });
         });
       }
       renderToNewWindow() {
-        let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let viewBox = arguments.length > 1 ? arguments[1] : undefined;
-        const window = container.get(VWindow);
-        if (fullImage) window.create({
-          width: this.viewWidth,
-          height: this.viewHeight,
+        const window = container.get(VWindow),
+          x1 = viewBox ? -viewBox.x1 : 0,
+          y1 = viewBox ? -viewBox.y1 : 0,
+          x2 = viewBox ? viewBox.x2 : this.viewWidth,
+          y2 = viewBox ? viewBox.y2 : this.viewHeight,
+          width = viewBox ? viewBox.width() : this.viewWidth,
+          height = viewBox ? viewBox.height() : this.viewHeight;
+        return window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          },
+          width: width,
+          height: height,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        });else {
-          const width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x),
-            height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
-          window.create({
-            width: width,
-            height: height,
-            dpr: this.window.dpr,
-            canvasControled: !0,
-            offscreen: !0,
-            title: ""
-          });
-        }
-        const x = viewBox ? -viewBox.x1 : 0,
-          y = viewBox ? -viewBox.y1 : 0;
-        return this.renderTo(window, {
-          x: x,
-          y: y,
-          width: viewBox ? viewBox.x2 : window.width,
-          height: viewBox ? viewBox.y2 : window.height
-        }), window;
+        }), this.renderTo(window), window;
       }
       toCanvas() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
@@ -23463,7 +23465,7 @@
       __metadata$M = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
-    const initMatrix$1 = new Matrix(1, 0, 0, 1, 0, 0),
+    const initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       globalPoint = {
         x: 0,
         y: 0
@@ -23473,7 +23475,7 @@
         return this.path;
       }
       constructor(canvas, dpr) {
-        this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D();
+        this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D(), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       getCanvas() {
         throw new Error("不支持getCanvas");
@@ -23657,7 +23659,10 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix$1, setTransform, dpr);
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+      }
+      setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -23863,7 +23868,7 @@
       };
     let BaseWindowHandlerContribution = class {
       constructor() {
-        this._uid = Generator.GenAutoIncrementId();
+        this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       onChange(cb) {
         this._onChangeCb = cb;
@@ -23884,6 +23889,18 @@
           left: 0
         };
       }
+      setViewBox(vb) {
+        this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
+      }
+      getViewBox() {
+        return this.viewBox;
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this.modelMatrix.setValue(a, b, c, d, e, f);
+      }
+      getViewBoxTransform() {
+        return this.modelMatrix;
+      }
     };
     BaseWindowHandlerContribution = __decorate$_([injectable(), __metadata$K("design:paramtypes", [])], BaseWindowHandlerContribution);
 
@@ -23915,23 +23932,14 @@
           group: null
         };
         params.pickerService = this;
-        let offsetX = 0,
-          offsetY = 0;
-        if (params && params.bounds) {
-          if (!params.bounds.contains(point.x, point.y)) return result;
-          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
-        }
-        if (this.pickContext) if (params.keepMatrix) {
-          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
-            const t = this.pickContext.nativeContext.getTransform();
-            this.pickContext.setTransformFromMatrix(t, !0, 1);
-          }
-        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
-        params.pickContext = this.pickContext;
-        const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
+        const w = params.bounds.width(),
+          h = params.bounds.height();
+        if (!new AABBBounds().setValue(0, 0, w, h).containsPoint(point)) return result;
+        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        const parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         let group;
         for (let i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -28162,7 +28170,6 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const outP = [0, 0, 0],
-      initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) => {
         if (clockwise) for (; endAngle > startAngle;) endAngle -= pi2;else for (; endAngle < startAngle;) endAngle += pi2;
         const step = pi$1 / 3 * (endAngle > startAngle ? 1 : -1);
@@ -28293,7 +28300,7 @@
         }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
         const context = canvas.nativeCanvas.getContext("2d");
         if (!context) throw new Error("发生错误，获取2d上下文失败");
-        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       reset() {
         this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -28655,7 +28662,10 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        this.setTransformFromMatrix(this._clearMatrix, setTransform, dpr);
+      }
+      setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -28886,10 +28896,10 @@
         return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
       }
       constructor() {
-        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global;
+        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global, this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       getTitle() {
-        return this.canvas.id.toString();
+        return this.canvas.id && this.canvas.id.toString();
       }
       getWH() {
         return {
@@ -29016,8 +29026,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -29451,8 +29462,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -29913,8 +29925,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -30193,7 +30206,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(vb, color) {}
+      clearViewBox(color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$C([injectable(), __param$p(0, inject(VGlobal)), __metadata$t("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -30558,8 +30571,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -30863,8 +30877,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -32438,6 +32453,28 @@
       registerGroup(), registerRect();
     }
 
+    const POLAR_START_ANGLE = -.5 * Math.PI;
+    const POLAR_END_ANGLE = 1.5 * Math.PI;
+    const DEFAULT_TEXT_FONT_FAMILY = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";
+    const DEFAULT_TEXT_FONT_SIZE = 11;
+    var StateValue;
+    !function (StateValue) {
+      StateValue.selected = "selected", StateValue.selectedReverse = "selected_reverse", StateValue.hover = "hover", StateValue.hoverReverse = "hover_reverse";
+    }(StateValue || (StateValue = {}));
+    const DEFAULT_STATES$2 = {
+      [StateValue.selectedReverse]: {},
+      [StateValue.selected]: {},
+      [StateValue.hover]: {},
+      [StateValue.hoverReverse]: {}
+    };
+    const DEFAULT_HTML_TEXT_SPEC = {
+      container: "",
+      width: 30,
+      height: 30,
+      style: {}
+    };
+    const SCROLLBAR_EVENT = "scrollDrag";
+
     const delayMap$3 = {
       debounce: debounce,
       throttle: throttle
@@ -32477,9 +32514,9 @@
           this._prePos = "horizontal" === direction ? e.clientX : e.clientY, this._dispatchEvent("scrollDown", {
             pos: this._prePos,
             event: e
-          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
           }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._computeScrollValue = e => {
@@ -32494,12 +32531,12 @@
             height: height
           } = this._getSliderRenderBounds();
           return "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
-        }, this._onSliderPointerMove = delayMap$3[this.attribute.delayType](e => {
+        }, this._onSliderPointerMove = e => {
           e.stopPropagation();
           const preScrollRange = this.getScrollRange(),
             [currentPos, currentScrollValue] = this._computeScrollValue(e);
           this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
-        }, this.attribute.delayTime), this._onSliderPointerUp = e => {
+        }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap$3[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
           e.preventDefault();
           const {
               realTime = !0,
@@ -32512,9 +32549,9 @@
           this._dispatchEvent("scrollUp", {
             pre: preRange,
             value: clampRange$1(range, limitRange[0], limitRange[1])
-          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
           }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
@@ -32541,7 +32578,7 @@
             }, !0), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
           }
         }
-        this.attribute.range = currScrollRange, realTime && this._dispatchEvent("scrollDrag", {
+        this.attribute.range = currScrollRange, realTime && this._dispatchEvent(SCROLLBAR_EVENT, {
           pre: preRange,
           value: currScrollRange
         });
@@ -32780,27 +32817,6 @@
       return direct ? angleLargeThanPI ? 2 * Math.PI - ang : ang : angleLargeThanPI ? ang : 2 * Math.PI - ang;
     }
 
-    const POLAR_START_ANGLE = -.5 * Math.PI;
-    const POLAR_END_ANGLE = 1.5 * Math.PI;
-    const DEFAULT_TEXT_FONT_FAMILY = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";
-    const DEFAULT_TEXT_FONT_SIZE = 11;
-    var StateValue;
-    !function (StateValue) {
-      StateValue.selected = "selected", StateValue.selectedReverse = "selected_reverse", StateValue.hover = "hover", StateValue.hoverReverse = "hover_reverse";
-    }(StateValue || (StateValue = {}));
-    const DEFAULT_STATES$2 = {
-      [StateValue.selectedReverse]: {},
-      [StateValue.selected]: {},
-      [StateValue.hover]: {},
-      [StateValue.hoverReverse]: {}
-    };
-    const DEFAULT_HTML_TEXT_SPEC = {
-      container: "",
-      width: 30,
-      height: 30,
-      style: {}
-    };
-
     const initTextMeasure$1 = (textSpec, option, useNaiveCanvas) => new TextMeasure(Object.assign({
       defaultFontParams: {
         fontFamily: DEFAULT_TEXT_FONT_FAMILY,
@@ -33739,7 +33755,7 @@
         w = ~~((width + left + right + ratio) / ratio),
         h = ~~((height + top + bottom + ratio) / ratio),
         scale = _ => ~~(_ / ratio);
-      return scale.bitmap = () => bitmap(w, h), scale.x = _ => ~~(_ + left / ratio), scale.y = _ => ~~(_ + top / ratio), scale.ratio = ratio, scale.padding = padding, scale.width = width, scale.height = height, scale;
+      return scale.bitmap = () => bitmap(w, h), scale.x = _ => ~~((_ + left) / ratio), scale.y = _ => ~~((_ + top) / ratio), scale.ratio = ratio, scale.padding = padding, scale.width = width, scale.height = height, scale;
     }
     function boundToRange($, bound) {
       let clamp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -33788,7 +33804,7 @@
       const validCandidates = candidates.filter(candidate => isValid$3(candidate));
       for (let i = 0; i < validCandidates.length; i++) {
         const tempText = text.clone();
-        if (tempText.setAttributes(validCandidates[i]), tempText.update(), canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce, pad)) return bitmap.setRange(boundToRange($, tempText.AABBBounds, !0)), validCandidates[i];
+        if (tempText.setAttributes(validCandidates[i]), tempText.update(), canPlace($, bitmap, tempText.AABBBounds, clampForce, pad)) return bitmap.setRange(boundToRange($, tempText.AABBBounds, !0)), validCandidates[i];
       }
       return !1;
     }
@@ -37048,17 +37064,9 @@
         }), items.length > 1 && alternateColor) {
           const colors = isArray$3(alternateColor) ? alternateColor : [alternateColor, "transparent"],
             getColor = index => colors[index % colors.length];
-          for (let index = 0; index < items.length; index++) {
-            const prev = items[index].points;
-            let curr;
-            curr = index !== items.length - 1 ? items[index + 1].points : [{
-              x: items[index].points[0].x + (items[index].points[0].x - items[index - 1].points[0].x),
-              y: items[index].points[0].y + (items[index].points[0].y - items[index - 1].points[0].y)
-            }, {
-              x: items[index].points[1].x + (items[index].points[1].x - items[index - 1].points[1].x),
-              y: items[index].points[1].y + (items[index].points[1].y - items[index - 1].points[1].y)
-            }];
-            const path = getRegionPath(prev, curr, gridAttrs),
+          for (let index = 0; index < items.length - 1; index++) {
+            const [prev, curr] = [items[index].points, items[index + 1].points],
+              path = getRegionPath(prev, curr, gridAttrs),
               shape = graphicCreator.path({
                 path: path,
                 fill: getColor(index)
@@ -37505,7 +37513,7 @@
             start: start,
             end: end
           } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), !realTime || startAttr === start && endAttr === end || this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
             start: start,
             end: end,
             tag: this._activeTag
@@ -37574,14 +37582,14 @@
         }));
       }
       eventPosToStagePos(e) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         const {
           x: x,
           y: y
-        } = vglobal.mapToCanvasPoint(e, this.stage.window.getContext().canvas.nativeCanvas);
+        } = vglobal.mapToCanvasPoint(e, null === (_d = null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window) || void 0 === _b ? void 0 : _b.getContext()) || void 0 === _c ? void 0 : _c.canvas) || void 0 === _d ? void 0 : _d.nativeCanvas);
         return {
-          x: x - ((null === (_a = this.stage) || void 0 === _a ? void 0 : _a.x) || 0),
-          y: y - ((null === (_b = this.stage) || void 0 === _b ? void 0 : _b.y) || 0)
+          x: x - ((null === (_e = this.stage) || void 0 === _e ? void 0 : _e.x) || 0),
+          y: y - ((null === (_f = this.stage) || void 0 === _f ? void 0 : _f.y) || 0)
         };
       }
       _onHandlerPointerEnter(e) {
@@ -42520,7 +42528,7 @@
           this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e);
         }, this._onBrushing = e => {
           this._outOfInteractiveRange(e) || ((this._activeDrawState || this._activeMoveState) && e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
-        }, this._onBrushEnd = e => {
+        }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
           e.preventDefault();
           const {
             removeOnClick = !0
@@ -42543,14 +42551,12 @@
       _bindBrushEvents() {
         if (this.attribute.disableTriggerEvent) return;
         const {
-          delayType = "throttle",
-          delayTime = 0,
           trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
           updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
           endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
           resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
         } = this.attribute;
-        this.stage.addEventListener(trigger, this._onBrushStart), this.stage.addEventListener(updateTrigger, delayMap$1[delayType](this._onBrushing, delayTime)), this.stage.addEventListener(endTrigger, this._onBrushEnd), this.stage.addEventListener(resetTrigger, this._onBrushEnd);
+        this.stage.addEventListener(trigger, this._onBrushStart), this.stage.addEventListener(updateTrigger, this._onBrushingWithDelay), this.stage.addEventListener(endTrigger, this._onBrushEnd), this.stage.addEventListener(resetTrigger, this._onBrushEnd);
       }
       _isPosInBrushMask(e) {
         const pos = this.eventPosToStagePos(e),
@@ -42745,7 +42751,7 @@
           endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
           resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
         } = this.attribute;
-        this.stage.removeEventListener(trigger, this._onBrushStart), this.stage.removeEventListener(updateTrigger, delayMap$1[delayType](this._onBrushing, delayTime)), this.stage.removeEventListener(endTrigger, this._onBrushEnd), this.stage.removeEventListener(resetTrigger, this._onBrushEnd);
+        this.stage.removeEventListener(trigger, this._onBrushStart), this.stage.removeEventListener(updateTrigger, this._onBrushingWithDelay), this.stage.removeEventListener(endTrigger, this._onBrushEnd), this.stage.removeEventListener(resetTrigger, this._onBrushEnd);
       }
     };
     Brush$1.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -44611,9 +44617,12 @@
           excludedChannels = Object.keys(excludedChannelMap).filter(channel => 0 !== excludedChannelMap[channel]);
         this.subAnimate.animate.preventAttrs(excludedChannels);
         const from = Object.assign({}, this.from),
-          to = Object.assign({}, this.to);
+          to = Object.assign({}, this.to),
+          animatedChannels = [];
         Object.keys(to).forEach(k => {
-          excludedChannels.includes(k) ? (from[k] = to[k], this.from[k] = to[k]) : isNil$3(from[k]) && (from[k] = this.target.getComputedAttribute(k));
+          excludedChannels.includes(k) ? (from[k] = to[k], this.from[k] = to[k]) : isNil$3(from[k]) ? from[k] = this.target.getComputedAttribute(k) : animatedChannels.push(k);
+        }), this.target.animates.forEach(a => {
+          a !== this.subAnimate.animate && a.preventAttrs(animatedChannels);
         }), this.target.setAttributes(from, !1, {
           type: AttributeUpdateType.ANIMATE_UPDATE,
           animationState: {
@@ -44623,9 +44632,14 @@
         }), this._fromAttribute = from, this._toAttribute = to;
       }
       onEnd() {
-        this.target.setAttributes(this._toAttribute, !1, {
-          type: AttributeUpdateType.ANIMATE_END
-        });
+        if (this._toAttribute) {
+          const out = {};
+          Object.keys(this._toAttribute).forEach(key => {
+            this.subAnimate.animate.validAttr(key) && (out[key] = this._toAttribute[key]);
+          }), this.target.setAttributes(out, !1, {
+            type: AttributeUpdateType.ANIMATE_END
+          });
+        }
       }
       update(end, ratio, out) {
         0 === this.updateCount && this.onFirstRun(), this.updateCount += 1;
@@ -47545,6 +47559,10 @@
         const stage = this.renderer.stage();
         stage && stage.on("*", this.delegateEvent);
       }
+      releaseStageEvent() {
+        const stage = this.renderer.stage();
+        stage && stage.off("*", this.delegateEvent);
+      }
       addEventListener(type, handler, options) {
         let callback = handler;
         return options && !1 === options.trap || (callback = handler, callback.raw = handler), options && options.target && (callback.target = options.target), this.on(type, callback), this;
@@ -47594,7 +47612,7 @@
       }
       release() {
         var _a, _b, _c;
-        this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
+        this.releaseStageEvent(), this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
           listener.source.removeEventListener(listener.type, listener.handler);
         }), this._eventListeners = null;
       }
@@ -51439,7 +51457,8 @@
             style: {
                 symbolType: 'circle'
             }
-        }
+        },
+        seriesMark: 'area'
     };
 
     const bar = {
@@ -54013,7 +54032,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this;
         }
         release() {
-            this._eventDispatcher.release();
+            this._eventDispatcher.clear();
             this._composedEventMap.clear();
         }
     };
@@ -54158,7 +54177,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return this;
         }
-        release() {
+        clear() {
             for (const entry of this._viewListeners.entries()) {
                 this._compiler.removeEventListener(exports.Event_Source_Type.chart, entry[0], entry[1]);
             }
@@ -54184,6 +54203,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._canvasBubbles.clear();
         }
+        release() {
+            this.clear();
+            this.globalInstance = null;
+            this._compiler = null;
+        }
         _filter(filter, evt, params) {
             var _a, _b, _c;
             if (isFunction$1(filter.filter) && !filter.filter(params)) {
@@ -54630,6 +54654,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 [GrammarType.mark]: {}
             };
             this._compileChart = null;
+            this.handleStageRender = () => {
+                var _a, _b;
+                (_b = (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.getEvent()) === null || _b === void 0 ? void 0 : _b.emit(exports.ChartEvent.afterRender, { chart: this._compileChart });
+            };
             this._container = container;
             this._option = option;
         }
@@ -54666,10 +54694,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.onLayout(this._view);
                 }, logger: logger, logLevel: logger.level() }));
             this._setCanvasStyle();
-            this.getStage().hooks.afterRender.tap('chart-event', () => {
-                var _a, _b;
-                (_b = (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.getEvent()) === null || _b === void 0 ? void 0 : _b.emit(exports.ChartEvent.afterRender, { chart: this._compileChart });
-            });
+            this.getStage().hooks.afterRender.tap('chart-event', this.handleStageRender);
             const interactive = this._option.interactive;
             if (interactive !== false) {
                 this._viewListeners.forEach(listener => {
@@ -54893,6 +54918,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         releaseEvent() {
+            const stage = this.getStage();
+            if (stage) {
+                stage.hooks.afterRender.unTap('chart-event', this.handleStageRender);
+            }
             this._viewListeners.clear();
             this._windowListeners.clear();
             this._canvasListeners.clear();
@@ -54905,6 +54934,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (_a = this._view) === null || _a === void 0 ? void 0 : _a.release();
             this._view = null;
             this.isInited = false;
+            this._compileChart = null;
         }
         releaseGrammar(removeGraphicItems = false) {
             var _a, _b;
@@ -55491,6 +55521,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         release() {
             this._option = null;
+            this.getCompiler = null;
         }
     }
 
@@ -56486,7 +56517,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const clip = (_a = this._spec.clip) !== null && _a !== void 0 ? _a : this._getClipDefaultValue();
             this._groupMark = this._createGroupMark('regionGroup', this.userId, this.layoutZIndex);
             this._interactionMark = this._createGroupMark('regionInteractionGroup', this.userId + '_interaction', exports.LayoutZIndex.Interaction);
-            if (this._spec.style) {
+            if (!isEmpty(this._spec.style)) {
                 this._backgroundMark = this._createMark({ type: "rect", name: 'regionBackground' });
                 if (clip) {
                     this._foregroundMark = this._createMark({ type: "rect", name: 'regionForeground' });
@@ -58719,17 +58750,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getAll() {
             return this._plugins.slice();
         }
-        dispose(pluginsId) {
+        release(pluginsId) {
             const plugin = this._plugins.find(p => p.id === pluginsId);
             if (!plugin) {
                 return;
             }
-            plugin.dispose && plugin.dispose(this);
+            plugin.release(this);
+            this._plugins = this._plugins.filter(entry => entry !== plugin);
         }
-        disposeAll() {
+        releaseAll() {
             this._plugins.forEach(plugin => {
-                plugin.dispose && plugin.dispose(this);
+                plugin.release(this);
             });
+            this._plugins = [];
         }
     }
 
@@ -58758,6 +58791,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 plugin.onBeforeInitChart && plugin.onBeforeInitChart(this, chartSpec, actionSource);
             });
         }
+        releaseAll() {
+            super.releaseAll();
+            this.globalInstance = null;
+        }
     }
 
     class VChart {
@@ -58928,11 +58965,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._spec = spec;
             if (!this._chartSpecTransformer) {
-                this._chartSpecTransformer = Factory.createChartSpecTransformer(this._spec.type, {
-                    type: this._spec.type,
-                    getTheme: () => { var _a; return (_a = this._currentTheme) !== null && _a !== void 0 ? _a : {}; },
-                    animation: this._option.animation
-                });
+                this._chartSpecTransformer = Factory.createChartSpecTransformer(this._spec.type, this._getChartOption(this._spec.type));
             }
             this._chartSpecTransformer.transformSpec(this._spec);
             this._chartPluginApply('onAfterChartSpecTransform', this._spec, actionSource);
@@ -58942,10 +58975,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _updateSpecInfo() {
             var _a;
             if (!this._chartSpecTransformer) {
-                this._chartSpecTransformer = Factory.createChartSpecTransformer(this._spec.type, {
-                    type: this._spec.type,
-                    getTheme: () => { var _a; return (_a = this._currentTheme) !== null && _a !== void 0 ? _a : {}; }
-                });
+                this._chartSpecTransformer = Factory.createChartSpecTransformer(this._spec.type, this._getChartOption(this._spec.type));
             }
             this._specInfo = (_a = this._chartSpecTransformer) === null || _a === void 0 ? void 0 : _a.createSpecInfo(this._spec);
         }
@@ -58959,26 +58989,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError('chart is already initialized');
                 return;
             }
-            const chart = Factory.createChart(spec.type, spec, {
-                type: spec.type,
-                globalInstance: this,
-                eventDispatcher: this._eventDispatcher,
-                dataSet: this._dataSet,
-                container: this._container,
-                canvas: this._canvas,
-                map: new Map(),
-                mode: this._option.mode || exports.RenderModeEnum['desktop-browser'],
-                modeParams: this._option.modeParams,
-                getCompiler: () => this._compiler,
-                performanceHook: this._option.performanceHook,
-                viewBox: this._viewBox,
-                animation: this._option.animation,
-                getTheme: () => { var _a; return (_a = this._currentTheme) !== null && _a !== void 0 ? _a : {}; },
-                getSpecInfo: () => { var _a; return (_a = this._specInfo) !== null && _a !== void 0 ? _a : {}; },
-                layout: this._option.layout,
-                onError: this._onError,
-                disableTriggerEvent: this._option.disableTriggerEvent === true
-            });
+            const chart = Factory.createChart(spec.type, spec, this._getChartOption(spec.type));
             if (!chart) {
                 (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError('init chart fail');
                 return;
@@ -59033,7 +59044,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return calculateChartSize(this._spec, {
                 container: this._container,
                 canvas: this._canvas,
-                mode: this._option.mode || exports.RenderModeEnum['desktop-browser'],
+                mode: this._getMode(),
                 modeParams: this._option.modeParams
             }, {
                 width: (_b = (_a = this._currentSize) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : DEFAULT_CHART_WIDTH,
@@ -59192,16 +59203,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if ((_a = this._onResize) === null || _a === void 0 ? void 0 : _a.cancel) {
                 this._onResize.cancel();
             }
-            this._chartPluginApply('disposeAll');
+            this._chartPluginApply('releaseAll');
+            this._chartPlugin = null;
             this._chartSpecTransformer = null;
             (_b = this._chart) === null || _b === void 0 ? void 0 : _b.release();
             (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.release();
             (_d = this._eventDispatcher) === null || _d === void 0 ? void 0 : _d.release();
             this._unBindResizeEvent();
             this._releaseData();
+            this._onError = null;
+            this._onResize = null;
+            this._container = null;
+            this._currentTheme = null;
+            this._option = null;
             this._chart = null;
             this._compiler = null;
             this._spec = null;
+            this._specInfo = null;
             this._originalSpec = null;
             this._userEvents = null;
             this._event = null;
@@ -59883,6 +59901,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._chartPlugin[funcName].apply(this._chartPlugin, args);
         }
+        _getMode() {
+            return this._option.mode || exports.RenderModeEnum['desktop-browser'];
+        }
+        _getChartOption(type) {
+            return {
+                type,
+                globalInstance: this,
+                eventDispatcher: this._eventDispatcher,
+                dataSet: this._dataSet,
+                container: this._container,
+                canvas: this._canvas,
+                map: new Map(),
+                mode: this._getMode(),
+                modeParams: this._option.modeParams,
+                getCompiler: () => this._compiler,
+                performanceHook: this._option.performanceHook,
+                viewBox: this._viewBox,
+                animation: this._option.animation,
+                getTheme: () => { var _a; return (_a = this._currentTheme) !== null && _a !== void 0 ? _a : {}; },
+                getSpecInfo: () => { var _a; return (_a = this._specInfo) !== null && _a !== void 0 ? _a : {}; },
+                layout: this._option.layout,
+                onError: this._onError,
+                disableTriggerEvent: this._option.disableTriggerEvent === true
+            };
+        }
     }
     VChart.InstanceManager = InstanceManager;
     VChart.ThemeManager = ThemeManager;
@@ -59897,6 +59940,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerGroupMark();
         View.useRegisters([registerFilterTransform, registerMapTransform]);
         registerVGrammarCommonAnimation();
+        registerElementHighlight();
+        registerElementSelect();
         registerTheme(darkTheme.name, darkTheme);
         Logger.getInstance(LoggerLevel.Error);
     };
@@ -60082,6 +60127,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         onAdd(service) {
             this.service = service;
         }
+        release() {
+            this.service = null;
+        }
     }
 
     const registerChartPlugin = (plugin) => {
@@ -60157,7 +60205,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     break;
             }
             if (resetMediaQuery) {
-                this.dispose();
+                this.release();
             }
             if (!this._initialized) {
                 this.onInit(service, chartSpec);
@@ -60259,7 +60307,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._option.updateSpec(chartSpec, compile, render);
             }
         }
-        dispose() {
+        release() {
+            super.release();
             this._initialized = false;
             this._spec = [];
             this._option = undefined;
@@ -60716,7 +60765,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         };
     };
 
-    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
     const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
     const TOOLTIP_MAX_LINE_COUNT = 20;
     const TOOLTIP_EMPTY_STRING = '';
@@ -60729,10 +60777,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         offsetY: 10,
         sanitize: escapeHTML
     };
-    class TooltipHandlerType {
-    }
-    TooltipHandlerType.dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
-    TooltipHandlerType.canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
 
     const DEFAULT_TITLE_STYLE = {
         left: {
@@ -61133,6 +61177,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let positionAttribute;
         if (type === 'line') {
             positionAttribute = {
+                visible: true,
                 start: { x: x + bandWidth / 2, y: topPos },
                 end: { x: x + bandWidth / 2, y: topPos + height }
             };
@@ -61141,6 +61186,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const extend = getRectSize(xHair, bandWidth, crosshairInfo.axis);
             const { leftPos, rightPos } = crosshairInfo;
             positionAttribute = {
+                visible: true,
                 start: { x: Math.max(x - extend / 2 - offsetWidth / 2, leftPos), y: topPos },
                 end: { x: Math.min(x + bandWidth + extend / 2 + offsetWidth / 2, rightPos), y: topPos + height }
             };
@@ -61153,6 +61199,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let positionAttribute;
         if (type === 'line') {
             positionAttribute = {
+                visible: true,
                 start: { x: leftPos, y: y + bandHeight / 2 },
                 end: { x: leftPos + width, y: y + bandHeight / 2 }
             };
@@ -61161,6 +61208,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const extend = getRectSize(yHair, bandHeight, crosshairInfo.axis);
             const { topPos, bottomPos } = crosshairInfo;
             positionAttribute = {
+                visible: true,
                 start: { x: leftPos, y: Math.max(y - extend / 2 - offsetHeight / 2, topPos) },
                 end: { x: leftPos + width, y: Math.min(y + bandHeight + extend / 2 + offsetHeight / 2, bottomPos) }
             };
@@ -63796,6 +63844,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerComponentPlugin(plugin.type, plugin);
     };
 
+    class TooltipHandlerType {
+    }
+    TooltipHandlerType.dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
+    TooltipHandlerType.canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
+    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
+
     class DomTooltipHandler extends BaseTooltipHandler {
         getVisibility() {
             var _a;
@@ -64008,7 +64062,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.10.0-alpha.8";
+    const version = "1.10.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -64430,17 +64484,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const type = this._option.type;
             const theme = transformSeriesThemeToMerge(get$1(chartTheme, `series.${type}`), type, mark, markByName);
             const themeWithDirection = get$1(chartTheme, `series.${type}_${direction}`);
-            const stack = (_c = (_b = spec.stack) !== null && _b !== void 0 ? _b : themeWithDirection === null || themeWithDirection === void 0 ? void 0 : themeWithDirection.stack) !== null && _c !== void 0 ? _c : theme === null || theme === void 0 ? void 0 : theme.stack;
+            const stack = (_c = (_b = this.stack) !== null && _b !== void 0 ? _b : themeWithDirection === null || themeWithDirection === void 0 ? void 0 : themeWithDirection.stack) !== null && _c !== void 0 ? _c : theme === null || theme === void 0 ? void 0 : theme.stack;
             const themeWithStack = stack ? get$1(chartTheme, `series.${type}_stack`) : undefined;
             return mergeSpec({}, theme, themeWithDirection, themeWithStack);
         }
         transformSpec(spec, chartSpec, chartSpecInfo) {
+            this._transformStack(spec);
             const result = super.transformSpec(spec, chartSpec, chartSpecInfo);
             this._transformLabelSpec(result.spec);
-            return Object.assign(Object.assign({}, result), { markLabelSpec: this.markLabelSpec });
+            return Object.assign(Object.assign({}, result), { markLabelSpec: this.markLabelSpec, stack: this.stack });
         }
         _transformLabelSpec(spec) {
         }
+        _transformStack(spec) {
+            if (isBoolean$1(spec.stack)) {
+                this.stack = spec.stack;
+            }
+            if (isBoolean$1(spec.percent)) {
+                this.stack = spec.percent || this.stack;
+            }
+            if (isBoolean$1(spec.stackOffsetSilhouette)) {
+                this.stack = spec.stackOffsetSilhouette || this.stack;
+            }
+            if (isValid$3(spec.stackValue)) {
+                this.stack = true;
+            }
+            if (isNil$3(this.stack) && this._supportStack && spec.seriesField) {
+                this.stack = true;
+            }
+        }
         _addMarkLabelSpec(spec, markName, labelSpecKey = 'label', styleHandlerName = 'initLabelMarkStyle', hasAnimation, head) {
             if (!spec) {
                 return;
@@ -64573,17 +64645,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._groups;
         }
         getStack() {
-            return this._stack;
+            var _a;
+            return (_a = this.getSpecInfo()) === null || _a === void 0 ? void 0 : _a.stack;
         }
         getStackValue() {
             var _a;
             return (_a = this._spec.stackValue) !== null && _a !== void 0 ? _a : `${PREFIX}_series_${this.type}`;
         }
         getPercent() {
-            return this._percent;
+            return this._spec.percent;
         }
         getStackOffsetSilhouette() {
-            return this._stackOffsetSilhouette;
+            return this._spec.stackOffsetSilhouette;
         }
         get tooltipHelper() {
             if (!this._tooltipHelper) {
@@ -64630,8 +64703,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._viewDataMap = new Map();
             this._viewDataFilter = null;
             this._data = null;
-            this._percent = false;
-            this._stackOffsetSilhouette = false;
             this.layoutZIndex = 0;
             this._invalidType = 'break';
             this._getInvalidDefined = (datum) => couldBeValidNumber(datum[this.getStackValueField()]);
@@ -64682,23 +64753,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setAttrFromSpec() {
             super.setAttrFromSpec();
             this.setSeriesField(this._spec.seriesField);
-            if (isBoolean$1(this._spec.stack)) {
-                this._stack = this._spec.stack;
-            }
-            if (isBoolean$1(this._spec.percent)) {
-                this._percent = this._spec.percent;
-                this._stack = this._spec.percent || this._stack;
-            }
-            if (isBoolean$1(this._spec.stackOffsetSilhouette)) {
-                this._stackOffsetSilhouette = this._spec.stackOffsetSilhouette;
-                this._stack = this._spec.stackOffsetSilhouette || this._stack;
-            }
-            if (isValid$3(this._spec.stackValue)) {
-                this._stack = true;
-            }
-            if (isNil$3(this._stack) && this._supportStack && this._seriesField) {
-                this._stack = true;
-            }
             if (isValid$3(this._spec.invalidType)) {
                 this._invalidType = this._spec.invalidType;
             }
@@ -64714,16 +64768,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (_d = (_c = this._rawData) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.addListener('change', this.rawDataUpdate.bind(this));
             this._addDataIndexAndKey();
             if (this._rawData) {
-                if (this._stack) {
+                if (this.getStack()) {
                     this._viewDataFilter = dataViewFromDataView(this._rawData, this._dataSet, {
                         name: `${this.type}_${this.id}_viewDataFilter`
                     });
                 }
-                const viewData = dataViewFromDataView(this._stack ? this._viewDataFilter : this._rawData, this._dataSet, {
+                const viewData = dataViewFromDataView(this.getStack() ? this._viewDataFilter : this._rawData, this._dataSet, {
                     name: `${this.type}_${this.id}_viewData`
                 });
                 this._data = new SeriesData(this._option, viewData);
-                if (this._stack) {
+                if (this.getStack()) {
                     this._viewDataFilter.target.removeListener('change', viewData.reRunAllTransform);
                 }
             }
@@ -64816,7 +64870,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }, false);
             this._data.getDataView().target.removeListener('change', this._viewDataStatistics.reRunAllTransform);
-            if (this._stack) {
+            if (this.getStack()) {
                 this.createdStackData();
             }
         }
@@ -65818,13 +65872,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this.setFieldX2((_a = this._spec) === null || _a === void 0 ? void 0 : _a.x2Field);
             this.setFieldY2((_b = this._spec) === null || _b === void 0 ? void 0 : _b.y2Field);
-            if (this._stack) {
+            if (this.getStack()) {
                 this.setValueFieldToStack();
             }
-            if (this._percent) {
+            if (this.getPercent()) {
                 this.setValueFieldToPercent();
             }
-            if (this._stackOffsetSilhouette) {
+            if (this.getStackOffsetSilhouette()) {
                 this.setValueFieldToStackOffsetSilhouette();
             }
             if (isValid$3(this._spec.sortDataByAxis)) {
@@ -67075,12 +67129,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._spec = spec;
         }
         created() {
-            this._transformer = new this.transformerConstructor({
-                type: this.type,
-                seriesType: this.seriesType,
-                getTheme: this._option.getTheme,
-                animation: this._option.animation
-            });
+            this._transformer = new this.transformerConstructor(Object.assign(Object.assign({}, this._option), { type: this.type, seriesType: this.seriesType }));
             this._chartData.parseData(this._spec.data);
             this._createGlobalScale();
             this._spec.background && typeof this._spec.background === 'object' && this._createBackground();
@@ -67871,10 +67920,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         transformModelSpec(chartSpec) {
             const transform = (constructor, specInfo, chartSpecInfo) => {
                 const { spec, specPath, specInfoPath, type } = specInfo;
-                const transformer = new constructor.transformerConstructor({
-                    type,
-                    getTheme: this._option.getTheme
-                });
+                const transformer = new constructor.transformerConstructor(Object.assign(Object.assign({}, this._option), { type }));
                 const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
                 setProperty(chartSpec, specPath, transformResult.spec);
                 setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign({}, specInfo), transformResult));
@@ -67886,10 +67932,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!transform) {
                 transform = (constructor, specInfo, chartSpecInfo) => {
                     const { spec, specPath, specInfoPath, type } = specInfo;
-                    const transformer = new constructor.transformerConstructor({
-                        type,
-                        getTheme: this._option.getTheme
-                    });
+                    const transformer = new constructor.transformerConstructor(Object.assign(Object.assign({}, this._option), { type }));
                     setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign({}, specInfo), { theme: transformer.getTheme(spec, chartSpec) }));
                 };
             }
@@ -68264,6 +68307,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class AreaSeriesSpecTransformer extends LineLikeSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = true;
+        }
         _transformLabelSpec(spec) {
             var _a, _b, _c;
             super._transformLabelSpec(spec);
@@ -68276,7 +68323,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
             var _a, _b, _c, _d, _e;
             super._transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo);
-            const { area = {}, line = {}, seriesMark = 'area' } = spec;
+            const { area = {}, line = {}, seriesMark } = spec;
             const isAreaVisible = area.visible !== false && ((_a = area.style) === null || _a === void 0 ? void 0 : _a.visible) !== false;
             const isLineVisible = line.visible !== false && ((_b = line.style) === null || _b === void 0 ? void 0 : _b.visible) !== false;
             area.support3d = !!(area.support3d || line.support3d);
@@ -68327,7 +68374,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super(...arguments);
             this.type = exports.SeriesTypeEnum.area;
             this.transformerConstructor = AreaSeriesSpecTransformer;
-            this._supportStack = true;
             this._sortDataByAxis = false;
         }
         initMark() {
@@ -68480,8 +68526,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class AreaChartSpecTransformer extends CartesianChartSpecTransformer {
         _getDefaultSeriesSpec(spec) {
-            var _a;
-            return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { point: spec.point, line: spec.line, area: spec.area, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint, sampling: spec.sampling, samplingFactor: spec.samplingFactor, pointDis: spec.pointDis, pointDisMul: spec.pointDisMul, markOverlap: spec.markOverlap, areaLabel: spec.areaLabel });
+            return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { point: spec.point, line: spec.line, area: spec.area, seriesMark: spec.seriesMark, activePoint: spec.activePoint, sampling: spec.sampling, samplingFactor: spec.samplingFactor, pointDis: spec.pointDis, pointDisMul: spec.pointDisMul, markOverlap: spec.markOverlap, areaLabel: spec.areaLabel });
         }
         transformSpec(spec) {
             super.transformSpec(spec);
@@ -68635,6 +68680,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class BarSeriesSpecTransformer extends BaseSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = true;
+        }
         _transformLabelSpec(spec) {
             this._addMarkLabelSpec(spec, "bar");
         }
@@ -68648,7 +68697,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._barMarkName = "bar";
             this._barMarkType = "rect";
             this.transformerConstructor = BarSeriesSpecTransformer;
-            this._supportStack = true;
             this._bandPosition = 0;
             this._getBarXStart = (datum, scale) => {
                 if (this._shouldDoPreCalculate()) {
@@ -68867,7 +68915,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _shouldDoPreCalculate() {
             const region = this.getRegion();
-            return this._stack && region.getSeries().filter(s => s.type === this.type && s.getSpec().barMinHeight).length;
+            return this.getStack() && region.getSeries().filter(s => s.type === this.type && s.getSpec().barMinHeight).length;
         }
         _calculateStackRectPosition(isVertical) {
             const region = this.getRegion();
@@ -70124,6 +70172,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super();
             this.component = component;
         }
+        releaseAll() {
+            super.releaseAll();
+            this.component = null;
+        }
     }
 
     function getComponentThemeFromGlobalTheme(type, chartTheme, componentSpec, chartSpec) {
@@ -70283,7 +70335,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             this._container = null;
-            (_a = this.pluginService) === null || _a === void 0 ? void 0 : _a.disposeAll();
+            (_a = this.pluginService) === null || _a === void 0 ? void 0 : _a.releaseAll();
             this.pluginService = null;
         }
         compile() {
@@ -70440,7 +70492,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, this._getRegionOrSeriesLayout(regionOrSeries), false)) {
                 return;
             }
-            this._clickEnable = false;
             if (callback) {
                 callback({ zoomDelta, zoomX, zoomY }, event);
             }
@@ -70524,7 +70575,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, this._getRegionOrSeriesLayout(regionOrSeries), false)) {
                 return stopBubble;
             }
-            this._clickEnable = false;
             if (callback) {
                 stopBubble = callback({ scrollX, scrollY }, event);
             }
@@ -70634,7 +70684,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._option.disableTriggerEvent) {
                 return;
             }
-            this._clickEnable = true;
+            this._clickEnable = false;
             if (!this._zoomableTrigger.parserDragEvent(params.event)) {
                 return;
             }
@@ -70649,7 +70699,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             let upX = event.canvasX;
             let upY = event.canvasY;
             const mouseup = delayMap[delayType]((params) => {
-                this._clickEnable = false;
+                this._clickEnable = true;
                 const event = params.event;
                 const dx = event.canvasX - upX;
                 const dy = event.canvasY - upY;
@@ -71603,6 +71653,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class WaterfallSeriesSpecTransformer extends BarSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = false;
+        }
         _transformLabelSpec(spec) {
             this._addMarkLabelSpec(spec, "bar");
             this._addMarkLabelSpec(spec, "bar", 'stackLabel');
@@ -71614,7 +71668,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super(...arguments);
             this.type = exports.SeriesTypeEnum.waterfall;
             this.transformerConstructor = WaterfallSeriesSpecTransformer;
-            this._stack = false;
             this._leaderLineMark = null;
             this._stackLabelMark = null;
             this._labelMark = null;
@@ -72563,6 +72616,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class RangeColumnSeriesSpecTransformer extends BarSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = false;
+        }
         _transformLabelSpec(spec) {
             var _a;
             const labelPosition = (_a = spec.label) === null || _a === void 0 ? void 0 : _a.position;
@@ -72579,7 +72636,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._barMarkType = "rect";
             this._barName = exports.SeriesTypeEnum.bar;
             this.transformerConstructor = RangeColumnSeriesSpecTransformer;
-            this._stack = false;
         }
         initMark() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -73866,10 +73922,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._specAngleField = this._angleField.slice();
             this._specRadiusField = this._radiusField.slice();
             this.setInnerRadiusField(this._spec.valueField || this._spec.radiusField);
-            if (this._stack) {
+            if (this.getStack()) {
                 this.setValueFieldToStack();
             }
-            if (this._percent) {
+            if (this.getPercent()) {
                 this.setValueFieldToPercent();
             }
         }
@@ -73893,6 +73949,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class RoseSeriesSpecTransformer extends BaseSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = true;
+        }
         _transformLabelSpec(spec) {
             this._addMarkLabelSpec(spec, "rose");
         }
@@ -73904,7 +73964,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super(...arguments);
             this.type = exports.SeriesTypeEnum.rose;
             this.transformerConstructor = RoseSeriesSpecTransformer;
-            this._supportStack = true;
             this._roseMark = null;
             this._labelMark = null;
         }
@@ -73962,7 +74021,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     outerRadius: (datum) => valueInScaleRange(this.radiusAxisHelper.dataToPosition([datum[this._radiusField[0]]]), this.radiusAxisHelper.getScale(0)),
                     innerRadius: (datum) => {
                         var _a;
-                        if (!this._stack) {
+                        if (!this.getStack()) {
                             return 0;
                         }
                         const stackStart = valueInScaleRange(this.radiusAxisHelper.dataToPosition([datum[this._innerRadiusField[0]]]), this.radiusAxisHelper.getScale(0));
@@ -74265,13 +74324,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         if (!datum || !this.angleAxisHelper || !this.radiusAxisHelper) {
                             return Number.NaN;
                         }
-                        return this.valueToPosition(this.getDatumPositionValues(datum, this._angleField), this._stack ? this.getDatumPositionValues(datum, this._innerRadiusField) : this.radiusScale.domain()[0]).x;
+                        return this.valueToPosition(this.getDatumPositionValues(datum, this._angleField), this.getStack()
+                            ? this.getDatumPositionValues(datum, this._innerRadiusField)
+                            : this.radiusScale.domain()[0]).x;
                     },
                     y1: (datum) => {
                         if (!datum || !this.angleAxisHelper || !this.radiusAxisHelper) {
                             return Number.NaN;
                         }
-                        const value = this.valueToPosition(this.getDatumPositionValues(datum, this._angleField), this._stack ? this.getDatumPositionValues(datum, this._innerRadiusField) : this.radiusScale.domain()[0]).y;
+                        const value = this.valueToPosition(this.getDatumPositionValues(datum, this._angleField), this.getStack()
+                            ? this.getDatumPositionValues(datum, this._innerRadiusField)
+                            : this.radiusScale.domain()[0]).y;
                         return value;
                     },
                     fill: this.getColorAttribute(),
@@ -75145,13 +75208,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class ProgressLikeSeries extends PolarSeries {
         constructor() {
             super(...arguments);
-            this._supportStack = true;
             this._arcGroupMark = null;
             this._getAngleValueStart = (datum) => {
                 const axis = this._getAngleAxis();
                 const { tickMask } = this._spec;
                 if ((tickMask === null || tickMask === void 0 ? void 0 : tickMask.forceAlign) && this._isTickMaskVisible(axis)) {
-                    const field = this._stack ? STACK_FIELD_START : SEGMENT_FIELD_START;
+                    const field = this.getStack() ? STACK_FIELD_START : SEGMENT_FIELD_START;
                     const originValue = datum[field];
                     const subTickData = this._getAngleAxisSubTickData(axis);
                     const step = subTickData[1].value - subTickData[0].value;
@@ -75181,7 +75243,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const axis = this._getAngleAxis();
                 const { tickMask } = this._spec;
                 if ((tickMask === null || tickMask === void 0 ? void 0 : tickMask.forceAlign) && this._isTickMaskVisible(axis)) {
-                    const field = this._stack ? STACK_FIELD_END : this._angleField[0];
+                    const field = this.getStack() ? STACK_FIELD_END : this._angleField[0];
                     const originValue = datum[field];
                     const subTickData = this._getAngleAxisSubTickData(axis);
                     const step = subTickData[1].value - subTickData[0].value;
@@ -75243,7 +75305,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return newStyle;
         }
         _getAngleValueStartWithoutMask(datum) {
-            if (this._stack) {
+            if (this.getStack()) {
                 const value = valueInScaleRange(this.angleAxisHelper.dataToPosition([datum[STACK_FIELD_START]]), this.angleAxisHelper.getScale(0));
                 if (isValidNumber$1(value)) {
                     return value;
@@ -75252,7 +75314,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._startAngle;
         }
         _getAngleValueEndWithoutMask(datum) {
-            if (this._stack) {
+            if (this.getStack()) {
                 const value = valueInScaleRange(this.angleAxisHelper.dataToPosition([datum[STACK_FIELD_END]]), this.angleAxisHelper.getScale(0));
                 if (isValidNumber$1(value)) {
                     return value;
@@ -75388,10 +75450,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }));
     };
 
+    class CircularProgressSeriesSpecTransformer extends BaseSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = true;
+        }
+    }
+
     class CircularProgressSeries extends ProgressLikeSeries {
         constructor() {
             super(...arguments);
             this.type = exports.SeriesTypeEnum.circularProgress;
+            this.transformerConstructor = CircularProgressSeriesSpecTransformer;
             this._progressMark = null;
             this._trackMark = null;
             this._getRadiusValueStart = (datum) => {
@@ -75499,13 +75569,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     x: () => this.angleAxisHelper.center().x,
                     y: () => this.angleAxisHelper.center().y,
                     startAngle: () => {
-                        const fieldName = this._stack ? STACK_FIELD_START : this._angleField[0];
+                        const fieldName = this.getStack() ? STACK_FIELD_START : this._angleField[0];
                         const scale = this.angleAxisHelper.getScale(0);
                         const domain = scale.domain();
                         return this._getAngleValueStart({ [fieldName]: domain[0] });
                     },
                     endAngle: () => {
-                        const fieldName = this._stack ? STACK_FIELD_END : this._angleField[0];
+                        const fieldName = this.getStack() ? STACK_FIELD_END : this._angleField[0];
                         const scale = this.angleAxisHelper.getScale(0);
                         const domain = scale.domain();
                         return this._getAngleValueEnd({ [fieldName]: domain[domain.length - 1] });
@@ -75530,6 +75600,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     CircularProgressSeries.type = exports.SeriesTypeEnum.circularProgress;
     CircularProgressSeries.mark = circularProgressSeriesMark;
+    CircularProgressSeries.transformerConstructor = CircularProgressSeriesSpecTransformer;
     const registerCircularProgressSeries = () => {
         registerArcMark();
         registerProgressLikeAnimation();
@@ -78640,6 +78711,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _buildMarkAttributeContext() {
             super._buildMarkAttributeContext();
             this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
+            this._markAttributeContext.getPoints = this.getPoints.bind(this);
+            this._markAttributeContext.isTransformLevel = this.isTransformLevel.bind(this);
         }
         valueToPosition(category) {
             var _a, _b, _c;
@@ -83011,14 +83084,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
     };
 
+    class GaugePointerSeriesSpecTransformer extends BaseSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = false;
+        }
+    }
+
     class GaugePointerSeries extends ProgressLikeSeries {
         constructor() {
             super(...arguments);
             this.type = exports.SeriesTypeEnum.gaugePointer;
+            this.transformerConstructor = GaugePointerSeriesSpecTransformer;
             this._pinMark = null;
             this._pointerMark = null;
             this._pinBackgroundMark = null;
-            this._stack = false;
         }
         setAttrFromSpec() {
             var _a;
@@ -83173,6 +83253,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     GaugePointerSeries.type = exports.SeriesTypeEnum.gaugePointer;
     GaugePointerSeries.mark = gaugePointerSeriesMark;
+    GaugePointerSeries.transformerConstructor = GaugePointerSeriesSpecTransformer;
     const registerGaugePointerSeries = () => {
         registerPathMark();
         registerRectMark();
@@ -83181,6 +83262,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class GaugeSeriesSpecTransformer extends BaseSeriesSpecTransformer {
+        constructor() {
+            super(...arguments);
+            this._supportStack = false;
+        }
         _transformLabelSpec(spec) {
             this._addMarkLabelSpec(spec, "segment");
         }
@@ -83193,7 +83278,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.transformerConstructor = GaugeSeriesSpecTransformer;
             this._segmentMark = null;
             this._trackMark = null;
-            this._stack = false;
             this._padAngle = 0;
         }
         setAttrFromSpec() {
@@ -85563,6 +85647,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         skipTheme: true
                     });
                     gridMark.setZIndex((_f = (_d = (_c = (_b = this._spec.grid) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.zIndex) !== null && _d !== void 0 ? _d : (_e = this._spec.grid) === null || _e === void 0 ? void 0 : _e.zIndex) !== null && _f !== void 0 ? _f : exports.LayoutZIndex.Axis_Grid);
+                    gridMark.setInteractive(false);
                     this._marks.addMark(gridMark);
                     this._gridMark = gridMark;
                 }
@@ -85723,7 +85808,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return result;
         }
         _delegateAxisContainerEvent(component) {
-            component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
+            if (component.listenerCount('*') === 0) {
+                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
+            }
         }
         _getAxisAttributes() {
             const spec = this._spec;
@@ -88866,6 +88953,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             newSpec.style = mergeSpec({}, this._theme, newSpec.style);
             return { spec: newSpec, theme };
         }
+        _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            super._transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo);
+            spec.visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
+            spec.activeType = getTooltipActualActiveType(spec);
+            spec.renderMode =
+                (_b = spec.renderMode) !== null && _b !== void 0 ? _b : (isMiniAppLikeMode(this._option.mode) || !isTrueBrowser(this._option.mode) ? 'canvas' : 'html');
+            spec.trigger = (_c = spec.trigger) !== null && _c !== void 0 ? _c : 'hover';
+            spec.className = (_d = spec.className) !== null && _d !== void 0 ? _d : TOOLTIP_EL_CLASS_NAME;
+            spec.enterable = (_e = spec.enterable) !== null && _e !== void 0 ? _e : false;
+            spec.transitionDuration = (_f = spec.transitionDuration) !== null && _f !== void 0 ? _f : 150;
+            spec.triggerOff = (_g = spec.triggerOff) !== null && _g !== void 0 ? _g : spec.trigger;
+            spec.confine = (_h = spec.confine) !== null && _h !== void 0 ? _h : spec.renderMode === 'canvas';
+            if (isValid$3(spec.mark)) {
+                spec.mark.activeType = 'mark';
+            }
+            if (isValid$3(spec.dimension)) {
+                spec.dimension.activeType = 'dimension';
+            }
+            if (isValid$3(spec.parentElement)) {
+                if (isString$1(spec.parentElement)) {
+                    spec.parentElement = (_j = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _j === void 0 ? void 0 : _j.getElementById(spec.parentElement);
+                }
+            }
+            else if (isTrueBrowser(this._option.mode)) {
+                spec.parentElement = domDocument === null || domDocument === void 0 ? void 0 : domDocument.body;
+            }
+        }
     }
 
     class Tooltip extends BaseComponent {
@@ -88880,6 +88995,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._alwaysShow = false;
             this._eventList = [];
             this._isTooltipShown = false;
+            this._clickLock = false;
             this._mountEvent = (eType, query, callback) => {
                 this.event.on(eType, query, callback);
                 this._eventList.push({
@@ -88888,14 +89004,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             };
             this._getMouseOutHandler = (needPointerDetection) => (params) => {
-                var _a, _b;
+                var _a, _b, _c;
                 if (this._alwaysShow) {
                     return;
                 }
                 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;
                 }
-                const browserEnv = isTrueBrowser(this._option.mode);
+                const browserEnv = isTrueBrowser((_c = this._option) === null || _c === void 0 ? void 0 : _c.mode);
                 const { clientX, clientY } = params.event;
                 if (browserEnv && this._isPointerOnTooltip(params)) {
                     return;
@@ -88915,7 +89031,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._cacheParams = undefined;
                 }
             };
-            this._handleMouseMove = (params) => {
+            this._getMouseMoveHandler = (isClick) => (params) => {
                 if (!this.tooltipHandler) {
                     this._initHandler();
                 }
@@ -88928,30 +89044,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._isPointerOnTooltip(params)) {
                     return;
                 }
+                if (!isClick && this._clickLock) {
+                    return;
+                }
                 const mouseEventData = this._getMouseEventData(params);
                 const { tooltipInfo: { dimension: dimensionInfo }, ignore: { mark: ignoreMark, dimension: ignoreDimension } } = mouseEventData;
                 let markTooltipSuccess = false;
                 let dimensionTooltipSuccess = false;
-                markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params);
+                markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick);
                 if (!markTooltipSuccess) {
-                    dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params);
+                    dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
                 }
                 if (!markTooltipSuccess && !dimensionTooltipSuccess && !isEmptyPos(params)) {
                     if (ignoreMark && isMarkInfo(this._cacheInfo)) {
-                        markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params, true);
+                        markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick, true);
                     }
                     else if (ignoreDimension && isDimensionInfo(this._cacheInfo)) {
-                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, true);
+                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick, true);
                     }
                     else if (isValid$3(dimensionInfo)) {
-                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params);
+                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
                     }
                 }
                 if (!markTooltipSuccess && (!dimensionTooltipSuccess || isNil$3(dimensionInfo))) {
                     this._handleChartMouseOut(params);
+                    if (isClick && this._clickLock) {
+                        this._clickLock = false;
+                    }
                 }
             };
-            this._showTooltipByMouseEvent = (activeType, mouseEventData, params, useCache) => {
+            this._showTooltipByMouseEvent = (activeType, mouseEventData, params, isClick, useCache) => {
+                var _a;
                 const processor = this._processor[activeType];
                 if (!processor.shouldHandleTooltip(params, {
                     tooltipInfo: mouseEventData.tooltipInfo[activeType],
@@ -88974,9 +89097,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 if (success) {
                     this._isTooltipShown = true;
+                    if (isClick && this._spec.lockAfterClick && !this._clickLock) {
+                        this._clickLock = true;
+                    }
                 }
-                const vchart = this._option.globalInstance;
-                if (success && VChart.globalConfig.uniqueTooltip) {
+                const vchart = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance;
+                if (success && VChart.globalConfig.uniqueTooltip && vchart) {
                     VChart.hideTooltip(vchart.id);
                 }
                 return success;
@@ -89106,18 +89232,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._option.disableTriggerEvent) {
                 return;
             }
-            const trigger = (_a = this._spec.trigger) !== null && _a !== void 0 ? _a : 'hover';
+            const trigger = array((_a = this._spec.trigger) !== null && _a !== void 0 ? _a : 'hover');
             const mode = this._option.mode;
-            if (trigger === 'hover') {
-                this._mountEvent('pointermove', { source: 'chart' }, this._handleMouseMove);
+            if (trigger.includes('hover')) {
+                this._mountEvent('pointermove', { source: 'chart' }, this._getMouseMoveHandler(false));
                 if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {
-                    this._mountEvent('pointerdown', { source: 'chart' }, this._handleMouseMove);
+                    this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
                     this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
                 }
                 this._mountEvent('pointerout', { source: 'canvas' }, this._getMouseOutHandler(false));
             }
-            else if (trigger === 'click') {
-                this._mountEvent('pointertap', { source: 'chart' }, this._handleMouseMove);
+            if (trigger.includes('click')) {
+                this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
                 this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
             }
         }
@@ -89131,42 +89257,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._initHandler();
             }
         }
-        setAttrFromSpec() {
-            var _a;
-            super.setAttrFromSpec();
-            const userSpec = this._spec;
-            this._spec = Object.assign(Object.assign({}, userSpec), { visible: isValid$3(userSpec.visible) ? userSpec.visible : true, activeType: getTooltipActualActiveType(userSpec), renderMode: 'html', trigger: isValid$3(userSpec.trigger) ? userSpec.trigger : 'hover', className: isValid$3(userSpec.className) ? userSpec.className : TOOLTIP_EL_CLASS_NAME, enterable: isValid$3(userSpec.enterable) ? userSpec.enterable : false, transitionDuration: isValid$3(userSpec.transitionDuration) ? userSpec.transitionDuration : 150 });
-            this._spec.triggerOff = isValid$3(userSpec.triggerOff) ? userSpec.triggerOff : this._spec.trigger;
-            if (isValid$3(userSpec.renderMode)) {
-                this._spec.renderMode = userSpec.renderMode;
-            }
-            else if (isMiniAppLikeMode(this._option.mode) || !isTrueBrowser(this._option.mode)) {
-                this._spec.renderMode = 'canvas';
-            }
-            if (isValid$3(userSpec.mark)) {
-                this._spec.mark = Object.assign(Object.assign({}, cloneDeep(userSpec.mark)), { activeType: 'mark' });
-            }
-            if (isValid$3(userSpec.dimension)) {
-                this._spec.dimension = Object.assign(Object.assign({}, cloneDeep(userSpec.dimension)), { activeType: 'dimension' });
-            }
-            if (isValid$3(userSpec.parentElement)) {
-                if (isString$1(userSpec.parentElement)) {
-                    this._spec.parentElement = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(userSpec.parentElement);
-                }
-                else {
-                    this._spec.parentElement = userSpec.parentElement;
-                }
-            }
-            else if (isTrueBrowser(this._option.mode)) {
-                this._spec.parentElement = domDocument === null || domDocument === void 0 ? void 0 : domDocument.body;
-            }
-            if (isValid$3(userSpec.confine)) {
-                this._spec.confine = userSpec.confine;
-            }
-            else {
-                this._spec.confine = this._spec.renderMode === 'canvas';
-            }
-        }
         showTooltip(datum, options) {
             var _a;
             if (!this.tooltipHandler) {
@@ -89231,7 +89321,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 prevParams.datum === nextParams.datum);
         }
         _isPointerInChart(point) {
-            const globalInstance = this._option.globalInstance;
+            var _a;
+            const globalInstance = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance;
+            if (!globalInstance) {
+                return false;
+            }
             const chart = globalInstance.getChart();
             if (!chart) {
                 return false;
@@ -89339,7 +89433,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.showDefault = false;
                 this._layoutCrosshair(x, y);
                 const components = this._getNeedClearVRenderComponents();
-                this._hasActive = components.some(comp => comp && comp.attribute.visible);
+                this._hasActive = components.some(comp => comp && comp.attribute.visible !== false);
             };
             this._handleClickInEvent = (params) => {
                 this._handleIn(params);
@@ -89830,7 +89924,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const positionAttribute = layoutVerticalCrosshair(this._xHair, crosshairInfo, bandWidth, offsetWidth);
                 this._updateCrosshair('x', type, positionAttribute);
                 if (top.visible) {
-                    const updateAttrs = Object.assign(Object.assign(Object.assign({ x: x + bandWidth / 2, y: topPos }, top), this._xHair.label), { textStyle: Object.assign(Object.assign({}, (_a = this._xHair.label) === null || _a === void 0 ? void 0 : _a.textStyle), { textAlign: 'center', textBaseline: 'bottom' }), zIndex: this.labelZIndex });
+                    const updateAttrs = Object.assign(Object.assign(Object.assign({ x: x + bandWidth / 2, y: topPos }, top), this._xHair.label), { textStyle: Object.assign(Object.assign({}, (_a = this._xHair.label) === null || _a === void 0 ? void 0 : _a.textStyle), { textAlign: 'center', textBaseline: 'bottom' }), zIndex: this.labelZIndex, visible: true });
                     this._updateCrosshairLabel(this._xTopLabel, updateAttrs, label => {
                         label.name = 'crosshair-x-top-label';
                         this._xTopLabel = label;
@@ -89840,7 +89934,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._xTopLabel && this._xTopLabel.hideAll();
                 }
                 if (bottom.visible) {
-                    const updateAttrs = Object.assign(Object.assign(Object.assign({ x: x + bandWidth / 2, y: topPos + height }, bottom), this._xHair.label), { textStyle: Object.assign(Object.assign({}, (_b = this._xHair.label) === null || _b === void 0 ? void 0 : _b.textStyle), { textAlign: 'center', textBaseline: 'top' }), zIndex: this.labelZIndex });
+                    const updateAttrs = Object.assign(Object.assign(Object.assign({ x: x + bandWidth / 2, y: topPos + height }, bottom), this._xHair.label), { textStyle: Object.assign(Object.assign({}, (_b = this._xHair.label) === null || _b === void 0 ? void 0 : _b.textStyle), { textAlign: 'center', textBaseline: 'top' }), zIndex: this.labelZIndex, visible: true });
                     this._updateCrosshairLabel(this._xBottomLabel, updateAttrs, label => {
                         label.name = 'crosshair-x-bottom-label';
                         this._xBottomLabel = label;
@@ -89907,10 +90001,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else {
                 const style = dim === 'x' ? this._xHair.style : this._yHair.style;
                 if (type === 'line') {
-                    crosshair = new LineCrosshair(Object.assign(Object.assign({}, attributes), { lineStyle: style, zIndex: this.gridZIndex + 1, disableTriggerEvent: this._option.disableTriggerEvent }));
+                    crosshair = new LineCrosshair(Object.assign(Object.assign({}, attributes), { lineStyle: style, zIndex: this.gridZIndex + 1, disableTriggerEvent: this._option.disableTriggerEvent, pickable: false }));
                 }
                 else if (type === 'rect') {
-                    crosshair = new RectCrosshair(Object.assign(Object.assign({}, attributes), { rectStyle: style, zIndex: this.gridZIndex, disableTriggerEvent: this._option.disableTriggerEvent }));
+                    crosshair = new RectCrosshair(Object.assign(Object.assign({}, attributes), { rectStyle: style, zIndex: this.gridZIndex, disableTriggerEvent: this._option.disableTriggerEvent, pickable: false }));
                 }
                 container === null || container === void 0 ? void 0 : container.add(crosshair);
                 if (dim === 'x') {
@@ -90287,10 +90381,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     let crosshair;
                     if (crosshairType === 'line') {
-                        crosshair = new LineCrosshair(Object.assign(Object.assign({}, positionAttrs), { lineStyle: this._angleHair.style, zIndex: this.gridZIndex }));
+                        crosshair = new LineCrosshair(Object.assign(Object.assign({}, positionAttrs), { lineStyle: this._angleHair.style, zIndex: this.gridZIndex, pickable: false }));
                     }
                     else if (crosshairType === 'sector') {
-                        crosshair = new SectorCrosshair(Object.assign(Object.assign({}, positionAttrs), { sectorStyle: this._angleHair.style, zIndex: this.gridZIndex }));
+                        crosshair = new SectorCrosshair(Object.assign(Object.assign({}, positionAttrs), { sectorStyle: this._angleHair.style, zIndex: this.gridZIndex, pickable: false }));
                     }
                     this._angleCrosshair = crosshair;
                     container.add(crosshair);
@@ -90394,13 +90488,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (newDomain.length === 0) {
             return [];
         }
+        const domainMap = {};
+        newDomain.forEach(d => {
+            if (!domainMap[d]) {
+                domainMap[d] = 1;
+            }
+        });
         let filter = null;
         if (isContinuous()) {
             filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= newDomain[1];
         }
         else {
             filter = (d) => {
-                return newDomain.indexOf(d[datumField] + '') >= 0 || newDomain.indexOf(d[datumField]) >= 0;
+                return domainMap[d[datumField] + ''] || domainMap[d[datumField]];
             };
         }
         return data.filter(filter);
@@ -90445,13 +90545,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class DataFilterBaseComponent extends BaseComponent {
-        get orient() {
-            return this._orient;
+        get relatedAxisComponent() {
+            return this._relatedAxisComponent;
         }
         setStartAndEnd(start, end, rangeMode = ['percent', 'percent']) {
             const [startMode = 'percent', endMode = 'percent'] = rangeMode;
-            const startPercent = (startMode === 'percent' ? start : this._dataToStatePoint(start));
-            const endPercent = (endMode === 'percent' ? end : this._dataToStatePoint(end));
+            const startPercent = (startMode === 'percent' ? start : this.dataToStatePoint(start));
+            const endPercent = (endMode === 'percent' ? end : this.dataToStatePoint(end));
             this._handleChange(startPercent, endPercent, true);
         }
         enableInteraction() {
@@ -90477,7 +90577,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _handleChange(start, end, updateComponent) {
             var _a, _b;
             const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
-            if (zoomLock || end - start < this._minSpan || end - start > this._maxSpan) {
+            if (zoomLock) {
                 this._shouldChange = false;
             }
         }
@@ -90751,6 +90851,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._handleChange(this._start, this._end, true);
         }
         _computeDomainOfStateScale(isContinuous) {
+            if (this._spec.customDomain) {
+                return this._spec.customDomain;
+            }
             const domain = this._data.getLatestData().map((d) => d[this._stateField]);
             if (isContinuous) {
                 const domainNum = domain.map((n) => n * 1);
@@ -90873,6 +90976,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _statePointToData(state) {
             const scale = this._stateScale;
+            const domain = scale.domain();
+            if (isContinuous(scale.type)) {
+                if (this._isReverse()) {
+                    return domain[0] + (domain[1] - domain[0]) * (1 - state);
+                }
+                return domain[0] + (domain[1] - domain[0]) * state;
+            }
             let range = scale.range();
             if (this._isReverse()) {
                 range = range.slice().reverse();
@@ -90880,7 +90990,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const posInRange = range[0] + (range[1] - range[0]) * state;
             return scale.invert(posInRange);
         }
-        _dataToStatePoint(data) {
+        dataToStatePoint(data) {
             const scale = this._stateScale;
             const pos = scale.scale(data);
             let range = scale.range();
@@ -90903,17 +91013,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._spec.rangeMode) {
                 const [startMode, endMode] = this._spec.rangeMode;
                 if (this._modeCheck('start', startMode) && this._modeCheck('end', endMode)) {
-                    start = startMode === 'percent' ? this._spec.start : this._dataToStatePoint(this._spec.startValue);
-                    end = endMode === 'percent' ? this._spec.end : this._dataToStatePoint(this._spec.endValue);
+                    start = startMode === 'percent' ? this._spec.start : this.dataToStatePoint(this._spec.startValue);
+                    end = endMode === 'percent' ? this._spec.end : this.dataToStatePoint(this._spec.endValue);
                 }
             }
             else {
                 start = this._spec.start
                     ? this._spec.start
                     : this._spec.startValue
-                        ? this._dataToStatePoint(this._spec.startValue)
+                        ? this.dataToStatePoint(this._spec.startValue)
                         : 0;
-                end = this._spec.end ? this._spec.end : this._spec.endValue ? this._dataToStatePoint(this._spec.endValue) : 1;
+                end = this._spec.end ? this._spec.end : this._spec.endValue ? this.dataToStatePoint(this._spec.endValue) : 1;
             }
             this._startValue = this._statePointToData(start);
             this._endValue = this._statePointToData(end);
@@ -91221,6 +91331,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutZIndex = exports.LayoutZIndex.DataZoom;
             this.layoutLevel = exports.LayoutLevel.DataZoom;
             this.layoutType = 'region-relative';
+            this._isReverseCache = false;
             this._dataToPositionX = (datum) => {
                 const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
                 const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
@@ -91288,6 +91399,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onLayoutEnd(ctx) {
             this._updateScaleRange();
+            if (this._isReverse() && !this._isReverseCache) {
+                this._isReverseCache = this._isReverse();
+                this.effect.onZoomChange();
+            }
             if (this._cacheVisibility !== false) {
                 super.onLayoutEnd(ctx);
             }
@@ -91302,7 +91417,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _updateScaleRange() {
             var _a, _b;
-            const handlerSize = (this._startHandlerSize + this._endHandlerSize) / 2;
+            const handlerSize = this._startHandlerSize + this._endHandlerSize;
             if (!this._stateScale || !this._valueScale) {
                 return;
             }
@@ -91310,19 +91425,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const defaultSize = this._isHorizontal
                 ? this.getLayoutRect().width - handlerSize
                 : this.getLayoutRect().height - handlerSize;
-            const defaultRange = (_b = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getScale().range()) !== null && _b !== void 0 ? _b : [0, defaultSize];
+            const defaultRange = (_b = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getScale().range()) !== null && _b !== void 0 ? _b : [
+                this._startHandlerSize / 2,
+                defaultSize + this._startHandlerSize / 2
+            ];
             if (this._isHorizontal) {
-                stateScaleRange = this._visible ? [0, this._computeWidth() - handlerSize] : defaultRange;
+                stateScaleRange = this._visible
+                    ? [this._startHandlerSize / 2, this._computeWidth() - handlerSize + this._startHandlerSize / 2]
+                    : defaultRange;
                 this._stateScale.range(stateScaleRange);
                 this._valueScale.range([this._computeHeight() - this._middleHandlerSize, 0]);
             }
             else if (this.layoutOrient === 'left') {
-                stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : defaultRange;
+                stateScaleRange = this._visible
+                    ? [this._startHandlerSize / 2, this._computeHeight() - handlerSize + this._startHandlerSize / 2]
+                    : defaultRange;
                 this._stateScale.range(stateScaleRange);
                 this._valueScale.range([this._computeWidth() - this._middleHandlerSize, 0]);
             }
             else {
-                stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : defaultRange;
+                stateScaleRange = this._visible
+                    ? [this._startHandlerSize / 2, this._computeHeight() - handlerSize + this._startHandlerSize / 2]
+                    : defaultRange;
                 this._stateScale.range(stateScaleRange);
                 this._valueScale.range([0, this._computeWidth() - this._middleHandlerSize]);
             }
@@ -91400,7 +91524,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, orient: this._orient, size: {
                     width: this.getLayoutRect().width,
                     height: this.getLayoutRect().height
-                }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$3(spec.delayType) ? (_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY }, this._getComponentAttrs());
+                }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$3(spec.delayType) ? (_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance }, this._getComponentAttrs());
         }
         _createOrUpdateComponent() {
             if (this._visible) {
@@ -91438,7 +91562,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 this._start = start;
                 this._end = end;
-                const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end), tag);
+                const startValue = this._statePointToData(start);
+                const endValue = this._statePointToData(end);
+                const hasChange = isFunction$1(this._spec.updateDataAfterChange)
+                    ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
+                    : this._handleStateChange(startValue, endValue, tag);
                 if (hasChange) {
                     this.event.emit(exports.ChartEvent.dataZoomChange, {
                         model: this,
@@ -91514,6 +91642,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getNeedClearVRenderComponents() {
             return [this._component];
         }
+        clear() {
+            if (this._component) {
+                const container = this.getContainer();
+                this._component.removeAllChild();
+                if (container) {
+                    container.removeChild(this._component);
+                }
+                this._component = null;
+            }
+            super.clear();
+        }
     }
     DataZoom.type = ComponentTypeEnum.dataZoom;
     DataZoom.transformerConstructor = DataZoomSpecTransformer;
@@ -91632,7 +91771,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 this._start = start;
                 this._end = end;
-                const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end));
+                const startValue = this._statePointToData(start);
+                const endValue = this._statePointToData(end);
+                const hasChange = isFunction$1(this._spec.updateDataAfterChange)
+                    ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
+                    : this._handleStateChange(this._statePointToData(start), this._statePointToData(end));
                 if (hasChange) {
                     this.event.emit(exports.ChartEvent.scrollBarChange, {
                         model: this,
@@ -93705,6 +93848,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getNeedClearVRenderComponents() {
             return [];
         }
+        _delegateLabelEvent(component) {
+            if (component.listenerCount('*') === 0) {
+                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
+            }
+        }
     }
     BaseLabelComponent.type = ComponentTypeEnum.label;
 
@@ -93814,23 +93962,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 this.event.off(exports.VGRAMMAR_HOOK_EVENT.AFTER_MARK_RENDER_END, enableAnimation);
             };
-            this.event.on('afterElementEncode', eventParams => {
-                var _a;
-                const mark = eventParams.item;
-                if (this._option.getChart().getLayoutTag() === false && ((_a = mark.getContext()) === null || _a === void 0 ? void 0 : _a.model) === this) {
-                    this._delegateLabelEvent(mark.getGroupGraphicItem());
+        }
+        afterCompile() {
+            this._labelComponentMap.forEach((info, component) => {
+                const product = component.getProduct();
+                if (product) {
+                    product.addEventListener(exports.VGRAMMAR_HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
+                        if (this._isLayout === false) {
+                            this._delegateLabelEvent(product.getGroupGraphicItem());
+                        }
+                    });
                 }
             });
         }
-        _delegateLabelEvent(component) {
-            const textNodes = component === null || component === void 0 ? void 0 : component.findAll(node => node.type === 'text', true).filter(text => !text.__vchart_event);
-            if (textNodes && textNodes.length > 0) {
-                textNodes.forEach(text => {
-                    text.__vchart_event = true;
-                    text.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type, text, text.attribute.data)));
-                });
-            }
-        }
         _initTextMark() {
             if (!this._labelInfoMap) {
                 this._labelInfoMap = new Map();
@@ -94083,6 +94227,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._marks.addMark(component);
             }
         }
+        afterCompile() {
+            this._marks.forEach((componentMark, index) => {
+                const product = componentMark.getProduct();
+                if (product) {
+                    product.addEventListener(exports.VGRAMMAR_HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
+                        if (this._isLayout === false) {
+                            this._delegateLabelEvent(product.getGroupGraphicItem());
+                        }
+                    });
+                }
+            });
+        }
         updateLayoutAttribute() {
             super.updateLayoutAttribute();
             const series = this._getSeries();
@@ -94342,6 +94498,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._needInitOutState = true;
             this._cacheInteractiveRangeAttrs = [];
             this._needDisablePickable = false;
+            this._releatedAxes = [];
+            this._regionAxisMap = {};
+            this._axisDataZoomMap = {};
+            this._zoomRecord = [];
         }
         init() {
             const inBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.inBrush);
@@ -94374,13 +94534,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initEvent();
             this._bindRegions();
             this._bindLinkedSeries();
+            this._initRegionAxisMap();
+            this._initAxisDataZoomMap();
             this._initNeedOperatedItem();
         }
         _extendDataInBrush(elementsMap) {
             const data = [];
             for (const brushName in elementsMap) {
                 for (const elementKey in elementsMap[brushName]) {
-                    data.push(elementsMap[brushName][elementKey].data[0]);
+                    data.push(Object.assign({}, elementsMap[brushName][elementKey].data[0]));
                 }
             }
             return data;
@@ -94440,9 +94602,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._needInitOutState = false;
                 this._needDisablePickable = true;
                 this._handleBrushChange(exports.ChartEvent.brushChange, region, e);
+                this._emitEvent(exports.ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.moving, (e) => {
                 this._handleBrushChange(exports.ChartEvent.brushChange, region, e);
+                this._emitEvent(exports.ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.brushClear, (e) => {
                 this._initMarkBrushState(componentIndex, '');
@@ -94450,21 +94614,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._needDisablePickable = false;
                 this._handleBrushChange(exports.ChartEvent.brushChange, region, e);
                 this._handleBrushChange(exports.ChartEvent.brushClear, region, e);
+                this._emitEvent(exports.ChartEvent.brushChange, region);
+                this._emitEvent(exports.ChartEvent.brushClear, region);
             });
             brush.addEventListener(IOperateType.drawEnd, (e) => {
                 this._needInitOutState = true;
                 this._needDisablePickable = false;
+                const { operateMask } = e.detail;
                 this._handleBrushChange(exports.ChartEvent.brushEnd, region, e);
+                this._setAxisAndDataZoom(operateMask, region);
+                this._emitEvent(exports.ChartEvent.brushEnd, region);
             });
             brush.addEventListener(IOperateType.moveEnd, (e) => {
+                const { operateMask } = e.detail;
                 this._handleBrushChange(exports.ChartEvent.brushEnd, region, e);
+                this._setAxisAndDataZoom(operateMask, region);
+                this._emitEvent(exports.ChartEvent.brushEnd, region);
             });
         }
         _handleBrushChange(eventType, region, e) {
             const { operateMask } = e.detail;
             this._reconfigItem(operateMask, region);
             this._reconfigLinkedItem(operateMask, region);
-            this._emitEvent(eventType, region);
         }
         _emitEvent(eventType, region) {
             this.event.emit(eventType, {
@@ -94479,7 +94650,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     inBrushElementsMap: this._inBrushElementsMap,
                     outOfBrushElementsMap: this._outOfBrushElementsMap,
                     linkedInBrushElementsMap: this._linkedInBrushElementsMap,
-                    linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap
+                    linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap,
+                    zoomRecord: this._zoomRecord
                 }
             });
         }
@@ -94638,6 +94810,60 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return brushMask.globalAABBBounds.intersects(item.globalAABBBounds);
         }
+        _stateClamp(state) {
+            return Math.min(Math.max(0, state), 1);
+        }
+        _setAxisAndDataZoom(operateMask, region) {
+            var _a;
+            this._zoomRecord = [];
+            if (this._spec.zoomAfterBrush) {
+                const operateMaskBounds = operateMask.AABBBounds;
+                (_a = this._regionAxisMap['region_' + region.id]) === null || _a === void 0 ? void 0 : _a.forEach(axis => {
+                    var _a, _b;
+                    const isHorizontal = axis.layoutOrient === 'bottom' || axis.layoutOrient === 'top';
+                    const axisRangeExpand = (_a = this._spec.axisRangeExpand) !== null && _a !== void 0 ? _a : 0;
+                    const { x1, x2, y1, y2 } = operateMaskBounds;
+                    const regionStartAttr = isHorizontal ? 'x' : 'y';
+                    const boundsStart = isHorizontal ? x1 : y1;
+                    const boundsEnd = isHorizontal ? x2 : y2;
+                    if (this._axisDataZoomMap[axis.id]) {
+                        const dataZoom = this._axisDataZoomMap[axis.id];
+                        const releatedAxis = dataZoom.relatedAxisComponent;
+                        const startValue = releatedAxis
+                            .getScale()
+                            .invert(boundsStart - region.getLayoutStartPoint()[regionStartAttr]);
+                        const endValue = releatedAxis.getScale().invert(boundsEnd - region.getLayoutStartPoint()[regionStartAttr]);
+                        const startPercent = dataZoom.dataToStatePoint(startValue);
+                        const endPercent = dataZoom.dataToStatePoint(endValue);
+                        const newStartPercent = this._stateClamp(startPercent - axisRangeExpand);
+                        const newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
+                        dataZoom.setStartAndEnd(newStartPercent, newEndPercent, ['percent', 'percent']);
+                        this._zoomRecord.push({
+                            operateComponent: dataZoom,
+                            start: newStartPercent,
+                            end: newEndPercent
+                        });
+                    }
+                    else {
+                        const range = axis.getScale().range();
+                        const rangeFactor = (_b = axis.getScale().rangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
+                        const startPos = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
+                        const endPos = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
+                        const start = ((startPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const end = ((endPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const newStart = this._stateClamp(start - axisRangeExpand);
+                        const newEnd = this._stateClamp(end + axisRangeExpand);
+                        axis.getScale().rangeFactor([newStart, newEnd]);
+                        axis.effect.scaleUpdate();
+                        this._zoomRecord.push({
+                            operateComponent: axis,
+                            start: newStart,
+                            end: newEnd
+                        });
+                    }
+                });
+            }
+        }
         _bindRegions() {
             if (isValid$3(this._spec.regionId) && isValid$3(this._spec.regionIndex)) {
                 this._relativeRegions = this._option.getAllRegions();
@@ -94650,6 +94876,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._linkedSeries = this._option.getSeriesInUserIdOrIndex(array(this._spec.brushLinkSeriesId), array(this._spec.brushLinkSeriesIndex));
         }
+        _initRegionAxisMap() {
+            if (isValid$3(this._spec.axisId)) {
+                array(this._spec.axisId).forEach((axisId) => {
+                    this._releatedAxes.push(this._option.getComponentByUserId(axisId));
+                });
+            }
+            else if (isValid$3(this._spec.axisIndex)) {
+                array(this._spec.axisIndex).forEach((axisIndex) => {
+                    this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex));
+                });
+            }
+            else {
+                this._releatedAxes = this._option.getComponentsByKey('axes');
+            }
+            this._releatedAxes.forEach((axis) => {
+                axis === null || axis === void 0 ? void 0 : axis.getRegions().forEach((region) => {
+                    if (this._regionAxisMap['region_' + region.id]) {
+                        this._regionAxisMap['region_' + region.id].push(axis);
+                    }
+                    else {
+                        this._regionAxisMap['region_' + region.id] = [axis];
+                    }
+                });
+            });
+        }
+        _initAxisDataZoomMap() {
+            this._option.getComponentsByKey('dataZoom').forEach((dz) => {
+                if (dz.relatedAxisComponent) {
+                    this._axisDataZoomMap[dz.relatedAxisComponent.id] = dz;
+                }
+            });
+        }
         _initNeedOperatedItem() {
             const seriesUserId = this._spec.seriesId;
             const seriesIndex = this._spec.seriesIndex;
@@ -94747,12 +95005,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         clear() {
-            var _a;
             if (this._brushComponents) {
-                (_a = this.getContainer()) === null || _a === void 0 ? void 0 : _a.removeChild(this._brushComponents);
+                const container = this.getContainer();
                 this._brushComponents.forEach(brush => {
                     brush.removeAllChild();
                     brush.releaseBrushEvents();
+                    if (container) {
+                        container.removeChild(brush);
+                    }
                 });
                 this._brushComponents = null;
             }
@@ -94887,6 +95147,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onRender(ctx) {
         }
+        afterCompile() {
+            this.getMarks().forEach(mark => {
+                const product = mark.getProduct();
+                if (product) {
+                    product.addEventListener(exports.VGRAMMAR_HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
+                        if (this._isLayout === false) {
+                            const component = product.getGroupGraphicItem();
+                            if (component.listenerCount('*') === 0) {
+                                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
+                            }
+                        }
+                    });
+                }
+            });
+        }
         _getMarkAttributeContext() {
             return {
                 vchart: this._option.globalInstance,
@@ -95890,9 +96165,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isArray$3(formatter)) {
                 return formatter.map(f => this._formatSingleLine(text, datum, f));
             }
-            else {
-                return this._formatSingleLine(text, datum, formatter);
-            }
+            return this._formatSingleLine(text, datum, formatter);
         }
         _formatSingleLine(text, datum, formatter) {
             let isTemplate;
@@ -95912,18 +96185,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         const value = datum[key.trim()];
                         return typeof value !== 'undefined' ? value : match;
                     }
-                    else {
-                        const parts = key.split(':');
-                        const value = datum[parts.shift()];
-                        const valueFormatter = parts.join(':');
-                        return this._formatSingleText(value, valueFormatter);
-                    }
+                    const parts = key.split(':');
+                    const value = datum[parts.shift()];
+                    const valueFormatter = parts.join(':');
+                    return this._formatSingleText(value, valueFormatter);
                 });
                 return result;
             }
-            else {
-                return this._formatSingleText(text, formatter);
-            }
+            return this._formatSingleText(text, formatter);
         }
         _formatSingleText(text, formatter) {
             const isNumeric = numberSpecifierReg.test(formatter);
@@ -95944,11 +96213,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else if (formatter.includes('%') && this._timeFormatter) {
                 return this._timeFormatter(formatter, text);
             }
-            else {
-                return text;
-            }
+            return text;
         }
-        dispose() {
+        release() {
+            super.release();
             this._format = null;
             this._timeFormatter = null;
             this._numericFormatter = null;
@@ -96032,8 +96300,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerCanvasTooltipHandler,
         registerFormatPlugin,
         registerElementActive,
-        registerElementHighlight,
-        registerElementSelect,
         registerElementActiveByLegend,
         registerElementHighlightByLegend,
         registerElementHighlightByName,