@visactor/vrender 0.17.19 → 0.17.20-alpha.10

package/dist/index.js

@@ -2149,15 +2149,15 @@
   };
   var isArray$1 = isArray;
 
-  var isNumber$1 = function isNumber(value) {
+  var isNumber = function isNumber(value) {
     var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     var type = _typeof(value);
     return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
   };
-  var isNumber$2 = isNumber$1;
+  var isNumber$1 = isNumber;
 
   var isValidNumber = function isValidNumber(value) {
-    return isNumber$2(value) && Number.isFinite(value);
+    return isNumber$1(value) && Number.isFinite(value);
   };
   var isValidNumber$1 = isValidNumber;
 
@@ -2264,12 +2264,12 @@
     }, {
       key: "add",
       value: function add(point) {
-        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$1(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
     }, {
       key: "sub",
       value: function sub(point) {
-        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
     }, {
       key: "multi",
@@ -2973,10 +2973,10 @@
     return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
   }
   function rgb(value) {
-    return isNumber$2(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
+    return isNumber$1(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
   }
   function rgba(value) {
-    return isNumber$2(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
+    return isNumber$1(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
   }
   function SRGBToLinear(c) {
     return c < .04045 ? .0773993808 * c : Math.pow(.9478672986 * c + .0521327014, 2.4);
@@ -3657,7 +3657,7 @@
     }], [{
       key: "getInstance",
       value: function getInstance(level, method) {
-        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$1(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
     }, {
       key: "setInstance",
@@ -4784,6 +4784,11 @@
       value: function clear() {
         this.transformCbList = null, this.commandList.length = 0, this.curves.length = 0;
       }
+    }, {
+      key: "beginPath",
+      value: function beginPath() {
+        this.clear();
+      }
     }, {
       key: "toString",
       value: function toString() {
@@ -4803,6 +4808,8 @@
             var path = "";
             for (var i = 0; i < bezierPathList.length; i += 6) path += "C".concat(bezierPathList[i], " ").concat(bezierPathList[i + 1], " ").concat(bezierPathList[i + 2], " ").concat(bezierPathList[i + 3], " ").concat(bezierPathList[i + 4], " ").concat(bezierPathList[i + 5]);
             return path;
+          }, _list[enumCommandMap.R] = function (cmd) {
+            return "M".concat(cmd[1], " ").concat(cmd[2], " h").concat(cmd[3], " v").concat(cmd[4], " H").concat(cmd[1], "Z");
           }, _list[enumCommandMap.Z] = function (cmd) {
             return "Z";
           }, this.toStringCbList = _list;
@@ -5188,6 +5195,7 @@
     zIndex: 0,
     layout: null,
     boundsPadding: 0,
+    renderStyle: "default",
     pickMode: "accurate",
     customPickShape: null,
     boundsMode: "accurate",
@@ -5797,9 +5805,6 @@
   function isNotAroundZero(val) {
     return val > EPSILON || val < -EPSILON;
   }
-  function isNumber(data) {
-    return "number" == typeof data && Number.isFinite(data);
-  }
   var _v0 = [0, 0],
     _v1 = [0, 0],
     _v2 = [0, 0];
@@ -6286,9 +6291,20 @@
     }, {
       key: "create",
       value: function create(params) {
+        var _a, _b;
         this._handler.createWindow(params);
         var windowWH = this._handler.getWH();
-        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
+        this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: this._width,
+          y2: this._height
+        }) : this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
+          y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
+        }), this.title = this._handler.getTitle(), this.resizable = !0;
       }
     }, {
       key: "setWindowHandler",
@@ -6357,8 +6373,47 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(viewBox, color) {
-        this._handler.clearViewBox(viewBox, color);
+      value: function clearViewBox(color) {
+        this._handler.clearViewBox(color);
+      }
+    }, {
+      key: "setViewBox",
+      value: function setViewBox(viewBox) {
+        this._handler.setViewBox(viewBox);
+      }
+    }, {
+      key: "setViewBoxTransform",
+      value: function setViewBoxTransform(a, b, c, d, e, f) {
+        this._handler.setViewBoxTransform(a, b, c, d, e, f);
+      }
+    }, {
+      key: "getViewBox",
+      value: function getViewBox() {
+        return this._handler.getViewBox();
+      }
+    }, {
+      key: "getViewBoxTransform",
+      value: function getViewBoxTransform() {
+        return this._handler.getViewBoxTransform();
+      }
+    }, {
+      key: "pointTransform",
+      value: function pointTransform(x, y) {
+        var vb = this._handler.getViewBox(),
+          nextP = {
+            x: x,
+            y: y
+          };
+        return this._handler.getViewBoxTransform().transformPoint({
+          x: x,
+          y: y
+        }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
+      }
+    }, {
+      key: "hasSubView",
+      value: function hasSubView() {
+        var viewBox = this._handler.getViewBox();
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
       }
     }, {
       key: "isVisible",
@@ -6476,8 +6531,16 @@
         var window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height();
+          height = bounds.height(),
+          x1 = -bounds.x1,
+          y1 = -bounds.y1;
         window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: bounds.x2,
+            y2: bounds.y2
+          },
           width: width,
           height: height,
           canvas: canvas,
@@ -6486,14 +6549,10 @@
           offscreen: !0,
           title: ""
         });
-        var x = -bounds.x1,
-          y = -bounds.y1,
-          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        var disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          transMatrix: window.getViewBoxTransform(),
+          viewBox: window.getViewBox(),
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -6710,7 +6769,7 @@
   }();
   var globalTheme = new Theme();
   function getTheme(graphic, theme) {
-    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme(graphic.attachedThemeGraphic) || globalTheme.getTheme();
   }
   function getThemeFromGroup(graphic) {
     var g;
@@ -6974,10 +7033,13 @@
       }
     }, {
       key: "removeAllChild",
-      value: function removeAllChild() {
+      value: function removeAllChild(deep) {
         if (!this._idMap) return;
         var child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          var next = child._next;
+          child.parent = null, child._prev = null, child._next = null, child = child._next, child = next;
+        }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
     }, {
@@ -7655,7 +7717,7 @@
         var mappers = this.mappingTable[e.type];
         var target;
         var cacheKey = "".concat(e.canvasX, "-").concat(e.canvasY);
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = _defineProperty(_defineProperty({}, cacheKey, target), "stageRenderCount", null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1))), mappers) for (var i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn("[EventManager]: Event mapping not defined for ".concat(e.type));
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.viewX, e.viewY, e), e.pickParams || (this._prePointTargetCache = _defineProperty(_defineProperty({}, cacheKey, target), "stageRenderCount", null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1))), mappers) for (var i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn("[EventManager]: Event mapping not defined for ".concat(e.type));
       }
     }, {
       key: "propagate",
@@ -7697,14 +7759,16 @@
     }, {
       key: "createPointerEvent",
       value: function createPointerEvent(from, type, target) {
+        var _a, _b;
         var event = this.allocateEvent(FederatedPointerEvent);
-        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), "string" == typeof type && (event.type = type), event;
+        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), "string" == typeof type && (event.type = type), event;
       }
     }, {
       key: "createWheelEvent",
       value: function createWheelEvent(from, target) {
+        var _a, _b;
         var event = this.allocateEvent(FederatedWheelEvent);
-        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), event;
+        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), event;
       }
     }, {
       key: "clonePointerEvent",
@@ -7834,7 +7898,7 @@
         _this.setCursor(_this.manager.cursor, _this.manager.cursorTarget);
       }, this.onPointerUp = function (nativeEvent) {
         if (_this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-        var outside = _this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
+        var outside = _this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
           normalizedEvents = _this.normalizeToPointerData(nativeEvent);
         for (var i = 0, j = normalizedEvents.length; i < j; i++) {
           var event = _this.bootstrapEvent(_this.rootPointerEvent, normalizedEvents[i]);
@@ -7857,7 +7921,6 @@
         resolution = params.resolution,
         rootNode = params.rootNode,
         global = params.global,
-        viewport = params.viewport,
         _params$autoPreventDe = params.autoPreventDefault,
         autoPreventDefault = _params$autoPreventDe === void 0 ? !1 : _params$autoPreventDe,
         clickInterval = params.clickInterval,
@@ -7867,7 +7930,7 @@
         supportsPointerEvents = _params$supportsPoint === void 0 ? global.supportsPointerEvents : _params$supportsPoint;
       this.manager = new EventManager(rootNode, {
         clickInterval: clickInterval
-      }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+      }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
         "default": "inherit",
         pointer: "pointer"
       }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -7915,13 +7978,7 @@
     }, {
       key: "mapToViewportPoint",
       value: function mapToViewportPoint(event) {
-        var viewport = this.viewport,
-          x = event.x,
-          y = event.y;
-        return {
-          x: x - viewport.x,
-          y: y - viewport.y
-        };
+        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
       }
     }, {
       key: "mapToCanvasPoint",
@@ -7982,6 +8039,19 @@
       value: function transferMouseData(event, nativeEvent) {
         event.isTrusted = nativeEvent.isTrusted, event.srcElement = nativeEvent.srcElement, event.timeStamp = clock.now(), event.type = nativeEvent.type, event.altKey = nativeEvent.altKey, event.button = nativeEvent.button, event.buttons = nativeEvent.buttons, event.client.x = nativeEvent.clientX, event.client.y = nativeEvent.clientY, event.ctrlKey = nativeEvent.ctrlKey, event.shiftKey = nativeEvent.shiftKey, event.metaKey = nativeEvent.metaKey, event.movement.x = nativeEvent.movementX, event.movement.y = nativeEvent.movementY, event.page.x = nativeEvent.pageX, event.page.y = nativeEvent.pageY, event.relatedTarget = null;
       }
+    }, {
+      key: "isEventOutsideOfTargetViewPort",
+      value: function isEventOutsideOfTargetViewPort(nativeEvent) {
+        if (this.isEventOutsideOfTargetElement(nativeEvent)) return !0;
+        if (this.domElement.getViewBox) {
+          var p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent)),
+            b = this.domElement.getViewBox(),
+            w = b.width(),
+            h = b.height();
+          return !(p.x < w && p.y < h && p.x > 0 && p.y > 0);
+        }
+        return !1;
+      }
     }, {
       key: "isEventOutsideOfTargetElement",
       value: function isEventOutsideOfTargetElement(nativeEvent) {
@@ -9243,7 +9313,7 @@
       key: "onBind",
       value: function onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        this.fromNumber = isNumber$1(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$1(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
     }, {
       key: "onEnd",
@@ -10654,7 +10724,7 @@
   };
   var samplingPoints = function samplingPoints(points, count) {
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (0 === validatePoints.length) return [];
     if (1 === validatePoints.length) return new Array(count).fill(0).map(function (i) {
@@ -10694,7 +10764,7 @@
       return res.concat(null !== (_a = seg.points) && void 0 !== _a ? _a : []);
     }, []));
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (!validatePoints.length) return [];
     var allPoints = [];
@@ -11361,15 +11431,7 @@
         var data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(function () {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(function (res) {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
     }, {
       key: "GetSvg",
@@ -11403,10 +11465,68 @@
           return data.data;
         }));
       }
+    }, {
+      key: "loading",
+      value: function loading() {
+        setTimeout(function () {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            var tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(function (task) {
+              var url = task.url,
+                marks = task.marks,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                var end = data.dataPromise.then(function (res) {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(function (mark) {
+                return mark.imageLoadFail(url);
+              });
+            }), Promise.all(promises).then(function () {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            })["catch"](function (error) {
+              console.error(error), ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+    }, {
+      key: "loadImage",
+      value: function loadImage(url, mark) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+    }, {
+      key: "improveImageLoading",
+      value: function improveImageLoading(url) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          var elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
     }]);
     return ResourceLoader;
   }();
-  ResourceLoader.cache = new Map();
+  function getIndex(url, arr) {
+    for (var i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+    return -1;
+  }
+  ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
   var tempMatrix = new Matrix(),
     tempBounds$1 = new AABBBounds();
@@ -11524,7 +11644,7 @@
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         var bounds = this.doUpdateAABBBounds(full);
-        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
       }
     }, {
       key: "combindShadowAABBBounds",
@@ -11537,7 +11657,8 @@
     }, {
       key: "tryUpdateGlobalAABBBounds",
       value: function tryUpdateGlobalAABBBounds() {
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        var b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
     }, {
       key: "tryUpdateGlobalTransMatrix",
@@ -12192,7 +12313,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
     }, {
       key: "imageLoadSuccess",
@@ -12843,8 +12964,9 @@
     }, {
       key: "removeAllChild",
       value: function removeAllChild() {
+        var deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         this.forEachChildren(function (child) {
-          application.graphicService.onRemove(child);
+          application.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
         }), _get(_getPrototypeOf(Group.prototype), "removeAllChild", this).call(this), this.addUpdateBoundTag();
       }
     }, {
@@ -13020,15 +13142,12 @@
       value: function render(params, userParams) {
         var _this4 = this;
         var _a;
-        var stage = this.stage;
         this.layerHandler.render([this], {
           renderService: params.renderService,
-          x: stage.x,
-          y: stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
           stage: this.stage,
           layer: this,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(function (c) {
@@ -13068,48 +13187,28 @@
     }, {
       key: "prepare",
       value: function prepare(dirtyBounds, params) {}
-    }, {
-      key: "combineTo",
-      value: function combineTo(target, params) {
-        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,
-          renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
-          stage: this.stage,
-          layer: this
-        }, params)), this.afterDrawCbs.forEach(function (c) {
-          return c(_this5);
-        }));
-      }
     }, {
       key: "release",
       value: function release() {
-        var _this6 = this;
+        var _this5 = this;
         _get(_getPrototypeOf(Layer.prototype), "release", this).call(this), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(function (l) {
-          application.layerService.releaseLayer(_this6.stage, l.layer);
+          application.layerService.releaseLayer(_this5.stage, l.layer);
         });
       }
     }, {
       key: "drawTo",
       value: function drawTo(target, params) {
-        var _this7 = this;
-        var _a, _b, _c;
+        var _this6 = this;
+        var _a;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(function (c) {
-          return c(_this7);
+          return c(_this6);
         });
       }
     }]);
@@ -14510,7 +14609,7 @@
     _createClass(BaseSymbol, [{
       key: "bounds",
       value: function bounds(size, _bounds) {
-        if (isNumber$2(size)) {
+        if (isNumber$1(size)) {
           var halfS = size / 2;
           _bounds.x1 = -halfS, _bounds.x2 = halfS, _bounds.y1 = -halfS, _bounds.y2 = halfS;
         } else _bounds.x1 = -size[0] / 2, _bounds.x2 = size[0] / 2, _bounds.y1 = -size[1] / 2, _bounds.y2 = size[1] / 2;
@@ -15197,12 +15296,12 @@
     _createClass(RectSymbol, [{
       key: "draw",
       value: function draw(ctx, size, x, y) {
-        return isNumber$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
     }, {
       key: "drawOffset",
       value: function drawOffset(ctx, size, x, y, offset) {
-        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }]);
     return RectSymbol;
@@ -15841,16 +15940,7 @@
             deltaY = -height;
         }
         var deltaX = 0;
-        switch (this.globalAlign) {
-          case "left":
-            deltaX = 0;
-            break;
-          case "center":
-            deltaX = -width / 2;
-            break;
-          case "right":
-            deltaX = -width;
-        }
+        "right" === this.globalAlign || "end" === this.globalAlign ? deltaX = -width : "center" === this.globalAlign && (deltaX = -width / 2);
         var frameHeight = this[this.directionKey.height];
         this.singleLine && (frameHeight = this.lines[0].height + 1);
         var lastLineTag = !1;
@@ -16003,9 +16093,9 @@
         var direction = this.direction;
         if (this.verticalEllipsis) text = "...", direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
-          if ("add" === this.ellipsis) text += "...", "right" === textAlign && (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+          if ("add" === this.ellipsis) text += "...", "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             var index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += "...", "right" === textAlign) {
+            if (text = text.slice(0, index), text += "...", "right" === textAlign || "end" === textAlign) {
               var _measureTextCanvas3 = measureTextCanvas(this.text.slice(index), this.character),
                 width = _measureTextCanvas3.width;
               "vertical" === direction || (left -= this.ellipsisWidth - width);
@@ -16261,17 +16351,7 @@
           maxHeight = this.height;
         var x = this.left,
           spacing = 0;
-        if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
-          case "right":
-            x = width - this.actualWidth;
-            break;
-          case "center":
-            x = (width - this.actualWidth) / 2;
-            break;
-          case "justify":
-            this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
-        }
-        this.paragraphs.map(function (paragraph) {
+        this.actualWidth < width && !isWidthMax && ("right" === this.textAlign || "end" === this.textAlign ? x = width - this.actualWidth : "center" === this.textAlign ? x = (width - this.actualWidth) / 2 : "justify" === this.textAlign && (this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1))), this.paragraphs.map(function (paragraph) {
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
@@ -16554,10 +16634,10 @@
           }
         } else {
           var richTextConfig = textConfig[i];
-          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text.includes("\n")) {
+          if (isNumber$1(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text && richTextConfig.text.includes("\n")) {
             var textParts = richTextConfig.text.split("\n");
             for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
-          } else paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+          } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
         }
         var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -16883,7 +16963,7 @@
           innerRadius = _this$attribute2$inne === void 0 ? arcTheme.innerRadius : _this$attribute2$inne;
         if (0 === cornerRadius || "0%" === cornerRadius) return 0;
         var deltaRadius = Math.abs(outerRadius - innerRadius);
-        return Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+        return Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
     }, {
       key: "getParsedAngle",
@@ -19134,7 +19214,7 @@
   var halfPi = pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
     var cornerRadius;
-    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
       var cr0, cr1;
       switch (cornerRadiusArr.length) {
@@ -19257,7 +19337,7 @@
       y = bounds.y1,
       width = bounds.width(),
       height = bounds.height();
-    return isNumber$2(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+    return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
       x: x,
       y: y,
       width: width,
@@ -20217,9 +20297,10 @@
       key: "drawLinearAreaHighPerformance",
       value: function drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e;
+        var points = area.attribute.points;
+        if (points.length < 2) return;
         context.beginPath();
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          points = area.attribute.points,
           startP = points[0];
         context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (var i = 1; i < points.length; i++) {
@@ -20396,6 +20477,7 @@
       key: "_drawSegmentItem",
       value: function _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
         var _a, _b, _c, _d;
+        if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
         var connectedType = attribute.connectedType,
           connectedX = attribute.connectedX,
           connectedY = attribute.connectedY,
@@ -20404,7 +20486,6 @@
         if (connect && (isArray$1(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$1(defaultAttribute) ? defaultAttribute.forEach(function (i) {
           return da.push(i);
         }) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
-        if (!cache) return;
         context.beginPath();
         var _area$attribute4 = area.attribute,
           points = _area$attribute4.points,
@@ -21199,7 +21280,9 @@
       value: function draw(image, renderService, drawContext) {
         var url = image.attribute.image;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        var res = image.resources.get(url);
+        if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         var context = renderService.drawParams.context;
         if (!context) return;
         var imageAttribute = getTheme(image).image;
@@ -21240,6 +21323,241 @@
     },
     __metadata$$ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
+  var tempDirtyBounds = new AABBBounds();
+  var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function ShadowRootDrawItemInterceptorContribution() {
+      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(ShadowRootDrawItemInterceptorContribution, [{
+      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.shadowRoot) return !1;
+        var context = drawContext.context;
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          var m = graphic.globalTransMatrix.getInverse();
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+        }
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+      }
+    }]);
+    return ShadowRootDrawItemInterceptorContribution;
+  }();
+  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function DebugDrawItemInterceptorContribution() {
+      _classCallCheck(this, DebugDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(DebugDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute._debug_bounds && 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(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
+        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 DebugDrawItemInterceptorContribution;
+  }();
+  exports.CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function CommonDrawItemInterceptorContribution() {
+      _classCallCheck(this, CommonDrawItemInterceptorContribution);
+      this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
+    }
+    _createClass(CommonDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }, {
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }]);
+    return CommonDrawItemInterceptorContribution;
+  }();
+  exports.CommonDrawItemInterceptorContribution = __decorate$1j([injectable(), __metadata$$("design:paramtypes", [])], exports.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) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+    }, {
+      key: "beforeSetInteractive",
+      value: function beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        var interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          var _interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (_interactiveLayer) {
+            this.getShadowRoot(_interactiveLayer).removeChild(interactiveGraphic);
+          }
+          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
+        }
+        return !1;
+      }
+    }, {
+      key: "beforeDrawInteractive",
+      value: function beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        var baseGraphic = graphic.baseGraphic;
+        if (baseGraphic) {
+          this.processing = !0;
+          var context = drawContext.context;
+          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
+        }
+        return !1;
+      }
+    }, {
+      key: "getShadowRoot",
+      value: function getShadowRoot(interactiveLayer) {
+        var _a;
+        var group = interactiveLayer.getElementById("_interactive_group");
+        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+      }
+    }]);
+    return InteractiveDrawItemInterceptorContribution;
+  }();
+  var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
+    function Canvas3DDrawItemInterceptor() {
+      _classCallCheck(this, Canvas3DDrawItemInterceptor);
+      this.order = 1;
+    }
+    _createClass(Canvas3DDrawItemInterceptor, [{
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
+        drawContext.in3dInterceptor = !0;
+        var _renderService$drawPa = renderService.drawParams,
+          context = _renderService$drawPa.context,
+          stage = _renderService$drawPa.stage;
+        context.canvas;
+        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
+        var m = context.currentMatrix;
+        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
+        var matrix = mat4Allocate.allocate();
+        mat3Tomat4(matrix, m);
+        var lastModelMatrix = context.modelMatrix;
+        if (lastModelMatrix) {
+          if (matrix) {
+            var _m = mat4Allocate.allocate();
+            context.modelMatrix = multiplyMat4Mat4(_m, lastModelMatrix, matrix);
+          }
+        } else context.modelMatrix = matrix;
+        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
+          var isPie = !1,
+            is3d = !1;
+          if (graphic.forEachChildren(function (c) {
+            return isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie;
+          }), graphic.forEachChildren(function (c) {
+            return is3d = !!c.findFace, !is3d;
+          }), isPie) {
+            var children = graphic.getChildren(),
+              sortedChildren = _toConsumableArray(children);
+            sortedChildren.sort(function (a, b) {
+              var _a, _b, _c, _d;
+              var angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
+                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
+              for (; angle1 < 0;) angle1 += pi2;
+              for (; angle2 < 0;) angle2 += pi2;
+              return angle2 - angle1;
+            }), sortedChildren.forEach(function (c) {
+              c._next = null, c._prev = null;
+            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(function (c) {
+              graphic.appendChild(c);
+            });
+            var _m2 = graphic.parent.globalTransMatrix;
+            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, _m2), graphic.removeAllChild(), children.forEach(function (c) {
+              c._next = null, c._prev = null;
+            }), children.forEach(function (c) {
+              graphic.appendChild(c);
+            });
+          } else if (is3d) {
+            var _children = graphic.getChildren(),
+              zChildren = _children.map(function (g) {
+                return {
+                  ave_z: g.findFace().vertices.map(function (v) {
+                    var _a;
+                    return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+                  }).reduce(function (a, b) {
+                    return a + b;
+                  }, 0),
+                  g: g
+                };
+              });
+            zChildren.sort(function (a, b) {
+              return b.ave_z - a.ave_z;
+            }), graphic.removeAllChild(), zChildren.forEach(function (i) {
+              i.g._next = null, i.g._prev = null;
+            }), graphic.update(), zChildren.forEach(function (i) {
+              graphic.add(i.g);
+            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), _children.forEach(function (g) {
+              g._next = null, g._prev = null;
+            }), graphic.update(), _children.forEach(function (g) {
+              graphic.add(g);
+            });
+          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
+        } else drawContribution.renderItem(graphic, drawContext);
+        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+      }
+    }, {
+      key: "initCanvasCtx",
+      value: function initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }]);
+    return Canvas3DDrawItemInterceptor;
+  }();
+
+  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$_ = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
@@ -21298,7 +21616,7 @@
     }]);
     return DefaultRenderService;
   }();
-  exports.DefaultRenderService = __decorate$1j([injectable(), __param$E(0, inject(DrawContribution)), __metadata$$("design:paramtypes", [Object])], exports.DefaultRenderService);
+  exports.DefaultRenderService = __decorate$1i([injectable(), __param$E(0, inject(DrawContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
     bind(RenderService).to(exports.DefaultRenderService).inSingletonScope();
@@ -21309,7 +21627,7 @@
   var BoundsPicker = Symbol["for"]("BoundsPicker");
   var GlobalPickerService = Symbol["for"]("GlobalPickerService");
 
-  var __decorate$1i = 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;
@@ -21350,7 +21668,7 @@
     }]);
     return ShadowRootPickItemInterceptorContribution;
   }();
-  exports.ShadowRootPickItemInterceptorContribution = __decorate$1i([injectable()], exports.ShadowRootPickItemInterceptorContribution);
+  exports.ShadowRootPickItemInterceptorContribution = __decorate$1h([injectable()], exports.ShadowRootPickItemInterceptorContribution);
   exports.InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractivePickItemInterceptorContribution() {
       _classCallCheck(this, InteractivePickItemInterceptorContribution);
@@ -21374,7 +21692,7 @@
     }]);
     return InteractivePickItemInterceptorContribution;
   }();
-  exports.InteractivePickItemInterceptorContribution = __decorate$1i([injectable()], exports.InteractivePickItemInterceptorContribution);
+  exports.InteractivePickItemInterceptorContribution = __decorate$1h([injectable()], exports.InteractivePickItemInterceptorContribution);
   exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -21451,7 +21769,7 @@
     }]);
     return Canvas3DPickItemInterceptor;
   }();
