@visactor/vchart 1.9.3-alpha.0 → 1.9.3-alpha.1

package/build/index.js

@@ -8336,9 +8336,6 @@
       clear() {
         this.transformCbList = null, this.commandList.length = 0, this.curves.length = 0;
       }
-      beginPath() {
-        this.clear();
-      }
       toString() {
         if (!this.toStringCbList) {
           const list = [];
@@ -8348,7 +8345,7 @@
             let path = "";
             for (let i = 0; i < bezierPathList.length; i += 6) path += `C${bezierPathList[i]} ${bezierPathList[i + 1]} ${bezierPathList[i + 2]} ${bezierPathList[i + 3]} ${bezierPathList[i + 4]} ${bezierPathList[i + 5]}`;
             return path;
-          }, list[enumCommandMap.R] = cmd => `M${cmd[1]} ${cmd[2]} h${cmd[3]} v${cmd[4]} H${cmd[1]}Z`, list[enumCommandMap.Z] = cmd => "Z", this.toStringCbList = list;
+          }, list[enumCommandMap.Z] = cmd => "Z", this.toStringCbList = list;
         }
         const list = this.toStringCbList;
         let path = "";
@@ -8687,7 +8684,6 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
-      renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
       boundsMode: "accurate",
@@ -8785,7 +8781,7 @@
       strokeBoundsBuffer: 0,
       keepDirIn3d: !0
     });
-    const DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+    const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
       width: 300,
       height: 300,
       ellipsis: !0,
@@ -9693,9 +9689,20 @@
         this._handler.setStyle(style);
       }
       create(params) {
+        var _a, _b;
         this._handler.createWindow(params);
         const windowWH = this._handler.getWH();
-        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
+        this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: this._width,
+          y2: this._height
+        }) : this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
+          y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
+        }), this.title = this._handler.getTitle(), this.resizable = !0;
       }
       setWindowHandler(handler) {
         this._handler = handler;
@@ -9736,8 +9743,35 @@
       getContainer() {
         return this._handler.container;
       }
-      clearViewBox(viewBox, color) {
-        this._handler.clearViewBox(viewBox, color);
+      clearViewBox(color) {
+        this._handler.clearViewBox(color);
+      }
+      setViewBox(viewBox) {
+        this._handler.setViewBox(viewBox);
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this._handler.setViewBoxTransform(a, b, c, d, e, f);
+      }
+      getViewBox() {
+        return this._handler.getViewBox();
+      }
+      getViewBoxTransform() {
+        return this._handler.getViewBoxTransform();
+      }
+      pointTransform(x, y) {
+        const vb = this._handler.getViewBox(),
+          nextP = {
+            x: x,
+            y: y
+          };
+        return this._handler.getViewBoxTransform().transformPoint({
+          x: x,
+          y: y
+        }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
+      }
+      hasSubView() {
+        const viewBox = this._handler.getViewBox();
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -9823,8 +9857,16 @@
         const window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height();
+          height = bounds.height(),
+          x1 = -bounds.x1,
+          y1 = -bounds.y1;
         window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: bounds.x2,
+            y2: bounds.y2
+          },
           width: width,
           height: height,
           canvas: canvas,
@@ -9833,14 +9875,10 @@
           offscreen: !0,
           title: ""
         });
-        const x = -bounds.x1,
-          y = -bounds.y1,
-          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          transMatrix: window.getViewBoxTransform(),
+          viewBox: window.getViewBox(),
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -10664,7 +10702,7 @@
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.viewX, e.viewY, e), e.pickParams || (this._prePointTargetCache = {
           [cacheKey]: target,
           stageRenderCount: null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1
         })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
@@ -10808,7 +10846,7 @@
           this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-          const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
