@visactor/vrender 0.17.20-alpha.5 → 0.17.20-alpha.7

package/dist/index.js

@@ -5293,7 +5293,7 @@
     strokeBoundsBuffer: 0,
     keepDirIn3d: !0
   });
-  var DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+  var DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
     width: 300,
     height: 300,
     ellipsis: !0,
@@ -6283,9 +6283,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",
@@ -6354,8 +6365,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",
@@ -6473,8 +6523,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,
@@ -6483,14 +6541,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,
@@ -7655,7 +7709,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",
@@ -7834,7 +7888,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 +7911,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 +7920,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 +7968,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 +8029,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) {
@@ -13072,15 +13132,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) {
@@ -13120,48 +13177,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);
         });
       }
     }]);
@@ -16555,28 +16592,47 @@
       value: function getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+    }, {
+      key: "combinedStyleToCharacter",
+      value: function combinedStyleToCharacter(config) {
+        var _this$attribute = this.attribute,
+          fill = _this$attribute.fill,
+          stroke = _this$attribute.stroke,
+          fontSize = _this$attribute.fontSize,
+          fontFamily = _this$attribute.fontFamily,
+          fontStyle = _this$attribute.fontStyle,
+          fontWeight = _this$attribute.fontWeight;
+        return Object.assign({
+          fill: fill,
+          stroke: stroke,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontStyle: fontStyle,
+          fontWeight: fontWeight
+        }, config);
+      }
     }, {
       key: "doUpdateFrameCache",
       value: function doUpdateFrameCache() {
         var _this2 = this;
         var _a;
-        var _this$attribute = this.attribute,
-          _this$attribute$textC = _this$attribute.textConfig,
-          textConfig = _this$attribute$textC === void 0 ? [] : _this$attribute$textC,
-          maxWidth = _this$attribute.maxWidth,
-          maxHeight = _this$attribute.maxHeight,
-          width = _this$attribute.width,
-          height = _this$attribute.height,
-          ellipsis = _this$attribute.ellipsis,
-          wordBreak = _this$attribute.wordBreak,
-          verticalDirection = _this$attribute.verticalDirection,
-          textAlign = _this$attribute.textAlign,
-          textBaseline = _this$attribute.textBaseline,
-          layoutDirection = _this$attribute.layoutDirection,
-          singleLine = _this$attribute.singleLine,
+        var _this$attribute2 = this.attribute,
+          _this$attribute2$text = _this$attribute2.textConfig,
+          textConfig = _this$attribute2$text === void 0 ? [] : _this$attribute2$text,
+          maxWidth = _this$attribute2.maxWidth,
+          maxHeight = _this$attribute2.maxHeight,
+          width = _this$attribute2.width,
+          height = _this$attribute2.height,
+          ellipsis = _this$attribute2.ellipsis,
+          wordBreak = _this$attribute2.wordBreak,
+          verticalDirection = _this$attribute2.verticalDirection,
+          textAlign = _this$attribute2.textAlign,
+          textBaseline = _this$attribute2.textBaseline,
+          layoutDirection = _this$attribute2.layoutDirection,
+          singleLine = _this$attribute2.singleLine,
           paragraphs = [];
         for (var i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          var config = textConfig[i],
+          var config = this.combinedStyleToCharacter(textConfig[i]),
             iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
           if (iconCache) paragraphs.push(iconCache);else {
             var icon = new RichTextIcon(config);
@@ -16586,7 +16642,7 @@
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
         } else {
-          var richTextConfig = textConfig[i];
+          var richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           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));
@@ -22034,10 +22090,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"
         }));
       }
@@ -22059,14 +22115,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();
       }
     }, {
@@ -22247,33 +22300,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;
-        if (drawContext.keepMatrix) {
-          if (context.nativeContext && context.nativeContext.getTransform) {
-            var t = context.nativeContext.getTransform();
-            context.setTransformFromMatrix(t, !0, 1);
-          }
-        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        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);
-        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(), drawContext.keepMatrix || (context.inuse = !1);
+        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
       }
     }, {
       key: "doRegister",
@@ -22407,28 +22448,24 @@
       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);
         }
       }
     }, {
@@ -22736,7 +22773,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, t;
+          var skipDraw, context, viewBox;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -22758,23 +22795,15 @@
                 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;
-                if (context) {
-                  if (drawContext.keepMatrix) {
-                    if (context.nativeContext && context.nativeContext.getTransform) {
-                      t = context.nativeContext.getTransform();
-                      context.setTransformFromMatrix(t, !0, 1);
-                    }
-                  } else context.inuse = !0, context.clearMatrix();
-                  context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort(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) {
-                    _this2.renderGroup(group, drawContext);
-                  }), this.hooks.completeDraw.tap("top-draw", function () {
-                    context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), _this2.rendering = !1;
-                  });
-                }
+                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) {
+                  _this2.renderGroup(group, drawContext);
+                }), this.hooks.completeDraw.tap("top-draw", function () {
+                  context.restore(), context.restore(), context.draw(), context.inuse = !1, _this2.rendering = !1;
+                }));
               case 11:
               case "end":
                 return _context.stop();
@@ -23180,12 +23209,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,
@@ -23837,7 +23864,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) {
@@ -23850,12 +23883,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
@@ -23865,26 +23899,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",
@@ -23897,7 +23933,7 @@
     }, {
       key: "viewWidth",
       get: function get() {
-        return this._viewBox.width();
+        return this.window.getViewBox().width();
       },
       set: function set(w) {
         this.resizeView(w, this.viewHeight);
@@ -23905,7 +23941,7 @@
     }, {
       key: "viewHeight",
       get: function get() {
-        return this._viewBox.height();
+        return this.window.getViewBox().height();
       },
       set: function set(h) {
         this.resizeView(this.viewWidth, h);
@@ -23945,6 +23981,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() {
@@ -23954,22 +24000,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)));
       }
     }, {
@@ -24169,7 +24200,7 @@
     }, {
       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;
       }
     }, {
@@ -24209,14 +24240,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, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "combineLayersToWindow",
@@ -24236,7 +24267,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",
@@ -24251,14 +24282,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,
-            keepMatrix: _this10.params.renderKeepMatrix
+            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));
@@ -24273,9 +24307,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",
@@ -24358,50 +24392,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",
@@ -24441,7 +24469,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
@@ -24449,7 +24477,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",
@@ -24762,7 +24790,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",
@@ -25077,7 +25110,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",
@@ -25110,6 +25143,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;
   }();
@@ -25150,23 +25203,14 @@
           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;
-        }
-        if (this.pickContext) if (params.keepMatrix) {
-          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
-            var t = this.pickContext.nativeContext.getTransform();
-            this.pickContext.setTransformFromMatrix(t, !0, 1);
-          }
-        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
-        params.pickContext = this.pickContext;
-        var parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
+        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, 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 && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
           var g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -29445,7 +29489,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);
@@ -29481,7 +29524,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",
@@ -30117,7 +30160,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",
@@ -30401,7 +30449,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, [{
@@ -30582,8 +30630,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();
       }
@@ -31187,8 +31236,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();
       }
@@ -31835,8 +31885,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();
       }
@@ -32236,7 +32287,7 @@
       }
     }, {
       key: "clearViewBox",
-      value: function clearViewBox(vb, color) {}
+      value: function clearViewBox(color) {}
     }]);
     return NodeWindowHandlerContribution;
   }(exports.BaseWindowHandlerContribution);
@@ -32766,8 +32817,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();
       }
@@ -33198,8 +33250,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();
       }
@@ -35040,7 +35093,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.20-alpha.5";
+  const version = "0.17.20-alpha.7";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);