-  exports.Canvas3DPickItemInterceptor = __decorate$1i([injectable()], exports.Canvas3DPickItemInterceptor);
+  exports.Canvas3DPickItemInterceptor = __decorate$1h([injectable()], exports.Canvas3DPickItemInterceptor);
 
   var pickModule = new ContainerModule(function (bind, unbind, isBound) {
     isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(exports.Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor), bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution), bind(exports.InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -21464,14 +21782,14 @@
   var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
   var PluginService = Symbol["for"]("PluginService");
 
-  var __decorate$1h = 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$_ = 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$D = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -21527,7 +21845,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$1h([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$_("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$1g([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$Z("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -21541,14 +21859,14 @@
     bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
   });
 
-  var __decorate$1g = 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$Z = 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);
     };
   var CanvasLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21642,16 +21960,16 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1g([injectable(), __metadata$Z("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-  var __decorate$1f = 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;
       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$X = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var EmptyLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21709,16 +22027,16 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-  var __decorate$1e = 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$X = undefined && undefined.__metadata || function (k, v) {
+    __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);
     };
   var OffscreenLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21764,10 +22082,10 @@
       value: function render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context
+          context: this.context,
+          viewBox: params.stage.window.getViewBox(),
+          transMatrix: params.stage.window.getViewBoxTransform()
         }, params), {
-          x: 0,
-          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -21789,14 +22107,11 @@
       value: function drawTo(target, group, params) {
         var context = target.getContext(),
           targetDpr = target.dpr,
-          _params$x = params.x,
-          x = _params$x === void 0 ? 0 : _params$x,
-          _params$y = params.y,
-          y = _params$y === void 0 ? 0 : _params$y,
-          _params$width = params.width,
-          width = _params$width === void 0 ? this.layer.viewWidth : _params$width,
-          _params$height = params.height,
-          height = _params$height === void 0 ? this.layer.viewHeight : _params$height;
+          viewBox = params.viewBox,
+          x = viewBox.x1,
+          y = viewBox.y1,
+          width = viewBox.width(),
+          height = viewBox.height();
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
     }, {
@@ -21805,7 +22120,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+  OffscreenLayerHandlerContribution = __decorate$1d([injectable(), __metadata$W("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
   var layerHandlerModules = new ContainerModule(function (bind) {
     bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -21932,241 +22247,6 @@
     return result;
   }
 
-  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$W = undefined && undefined.__metadata || function (k, v) {
-      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-    };
-  var DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
-  var tempDirtyBounds = new AABBBounds();
-  var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function ShadowRootDrawItemInterceptorContribution() {
-      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(ShadowRootDrawItemInterceptorContribution, [{
-      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.shadowRoot) return !1;
-        var context = drawContext.context;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
-          var m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
-        }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
-      }
-    }]);
-    return ShadowRootDrawItemInterceptorContribution;
-  }();
-  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function DebugDrawItemInterceptorContribution() {
-      _classCallCheck(this, DebugDrawItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(DebugDrawItemInterceptorContribution, [{
-      key: "afterDrawItem",
-      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute._debug_bounds && 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(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
-        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 DebugDrawItemInterceptorContribution;
-  }();
-  var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function CommonDrawItemInterceptorContribution() {
-      _classCallCheck(this, CommonDrawItemInterceptorContribution);
-      this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
-    }
-    _createClass(CommonDrawItemInterceptorContribution, [{
-      key: "afterDrawItem",
-      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-    }, {
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
-        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-    }]);
-    return CommonDrawItemInterceptorContribution;
-  }();
-  CommonDrawItemInterceptorContribution = __decorate$1d([injectable(), __metadata$W("design:paramtypes", [])], 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) {
-        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
-      }
-    }, {
-      key: "beforeSetInteractive",
-      value: function beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        var interactiveGraphic = graphic.interactiveGraphic;
-        if (graphic.attribute.globalZIndex) {
-          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
-            globalZIndex: 0,
-            zIndex: graphic.attribute.globalZIndex
-          }, !1, {
-            skipUpdateCallback: !0
-          }), drawContext.stage.tryInitInteractiveLayer();
-          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
-          }
-          return !0;
-        }
-        if (interactiveGraphic) {
-          drawContext.stage.tryInitInteractiveLayer();
-          var _interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (_interactiveLayer) {
-            this.getShadowRoot(_interactiveLayer).removeChild(interactiveGraphic);
-          }
-          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
-        }
-        return !1;
-      }
-    }, {
-      key: "beforeDrawInteractive",
-      value: function beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        var baseGraphic = graphic.baseGraphic;
-        if (baseGraphic) {
-          this.processing = !0;
-          var context = drawContext.context;
-          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
-        }
-        return !1;
-      }
-    }, {
-      key: "getShadowRoot",
-      value: function getShadowRoot(interactiveLayer) {
-        var _a;
-        var group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
-      }
-    }]);
-    return InteractiveDrawItemInterceptorContribution;
-  }();
-  var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
-    function Canvas3DDrawItemInterceptor() {
-      _classCallCheck(this, Canvas3DDrawItemInterceptor);
-      this.order = 1;
-    }
-    _createClass(Canvas3DDrawItemInterceptor, [{
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
-        drawContext.in3dInterceptor = !0;
-        var _renderService$drawPa = renderService.drawParams,
-          context = _renderService$drawPa.context,
-          stage = _renderService$drawPa.stage;
-        context.canvas;
-        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
-        var m = context.currentMatrix;
-        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
-        var matrix = mat4Allocate.allocate();
-        mat3Tomat4(matrix, m);
-        var lastModelMatrix = context.modelMatrix;
-        if (lastModelMatrix) {
-          if (matrix) {
-            var _m = mat4Allocate.allocate();
-            context.modelMatrix = multiplyMat4Mat4(_m, lastModelMatrix, matrix);
-          }
-        } else context.modelMatrix = matrix;
-        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-          var isPie = !1,
-            is3d = !1;
-          if (graphic.forEachChildren(function (c) {
-            return isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie;
-          }), graphic.forEachChildren(function (c) {
-            return is3d = !!c.findFace, !is3d;
-          }), isPie) {
-            var children = graphic.getChildren(),
-              sortedChildren = _toConsumableArray(children);
-            sortedChildren.sort(function (a, b) {
-              var _a, _b, _c, _d;
-              var angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-              for (; angle1 < 0;) angle1 += pi2;
-              for (; angle2 < 0;) angle2 += pi2;
-              return angle2 - angle1;
-            }), sortedChildren.forEach(function (c) {
-              c._next = null, c._prev = null;
-            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(function (c) {
-              graphic.appendChild(c);
-            });
-            var _m2 = graphic.parent.globalTransMatrix;
-            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, _m2), graphic.removeAllChild(), children.forEach(function (c) {
-              c._next = null, c._prev = null;
-            }), children.forEach(function (c) {
-              graphic.appendChild(c);
-            });
-          } else if (is3d) {
-            var _children = graphic.getChildren(),
-              zChildren = _children.map(function (g) {
-                return {
-                  ave_z: g.findFace().vertices.map(function (v) {
-                    var _a;
-                    return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-                  }).reduce(function (a, b) {
-                    return a + b;
-                  }, 0),
-                  g: g
-                };
-              });
-            zChildren.sort(function (a, b) {
-              return b.ave_z - a.ave_z;
-            }), graphic.removeAllChild(), zChildren.forEach(function (i) {
-              i.g._next = null, i.g._prev = null;
-            }), graphic.update(), zChildren.forEach(function (i) {
-              graphic.add(i.g);
-            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), _children.forEach(function (g) {
-              g._next = null, g._prev = null;
-            }), graphic.update(), _children.forEach(function (g) {
-              graphic.add(g);
-            });
-          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-        } else drawContribution.renderItem(graphic, drawContext);
-        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
-      }
-    }, {
-      key: "initCanvasCtx",
-      value: function initCanvasCtx(context) {
-        context.setTransformForCurrent();
-      }
-    }]);
-    return Canvas3DDrawItemInterceptor;
-  }();
-
   var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -22212,27 +22292,21 @@
         this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
         var context = drawContext.context,
           stage = drawContext.stage,
