@visactor/vrender 0.16.0-alpha.0 → 0.16.0-alpha.2

package/dist/index.js

@@ -2782,17 +2782,17 @@
   var EnvContribution = Symbol["for"]("EnvContribution");
   var VGlobal = Symbol["for"]("VGlobal");
 
-  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$1c = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1d = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$X = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$Y = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -3017,7 +3017,7 @@
     }]);
     return DefaultGlobal;
   }();
-  exports.DefaultGlobal = __decorate$1T([injectable(), __param$X(0, inject(ContributionProvider)), __param$X(0, named(EnvContribution)), __metadata$1c("design:paramtypes", [Object])], exports.DefaultGlobal);
+  exports.DefaultGlobal = __decorate$1U([injectable(), __param$Y(0, inject(ContributionProvider)), __param$Y(0, named(EnvContribution)), __metadata$1d("design:paramtypes", [Object])], exports.DefaultGlobal);
 
   function getDefaultExportFromCjs (x) {
   	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6264,7 +6264,8 @@
     scaleIn3d: !1,
     direction: "horizontal",
     wordBreak: "break-all",
-    ignoreBuf: !1
+    ignoreBuf: !1,
+    verticalMode: 0
   };
   var DefaultStyle = Object.assign(Object.assign(Object.assign({
     opacity: 1,
@@ -6284,7 +6285,10 @@
     connectedX: NaN,
     connectedY: NaN
   };
-  var DefaultAttribute = Object.assign(Object.assign({
+  var DefaultDebugAttribute = {
+    _debug_bounds: !1
+  };
+  var DefaultAttribute = Object.assign(Object.assign(Object.assign({
     strokeSeg: null,
     pickable: !0,
     childrenPickable: !0,
@@ -6296,8 +6300,9 @@
     customPickShape: null,
     boundsMode: "accurate",
     keepDirIn3d: !0,
-    shadowRootIdx: 1
-  }, DefaultStyle), DefaultTransform);
+    shadowRootIdx: 1,
+    interactive: !1
+  }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
   function addAttributeToPrototype(obj, c, keys) {
     keys.forEach(function (key) {
       c.prototype[key] = obj[key];
@@ -6548,7 +6553,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$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;
@@ -6754,9 +6759,9 @@
     }]);
     return ATextMeasure;
   }();
-  ATextMeasure = __decorate$1S([injectable()], ATextMeasure);
+  ATextMeasure = __decorate$1T([injectable()], ATextMeasure);
 
-  var __decorate$1R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __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;
@@ -6773,7 +6778,7 @@
     }
     return _createClass(DefaultTextMeasureContribution);
   }(ATextMeasure);
-  exports.DefaultTextMeasureContribution = __decorate$1R([injectable()], exports.DefaultTextMeasureContribution);
+  exports.DefaultTextMeasureContribution = __decorate$1S([injectable()], exports.DefaultTextMeasureContribution);
 
   var container = new Container();
 
@@ -7148,17 +7153,17 @@
     return containPath(commands, lineWidth, !0, x, y);
   }
 
-  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$1b = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1c = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$W = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$X = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -7229,7 +7234,7 @@
     }]);
     return DefaultGraphicUtil;
   }();
-  exports.DefaultGraphicUtil = __decorate$1Q([injectable(), __param$W(0, inject(ContributionProvider)), __param$W(0, named(TextMeasureContribution)), __param$W(1, inject(VGlobal)), __metadata$1b("design:paramtypes", [Object, Object])], exports.DefaultGraphicUtil);
+  exports.DefaultGraphicUtil = __decorate$1R([injectable(), __param$X(0, inject(ContributionProvider)), __param$X(0, named(TextMeasureContribution)), __param$X(1, inject(VGlobal)), __metadata$1c("design:paramtypes", [Object, Object])], exports.DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -7306,7 +7311,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  exports.DefaultTransformUtil = __decorate$1Q([injectable(), __metadata$1b("design:paramtypes", [])], exports.DefaultTransformUtil);
+  exports.DefaultTransformUtil = __decorate$1R([injectable(), __metadata$1c("design:paramtypes", [])], exports.DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -7635,8 +7640,9 @@
     }, {
       key: "appendChild",
       value: function appendChild(node) {
+        var highPerformance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
         if (this._uid === node._uid) return null;
-        if (node.isAncestorsOf(this)) throw new Error("【Node::appendChild】不能将父辈元素append为子元素");
+        if (!highPerformance && node.isAncestorsOf(this)) throw new Error("【Node::appendChild】不能将父辈元素append为子元素");
         return node.parent && node.parent.removeChild(node), node.parent = this, this._lastChild ? (this._lastChild._next = node, node._prev = this._lastChild, this._lastChild = node) : (this._firstChild = this._lastChild = node, node._prev = node._next = null), this._idMap || (this._idMap = new Map()), this._idMap.set(node._uid, node), this.setCount(node.count), this._structEdit = !0, node;
       }
     }, {
@@ -9263,7 +9269,15 @@
     }, {
       key: "update",
       value: function update(end, ratio, out) {
-        0 === this.updateCount && this.onFirstRun(), this.updateCount += 1, Object.assign(out, this.step.getLastProps()), this.onUpdate(end, ratio, out), end && this.onEnd();
+        var _this = this;
+        if (0 === this.updateCount) {
+          this.onFirstRun();
+          var props = this.step.getLastProps();
+          Object.keys(props).forEach(function (k) {
+            _this.subAnimate.animate.validAttr(k) && (out[k] = props[k]);
+          });
+        }
+        this.updateCount += 1, this.onUpdate(end, ratio, out), end && this.onEnd();
       }
     }]);
     return ACustomAnimate;
@@ -9272,10 +9286,10 @@
     _inherits(CbAnimate, _ACustomAnimate);
     var _super = _createSuper(CbAnimate);
     function CbAnimate(cb) {
-      var _this;
+      var _this2;
       _classCallCheck(this, CbAnimate);
-      _this = _super.call(this, null, null, 0, "linear"), _this.cb = cb;
-      return _this;
+      _this2 = _super.call(this, null, null, 0, "linear"), _this2.cb = cb;
+      return _this2;
     }
     _createClass(CbAnimate, [{
       key: "onUpdate",
@@ -9351,9 +9365,9 @@
     }, {
       key: "runCb",
       value: function runCb(cb) {
-        var _this2 = this;
+        var _this3 = this;
         var customAnimate = new CbAnimate(function () {
-          cb(_this2, customAnimate.step.prev);
+          cb(_this3, customAnimate.step.prev);
         });
         return this.tailAnimate.play(customAnimate), this;
       }
@@ -9465,9 +9479,9 @@
     }, {
       key: "preventAttrs",
       value: function preventAttrs(keys) {
-        var _this3 = this;
+        var _this4 = this;
         keys.forEach(function (key) {
-          return _this3.preventAttr(key);
+          return _this4.preventAttr(key);
         });
       }
     }, {
@@ -9583,22 +9597,22 @@
     }, {
       key: "to",
       value: function to(props, duration, easing, params) {
-        var _this4 = this;
+        var _this5 = this;
         (null == duration || duration < 0) && (duration = 0);
         var easingFunc = "string" == typeof easing ? Easing[easing] : easing,
           step = this._addStep(duration, null, easingFunc);
         return step.type = exports.AnimateStepType.to, this._appendProps(props, step, !!params && params.tempProps), step.propKeys || (step.propKeys = Object.keys(step.props)), params && params.noPreventAttrs || this.target.animates.forEach(function (a) {
-          a.id !== _this4.animate.id && a.preventAttrs(step.propKeys);
+          a.id !== _this5.animate.id && a.preventAttrs(step.propKeys);
         }), this;
       }
     }, {
       key: "from",
       value: function from(props, duration, easing, params) {
-        var _this5 = this;
+        var _this6 = this;
         this.to(props, 0, easing, params);
         var toProps = {};
         this.stepTail.propKeys || (this.stepTail.propKeys = Object.keys(this.stepTail.props)), this.stepTail.propKeys.forEach(function (k) {
-          toProps[k] = _this5.getLastPropByName(k, _this5.stepTail);
+          toProps[k] = _this6.getLastPropByName(k, _this6.stepTail);
         }), this.to(toProps, duration, easing, params), this.stepTail.type = exports.AnimateStepType.from;
       }
     }, {
@@ -9640,20 +9654,20 @@
     }, {
       key: "_appendProps",
       value: function _appendProps(props, step, tempProps) {
-        var _this6 = this;
+        var _this7 = this;
         step.props = tempProps ? props : Object.assign({}, props);
         var lastStep = step.prev;
         var _props = step.props;
         for (step.propKeys || (step.propKeys = Object.keys(step.props)), step.propKeys.forEach(function (k) {
-          void 0 === step.props[k] && (step.props[k] = _this6.target.getDefaultAttribute(k));
+          void 0 === step.props[k] && (step.props[k] = _this7.target.getDefaultAttribute(k));
         }); lastStep.prev;) lastStep.props && (lastStep.propKeys || (lastStep.propKeys = Object.keys(lastStep.props)), lastStep.propKeys.forEach(function (key) {
           void 0 === _props[key] && (_props[key] = lastStep.props[key]);
         })), lastStep = lastStep.prev;
         var initProps = this.stepHead.props;
         step.propKeys || (step.propKeys = Object.keys(_props)), step.propKeys.forEach(function (key) {
           if (void 0 === initProps[key]) {
-            var parentAnimateInitProps = _this6.animate.getStartProps();
-            initProps[key] = parentAnimateInitProps[key] = _this6.target.getComputedAttribute(key);
+            var parentAnimateInitProps = _this7.animate.getStartProps();
+            initProps[key] = parentAnimateInitProps[key] = _this7.target.getComputedAttribute(key);
           }
         }), this.target.onAddStep && this.target.onAddStep(step);
       }
@@ -12323,7 +12337,7 @@
     }, {
       key: "onAttributeUpdate",
       value: function onAttributeUpdate(context) {
-        application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context);
+        context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
       }
     }, {
       key: "update",
@@ -12733,7 +12747,7 @@
     }, {
       key: "release",
       value: function release() {
-        this.releaseStatus = "released";
+        this.releaseStatus = "released", application.graphicService.onRelease(this);
       }
     }, {
       key: "_emitCustomEvent",
@@ -13403,7 +13417,6 @@
   }(Graphic);
   Group.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 
-  var LayerHandlerContribution = Symbol["for"]("LayerHandlerContribution");
   var Layer = /*#__PURE__*/function (_Group) {
     _inherits(Layer, _Group);
     var _super = _createSuper(Layer);
@@ -13411,13 +13424,13 @@
       var _this;
       _classCallCheck(this, Layer);
       var _a;
-      _this = _super.call(this, {}), _this.stage = stage, _this.global = global, _this.window = window, _this.main = params.main, _this.layerHandler = container.get(LayerHandlerContribution), _this.layerHandler.init(_assertThisInitialized(_this), window, {
+      _this = _super.call(this, {}), _this.stage = stage, _this.global = global, _this.window = window, _this.main = params.main, _this.layerHandler = params.layerHandler, _this.layerHandler.init(_assertThisInitialized(_this), window, {
         main: params.main,
         canvasId: params.canvasId,
         width: _this.viewWidth,
         height: _this.viewHeight,
         zIndex: null !== (_a = params.zIndex) && void 0 !== _a ? _a : 0
-      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme(), _this.background = "rgba(0, 0, 0, 0)", _this.virtual = !!params.virtual, _this.afterDrawCbs = [];
+      }), _this.layer = _assertThisInitialized(_this), _this.subLayers = new Map(), _this.theme = new Theme(), _this.background = "rgba(0, 0, 0, 0)", _this.afterDrawCbs = [];
       return _this;
     }
     _createClass(Layer, [{
@@ -13425,6 +13438,11 @@
       get: function get() {
         return this.layerHandler.offscreen;
       }
+    }, {
+      key: "layerMode",
+      get: function get() {
+        return this.layerHandler.type;
+      }
     }, {
       key: "width",
       get: function get() {
@@ -13486,10 +13504,18 @@
       value: function pick(x, y) {
         throw new Error("暂不支持");
       }
+    }, {
+      key: "tryRenderSecondaryLayer",
+      value: function tryRenderSecondaryLayer(params, userParams) {
+        var _this3 = this;
+        this.layerHandler.secondaryHandlers && this.layerHandler.secondaryHandlers.length && this.layerHandler.secondaryHandlers.forEach(function (h) {
+          h.layer.renderCount = _this3.renderCount, h.layer.render(params, userParams);
+        });
+      }
     }, {
       key: "render",
       value: function render(params, userParams) {
-        var _this3 = this;
+        var _this4 = this;
         var _a;
         var stage = this.stage;
         this.layerHandler.render([this], {
@@ -13503,8 +13529,8 @@
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(function (c) {
-          return c(_this3);
-        });
+          return c(_this4);
+        }), this.tryRenderSecondaryLayer(params, userParams);
       }
     }, {
       key: "resize",
@@ -13542,7 +13568,7 @@
     }, {
       key: "combineTo",
       value: function combineTo(target, params) {
-        var _this4 = this;
+        var _this5 = this;
         var _a, _b, _c;
         this.offscreen && (this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
@@ -13554,21 +13580,21 @@
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(function (c) {
-          return c(_this4);
+          return c(_this5);
         }));
       }
     }, {
       key: "release",
       value: function release() {
-        var _this5 = this;
+        var _this6 = this;
         _get(_getPrototypeOf(Layer.prototype), "release", this).call(this), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(function (l) {
-          application.layerService.releaseLayer(_this5.stage, l.layer);
+          application.layerService.releaseLayer(_this6.stage, l.layer);
         });
       }
     }, {
       key: "drawTo",
       value: function drawTo(target, params) {
-        var _this6 = this;
+        var _this7 = this;
         var _a, _b, _c;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
@@ -13580,24 +13606,31 @@
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(function (c) {
-          return c(_this6);
+          return c(_this7);
         });
       }
     }]);
     return Layer;
   }(Group);
 
-  var __decorate$1P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var TransformUtil = Symbol["for"]("TransformUtil");
+  var GraphicUtil = Symbol["for"]("GraphicUtil");
+  var LayerService = Symbol["for"]("LayerService");
+  var StaticLayerHandlerContribution = Symbol["for"]("StaticLayerHandlerContribution");
+  var DynamicLayerHandlerContribution = Symbol["for"]("DynamicLayerHandlerContribution");
+  var VirtualLayerHandlerContribution = Symbol["for"]("VirtualLayerHandlerContribution");
+
+  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$1a = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1b = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$V = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$W = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -13617,6 +13650,17 @@
       value: function getStageLayer(stage) {
         return this.layerMap.get(stage);
       }
+    }, {
+      key: "getRecommendedLayerType",
+      value: function getRecommendedLayerType(layerMode) {
+        return layerMode || (0 !== this.staticLayerCountInEnv ? "static" : 0 !== this.dynamicLayerCountInEnv ? "dynamic" : "virtual");
+      }
+    }, {
+      key: "getLayerHandler",
+      value: function getLayerHandler(layerMode) {
+        var layerHandler;
+        return layerHandler = "static" === layerMode ? container.get(StaticLayerHandlerContribution) : "dynamic" === layerMode ? container.get(DynamicLayerHandlerContribution) : container.get(VirtualLayerHandlerContribution), layerHandler;
+      }
     }, {
       key: "createLayer",
       value: function createLayer(stage) {
@@ -13624,12 +13668,26 @@
           main: !1
         };
         this.tryInit();
-        var layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({}, options), {
-            virtual: 0 === this.staticLayerCountInEnv
+        var layerMode = this.getRecommendedLayerType(options.layerMode),
+          layerHandler = this.getLayerHandler(layerMode),
+          layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({
+            main: !1
+          }, options), {
+            layerMode: layerMode,
+            layerHandler: layerHandler
           })),
           stageLayers = this.layerMap.get(stage) || [];
         return stageLayers.push(layer), this.layerMap.set(stage, stageLayers), this.staticLayerCountInEnv--, layer;
       }
+    }, {
+      key: "prepareStageLayer",
+      value: function prepareStageLayer(stage) {
+        var mainHandler;
+        stage.forEachChildren(function (l) {
+          var handler = l.getNativeHandler();
+          "virtual" === handler.type ? (handler.mainHandler = mainHandler, mainHandler.secondaryHandlers.push(handler)) : (mainHandler = handler, mainHandler.secondaryHandlers = []);
+        });
+      }
     }, {
       key: "releaseLayer",
       value: function releaseLayer(stage, layer) {
@@ -13652,19 +13710,19 @@
     }]);
     return DefaultLayerService;
   }();