+          const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
             normalizedEvents = this.normalizeToPointerData(nativeEvent);
           for (let i = 0, j = normalizedEvents.length; i < j; i++) {
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
@@ -10832,7 +10870,6 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
-          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -10840,7 +10877,7 @@
         } = params;
         this.manager = new EventManager(rootNode, {
           clickInterval: clickInterval
-        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -10882,15 +10919,7 @@
         this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
       }
       mapToViewportPoint(event) {
-        const viewport = this.viewport,
-          {
-            x: x,
-            y: y
-          } = event;
-        return {
-          x: x - viewport.x,
-          y: y - viewport.y
-        };
+        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
       }
       mapToCanvasPoint(nativeEvent) {
         var _a;
@@ -10947,6 +10976,17 @@
       transferMouseData(event, nativeEvent) {
         event.isTrusted = nativeEvent.isTrusted, event.srcElement = nativeEvent.srcElement, event.timeStamp = clock.now(), event.type = nativeEvent.type, event.altKey = nativeEvent.altKey, event.button = nativeEvent.button, event.buttons = nativeEvent.buttons, event.client.x = nativeEvent.clientX, event.client.y = nativeEvent.clientY, event.ctrlKey = nativeEvent.ctrlKey, event.shiftKey = nativeEvent.shiftKey, event.metaKey = nativeEvent.metaKey, event.movement.x = nativeEvent.movementX, event.movement.y = nativeEvent.movementY, event.page.x = nativeEvent.pageX, event.page.y = nativeEvent.pageY, event.relatedTarget = null;
       }
+      isEventOutsideOfTargetViewPort(nativeEvent) {
+        if (this.isEventOutsideOfTargetElement(nativeEvent)) return !0;
+        if (this.domElement.getViewBox) {
+          const p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent)),
+            b = this.domElement.getViewBox(),
+            w = b.width(),
+            h = b.height();
+          return !(p.x < w && p.y < h && p.x > 0 && p.y > 0);
+        }
+        return !1;
+      }
       isEventOutsideOfTargetElement(nativeEvent) {
         let target = nativeEvent.target;
         nativeEvent.composedPath && nativeEvent.composedPath().length > 0 && (target = nativeEvent.composedPath()[0]);
@@ -14375,15 +14415,12 @@
       }
       render(params, userParams) {
         var _a;
-        const stage = this.stage;
         this.layerHandler.render([this], {
           renderService: params.renderService,
-          x: stage.x,
-          y: stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
           stage: this.stage,
           layer: this,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(c => c(this)), this.tryRenderSecondaryLayer(params, userParams);
@@ -14407,33 +14444,18 @@
         throw new Error("暂不支持");
       }
       prepare(dirtyBounds, params) {}
-      combineTo(target, params) {
-        var _a, _b, _c;
-        this.offscreen && (this.layerHandler.drawTo(target, [this], Object.assign({
-          background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
-          renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
-          stage: this.stage,
-          layer: this
-        }, params)), this.afterDrawCbs.forEach(c => c(this)));
-      }
       release() {
         super.release(), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(l => {
           application.layerService.releaseLayer(this.stage, l.layer);
         });
       }
       drawTo(target, params) {
-        var _a, _b, _c;
+        var _a;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(c => c(this));
@@ -17037,6 +17059,24 @@
       getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+      combinedStyleToCharacter(config) {
+        const {
+          fill: fill,
+          stroke: stroke,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontStyle: fontStyle,
+          fontWeight: fontWeight
+        } = this.attribute;
+        return Object.assign({
+          fill: fill,
+          stroke: stroke,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontStyle: fontStyle,
+          fontWeight: fontWeight
+        }, config);
+      }
       doUpdateFrameCache() {
         var _a;
         const {
@@ -17055,7 +17095,7 @@
           } = this.attribute,
           paragraphs = [];
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          const config = textConfig[i],
+          const 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 {
             const icon = new RichTextIcon(config);
@@ -17065,7 +17105,7 @@
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
         } else {
-          const richTextConfig = textConfig[i];
+          const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           if (isNumber$1(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text && richTextConfig.text.includes("\n")) {
             const textParts = richTextConfig.text.split("\n");
             for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
@@ -20123,12 +20163,11 @@
       }
       drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e;
-        const {
-          points: points
-        } = area.attribute;
-        if (points.length < 2) return;
         context.beginPath();
         const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+          {
+            points: points
+          } = area.attribute,
           startP = points[0];
         context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
@@ -20285,7 +20324,6 @@
       }
       _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;
         let {
           connectedType: connectedType,
           connectedX: connectedX,
@@ -20294,6 +20332,7 @@
         } = attribute;
         const da = [];
         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(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
+        if (!cache) return;
         context.beginPath();
         const {
           points: points,
@@ -21596,10 +21635,10 @@
       render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context
+          context: this.context,
+          viewBox: params.stage.window.getViewBox(),
+          transMatrix: params.stage.window.getViewBoxTransform()
         }, params), {
-          x: 0,
-          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -21614,11 +21653,12 @@
         const context = target.getContext(),
           targetDpr = target.dpr,
           {
-            x = 0,
-            y = 0,
-            width = this.layer.viewWidth,
-            height = this.layer.viewHeight
-          } = params;
+            viewBox: viewBox
+          } = params,
+          x = viewBox.x1,
+          y = viewBox.y1,
+          width = viewBox.width(),
+          height = viewBox.height();
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
       merge(layerHandlers) {}
@@ -21774,32 +21814,22 @@
         const {
           context: context,
           stage: stage,
-          x = 0,
-          y = 0,
-          width: width,
-          height: height
+          viewBox: viewBox,
+          transMatrix: transMatrix
         } = drawContext;
         if (!context) return;
-        if (drawContext.keepMatrix) {
-          if (context.nativeContext && context.nativeContext.getTransform) {
-            const t = context.nativeContext.getTransform();
-            context.setTransformFromMatrix(t, !0, 1);
-          }
-        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        const dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
+        const dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           const b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
-        const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
+        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -21880,7 +21910,7 @@
       }
       getRenderContribution(graphic) {
         let renderer;
-        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType, graphic)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
+        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
       }
       renderItem(graphic, drawContext, params) {
         if (this.InterceptorContributions.length) for (let i = 0; i < this.InterceptorContributions.length; i++) {
@@ -21912,40 +21942,31 @@
       selectRenderByType(type) {
         return Logger.getInstance().warn("未知错误，不应该走到这里"), null;
       }
-      selectRenderByNumberType(type, graphic) {
-        let data;
-        if (graphic.attribute.renderStyle) {
-          const currentRenderMap = this.styleRenderMap.get(graphic.attribute.renderStyle);
-          data = currentRenderMap && currentRenderMap.get(type);
-        }
-        return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
+      selectRenderByNumberType(type) {
+        return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
         const {
-          clear: clear
-        } = drawContext;
+            clear: clear,
+            viewBox: viewBox
+          } = drawContext,
+          width = viewBox.width(),
+          height = viewBox.height();
         if (clear) {
-          const canvas = context.getCanvas(),
-            {
-              width = canvas.width,
-              height = canvas.height
-            } = drawContext,
-            x = 0,
-            y = 0;
-          context.clearRect(x, y, width, height);
+          context.clearRect(0, 0, width, height);
           const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
           if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: x,
-              y1: y,
-              x2: x + width,
-              y2: y + height
+              x1: 0,
+              y1: 0,
+              x2: 0 + width,
+              y2: 0 + height
             }
-          }, 0, 0), context.fillRect(x, y, width, height);
+          }, 0, 0), context.fillRect(0, 0, width, height);
         }
       }
       afterDraw(renderService, drawParams) {}
@@ -22202,25 +22223,16 @@
           this.currentRenderService = renderService;
           const {
             context: context,
-            x = 0,
-            y = 0
+            viewBox: viewBox
           } = drawContext;
-          if (context) {
-            if (drawContext.keepMatrix) {
-              if (context.nativeContext && context.nativeContext.getTransform) {
-                const t = context.nativeContext.getTransform();
-                context.setTransformFromMatrix(t, !0, 1);
-              }
-            } else context.inuse = !0, context.clearMatrix();
-            context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
-              var _a, _b;
-              return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
-            }).forEach(group => {
-              this.renderGroup(group, drawContext);
-            }), this.hooks.completeDraw.tap("top-draw", () => {
-              context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), this.rendering = !1;
-            });
-          }
+          context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(viewBox.x1, viewBox.y1, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+            var _a, _b;
+            return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
+          }).forEach(group => {
+            this.renderGroup(group, drawContext);
+          }), this.hooks.completeDraw.tap("top-draw", () => {
+            context.restore(), context.restore(), context.draw(), context.inuse = !1, this.rendering = !1;
+          }));
         });
       }
       _increaseRender(group, drawContext) {
@@ -22390,12 +22402,10 @@
           if (!layer || !group.layer.subLayers) return;
           const subLayer = group.layer.subLayers.get(group._uid);
           subLayer && subLayer.drawContribution && subLayer.drawContribution.draw(stage.renderService, Object.assign({
-            x: stage.x,
-            y: stage.y,
-            width: layer.viewWidth,
-            height: layer.viewHeight,
             stage: stage,
             layer: layer,
+            viewBox: stage.window.getViewBox(),
+            transMatrix: stage.window.getViewBoxTransform(),
             clear: "transparent",
             renderService: stage.renderService,
             updateBounds: !1,
@@ -22944,22 +22954,24 @@
     };
     class Stage extends Group$1 {
       set viewBox(b) {
-        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
+        this.window.setViewBox(b);
       }
       get viewBox() {
-        return this._viewBox;
+        return this.window.getViewBox();
       }
       get x() {
-        return this._viewBox.x1;
+        return this.window.getViewBox().x1;
       }
       set x(x) {
-        this._viewBox.translate(x - this._viewBox.x1, 0);
+        const b = this.window.getViewBox();
+        b.translate(x - b.x1, 0), this.window.setViewBox(b);
       }
       get y() {
-        return this._viewBox.y1;
+        return this.window.getViewBox().y1;
       }
       set y(y) {
-        this._viewBox.translate(0, y - this._viewBox.y1);
+        const b = this.window.getViewBox();
+        b.translate(0, y - b.y1), this.window.setViewBox(b);
       }
       get width() {
         return this.window.width;
@@ -22968,13 +22980,13 @@
         this.resize(w, this.height);
       }
       get viewWidth() {
-        return this._viewBox.width();
+        return this.window.getViewBox().width();
       }
       set viewWidth(w) {
         this.resizeView(w, this.viewHeight);
       }
       get viewHeight() {
-        return this._viewBox.height();
+        return this.window.getViewBox().height();
       }
       set viewHeight(h) {
         this.resizeView(this.viewWidth, h);
@@ -23008,7 +23020,13 @@
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
         super({}), this._onVisibleChange = visible => {
-          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
+          if (!(this._skipRender < 0)) if (visible) {
+            if (this.dirtyBounds) {
+              const b = this.window.getViewBox();
+              this.dirtyBounds.setValue(b.x1, b.y1, b.width(), b.height());
+            }
+            this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
+          } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
@@ -23019,17 +23037,24 @@
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
+          viewBox: params.viewBox,
           container: params.container,
           dpr: params.dpr || this.global.devicePixelRatio,
           canvasControled: !1 !== params.canvasControled,
           title: params.title || "",
           canvas: params.canvas
-        }), this._viewBox = new AABBBounds(), params.viewBox ? this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : this._viewBox.setValue(0, 0, this.width, this.height), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
+        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
         });
       }
+      pauseRender() {
+        this._skipRender = -1;
+      }
+      resumeRender() {
+        this._skipRender = 0;
+      }
       tryInitEventSystem() {
         this.global.supportEvent && !this._eventSystem && (this._eventSystem = new EventSystem(Object.assign({
           targetElement: this.window,
@@ -23037,22 +23062,7 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents,
-          viewport: {
-            viewBox: this._viewBox,
-            get x() {
-              return this.viewBox.x1;
-            },
-            get y() {
-              return this.viewBox.y1;
-            },
-            get width() {
-              return this.viewBox.width();
-            },
-            get height() {
-              return this.viewBox.height();
-            }
-          }
+          supportsTouchEvents: this.params.supportsTouchEvents
         }, this.params.event)));
       }
       preventRender(prevent) {
@@ -23199,7 +23209,7 @@
         return this.pluginService.findPluginsByName(name);
       }
       tryUpdateAABBBounds() {
-        const viewBox = this._viewBox;
+        const viewBox = this.window.getViewBox();
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
       combineLayer(ILayer1, ILayer2) {
@@ -23226,12 +23236,12 @@
         this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
       clearViewBox(color) {
-        this.window.clearViewBox(this._viewBox, color);
+        this.window.clearViewBox(color);
       }
       render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -23244,7 +23254,7 @@
       _doRenderInThisFrame() {
         this.timeline.resume(), this.ticker.start();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       renderLayerList(layerList, params) {
         const list = [];
@@ -23256,14 +23266,17 @@
           layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
-            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+            viewBox: this.window.getViewBox(),
+            transMatrix: this.window.getViewBoxTransform()
           }, Object.assign({
-            renderStyle: this.renderStyle,
-            keepMatrix: this.params.renderKeepMatrix
+            renderStyle: this.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+          viewBox: this.window.getViewBox(),
+          transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -23274,9 +23287,9 @@
       }
       resize(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        this.window.resize(w, h), this.forEachChildren(c => {
+        this.window.hasSubView() || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.window.resize(w, h), this.forEachChildren(c => {
           c.resize(w, h);
-        }), this._subView || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
       }
       resizeView(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -23330,47 +23343,41 @@
       getLayer(name) {
         return this.children.filter(layer => layer.name === name)[0];
       }
-      renderTo(window, params) {
+      renderTo(window) {
         this.forEachChildren((layer, i) => {
-          layer.drawTo(window, Object.assign(Object.assign({}, params), {
+          layer.drawTo(window, {
             renderService: this.renderService,
+            viewBox: window.getViewBox(),
+            transMatrix: window.getViewBoxTransform(),
             background: layer === this.defaultLayer ? this.background : void 0,
             clear: 0 === i,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
-          }));
+          });
         });
       }
       renderToNewWindow() {
-        let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let viewBox = arguments.length > 1 ? arguments[1] : undefined;
-        const window = container.get(VWindow);
-        if (fullImage) window.create({
-          width: this.viewWidth,
-          height: this.viewHeight,
+        const window = container.get(VWindow),
+          x1 = viewBox ? -viewBox.x1 : 0,
+          y1 = viewBox ? -viewBox.y1 : 0,
+          x2 = viewBox ? viewBox.x2 : this.viewWidth,
+          y2 = viewBox ? viewBox.y2 : this.viewHeight,
+          width = viewBox ? viewBox.width() : this.viewWidth,
+          height = viewBox ? viewBox.height() : this.viewHeight;
+        return window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          },
+          width: width,
+          height: height,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        });else {
-          const width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x),
-            height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
-          window.create({
-            width: width,
-            height: height,
-            dpr: this.window.dpr,
-            canvasControled: !0,
-            offscreen: !0,
-            title: ""
-          });
-        }
-        const x = viewBox ? -viewBox.x1 : 0,
-          y = viewBox ? -viewBox.y1 : 0;
-        return this.renderTo(window, {
-          x: x,
-          y: y,
-          width: viewBox ? viewBox.x2 : window.width,
-          height: viewBox ? viewBox.y2 : window.height
-        }), window;
+        }), this.renderTo(window), window;
       }
       toCanvas() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
@@ -23400,7 +23407,7 @@
       __metadata$M = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
-    const initMatrix$1 = new Matrix(1, 0, 0, 1, 0, 0),
+    const initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       globalPoint = {
         x: 0,
         y: 0
@@ -23410,7 +23417,7 @@
         return this.path;
       }
       constructor(canvas, dpr) {
-        this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D();
+        this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D(), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       getCanvas() {
         throw new Error("不支持getCanvas");
@@ -23594,7 +23601,10 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix$1, setTransform, dpr);
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+      }
+      setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -23800,7 +23810,7 @@
       };
     let BaseWindowHandlerContribution = class {
       constructor() {
-        this._uid = Generator.GenAutoIncrementId();
+        this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       onChange(cb) {
         this._onChangeCb = cb;
@@ -23821,6 +23831,18 @@
           left: 0
         };
       }
+      setViewBox(vb) {
+        this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
+      }
+      getViewBox() {
+        return this.viewBox;
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this.modelMatrix.setValue(a, b, c, d, e, f);
+      }
+      getViewBoxTransform() {
+        return this.modelMatrix;
+      }
     };
     BaseWindowHandlerContribution = __decorate$_([injectable(), __metadata$K("design:paramtypes", [])], BaseWindowHandlerContribution);
 
@@ -23852,23 +23874,14 @@
           group: null
         };
         params.pickerService = this;
-        let offsetX = 0,
-          offsetY = 0;
-        if (params && params.bounds) {
-          if (!params.bounds.contains(point.x, point.y)) return result;
-          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
-        }
-        if (this.pickContext) if (params.keepMatrix) {
-          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
-            const t = this.pickContext.nativeContext.getTransform();
-            this.pickContext.setTransformFromMatrix(t, !0, 1);
-          }
-        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
-        params.pickContext = this.pickContext;
-        const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
+        const w = params.bounds.width(),
+          h = params.bounds.height();
+        if (!new AABBBounds().setValue(0, 0, w, h).containsPoint(point)) return result;
+        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        const parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         let group;
         for (let i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -27995,7 +28008,6 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const outP = [0, 0, 0],
-      initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) => {
         if (clockwise) for (; endAngle > startAngle;) endAngle -= pi2;else for (; endAngle < startAngle;) endAngle += pi2;
         const step = pi$1 / 3 * (endAngle > startAngle ? 1 : -1);
@@ -28126,7 +28138,7 @@
         }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
         const context = canvas.nativeCanvas.getContext("2d");
         if (!context) throw new Error("发生错误，获取2d上下文失败");
-        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       reset() {
         this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -28488,7 +28500,10 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        this.setTransformFromMatrix(this._clearMatrix, setTransform, dpr);
+      }
+      setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -28719,7 +28734,7 @@
         return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
       }
       constructor() {
-        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global;
+        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global, this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       getTitle() {
         return this.canvas.id.toString();
@@ -28849,8 +28864,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -29284,8 +29300,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -29746,8 +29763,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -30026,7 +30044,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(vb, color) {}
+      clearViewBox(color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$C([injectable(), __param$p(0, inject(VGlobal)), __metadata$t("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -30391,8 +30409,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -30696,8 +30715,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -37320,10 +37340,10 @@
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
           e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
           });
-        }, this._pointerMove = e => {
+        }, this._onHandlerPointerMove = delayMap$2[this.attribute.delayType](e => {
           e.stopPropagation();
           const {
               start: startAttr,
@@ -37341,33 +37361,12 @@
             start: start,
             end: end
           } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), !realTime || startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), this._dispatchEvent("change", {
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), this._dispatchEvent("change", {
             start: start,
             end: end,
             tag: this._activeTag
           }));
-        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap$2[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
-          e.preventDefault();
-          const {
-            start: start,
-            end: end,
-            brushSelect: brushSelect,
-            realTime = !0
-          } = this.attribute;
-          if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
-            const pos = this.eventPosToStagePos(e);
-            this.backgroundDragZoom(this._activeCache.startPos, pos);
-          }
-          this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), this._dispatchEvent("change", {
-            start: this.state.start,
-            end: this.state.end,
-            tag: this._activeTag
-          })), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.removeEventListener("pointerup", this._onHandlerPointerUp);
-        };
+        }, this.attribute.delayTime);
         const {
           position: position,
           showDetail: showDetail
@@ -37420,6 +37419,28 @@
           y: y - ((null === (_b = this.stage) || void 0 === _b ? void 0 : _b.y) || 0)
         };
       }