-          _drawContext$x = drawContext.x,
-          x = _drawContext$x === void 0 ? 0 : _drawContext$x,
-          _drawContext$y = drawContext.y,
-          y = _drawContext$y === void 0 ? 0 : _drawContext$y,
-          width = drawContext.width,
-          height = drawContext.height;
+          viewBox = drawContext.viewBox,
+          transMatrix = drawContext.transMatrix;
         if (!context) return;
-        var dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
+        var dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           var b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         var d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
           group.isContainer ? _this2.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : _this2.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), context.inuse = !1;
+        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
       }
     }, {
       key: "doRegister",
@@ -22320,7 +22394,7 @@
       key: "getRenderContribution",
       value: function getRenderContribution(graphic) {
         var renderer;
-        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
+        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType, graphic)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
       }
     }, {
       key: "renderItem",
@@ -22359,35 +22433,36 @@
       }
     }, {
       key: "selectRenderByNumberType",
-      value: function selectRenderByNumberType(type) {
-        return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
+      value: function selectRenderByNumberType(type, graphic) {
+        var data;
+        if (graphic.attribute.renderStyle) {
+          var currentRenderMap = this.styleRenderMap.get(graphic.attribute.renderStyle);
+          data = currentRenderMap && currentRenderMap.get(type);
+        }
+        return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
     }, {
       key: "clearScreen",
       value: function clearScreen(renderService, context, drawContext) {
         var _a, _b;
-        var clear = drawContext.clear;
+        var clear = drawContext.clear,
+          viewBox = drawContext.viewBox,
+          width = viewBox.width(),
+          height = viewBox.height();
         if (clear) {
-          var canvas = context.getCanvas(),
-            _drawContext$width = drawContext.width,
-            width = _drawContext$width === void 0 ? canvas.width : _drawContext$width,
-            _drawContext$height = drawContext.height,
-            height = _drawContext$height === void 0 ? canvas.height : _drawContext$height,
-            x = 0,
-            y = 0;
-          context.clearRect(x, y, width, height);
+          context.clearRect(0, 0, width, height);
           var stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
           if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
             var res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: x,
-              y1: y,
-              x2: x + width,
-              y2: y + height
+              x1: 0,
+              y1: 0,
+              x2: 0 + width,
+              y2: 0 + height
             }
-          }, 0, 0), context.fillRect(x, y, width, height);
+          }, 0, 0), context.fillRect(0, 0, width, height);
         }
       }
     }, {
@@ -22695,7 +22770,7 @@
       value: function draw(renderService, drawContext) {
         return __awaiter$1(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
           var _this2 = this;
-          var skipDraw, context, _drawContext$x, x, _drawContext$y, y;
+          var skipDraw, context, viewBox;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -22717,8 +22792,8 @@
                 return _context.abrupt("return");
               case 8:
                 this.currentRenderService = renderService;
-                context = drawContext.context, _drawContext$x = drawContext.x, x = _drawContext$x === void 0 ? 0 : _drawContext$x, _drawContext$y = drawContext.y, y = _drawContext$y === void 0 ? 0 : _drawContext$y;
-                context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
+                context = drawContext.context, viewBox = drawContext.viewBox;
+                context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(viewBox.x1, viewBox.y1, !0), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
                   var _a, _b;
                   return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
                 }).forEach(function (group) {
@@ -23000,7 +23075,7 @@
   DefaultIncrementalDrawContribution = __decorate$18([injectable(), __param$A(0, multiInject(GraphicRender)), __param$A(1, inject(DefaultIncrementalCanvasLineRender)), __param$A(2, inject(DefaultIncrementalCanvasAreaRender)), __param$A(3, inject(ContributionProvider)), __param$A(3, named(DrawItemInterceptor)), __metadata$T("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
   var renderModule = new ContainerModule(function (bind) {
-    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
+    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -23131,12 +23206,10 @@
           if (!layer || !group.layer.subLayers) return;
           var subLayer = group.layer.subLayers.get(group._uid);
           subLayer && subLayer.drawContribution && subLayer.drawContribution.draw(stage.renderService, Object.assign({
-            x: stage.x,
-            y: stage.y,
-            width: layer.viewWidth,
-            height: layer.viewHeight,
             stage: stage,
             layer: layer,
+            viewBox: stage.window.getViewBox(),
+            transMatrix: stage.window.getViewBoxTransform(),
             clear: "transparent",
             renderService: stage.renderService,
             updateBounds: !1,
@@ -23160,6 +23233,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.onRemove.tap(this.key, function (graphic) {
+          _this.removeDom(graphic);
         }), application.graphicService.hooks.onRelease.tap(this.key, function (graphic) {
           _this.removeDom(graphic);
         });
@@ -23216,26 +23291,27 @@
           anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType;
         graphic.bindDom || (graphic.bindDom = new Map());
         var lastDom = graphic.bindDom.get(dom);
-        if (lastDom && (!container || container === lastDom.container)) return;
-        var nativeDom, nativeContainer;
-        graphic.bindDom.forEach(function (_ref) {
-          var wrapGroup = _ref.wrapGroup;
-          application.global.removeDom(wrapGroup);
-        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-        var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-        nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
-        var wrapGroup = application.global.createDom({
-          tagName: "div",
-          width: width,
-          height: height,
-          style: style,
-          parent: nativeContainer
-        });
-        wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-          dom: nativeDom,
-          container: container,
-          wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        var wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          var nativeDom;
+          graphic.bindDom.forEach(function (_ref) {
+            var wrapGroup = _ref.wrapGroup;
+            application.global.removeDom(wrapGroup);
+          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
+          var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
+          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
+            dom: nativeDom,
+            container: container,
+            wrapGroup: wrapGroup
+          }));
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         var left = 0,
           top = 0;
         var b = graphic.globalAABBBounds;
@@ -23299,13 +23375,23 @@
       this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id, this.tempBounds = new AABBBounds();
     }
     _createClass(FlexLayoutPlugin, [{
+      key: "pauseLayout",
+      value: function pauseLayout(p) {
+        this.pause = p;
+      }
+    }, {
+      key: "tryLayoutChildren",
+      value: function tryLayoutChildren(graphic) {
+        graphic.firstChild && this.tryLayout(graphic.firstChild);
+      }
+    }, {
       key: "tryLayout",
       value: function tryLayout(graphic) {
         var _this = this;
-        if (this.layouting) return;
-        this.layouting = !0;
+        var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        if (this.pause) return;
         var p = graphic.parent;
-        if (!p || !graphic.needUpdateLayout()) return;
+        if (!(force || p && graphic.needUpdateLayout())) return;
         var theme = getTheme(p).group,
           _p$attribute$display = p.attribute.display,
           display = _p$attribute$display === void 0 ? theme.display : _p$attribute$display;
@@ -23315,24 +23401,29 @@
           flexDirection = _p$attribute$flexDire === void 0 ? theme.flexDirection : _p$attribute$flexDire,
           _p$attribute$flexWrap = _p$attribute.flexWrap,
           flexWrap = _p$attribute$flexWrap === void 0 ? theme.flexWrap : _p$attribute$flexWrap,
-          _p$attribute$justifyC = _p$attribute.justifyContent,
-          justifyContent = _p$attribute$justifyC === void 0 ? theme.justifyContent : _p$attribute$justifyC,
           _p$attribute$alignIte = _p$attribute.alignItems,
           alignItems = _p$attribute$alignIte === void 0 ? theme.alignItems : _p$attribute$alignIte,
-          _p$attribute$alignCon = _p$attribute.alignContent,
-          alignContent = _p$attribute$alignCon === void 0 ? theme.alignContent : _p$attribute$alignCon,
           _p$attribute$clip = _p$attribute.clip,
-          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip;
-        var childrenWidth = 0,
-          childrenHeight = 0,
-          boundsLegal = 0;
-        if (p.forEachChildren(function (child) {
-          var bounds = child.AABBBounds;
-          "column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2;
-        }), !isFinite(boundsLegal)) return;
-        var width = p.attribute.width || childrenWidth,
-          height = p.attribute.height || childrenHeight;
-        p.attribute.width || (p.attribute.width = 0), p.attribute.height || (p.attribute.height = 0), this.tempBounds.copy(p._AABBBounds);
+          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip,
+          _p$attribute$alignCon = p.attribute.alignContent,
+          alignContent = _p$attribute$alignCon === void 0 ? null != alignItems ? alignItems : theme.alignContent : _p$attribute$alignCon;
+        var _p$attribute2 = p.attribute,
+          width = _p$attribute2.width,
+          height = _p$attribute2.height,
+          _p$attribute2$justify = _p$attribute2.justifyContent,
+          justifyContent = _p$attribute2$justify === void 0 ? theme.justifyContent : _p$attribute2$justify;
+        var children = p.getChildren();
+        if (null == width || null == height) {
+          var childrenWidth = 0,
+            childrenHeight = 0,
+            boundsLegal = 0;
+          if (children.forEach(function (child) {
+            var bounds = _this.getAABBBounds(child);
+            bounds.empty() || ("column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2);
+          }), !isFinite(boundsLegal)) return;
+          width = childrenWidth, height = childrenHeight;
+        }
+        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
         var result = {
             main: {
               len: width,
@@ -23341,18 +23432,18 @@
             cross: {
               len: height,
               field: "y"
-            },
-            dir: 1
+            }
           },
           main = result.main,
           cross = result.cross;
-        "row-reverse" === flexDirection ? result.dir = -1 : "column" === flexDirection ? (main.len = height, cross.len = width, main.field = "y", cross.field = "x") : "column-reverse" === flexDirection && (main.len = height, cross.len = width, main.field = "y", cross.field = "x", result.dir = -1);
+        "column" !== flexDirection && "column-reverse" !== flexDirection || (main.len = height, cross.len = width, main.field = "y", cross.field = "x"), "row-reverse" !== flexDirection && "column-reverse" !== flexDirection || ("flex-start" === justifyContent ? justifyContent = "flex-end" : "flex-end" === justifyContent ? justifyContent = "flex-start" : children.reverse());
         var mainLen = 0,
           crossLen = 0;
         var mianLenArray = [];
-        p.forEachChildren(function (c) {
-          var b = c.AABBBounds,
-            ml = "x" === main.field ? b.width() : b.height(),
+        children.forEach(function (c) {
+          var b = _this.getAABBBounds(c);
+          if (b.empty()) return;
+          var ml = "x" === main.field ? b.width() : b.height(),
             cl = "x" === cross.field ? b.width() : b.height();
           mianLenArray.push({
             mainLen: ml,
@@ -23385,104 +23476,171 @@
           mainLen: mainLen,
           crossLen: crossLen
         });
-        var children = p.getChildren();
         var lastIdx = 0;
         if (mainList.forEach(function (s) {
           _this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
         }), crossLen = mainList.reduce(function (a, b) {
           return a + b.crossLen;
         }, 0), 1 === mainList.length) {
-          if ("flex-end" === alignItems) {
-            var anchorPos = cross.len;
-            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-          } else if ("center" === alignItems) {
-            var _anchorPos = cross.len / 2;
-            this.layoutCross(children, alignItems, cross, _anchorPos, mianLenArray, mainList[0], 0);
-          } else children.forEach(function (child) {
-            child.attribute[cross.field] = getPadding(child, cross.field);
-          });
+          var anchorPosMap = {
+            "flex-start": 0,
+            "flex-end": cross.len,
+            center: cross.len / 2
+          };
+          this.layoutCross(children, alignItems, cross, anchorPosMap, mianLenArray, mainList[0], 0);
         } else if ("flex-start" === alignContent) {
           lastIdx = 0;
-          var _anchorPos2 = 0;
+          var anchorPos = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
           });
         } else if ("center" === alignContent) {
           lastIdx = 0;
-          var _anchorPos3 = Math.max(0, (cross.len - crossLen) / 2);
+          var _anchorPos = Math.max(0, (cross.len - crossLen) / 2);
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "center", cross, _anchorPos3 + s.crossLen / 2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": _anchorPos,
+              "flex-end": _anchorPos + s.crossLen,
+              center: _anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "center", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos += s.crossLen;
           });
         } else if ("space-around" === alignContent) {
           lastIdx = 0;
           var padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);
-          var _anchorPos4 = padding;
+          var _anchorPos2 = padding;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos4, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos4 += s.crossLen + 2 * padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos2,
+              "flex-end": _anchorPos2 + s.crossLen,
+              center: _anchorPos2 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen + 2 * padding;
           });
         } else if ("space-between" === alignContent) {
           lastIdx = 0;
           var _padding = Math.max(0, (cross.len - crossLen) / (2 * mainList.length - 2));
-          var _anchorPos5 = 0;
+          var _anchorPos3 = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos5, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos5 += s.crossLen + 2 * _padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos3,
+              "flex-end": _anchorPos3 + s.crossLen,
+              center: _anchorPos3 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen + 2 * _padding;
           });
         }
         children.forEach(function (child, idx) {
           child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
-        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || (this.tryLayout(p), this.layouting = !1);
+        }), p.addUpdateLayoutTag();
+        var b = this.getAABBBounds(p);
+        clip || this.tempBounds.equals(b) || this.tryLayout(p, !1);
+      }
+    }, {
+      key: "getAABBBounds",
+      value: function getAABBBounds(graphic) {
+        this.skipBoundsTrigger = !0;
+        var b = graphic.AABBBounds;
+        return this.skipBoundsTrigger = !1, b;
+      }
+    }, {
+      key: "updateChildPos",
+      value: function updateChildPos(posBaseLeftTop, lastP, lastBP) {
+        return posBaseLeftTop + (null != lastP ? lastP : 0) - lastBP;
       }
     }, {
       key: "layoutMain",
       value: function layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
           var pos = 0;
-          for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          for (var i = lastIdx; i <= currSeg.idx; i++) {
+            var posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b["".concat(main.field, "1")])), pos += mianLenArray[i].mainLen;
+          }
         } else if ("flex-end" === justifyContent) {
           var _pos = main.len;
-          for (var _i = lastIdx; _i <= currSeg.idx; _i++) _pos -= mianLenArray[_i].mainLen, children[_i].attribute[main.field] = _pos + getPadding(children[_i], main.field);
+          for (var _i = lastIdx; _i <= currSeg.idx; _i++) {
+            _pos -= mianLenArray[_i].mainLen;
+            var _posBaseLeftTop = _pos + getPadding(children[_i], main.field),
+              _b = this.getAABBBounds(children[_i]);
+            !_b.empty() && (children[_i].attribute[main.field] = this.updateChildPos(_posBaseLeftTop, children[_i].attribute[main.field], _b["".concat(main.field, "1")]));
+          }
         } else if ("space-around" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos2 = 0;
-            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) children[_i2].attribute[main.field] = _pos2 + getPadding(children[_i2], main.field), _pos2 += mianLenArray[_i2].mainLen;
+            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) {
+              var _posBaseLeftTop2 = _pos2 + getPadding(children[_i2], main.field),
+                _b2 = this.getAABBBounds(children[_i2]);
+              !_b2.empty() && (children[_i2].attribute[main.field] = this.updateChildPos(_posBaseLeftTop2, children[_i2].attribute[main.field], _b2["".concat(main.field, "1")])), _pos2 += mianLenArray[_i2].mainLen;
+            }
           } else {
             var size = currSeg.idx - lastIdx + 1,
               padding = (main.len - currSeg.mainLen) / size / 2;
             var _pos3 = padding;
-            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) children[_i3].attribute[main.field] = _pos3 + getPadding(children[_i3], main.field), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) {
+              var _posBaseLeftTop3 = _pos3 + getPadding(children[_i3], main.field),
+                _b3 = this.getAABBBounds(children[_i3]);
+              !_b3.empty() && (children[_i3].attribute[main.field] = this.updateChildPos(_posBaseLeftTop3, children[_i3].attribute[main.field], _b3["".concat(main.field, "1")])), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            }
           }
         } else if ("space-between" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos4 = 0;
-            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) children[_i4].attribute[main.field] = _pos4 + getPadding(children[_i4], main.field), _pos4 += mianLenArray[_i4].mainLen;
+            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) {
+              var _posBaseLeftTop4 = _pos4 + getPadding(children[_i4], main.field),
+                _b4 = this.getAABBBounds(children[_i4]);
+              !_b4.empty() && (children[_i4].attribute[main.field] = this.updateChildPos(_posBaseLeftTop4, children[_i4].attribute[main.field], _b4["".concat(main.field, "1")])), _pos4 += mianLenArray[_i4].mainLen;
+            }
           } else {
             var _size = currSeg.idx - lastIdx + 1,
               _padding2 = (main.len - currSeg.mainLen) / (2 * _size - 2);
             var _pos5 = 0;
-            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) children[_i5].attribute[main.field] = _pos5 + getPadding(children[_i5], main.field), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) {
+              var _posBaseLeftTop5 = _pos5 + getPadding(children[_i5], main.field),
+                _b5 = this.getAABBBounds(children[_i5]);
+              !_b5.empty() && (children[_i5].attribute[main.field] = this.updateChildPos(_posBaseLeftTop5, children[_i5].attribute[main.field], _b5["".concat(main.field, "1")])), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            }
           }
         } else if ("center" === justifyContent) {
           var _pos6 = (main.len - currSeg.mainLen) / 2;
-          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) children[_i6].attribute[main.field] = _pos6 + getPadding(children[_i6], main.field), _pos6 += mianLenArray[_i6].mainLen;
+          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) {
+            var _posBaseLeftTop6 = _pos6 + getPadding(children[_i6], main.field),
+              _b6 = this.getAABBBounds(children[_i6]);
+            !_b6.empty() && (children[_i6].attribute[main.field] = this.updateChildPos(_posBaseLeftTop6, children[_i6].attribute[main.field], _b6["".concat(main.field, "1")])), _pos6 += mianLenArray[_i6].mainLen;
+          }
         }
       }
     }, {
       key: "layoutCross",
-      value: function layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
-        if ("flex-end" === alignItem) for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);else if ("center" === alignItem) for (var _i7 = lastIdx; _i7 <= currSeg.idx; _i7++) children[_i7].attribute[cross.field] = anchorPos - lenArray[_i7].crossLen / 2 + getPadding(children[_i7], cross.field);else for (var _i8 = lastIdx; _i8 <= currSeg.idx; _i8++) children[_i8].attribute[cross.field] = anchorPos + getPadding(children[_i8], cross.field);
+      value: function layoutCross(children, alignItem, cross, anchorPosMap, lenArray, currSeg, lastIdx) {
+        var _a;
+        for (var i = lastIdx; i <= currSeg.idx; i++) {
+          var child = children[i];
+          var alignSelf = child.attribute.alignSelf;
+          alignSelf && "auto" !== alignSelf || (alignSelf = alignItem);
+          var b = this.getAABBBounds(child),
+            anchorPos = null !== (_a = anchorPosMap[alignSelf]) && void 0 !== _a ? _a : anchorPosMap["flex-start"];
+          "flex-end" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : "center" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen / 2 + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")]));
+        }
       }
     }, {
       key: "activate",
       value: function activate(context) {
         var _this2 = this;
         this.pluginService = context, application.graphicService.hooks.onAttributeUpdate.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage && graphic.stage === _this2.pluginService.stage && _this2.tryLayout(graphic, !1);
         }), application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, function (graphic, stage, willUpdate, bounds) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && _tempBounds.copy(bounds);