-  exports.DefaultLayerService = __decorate$1P([injectable(), __param$V(0, inject(VGlobal)), __metadata$1a("design:paramtypes", [Object])], exports.DefaultLayerService);
+  exports.DefaultLayerService = __decorate$1Q([injectable(), __param$W(0, inject(VGlobal)), __metadata$1b("design:paramtypes", [Object])], exports.DefaultLayerService);
 
-  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$19 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1a = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$U = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$V = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -13819,11 +13877,7 @@
     }]);
     return DefaultWindow;
   }();
-  __decorate$1O([postConstruct(), __metadata$19("design:type", Function), __metadata$19("design:paramtypes", []), __metadata$19("design:returntype", void 0)], exports.DefaultWindow.prototype, "postInit", null), exports.DefaultWindow = __decorate$1O([injectable(), __param$U(0, inject(VGlobal)), __metadata$19("design:paramtypes", [Object])], exports.DefaultWindow);
-
-  var TransformUtil = Symbol["for"]("TransformUtil");
-  var GraphicUtil = Symbol["for"]("GraphicUtil");
-  var LayerService = Symbol["for"]("LayerService");
+  __decorate$1P([postConstruct(), __metadata$1a("design:type", Function), __metadata$1a("design:paramtypes", []), __metadata$1a("design:returntype", void 0)], exports.DefaultWindow.prototype, "postInit", null), exports.DefaultWindow = __decorate$1P([injectable(), __param$V(0, inject(VGlobal)), __metadata$1a("design:paramtypes", [Object])], exports.DefaultWindow);
 
   var coreModule = new ContainerModule(function (bind) {
     bind(exports.DefaultGlobal).toSelf().inSingletonScope(), bind(VGlobal).toService(exports.DefaultGlobal), bind(exports.DefaultWindow).to(exports.DefaultWindow), bind(VWindow).toService(exports.DefaultWindow), bind(exports.DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(exports.DefaultGraphicUtil), bind(exports.DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(exports.DefaultTransformUtil), bind(exports.DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(exports.DefaultLayerService);
@@ -13973,7 +14027,7 @@
           t0 = cornerTangents(xirs, yirs, xors, yors, outerRadius, cornerRadiusStart, Number(clockwise)),
           t1 = cornerTangents(xore, yore, xire, yire, outerRadius, cornerRadiusEnd, Number(clockwise));
         limitedOcr < maxOuterCornerRadius && cornerRadiusStart === cornerRadiusEnd ? !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), context.arc(cx + t0.cx, cy + t0.cy, limitedOcr, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !clockwise)) : context.moveTo(cx + t0.cx + limitedOcr * cos(atan2(t1.y01, t1.x01)), cy + t0.cy + limitedOcr * sin(atan2(t1.y01, t1.x01))) : !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), cornerRadiusStart > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusStart, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, outerRadius, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !clockwise), cornerRadiusEnd > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusEnd, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !clockwise)) : cornerRadiusEnd > 0 ? context.moveTo(cx + t1.cx + cornerRadiusEnd * cos(atan2(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusEnd * sin(atan2(t1.y01, t1.x01))) : context.moveTo(cx + xore, cy + outerRadius * sin(outerEndAngle));
-      } else !partStroke || partStroke[0] ? (context.moveTo(cx + xors, cy + yors), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise)) : context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + (null != yore ? yore : 0));
+      } else !partStroke || partStroke[0] ? (context.moveTo(cx + xors, cy + yors), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise)) : context.moveTo(cx + outerRadius * cos(outerEndAngle), cy + outerRadius * sin(outerEndAngle));
       if (!(innerRadius > epsilon) || innerDeltaAngle < .001) !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), collapsedToLine = !0;else if (limitedIcr > epsilon) {
         var _cornerRadiusStart = min(innerCornerRadiusStart, limitedIcr),
           _cornerRadiusEnd = min(innerCornerRadiusEnd, limitedIcr),
@@ -14526,10 +14580,20 @@
         var dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
         return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
+    }, {
+      key: "getBaselineMapAlign",
+      value: function getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+      }
+    }, {
+      key: "getAlignMapBaseline",
+      value: function getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+      }
     }, {
       key: "updateVerticalSinglelineAABBBounds",
       value: function updateVerticalSinglelineAABBBounds(text) {
-        var _a;
+        var _a, _b, _c;
         var textTheme = getTheme(this).text,
           textMeasure = application.graphicUtil.textMeasure;
         var width;
@@ -14541,10 +14605,6 @@
           maxLineWidth = _attribute$maxLineWid4 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid4,
           _attribute$ellipsis2 = attribute.ellipsis,
           ellipsis = _attribute$ellipsis2 === void 0 ? textTheme.ellipsis : _attribute$ellipsis2,
-          _attribute$textAlign2 = attribute.textAlign,
-          textAlign = _attribute$textAlign2 === void 0 ? textTheme.textAlign : _attribute$textAlign2,
-          _attribute$textBaseli2 = attribute.textBaseline,
-          textBaseline = _attribute$textBaseli2 === void 0 ? textTheme.textBaseline : _attribute$textBaseli2,
           _attribute$fontSize2 = attribute.fontSize,
           fontSize = _attribute$fontSize2 === void 0 ? textTheme.fontSize : _attribute$fontSize2,
           _attribute$fontWeight2 = attribute.fontWeight,
@@ -14557,8 +14617,16 @@
           lineHeight = _attribute$lineHeight2 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight2,
           _attribute$lineWidth2 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth2 === void 0 ? textTheme.lineWidth : _attribute$lineWidth2,
-          _attribute$wordBreak2 = attribute.wordBreak;
-          _attribute$wordBreak2 === void 0 ? textTheme.wordBreak : _attribute$wordBreak2;
+          _attribute$verticalMo = attribute.verticalMode,
+          verticalMode = _attribute$verticalMo === void 0 ? textTheme.verticalMode : _attribute$verticalMo;
+        var _attribute$textAlign2 = attribute.textAlign,
+          textAlign = _attribute$textAlign2 === void 0 ? textTheme.textAlign : _attribute$textAlign2,
+          _attribute$textBaseli2 = attribute.textBaseline,
+          textBaseline = _attribute$textBaseli2 === void 0 ? textTheme.textBaseline : _attribute$textBaseli2;
+        if (!verticalMode) {
+          var t = textAlign;
+          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+        }
         if (!this.shouldUpdateShape() && this.cache) {
           width = this.cache.clipedWidth;
           var _dx2 = textDrawOffsetX(textAlign, width),
@@ -14622,8 +14690,8 @@
           stroke = _attribute$stroke3 === void 0 ? textTheme.stroke : _attribute$stroke3,
           _attribute$lineWidth3 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth3 === void 0 ? textTheme.lineWidth : _attribute$lineWidth3,
-          _attribute$wordBreak3 = attribute.wordBreak;
-          _attribute$wordBreak3 === void 0 ? textTheme.wordBreak : _attribute$wordBreak3;
+          _attribute$wordBreak2 = attribute.wordBreak;
+          _attribute$wordBreak2 === void 0 ? textTheme.wordBreak : _attribute$wordBreak2;
         if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           var _bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(_bbox.xOffset, _bbox.yOffset, _bbox.xOffset + _bbox.width, _bbox.yOffset + _bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
@@ -14640,7 +14708,7 @@
     }, {
       key: "updateVerticalMultilineAABBBounds",
       value: function updateVerticalMultilineAABBBounds(text) {
-        var _a;
+        var _a, _b, _c;
         var textTheme = getTheme(this).text,
           textMeasure = application.graphicUtil.textMeasure;
         var width;
@@ -14652,10 +14720,6 @@
           maxLineWidth = _attribute$maxLineWid5 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid5,
           _attribute$ellipsis4 = attribute.ellipsis,
           ellipsis = _attribute$ellipsis4 === void 0 ? textTheme.ellipsis : _attribute$ellipsis4,
-          _attribute$textAlign4 = attribute.textAlign,
-          textAlign = _attribute$textAlign4 === void 0 ? textTheme.textAlign : _attribute$textAlign4,
-          _attribute$textBaseli4 = attribute.textBaseline,
-          textBaseline = _attribute$textBaseli4 === void 0 ? textTheme.textBaseline : _attribute$textBaseli4,
           _attribute$fontFamily4 = attribute.fontFamily,
           fontFamily = _attribute$fontFamily4 === void 0 ? textTheme.fontFamily : _attribute$fontFamily4,
           _attribute$fontSize4 = attribute.fontSize,
@@ -14668,8 +14732,16 @@
           lineHeight = _attribute$lineHeight4 === void 0 ? null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf : _attribute$lineHeight4,
           _attribute$lineWidth4 = attribute.lineWidth,
           lineWidth = _attribute$lineWidth4 === void 0 ? textTheme.lineWidth : _attribute$lineWidth4,
-          _attribute$wordBreak4 = attribute.wordBreak;
-          _attribute$wordBreak4 === void 0 ? textTheme.wordBreak : _attribute$wordBreak4;
+          _attribute$verticalMo2 = attribute.verticalMode,
+          verticalMode = _attribute$verticalMo2 === void 0 ? textTheme.verticalMode : _attribute$verticalMo2;
+        var _attribute$textAlign4 = attribute.textAlign,
+          textAlign = _attribute$textAlign4 === void 0 ? textTheme.textAlign : _attribute$textAlign4,
+          _attribute$textBaseli4 = attribute.textBaseline,
+          textBaseline = _attribute$textBaseli4 === void 0 ? textTheme.textBaseline : _attribute$textBaseli4;
+        if (!verticalMode) {
+          var t = textAlign;
+          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+        }
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(function (item) {
             var w = item.reduce(function (a, b) {
@@ -14765,7 +14837,15 @@
     textBaseline: 1,
     fontFamily: 1,
     fontWeight: 1
-  }, NOWORK_ANIMATE_ATTR);
+  }, NOWORK_ANIMATE_ATTR), Text.baselineMapAlign = {
+    top: "left",
+    bottom: "right",
+    middle: "center"
+  }, Text.alignMapBaseline = {
+    left: "top",
+    right: "bottom",
+    center: "middle"
+  };
 
   var WRAP_TEXT_UPDATE_TAG_KEY = ["heightLimit", "lineClamp"];
   var WrapText = /*#__PURE__*/function (_Text) {
@@ -17599,7 +17679,7 @@
   }(Polygon);
   Pyramid3d.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 
-  var __decorate$1N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  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;
@@ -17629,9 +17709,9 @@
     }]);
     return DefaultOuterBorderBoundsContribution;
   }();
-  DefaultOuterBorderBoundsContribution = __decorate$1N([injectable()], DefaultOuterBorderBoundsContribution);
+  DefaultOuterBorderBoundsContribution = __decorate$1O([injectable()], DefaultOuterBorderBoundsContribution);
 
-  var __decorate$1M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1N = 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;
@@ -17648,9 +17728,9 @@
     }
     return _createClass(DefaultRectOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultRectOuterBorderBoundsContribution = __decorate$1M([injectable()], DefaultRectOuterBorderBoundsContribution);
+  DefaultRectOuterBorderBoundsContribution = __decorate$1N([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-  var __decorate$1L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1M = 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;
@@ -17686,9 +17766,9 @@
     }]);
     return DefaultSymbolOuterBorderBoundsContribution;
   }(DefaultOuterBorderBoundsContribution);