+      _onHandlerPointerUp(e) {
+        e.preventDefault();
+        const {
+          start: start,
+          end: end,
+          brushSelect: brushSelect,
+          realTime = !0
+        } = this.attribute;
+        if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
+          const pos = this.eventPosToStagePos(e);
+          this.backgroundDragZoom(this._activeCache.startPos, pos);
+        }
+        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), this._dispatchEvent("change", {
+          start: this.state.start,
+          end: this.state.end,
+          tag: this._activeTag
+        })), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp.bind(this))), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        });
+      }
       _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
       }
@@ -37608,7 +37629,7 @@
         }, this._layoutAttrFromConfig;
       }
       render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         this._layoutAttrFromConfig = null;
         const {
             orient: orient,
@@ -37641,15 +37662,15 @@
           height: height,
           cursor: brushSelect ? "crosshair" : "auto"
         }, backgroundStyle), {
-          pickable: !zoomLock && (null === (_c = backgroundStyle.pickable) || void 0 === _c || _c)
-        }), "rect"), (null === (_d = backgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("line", group), (null === (_e = backgroundChartStyle.area) || void 0 === _e ? void 0 : _e.visible) && this.setPreviewAttributes("area", group), brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          pickable: !zoomLock
+        }), "rect"), (null === (_c = backgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this.setPreviewAttributes("line", group), (null === (_d = backgroundChartStyle.area) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("area", group), brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
           x: position.x + start * width,
           y: position.y,
           width: (end - start) * width,
           height: height,
           cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_f = selectedBackgroundChartStyle.pickable) || void 0 === _f || _f)
+          pickable: !zoomLock
         }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
           x: position.x,
           y: position.y + start * height,