+          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && _tempBounds.copy(bounds);
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, function (graphic, stage, bounds, params, selfChange) {
-          stage && stage === _this2.pluginService.stage && graphic.isContainer && (_tempBounds.equals(bounds) || (_this2.tryLayout(graphic), _this2.layouting = !1));
+          stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && (_tempBounds.equals(bounds) || _this2.tryLayout(graphic, !1));
         }), application.graphicService.hooks.onSetStage.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic, !1);
         });
       }
     }, {
@@ -23491,6 +23649,10 @@
         var _this3 = this;
         application.graphicService.hooks.onAttributeUpdate.taps = application.graphicService.hooks.onAttributeUpdate.taps.filter(function (item) {
           return item.name !== _this3.key;
+        }), application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
+        }), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
         }), application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(function (item) {
           return item.name !== _this3.key;
         });
@@ -23499,11 +23661,7 @@
     return FlexLayoutPlugin;
   }();
   function getPadding(graphic, field) {
-    if (!graphic.attribute.boundsPadding) return 0;
-    if (isNumber(graphic.attribute.boundsPadding)) return graphic.attribute.boundsPadding;
-    if (isArray$1(graphic.attribute.boundsPadding) && 1 === graphic.attribute.boundsPadding.length) return graphic.attribute.boundsPadding[0];
-    var paddingArray = parsePadding(graphic.attribute.boundsPadding);
-    return "x" === field ? paddingArray[3] : "y" === field ? paddingArray[0] : 0;
+    return 0;
   }
 
   var defaultTicker = new DefaultTicker();