-  DefaultSymbolOuterBorderBoundsContribution = __decorate$1L([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+  DefaultSymbolOuterBorderBoundsContribution = __decorate$1M([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-  var __decorate$1K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1L = 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;
@@ -17705,9 +17785,9 @@
     }
     return _createClass(DefaultCircleOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultCircleOuterBorderBoundsContribution = __decorate$1K([injectable()], DefaultCircleOuterBorderBoundsContribution);
+  DefaultCircleOuterBorderBoundsContribution = __decorate$1L([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-  var __decorate$1J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1K = 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;
@@ -17724,9 +17804,9 @@
     }
     return _createClass(DefaultArcOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultArcOuterBorderBoundsContribution = __decorate$1J([injectable()], DefaultArcOuterBorderBoundsContribution);
+  DefaultArcOuterBorderBoundsContribution = __decorate$1K([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-  var __decorate$1I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1J = 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;
@@ -17743,7 +17823,7 @@
     }
     return _createClass(DefaultPathOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultPathOuterBorderBoundsContribution = __decorate$1I([injectable()], DefaultPathOuterBorderBoundsContribution);
+  DefaultPathOuterBorderBoundsContribution = __decorate$1J([injectable()], DefaultPathOuterBorderBoundsContribution);
 
   var MatrixAllocate = Symbol["for"]("MatrixAllocate");
   var Mat4Allocate = Symbol["for"]("Mat4Allocate");
@@ -17833,17 +17913,17 @@
   var matrixAllocate = new DefaultMatrixAllocate();
   var mat4Allocate = new DefaultMat4Allocate();
 
-  var __decorate$1H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1I = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$18 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$19 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$T = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$U = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -18055,6 +18135,7 @@
         onAttributeUpdate: new SyncHook(["graphic"]),
         onSetStage: new SyncHook(["graphic", "stage"]),
         onRemove: new SyncHook(["graphic"]),
+        onRelease: new SyncHook(["graphic"]),
         onAddIncremental: new SyncHook(["graphic", "group", "stage"]),
         onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
         beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
@@ -18076,6 +18157,11 @@
       value: function onRemove(graphic) {
         this.hooks.onRemove.taps.length && this.hooks.onRemove.call(graphic);
       }
+    }, {
+      key: "onRelease",
+      value: function onRelease(graphic) {
+        this.hooks.onRelease.taps.length && this.hooks.onRelease.call(graphic);
+      }
     }, {
       key: "onAddIncremental",
       value: function onAddIncremental(graphic, group, stage) {
@@ -18512,7 +18598,7 @@
     }]);
     return DefaultGraphicService;
   }();
-  exports.DefaultGraphicService = __decorate$1H([injectable(), __param$T(0, inject(GraphicCreator)), __param$T(1, inject(ContributionProvider)), __param$T(1, named(RectBoundsContribution)), __param$T(2, inject(ContributionProvider)), __param$T(2, named(SymbolBoundsContribution)), __param$T(3, inject(ContributionProvider)), __param$T(3, named(CircleBoundsContribution)), __param$T(4, inject(ContributionProvider)), __param$T(4, named(ArcBoundsContribution)), __param$T(5, inject(ContributionProvider)), __param$T(5, named(PathBoundsContribution)), __metadata$18("design:paramtypes", [Object, Object, Object, Object, Object, Object])], exports.DefaultGraphicService);
+  exports.DefaultGraphicService = __decorate$1I([injectable(), __param$U(0, inject(GraphicCreator)), __param$U(1, inject(ContributionProvider)), __param$U(1, named(RectBoundsContribution)), __param$U(2, inject(ContributionProvider)), __param$U(2, named(SymbolBoundsContribution)), __param$U(3, inject(ContributionProvider)), __param$U(3, named(CircleBoundsContribution)), __param$U(4, inject(ContributionProvider)), __param$U(4, named(ArcBoundsContribution)), __param$U(5, inject(ContributionProvider)), __param$U(5, named(PathBoundsContribution)), __metadata$19("design:paramtypes", [Object, Object, Object, Object, Object, Object])], exports.DefaultGraphicService);
 
   var ShadowRoot = /*#__PURE__*/function (_Group) {
     _inherits(ShadowRoot, _Group);
@@ -18646,7 +18732,7 @@
     return richText.setAttributes(params), richText.AABBBounds;
   }
 
-  var __decorate$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1H = 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;
@@ -18816,19 +18902,19 @@
     }]);
     return BaseRender;
   }();
-  exports.BaseRender = __decorate$1G([injectable()], exports.BaseRender);
+  exports.BaseRender = __decorate$1H([injectable()], exports.BaseRender);
 
-  var __decorate$1F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1G = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$17 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$18 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$S = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$T = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -18998,19 +19084,19 @@
     }]);
     return DefaultCanvasArcRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasArcRender = __decorate$1F([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(ArcRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.DefaultCanvasArcRender);
+  exports.DefaultCanvasArcRender = __decorate$1G([injectable(), __param$T(0, inject(ContributionProvider)), __param$T(0, named(ArcRenderContribution)), __metadata$18("design:paramtypes", [Object])], exports.DefaultCanvasArcRender);
 
-  var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1F = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$16 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$17 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$R = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$S = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -19056,7 +19142,7 @@
     }]);
     return DefaultCanvasCircleRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasCircleRender = __decorate$1E([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(CircleRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasCircleRender);
+  exports.DefaultCanvasCircleRender = __decorate$1F([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(CircleRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.DefaultCanvasCircleRender);
 
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
@@ -19196,7 +19282,7 @@
     }
   }
 
-  var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1E = 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;
@@ -19354,7 +19440,7 @@
     }]);
     return DefaultCanvasLineRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasLineRender = __decorate$1D([injectable()], exports.DefaultCanvasLineRender);
+  exports.DefaultCanvasLineRender = __decorate$1E([injectable()], exports.DefaultCanvasLineRender);
 
   function drawAreaSegments(path, segPath, percent, params) {
     var _a;
@@ -19495,17 +19581,17 @@
     }
   }
 