@@ -37657,41 +37678,41 @@
           height: (end - start) * height,
           cursor: brushSelect ? "crosshair" : "move"
         }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_g = selectedBackgroundStyle.pickable) || void 0 === _g || _g)
-        }), "rect"), (null === (_h = selectedBackgroundChartStyle.line) || void 0 === _h ? void 0 : _h.visible) && this.setSelectedPreviewAttributes("line", group), (null === (_j = selectedBackgroundChartStyle.area) || void 0 === _j ? void 0 : _j.visible) && this.setSelectedPreviewAttributes("area", group), this._isHorizontal) {
+          pickable: !zoomLock
+        }), "rect"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this.setSelectedPreviewAttributes("line", group), (null === (_f = selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && this.setSelectedPreviewAttributes("area", group), this._isHorizontal) {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_k = middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_g = middleHandlerStyle.background) || void 0 === _g ? void 0 : _g.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
               height: middleHandlerBackgroundSize
-            }, null === (_l = middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), {
-              pickable: !zoomLock && (null === (_p = null === (_o = null === (_m = middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.pickable) || void 0 === _p || _p)
+            }, null === (_h = middleHandlerStyle.background) || void 0 === _h ? void 0 : _h.style), {
+              pickable: !zoomLock
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: position.x + (start + end) / 2 * width,
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
+              symbolType: null !== (_k = null === (_j = middleHandlerStyle.icon) || void 0 === _j ? void 0 : _j.symbolType) && void 0 !== _k ? _k : "square"
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_s = middleHandlerStyle.icon.pickable) || void 0 === _s || _s)
+              pickable: !zoomLock
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
+            symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_u = startHandlerStyle.pickable) || void 0 === _u || _u)
+            pickable: !zoomLock
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
+            symbolType: null !== (_m = endHandlerStyle.symbolType) && void 0 !== _m ? _m : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_w = endHandlerStyle.pickable) || void 0 === _w || _w)
+            pickable: !zoomLock
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -37720,38 +37741,38 @@
           }), "rect");
         } else {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_x = middleHandlerStyle.background) || void 0 === _x ? void 0 : _x.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_o = middleHandlerStyle.background) || void 0 === _o ? void 0 : _o.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
               height: (end - start) * height
