@visactor/vtable 0.19.2-alpha.0 → 0.19.2-alpha.1

package/dist/vtable.js

@@ -4280,7 +4280,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,
@@ -4830,9 +4830,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;
@@ -4873,8 +4884,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);
@@ -4960,8 +4998,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,
@@ -4970,14 +5016,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,
@@ -5316,7 +5358,7 @@
       delete() {
         this.parent && this.parent.removeChild(this);
       }
-      removeAllChild() {
+      removeAllChild(deep) {
         if (!this._idMap) return;
         let child = this._firstChild;
         for (; child;) {
@@ -5801,7 +5843,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}`);
@@ -5945,7 +5987,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]);
@@ -5969,7 +6011,6 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
-          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -5977,7 +6018,7 @@
         } = params;
         this.manager = new EventManager$1(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);
@@ -6019,15 +6060,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;
@@ -6084,6 +6117,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]);
@@ -7242,7 +7286,8 @@
         }
       }
       tryUpdateGlobalAABBBounds() {
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        const b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -8204,8 +8249,9 @@
         return child.stage = null, application.graphicService.onRemove(child), this.addUpdateBoundTag(), data;
       }
       removeAllChild() {
+        let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         this.forEachChildren(child => {
-          application.graphicService.onRemove(child);
+          application.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
         }), super.removeAllChild(), this.addUpdateBoundTag();
       }
       setStage(stage, layer) {
@@ -8318,15 +8364,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);
@@ -8350,33 +8393,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));
@@ -10980,6 +11008,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 {
@@ -10998,7 +11044,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);
@@ -11008,7 +11054,7 @@
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
         } else {
-          const richTextConfig = textConfig[i];
+          const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
           if (isNumber$2(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));
@@ -15535,10 +15581,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"
         }));
       }
@@ -15553,11 +15599,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) {}
@@ -15713,32 +15760,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("暂不支持");
@@ -15857,29 +15894,25 @@
       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) {}
@@ -16136,25 +16169,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) {
@@ -16324,12 +16348,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,
@@ -16347,6 +16369,8 @@
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
           stage && stage === this.pluginService.stage && this.drawHTML(context.stage.renderService);
+        }), application.graphicService.hooks.onRemove.tap(this.key, graphic => {
+          this.removeDom(graphic);
         }), application.graphicService.hooks.onRelease.tap(this.key, graphic => {
           this.removeDom(graphic);
         });
@@ -16391,28 +16415,29 @@
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
-        if (lastDom && (!container || container === lastDom.container)) return;
-        let nativeDom, nativeContainer;
-        graphic.bindDom.forEach(_ref => {
-          let {
+        let wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          let nativeDom;
+          graphic.bindDom.forEach(_ref => {
+            let {
+              wrapGroup: wrapGroup
+            } = _ref;
+            application.global.removeDom(wrapGroup);
+          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
+          const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
+          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
+            dom: nativeDom,
+            container: container,
             wrapGroup: wrapGroup
-          } = _ref;
-          application.global.removeDom(wrapGroup);
-        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-        const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-        nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
-        const wrapGroup = application.global.createDom({
-          tagName: "div",
-          width: width,
-          height: height,
-          style: style,
-          parent: nativeContainer
-        });
-        wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-          dom: nativeDom,
-          container: container,
-          wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+          }));
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -16880,22 +16905,24 @@
     };
     class Stage extends Group$2 {
       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;
@@ -16904,13 +16931,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);
@@ -16944,7 +16971,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 => {
@@ -16955,17 +16988,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$2(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,
@@ -16973,22 +17013,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) {
@@ -17135,7 +17160,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) {
@@ -17162,12 +17187,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) {
@@ -17180,7 +17205,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 = [];
@@ -17192,14 +17217,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));
@@ -17210,9 +17238,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;
@@ -17266,47 +17294,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;
@@ -17520,7 +17542,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;
@@ -17541,6 +17563,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$K([injectable(), __metadata$x("design:paramtypes", [])], BaseWindowHandlerContribution);
 
@@ -17572,23 +17606,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 = {
@@ -18642,7 +18667,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 / 3 * (endAngle > startAngle ? 1 : -1);
@@ -18773,7 +18797,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);
@@ -19135,7 +19159,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;
@@ -19366,7 +19393,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();
@@ -19495,8 +19522,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();
       }
@@ -19866,7 +19894,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(vb, color) {}
+      clearViewBox(color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$v([injectable(), __param$n(0, inject(VGlobal)), __metadata$n("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -25372,7 +25400,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Segment.defaultAttributes, attributes)), this.name = "segment";
       }
       render() {
-        this.removeAllChild(), this._reset();
+        this.removeAllChild(!0), this._reset();
         const {
           startSymbol: startSymbol,
           endSymbol: endSymbol,
@@ -25641,7 +25669,7 @@
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
+        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26629,7 +26657,7 @@
         this.attribute.disableTriggerEvent || (this.preHandler && (this.preHandler.addEventListener("pointerenter", this._onHover), this.preHandler.addEventListener("pointerleave", this._onUnHover), this.preHandler.addEventListener("pointerdown", this._onClick)), this.nextHandler && (this.nextHandler.addEventListener("pointerenter", this._onHover), this.nextHandler.addEventListener("pointerleave", this._onUnHover), this.nextHandler.addEventListener("pointerdown", this._onClick)));
       }
       _reset() {
-        this.removeAllChild(), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
+        this.removeAllChild(!0), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
       }
     }
     Pager.defaultAttributes = {
@@ -26666,7 +26694,7 @@
         super(...arguments), this.name = "legend", this._title = null;
       }
       render() {
-        this.removeAllChild();
+        this.removeAllChild(!0);
         const {
             interactive = !0,
             title: title,
@@ -28365,7 +28393,7 @@
       }
       render() {
         var _a, _b;
-        this.removeAllChild();
+        this.removeAllChild(!0);
         const {
           layout = "horizontal",
           railWidth: railWidth,
@@ -29157,7 +29185,7 @@
         }, this.addEventListener("click", this.handleClick);
       }
       render() {
-        this.removeAllChild(), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
+        this.removeAllChild(!0), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
       }
       renderBox() {
         this._box = new Rect$2(merge({}, this.attribute.box));
@@ -32603,7 +32631,7 @@
             super(params);
             this.numberType = CHART_NUMBER_TYPE;
             if (!params.chartInstance) {
-                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, {
+                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -32613,8 +32641,9 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                });
+                }));
                 this.chartInstance.renderSync();
+                this.chartInstance.getStage().enableDirtyBounds();
             }
             else {
                 this.chartInstance = params.chartInstance;
@@ -32631,34 +32660,52 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
+                    x1: 0,
+                    x2: x2 - x1,
+                    y1: 0,
+                    y2: y2 - y1
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
+                beforeRender: (chartStage) => {
+                    const stage = this.stage;
+                    const ctx = chartStage.window.getContext();
+                    const stageMatrix = stage.window.getViewBoxTransform();
+                    const viewBox = stage.window.getViewBox();
                     ctx.inuse = true;
                     ctx.clearMatrix();
+                    ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, true);
+                    ctx.translate(viewBox.x1, viewBox.y1);
                     ctx.setTransformForCurrent(true);
                     ctx.beginPath();
                     ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
                     ctx.clip();
+                    ctx.clearMatrix();
+                    if (!chartStage.needRender) {
+                        chartStage.pauseRender();
+                        table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds);
+                        table.scenegraph.updateNextFrame();
+                    }
                 },
                 afterRender(stage) {
                     const ctx = stage.window.getContext();
                     ctx.inuse = false;
+                    stage.needRender = false;
+                    chartStage.resumeRender();
                 }
-            });
+            }));
+            const chartStage = this.activeChartInstance.getStage();
+            const matrix = this.globalTransMatrix.clone();
+            const stageMatrix = this.stage.window.getViewBoxTransform();
+            matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
             this.activeChartInstance.renderSync();
             table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
             this.activeChartInstance.on('click', (params) => {
@@ -32694,11 +32741,12 @@
             const cellGroup = this.parent;
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
+            const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
             return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+                x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
+                y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
             };
         }
     }
@@ -32729,6 +32777,10 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
+        bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
+        bodyBound.y2 = bodyBound.y2 + (table.options.viewBox?.y1 ?? 0);
         return bodyBound;
     }
 
@@ -32786,7 +32838,8 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
+            tableChartOption: table.options.chartOption
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -35240,8 +35293,9 @@
                     dx: hierarchyOffset,
                     x
                 };
+                const oldText = textMark.attribute.text;
                 textMark.setAttributes(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
-                if (textMark.attribute.text) {
+                if (!oldText && textMark.attribute.text) {
                     const textBaseline = cellTheme.text.textBaseline;
                     const height = cellHeight - (padding[0] + padding[2]);
                     let y = 0;
@@ -39135,48 +39189,65 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        axes?.forEach((axis, index) => {
-            if (axis.type === 'band') {
-                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
-            }
-            else {
-                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
-            }
-        });
         chartInstance.updateViewBox({
-            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
-            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
-            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
-            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+            x1: 0,
+            x2: viewBox.x2 - viewBox.x1,
+            y1: 0,
+            y2: viewBox.y2 - viewBox.y1
         }, false, false);
-        const table = chart.getRootNode().table;
-        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
-        if (typeof dataId === 'string') {
-            chartInstance.updateDataSync(dataId, data ?? []);
-        }
-        else {
-            const dataBatch = [];
-            for (const dataIdStr in dataId) {
-                const dataIdAndField = dataId[dataIdStr];
-                const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                dataBatch.push({
-                    id: dataIdStr,
-                    values: dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? [],
-                    fields: series?.data?.fields
-                });
-                if (!chartInstance.updateFullDataSync) {
-                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? []);
+        const chartStage = chartInstance.getStage();
+        const matrix = chart.globalTransMatrix.clone();
+        const stageMatrix = chart.stage.window.getViewBoxTransform();
+        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+        chartStage.window.setViewBoxTransform &&
+            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+        const { table } = chart.getRootNode();
+        let updateSpec = false;
+        if (table.options.specFormat) {
+            const formatResult = table.options.specFormat(chart.attribute.spec);
+            if (formatResult.needFormatSpec && formatResult.spec) {
+                const spec = formatResult.spec;
+                chartInstance.updateSpecSync(spec);
+                updateSpec = true;
+            }
+        }
+        if (!updateSpec) {
+            axes?.forEach((axis, index) => {
+                if (axis.type === 'band') {
+                    chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
+                }
+                else {
+                    chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
                 }
+            });
+            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
+            if (typeof dataId === 'string') {
+                chartInstance.updateDataSync(dataId, data ?? []);
+            }
+            else {
+                const dataBatch = [];
+                for (const dataIdStr in dataId) {
+                    const dataIdAndField = dataId[dataIdStr];
+                    const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                    dataBatch.push({
+                        id: dataIdStr,
+                        values: dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? [],
+                        fields: series?.data?.fields
+                    });
+                    if (!chartInstance.updateFullDataSync) {
+                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? []);
+                    }
+                }
+                chartInstance.updateFullDataSync?.(dataBatch);
             }
-            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -39233,7 +39304,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -39241,6 +39312,7 @@
             const { dataId, data, spec } = chart.attribute;
             chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
+            const { table } = chart.getRootNode();
             const { chartInstance, active, cacheCanvas, activeChartInstance } = chart;
             if (!active && cacheCanvas) {
                 if (isArray$1(cacheCanvas)) {
@@ -39254,6 +39326,27 @@
                 }
             }
             else if (activeChartInstance) {
+                if (table.options.specFormat) {
+                    const formatResult = table.options.specFormat(chart.attribute.spec);
+                    if (formatResult.needFormatSpec && formatResult.spec) {
+                        const spec = formatResult.spec;
+                        activeChartInstance.updateSpecSync(spec);
+                        return;
+                    }
+                }
+                const viewBox = chart.getViewBox();
+                activeChartInstance.updateViewBox({
+                    x1: 0,
+                    x2: viewBox.x2 - viewBox.x1,
+                    y1: 0,
+                    y2: viewBox.y2 - viewBox.y1
+                }, false, false);
+                const chartStage = activeChartInstance.getStage();
+                chartStage.needRender = true;
+                const matrix = chart.globalTransMatrix.clone();
+                const stageMatrix = chart.stage.window.getViewBoxTransform();
+                matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+                chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
                 if (typeof dataId === 'string') {
                     activeChartInstance.updateDataSync(dataId, data ?? []);
                 }
@@ -39283,13 +39376,13 @@
                 }
             }
             else {
-                if (chart.getRootNode().table.internalProps.renderChartAsync) {
+                if (table.internalProps.renderChartAsync) {
                     if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
                         chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
                         chartRenderQueueList.push(chart);
                     }
                     if (!IsHandlingChartQueue()) {
-                        startRenderChartQueue(chart.getRootNode().table);
+                        startRenderChartQueue(table);
                     }
                 }
                 else {
@@ -39298,31 +39391,7 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            const { context } = drawContext;
-            if (!context) {
-                return;
-            }
-            const { clip } = chart.attribute;
-            if (clip) {
-                context.save();
-            }
-            else {
-                context.highPerformanceSave();
-            }
-            context.transformFromMatrix(chart.transMatrix, true);
-            context.beginPath();
-            if (params.skipDraw) {
-                this.drawShape(chart, context, 0, 0, drawContext, params, () => false, () => false);
-            }
-            else {
-                this.drawShape(chart, context, 0, 0, drawContext);
-            }
-            if (clip) {
-                context.restore();
-            }
-            else {
-                context.highPerformanceRestore();
-            }
+            this._draw(chart, {}, false, drawContext, params);
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -43198,6 +43267,15 @@
             });
         }
     }
+    function clearCellChartCacheImage(col, row, scenegraph) {
+        const cellGroup = scenegraph.getCell(col, row);
+        cellGroup.children.forEach((node) => {
+            if (node.type === 'chart') {
+                node.cacheCanvas = null;
+                node.addUpdateBoundTag();
+            }
+        });
+    }
     function updateChartData(scenegraph) {
         const table = scenegraph.table;
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -44142,7 +44220,12 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (Env.mode === 'node') {
+            if (table.options.canvas && table.options.viewBox) {
+                vglobal.setEnv('browser');
+                width = table.options.viewBox.x2 - table.options.viewBox.x1;
+                height = table.options.viewBox.y2 - table.options.viewBox.y1;
+            }
+            else if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -44160,9 +44243,15 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                afterRender: () => {
+                beforeRender: (stage) => {
+                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
+                },
+                afterRender: (stage) => {
+                    this.table.options.afterRender && this.table.options.afterRender(stage);
                     this.table.fireListeners('after_render', null);
-                }
+                },
+                canvasControled: !table.options.canvas,
+                viewBox: table.options.viewBox
             });
             this.stage.defaultLayer.setTheme({
                 group: {
@@ -47200,8 +47289,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.x,
-                y: e.y
+                x: e.viewport.x,
+                y: e.viewport.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -48148,12 +48237,14 @@
                 e.preventDefault();
             }
         });
-        handler.on(table.getContainer(), 'resize', e => {
-            if (e.width === 0 && e.height === 0) {
-                return;
-            }
-            table.resize();
-        });
+        if (!table.options.canvas) {
+            handler.on(table.getContainer(), 'resize', e => {
+                if (e.width === 0 && e.height === 0) {
+                    return;
+                }
+                table.resize();
+            });
+        }
     }
 
     function bindTouchListener(eventManager) {
@@ -48409,7 +48500,7 @@
         isDraging = false;
         constructor(table) {
             this.table = table;
-            if (Env.mode === 'node') {
+            if (Env.mode === 'node' || table.options.disableInteraction) {
                 return;
             }
             this.bindOuterEvent();
@@ -51721,7 +51812,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.19.2-alpha.0";
+        version = "0.19.2-alpha.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51732,7 +51823,7 @@
         _chartEventMap = {};
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node') {
+            if (!container && options.mode !== 'node' && !options.canvas) {
                 throw new Error("vtable's container is undefined");
             }
             const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, eventOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth } = options;
@@ -51768,7 +51859,14 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (Env.mode !== 'node') {
+            if (this.options.canvas) {
+                internalProps.element = this.options.canvas.parentElement;
+                internalProps.element.style.position = 'relative';
+                internalProps.focusControl = new FocusInput(this, internalProps.element);
+                internalProps.canvas = this.options.canvas;
+                internalProps.context = internalProps.canvas.getContext('2d');
+            }
+            else if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -52104,7 +52202,21 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            if (Env.mode === 'browser') {
+            this.tableX = 0;
+            this.tableY = 0;
+            if (this.options.canvas && this.options.viewBox) {
+                widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
+                heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
+                if (this?.scenegraph?.stage) {
+                    if (this.options.viewBox) {
+                        this.scenegraph.stage.setViewBox(this.options.viewBox, false);
+                    }
+                    else {
+                        this.scenegraph.stage.resize(widthP, heightP);
+                    }
+                }
+            }
+            else if (Env.mode === 'browser') {
                 const element = this.getElement();
                 const width1 = element.parentElement?.offsetWidth ?? 1 - 1;
                 const height1 = element.parentElement?.offsetHeight ?? 1 - 1;
@@ -52134,13 +52246,35 @@
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
-                this.tableX = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
-                this.tableY = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                this.tableX += (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
+                this.tableY += (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
                 this.tableNoFrameWidth =
                     width - ((lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0)) - ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
                 this.tableNoFrameHeight =
                     height - ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) - ((lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0));
             }
+            else {
+                this.tableX += 0;
+                this.tableY += 0;
+                this.tableNoFrameWidth = width;
+                this.tableNoFrameHeight = height;
+            }
+        }
+        updateViewBox(newViewBox) {
+            const oldWidth = this.options?.viewBox.x2 ?? 0 - this.options?.viewBox.x1 ?? 0;
+            const oldHeight = this.options?.viewBox.y2 ?? 0 - this.options?.viewBox.y1 ?? 0;
+            const newWidth = newViewBox.x2 - newViewBox.x1;
+            const newHeight = newViewBox.y2 - newViewBox.y1;
+            this.options.viewBox = newViewBox;
+            if (oldWidth !== newWidth || oldHeight !== newHeight) {
+                this.resize();
+            }
+            else {
+                this.scenegraph.stage.setViewBox(this.options.viewBox, true);
+            }
+        }
+        setViewBoxTransform(a, b, c, d, e, f) {
+            this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
         }
         get rowHierarchyType() {
             return 'grid';
@@ -52636,6 +52770,8 @@
             const visibleRect = this.getVisibleRect();
             rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
             rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
+            rect.offsetLeft(this.options.viewBox?.x1 ?? 0);
+            rect.offsetTop(this.options.viewBox?.y1 ?? 0);
             return rect;
         }
         getVisibleRect() {
@@ -52790,7 +52926,7 @@
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
             const { parentElement } = internalProps.element;
-            if (parentElement) {
+            if (parentElement && !this.options.canvas) {
                 parentElement.removeChild(internalProps.element);
             }
             this.isReleased = true;
@@ -52963,8 +53099,8 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - (this.options.viewBox?.x1 ?? 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
             return { x, y, inTable };
         }
         getTheme() {
@@ -62447,6 +62583,14 @@
             updateChartData(this.scenegraph);
             this.render();
         }
+        clearChartCacheImage(col, row) {
+            if (isNumber$2(col) && isNumber$2(row)) {
+                clearCellChartCacheImage(col, row, this.scenegraph);
+            }
+            else {
+                clearChartCacheImage(this.scenegraph);
+            }
+        }
         getLegendSelected() {
             return this.internalProps.legends.legendComponent._getSelectedLegends().map((d) => d.label);
         }
@@ -63143,7 +63287,7 @@
     }
 
     registerForVrender();
-    const version = "0.19.2-alpha.0";
+    const version = "0.19.2-alpha.1";
     function getIcons() {
         return get$1();
     }