-  var __decorate$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1D = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$15 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$16 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$Q = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$R = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -19725,19 +19811,19 @@
     }]);
     return DefaultCanvasAreaRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasAreaRender = __decorate$1C([injectable(), __param$Q(0, inject(ContributionProvider)), __param$Q(0, named(AreaRenderContribution)), __metadata$15("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
+  exports.DefaultCanvasAreaRender = __decorate$1D([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(AreaRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
 
-  var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1C = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$14 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$15 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$P = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$Q = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -19783,7 +19869,7 @@
     }]);
     return DefaultCanvasPathRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasPathRender = __decorate$1B([injectable(), __param$P(0, inject(ContributionProvider)), __param$P(0, named(PathRenderContribution)), __metadata$14("design:paramtypes", [Object])], exports.DefaultCanvasPathRender);
+  exports.DefaultCanvasPathRender = __decorate$1C([injectable(), __param$Q(0, inject(ContributionProvider)), __param$Q(0, named(PathRenderContribution)), __metadata$15("design:paramtypes", [Object])], exports.DefaultCanvasPathRender);
 
   var halfPi = pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
@@ -19843,17 +19929,17 @@
     return path.closePath(), path;
   }
 
-  var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1B = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$13 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$14 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$O = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$P = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -19922,19 +20008,19 @@
     }]);
     return DefaultCanvasRectRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasRectRender = __decorate$1A([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(RectRenderContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultCanvasRectRender);
+  exports.DefaultCanvasRectRender = __decorate$1B([injectable(), __param$P(0, inject(ContributionProvider)), __param$P(0, named(RectRenderContribution)), __metadata$14("design:paramtypes", [Object])], exports.DefaultCanvasRectRender);
 
-  var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1A = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$12 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$13 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$N = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$O = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -19995,19 +20081,19 @@
     }]);
     return DefaultCanvasSymbolRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasSymbolRender = __decorate$1z([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(SymbolRenderContribution)), __metadata$12("design:paramtypes", [Object])], exports.DefaultCanvasSymbolRender);
+  exports.DefaultCanvasSymbolRender = __decorate$1A([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(SymbolRenderContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultCanvasSymbolRender);
 
-  var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1z = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$11 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$12 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$M = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$N = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -20025,7 +20111,7 @@
       key: "drawShape",
       value: function drawShape(text, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _this2 = this;
-        var _a;
+        var _a, _b, _c;
         var textAttribute = getTheme(text, null == params ? void 0 : params.theme).text,
           _text$attribute = text.attribute,
           str = _text$attribute.text,
@@ -20053,15 +20139,22 @@
           direction = _text$attribute$direc === void 0 ? textAttribute.direction : _text$attribute$direc,
           _text$attribute$fontS = _text$attribute.fontSize,
           fontSize = _text$attribute$fontS === void 0 ? textAttribute.fontSize : _text$attribute$fontS,
-          _text$attribute$textB = _text$attribute.textBaseline,
-          textBaseline = _text$attribute$textB === void 0 ? textAttribute.textBaseline : _text$attribute$textB,
-          _text$attribute$textA = _text$attribute.textAlign,
-          textAlign = _text$attribute$textA === void 0 ? textAttribute.textAlign : _text$attribute$textA,
+          _text$attribute$verti = _text$attribute.verticalMode,
+          verticalMode = _text$attribute$verti === void 0 ? textAttribute.verticalMode : _text$attribute$verti,
           _text$attribute$x = _text$attribute.x,
           originX = _text$attribute$x === void 0 ? textAttribute.x : _text$attribute$x,
           _text$attribute$y = _text$attribute.y,
-          originY = _text$attribute$y === void 0 ? textAttribute.y : _text$attribute$y,
-          lineHeight = null !== (_a = text.attribute.lineHeight) && void 0 !== _a ? _a : fontSize,
+          originY = _text$attribute$y === void 0 ? textAttribute.y : _text$attribute$y;
+        var _text$attribute2 = text.attribute,
+          _text$attribute2$text = _text$attribute2.textAlign,
+          textAlign = _text$attribute2$text === void 0 ? textAttribute.textAlign : _text$attribute2$text,
+          _text$attribute2$text2 = _text$attribute2.textBaseline,
+          textBaseline = _text$attribute2$text2 === void 0 ? textAttribute.textBaseline : _text$attribute2$text2;
+        if (!verticalMode && "vertical" === direction) {
+          var t = textAlign;
+          textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
+        }
+        var lineHeight = null !== (_c = text.attribute.lineHeight) && void 0 !== _c ? _c : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         var fVisible = data.fVisible,
@@ -20125,9 +20218,9 @@
           var _cache = text.cache;
           if ("horizontal" === direction) {
             context.setTextStyle(text.attribute, textAttribute, z);
-            var t = text.clipedText;
+            var _t = text.clipedText;
             var dy = 0;
-            lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
+            lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(_t, 0, dy, 0);
           } else if (_cache) {
             context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
             var _verticalList = _cache.verticalList;
@@ -20159,19 +20252,19 @@
       key: "drawUnderLine",
       value: function drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context) {
         if (lineThrough + underline <= 0) return;
-        var _text$attribute2 = text.attribute,
-          _text$attribute2$text = _text$attribute2.textAlign,
-          textAlign = _text$attribute2$text === void 0 ? textAttribute.textAlign : _text$attribute2$text,
-          _text$attribute2$text2 = _text$attribute2.textBaseline,
-          textBaseline = _text$attribute2$text2 === void 0 ? textAttribute.textBaseline : _text$attribute2$text2,
-          _text$attribute2$font = _text$attribute2.fontSize,
-          fontSize = _text$attribute2$font === void 0 ? textAttribute.fontSize : _text$attribute2$font,
-          _text$attribute2$fill = _text$attribute2.fill,
-          fill = _text$attribute2$fill === void 0 ? textAttribute.fill : _text$attribute2$fill,
-          _text$attribute2$opac = _text$attribute2.opacity,
-          opacity = _text$attribute2$opac === void 0 ? textAttribute.opacity : _text$attribute2$opac,
-          _text$attribute2$fill2 = _text$attribute2.fillOpacity,
-          fillOpacity = _text$attribute2$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute2$fill2,
+        var _text$attribute3 = text.attribute,
+          _text$attribute3$text = _text$attribute3.textAlign,
+          textAlign = _text$attribute3$text === void 0 ? textAttribute.textAlign : _text$attribute3$text,
+          _text$attribute3$text2 = _text$attribute3.textBaseline,
+          textBaseline = _text$attribute3$text2 === void 0 ? textAttribute.textBaseline : _text$attribute3$text2,
+          _text$attribute3$font = _text$attribute3.fontSize,
+          fontSize = _text$attribute3$font === void 0 ? textAttribute.fontSize : _text$attribute3$font,
+          _text$attribute3$fill = _text$attribute3.fill,
+          fill = _text$attribute3$fill === void 0 ? textAttribute.fill : _text$attribute3$fill,
+          _text$attribute3$opac = _text$attribute3.opacity,
+          opacity = _text$attribute3$opac === void 0 ? textAttribute.opacity : _text$attribute3$opac,
+          _text$attribute3$fill2 = _text$attribute3.fillOpacity,
+          fillOpacity = _text$attribute3$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute3$fill2,
           w = text.clipedWidth,
           offsetX = textDrawOffsetX(textAlign, w),
           offsetY = textLayoutOffsetY(textBaseline, fontSize, fontSize),
@@ -20196,17 +20289,17 @@
       key: "drawMultiUnderLine",
       value: function drawMultiUnderLine(underline, lineThrough, text, x, y, z, w, textAttribute, context) {
         if (lineThrough + underline <= 0) return;
-        var _text$attribute3 = text.attribute,
-          _text$attribute3$text = _text$attribute3.textAlign,
-          textAlign = _text$attribute3$text === void 0 ? textAttribute.textAlign : _text$attribute3$text,
-          _text$attribute3$font = _text$attribute3.fontSize,
-          fontSize = _text$attribute3$font === void 0 ? textAttribute.fontSize : _text$attribute3$font,
-          _text$attribute3$fill = _text$attribute3.fill,
-          fill = _text$attribute3$fill === void 0 ? textAttribute.fill : _text$attribute3$fill,
-          _text$attribute3$opac = _text$attribute3.opacity,
-          opacity = _text$attribute3$opac === void 0 ? textAttribute.opacity : _text$attribute3$opac,
-          _text$attribute3$fill2 = _text$attribute3.fillOpacity,
-          fillOpacity = _text$attribute3$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute3$fill2,
+        var _text$attribute4 = text.attribute,
+          _text$attribute4$text = _text$attribute4.textAlign,
+          textAlign = _text$attribute4$text === void 0 ? textAttribute.textAlign : _text$attribute4$text,
+          _text$attribute4$font = _text$attribute4.fontSize,
+          fontSize = _text$attribute4$font === void 0 ? textAttribute.fontSize : _text$attribute4$font,
+          _text$attribute4$fill = _text$attribute4.fill,
+          fill = _text$attribute4$fill === void 0 ? textAttribute.fill : _text$attribute4$fill,
+          _text$attribute4$opac = _text$attribute4.opacity,
+          opacity = _text$attribute4$opac === void 0 ? textAttribute.opacity : _text$attribute4$opac,
+          _text$attribute4$fill2 = _text$attribute4.fillOpacity,
+          fillOpacity = _text$attribute4$fill2 === void 0 ? textAttribute.fillOpacity : _text$attribute4$fill2,
           offsetX = textDrawOffsetX(textAlign, w),
           offsetY = textLayoutOffsetY("alphabetic", fontSize, fontSize),
           attribute = {
@@ -20230,9 +20323,9 @@
     }]);
     return DefaultCanvasTextRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasTextRender = __decorate$1y([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(TextRenderContribution)), __metadata$11("design:paramtypes", [Object])], exports.DefaultCanvasTextRender);
+  exports.DefaultCanvasTextRender = __decorate$1z([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(TextRenderContribution)), __metadata$12("design:paramtypes", [Object])], exports.DefaultCanvasTextRender);
 
-  var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1y = 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;
@@ -20242,7 +20335,7 @@
   exports.AbstractGraphicRender = /*#__PURE__*/_createClass(function AbstractGraphicRender() {
     _classCallCheck(this, AbstractGraphicRender);
   });
-  exports.AbstractGraphicRender = __decorate$1x([injectable()], exports.AbstractGraphicRender);
+  exports.AbstractGraphicRender = __decorate$1y([injectable()], exports.AbstractGraphicRender);
 
   function drawPolygon(path, points, x, y) {
     path.moveTo(points[0].x + x, points[0].y + y);
@@ -20295,17 +20388,17 @@
     };
   }
 
-  var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1x = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$10 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$11 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$L = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$M = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -20353,19 +20446,19 @@
     }]);
     return DefaultCanvasPolygonRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasPolygonRender = __decorate$1w([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(PolygonRenderContribution)), __metadata$10("design:paramtypes", [Object])], exports.DefaultCanvasPolygonRender);
+  exports.DefaultCanvasPolygonRender = __decorate$1x([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(PolygonRenderContribution)), __metadata$11("design:paramtypes", [Object])], exports.DefaultCanvasPolygonRender);
 
-  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$$ = undefined && undefined.__metadata || function (k, v) {
+    __metadata$10 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$K = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$L = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -20433,7 +20526,7 @@
     }]);
     return DefaultCanvasImageRender;
   }(exports.BaseRender);
-  exports.DefaultCanvasImageRender = __decorate$1v([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(ImageRenderContribution)), __metadata$$("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
+  exports.DefaultCanvasImageRender = __decorate$1w([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(ImageRenderContribution)), __metadata$10("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
 
   var IncrementalDrawContribution = Symbol["for"]("IncrementalDrawContribution");
   var ArcRender = Symbol["for"]("ArcRender");
@@ -20596,17 +20689,17 @@
   }();
   var canvasAllocate = new DefaultCanvasAllocate();
 
-  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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _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;
     },
-    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
+    __metadata$$ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$J = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$K = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -20640,7 +20733,7 @@
     }]);
     return DefaultBaseBackgroundRenderContribution;
   }();
-  exports.DefaultBaseBackgroundRenderContribution = __decorate$1u([injectable()], exports.DefaultBaseBackgroundRenderContribution);
+  exports.DefaultBaseBackgroundRenderContribution = __decorate$1v([injectable()], exports.DefaultBaseBackgroundRenderContribution);
   exports.DefaultBaseInteractiveRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseInteractiveRenderContribution(subRenderContribitions) {
       _classCallCheck(this, DefaultBaseInteractiveRenderContribution);
@@ -20656,7 +20749,7 @@
     }]);
     return DefaultBaseInteractiveRenderContribution;
   }();
