@visactor/vchart 1.8.0 → 1.9.0-alpha.0

package/build/index.js

@@ -105,34 +105,6 @@
         ComponentTypeEnum["poptip"] = "poptip";
         ComponentTypeEnum["customMark"] = "customMark";
     })(ComponentTypeEnum || (ComponentTypeEnum = {}));
-    var SimplifiedComponentTypeEnum;
-    (function (SimplifiedComponentTypeEnum) {
-        SimplifiedComponentTypeEnum["axis"] = "axis";
-        SimplifiedComponentTypeEnum["legend"] = "legend";
-        SimplifiedComponentTypeEnum["crosshair"] = "crosshair";
-    })(SimplifiedComponentTypeEnum || (SimplifiedComponentTypeEnum = {}));
-    const axisComponentTypes = [
-        ComponentTypeEnum.cartesianAxis,
-        ComponentTypeEnum.cartesianBandAxis,
-        ComponentTypeEnum.cartesianLinearAxis,
-        ComponentTypeEnum.cartesianTimeAxis,
-        ComponentTypeEnum.cartesianLogAxis,
-        ComponentTypeEnum.cartesianSymlogAxis,
-        ComponentTypeEnum.polarAxis,
-        ComponentTypeEnum.polarBandAxis,
-        ComponentTypeEnum.polarLinearAxis
-    ];
-    const legendComponentTypes = [
-        ComponentTypeEnum.discreteLegend,
-        ComponentTypeEnum.continuousLegend,
-        ComponentTypeEnum.colorLegend,
-        ComponentTypeEnum.sizeLegend
-    ];
-    const crosshairComponentTypes = [
-        ComponentTypeEnum.crosshair,
-        ComponentTypeEnum.cartesianCrosshair,
-        ComponentTypeEnum.polarCrosshair
-    ];
 
     function getDefaultExportFromCjs (x) {
     	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8513,7 +8485,7 @@
     const EnvContribution = Symbol.for("EnvContribution");
     const VGlobal = Symbol.for("VGlobal");
 
-    var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -8680,7 +8652,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
       }
     };
-    DefaultGlobal = __decorate$1v([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(EnvContribution)), __metadata$18("design:paramtypes", [Object])], DefaultGlobal);
+    DefaultGlobal = __decorate$1w([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(EnvContribution)), __metadata$18("design:paramtypes", [Object])], DefaultGlobal);
 
     const circleThreshold = tau$1 - 1e-8;
     class BoundsContext {
@@ -10108,7 +10080,7 @@
       return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
     }
 
-    var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -10377,9 +10349,9 @@
         return data.str = data.result, data.width += suffixWidth, data;
       }
     };
-    ATextMeasure = __decorate$1u([injectable()], ATextMeasure);
+    ATextMeasure = __decorate$1v([injectable()], ATextMeasure);
 
-    var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -10388,7 +10360,7 @@
     };
     const TextMeasureContribution = Symbol.for("TextMeasureContribution");
     let DefaultTextMeasureContribution = class extends ATextMeasure {};
-    DefaultTextMeasureContribution = __decorate$1t([injectable()], DefaultTextMeasureContribution);
+    DefaultTextMeasureContribution = __decorate$1u([injectable()], DefaultTextMeasureContribution);
 
     const container = new Container();
 
@@ -10811,7 +10783,7 @@
     }
     const canvasAllocate = new DefaultCanvasAllocate();
 
-    var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -10879,7 +10851,7 @@
         }, null != option ? option : {}), textSpec);
       }
     };
-    DefaultGraphicUtil = __decorate$1s([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(TextMeasureContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGraphicUtil);
+    DefaultGraphicUtil = __decorate$1t([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(TextMeasureContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGraphicUtil);
     var TransformMode;
     !function (TransformMode) {
       TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -10937,7 +10909,7 @@
         return this;
       }
     };
-    DefaultTransformUtil = __decorate$1s([injectable(), __metadata$17("design:paramtypes", [])], DefaultTransformUtil);
+    DefaultTransformUtil = __decorate$1t([injectable(), __metadata$17("design:paramtypes", [])], DefaultTransformUtil);
 
     const defaultThemeObj = {
         arc: DefaultArcAttribute,
@@ -15402,7 +15374,7 @@
     const VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
 
     var DefaultLayerService_1,
-      __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15439,7 +15411,7 @@
         var _a;
         this.tryInit();
         let layerMode = this.getRecommendedLayerType(options.layerMode);
-        layerMode = options.canvasId ? "static" : layerMode;
+        layerMode = options.main || options.canvasId ? "static" : layerMode;
         const layerHandler = this.getLayerHandler(layerMode),
           layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({
             main: !1
@@ -15470,9 +15442,9 @@
         return "browser" === this.global.env ? 10 : 0;
       }
     };
-    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1r([injectable(), __metadata$16("design:paramtypes", [])], DefaultLayerService);
+    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1s([injectable(), __metadata$16("design:paramtypes", [])], DefaultLayerService);
 
-    var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15580,7 +15552,7 @@
         return this._handler.getTopLeft(baseWindow);
       }
     };
-    DefaultWindow = __decorate$1q([injectable(), __metadata$15("design:paramtypes", [])], DefaultWindow);
+    DefaultWindow = __decorate$1r([injectable(), __metadata$15("design:paramtypes", [])], DefaultWindow);
 
     var coreModule = new ContainerModule(bind => {
       bind(VGlobal).to(DefaultGlobal).inSingletonScope(), bind(VWindow).to(DefaultWindow), bind(GraphicUtil).to(DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(DefaultLayerService).inSingletonScope();
@@ -18685,6 +18657,41 @@
       return new Pyramid3d(attributes);
     }
 
+    class ShadowRoot extends Group$1 {
+      constructor(graphic) {
+        super({
+          x: 0,
+          y: 0
+        }), this.type = "shadowroot", this.shadowHost = graphic;
+      }
+      addUpdateBoundTag() {
+        super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
+      }
+      addUpdateShapeAndBoundsTag() {
+        super.addUpdateShapeAndBoundsTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
+      }
+      tryUpdateGlobalTransMatrix() {
+        let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+        if (this.shouldUpdateGlobalMatrix()) {
+          const m = this.transMatrix;
+          this._globalTransMatrix ? this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f) : this._globalTransMatrix = m.clone(), this.doUpdateGlobalMatrix(), clearTag && this.clearUpdateGlobalPositionTag();
+        }
+        return this._globalTransMatrix;
+      }
+      doUpdateGlobalMatrix() {
+        if (this.shadowHost) {
+          const parentMatrix = this.shadowHost.globalTransMatrix;
+          this._globalTransMatrix.multiply(parentMatrix.a, parentMatrix.b, parentMatrix.c, parentMatrix.d, parentMatrix.e, parentMatrix.f);
+        }
+      }
+      tryUpdateGlobalAABBBounds() {
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this._AABBBounds.clone(), this.shadowHost && this._globalAABBBounds.transformWithMatrix(this.shadowHost.globalTransMatrix), this._globalAABBBounds;
+      }
+    }
+    function createShadowRoot(graphic) {
+      return new ShadowRoot(graphic);
+    }
+
     class DefaultOuterBorderBoundsContribution {
       updateBounds(attribute, theme, aabbBounds, graphic) {
         const {
@@ -18780,7 +18787,7 @@
     const matrixAllocate = new DefaultMatrixAllocate();
     const mat4Allocate = new DefaultMat4Allocate();
 
-    var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -19367,7 +19374,7 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$1p([injectable(), __param$K(0, inject(GraphicCreator$1)), __metadata$14("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$1q([injectable(), __param$K(0, inject(GraphicCreator$1)), __metadata$14("design:paramtypes", [Object])], DefaultGraphicService);
 
     class GraphicCreator {
       constructor() {
@@ -19607,7 +19614,7 @@
       }), canvasGradient.GetPattern(w + x, h + y, undefined);
     }
 
-    var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -19665,7 +19672,7 @@
         });
       }
     };
-    DefaultBaseInteractiveRenderContribution = __decorate$1o([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$13("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+    DefaultBaseInteractiveRenderContribution = __decorate$1p([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$13("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
     class DefaultBaseTextureRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10;
@@ -20039,6 +20046,13 @@
     }
     const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
 
+    var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
     class DefaultRectRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -20096,7 +20110,7 @@
         }
       }
     }
-    class SplitRectBeforeRenderContribution {
+    let SplitRectBeforeRenderContribution = class {
       constructor() {
         this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
       }
@@ -20106,8 +20120,9 @@
         } = group.attribute;
         Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
       }
-    }
-    class SplitRectAfterRenderContribution {
+    };
+    SplitRectBeforeRenderContribution = __decorate$1o([injectable()], SplitRectBeforeRenderContribution);
+    let SplitRectAfterRenderContribution = class {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
       }
@@ -20125,10 +20140,9 @@
           context.stroke();
         }
       }