@@ -23703,7 +23861,13 @@
       _classCallCheck(this, Stage);
       var _a;
       _this = _super.call(this, {}), _this._onVisibleChange = function (visible) {
-        _this._skipRender < 0 || (visible ? (_this.dirtyBounds && _this.dirtyBounds.setValue(0, 0, _this._viewBox.width(), _this._viewBox.height()), _this._skipRender > 1 && _this.renderNextFrame(), _this._skipRender = 0) : _this._skipRender = 1);
+        if (!(_this._skipRender < 0)) if (visible) {
+          if (_this.dirtyBounds) {
+            var b = _this.window.getViewBox();
+            _this.dirtyBounds.setValue(b.x1, b.y1, b.width(), b.height());
+          }
+          _this._skipRender > 1 && _this.renderNextFrame(), _this._skipRender = 0;
+        } else _this._skipRender = 1;
       }, _this.beforeRender = function (stage) {
         _this._beforeRender && _this._beforeRender(stage);
       }, _this.afterRender = function (stage) {
@@ -23716,12 +23880,13 @@
       }, _this.global = application.global, !_this.global.env && isBrowserEnv() && _this.global.setEnv("browser"), _this.window = container.get(VWindow), _this.renderService = container.get(RenderService), _this.pluginService = container.get(PluginService), _this.layerService = container.get(LayerService), _this.pluginService.active(_assertThisInitialized(_this), params), _this.window.create({
         width: params.width,
         height: params.height,
+        viewBox: params.viewBox,
         container: params.container,
         dpr: params.dpr || _this.global.devicePixelRatio,
         canvasControled: !1 !== params.canvasControled,
         title: params.title || "",
         canvas: params.canvas
-      }), _this._viewBox = new AABBBounds(), params.viewBox ? _this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : _this._viewBox.setValue(0, 0, _this.width, _this.height), _this.state = "normal", _this.renderCount = 0, _this.tryInitEventSystem(), _this._subView = !(_this._viewBox.width() === _this.width && _this._viewBox.height() === _this.height), _this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, _this.appendChild(_this.layerService.createLayer(_assertThisInitialized(_this), {
+      }), _this.state = "normal", _this.renderCount = 0, _this.tryInitEventSystem(), _this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, _this.appendChild(_this.layerService.createLayer(_assertThisInitialized(_this), {
         main: !0
       })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, params.autoRender && _this.enableAutoRender(), !1 === params.disableDirtyBounds && _this.enableDirtyBounds(), params.enableHtmlAttribute && _this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && _this.enableLayout(), _this.hooks.beforeRender.tap("constructor", _this.beforeRender), _this.hooks.afterRender.tap("constructor", _this.afterRender), _this._beforeRender = params.beforeRender, _this._afterRender = params.afterRender, _this.ticker = params.ticker || defaultTicker, _this.supportInteractiveLayer = !1 !== params.interactiveLayer, _this.timeline = new DefaultTimeline(), _this.ticker.addTimeline(_this.timeline), _this.timeline.pause(), params.optimize || (params.optimize = {}), _this.optmize(params.optimize), params.background && isString$1(_this._background) && _this._background.includes("/") && _this.setAttributes({
         background: _this._background
@@ -23731,26 +23896,28 @@
     _createClass(Stage, [{
       key: "viewBox",
       get: function get() {
-        return this._viewBox;
+        return this.window.getViewBox();
       },
       set: function set(b) {
-        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
+        this.window.setViewBox(b);
       }
     }, {
       key: "x",
       get: function get() {
-        return this._viewBox.x1;
+        return this.window.getViewBox().x1;
       },
       set: function set(x) {
-        this._viewBox.translate(x - this._viewBox.x1, 0);
+        var b = this.window.getViewBox();
+        b.translate(x - b.x1, 0), this.window.setViewBox(b);
       }
     }, {
       key: "y",
       get: function get() {
-        return this._viewBox.y1;
+        return this.window.getViewBox().y1;
       },
       set: function set(y) {
-        this._viewBox.translate(0, y - this._viewBox.y1);
+        var b = this.window.getViewBox();
+        b.translate(0, y - b.y1), this.window.setViewBox(b);
       }
     }, {
       key: "width",
@@ -23763,7 +23930,7 @@
     }, {
       key: "viewWidth",
       get: function get() {
-        return this._viewBox.width();
+        return this.window.getViewBox().width();
       },
       set: function set(w) {
         this.resizeView(w, this.viewHeight);
@@ -23771,7 +23938,7 @@
     }, {
       key: "viewHeight",
       get: function get() {
-        return this._viewBox.height();
+        return this.window.getViewBox().height();
       },
       set: function set(h) {
         this.resizeView(this.viewWidth, h);
@@ -23811,6 +23978,16 @@
       get: function get() {
         return this._eventSystem;
       }
+    }, {
+      key: "pauseRender",
+      value: function pauseRender() {
+        this._skipRender = -1;
+      }
+    }, {
+      key: "resumeRender",
+      value: function resumeRender() {
+        this._skipRender = 0;
+      }
     }, {
       key: "tryInitEventSystem",
       value: function tryInitEventSystem() {
@@ -23820,22 +23997,7 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents,
-          viewport: {
-            viewBox: this._viewBox,
-            get x() {
-              return this.viewBox.x1;
-            },
-            get y() {
-              return this.viewBox.y1;
-            },
-            get width() {
-              return this.viewBox.width();
-            },
-            get height() {
-              return this.viewBox.height();
-            }
-          }
+          supportsTouchEvents: this.params.supportsTouchEvents
         }, this.params.event)));
       }
     }, {
@@ -24027,10 +24189,15 @@
           _this7.pluginService.unRegister(plugin);
         }));
       }
+    }, {
+      key: "getPluginsByName",
+      value: function getPluginsByName(name) {
+        return this.pluginService.findPluginsByName(name);
+      }
     }, {
       key: "tryUpdateAABBBounds",
       value: function tryUpdateAABBBounds() {
-        var viewBox = this._viewBox;
+        var viewBox = this.window.getViewBox();
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
     }, {
@@ -24070,14 +24237,14 @@
     }, {
       key: "clearViewBox",
       value: function clearViewBox(color) {
-        this.window.clearViewBox(this._viewBox, color);
+        this.window.clearViewBox(color);
       }
     }, {
       key: "render",
       value: function render(layers, params) {
         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++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "combineLayersToWindow",
@@ -24097,7 +24264,7 @@
       value: function _doRenderInThisFrame() {
         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++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "renderLayerList",
@@ -24112,13 +24279,17 @@
           layer.renderCount > _this10.renderCount || (layer.renderCount = _this10.renderCount + 1, layer.render({
             renderService: _this10.renderService,
             background: layer === _this10.defaultLayer ? _this10.background : void 0,
-            updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty())
+            updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty()),
+            viewBox: _this10.window.getViewBox(),
+            transMatrix: _this10.window.getViewBoxTransform()
           }, Object.assign({
             renderStyle: _this10.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+          viewBox: this.window.getViewBox(),
+          transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -24133,9 +24304,9 @@
       key: "resize",
       value: function resize(w, h) {
         var rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        this.window.resize(w, h), this.forEachChildren(function (c) {
+        this.window.hasSubView() || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.window.resize(w, h), this.forEachChildren(function (c) {
           c.resize(w, h);
-        }), this._subView || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
       }
     }, {
       key: "resizeView",
@@ -24218,50 +24389,44 @@
       }
     }, {
       key: "renderTo",
-      value: function renderTo(window, params) {
+      value: function renderTo(window) {
         var _this12 = this;
         this.forEachChildren(function (layer, i) {
-          layer.drawTo(window, Object.assign(Object.assign({}, params), {
+          layer.drawTo(window, {
             renderService: _this12.renderService,
+            viewBox: window.getViewBox(),
+            transMatrix: window.getViewBoxTransform(),
             background: layer === _this12.defaultLayer ? _this12.background : void 0,
             clear: 0 === i,
             updateBounds: !(!_this12.dirtyBounds || _this12.dirtyBounds.empty())
-          }));
+          });
         });
       }
     }, {
       key: "renderToNewWindow",
       value: function renderToNewWindow() {
-        var fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         var viewBox = arguments.length > 1 ? arguments[1] : undefined;
-        var window = container.get(VWindow);
-        if (fullImage) window.create({
-          width: this.viewWidth,
-          height: this.viewHeight,
+        var window = container.get(VWindow),
+          x1 = viewBox ? -viewBox.x1 : 0,
+          y1 = viewBox ? -viewBox.y1 : 0,
+          x2 = viewBox ? viewBox.x2 : this.viewWidth,
+          y2 = viewBox ? viewBox.y2 : this.viewHeight,
+          width = viewBox ? viewBox.width() : this.viewWidth,
+          height = viewBox ? viewBox.height() : this.viewHeight;
+        return window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          },
+          width: width,
+          height: height,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        });else {
-          var width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x),
-            height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
-          window.create({
-            width: width,
-            height: height,
-            dpr: this.window.dpr,
-            canvasControled: !0,
-            offscreen: !0,
-            title: ""
-          });
-        }
-        var x = viewBox ? -viewBox.x1 : 0,
-          y = viewBox ? -viewBox.y1 : 0;
-        return this.renderTo(window, {
-          x: x,
-          y: y,
-          width: viewBox ? viewBox.x2 : window.width,
-          height: viewBox ? viewBox.y2 : window.height
-        }), window;
+        }), this.renderTo(window), window;
       }
     }, {
       key: "toCanvas",
@@ -24301,7 +24466,7 @@
     __metadata$S = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
-  var initMatrix$1 = new Matrix(1, 0, 0, 1, 0, 0),
+  var initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
     globalPoint = {
       x: 0,
       y: 0
@@ -24309,7 +24474,7 @@
   exports.EmptyContext2d = /*#__PURE__*/function () {
     function EmptyContext2d(canvas, dpr) {
       _classCallCheck(this, EmptyContext2d);
-      this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D();
+      this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D(), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
     }
     _createClass(EmptyContext2d, [{
       key: "nativeContext",
@@ -24622,7 +24787,12 @@
       value: function clearMatrix() {
         var setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         var dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix$1, setTransform, dpr);
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+      }
+    }, {
+      key: "setClearMatrix",
+      value: function setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
     }, {
       key: "onlyTranslate",
@@ -24937,7 +25107,7 @@
   exports.BaseWindowHandlerContribution = /*#__PURE__*/function () {
     function BaseWindowHandlerContribution() {
       _classCallCheck(this, BaseWindowHandlerContribution);
-      this._uid = Generator.GenAutoIncrementId();
+      this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
     }
     _createClass(BaseWindowHandlerContribution, [{
       key: "onChange",
@@ -24970,6 +25140,26 @@
           left: 0
         };
       }
+    }, {
+      key: "setViewBox",
+      value: function setViewBox(vb) {
+        this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
+      }
+    }, {
+      key: "getViewBox",
+      value: function getViewBox() {
+        return this.viewBox;
+      }
+    }, {
+      key: "setViewBoxTransform",
+      value: function setViewBoxTransform(a, b, c, d, e, f) {
+        this.modelMatrix.setValue(a, b, c, d, e, f);
+      }
+    }, {
+      key: "getViewBoxTransform",
+      value: function getViewBoxTransform() {
+        return this.modelMatrix;
+      }
     }]);
     return BaseWindowHandlerContribution;
   }();
@@ -25010,14 +25200,11 @@
           group: null
         };
         params.pickerService = this;
-        var offsetX = 0,
-          offsetY = 0;
-        if (params && params.bounds) {
-          if (!params.bounds.contains(point.x, point.y)) return result;
-          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
-        }
+        var w = params.bounds.width(),
+          h = params.bounds.height();
+        if (!new AABBBounds().setValue(0, 0, w, h).containsPoint(point)) return result;
         this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
-        var parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
+        var parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         var 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) {
@@ -28929,9 +29116,9 @@
     }
     children.length && flatten(1 === children.length ? children[0] : children, childrenList);
     var g = "Group" === c.name ? new c(attribute) : c(config);
-    return parseToGraphic(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+    return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
   }
-  function parseToGraphic(g, childrenList, props) {
+  function parseToGraphic$1(g, childrenList, props) {
     var out,
       isGraphic = !1;
     switch (g.type) {
@@ -28957,6 +29144,47 @@
   }
   var Fragment = Group;
 
+  function decodeReactDom(dom) {
+    if (!dom || !dom.$$typeof) return dom;
+    var type = dom.type,
+      _dom$props = dom.props,
+      attribute = _dom$props.attribute,
+      children = _dom$props.children,
+      stateProxy = _dom$props.stateProxy,
+      g = type({
+        attribute: attribute
+      }),
+      out = parseToGraphic(g, dom.props, children);
+    return out || (stateProxy && (g.stateProxy = stateProxy), g.id = attribute.id, g.name = attribute.name, isArray$1(children) ? children.forEach(function (item) {
+      var c = decodeReactDom(item);
+      c && c.type && g.add(c);
+    }) : children && g.add(decodeReactDom(children)), g);
+  }
+  function parseToGraphic(g, props, childrenList) {
+    var out,
+      isGraphic = !1;
+    switch (g.type) {
+      case "richtext":
+        break;
+      case "rich/text":
+        out = g.attribute || {}, childrenList && (out.text = childrenList), g.attribute = out;
+        break;
+      case "rich/image":
+        out = g.attribute || {};
+        break;
+      default:
+        isGraphic = !0;
+    }
+    return isGraphic ? Object.keys(props).forEach(function (k) {
+      var en = REACT_TO_CANOPUS_EVENTS[k];
+      en && g.on(en, props[k]);
+    }) : "richtext" === g.type && (g.attribute.textConfig = childrenList.map(function (item) {
+      return decodeReactDom(item);
+    }).filter(function (item) {
+      return item;
+    })), out;
+  }
+
   var DragNDrop = /*#__PURE__*/function () {
     function DragNDrop(rootNode) {
       var _this = this;
@@ -29258,7 +29486,6 @@
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var outP = [0, 0, 0],
-    initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
     addArcToBezierPath = function addArcToBezierPath(bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) {
       if (clockwise) for (; endAngle > startAngle;) endAngle -= pi2;else for (; endAngle < startAngle;) endAngle += pi2;
       var step = pi / 3 * (endAngle > startAngle ? 1 : -1);
@@ -29294,7 +29521,7 @@
       }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
       var context = canvas.nativeCanvas.getContext("2d");
       if (!context) throw new Error("发生错误，获取2d上下文失败");
-      this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+      this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
     }
     _createClass(BrowserContext2d, [{
       key: "fillStyle",
@@ -29930,7 +30157,12 @@
       value: function clearMatrix() {
         var setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         var dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        this.setTransformFromMatrix(this._clearMatrix, setTransform, dpr);
+      }
+    }, {
+      key: "setClearMatrix",
+      value: function setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
     }, {
       key: "onlyTranslate",
@@ -30214,7 +30446,7 @@
     function BrowserWindowHandlerContribution_1() {
       var _this;
       _classCallCheck(this, BrowserWindowHandlerContribution_1);
-      _this = _super.call(this), _this.type = "browser", _this._canvasIsIntersecting = !0, _this.global = application.global;
+      _this = _super.call(this), _this.type = "browser", _this._canvasIsIntersecting = !0, _this.global = application.global, _this.viewBox = new AABBBounds(), _this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       return _this;
     }
     _createClass(BrowserWindowHandlerContribution_1, [{
@@ -30395,8 +30627,9 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {
-        var context = this.getContext(),
+      value: function clearViewBox(color) {
+        var vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -31000,8 +31233,9 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {
-        var context = this.getContext(),
+      value: function clearViewBox(color) {
+        var vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -31648,8 +31882,9 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {
-        var context = this.getContext(),
+      value: function clearViewBox(color) {
+        var vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -32049,7 +32284,7 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {}
+      value: function clearViewBox(color) {}
     }]);
     return NodeWindowHandlerContribution;
   }(exports.BaseWindowHandlerContribution);
@@ -32579,8 +32814,9 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {
-        var context = this.getContext(),
+      value: function clearViewBox(color) {
+        var vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -33011,8 +33247,9 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {
-        var context = this.getContext(),
+      value: function clearViewBox(color) {
+        var vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -33408,7 +33645,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 || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$1(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);
@@ -33486,7 +33723,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 || isNumber$1(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);
@@ -34853,7 +35090,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.19";
+  const version = "0.17.20-alpha.10";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -34904,6 +35141,7 @@
   exports.BoundsContext = BoundsContext;
   exports.BoundsPicker = BoundsPicker;
   exports.CIRCLE_NUMBER_TYPE = CIRCLE_NUMBER_TYPE;
+  exports.Canvas3DDrawItemInterceptor = Canvas3DDrawItemInterceptor;
   exports.CanvasFactory = CanvasFactory;
   exports.CanvasTextLayout = CanvasTextLayout;
   exports.CbAnimate = CbAnimate;
@@ -34925,6 +35163,7 @@
   exports.CustomEvent = CustomEvent;
   exports.CustomPath2D = CustomPath2D;
   exports.CustomSymbolClass = CustomSymbolClass;
+  exports.DebugDrawItemInterceptorContribution = DebugDrawItemInterceptorContribution;
   exports.DefaultArcAllocate = DefaultArcAllocate;
   exports.DefaultArcAttribute = DefaultArcAttribute;
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
@@ -34978,6 +35217,7 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
+  exports.DrawItemInterceptor = DrawItemInterceptor;
   exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
   exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
@@ -35016,6 +35256,7 @@
   exports.IncreaseCount = IncreaseCount;
   exports.IncrementalDrawContribution = IncrementalDrawContribution;
   exports.InputText = InputText;
+  exports.InteractiveDrawItemInterceptorContribution = InteractiveDrawItemInterceptorContribution;
   exports.InteractiveSubRenderContribution = InteractiveSubRenderContribution;
   exports.LINE_NUMBER_TYPE = LINE_NUMBER_TYPE;
   exports.Layer = Layer;
@@ -35077,6 +35318,7 @@
   exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
   exports.SegContext = SegContext;
   exports.ShadowRoot = ShadowRoot;
+  exports.ShadowRootDrawItemInterceptorContribution = ShadowRootDrawItemInterceptorContribution;
   exports.Stage = Stage;
   exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
   exports.Step = Step$1;
@@ -35183,6 +35425,7 @@
   exports.cubicLength = cubicLength;
   exports.cubicPointAt = cubicPointAt;
   exports.cubicSubdivide = cubicSubdivide;
+  exports.decodeReactDom = decodeReactDom;
   exports.defaultArcAllocate = defaultArcAllocate;
   exports.defaultArcBackgroundRenderContribution = defaultArcBackgroundRenderContribution;
   exports.defaultArcRenderContribution = defaultArcRenderContribution;