-  exports.DefaultBaseInteractiveRenderContribution = __decorate$1u([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
+  exports.DefaultBaseInteractiveRenderContribution = __decorate$1v([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(InteractiveSubRenderContribution)), __metadata$$("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
   exports.DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -20797,9 +20890,9 @@
     }]);
     return DefaultBaseTextureRenderContribution;
   }();
-  exports.DefaultBaseTextureRenderContribution = __decorate$1u([injectable()], exports.DefaultBaseTextureRenderContribution);
+  exports.DefaultBaseTextureRenderContribution = __decorate$1v([injectable()], exports.DefaultBaseTextureRenderContribution);
 
-  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;
@@ -20881,7 +20974,7 @@
     }]);
     return DefaultArcRenderContribution;
   }();
-  exports.DefaultArcRenderContribution = __decorate$1t([injectable()], exports.DefaultArcRenderContribution);
+  exports.DefaultArcRenderContribution = __decorate$1u([injectable()], exports.DefaultArcRenderContribution);
   exports.DefaultArcBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultArcBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultArcBackgroundRenderContribution);
@@ -20893,7 +20986,7 @@
     }
     return _createClass(DefaultArcBackgroundRenderContribution);
   }(exports.DefaultBaseBackgroundRenderContribution);
-  exports.DefaultArcBackgroundRenderContribution = __decorate$1t([injectable()], exports.DefaultArcBackgroundRenderContribution);
+  exports.DefaultArcBackgroundRenderContribution = __decorate$1u([injectable()], exports.DefaultArcBackgroundRenderContribution);
   exports.DefaultArcTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultArcTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultArcTextureRenderContribution);
@@ -20905,9 +20998,9 @@
     }
     return _createClass(DefaultArcTextureRenderContribution);
   }(exports.DefaultBaseTextureRenderContribution);
-  exports.DefaultArcTextureRenderContribution = __decorate$1t([injectable()], exports.DefaultArcTextureRenderContribution);
+  exports.DefaultArcTextureRenderContribution = __decorate$1u([injectable()], exports.DefaultArcTextureRenderContribution);
 
-  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;
@@ -20969,7 +21062,7 @@
     }]);
     return DefaultCircleRenderContribution;
   }();
-  exports.DefaultCircleRenderContribution = __decorate$1s([injectable()], exports.DefaultCircleRenderContribution);
+  exports.DefaultCircleRenderContribution = __decorate$1t([injectable()], exports.DefaultCircleRenderContribution);
   exports.DefaultCircleBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultCircleBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultCircleBackgroundRenderContribution);
@@ -20981,7 +21074,7 @@
     }
     return _createClass(DefaultCircleBackgroundRenderContribution);
   }(exports.DefaultBaseBackgroundRenderContribution);
-  exports.DefaultCircleBackgroundRenderContribution = __decorate$1s([injectable()], exports.DefaultCircleBackgroundRenderContribution);
+  exports.DefaultCircleBackgroundRenderContribution = __decorate$1t([injectable()], exports.DefaultCircleBackgroundRenderContribution);
   exports.DefaultCircleTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultCircleTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultCircleTextureRenderContribution);
@@ -20993,9 +21086,9 @@
     }
     return _createClass(DefaultCircleTextureRenderContribution);
   }(exports.DefaultBaseTextureRenderContribution);
-  exports.DefaultCircleTextureRenderContribution = __decorate$1s([injectable()], exports.DefaultCircleTextureRenderContribution);
+  exports.DefaultCircleTextureRenderContribution = __decorate$1t([injectable()], exports.DefaultCircleTextureRenderContribution);
 
-  var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __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;
@@ -21026,9 +21119,9 @@
     }]);
     return DefaultGroupBackgroundRenderContribution;
   }(exports.DefaultBaseBackgroundRenderContribution);
-  exports.DefaultGroupBackgroundRenderContribution = __decorate$1r([injectable()], exports.DefaultGroupBackgroundRenderContribution);
+  exports.DefaultGroupBackgroundRenderContribution = __decorate$1s([injectable()], exports.DefaultGroupBackgroundRenderContribution);
 
-  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;
@@ -21093,7 +21186,7 @@
     }]);
     return DefaultImageBackgroundRenderContribution;
   }(exports.DefaultBaseBackgroundRenderContribution);
-  exports.DefaultImageBackgroundRenderContribution = __decorate$1q([injectable()], exports.DefaultImageBackgroundRenderContribution);
+  exports.DefaultImageBackgroundRenderContribution = __decorate$1r([injectable()], exports.DefaultImageBackgroundRenderContribution);
   function getActualPosition(graphic) {
     var boundsPadding = parsePadding(graphic.attribute.boundsPadding),
       bounds = graphic.AABBBounds;
@@ -21109,7 +21202,7 @@
     };
   }
 
-  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;
@@ -21181,7 +21274,7 @@
     }]);
     return DefaultRectRenderContribution;
   }();
-  exports.DefaultRectRenderContribution = __decorate$1p([injectable()], exports.DefaultRectRenderContribution);
+  exports.DefaultRectRenderContribution = __decorate$1q([injectable()], exports.DefaultRectRenderContribution);
   exports.DefaultRectBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultRectBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultRectBackgroundRenderContribution);
@@ -21193,7 +21286,7 @@
     }
     return _createClass(DefaultRectBackgroundRenderContribution);
   }(exports.DefaultBaseBackgroundRenderContribution);
-  exports.DefaultRectBackgroundRenderContribution = __decorate$1p([injectable()], exports.DefaultRectBackgroundRenderContribution);
+  exports.DefaultRectBackgroundRenderContribution = __decorate$1q([injectable()], exports.DefaultRectBackgroundRenderContribution);
   exports.DefaultRectTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultRectTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultRectTextureRenderContribution);
@@ -21205,7 +21298,7 @@
     }
     return _createClass(DefaultRectTextureRenderContribution);
   }(exports.DefaultBaseTextureRenderContribution);
-  exports.DefaultRectTextureRenderContribution = __decorate$1p([injectable()], exports.DefaultRectTextureRenderContribution);
+  exports.DefaultRectTextureRenderContribution = __decorate$1q([injectable()], exports.DefaultRectTextureRenderContribution);
   exports.SplitRectBeforeRenderContribution = /*#__PURE__*/function () {
     function SplitRectBeforeRenderContribution() {
       _classCallCheck(this, SplitRectBeforeRenderContribution);
@@ -21223,7 +21316,7 @@
     }]);
     return SplitRectBeforeRenderContribution;
   }();
-  exports.SplitRectBeforeRenderContribution = __decorate$1p([injectable()], exports.SplitRectBeforeRenderContribution);
+  exports.SplitRectBeforeRenderContribution = __decorate$1q([injectable()], exports.SplitRectBeforeRenderContribution);
   exports.SplitRectAfterRenderContribution = /*#__PURE__*/function () {
     function SplitRectAfterRenderContribution() {
       _classCallCheck(this, SplitRectAfterRenderContribution);
@@ -21252,9 +21345,9 @@
     }]);
     return SplitRectAfterRenderContribution;
   }();
-  exports.SplitRectAfterRenderContribution = __decorate$1p([injectable()], exports.SplitRectAfterRenderContribution);
+  exports.SplitRectAfterRenderContribution = __decorate$1q([injectable()], exports.SplitRectAfterRenderContribution);
 
-  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;
@@ -21314,7 +21407,7 @@
     }]);
     return DefaultSymbolRenderContribution;
   }();
-  exports.DefaultSymbolRenderContribution = __decorate$1o([injectable()], exports.DefaultSymbolRenderContribution);
+  exports.DefaultSymbolRenderContribution = __decorate$1p([injectable()], exports.DefaultSymbolRenderContribution);
   var DefaultSymbolBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultSymbolBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultSymbolBackgroundRenderContribution);
@@ -21338,17 +21431,17 @@
     return _createClass(DefaultSymbolTextureRenderContribution);
   }(exports.DefaultBaseTextureRenderContribution);
 
-  var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$Z = undefined && undefined.__metadata || function (k, v) {
+    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$I = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$J = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -21405,7 +21498,7 @@
     }]);
     return DefaultRenderService;
   }();
-  exports.DefaultRenderService = __decorate$1n([injectable(), __param$I(0, inject(DrawContribution)), __metadata$Z("design:paramtypes", [Object])], exports.DefaultRenderService);
+  exports.DefaultRenderService = __decorate$1o([injectable(), __param$J(0, inject(DrawContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
     bind(exports.DefaultRenderService).toSelf(), bind(RenderService).toService(exports.DefaultRenderService);
@@ -21416,17 +21509,17 @@
   var BoundsPicker = Symbol["for"]("BoundsPicker");
   var GlobalPickerService = Symbol["for"]("GlobalPickerService");
 
-  var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1n = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$Y = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Z = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$H = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$I = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -21451,7 +21544,14 @@
         };
         var parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         var group;
-        for (var i = 0; i < graphics.length && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i++) group || (group = result.group);
+        for (var i = 0; i < graphics.length; i++) {
+          if (graphics[i].isContainer) result = this.pickGroup(graphics[i], point, parentMatrix, params);else {
+            var data = this.pickItem(graphics[i], point, parentMatrix, params);
+            data && (result.graphic = data.graphic, result.params = data.params);
+          }
+          if (result.graphic) break;
+          group || (group = result.group);
+        }
         if (result.graphic || (result.group = group), result.graphic) {
           var g = result.graphic;
           for (; g.parent;) g = g.parent;
@@ -21484,7 +21584,9 @@
         return parentMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 !== group.attribute.childrenPickable && group.forEachChildren(function (graphic) {
           if (graphic.isContainer) result = _this2.pickGroup(graphic, point, parentMatrix, params);else {
             var _newPoint = new Point(point.x, point.y);
-            parentMatrix.transformPoint(_newPoint, _newPoint), result.graphic = _this2.pickItem(graphic, _newPoint, parentMatrix, params);
+            parentMatrix.transformPoint(_newPoint, _newPoint);
+            var data = _this2.pickItem(graphic, _newPoint, parentMatrix, params);
+            data && (result.graphic = data.graphic, result.params = data.params);
           }
           return !!result.graphic || !!result.group;
         }), result.graphic || result.group || !groupPicked || (result.group = group), result;
@@ -21492,14 +21594,16 @@
     }, {
       key: "pickItem",
       value: function pickItem(graphic, point, parentMatrix, params) {
-        return !1 === graphic.attribute.pickable ? null : graphic.AABBBounds.containsPoint(point) ? graphic : null;
+        return !1 === graphic.attribute.pickable ? null : graphic.AABBBounds.containsPoint(point) ? {
+          graphic: graphic
+        } : null;
       }
     }]);
     return DefaultGlobalPickerService;
   }();
-  exports.DefaultGlobalPickerService = __decorate$1m([injectable(), __param$H(0, inject(VGlobal)), __metadata$Y("design:paramtypes", [Object])], exports.DefaultGlobalPickerService);
+  exports.DefaultGlobalPickerService = __decorate$1n([injectable(), __param$I(0, inject(VGlobal)), __metadata$Z("design:paramtypes", [Object])], exports.DefaultGlobalPickerService);
 