-    }
+    };
+    SplitRectAfterRenderContribution = __decorate$1o([injectable()], SplitRectAfterRenderContribution);
     const defaultRectRenderContribution = new DefaultRectRenderContribution();
-    const splitRectBeforeRenderContribution = new SplitRectBeforeRenderContribution();
-    const splitRectAfterRenderContribution = new SplitRectAfterRenderContribution();
     const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -21203,7 +21217,7 @@
       };
     let DefaultCanvasRectRender = class extends BaseRender {
       constructor(rectRenderContribitions) {
-        super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution, splitRectAfterRenderContribution, splitRectBeforeRenderContribution], this.init(rectRenderContribitions);
+        super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(rectRenderContribitions);
       }
       drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a;
@@ -24607,7 +24621,7 @@
 
     let loadRectModule = !1;
     const rectModule = new ContainerModule(bind => {
-      loadRectModule || (loadRectModule = !0, bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, RectRenderContribution));
+      loadRectModule || (loadRectModule = !0, bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(SplitRectAfterRenderContribution).toSelf(), bind(SplitRectBeforeRenderContribution).toSelf(), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, RectRenderContribution));
     });
 
     let loadLineModule = !1;
@@ -25198,6 +25212,10 @@
       graphicCreator.RegisterGraphicCreator("text", createText);
     }
 
+    function registerShadowRootGraphic() {
+      graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
+    }
+
     function registerWrapTextGraphic() {
       graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
     }
@@ -28909,9 +28927,9 @@
     };
     DefaultCanvasGroupPicker = __decorate$Q([injectable()], DefaultCanvasGroupPicker);
 
-    let loaded$p = !1;
+    let loaded$q = !1;
     var canvasModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      loaded$p || (loaded$p = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
+      loaded$q || (loaded$q = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
     });
 
     const canvasPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -29290,10 +29308,10 @@
     const browserEnvModule = new ContainerModule(bind => {
       isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
     });
-    let loaded$o = !1;
+    let loaded$p = !1;
     function loadBrowserEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$o || (loaded$o = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+      loaded$p || (loaded$p = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
     }
 
     var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -29557,9 +29575,9 @@
     };
     DefaultMathPickerService = __decorate$K([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(MathPickerContribution)), __param$r(1, inject(ContributionProvider)), __param$r(1, named(PickItemInterceptor)), __metadata$A("design:paramtypes", [Object, Object])], DefaultMathPickerService);
 
-    let loaded$n = !1;
+    let loaded$o = !1;
     var mathModule = new ContainerModule(bind => {
-      loaded$n || (loaded$n = !0, bindContributionProvider(bind, MathPickerContribution));
+      loaded$o || (loaded$o = !0, bindContributionProvider(bind, MathPickerContribution));
     });
 
     const mathPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -29616,7 +29634,7 @@
         return this.freeCanvasList.length;
       }
       getStaticCanvasCount() {
-        return this.freeCanvasList.length;
+        return 9999;
       }
       configure(service, params) {
         service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$3(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList));
