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

package/dist/vtable.js

@@ -4280,7 +4280,7 @@
       strokeBoundsBuffer: 0,
       keepDirIn3d: !0
     });
-    const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+    const DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 300,
       height: 300,
       ellipsis: !0,
@@ -4830,20 +4830,9 @@
         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, 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;
+        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
       }
       setWindowHandler(handler) {
         this._handler = handler;
@@ -4884,35 +4873,8 @@
       getContainer() {
         return this._handler.container;
       }
-      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());
+      clearViewBox(viewBox, color) {
+        this._handler.clearViewBox(viewBox, color);
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -4998,16 +4960,8 @@
         const window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height(),
-          x1 = -bounds.x1,
-          y1 = -bounds.y1;
+          height = bounds.height();
         window.create({
-          viewBox: {
-            x1: x1,
-            y1: y1,
-            x2: bounds.x2,
-            y2: bounds.y2
-          },
           width: width,
           height: height,
           canvas: canvas,
@@ -5016,10 +4970,14 @@
           offscreen: !0,
           title: ""
         });
-        const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        const x = -bounds.x1,
+          y = -bounds.y1,
+          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          transMatrix: window.getViewBoxTransform(),
-          viewBox: window.getViewBox(),
+          x: x,
+          y: y,
+          width: width,
+          height: height,
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -5358,7 +5316,7 @@
       delete() {
         this.parent && this.parent.removeChild(this);
       }
-      removeAllChild(deep) {
+      removeAllChild() {
         if (!this._idMap) return;
         let child = this._firstChild;
         for (; child;) {
@@ -5843,7 +5801,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.viewX, e.viewY, 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.canvasX, e.canvasY, 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}`);
@@ -5987,7 +5945,7 @@
           this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-          const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
+          const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
             normalizedEvents = this.normalizeToPointerData(nativeEvent);
           for (let i = 0, j = normalizedEvents.length; i < j; i++) {
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
@@ -6011,6 +5969,7 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
+          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -6018,7 +5977,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.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.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -6060,7 +6019,15 @@
         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) {
-        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
+        const viewport = this.viewport,
+          {
+            x: x,
+            y: y
+          } = event;
+        return {
+          x: x - viewport.x,
+          y: y - viewport.y
+        };
       }
       mapToCanvasPoint(nativeEvent) {
         var _a;
@@ -6117,17 +6084,6 @@
       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]);
@@ -7286,8 +7242,7 @@
         }
       }
       tryUpdateGlobalAABBBounds() {
-        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;
+        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;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -8249,9 +8204,8 @@
         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), deep && child.isContainer && child.removeAllChild(deep);
+          application.graphicService.onRemove(child);
         }), super.removeAllChild(), this.addUpdateBoundTag();
       }
       setStage(stage, layer) {
@@ -8364,12 +8318,15 @@
       }
       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);
@@ -8393,18 +8350,33 @@
         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;
+        var _a, _b, _c;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          viewBox: params.viewBox,
-          transMatrix: params.transMatrix,
+          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));
@@ -11008,24 +10980,6 @@
       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 {
@@ -11044,7 +10998,7 @@
           } = this.attribute,
           paragraphs = [];
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          const config = this.combinedStyleToCharacter(textConfig[i]),
+          const config = 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);
@@ -11054,7 +11008,7 @@
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
         } else {
-          const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
+          const richTextConfig = 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));
@@ -15581,10 +15535,10 @@
       render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context,
-          viewBox: params.stage.window.getViewBox(),
-          transMatrix: params.stage.window.getViewBoxTransform()
+          context: this.context
         }, params), {
+          x: 0,
+          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -15599,12 +15553,11 @@
         const context = target.getContext(),
           targetDpr = target.dpr,
           {
-            viewBox: viewBox
-          } = params,
-          x = viewBox.x1,
-          y = viewBox.y1,
-          width = viewBox.width(),
-          height = viewBox.height();
+            x = 0,
+            y = 0,
+            width = this.layer.viewWidth,
+            height = this.layer.viewHeight
+          } = params;
         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) {}
@@ -15760,22 +15713,32 @@
         const {
           context: context,
           stage: stage,
-          viewBox: viewBox,
-          transMatrix: transMatrix
+          x = 0,
+          y = 0,
+          width: width,
+          height: height
         } = drawContext;
         if (!context) return;
-        const dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
+        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);
         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), 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) => {
+        (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) => {
           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.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
+        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -15894,25 +15857,29 @@
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
         const {
-            clear: clear,
-            viewBox: viewBox
-          } = drawContext,
-          width = viewBox.width(),
-          height = viewBox.height();
+          clear: clear
+        } = drawContext;
         if (clear) {
-          context.clearRect(0, 0, width, height);
+          const canvas = context.getCanvas(),
+            {
+              width = canvas.width,
+              height = canvas.height
+            } = drawContext,
+            x = 0,
+            y = 0;
+          context.clearRect(x, y, 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, 0, 0, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: 0,
-              y1: 0,
-              x2: 0 + width,
-              y2: 0 + height
+              x1: x,
+              y1: y,
+              x2: x + width,
+              y2: y + height
             }
-          }, 0, 0), context.fillRect(0, 0, width, height);
+          }, 0, 0), context.fillRect(x, y, width, height);
         }
       }
       afterDraw(renderService, drawParams) {}
@@ -16169,16 +16136,25 @@
           this.currentRenderService = renderService;
           const {
             context: context,
-            viewBox: viewBox
+            x = 0,
+            y = 0
           } = drawContext;
-          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;
-          }));
+          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;
+            });
+          }
         });
       }
       _increaseRender(group, drawContext) {
@@ -16348,10 +16324,12 @@
           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,
@@ -16369,8 +16347,6 @@
       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);
         });
@@ -16415,29 +16391,28 @@
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
-        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,
+        if (lastDom && (!container || container === lastDom.container)) return;
+        let nativeDom, nativeContainer;
+        graphic.bindDom.forEach(_ref => {
+          let {
             wrapGroup: wrapGroup
-          }));
-        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+          } = _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");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -16905,24 +16880,22 @@
     };
     class Stage extends Group$2 {
       set viewBox(b) {
-        this.window.setViewBox(b);
+        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
       }
       get viewBox() {
-        return this.window.getViewBox();
+        return this._viewBox;
       }
       get x() {
-        return this.window.getViewBox().x1;
+        return this._viewBox.x1;
       }
       set x(x) {
-        const b = this.window.getViewBox();
-        b.translate(x - b.x1, 0), this.window.setViewBox(b);
+        this._viewBox.translate(x - this._viewBox.x1, 0);
       }
       get y() {
-        return this.window.getViewBox().y1;
+        return this._viewBox.y1;
       }
       set y(y) {
-        const b = this.window.getViewBox();
-        b.translate(0, y - b.y1), this.window.setViewBox(b);
+        this._viewBox.translate(0, y - this._viewBox.y1);
       }
       get width() {
         return this.window.width;
@@ -16931,13 +16904,13 @@
         this.resize(w, this.height);
       }
       get viewWidth() {
-        return this.window.getViewBox().width();
+        return this._viewBox.width();
       }
       set viewWidth(w) {
         this.resizeView(w, this.viewHeight);
       }
       get viewHeight() {
-        return this.window.getViewBox().height();
+        return this._viewBox.height();
       }
       set viewHeight(h) {
         this.resizeView(this.viewWidth, h);
@@ -16971,13 +16944,7 @@
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
         super({}), this._onVisibleChange = visible => {
-          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._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);
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
@@ -16988,24 +16955,17 @@
         }, 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.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, {
+        }), 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, {
           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,
@@ -17013,7 +16973,22 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents
+          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();
+            }
+          }
         }, this.params.event)));
       }
       preventRender(prevent) {
@@ -17160,7 +17135,7 @@
         return this.pluginService.findPluginsByName(name);
       }
       tryUpdateAABBBounds() {
-        const viewBox = this.window.getViewBox();
+        const viewBox = this._viewBox;
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
       combineLayer(ILayer1, ILayer2) {
@@ -17187,12 +17162,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(color);
+        this.window.clearViewBox(this._viewBox, 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._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -17205,7 +17180,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._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++;
+        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++;
       }
       renderLayerList(layerList, params) {
         const list = [];
@@ -17217,17 +17192,14 @@
           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()),
-            viewBox: this.window.getViewBox(),
-            transMatrix: this.window.getViewBoxTransform()
+            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: this.renderStyle
+            renderStyle: this.renderStyle,
+            keepMatrix: this.params.renderKeepMatrix
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
-          viewBox: this.window.getViewBox(),
-          transMatrix: this.window.getViewBoxTransform()
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -17238,9 +17210,9 @@
       }
       resize(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        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 => {
+        this.window.resize(w, h), this.forEachChildren(c => {
           c.resize(w, h);
-        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), 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();
       }
       resizeView(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -17294,41 +17266,47 @@
       getLayer(name) {
         return this.children.filter(layer => layer.name === name)[0];
       }
-      renderTo(window) {
+      renderTo(window, params) {
         this.forEachChildren((layer, i) => {
-          layer.drawTo(window, {
+          layer.drawTo(window, Object.assign(Object.assign({}, params), {
             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),
-          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,
+        const window = container.get(VWindow);
+        if (fullImage) window.create({
+          width: this.viewWidth,
+          height: this.viewHeight,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        }), this.renderTo(window), window;
+        });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;
       }
       toCanvas() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
@@ -17542,7 +17520,7 @@
       };
     let BaseWindowHandlerContribution = class {
       constructor() {
-        this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this._uid = Generator.GenAutoIncrementId();
       }
       onChange(cb) {
         this._onChangeCb = cb;
@@ -17563,18 +17541,6 @@
           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);
 
@@ -17606,14 +17572,23 @@
           group: null
         };
         params.pickerService = this;
-        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 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);
         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 && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -18667,6 +18642,7 @@
         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);
@@ -18797,7 +18773,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._clearMatrix = 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);
       }
       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);
@@ -19159,10 +19135,7 @@
       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(this._clearMatrix, setTransform, dpr);
-      }
-      setClearMatrix(a, b, c, d, e, f) {
-        this._clearMatrix.setValue(a, b, c, d, e, f);
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -19393,7 +19366,7 @@
         return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
       }
       constructor() {
-        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);
+        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global;
       }
       getTitle() {
         return this.canvas.id.toString();
@@ -19522,9 +19495,8 @@
           bottom: 0
         };
       }
-      clearViewBox(color) {
-        const vb = this.viewBox,
-          context = this.getContext(),
+      clearViewBox(vb, color) {
+        const 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();
       }
@@ -19894,7 +19866,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(color) {}
+      clearViewBox(vb, color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$v([injectable(), __param$n(0, inject(VGlobal)), __metadata$n("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -24012,6 +23984,9 @@
                     get borderLineDash() {
                         return frameStyle.borderLineDash;
                     },
+                    get innerBorder() {
+                        return frameStyle.innerBorder;
+                    },
                     get shadowBlur() {
                         return frameStyle.shadowBlur;
                     },
@@ -25400,7 +25375,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Segment.defaultAttributes, attributes)), this.name = "segment";
       }
       render() {
-        this.removeAllChild(!0), this._reset();
+        this.removeAllChild(), this._reset();
         const {
           startSymbol: startSymbol,
           endSymbol: endSymbol,
@@ -25669,7 +25644,7 @@
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26657,7 +26632,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(!0), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
+        this.removeAllChild(), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
       }
     }
     Pager.defaultAttributes = {
@@ -26694,7 +26669,7 @@
         super(...arguments), this.name = "legend", this._title = null;
       }
       render() {
-        this.removeAllChild(!0);
+        this.removeAllChild();
         const {
             interactive = !0,
             title: title,
@@ -28393,7 +28368,7 @@
       }
       render() {
         var _a, _b;
-        this.removeAllChild(!0);
+        this.removeAllChild();
         const {
           layout = "horizontal",
           railWidth: railWidth,
@@ -29185,7 +29160,7 @@
         }, this.addEventListener("click", this.handleClick);
       }
       render() {
-        this.removeAllChild(!0), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
+        this.removeAllChild(), this.renderBox(), this.renderIcon(), this.renderText(), this.layout();
       }
       renderBox() {
         this._box = new Rect$2(merge({}, this.attribute.box));
@@ -32631,7 +32606,7 @@
             super(params);
             this.numberType = CHART_NUMBER_TYPE;
             if (!params.chartInstance) {
-                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
+                params.chartInstance = this.chartInstance = new params.ClassType(params.spec, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -32641,9 +32616,8 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                }));
+                });
                 this.chartInstance.renderSync();
-                this.chartInstance.getStage().enableDirtyBounds();
             }
             else {
                 this.chartInstance = params.chartInstance;
@@ -32660,52 +32634,34 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: 0,
-                    x2: x2 - x1,
-                    y1: 0,
-                    y2: y2 - y1
+                    x1: x1 - table.scrollLeft,
+                    x2: x2 - table.scrollLeft,
+                    y1: y1 - table.scrollTop,
+                    y2: y2 - table.scrollTop
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (chartStage) => {
-                    const stage = this.stage;
-                    const ctx = chartStage.window.getContext();
-                    const stageMatrix = stage.window.getViewBoxTransform();
-                    const viewBox = stage.window.getViewBox();
+                beforeRender: (stage) => {
+                    const ctx = stage.window.getContext();
                     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) => {
@@ -32741,12 +32697,11 @@
             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(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))
+                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)
             };
         }
     }
@@ -32777,10 +32732,6 @@
             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;
     }
 
@@ -32838,8 +32789,7 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
-            tableChartOption: table.options.chartOption
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -38976,10 +38926,18 @@
             rectAttributes.y = borderTop / 2;
             rectAttributes.pickable = false;
             if (isTableGroup) {
-                rectAttributes.x = group.attribute.x - borderLeft / 2;
-                rectAttributes.y = group.attribute.y - borderTop / 2;
-                rectAttributes.width = group.attribute.width + borderLeft / 2 + borderRight / 2;
-                rectAttributes.height = group.attribute.height + borderTop / 2 + borderBottom / 2;
+                if (frameTheme.innerBorder) {
+                    rectAttributes.x = group.attribute.x + borderLeft / 2;
+                    rectAttributes.y = group.attribute.y + borderTop / 2;
+                    rectAttributes.width = group.attribute.width - borderLeft / 2 - borderRight / 2;
+                    rectAttributes.height = group.attribute.height - borderTop / 2 - borderBottom / 2;
+                }
+                else {
+                    rectAttributes.x = group.attribute.x - borderLeft / 2;
+                    rectAttributes.y = group.attribute.y - borderTop / 2;
+                    rectAttributes.width = group.attribute.width + borderLeft / 2 + borderRight / 2;
+                    rectAttributes.height = group.attribute.height + borderTop / 2 + borderBottom / 2;
+                }
                 let shadowRect;
                 let borderRect;
                 if (hasShadow) {
@@ -39009,7 +38967,12 @@
                     borderRect = createRect(rectAttributes);
                     borderRect.name = 'table-border-rect';
                 }
-                group.parent.insertBefore(borderRect, group);
+                if (frameTheme.innerBorder && !hasShadow) {
+                    group.parent.insertAfter(borderRect, group);
+                }
+                else {
+                    group.parent.insertBefore(borderRect, group);
+                }
                 group.border = borderRect;
             }
             else {
@@ -39189,65 +39152,48 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        chartInstance.updateViewBox({
-            x1: 0,
-            x2: viewBox.x2 - viewBox.x1,
-            y1: 0,
-            y2: viewBox.y2 - viewBox.y1
-        }, false, false);
-        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 ?? []);
+        axes?.forEach((axis, index) => {
+            if (axis.type === 'band') {
+                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
             }
             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.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
+        }, 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 ?? []);
                 }
-                chartInstance.updateFullDataSync?.(dataBatch);
             }
+            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -39304,7 +39250,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -39312,7 +39258,6 @@
             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)) {
@@ -39326,27 +39271,6 @@
                 }
             }
             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 ?? []);
                 }
@@ -39376,13 +39300,13 @@
                 }
             }
             else {
-                if (table.internalProps.renderChartAsync) {
+                if (chart.getRootNode().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(table);
+                        startRenderChartQueue(chart.getRootNode().table);
                     }
                 }
                 else {
@@ -39391,7 +39315,31 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            this._draw(chart, {}, false, 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();
+            }
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -39494,10 +39442,20 @@
             hoverMode = 'cellBgColor';
         }
         else if (highlightScope === HighlightScope.column && cellPos.col === col) {
-            hoverMode = 'inlineColumnBgColor';
+            if (cellPos.col === col && cellPos.row === row) {
+                hoverMode = 'cellBgColor';
+            }
+            else {
+                hoverMode = 'inlineColumnBgColor';
+            }
         }
         else if (highlightScope === HighlightScope.row && cellPos.row === row) {
-            hoverMode = 'inlineRowBgColor';
+            if (cellPos.col === col && cellPos.row === row) {
+                hoverMode = 'cellBgColor';
+            }
+            else {
+                hoverMode = 'inlineRowBgColor';
+            }
         }
         else if (highlightScope === HighlightScope.cross) {
             if (cellPos.col === col && cellPos.row === row) {
@@ -39625,10 +39583,13 @@
                 context.moveTo(x, y);
                 context.lineTo(x + width, y);
             }
-            if ((isSplitDraw || isDash) && (!strokeArrayColor || strokeArrayColor[0])) {
-                if (strokeArrayColor) {
+            if (isSplitDraw || isDash) {
+                if (strokeArrayColor && strokeArrayColor[0]) {
                     context.strokeStyle = strokeArrayColor[0];
                 }
+                else {
+                    context.strokeStyle = 'transparent';
+                }
                 if (!isWidthNumber) {
                     context.lineWidth = strokeArrayWidth[0];
                 }
@@ -39651,10 +39612,13 @@
                 context.moveTo(x + width, y);
                 context.lineTo(x + width, y + height);
             }
-            if ((isSplitDraw || isDash) && (!strokeArrayColor || strokeArrayColor[1])) {
-                if (strokeArrayColor) {
+            if (isSplitDraw || isDash) {
+                if (strokeArrayColor && strokeArrayColor[1]) {
                     context.strokeStyle = strokeArrayColor[1];
                 }
+                else {
+                    context.strokeStyle = 'transparent';
+                }
                 if (!isWidthNumber) {
                     context.lineWidth = strokeArrayWidth[1];
                 }
@@ -39677,10 +39641,13 @@
                 context.moveTo(x, y + height);
                 context.lineTo(x + width, y + height);
             }
-            if ((isSplitDraw || isDash) && (!strokeArrayColor || strokeArrayColor[2])) {
-                if (strokeArrayColor) {
+            if (isSplitDraw || isDash) {
+                if (strokeArrayColor && strokeArrayColor[2]) {
                     context.strokeStyle = strokeArrayColor[2];
                 }
+                else {
+                    context.strokeStyle = 'transparent';
+                }
                 if (!isWidthNumber) {
                     context.lineWidth = strokeArrayWidth[2];
                 }
@@ -39703,10 +39670,13 @@
                 context.moveTo(x, y);
                 context.lineTo(x, y + height);
             }
-            if ((isSplitDraw || isDash) && (!strokeArrayColor || strokeArrayColor[3])) {
-                if (strokeArrayColor) {
+            if (isSplitDraw || isDash) {
+                if (strokeArrayColor && strokeArrayColor[3]) {
                     context.strokeStyle = strokeArrayColor[3];
                 }
+                else {
+                    context.strokeStyle = 'transparent';
+                }
                 if (!isWidthNumber) {
                     context.lineWidth = strokeArrayWidth[3];
                 }
@@ -43267,15 +43237,6 @@
             });
         }
     }
-    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++) {
@@ -44220,12 +44181,7 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            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') {
+            if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -44243,15 +44199,9 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                beforeRender: (stage) => {
-                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
-                },
-                afterRender: (stage) => {
-                    this.table.options.afterRender && this.table.options.afterRender(stage);
+                afterRender: () => {
                     this.table.fireListeners('after_render', null);
-                },
-                canvasControled: !table.options.canvas,
-                viewBox: table.options.viewBox
+                }
             });
             this.stage.defaultLayer.setTheme({
                 group: {
@@ -44737,26 +44687,52 @@
                     Math.max(this.leftBottomCornerGroup.attribute.height, this.bottomFrozenGroup.attribute.height, this.rightBottomCornerGroup.attribute.height, 0))
             });
             if (this.tableGroup.border && this.tableGroup.border.type === 'rect') {
-                this.tableGroup.border.setAttributes({
-                    x: this.table.tableX - this.tableGroup.border.attribute.lineWidth / 2,
-                    y: this.table.tableY - this.tableGroup.border.attribute.lineWidth / 2,
-                    width: this.tableGroup.attribute.width + this.tableGroup.border.attribute.lineWidth,
-                    height: this.tableGroup.attribute.height + this.tableGroup.border.attribute.lineWidth
-                });
+                if (this.table.theme.frameStyle?.innerBorder) {
+                    this.tableGroup.border.setAttributes({
+                        x: this.table.tableX + this.tableGroup.border.attribute.lineWidth / 2,
+                        y: this.table.tableY + this.tableGroup.border.attribute.lineWidth / 2,
+                        width: this.tableGroup.attribute.width - this.tableGroup.border.attribute.lineWidth,
+                        height: this.tableGroup.attribute.height - this.tableGroup.border.attribute.lineWidth
+                    });
+                }
+                else {
+                    this.tableGroup.border.setAttributes({
+                        x: this.table.tableX - this.tableGroup.border.attribute.lineWidth / 2,
+                        y: this.table.tableY - this.tableGroup.border.attribute.lineWidth / 2,
+                        width: this.tableGroup.attribute.width + this.tableGroup.border.attribute.lineWidth,
+                        height: this.tableGroup.attribute.height + this.tableGroup.border.attribute.lineWidth
+                    });
+                }
             }
             else if (this.tableGroup.border && this.tableGroup.border.type === 'group') {
-                this.tableGroup.border.setAttributes({
-                    x: this.table.tableX - this.tableGroup.border.attribute.lineWidth / 2,
-                    y: this.table.tableY - this.tableGroup.border.attribute.lineWidth / 2,
-                    width: this.tableGroup.attribute.width + this.tableGroup.border.attribute.lineWidth,
-                    height: this.tableGroup.attribute.height + this.tableGroup.border.attribute.lineWidth
-                });
-                this.tableGroup.border.firstChild?.setAttributes({
-                    x: this.tableGroup.border.attribute.lineWidth / 2,
-                    y: this.tableGroup.border.attribute.lineWidth / 2,
-                    width: this.tableGroup.attribute.width,
-                    height: this.tableGroup.attribute.height
-                });
+                if (this.table.theme.frameStyle?.innerBorder) {
+                    this.tableGroup.border.setAttributes({
+                        x: this.table.tableX + this.tableGroup.border.attribute.lineWidth / 2,
+                        y: this.table.tableY + this.tableGroup.border.attribute.lineWidth / 2,
+                        width: this.tableGroup.attribute.width - this.tableGroup.border.attribute.lineWidth,
+                        height: this.tableGroup.attribute.height - this.tableGroup.border.attribute.lineWidth
+                    });
+                    this.tableGroup.border.firstChild?.setAttributes({
+                        x: 0,
+                        y: 0,
+                        width: this.tableGroup.attribute.width - this.tableGroup.border.attribute.lineWidth,
+                        height: this.tableGroup.attribute.height - this.tableGroup.border.attribute.lineWidth
+                    });
+                }
+                else {
+                    this.tableGroup.border.setAttributes({
+                        x: this.table.tableX - this.tableGroup.border.attribute.lineWidth / 2,
+                        y: this.table.tableY - this.tableGroup.border.attribute.lineWidth / 2,
+                        width: this.tableGroup.attribute.width + this.tableGroup.border.attribute.lineWidth,
+                        height: this.tableGroup.attribute.height + this.tableGroup.border.attribute.lineWidth
+                    });
+                    this.tableGroup.border.firstChild?.setAttributes({
+                        x: this.tableGroup.border.attribute.lineWidth / 2,
+                        y: this.tableGroup.border.attribute.lineWidth / 2,
+                        width: this.tableGroup.attribute.width,
+                        height: this.tableGroup.attribute.height
+                    });
+                }
             }
             if (this.table.bottomFrozenRowCount > 0) {
                 this.bottomFrozenGroup.setAttribute('y', this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height);
@@ -45130,7 +45106,11 @@
             this.updateTableSize();
             const isListTableWithFrozen = !this.isPivot;
             createFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, this.bodyGroup.role, isListTableWithFrozen ? [true, true, true, false] : undefined);
-            createFrameBorder(this.rowHeaderGroup, this.isPivot ? this.table.theme.rowHeaderStyle.frameStyle : this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined);
+            createFrameBorder(this.rowHeaderGroup, this.isPivot
+                ? this.table.theme.rowHeaderStyle.frameStyle
+                : this.table.internalProps.transpose
+                    ? this.table.theme.headerStyle.frameStyle
+                    : this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined);
             createFrameBorder(this.colHeaderGroup, this.table.theme.headerStyle.frameStyle, this.colHeaderGroup.role, isListTableWithFrozen ? [true, true, true, false] : undefined);
             createFrameBorder(this.cornerHeaderGroup, this.isPivot ? this.table.theme.cornerHeaderStyle.frameStyle : this.table.theme.headerStyle.frameStyle, this.cornerHeaderGroup.role, isListTableWithFrozen ? [true, false, true, true] : undefined);
             createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, undefined);
@@ -46836,7 +46816,15 @@
             this.menu.dropDownMenuHighlight = cells;
             for (let i = 0; i < cells.length; i++) {
                 const { col, row } = cells[i];
-                this.table.scenegraph.updateCellContent(col, row);
+                const range = this.table.getCellRange(col, row);
+                if (!range) {
+                    continue;
+                }
+                for (let col = range.start.col; col <= range.end.col; col++) {
+                    for (let row = range.start.row; row <= range.end.row; row++) {
+                        this.table.scenegraph.updateCellContent(col, row);
+                    }
+                }
             }
         }
         dropDownMenuIsHighlight(colNow, rowNow, index) {
@@ -47267,7 +47255,7 @@
         else {
             const layoutMap = table.internalProps.layoutMap;
             hasSparkLine = layoutMap.columnObjects.some(column => {
-                return column.cellType === 'sparkline';
+                return column.cellType === 'sparkline' || typeof column.cellType === 'function';
             });
         }
         if (!hasSparkLine) {
@@ -47289,8 +47277,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.viewport.x,
-                y: e.viewport.y
+                x: e.x,
+                y: e.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -47383,10 +47371,10 @@
             }
             const cellGoup = e.path.find(node => node.role === 'cell');
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL)) {
-                if (cellGoup?.role === 'cell' &&
-                    table.stateManager.hover.cellPos.col !== -1 &&
+                if (table.stateManager.hover.cellPos.col !== -1 &&
                     table.stateManager.hover.cellPos.row !== -1 &&
-                    (cellGoup.col !== table.stateManager.hover.cellPos.col || cellGoup.row !== table.stateManager.hover.cellPos.row)) {
+                    (cellGoup?.col !== table.stateManager.hover.cellPos.col ||
+                        cellGoup?.row !== table.stateManager.hover.cellPos.row)) {
                     table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, {
                         col: table.stateManager.hover.cellPos.col,
                         row: table.stateManager.hover.cellPos.row,
@@ -47488,6 +47476,21 @@
                 stateManager.updateInteractionState(InteractionState.default);
                 stateManager.updateCursor();
             }
+            if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL)) {
+                if (table.stateManager.hover.cellPos.col !== -1 && table.stateManager.hover.cellPos.row !== -1) {
+                    table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, {
+                        col: table.stateManager.hover.cellPos.col,
+                        row: table.stateManager.hover.cellPos.row,
+                        cellRange: table.getCellRangeRelativeRect({
+                            col: table.stateManager.hover.cellPos.col,
+                            row: table.stateManager.hover.cellPos.row
+                        }),
+                        scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
+                        event: e.nativeEvent,
+                        target: undefined
+                    });
+                }
+            }
             eventManager.dealTableHover();
             const target = e.target;
             if (target && !target.isDescendantsOf(table.scenegraph.tableGroup)) {
@@ -47817,15 +47820,15 @@
             };
             if (table.isHeader(col, row)) {
                 table.stateManager.setHeaderCheckedState(cellInfo.field, e.detail.checked);
-                const define = table.getBodyColumnDefine(col, row);
-                if (define.cellType === 'checkbox') {
+                const cellType = table.getCellType(col, row);
+                if (cellType === 'checkbox') {
                     table.scenegraph.updateCheckboxCellState(col, row, e.detail.checked);
                 }
             }
             else {
                 table.stateManager.setCheckedState(col, row, cellInfo.field, e.detail.checked);
-                const define = table.getBodyColumnDefine(col, row);
-                if (define.headerType === 'checkbox') {
+                const cellType = table.getCellType(col, row);
+                if (cellType === 'checkbox') {
                     const oldHeaderCheckedState = table.stateManager.headerCheckedState[cellInfo.field];
                     const newHeaderCheckedState = table.stateManager.updateHeaderCheckedState(cellInfo.field);
                     if (oldHeaderCheckedState !== newHeaderCheckedState) {
@@ -48237,14 +48240,12 @@
                 e.preventDefault();
             }
         });
-        if (!table.options.canvas) {
-            handler.on(table.getContainer(), 'resize', e => {
-                if (e.width === 0 && e.height === 0) {
-                    return;
-                }
-                table.resize();
-            });
-        }
+        handler.on(table.getContainer(), 'resize', e => {
+            if (e.width === 0 && e.height === 0) {
+                return;
+            }
+            table.resize();
+        });
     }
 
     function bindTouchListener(eventManager) {
@@ -48500,7 +48501,7 @@
         isDraging = false;
         constructor(table) {
             this.table = table;
-            if (Env.mode === 'node' || table.options.disableInteraction) {
+            if (Env.mode === 'node') {
                 return;
             }
             this.bindOuterEvent();
@@ -49004,6 +49005,7 @@
                 case 'checkbox':
                     return CheckboxStyle$1;
             }
+            return TextStyle;
         }
         getCellIconFromRecordValue(icon, col, row) {
             if (Array.isArray(icon)) {
@@ -51812,7 +51814,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.19.2-alpha.1";
+        version = "0.19.2-alpha.3";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51823,7 +51825,7 @@
         _chartEventMap = {};
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node' && !options.canvas) {
+            if (!container && options.mode !== 'node') {
                 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;
@@ -51859,14 +51861,7 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            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') {
+            if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -52202,21 +52197,7 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            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') {
+            if (Env.mode === 'browser') {
                 const element = this.getElement();
                 const width1 = element.parentElement?.offsetWidth ?? 1 - 1;
                 const height1 = element.parentElement?.offsetHeight ?? 1 - 1;
@@ -52246,36 +52227,22 @@
             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.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);
+                if (this.theme.frameStyle?.innerBorder) {
+                    this.tableX = 0;
+                    this.tableY = 0;
+                    this.tableNoFrameWidth = width - (shadowWidths[1] ?? 0);
+                    this.tableNoFrameHeight = height - (shadowWidths[2] ?? 0);
+                }
+                else {
+                    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));
+                }
             }
         }
-        setViewBoxTransform(a, b, c, d, e, f) {
-            this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
-        }
         get rowHierarchyType() {
             return 'grid';
         }
@@ -52770,8 +52737,6 @@
             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() {
@@ -52926,7 +52891,7 @@
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
             const { parentElement } = internalProps.element;
-            if (parentElement && !this.options.canvas) {
+            if (parentElement) {
                 parentElement.removeChild(internalProps.element);
             }
             this.isReleased = true;
@@ -53099,8 +53064,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) - (this.options.viewBox?.x1 ?? 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
             return { x, y, inTable };
         }
         getTheme() {
@@ -53404,7 +53369,7 @@
                     return customMerge.range;
                 }
             }
-            return this.internalProps.layoutMap.getCellRange(col, row);
+            return this.internalProps.layoutMap?.getCellRange(col, row);
         }
         hasCustomMerge() {
             return !!this.internalProps.customMergeCell;
@@ -53497,7 +53462,7 @@
                     field: this.getHeaderField(col, row),
                     cellHeaderPaths: this.internalProps.layoutMap.getCellHeaderPaths(col, row),
                     title: colDef?.title,
-                    cellType: colDef?.cellType ? (typeof colDef.cellType === 'string' ? colDef.cellType : 'progressbar') : 'text',
+                    cellType: this.getCellType(col, row),
                     originData: this.getCellOriginRecord(col, row),
                     cellRange: this.getCellRangeRelativeRect({ col, row }),
                     value: this.getCellValue(col, row),
@@ -53584,15 +53549,24 @@
                     }, styleClass, this.options.autoWrapText);
                 }
                 else {
+                    let defaultStyle;
+                    if (layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row)) {
+                        defaultStyle = this.theme.headerStyle;
+                    }
+                    else if (this.internalProps.transpose && layoutMap.isRowHeader(col, row)) {
+                        defaultStyle = this.theme.headerStyle;
+                    }
+                    else if (layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row)) {
+                        defaultStyle = this.theme.rowHeaderStyle;
+                    }
+                    else {
+                        defaultStyle = this.theme.cornerHeaderStyle;
+                    }
                     const style = hd?.style || {};
                     if (paddingForAxis) {
                         style.padding = paddingForAxis;
                     }
-                    cacheStyle = of$1(style, layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row)
-                        ? this.theme.headerStyle
-                        : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row)
-                            ? this.theme.rowHeaderStyle
-                            : this.theme.cornerHeaderStyle, {
+                    cacheStyle = of$1(style, defaultStyle, {
                         col,
                         row,
                         table: this,
@@ -53605,12 +53579,13 @@
                 return cacheStyle;
             }
             let cacheKey;
+            const cellType = this.getCellType(col, row);
             if ((this.isListTable() && !this.transpose) ||
                 (this.isPivotTable() && this.internalProps.layoutMap.indicatorsAsCol)) {
-                cacheKey = col;
+                cacheKey = col + cellType;
             }
             else {
-                cacheKey = row;
+                cacheKey = row + cellType;
             }
             let cacheStyle;
             if (layoutMap.isBottomFrozenRow(row)) {
@@ -53623,7 +53598,7 @@
                 return cacheStyle;
             }
             const column = layoutMap.getBody(col, row);
-            const styleClass = this.internalProps.bodyHelper.getStyleClass(column.cellType);
+            const styleClass = this.internalProps.bodyHelper.getStyleClass(this.getCellType(col, row));
             const style = column?.style;
             cacheStyle = of$2(style, layoutMap.isBottomFrozenRow(row) && this.theme.bottomFrozenStyle
                 ? this.theme.bottomFrozenStyle
@@ -56665,7 +56640,7 @@
         getCellCheckboxState(col, row) {
             const define = this.getBodyColumnDefine(col, row);
             const field = define?.field;
-            const cellType = define?.cellType;
+            const cellType = this.getCellType(col, row);
             if (isValid$1(field) && cellType === 'checkbox') {
                 const dataIndex = this.dataSource.getIndexKey(this.getRecordShowIndexByCell(col, row));
                 return this.stateManager.checkedState[dataIndex][field];
@@ -62583,14 +62558,6 @@
             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);
         }
@@ -63287,7 +63254,7 @@
     }
 
     registerForVrender();
-    const version = "0.19.2-alpha.1";
+    const version = "0.19.2-alpha.3";
     function getIcons() {
         return get$1();
     }