-  var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1m = 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;
@@ -21515,20 +21619,20 @@
     _createClass(ShadowRootPickItemInterceptorContribution, [{
       key: "afterPickItem",
       value: function afterPickItem(graphic, pickerService, point, pickParams, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this._pickItem(graphic, pickerService, point, pickParams, params);
+        return graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
       }
     }, {
       key: "beforePickItem",
       value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this._pickItem(graphic, pickerService, point, pickParams, params);
+        return graphic.attribute.shadowRootIdx < 0 ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
       }
     }, {
       key: "_pickItem",
       value: function _pickItem(graphic, pickerService, point, pickParams, params) {
-        if (!graphic.shadowRoot) return !1;
+        if (!graphic.shadowRoot) return null;
         var _ref = params || {},
           parentMatrix = _ref.parentMatrix;
-        if (!parentMatrix) return !1;
+        if (!parentMatrix) return null;
         var context = pickerService.pickContext;
         context.highPerformanceSave();
         var g = graphic.shadowRoot,
@@ -21543,7 +21647,7 @@
     }]);
     return ShadowRootPickItemInterceptorContribution;
   }();
-  exports.ShadowRootPickItemInterceptorContribution = __decorate$1l([injectable()], exports.ShadowRootPickItemInterceptorContribution);
+  exports.ShadowRootPickItemInterceptorContribution = __decorate$1m([injectable()], exports.ShadowRootPickItemInterceptorContribution);
   exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -21620,7 +21724,7 @@
     }]);
     return Canvas3DPickItemInterceptor;
   }();