@@ -29679,10 +29697,10 @@
     const feishuEnvModule = new ContainerModule(bind => {
       isFeishuBound || (isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
     });
-    let loaded$m = !1;
+    let loaded$n = !1;
     function loadFeishuEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$m || (loaded$m = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
+      loaded$n || (loaded$n = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
     }
 
     var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -29993,7 +30011,7 @@
         return this.freeCanvasList.length;
       }
       getStaticCanvasCount() {
-        return this.freeCanvasList.length;
+        return 9999;
       }
       loadImage(url) {
         return createImageElement(url, !1).then(img => ({
@@ -30052,10 +30070,10 @@
     const lynxEnvModule = new ContainerModule(bind => {
       isLynxBound || (isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
     });
-    let loaded$l = !1;
+    let loaded$m = !1;
     function loadLynxEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$l || (loaded$l = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
+      loaded$m || (loaded$m = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
     }
 
     var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -30302,9 +30320,9 @@
     const nodeEnvModule = new ContainerModule(bind => {
       isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
     });
-    let loaded$k = !1;
+    let loaded$l = !1;
     function loadNodeEnv(container) {
-      loaded$k || (loaded$k = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+      loaded$l || (loaded$l = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
     }
 
     var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -30619,7 +30637,7 @@
         return this.freeCanvasList.length;
       }
       getStaticCanvasCount() {
-        return this.freeCanvasList.length;
+        return 9999;
       }
       configure(service, params) {
         service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$1(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.taro, params.pixelRatio), this.taro = params.taro, this.pixelRatio = params.pixelRatio);
@@ -30694,10 +30712,10 @@
     const taroEnvModule = new ContainerModule(bind => {
       isTaroBound || (isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
     });
-    let loaded$j = !1;
+    let loaded$k = !1;
     function loadTaroEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$j || (loaded$j = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
+      loaded$k || (loaded$k = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
     }
 
     var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -31016,18 +31034,18 @@
     const wxEnvModule = new ContainerModule(bind => {
       isWxBound || (isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
     });
-    let loaded$i = !1;
+    let loaded$j = !1;
     function loadWxEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$i || (loaded$i = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
+      loaded$j || (loaded$j = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
     }
 
     function loadAllEnv(container) {
       loadAllModule(container);
     }
-    let loaded$h = !1;
+    let loaded$i = !1;
     function loadAllModule(container) {
-      loaded$h || (loaded$h = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", (lastEnv, env) => {
+      loaded$i || (loaded$i = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", (lastEnv, env) => {
         "browser" !== env && loadMathPicker(container);
       }));
     }
@@ -32331,74 +32349,79 @@
 
     const browser = isBrowserEnv();
 
-    let loaded$g = !1;
+    let loaded$h = !1;
     function registerArc() {
-      loaded$g || (loaded$g = !0, registerArcGraphic$1(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
+      loaded$h || (loaded$h = !0, registerArcGraphic$1(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
     }
 
-    let loaded$f = !1;
+    let loaded$g = !1;
     function registerArc3d() {
-      loaded$f || (loaded$f = !0, registerArc3dGraphic$1(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+      loaded$g || (loaded$g = !0, registerArc3dGraphic$1(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
     }
 
-    let loaded$e = !1;
+    let loaded$f = !1;
     function registerArea() {
-      loaded$e || (loaded$e = !0, registerAreaGraphic$1(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+      loaded$f || (loaded$f = !0, registerAreaGraphic$1(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
     }
 
-    let loaded$d = !1;
+    let loaded$e = !1;
     function registerCircle() {
-      loaded$d || (loaded$d = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
+      loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
     }
 
-    let loaded$c = !1;
+    let loaded$d = !1;
     function registerGlyph() {
-      loaded$c || (loaded$c = !0, registerGlyphGraphic$1(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
+      loaded$d || (loaded$d = !0, registerGlyphGraphic$1(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
     }
 
-    let loaded$b = !1;
+    let loaded$c = !1;
     function registerGroup() {
-      loaded$b || (loaded$b = !0, registerGroupGraphic$1());
+      loaded$c || (loaded$c = !0, registerGroupGraphic$1());
     }
 
-    let loaded$a = !1;
+    let loaded$b = !1;
     function registerImage() {
-      loaded$a || (loaded$a = !0, registerImageGraphic$1(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
+      loaded$b || (loaded$b = !0, registerImageGraphic$1(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
     }
 
-    let loaded$9 = !1;
+    let loaded$a = !1;
     function registerLine() {
-      loaded$9 || (loaded$9 = !0, registerLineGraphic$1(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
+      loaded$a || (loaded$a = !0, registerLineGraphic$1(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
     }
 
-    let loaded$8 = !1;
+    let loaded$9 = !1;
     function registerPath() {
-      loaded$8 || (loaded$8 = !0, registerPathGraphic$1(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
+      loaded$9 || (loaded$9 = !0, registerPathGraphic$1(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
     }
 
-    let loaded$7 = !1;
+    let loaded$8 = !1;
     function registerPolygon() {
-      loaded$7 || (loaded$7 = !0, registerPolygonGraphic$1(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
+      loaded$8 || (loaded$8 = !0, registerPolygonGraphic$1(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
     }
 
-    let loaded$6 = !1;
+    let loaded$7 = !1;
     function registerPyramid3d() {
-      loaded$6 || (loaded$6 = !0, registerPyramid3dGraphic$1(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+      loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic$1(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
     }
 
-    let loaded$5 = !1;
+    let loaded$6 = !1;
     function registerRect() {
-      loaded$5 || (loaded$5 = !0, registerRectGraphic$1(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
+      loaded$6 || (loaded$6 = !0, registerRectGraphic$1(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
     }
 
-    let loaded$4 = !1;
+    let loaded$5 = !1;
     function registerRect3d() {
-      loaded$4 || (loaded$4 = !0, registerRect3dGraphic$1(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+      loaded$5 || (loaded$5 = !0, registerRect3dGraphic$1(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
     }
 
-    let loaded$3 = !1;
+    let loaded$4 = !1;
     function registerRichtext() {
-      loaded$3 || (loaded$3 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+      loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+    }
+
+    let loaded$3 = !1;
+    function registerShadowRoot() {
+      loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
     }
 
     let loaded$2 = !1;
@@ -36263,11 +36286,11 @@
           labelLength += space;
           const layerCount = Object.keys(this.axisLabelLayerSize).length;
           if (0 === axisVector[1]) {
-            const labelBoundsHeight = this.axisLabelsContainer.AABBBounds.height();
+            const labelBoundsHeight = this.axisLabelsContainer ? this.axisLabelsContainer.AABBBounds.height() : 0;
             isFinite(labelBoundsHeight) ? labelLength += labelBoundsHeight + (layerCount - 1) * space : labelLength = 0;
           } else {
             if (0 === axisVector[0]) {
-              const boundsWidth = this.axisLabelsContainer.AABBBounds.width();
+              const boundsWidth = this.axisLabelsContainer ? this.axisLabelsContainer.AABBBounds.width() : 0;
               isFinite(boundsWidth) ? labelLength += boundsWidth + (layerCount - 1) * space : labelLength = 0;
             } else Object.keys(this.axisLabelLayerSize).forEach((layer, index) => {
               labelLength += this.axisLabelLayerSize[layer].width + (index > 0 ? space : 0);
@@ -46198,55 +46221,55 @@
     }
 
     const registerArcGraphic = () => {
-      registerArc(), Factory$1.registerGraphic(GrammarMarkType.arc, createArc);
+      registerShadowRoot(), registerArc(), Factory$1.registerGraphic(GrammarMarkType.arc, createArc);
     };
     const registerArc3dGraphic = () => {
-      registerArc3d(), Factory$1.registerGraphic(GrammarMarkType.arc3d, createArc3d);
+      registerShadowRoot(), registerArc3d(), Factory$1.registerGraphic(GrammarMarkType.arc3d, createArc3d);
     };
     const registerPyramid3dGraphic = () => {
-      registerPyramid3d(), Factory$1.registerGraphic(GrammarMarkType.pyramid3d, createPyramid3d);
+      registerShadowRoot(), registerPyramid3d(), Factory$1.registerGraphic(GrammarMarkType.pyramid3d, createPyramid3d);
     };
     const registerAreaGraphic = () => {
-      registerArea(), Factory$1.registerGraphic(GrammarMarkType.area, createArea);
+      registerShadowRoot(), registerArea(), Factory$1.registerGraphic(GrammarMarkType.area, createArea);
     };
     const registerGroupGraphic = () => {
-      registerGroup(), Factory$1.registerGraphic(GrammarMarkType.group, createGroup);
+      registerShadowRoot(), registerGroup(), Factory$1.registerGraphic(GrammarMarkType.group, createGroup);
     };
     const registerImageGraphic = () => {
-      registerImage(), Factory$1.registerGraphic(GrammarMarkType.image, createImage);
+      registerShadowRoot(), registerImage(), Factory$1.registerGraphic(GrammarMarkType.image, createImage);
     };
     const registerLineGraphic = () => {
-      registerLine(), Factory$1.registerGraphic(GrammarMarkType.line, createLine);
+      registerShadowRoot(), registerLine(), Factory$1.registerGraphic(GrammarMarkType.line, createLine);
     };
     const registerPathGraphic = () => {
-      registerPath(), Factory$1.registerGraphic(GrammarMarkType.path, createPath);
+      registerShadowRoot(), registerPath(), Factory$1.registerGraphic(GrammarMarkType.path, createPath);
     };
     const registerRectGraphic = () => {
-      registerRect(), Factory$1.registerGraphic(GrammarMarkType.rect, createRect);
+      registerShadowRoot(), registerRect(), Factory$1.registerGraphic(GrammarMarkType.rect, createRect);
     };
     const registerRect3dGraphic = () => {
-      registerRect3d(), Factory$1.registerGraphic(GrammarMarkType.rect3d, createRect3d);
+      registerShadowRoot(), registerRect3d(), Factory$1.registerGraphic(GrammarMarkType.rect3d, createRect3d);
     };
     const registerRuleGraphic = () => {
-      registerLine(), Factory$1.registerGraphic(GrammarMarkType.rule, createLine);
+      registerShadowRoot(), registerLine(), Factory$1.registerGraphic(GrammarMarkType.rule, createLine);
     };
     const registerSymbolGraphic = () => {
-      registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.symbol, createSymbol);
+      registerShadowRoot(), registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.symbol, createSymbol);
     };
     const registerTextGraphic = () => {
-      registerText(), registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.text, createText);
+      registerShadowRoot(), registerText(), registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.text, createText);
     };
     const registerPolygonGraphic = () => {
-      registerPolygon(), Factory$1.registerGraphic(GrammarMarkType.polygon, createPolygon);
+      registerShadowRoot(), registerPolygon(), Factory$1.registerGraphic(GrammarMarkType.polygon, createPolygon);
     };
     const registerRichTextGraphic = () => {
-      registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.richtext, createRichText);
+      registerShadowRoot(), registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.richtext, createRichText);
     };
     const registerCellGraphic = () => {
-      registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.cell, createSymbol);
+      registerShadowRoot(), registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.cell, createSymbol);
     };
     const registerGlyphGraphic = () => {
-      registerGlyph(), Factory$1.registerGraphic(GrammarMarkType.glyph, createGlyph);
+      registerShadowRoot(), registerGlyph(), Factory$1.registerGraphic(GrammarMarkType.glyph, createGlyph);
     };
 
     const scaleIn$1 = computeCenter => (element, options, animationParameters) => {
@@ -50307,7 +50330,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return {};
     }
 
-    function cloneDeepSpec(spec) {
+    function cloneDeepSpec(spec, excludeKeys = ['data']) {
         const value = spec;
         let result;
         if (!isValid$1(value) || typeof value !== 'object') {
@@ -50339,7 +50362,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             while (++index < (props || value).length) {
                 const key = props ? props[index] : index;
                 const subValue = value[key];
-                result[key] = cloneDeepSpec(subValue);
+                if (excludeKeys === null || excludeKeys === void 0 ? void 0 : excludeKeys.includes(key.toString())) {
+                    result[key] = subValue;
+                }
+                else {
+                    result[key] = cloneDeepSpec(subValue, excludeKeys);
+                }
             }
         }
         return result;
@@ -52740,10 +52768,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             this._stateMarks = new Map();
             this._stateElements = new Map();
+            this._disableTriggerEvent = false;
         }
         static markStateEnable(mark, state) {
             return !isEmpty(mark.stateStyle[state]);
         }
+        setDisableActiveEffect(disable) {
+            this._disableTriggerEvent = disable;
+        }
         registerMark(state, mark) {
             var _a;
             if (!this._stateMarks.has(state)) {
@@ -52767,6 +52799,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         exchangeEventElement(stateValue, element) {
             var _a;
+            if (this._disableTriggerEvent) {
+                return;
+            }
             const reState = stateToReverse(stateValue);
             (_a = this._stateElements.get(stateValue)) === null || _a === void 0 ? void 0 : _a.forEach(e => {
                 e.removeState(stateValue);
@@ -52784,6 +52819,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         removeEventElement(stateValue, element) {
             var _a, _b;
+            if (this._disableTriggerEvent) {
+                return;
+            }
             element.removeState(stateValue);
             const list = (_b = (_a = this._stateElements.get(stateValue)) === null || _a === void 0 ? void 0 : _a.filter(e => e !== element)) !== null && _b !== void 0 ? _b : [];
             this._stateElements.set(stateValue, list);
@@ -52799,6 +52837,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         addEventElement(stateValue, element) {
             var _a;
+            if (this._disableTriggerEvent) {
+                return;
+            }
             if (!element.getStates().includes(stateValue)) {
                 element.addState(stateValue);
             }
@@ -52808,6 +52849,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         clearEventElement(stateValue, clearReverse) {
             var _a;
+            if (this._disableTriggerEvent) {
+                return;
+            }
             (_a = this._stateElements.get(stateValue)) === null || _a === void 0 ? void 0 : _a.forEach(e => {
                 e.removeState(stateValue);
             });
@@ -52820,6 +52864,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         reverseEventElement(stateValue) {
+            if (this._disableTriggerEvent) {
+                return;
+            }
             const state = stateToReverse(stateValue);
             if (!state) {
                 return;
@@ -53159,6 +53206,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getSpecPath() {
             return this._option.specPath;
         }
+        getSpecInfoPath() {
+            var _a;
+            return (_a = this._option.specInfoPath) !== null && _a !== void 0 ? _a : this._option.specPath;
+        }
         getData() {
             return this._data;
         }
@@ -53342,7 +53393,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getSpecInfo() {
             var _a, _b, _c;
             const specInfo = (_c = (_b = (_a = this._option).getSpecInfo) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : {};
-            return getProperty(specInfo, this.getSpecPath());
+            return getProperty(specInfo, this.getSpecInfoPath());
         }
     }
 
@@ -53800,6 +53851,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super(spec, ctx);
             this.transformerConstructor = RegionSpecTransformer;
             this.modelType = 'region';
+            this.specKey = 'region';
             this.type = Region.type;
             this._series = [];
             this.layoutType = 'region';
@@ -53828,6 +53880,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     getCompiler: ctx.getCompiler
                 });
             }
+            this.interaction.setDisableActiveEffect(this._option.disableTriggerEvent);
         }
         _getClipDefaultValue() {
             var _a, _b, _c, _d;
@@ -54033,6 +54086,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     Region.type = 'region';
     Region.transformerConstructor = RegionSpecTransformer;
+    Region.specKey = 'region';
 
     function getPositionItems(items) {
         const startItems = [];
@@ -56253,7 +56307,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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
+                onError: this._onError,
+                disableTriggerEvent: this._option.disableTriggerEvent === true
             });
             if (!chart) {
                 (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError('init chart fail');
@@ -56352,7 +56407,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._reCompile(updateSpecResult);
             return this._beforeRender(option);
         }
-        _reCompile(updateResult) {
+        _reCompile(updateResult, morphConfig) {
             var _a, _b, _c, _d, _e, _f, _g;
             if (updateResult.reMake) {
                 this._releaseData();
@@ -57246,10 +57301,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (isNil$1(filter)) {
                     return true;
                 }
-                if (isFunction$1(filter)) {
-                    return filter(info, action, query);
-                }
-                return includeSpec(info.spec, filter);
+                return array(filter).some(f => {
+                    if (isFunction$1(f)) {
+                        return f(info, action, query);
+                    }
+                    return includeSpec(info.spec, f);
+                });
             }) });
     };
     const executeMediaQueryActionFilterType = (filterType = 'chart', chartSpec, globalInstance) => {
@@ -57304,44 +57361,36 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             });
         }
-        else if (Object.values(SimplifiedComponentTypeEnum).includes(filterType)) {
-            result.modelType = 'component';
-            let componentTypes;
-            switch (filterType) {
-                case SimplifiedComponentTypeEnum.axis:
-                    componentTypes = axisComponentTypes;
-                    result.specKey = 'axes';
-                    break;
-                case SimplifiedComponentTypeEnum.legend:
-                    componentTypes = legendComponentTypes;
-                    result.specKey = 'legends';
-                    break;
-                case SimplifiedComponentTypeEnum.crosshair:
-                    componentTypes = crosshairComponentTypes;
-                    result.specKey = 'crosshair';
-            }
-            const { specKey } = result;
-            const infoList = array((_d = chartSpecInfo[specKey]) !== null && _d !== void 0 ? _d : []);
-            array((_e = chartSpec[specKey]) !== null && _e !== void 0 ? _e : []).forEach((componentSpec, i) => {
-                const specInfo = infoList[i];
-                if (componentTypes === null || componentTypes === void 0 ? void 0 : componentTypes.includes(specInfo.type)) {
-                    result.modelInfo.push(Object.assign(Object.assign({}, specInfo), { spec: componentSpec }));
-                }
-            });
-        }
         else if (Object.values(ComponentTypeEnum).includes(filterType)) {
             result.modelType = 'component';
             result.type = filterType;
-            result.specKey = (_f = Factory.getComponentInKey(filterType)) === null || _f === void 0 ? void 0 : _f.specKey;
+            result.specKey = (_d = Factory.getComponentInKey(filterType)) === null || _d === void 0 ? void 0 : _d.specKey;
             const { specKey } = result;
-            const infoList = array((_g = chartSpecInfo[specKey]) !== null && _g !== void 0 ? _g : []);
-            (_j = array((_h = chartSpec[specKey]) !== null && _h !== void 0 ? _h : [])) === null || _j === void 0 ? void 0 : _j.forEach((componentSpec, i) => {
+            const infoList = array((_e = chartSpecInfo[specKey]) !== null && _e !== void 0 ? _e : []);
+            (_g = array((_f = chartSpec[specKey]) !== null && _f !== void 0 ? _f : [])) === null || _g === void 0 ? void 0 : _g.forEach((componentSpec, i) => {
                 const specInfo = infoList[i];
                 if (specInfo.type === filterType) {
                     result.modelInfo.push(Object.assign(Object.assign({}, specInfo), { spec: componentSpec }));
                 }
             });
         }
+        else {
+            const componentTypes = Factory.getComponents()
+                .filter(({ cmp }) => cmp.specKey === filterType)
+                .map(({ cmp }) => cmp.type);
+            if (componentTypes.length > 0) {
+                result.modelType = 'component';
+                const specKey = filterType;
+                result.specKey = specKey;
+                const infoList = array((_h = chartSpecInfo[specKey]) !== null && _h !== void 0 ? _h : []);
+                array((_j = chartSpec[specKey]) !== null && _j !== void 0 ? _j : []).forEach((componentSpec, i) => {
+                    const specInfo = infoList[i];
+                    if (componentTypes.includes(specInfo.type)) {
+                        result.modelInfo.push(Object.assign(Object.assign({}, specInfo), { spec: componentSpec }));
+                    }
+                });
+            }
+        }
         return result;
     };
 
@@ -57433,14 +57482,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initialized = true;
         }
         onBeforeResize(service, width, height) {
-            this.changeSize(width, height, true, false);
+            if (!this._initialized) {
+                return;
+            }
+            this._changeSize(width, height, true, false);
         }
         onAfterChartSpecTransform(service, chartSpec, actionSource) {
+            if (!this._initialized) {
+                return;
+            }
             if (actionSource === 'setCurrentTheme') {
-                this.reInit(false, false);
+                this._reInit(false, false);
             }
         }
         onBeforeInitChart(service, chartSpec, actionSource) {
+            if (!this._initialized) {
+                return;
+            }
             let resetMediaQuery;
             let checkMediaQuery;
             switch (actionSource) {
@@ -57467,10 +57525,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             if (resetMediaQuery || checkMediaQuery) {
                 const { width, height } = this._option.globalInstance.getCurrentSize();
-                this.changeSize(width, height, false, false);
+                this._changeSize(width, height, false, false);
             }
         }
-        changeSize(width, height, compile, render) {
+        _changeSize(width, height, compile, render) {
             if (this._currentMediaInfo.width === width && this._currentMediaInfo.height === height) {
                 return false;
             }
@@ -57482,7 +57540,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const changeToActive = [];
             const changeToInactive = [];
             this._spec.forEach(item => {
-                const { hasChanged, isActive } = this.check(item);
+                const { hasChanged, isActive } = this._check(item);
                 if (hasChanged) {
                     if (isActive) {
                         changeToActive.push(item);
@@ -57496,18 +57554,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return false;
             }
             if (!this._baseChartSpec) {
-                this._baseChartSpec = cloneDeepSpec(this._option.globalInstance.getSpec());
+                this._baseChartSpec = cloneDeepSpec(this._option.globalInstance.getSpec(), ['data', MediaQuery.specKey]);
             }
             let chartSpec;
             let hasChanged = false;
             if (changeToInactive.length > 0) {
-                chartSpec = cloneDeepSpec(this._baseChartSpec);
+                chartSpec = cloneDeepSpec(this._baseChartSpec, ['data', MediaQuery.specKey]);
                 Array.from(this.currentActiveItems).forEach(item => {
                     if (changeToInactive.includes(item)) {
                         this.currentActiveItems.delete(item);
                         return;
                     }
-                    const result = this.apply(item, chartSpec);
+                    const result = this._apply(item, chartSpec);
                     chartSpec = result.chartSpec;
                 });
                 hasChanged = true;
@@ -57517,7 +57575,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             changeToActive.forEach(item => {
                 this.currentActiveItems.add(item);
-                const result = this.apply(item, chartSpec);
+                const result = this._apply(item, chartSpec);
                 chartSpec = result.chartSpec;
                 hasChanged || (hasChanged = result.hasChanged);
             });
@@ -57526,7 +57584,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return true;
         }
-        check(item) {
+        _check(item) {
             const { globalInstance } = this._option;
             const isActive = checkMediaQuery(item.query, this._currentMediaInfo, globalInstance);
             return {
@@ -57534,7 +57592,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 hasChanged: isActive !== this.currentActiveItems.has(item)
             };
         }
-        apply(item, chartSpec) {
+        _apply(item, chartSpec) {
             const { globalInstance } = this._option;
             const { query, action } = item;
             let hasChanged = false;
@@ -57545,12 +57603,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             return { chartSpec, hasChanged };
         }
-        reInit(compile, render) {
+        _reInit(compile, render) {
             let chartSpec = this._option.globalInstance.getSpec();
-            this._baseChartSpec = cloneDeepSpec(chartSpec);
+            this._baseChartSpec = cloneDeepSpec(chartSpec, ['data', MediaQuery.specKey]);
             let hasChanged = false;
             this.currentActiveItems.forEach(item => {
-                const result = this.apply(item, chartSpec);
+                const result = this._apply(item, chartSpec);
                 chartSpec = result.chartSpec;
                 hasChanged || (hasChanged = result.hasChanged);
             });
@@ -57573,7 +57631,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.8.0";
+    const version = "1.9.0-alpha.0";
 
     var ChartTypeEnum;
     (function (ChartTypeEnum) {
@@ -57810,11 +57868,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         unselectItems(params) {
-            this.interaction.removeEventElement(STATE_VALUE_ENUM.STATE_SELECTED, params.item);
-            this.event.emit('unselected', {
-                model: this._option.model,
-                value: params.item
-            });
+            const { triggerOff } = this._select;
+            if (triggerOff !== 'none') {
+                this.interaction.removeEventElement(STATE_VALUE_ENUM.STATE_SELECTED, params.item);
+                this.event.emit('unselected', {
+                    model: this._option.model,
+                    value: params.item
+                });
+            }
         }
         handleSingleEventSelect(params) {
             if (this.filterEventMark(params)) {
@@ -58610,14 +58671,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initData() {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             const d = (_a = this._spec.data) !== null && _a !== void 0 ? _a : this._option.getSeriesData(this._spec.dataId, this._spec.dataIndex);
             if (d) {
                 this._rawData = dataToDataView(d, this._dataSet, this._option.sourceDataList, {
                     onError: (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError
                 });
             }
-            (_c = this._rawData) === null || _c === void 0 ? void 0 : _c.target.addListener('change', this.rawDataUpdate.bind(this));
+            (_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) {
@@ -58633,9 +58694,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._viewDataFilter.target.removeListener('change', viewData.reRunAllTransform);
                 }
             }
-            if (this._invalidType === 'zero' && ((_d = this._rawData) === null || _d === void 0 ? void 0 : _d.dataSet)) {
+            if (this._invalidType === 'zero' && ((_e = this._rawData) === null || _e === void 0 ? void 0 : _e.dataSet)) {
                 registerDataSetInstanceTransform(this._rawData.dataSet, 'invalidTravel', invalidTravel);
-                (_e = this._rawData) === null || _e === void 0 ? void 0 : _e.transform({
+                (_f = this._rawData) === null || _f === void 0 ? void 0 : _f.transform({
                     type: 'invalidTravel',
                     options: {
                         config: () => {
@@ -59104,14 +59165,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return;
         }
         release() {
-            var _a;
+            var _a, _b, _c;
             super.release();
             this._viewDataMap.clear();
-            const transformIndex = this._rawData.transformsArr.findIndex(t => t.type === 'addVChartProperty');
+            const transformIndex = (_b = (_a = this._rawData) === null || _a === void 0 ? void 0 : _a.transformsArr) === null || _b === void 0 ? void 0 : _b.findIndex(t => t.type === 'addVChartProperty');
             if (transformIndex >= 0) {
                 this._rawData.transformsArr.splice(transformIndex, 1);
             }
-            (_a = this._data) === null || _a === void 0 ? void 0 : _a.release();
+            (_c = this._data) === null || _c === void 0 ? void 0 : _c.release();
             this._dataSet =
                 this._data =
                     this._rawData =
@@ -60667,7 +60728,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._chartData;
         }
         constructor(spec, option) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             super(option);
             this.type = 'chart';
             this.id = createID();
@@ -60795,7 +60856,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._event = new Event$1(option.eventDispatcher, option.mode);
             this._dataSet = option.dataSet;
             this._chartData = new ChartData(this._dataSet, (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError);
-            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError, getSeriesData: this._chartData.getSeriesData.bind(this._chartData) });
+            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError, disableTriggerEvent: ((_d = this._option) === null || _d === void 0 ? void 0 : _d.disableTriggerEvent) === true, getSeriesData: this._chartData.getSeriesData.bind(this._chartData) });
             this._spec = spec;
         }
         created() {
@@ -61558,21 +61619,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         transformModelSpec(chartSpec) {
             const transform = (constructor, specInfo, chartSpecInfo) => {
-                const { spec, specPath, type } = specInfo;
+                const { spec, specPath, specInfoPath, type } = specInfo;
                 const transformer = new constructor.transformerConstructor({
                     type,
                     getTheme: this._option.getTheme
                 });
                 const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
                 setProperty(chartSpec, specPath, transformResult.spec);
-                setProperty(chartSpecInfo, specPath !== null && specPath !== void 0 ? specPath : [type], Object.assign(Object.assign({}, specInfo), transformResult));
+                setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign({}, specInfo), transformResult));
             };
             return this.createSpecInfo(chartSpec, transform);
         }
         createSpecInfo(chartSpec, transform) {
             var _a;
             if (!transform) {
-                transform = (constructor, specInfo, chartSpecInfo) => setProperty(chartSpecInfo, specInfo.specPath, specInfo);
+                transform = (constructor, specInfo, chartSpecInfo) => {
+                    const { spec, specPath, specInfoPath, type } = specInfo;
+                    const transformer = new constructor.transformerConstructor({
+                        type,
+                        getTheme: this._option.getTheme
+                    });
+                    setProperty(chartSpecInfo, specInfoPath !== null && specInfoPath !== void 0 ? specInfoPath : specPath, Object.assign(Object.assign({}, specInfo), { theme: transformer.getTheme(spec, chartSpec) }));
+                };
             }
             const currentChartSpecInfo = {};
             this.forEachRegionInSpec(chartSpec, transform, currentChartSpecInfo);
@@ -64191,11 +64259,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, delayTime));
         }
         initZoomEventOfSeries(s, callback, option) {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             if (getDefaultTriggerEventByMode(this._renderMode)) {
                 this._bindZoomEventAsRegion(s.event, s, callback, option);
             }
         }
         initZoomEventOfRegions(regions, filter, callback, option) {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             if (getDefaultTriggerEventByMode(this._renderMode)) {
                 regions.forEach(r => {
                     if (filter) {
@@ -64212,7 +64286,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _scrollEventDispatch(params, regionOrSeries, callback) {
-            if (!params.event) {
+            if (!params.event || this._option.disableTriggerEvent) {
                 return;
             }
             const { event } = params;
@@ -64254,6 +64328,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initScrollEventOfRegions(regions, filter, callback, option) {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             if (getDefaultTriggerEventByMode(this._renderMode)) {
                 regions.forEach(r => {
                     if (filter) {
@@ -64288,6 +64365,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initDragEventOfSeries(s, callback, option) {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             if (getDefaultTriggerEventByMode(this._renderMode)) {
                 s.event.on(this._getTriggerEvent('start'), { level: exports.Event_Bubble_Level.model, filter: ({ model }) => (model === null || model === void 0 ? void 0 : model.id) === s.id }, params => {
                     this._handleDrag(params, callback, option);
@@ -64295,6 +64375,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initDragEventOfRegions(regions, filter, callback, option) {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             if (getDefaultTriggerEventByMode(this._renderMode)) {
                 regions.forEach(r => {
                     if (filter) {
@@ -64317,6 +64400,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleDrag(params, callback, option) {
             var _a, _b, _c;
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             this._clickEnable = true;
             if (!this._zoomableTrigger.parserDragEvent(params.event)) {
                 return;
@@ -64450,7 +64536,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         spec,
                         regionIndex: i,
                         type: ComponentTypeEnum.geoCoordinate,
-                        specPath: ['region', i, 'geoCoordinate']
+                        specInfoPath: ['region', i, 'geoCoordinate']
                     });
                 }
             });
@@ -79818,8 +79904,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const titleBackgroundSpec = (_c = spec.title.background) !== null && _c !== void 0 ? _c : {};
             return {
                 orient: this.getOrient(),
-                select: spec.select,
-                hover: spec.hover,
+                select: this._option.disableTriggerEvent === true ? false : spec.select,
+                hover: this._option.disableTriggerEvent === true ? false : spec.hover,
                 line: transformAxisLineStyle(spec.domainLine),
                 label: Object.assign({ style: isFunction$1(spec.label.style)
                         ? (datum, index, data, layer) => {
@@ -81973,6 +82059,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
             const attrs = this._getLegendAttributes(rect);
+            attrs.disableTriggerEvent = this._option.disableTriggerEvent;
             if (this._legendComponent) {
                 if (!isEqual$1(attrs, this._cacheAttrs)) {
                     this._legendComponent.setAttributes(mergeSpec({}, attrs, {
@@ -81989,7 +82076,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._legendComponent = legend;
                 const container = this.getContainer();
                 container.add(legend);
-                this._initEvent();
+                if (!this._option.disableTriggerEvent) {
+                    this._initEvent();
+                }
                 legend.on('*', (event, type) => this._delegateEvent(this._legendComponent, event, type));
             }
             this._cacheAttrs = attrs;
@@ -85400,6 +85489,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _initEvent() {
             var _a;
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             const trigger = (_a = this._spec.trigger) !== null && _a !== void 0 ? _a : 'hover';
             const mode = this._option.mode;
             if (trigger === 'hover') {
@@ -85649,6 +85741,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return result;
         }
         _initEvent() {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             const triggerConfig = this._getTriggerEvent();
             if (triggerConfig) {
                 const { in: triggerEvent, out: outTriggerEvent } = triggerConfig;
@@ -86332,10 +86427,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else {
                 if (type === 'line') {
-                    crosshair = new LineCrosshair(Object.assign(Object.assign({}, attributes), { lineStyle: style, zIndex: this.gridZIndex + 1 }));
+                    crosshair = new LineCrosshair(Object.assign(Object.assign({}, attributes), { lineStyle: style, zIndex: this.gridZIndex + 1, disableTriggerEvent: this._option.disableTriggerEvent }));
                 }
                 else if (type === 'rect') {
-                    crosshair = new RectCrosshair(Object.assign(Object.assign({}, attributes), { rectStyle: style, zIndex: this.gridZIndex }));
+                    crosshair = new RectCrosshair(Object.assign(Object.assign({}, attributes), { rectStyle: style, zIndex: this.gridZIndex, disableTriggerEvent: this._option.disableTriggerEvent }));
                 }
                 container === null || container === void 0 ? void 0 : container.add(crosshair);
                 if (dim === 'x') {
@@ -87816,7 +87911,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 selectedBackgroundChartStyle: {
                     line: mergeSpec(transformToGraphic((_k = selectedBackgroundChart.line) === null || _k === void 0 ? void 0 : _k.style), { fill: false }),
                     area: Object.assign({ curveType: 'basis', visible: true }, transformToGraphic((_l = selectedBackgroundChart.area) === null || _l === void 0 ? void 0 : _l.style))
-                }
+                },
+                disableTriggerEvent: this._option.disableTriggerEvent
             };
         }
         _getNeedClearVRenderComponents() {
@@ -87976,6 +88072,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!isEmpty(slider === null || slider === void 0 ? void 0 : slider.style)) {
                 attrs.sliderStyle = transformToGraphic(slider.style);
             }
+            attrs.disableTriggerEvent = this._option.disableTriggerEvent;
             return attrs;
         }
         _getNeedClearVRenderComponents() {
@@ -88072,6 +88169,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         changeRegions(regions) {
         }
         initEvent() {
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             const trigger = this._spec.trigger;
             if (trigger === 'none') {
                 return;
@@ -89030,7 +89130,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor(spec, options) {
             super(spec, options);
             this.type = ComponentTypeEnum.title;
-            this.specKey = 'title';
+            this.specKey = ComponentTypeEnum.title;
             this.layoutType = 'normal';
             this.layoutZIndex = exports.LayoutZIndex.Title;
             this.layoutLevel = exports.LayoutLevel.Title;
@@ -89152,7 +89252,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
     Title.type = ComponentTypeEnum.title;
-    Title.specKey = 'title';
+    Title.specKey = ComponentTypeEnum.title;
     const registerTitle = () => {
         Factory.registerComponent(Title.type, Title);
     };
@@ -89377,9 +89477,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     dy: (_b = this._spec.dy) !== null && _b !== void 0 ? _b : 0 + this._dy
                 };
                 if (type === 'discrete') {
-                    return Object.assign(Object.assign({}, transformDiscreteSpecToAttrs(this._spec, this._specs)), layoutAttrs);
+                    return Object.assign(Object.assign(Object.assign({}, transformDiscreteSpecToAttrs(this._spec, this._specs)), layoutAttrs), { disableTriggerEvent: this._option.disableTriggerEvent });
                 }
-                return Object.assign(Object.assign({}, transformContinuousSpecToAttrs(this._spec, this._specs)), layoutAttrs);
+                return Object.assign(Object.assign(Object.assign({}, transformContinuousSpecToAttrs(this._spec, this._specs)), layoutAttrs), { disableTriggerEvent: this._option.disableTriggerEvent });
             };
             this._createOrUpdatePlayerComponent = () => {
                 const attrs = Object.assign({}, this._getPlayerAttrs());
@@ -89417,6 +89517,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return 0;
             };
             this._initEvent = () => {
+                if (this._option.disableTriggerEvent) {
+                    return;
+                }
                 this._option.globalInstance.on(exports.ChartEvent.rendered, () => {
                     var _a;
                     if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.auto) {
@@ -89992,7 +90095,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         specInfo.push({
                             spec: chartSpec,
                             type: ComponentTypeEnum.label,
-                            specPath: ['region', i, 'markLabel'],
+                            specInfoPath: ['region', i, 'markLabel'],
                             specIndex: i
                         });
                     }
@@ -90615,7 +90718,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _createBrushComponent(region, componentIndex) {
             var _a, _b;
             const interactiveAttr = this._getBrushInteractiveAttr(region);
-            const brush = new Brush$1(Object.assign(Object.assign({ zIndex: this.layoutZIndex, brushStyle: transformToGraphic((_a = this._spec) === null || _a === void 0 ? void 0 : _a.style) }, interactiveAttr), this._spec));
+            const brush = new Brush$1(Object.assign(Object.assign(Object.assign({ zIndex: this.layoutZIndex, brushStyle: transformToGraphic((_a = this._spec) === null || _a === void 0 ? void 0 : _a.style) }, interactiveAttr), this._spec), { disableTriggerEvent: this._option.disableTriggerEvent }));
             brush.id = (_b = this._spec.id) !== null && _b !== void 0 ? _b : `brush-${this.id}`;
             this.getContainer().add(brush);
             const { brushMode = 'single' } = this._spec;
@@ -90912,6 +91015,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         onLayoutEnd(ctx) {
             var _a;
             super.onLayoutEnd(ctx);
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
             const brushVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
             if (brushVisible) {
                 if (!this._brushComponents) {