-            }, null === (_y = middleHandlerStyle.background) || void 0 === _y ? void 0 : _y.style), {
-              pickable: !zoomLock && (null === (_1 = null === (_0 = null === (_z = middleHandlerStyle.background) || void 0 === _z ? void 0 : _z.style) || void 0 === _0 ? void 0 : _0.pickable) || void 0 === _1 || _1)
+            }, null === (_p = middleHandlerStyle.background) || void 0 === _p ? void 0 : _p.style), {
+              pickable: !zoomLock
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
-              symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
+              symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square",
               strokeBoundsBuffer: 0
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_5 = null === (_4 = middleHandlerStyle.icon) || void 0 === _4 ? void 0 : _4.pickable) || void 0 === _5 || _5)
+              pickable: !zoomLock
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
-            symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
+            symbolType: null !== (_s = startHandlerStyle.symbolType) && void 0 !== _s ? _s : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_7 = startHandlerStyle.pickable) || void 0 === _7 || _7)
+            pickable: !zoomLock
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + end * height,
             size: width,
-            symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
+            symbolType: null !== (_t = endHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_9 = endHandlerStyle.pickable) || void 0 === _9 || _9)
+            pickable: !zoomLock
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -58832,7 +58853,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.9.3-alpha.0";
+    const version = "1.9.3-alpha.1";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();