-  exports.Canvas3DPickItemInterceptor = __decorate$1l([injectable()], exports.Canvas3DPickItemInterceptor);
+  exports.Canvas3DPickItemInterceptor = __decorate$1m([injectable()], exports.Canvas3DPickItemInterceptor);
 
   var pickModule = new ContainerModule(function (bind) {
     bind(PickerService).toService(GlobalPickerService), bind(exports.DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(exports.DefaultGlobalPickerService), bind(exports.Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor), bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -21633,17 +21737,17 @@
   var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
   var PluginService = Symbol["for"]("PluginService");
 
-  var __decorate$1k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1l = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$X = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Y = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$H = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -21691,7 +21795,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$1k([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(AutoEnablePlugins)), __metadata$X("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$1l([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(AutoEnablePlugins)), __metadata$Y("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(DefaultPluginService).toSelf(), bind(PluginService).toService(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -21705,17 +21809,17 @@
     bind(exports.DefaultTextMeasureContribution).toSelf().inSingletonScope(), bind(TextMeasureContribution).toService(exports.DefaultTextMeasureContribution), bindContributionProvider(bind, TextMeasureContribution);
   });
 
-  var __decorate$1j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1k = 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 === "undefined" ? "undefined" : _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;
     },
-    __metadata$W = undefined && undefined.__metadata || function (k, v) {
+    __metadata$X = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -21723,7 +21827,7 @@
   var CanvasLayerHandlerContribution = /*#__PURE__*/function () {
     function CanvasLayerHandlerContribution(global) {
       _classCallCheck(this, CanvasLayerHandlerContribution);
-      this.global = global, this.offscreen = !1;
+      this.global = global, this.type = "static", this.offscreen = !1;
     }
     _createClass(CanvasLayerHandlerContribution, [{
       key: "setDpr",
@@ -21810,7 +21914,79 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1j([injectable(), __param$F(0, inject(VGlobal)), __metadata$W("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1k([injectable(), __param$G(0, inject(VGlobal)), __metadata$X("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+
+  var __decorate$1j = 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 === "undefined" ? "undefined" : _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;
+    },
+    __metadata$W = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    },
+    __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
+      return function (target, key) {
+        decorator(target, key, paramIndex);
+      };
+    };
+  var EmptyLayerHandlerContribution = /*#__PURE__*/function () {
+    function EmptyLayerHandlerContribution(global) {
+      _classCallCheck(this, EmptyLayerHandlerContribution);
+      this.global = global, this.type = "virtual", this.offscreen = !1;
+    }
+    _createClass(EmptyLayerHandlerContribution, [{
+      key: "setDpr",
+      value: function setDpr(dpr) {}
+    }, {
+      key: "init",
+      value: function init(layer, window, params) {
+        if (this.layer = layer, this.window = window, params.main) throw new Error("virtual layer不能作为main layer");
+        this.main = !1, this.canvas = null, this.context = null;
+      }
+    }, {
+      key: "resize",
+      value: function resize(w, h) {}
+    }, {
+      key: "resizeView",
+      value: function resizeView(w, h) {}
+    }, {
+      key: "render",
+      value: function render(group, params, userParams) {
+        this.mainHandler.render(group, params, Object.assign(Object.assign({}, userParams), {
+          clear: !1
+        }));
+      }
+    }, {
+      key: "merge",
+      value: function merge(layerHandlers) {}
+    }, {
+      key: "prepare",
+      value: function prepare(dirtyBounds, params) {}
+    }, {
+      key: "drawTo",
+      value: function drawTo(target, group, params) {
+        var _a;
+        var context = target.getContext();
+        params.renderService.render(group, Object.assign(Object.assign({
+          context: context
+        }, params), {
+          clear: params.clear ? null !== (_a = params.background) && void 0 !== _a ? _a : "#fff" : void 0
+        }));
+      }
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        return null;
+      }
+    }, {
+      key: "release",
+      value: function release() {}
+    }]);
+    return EmptyLayerHandlerContribution;
+  }();
+  EmptyLayerHandlerContribution = __decorate$1j([injectable(), __param$F(0, inject(VGlobal)), __metadata$W("design:paramtypes", [Object])], EmptyLayerHandlerContribution);
 
   var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -21830,7 +22006,7 @@
   var OffscreenLayerHandlerContribution = /*#__PURE__*/function () {
     function OffscreenLayerHandlerContribution(global) {
       _classCallCheck(this, OffscreenLayerHandlerContribution);
-      this.global = global, this.offscreen = !0;
+      this.global = global, this.type = "dynamic", this.offscreen = !0;
     }
     _createClass(OffscreenLayerHandlerContribution, [{
       key: "setDpr",
@@ -21914,7 +22090,7 @@
   OffscreenLayerHandlerContribution = __decorate$1i([injectable(), __param$E(0, inject(VGlobal)), __metadata$V("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
 
   var layerHandlerModules = new ContainerModule(function (bind) {
-    bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(LayerHandlerContribution).toService(CanvasLayerHandlerContribution);
+    bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
   });
 
   function load$1(container) {
@@ -22078,6 +22254,71 @@
     return ShadowRootDrawItemInterceptorContribution;
   }();
   ShadowRootDrawItemInterceptorContribution = __decorate$1h([injectable()], ShadowRootDrawItemInterceptorContribution);
+  var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function CommonDrawItemInterceptorContribution() {
+      _classCallCheck(this, CommonDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(CommonDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+    }, {
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+    }, {
+      key: "drawItem",
+      value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.attribute._debug_bounds) return !1;
+        var context = drawContext.context;
+        context.highPerformanceSave();
+        var b = graphic.AABBBounds;
+        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
+      }
+    }]);
+    return CommonDrawItemInterceptorContribution;
+  }();
+  CommonDrawItemInterceptorContribution = __decorate$1h([injectable()], CommonDrawItemInterceptorContribution);
+  var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function InteractiveDrawItemInterceptorContribution() {
+      _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(InteractiveDrawItemInterceptorContribution, [{
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        var interactiveGraphic;
+        if (graphic.attribute.interactive) {
+          interactiveGraphic = graphic.interactiveGraphic, interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic);
+          var m = graphic.globalTransMatrix;
+          interactiveGraphic.setAttributes({
+            x: 0,
+            y: 0,
+            scaleX: 1,
+            scaleY: 1,
+            angle: 0,
+            postMatrix: m,
+            interactive: !1
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          return interactiveLayer && interactiveLayer.add(interactiveGraphic), !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          var _interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          _interactiveLayer && _interactiveLayer.removeChild(interactiveGraphic);
+        }
+        return !1;
+      }
+    }]);
+    return InteractiveDrawItemInterceptorContribution;
+  }();
+  InteractiveDrawItemInterceptorContribution = __decorate$1h([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -23659,7 +23900,7 @@
   DefaultAreaTextureRenderContribution = __decorate$13([injectable()], DefaultAreaTextureRenderContribution);
 
   var renderModule = new ContainerModule(function (bind) {
-    bind(DefaultDrawContribution).toSelf(), bind(DrawContribution).toService(DefaultDrawContribution), bind(DefaultIncrementalDrawContribution).toSelf(), bind(IncrementalDrawContribution).toService(DefaultIncrementalDrawContribution), bind(DefaultRenderSelector).toSelf(), bind(RenderSelector).toService(DefaultRenderSelector), bind(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(exports.DefaultCanvasCircleRender), bind(GraphicRender).to(exports.DefaultCanvasCircleRender), bind(exports.DefaultCircleRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultCircleBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultCircleTextureRenderContribution).toSelf().inSingletonScope(), bind(CircleRenderContribution).toService(exports.DefaultCircleRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultCircleBackgroundRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultCircleTextureRenderContribution), bindContributionProvider(bind, CircleRenderContribution), bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(exports.DefaultCanvasRectRender), bind(GraphicRender).to(exports.DefaultCanvasRectRender), bind(DefaultCanvasRect3dRender).toSelf().inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender), bind(exports.DefaultRectRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultRectBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultRectTextureRenderContribution).toSelf().inSingletonScope(), bind(exports.SplitRectBeforeRenderContribution).toSelf().inSingletonScope(), bind(exports.SplitRectAfterRenderContribution).toSelf().inSingletonScope(), bind(RectRenderContribution).toService(exports.DefaultRectRenderContribution), bind(RectRenderContribution).toService(exports.DefaultRectBackgroundRenderContribution), bind(RectRenderContribution).toService(exports.DefaultRectTextureRenderContribution), bind(RectRenderContribution).toService(exports.SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(exports.SplitRectAfterRenderContribution), bindContributionProvider(bind, RectRenderContribution), bind(exports.DefaultCanvasTextRender).toSelf().inSingletonScope(), bind(TextRender).to(exports.DefaultCanvasTextRender), bind(GraphicRender).to(exports.DefaultCanvasTextRender), bindContributionProvider(bind, TextRenderContribution), bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(exports.DefaultCanvasPathRender), bind(GraphicRender).to(exports.DefaultCanvasPathRender), bind(DefaultPathBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPathTextureRenderContribution).toSelf().inSingletonScope(), bind(PathRenderContribution).toService(DefaultPathBackgroundRenderContribution), bind(PathRenderContribution).toService(DefaultPathTextureRenderContribution), bindContributionProvider(bind, PathRenderContribution), bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(exports.DefaultCanvasSymbolRender), bind(GraphicRender).to(exports.DefaultCanvasSymbolRender), bind(exports.DefaultSymbolRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolTextureRenderContribution).toSelf().inSingletonScope(), bind(SymbolRenderContribution).toService(exports.DefaultSymbolRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolBackgroundRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolTextureRenderContribution), bindContributionProvider(bind, SymbolRenderContribution), bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(exports.DefaultCanvasArcRender), bind(GraphicRender).to(exports.DefaultCanvasArcRender), bind(DefaultCanvasArc3DRender).toSelf().inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender), bind(exports.DefaultArcRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultArcBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultArcTextureRenderContribution).toSelf().inSingletonScope(), bind(ArcRenderContribution).toService(exports.DefaultArcRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultArcBackgroundRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultArcTextureRenderContribution), bindContributionProvider(bind, ArcRenderContribution), bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(exports.DefaultCanvasLineRender), bind(GraphicRender).to(exports.DefaultCanvasLineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(exports.DefaultCanvasAreaRender), bind(GraphicRender).to(exports.DefaultCanvasAreaRender), bind(DefaultAreaBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultAreaTextureRenderContribution).toSelf().inSingletonScope(), bind(AreaRenderContribution).toService(DefaultAreaBackgroundRenderContribution), bind(AreaRenderContribution).toService(DefaultAreaTextureRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultCanvasGroupRender).toSelf().inSingletonScope(), bind(GroupRender).to(DefaultCanvasGroupRender), bind(GraphicRender).to(DefaultCanvasGroupRender), bind(exports.DefaultGroupBackgroundRenderContribution).toSelf().inSingletonScope(), bind(GroupRenderContribution).toService(exports.DefaultGroupBackgroundRenderContribution), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultCanvasPolygonRender).toSelf().inSingletonScope(), bind(PolygonRender).to(exports.DefaultCanvasPolygonRender), bind(GraphicRender).to(exports.DefaultCanvasPolygonRender), bind(DefaultPolygonBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPolygonTextureRenderContribution).toSelf().inSingletonScope(), bind(PolygonRenderContribution).toService(DefaultPolygonBackgroundRenderContribution), bind(PolygonRenderContribution).toService(DefaultPolygonTextureRenderContribution), bindContributionProvider(bind, PolygonRenderContribution), bind(DefaultCanvasGlyphRender).toSelf().inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender), bind(exports.DefaultCanvasImageRender).toSelf().inSingletonScope(), bind(ImageRender).toService(exports.DefaultCanvasImageRender), bind(GraphicRender).toService(ImageRender), bind(exports.DefaultImageBackgroundRenderContribution).toSelf().inSingletonScope(), bind(ImageRenderContribution).toService(exports.DefaultImageBackgroundRenderContribution), bindContributionProvider(bind, ImageRenderContribution), bind(DefaultCanvasRichTextRender).toSelf().inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender), bind(DefaultCanvasPyramid3dRender).toSelf().inSingletonScope(), bind(Pyramid3dRender).toService(DefaultCanvasPyramid3dRender), bind(GraphicRender).toService(Pyramid3dRender), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(ShadowRootDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(ShadowRootDrawItemInterceptorContribution), bind(Canvas3DDrawItemInterceptor).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(Canvas3DDrawItemInterceptor), bindContributionProvider(bind, DrawItemInterceptor);
+    bind(DefaultDrawContribution).toSelf(), bind(DrawContribution).toService(DefaultDrawContribution), bind(DefaultIncrementalDrawContribution).toSelf(), bind(IncrementalDrawContribution).toService(DefaultIncrementalDrawContribution), bind(DefaultRenderSelector).toSelf(), bind(RenderSelector).toService(DefaultRenderSelector), bind(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(exports.DefaultCanvasCircleRender), bind(GraphicRender).to(exports.DefaultCanvasCircleRender), bind(exports.DefaultCircleRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultCircleBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultCircleTextureRenderContribution).toSelf().inSingletonScope(), bind(CircleRenderContribution).toService(exports.DefaultCircleRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultCircleBackgroundRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultCircleTextureRenderContribution), bindContributionProvider(bind, CircleRenderContribution), bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(exports.DefaultCanvasRectRender), bind(GraphicRender).to(exports.DefaultCanvasRectRender), bind(DefaultCanvasRect3dRender).toSelf().inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender), bind(exports.DefaultRectRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultRectBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultRectTextureRenderContribution).toSelf().inSingletonScope(), bind(exports.SplitRectBeforeRenderContribution).toSelf().inSingletonScope(), bind(exports.SplitRectAfterRenderContribution).toSelf().inSingletonScope(), bind(RectRenderContribution).toService(exports.DefaultRectRenderContribution), bind(RectRenderContribution).toService(exports.DefaultRectBackgroundRenderContribution), bind(RectRenderContribution).toService(exports.DefaultRectTextureRenderContribution), bind(RectRenderContribution).toService(exports.SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(exports.SplitRectAfterRenderContribution), bindContributionProvider(bind, RectRenderContribution), bind(exports.DefaultCanvasTextRender).toSelf().inSingletonScope(), bind(TextRender).to(exports.DefaultCanvasTextRender), bind(GraphicRender).to(exports.DefaultCanvasTextRender), bindContributionProvider(bind, TextRenderContribution), bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(exports.DefaultCanvasPathRender), bind(GraphicRender).to(exports.DefaultCanvasPathRender), bind(DefaultPathBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPathTextureRenderContribution).toSelf().inSingletonScope(), bind(PathRenderContribution).toService(DefaultPathBackgroundRenderContribution), bind(PathRenderContribution).toService(DefaultPathTextureRenderContribution), bindContributionProvider(bind, PathRenderContribution), bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(exports.DefaultCanvasSymbolRender), bind(GraphicRender).to(exports.DefaultCanvasSymbolRender), bind(exports.DefaultSymbolRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolTextureRenderContribution).toSelf().inSingletonScope(), bind(SymbolRenderContribution).toService(exports.DefaultSymbolRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolBackgroundRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolTextureRenderContribution), bindContributionProvider(bind, SymbolRenderContribution), bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(exports.DefaultCanvasArcRender), bind(GraphicRender).to(exports.DefaultCanvasArcRender), bind(DefaultCanvasArc3DRender).toSelf().inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender), bind(exports.DefaultArcRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultArcBackgroundRenderContribution).toSelf().inSingletonScope(), bind(exports.DefaultArcTextureRenderContribution).toSelf().inSingletonScope(), bind(ArcRenderContribution).toService(exports.DefaultArcRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultArcBackgroundRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultArcTextureRenderContribution), bindContributionProvider(bind, ArcRenderContribution), bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(exports.DefaultCanvasLineRender), bind(GraphicRender).to(exports.DefaultCanvasLineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(exports.DefaultCanvasAreaRender), bind(GraphicRender).to(exports.DefaultCanvasAreaRender), bind(DefaultAreaBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultAreaTextureRenderContribution).toSelf().inSingletonScope(), bind(AreaRenderContribution).toService(DefaultAreaBackgroundRenderContribution), bind(AreaRenderContribution).toService(DefaultAreaTextureRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultCanvasGroupRender).toSelf().inSingletonScope(), bind(GroupRender).to(DefaultCanvasGroupRender), bind(GraphicRender).to(DefaultCanvasGroupRender), bind(exports.DefaultGroupBackgroundRenderContribution).toSelf().inSingletonScope(), bind(GroupRenderContribution).toService(exports.DefaultGroupBackgroundRenderContribution), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultCanvasPolygonRender).toSelf().inSingletonScope(), bind(PolygonRender).to(exports.DefaultCanvasPolygonRender), bind(GraphicRender).to(exports.DefaultCanvasPolygonRender), bind(DefaultPolygonBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPolygonTextureRenderContribution).toSelf().inSingletonScope(), bind(PolygonRenderContribution).toService(DefaultPolygonBackgroundRenderContribution), bind(PolygonRenderContribution).toService(DefaultPolygonTextureRenderContribution), bindContributionProvider(bind, PolygonRenderContribution), bind(DefaultCanvasGlyphRender).toSelf().inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender), bind(exports.DefaultCanvasImageRender).toSelf().inSingletonScope(), bind(ImageRender).toService(exports.DefaultCanvasImageRender), bind(GraphicRender).toService(ImageRender), bind(exports.DefaultImageBackgroundRenderContribution).toSelf().inSingletonScope(), bind(ImageRenderContribution).toService(exports.DefaultImageBackgroundRenderContribution), bindContributionProvider(bind, ImageRenderContribution), bind(DefaultCanvasRichTextRender).toSelf().inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender), bind(DefaultCanvasPyramid3dRender).toSelf().inSingletonScope(), bind(Pyramid3dRender).toService(DefaultCanvasPyramid3dRender), bind(GraphicRender).toService(Pyramid3dRender), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(ShadowRootDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(ShadowRootDrawItemInterceptorContribution), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bind(Canvas3DDrawItemInterceptor).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(Canvas3DDrawItemInterceptor), bind(InteractiveDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(InteractiveDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -23817,6 +24058,8 @@
         var _this = this;
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, function (stage) {
           stage && stage === _this.pluginService.stage && _this.drawHTML(context.stage.renderService);
+        }), application.graphicService.hooks.onRelease.tap(this.key, function (graphic) {
+          _this.removeDom(graphic);
         });
       }
     }, {
@@ -23846,6 +24089,13 @@
           g.isContainer ? _this4.renderGroupHTML(g) : _this4.renderGraphicHTML(g);
         });
       }
+    }, {
+      key: "removeDom",
+      value: function removeDom(graphic) {
+        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
+          item.dom && item.dom.parentElement.removeChild(item.dom);
+        }), graphic.bindDom.clear());
+      }
     }, {
       key: "renderGraphicHTML",
       value: function renderGraphicHTML(graphic) {
@@ -24334,7 +24584,7 @@
         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.renderCount = 0, _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(_assertThisInitialized(_this), {
+      }), _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._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(_assertThisInitialized(_this), {
         main: !0
       })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, _this.global.supportEvent && (_this.eventSystem = new EventSystem({
         targetElement: _this.window,
@@ -24637,10 +24887,10 @@
       }
     }, {
       key: "createLayer",
-      value: function createLayer(canvasId) {
+      value: function createLayer(layerMode) {
         var layer = this.layerService.createLayer(this, {
           main: !1,
-          canvasId: canvasId
+          layerMode: layerMode
         });
         return this.appendChild(layer), layer;
       }
@@ -24671,57 +24921,48 @@
     }, {
       key: "render",
       value: function render(layers, params) {
-        var _this10 = this;
-        this.ticker.start(), this.timeline.resume(), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), (layers || this).forEach(function (layer, i) {
-          layer.render({
-            renderService: _this10.renderService,
-            background: layer === _this10.defaultLayer ? _this10.background : void 0,
-            updateBounds: !!_this10.dirtyBounds
-          }, Object.assign({
-            renderStyle: _this10.renderStyle
-          }, params));
-        }), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this._skipRender && this._skipRender++;
+        this.ticker.start(), this.timeline.resume();
+        var state = this.state;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "combineLayersToWindow",
-      value: function combineLayersToWindow() {
-        var _this11 = this;
-        this.forEach(function (layer, i) {
-          layer.combineTo(_this11.window, {
-            clear: 0 === i,
-            x: _this11.x,
-            y: _this11.y,
-            width: _this11.viewWidth,
-            height: _this11.viewHeight,
-            renderService: _this11.renderService,
-            background: layer === _this11.defaultLayer ? _this11.background : void 0,
-            updateBounds: !!_this11.dirtyBounds
-          });
-        });
-      }
+      value: function combineLayersToWindow() {}
     }, {
       key: "renderNextFrame",
-      value: function renderNextFrame(layers) {
-        var _this12 = this;
-        this.nextFrameRenderLayerSet.size !== this.childrenCount && (layers || this).forEach(function (layer) {
-          _this12.nextFrameRenderLayerSet.add(layer);
+      value: function renderNextFrame(layers, force) {
+        var _this10 = this;
+        ("rendering" !== this.state || force) && (this.nextFrameRenderLayerSet.size !== this.childrenCount && (layers || this).forEach(function (layer) {
+          _this10.nextFrameRenderLayerSet.add(layer);
         }), this.willNextFrameRender || (this.willNextFrameRender = !0, this.global.getRequestAnimationFrame()(function () {
-          _this12._doRenderInThisFrame(), _this12.willNextFrameRender = !1;
-        }));
+          _this10._doRenderInThisFrame(), _this10.willNextFrameRender = !1;
+        })));
       }
     }, {
       key: "_doRenderInThisFrame",
       value: function _doRenderInThisFrame() {
-        var _this13 = this;
-        this.timeline.resume(), this.ticker.start(), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this.forEach(function (layer) {
-          _this13.nextFrameRenderLayerSet.has(layer) && layer.render({
-            renderService: _this13.renderService,
-            background: layer === _this13.defaultLayer ? _this13.background : void 0,
-            updateBounds: !!_this13.dirtyBounds
+        this.timeline.resume(), this.ticker.start();
+        var 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++;
+      }
+    }, {
+      key: "renderLayerList",
+      value: function renderLayerList(layerList, params) {
+        var _this11 = this;
+        var list = [];
+        for (var i = 0; i < layerList.length; i++) {
+          var l = layerList[i];
+          "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
+        }
+        list.forEach(function (layer) {
+          layer.renderCount > _this11.renderCount || (layer.renderCount = _this11.renderCount + 1, layer.render({
+            renderService: _this11.renderService,
+            background: layer === _this11.defaultLayer ? _this11.background : void 0,
+            updateBounds: !!_this11.dirtyBounds
           }, Object.assign({
-            renderStyle: _this13.renderStyle
-          }, _this13.lastRenderparams || {}));
-        }), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), this._skipRender && this._skipRender++;
+            renderStyle: _this11.renderStyle
+          }, params)));
+        });
       }
     }, {
       key: "resizeWindow",
@@ -24751,10 +24992,10 @@
     }, {
       key: "setViewBox",
       value: function setViewBox(x, y, w, h, rerender) {
-        var _this14 = this;
+        var _this12 = this;
         var isRerender = !0;
         "object" == _typeof(x) ? (this.viewBox.setValue(x.x1, x.y1, x.x2, x.y2), !1 === y && (isRerender = !1)) : (this.viewBox.setValue(x, y, x + w, y + h), !1 === rerender && (isRerender = !1)), this.forEachChildren(function (c) {
-          c.resizeView(_this14.viewBox.width(), _this14.viewBox.height());
+          c.resizeView(_this12.viewBox.width(), _this12.viewBox.height());
         }), isRerender && this.render();
       }
     }, {
@@ -24818,13 +25059,13 @@
     }, {
       key: "renderTo",
       value: function renderTo(window, params) {
-        var _this15 = this;
+        var _this13 = this;
         this.forEachChildren(function (layer, i) {
           layer.drawTo(window, Object.assign(Object.assign({}, params), {
-            renderService: _this15.renderService,
-            background: layer === _this15.defaultLayer ? _this15.background : void 0,
+            renderService: _this13.renderService,
+            background: layer === _this13.defaultLayer ? _this13.background : void 0,
             clear: 0 === i,
-            updateBounds: !!_this15.dirtyBounds
+            updateBounds: !!_this13.dirtyBounds
           }));
         });
       }
@@ -25616,7 +25857,7 @@
         this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
         var parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
         var group;
-        for (var i = graphics.length - 1; i >= 0 && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
+        for (var 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 && (this.pickContext.inuse = !1), result.graphic) {
           var g = result.graphic;
           for (; g.parent;) g = g.parent;
@@ -25668,9 +25909,9 @@
         var insideGroup = group.AABBBounds.containsPoint(newPoint);
         if (!insideGroup && !group.stage.camera) return result;
         var pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
-        pickedItem && (result.graphic = pickedItem);
+        pickedItem && pickedItem.graphic && (result.graphic = pickedItem.graphic, result.params = pickedItem.params);
         var groupPicked = !1 !== group.attribute.pickable && insideGroup;
-        return currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 === group.attribute.childrenPickable || pickedItem || foreach(group, DefaultAttribute.zIndex, function (graphic) {
+        return currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 === group.attribute.childrenPickable || pickedItem && pickedItem.graphic || foreach(group, DefaultAttribute.zIndex, function (graphic) {
           if (graphic.isContainer) {
             var _newPoint = new Point(point.x, point.y),
               theme = getTheme(group).group,
@@ -25691,7 +25932,7 @@
               _scrollY = _group$attribute2$scr2 === void 0 ? _theme.scrollY : _group$attribute2$scr2;
             _newPoint2.x -= _scrollX, _newPoint2.y -= _scrollY;
             var _pickedItem = _this.pickItem(graphic, _newPoint2, parentMatrix, params);
-            result.graphic = _pickedItem;
+            _pickedItem && _pickedItem.graphic && (result.graphic = _pickedItem.graphic, result.params = _pickedItem.params);
           }
           return !!result.graphic || !!result.group;
         }, !0, !!context.camera), context.modelMatrix !== lastMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastMatrix, result.graphic || result.group || !groupPicked || group.stage.camera || (result.group = group), matrixAllocate.free(currentGroupMatrix), result;
@@ -28456,20 +28697,23 @@
             var ret = drawContribution.beforePickItem(graphic, this, point, params, {
               parentMatrix: parentMatrix
             });
-            if (ret) return !0 === ret ? graphic : ret.graphic;
+            if (ret) return ret;
           }
         }
         var picker = this.pickerMap.get(graphic.numberType);
         if (!picker) return null;
-        var data = picker.contains(graphic, point, params) ? graphic : null;
-        if (data) return data;
+        var g = picker.contains(graphic, point, params) ? graphic : null,
+          data = {
+            graphic: g
+          };
+        if (g) return data;
         if (this.InterceptorContributions.length) for (var _i = 0; _i < this.InterceptorContributions.length; _i++) {
           var _drawContribution = this.InterceptorContributions[_i];
           if (_drawContribution.afterPickItem) {
             var _ret = _drawContribution.afterPickItem(graphic, this, point, params, {
               parentMatrix: parentMatrix
             });
-            if (_ret) return !0 === _ret ? graphic : _ret.graphic;
+            if (_ret) return _ret;
           }
         }
         return data;
@@ -28575,7 +28819,7 @@
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         var picked = !0;
-        if (!onlyTranslate || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
           return 0 !== num;
         })) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, function (context, rectAttribute, themeAttribute) {
           return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
@@ -28583,7 +28827,7 @@
           if (picked) return !0;
           var lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;
           return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
-        });else if (picked) {
+        });else {
           var _rect$attribute2 = rect.attribute,
             _rect$attribute2$fill = _rect$attribute2.fill,
             fill = _rect$attribute2$fill === void 0 ? rectAttribute.fill : _rect$attribute2$fill,
@@ -29116,7 +29360,9 @@
         if (pickerService) {
           var picked = !1;
           return glyph.getSubGraphic().forEach(function (g) {
-            picked || (picked = !!pickerService.pickItem(g, point, null, params));
+            if (picked) return;
+            var data = pickerService.pickItem(g, point, null, params);
+            picked = !(!data || !data.graphic);
           }), picked;
         }
         return !1;
@@ -29861,7 +30107,11 @@
       value: function pickItem(graphic, point, parentMatrix, params) {
         if (!1 === graphic.attribute.pickable) return null;
         var picker = this.pickerMap.get(graphic.numberType);
-        return picker && picker.contains(graphic, point, params) ? graphic : null;
+        if (!picker) return null;
+        var g = picker.contains(graphic, point, params) ? graphic : null;
+        return g ? {
+          graphic: g
+        } : null;
       }
     }]);
     return DefaultMathPickerService;
@@ -33612,26 +33862,50 @@
     }).whenTargetNamed(NodeWindowHandlerContribution.env);
   });
 
+  function loadAllEnv(container) {
+    loadAllModule(container);
+  }
   function loadAllModule(container) {
-    container.load(allEnvModule), loadAllCavnvas(container), container.load(allWindowModule);
+    container.load(allEnvModule), loadAllCavnvas(container), container.load(allWindowModule), loadCanvasPicker(container);
   }
   function loadBrowserEnv(container) {
-    container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule);
+    container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadCanvasPicker(container);
   }
   function loadFeishuEnv(container) {
-    container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule);
+    container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadMathPicker(container);
   }
   function loadLynxEnv(container) {
-    container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule);
+    container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadMathPicker(container);
   }
   function loadNodeEnv(container) {
-    container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule);
+    container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule), loadMathPicker(container);
   }
   function loadTaroEnv(container) {
-    container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule);
+    container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadMathPicker(container);
   }
   function loadWxEnv(container) {
-    container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule);
+    container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadMathPicker(container);
+  }
+  function initAllEnv() {
+    loadAllEnv(container);
+  }
+  function initBrowserEnv() {
+    loadBrowserEnv(container);
+  }
+  function initFeishuEnv() {
+    loadFeishuEnv(container);
+  }
+  function initLynxEnv() {
+    loadLynxEnv(container);
+  }
+  function initNodeEnv() {
+    loadNodeEnv(container);
+  }
+  function initTaroEnv() {
+    loadTaroEnv(container);
+  }
+  function initWxEnv() {
+    loadWxEnv(container);
   }
 
   var REACT_TO_CANOPUS_EVENTS = {
@@ -34085,7 +34359,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.16.0-alpha.0";
+  const version = "0.16.0-alpha.2";
   loadAllModule(container);
 
   exports.ACustomAnimate = ACustomAnimate;
@@ -34136,6 +34410,7 @@
   exports.DefaultAttribute = DefaultAttribute;
   exports.DefaultCircleAttribute = DefaultCircleAttribute;
   exports.DefaultConnectAttribute = DefaultConnectAttribute;
+  exports.DefaultDebugAttribute = DefaultDebugAttribute;
   exports.DefaultFillStyle = DefaultFillStyle;
   exports.DefaultGlyphAttribute = DefaultGlyphAttribute;
   exports.DefaultGroupAttribute = DefaultGroupAttribute;
@@ -34164,6 +34439,7 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
+  exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
   exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
   exports.EventSystem = EventSystem;
@@ -34204,7 +34480,6 @@
   exports.InteractiveSubRenderContribution = InteractiveSubRenderContribution;
   exports.LINE_NUMBER_TYPE = LINE_NUMBER_TYPE;
   exports.Layer = Layer;
-  exports.LayerHandlerContribution = LayerHandlerContribution;
   exports.LayerService = LayerService;
   exports.Line = Line$1;
   exports.LineRender = LineRender;
@@ -34263,6 +34538,7 @@
   exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
   exports.SegContext = SegContext;
   exports.Stage = Stage;
+  exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
   exports.Step = Step$1;
   exports.StreamLight = StreamLight;
   exports.SubAnimate = SubAnimate;
@@ -34296,6 +34572,7 @@
   exports.VSymbol = VSymbol;
   exports.VText = VText;
   exports.VWindow = VWindow;
+  exports.VirtualLayerHandlerContribution = VirtualLayerHandlerContribution;
   exports.WILDCARD = WILDCARD;
   exports.WindowHandlerContribution = WindowHandlerContribution;
   exports.WrapText = WrapText;
@@ -34397,6 +34674,13 @@
   exports.graphicService = graphicService;
   exports.graphicUtil = graphicUtil;
   exports.incrementalAddTo = incrementalAddTo;
+  exports.initAllEnv = initAllEnv;
+  exports.initBrowserEnv = initBrowserEnv;
+  exports.initFeishuEnv = initFeishuEnv;
+  exports.initLynxEnv = initLynxEnv;
+  exports.initNodeEnv = initNodeEnv;
+  exports.initTaroEnv = initTaroEnv;
+  exports.initWxEnv = initWxEnv;
   exports.inject = inject;
   exports.injectable = injectable;
   exports.interpolateColor = interpolateColor;
@@ -34411,6 +34695,7 @@
   exports.jsx = jsx;
   exports.layerService = layerService;
   exports.loadAllCavnvas = loadAllCavnvas;
+  exports.loadAllEnv = loadAllEnv;
   exports.loadAllModule = loadAllModule;
   exports.loadBrowserCanvas = loadBrowserCanvas;
   exports.loadBrowserEnv = loadBrowserEnv;