@visactor/vtable 0.23.1-alpha.1 → 0.23.1-alpha.2

package/dist/vtable.js

@@ -1461,7 +1461,7 @@
     function objectKeys(obj) {
       return Object.keys(obj);
     }
-    function isEqual$1(a, b, options) {
+    function isEqual(a, b, options) {
       if (a === b) return !0;
       if (typeof a != typeof b) return !1;
       if (null == a || null == b) return !1;
@@ -1471,7 +1471,7 @@
       if ("object" != typeof a) return !1;
       if (isArray$3(a)) {
         if (a.length !== b.length) return !1;
-        for (let i = a.length - 1; i >= 0; i--) if (!isEqual$1(a[i], b[i], options)) return !1;
+        for (let i = a.length - 1; i >= 0; i--) if (!isEqual(a[i], b[i], options)) return !1;
         return !0;
       }
       if (!isPlainObject$1(a)) return !1;
@@ -1482,7 +1482,7 @@
       for (let i = ka.length - 1; i >= 0; i--) if (ka[i] != kb[i]) return !1;
       for (let i = ka.length - 1; i >= 0; i--) {
         const key = ka[i];
-        if (!isEqual$1(a[key], b[key], options)) return !1;
+        if (!isEqual(a[key], b[key], options)) return !1;
       }
       return !0;
     }
@@ -4161,7 +4161,8 @@
       backgroundFit: !0,
       blur: 0,
       cursor: null,
-      html: null
+      html: null,
+      react: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -4385,7 +4386,7 @@
     function applyStrokeStyle(ctx, character) {
       const strokeStyle = character && character.stroke || defaultFormatting.stroke;
       if (!strokeStyle) return void (ctx.globalAlpha = 0);
-      ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineHeight ? character.lineHeight : 1, ctx.strokeStyle = strokeStyle;
+      ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
       let fontSize = character.fontSize || 16;
       switch (character.script) {
         case "super":
@@ -4813,28 +4814,37 @@
       constructor() {
         this.hooks = {
           onChange: new SyncHook(["x", "y", "width", "height"])
+        }, this.active = () => {
+          const global = this.global;
+          if (!global.env || this.actived) return;
+          container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
         }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
       }
       postInit() {
-        this.global.hooks.onSetEnv.tap("window", () => {
-          this.active();
-        }), this.active();
-      }
-      active() {
-        const global = this.global;
-        if (!global.env || this.actived) return;
-        container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
+        this.global.hooks.onSetEnv.tap("window", this.active), this.active();
       }
       get style() {
-        return this._handler.getStyle();
+        var _a;
+        return null !== (_a = this._handler.getStyle()) && void 0 !== _a ? _a : {};
       }
       set style(style) {
         this._handler.setStyle(style);
       }
       create(params) {
+        var _a, _b;
         this._handler.createWindow(params);
         const windowWH = this._handler.getWH();
-        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
+        this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: this._width,
+          y2: this._height
+        }) : this.setViewBox({
+          x1: 0,
+          y1: 0,
+          x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
+          y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
+        }), this.title = this._handler.getTitle(), this.resizable = !0;
       }
       setWindowHandler(handler) {
         this._handler = handler;
@@ -4849,7 +4859,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        return this._handler.releaseWindow();
+        return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
       }
       getContext() {
         return this._handler.getContext();
@@ -4875,8 +4885,35 @@
       getContainer() {
         return this._handler.container;
       }
-      clearViewBox(viewBox, color) {
-        this._handler.clearViewBox(viewBox, color);
+      clearViewBox(color) {
+        this._handler.clearViewBox(color);
+      }
+      setViewBox(viewBox) {
+        this._handler.setViewBox(viewBox);
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this._handler.setViewBoxTransform(a, b, c, d, e, f);
+      }
+      getViewBox() {
+        return this._handler.getViewBox();
+      }
+      getViewBoxTransform() {
+        return this._handler.getViewBoxTransform();
+      }
+      pointTransform(x, y) {
+        const vb = this._handler.getViewBox(),
+          nextP = {
+            x: x,
+            y: y
+          };
+        return this._handler.getViewBoxTransform().transformPoint({
+          x: x,
+          y: y
+        }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
+      }
+      hasSubView() {
+        const viewBox = this._handler.getViewBox();
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -4962,8 +4999,16 @@
         const window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height();
+          height = bounds.height(),
+          x1 = -bounds.x1,
+          y1 = -bounds.y1;
         window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: bounds.x2,
+            y2: bounds.y2
+          },
           width: width,
           height: height,
           canvas: canvas,
@@ -4972,14 +5017,10 @@
           offscreen: !0,
           title: ""
         });
-        const x = -bounds.x1,
-          y = -bounds.y1,
-          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          x: x,
-          y: y,
-          width: width,
-          height: height,
+          transMatrix: window.getViewBoxTransform(),
+          viewBox: window.getViewBox(),
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -5803,7 +5844,7 @@
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.viewX, e.viewY, e), e.pickParams || (this._prePointTargetCache = {
           [cacheKey]: target,
           stageRenderCount: null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1
         })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
@@ -5838,12 +5879,14 @@
         return currentTarget;
       }
       createPointerEvent(from, type, target) {
+        var _a, _b;
         const event = this.allocateEvent(FederatedPointerEvent);
-        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), "string" == typeof type && (event.type = type), event;
+        return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), "string" == typeof type && (event.type = type), event;
       }
       createWheelEvent(from, target) {
+        var _a, _b;
         const event = this.allocateEvent(FederatedWheelEvent);
-        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), event;
+        return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : event.global.y, event), event;
       }
       clonePointerEvent(from, type) {
         const event = this.allocateEvent(FederatedPointerEvent);
@@ -5900,6 +5943,9 @@
         const pickResult = this.rootTarget.pick(x, y);
         return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : this.rootTarget.AABBBounds.contains(x, y) ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
       }
+      release() {
+        this.dispatch.removeAllListeners(), this.eventPool.clear(), this.rootTarget = null, this.mappingTable = null, this.mappingState = null, this.cursorTarget = null;
+      }
     };
 
     const EventTarget$2 = {
@@ -5947,7 +5993,7 @@
           this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-          const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
+          const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
             normalizedEvents = this.normalizeToPointerData(nativeEvent);
           for (let i = 0, j = normalizedEvents.length; i < j; i++) {
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
@@ -5971,7 +6017,6 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
-          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -5979,13 +6024,13 @@
         } = params;
         this.manager = new EventManager$1(rootNode, {
           clickInterval: clickInterval
-        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
       }
       release() {
-        this.setTargetElement(null);
+        this.removeEvents(), this.manager && this.manager.release(), this.domElement = null, this.manager = null, this.globalObj = null;
       }
       setCursor(mode, target) {
         if (!target && !this.manager.rootTarget.window._handler.canvas.controled) return;
@@ -6021,25 +6066,19 @@
         this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
       }
       mapToViewportPoint(event) {
-        const viewport = this.viewport,
-          {
-            x: x,
-            y: y
-          } = event;
-        return {
-          x: x - viewport.x,
-          y: y - viewport.y
-        };
+        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
       }
       mapToCanvasPoint(nativeEvent) {
-        var _a;
+        var _a, _b;
         const point = null === (_a = this.globalObj) || void 0 === _a ? void 0 : _a.mapToCanvasPoint(nativeEvent, this.domElement);
         if (point) return point;
-        const {
-            clientX: x,
-            clientY: y
-          } = nativeEvent,
-          rect = this.domElement.getBoundingClientRect();
+        let x = 0,
+          y = 0;
+        if (nativeEvent.changedTouches) {
+          const data = null !== (_b = nativeEvent.changedTouches[0]) && void 0 !== _b ? _b : {};
+          x = data.clientX || 0, y = data.clientY || 0;
+        } else x = nativeEvent.clientX || 0, y = nativeEvent.clientY || 0;
+        const rect = this.domElement.getBoundingClientRect();
         return {
           x: x - rect.left,
           y: y - rect.top
@@ -6086,6 +6125,17 @@
       transferMouseData(event, nativeEvent) {
         event.isTrusted = nativeEvent.isTrusted, event.srcElement = nativeEvent.srcElement, event.timeStamp = clock.now(), event.type = nativeEvent.type, event.altKey = nativeEvent.altKey, event.button = nativeEvent.button, event.buttons = nativeEvent.buttons, event.client.x = nativeEvent.clientX, event.client.y = nativeEvent.clientY, event.ctrlKey = nativeEvent.ctrlKey, event.shiftKey = nativeEvent.shiftKey, event.metaKey = nativeEvent.metaKey, event.movement.x = nativeEvent.movementX, event.movement.y = nativeEvent.movementY, event.page.x = nativeEvent.pageX, event.page.y = nativeEvent.pageY, event.relatedTarget = null;
       }
+      isEventOutsideOfTargetViewPort(nativeEvent) {
+        if (this.isEventOutsideOfTargetElement(nativeEvent)) return !0;
+        if (this.domElement.getViewBox) {
+          const p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent)),
+            b = this.domElement.getViewBox(),
+            w = b.width(),
+            h = b.height();
+          return !(p.x < w && p.y < h && p.x > 0 && p.y > 0);
+        }
+        return !1;
+      }
       isEventOutsideOfTargetElement(nativeEvent) {
         let target = nativeEvent.target;
         nativeEvent.composedPath && nativeEvent.composedPath().length > 0 && (target = nativeEvent.composedPath()[0]);
@@ -6789,10 +6839,10 @@
       easing: "cubicOut"
     };
 
-    var Edge;
+    var Edge$1;
     !function (Edge) {
       Edge[Edge.Top = 1] = "Top", Edge[Edge.Right = 2] = "Right", Edge[Edge.Bottom = 4] = "Bottom", Edge[Edge.Left = 8] = "Left", Edge[Edge.ALL = 15] = "ALL";
-    }(Edge || (Edge = {}));
+    }(Edge$1 || (Edge$1 = {}));
     const _strokeVec4 = [!1, !1, !1, !1];
     const parseStroke = stroke => {
       var _a;
@@ -7110,9 +7160,9 @@
                 promises.push(end);
               } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
             }), Promise.all(promises).then(() => {
-              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+              ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
             }).catch(error => {
-              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+              ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
             });
           }
         }, 0);
@@ -7132,12 +7182,15 @@
           ResourceLoader.toLoadAueue.unshift(elememt[0]);
         }
       }
+      static onLoadSuccess(cb) {
+        this.onLoadSuccessCb.push(cb);
+      }
     }
     function getIndex(url, arr) {
       for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
       return -1;
     }
-    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds$1();
@@ -7244,7 +7297,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(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -8321,15 +8374,12 @@
       }
       render(params, userParams) {
         var _a;
-        const stage = this.stage;
         this.layerHandler.render([this], {
           renderService: params.renderService,
-          x: stage.x,
-          y: stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
           stage: this.stage,
           layer: this,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(c => c(this)), this.tryRenderSecondaryLayer(params, userParams);
@@ -8353,33 +8403,18 @@
         throw new Error("暂不支持");
       }
       prepare(dirtyBounds, params) {}
-      combineTo(target, params) {
-        var _a, _b, _c;
-        this.offscreen && (this.layerHandler.drawTo(target, [this], Object.assign({
-          background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
-          renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
-          stage: this.stage,
-          layer: this
-        }, params)), this.afterDrawCbs.forEach(c => c(this)));
-      }
       release() {
         super.release(), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(l => {
           application.layerService.releaseLayer(this.stage, l.layer);
         });
       }
       drawTo(target, params) {
-        var _a, _b, _c;
+        var _a;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
-          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
-          width: this.viewWidth,
-          height: this.viewHeight,
+          viewBox: params.viewBox,
+          transMatrix: params.transMatrix,
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(c => c(this));
@@ -8461,6 +8496,9 @@
       restLayerCount(stage) {
         return "browser" === this.global.env ? 10 : 0;
       }
+      releaseStage(stage) {
+        this.layerMap.delete(stage);
+      }
     };
     DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1a([injectable(), __metadata$T("design:paramtypes", [])], DefaultLayerService);
 
@@ -8497,7 +8535,9 @@
           fillOpacity = themeAttributes.fillOpacity,
           lineWidth = themeAttributes.lineWidth,
           strokeOpacity = themeAttributes.strokeOpacity,
-          visible = themeAttributes.visible
+          visible = themeAttributes.visible,
+          x: originX = themeAttributes.x,
+          y: originY = themeAttributes.y
         } = graphic.attribute,
         fVisible = fillVisible(opacity, fillOpacity, fill),
         sVisible = strokeVisible(opacity, strokeOpacity),
@@ -8508,7 +8548,7 @@
       if (!(fVisible || sVisible || fillCb || strokeCb)) return !0;
       context.beginPath();
       const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
-      return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x, y, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x, y, themeAttributes), context.fill())), !0;
+      return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), !0;
     }
     function intersect$2(x0, y0, x1, y1, x2, y2, x3, y3) {
       const x10 = x1 - x0,
@@ -10997,7 +11037,8 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          lineWidth: lineWidth
         } = this.attribute;
         return Object.assign({
           fill: fill,
@@ -11005,7 +11046,8 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          lineWidth: lineWidth
         }, config);
       }
       doUpdateFrameCache() {
@@ -14304,7 +14346,9 @@
           const endSeg = segments[segments.length - 1];
           startP = segments[0].points[0], endP = endSeg.points[endSeg.points.length - 1];
         } else startP = points[0], endP = points[points.length - 1];
-        direction = abs(endP.x - startP.x) > abs(endP.y - startP.y) ? Direction.ROW : Direction.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+        const xTotalLength = abs(endP.x - startP.x),
+          yTotalLength = abs(endP.y - startP.y);
+        direction = Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN : Direction.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
@@ -14682,7 +14726,7 @@
             doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
               context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
             }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, line.width, textAttribute, context);
+              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, line.width, textAttribute, context);
             })));
           } else {
             text.tryUpdateAABBBounds();
@@ -14784,7 +14828,6 @@
       drawMultiUnderLine(underline, lineThrough, text, x, y, z, w, textAttribute, context) {
         if (lineThrough + underline <= 0) return;
         const {
-            textAlign = textAttribute.textAlign,
             fontSize = textAttribute.fontSize,
             fill = textAttribute.fill,
             opacity = textAttribute.opacity,
@@ -14792,7 +14835,6 @@
             underlineDash = textAttribute.underlineDash,
             fillOpacity = textAttribute.fillOpacity
           } = text.attribute,
-          offsetX = textDrawOffsetX(textAlign, w),
           offsetY = textLayoutOffsetY("alphabetic", fontSize, fontSize),
           attribute = {
             lineWidth: 0,
@@ -14804,12 +14846,12 @@
         if (underline) {
           attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
           const dy = y + offsetY + fontSize + deltaY + underlineOffset;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+          context.moveTo(x + 0, dy, z), context.lineTo(x + 0 + w, dy, z), context.stroke();
         }
         if (deltaY = -1, lineThrough) {
           attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
           const dy = y + offsetY + fontSize / 2 + deltaY;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+          context.moveTo(x + 0, dy, z), context.lineTo(x + 0 + w, dy, z), context.stroke();
         }
       }
     };
@@ -15606,10 +15648,10 @@
       render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context
+          context: this.context,
+          viewBox: params.stage.window.getViewBox(),
+          transMatrix: params.stage.window.getViewBoxTransform()
         }, params), {
-          x: 0,
-          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -15624,11 +15666,12 @@
         const context = target.getContext(),
           targetDpr = target.dpr,
           {
-            x = 0,
-            y = 0,
-            width = this.layer.viewWidth,
-            height = this.layer.viewHeight
-          } = params;
+            viewBox: viewBox
+          } = params,
+          x = viewBox.x1,
+          y = viewBox.y1,
+          width = viewBox.width(),
+          height = viewBox.height();
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
       merge(layerHandlers) {}
@@ -15784,32 +15827,22 @@
         const {
           context: context,
           stage: stage,
-          x = 0,
-          y = 0,
-          width: width,
-          height: height
+          viewBox: viewBox,
+          transMatrix: transMatrix
         } = drawContext;
         if (!context) return;
-        if (drawContext.keepMatrix) {
-          if (context.nativeContext && context.nativeContext.getTransform) {
-            const t = context.nativeContext.getTransform();
-            context.setTransformFromMatrix(t, !0, 1);
-          }
-        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        const dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
+        const dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           const b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
-        const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
+        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -15933,29 +15966,25 @@
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
         const {
-          clear: clear
-        } = drawContext;
+            clear: clear,
+            viewBox: viewBox
+          } = drawContext,
+          width = viewBox.width(),
+          height = viewBox.height();
         if (clear) {
-          const canvas = context.getCanvas(),
-            {
-              width = canvas.width,
-              height = canvas.height
-            } = drawContext,
-            x = 0,
-            y = 0;
-          context.clearRect(x, y, width, height);
+          context.clearRect(0, 0, width, height);
           const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
           if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: x,
-              y1: y,
-              x2: x + width,
-              y2: y + height
+              x1: 0,
+              y1: 0,
+              x2: 0 + width,
+              y2: 0 + height
             }
-          }, 0, 0), context.fillRect(x, y, width, height);
+          }, 0, 0), context.fillRect(0, 0, width, height);
         }
       }
       afterDraw(renderService, drawParams) {}
@@ -16212,25 +16241,16 @@
           this.currentRenderService = renderService;
           const {
             context: context,
-            x = 0,
-            y = 0
+            viewBox: viewBox
           } = drawContext;
-          if (context) {
-            if (drawContext.keepMatrix) {
-              if (context.nativeContext && context.nativeContext.getTransform) {
-                const t = context.nativeContext.getTransform();
-                context.setTransformFromMatrix(t, !0, 1);
-              }
-            } else context.inuse = !0, context.clearMatrix();
-            context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
-              var _a, _b;
-              return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
-            }).forEach(group => {
-              this.renderGroup(group, drawContext);
-            }), this.hooks.completeDraw.tap("top-draw", () => {
-              context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), this.rendering = !1;
-            });
-          }
+          context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(viewBox.x1, viewBox.y1, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+            var _a, _b;
+            return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
+          }).forEach(group => {
+            this.renderGroup(group, drawContext);
+          }), this.hooks.completeDraw.tap("top-draw", () => {
+            context.restore(), context.restore(), context.draw(), context.inuse = !1, this.rendering = !1;
+          }));
         });
       }
       _increaseRender(group, drawContext) {
@@ -16400,12 +16420,10 @@
           if (!layer || !group.layer.subLayers) return;
           const subLayer = group.layer.subLayers.get(group._uid);
           subLayer && subLayer.drawContribution && subLayer.drawContribution.draw(stage.renderService, Object.assign({
-            x: stage.x,
-            y: stage.y,
-            width: layer.viewWidth,
-            height: layer.viewHeight,
             stage: stage,
             layer: layer,
+            viewBox: stage.window.getViewBox(),
+            transMatrix: stage.window.getViewBoxTransform(),
             clear: "transparent",
             renderService: stage.renderService,
             updateBounds: !1,
@@ -16418,7 +16436,7 @@
 
     class HtmlAttributePlugin {
       constructor() {
-        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.lastDomContainerSet = new Set(), this.currentDomContainerSet = new Set();
       }
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
@@ -16430,15 +16448,17 @@
         });
       }
       deactivate(context) {
-        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key);
+        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onRemove.unTap(this.key), application.graphicService.hooks.onRelease.unTap(this.key), this.release();
       }
       drawHTML(renderService) {
-        "browser" === application.global.env && renderService.renderTreeRoots.sort((a, b) => {
+        "browser" === application.global.env && (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.renderGroupHTML(group);
-        });
+        }), this.lastDomContainerSet.forEach(item => {
+          this.currentDomContainerSet.has(item) || item.parentElement && item.parentElement.removeChild(item);
+        }), this.lastDomContainerSet = new Set(this.currentDomContainerSet), this.currentDomContainerSet.clear());
       }
       renderGroupHTML(group) {
         this.renderGraphicHTML(group), group.forEachChildren(g => {
@@ -16465,7 +16485,8 @@
           width: width,
           height: height,
           style: style,
-          anchorType = "boundsLeftTop"
+          anchorType = "boundsLeftTop",
+          pointerEvents: pointerEvents
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
@@ -16491,7 +16512,7 @@
             wrapGroup: wrapGroup
           }));
         } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -16503,7 +16524,15 @@
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
           offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`, this.currentDomContainerSet.add(wrapGroup);
+      }
+      release() {
+        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+      }
+      removeAllDom(g) {
+        this.removeDom(g), g.forEachChildren(item => {
+          item.isContainer && this.removeAllDom(g);
+        });
       }
     }
 
@@ -16950,6 +16979,78 @@
       return env ? "node" === env : !_isBrowserEnv;
     }
 
+    class ReactAttributePlugin extends HtmlAttributePlugin {
+      constructor() {
+        super(...arguments), this.name = "ReactAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+      }
+      removeDom(graphic) {
+        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear());
+      }
+      renderGraphicHTML(graphic) {
+        const {
+          react: react
+        } = graphic.attribute;
+        if (!react) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear()));
+        const stage = graphic.stage;
+        if (!stage) return;
+        const ReactDOM = stage.params.ReactDOM,
+          {
+            element: element,
+            container: container,
+            width: width,
+            height: height,
+            style: style,
+            anchorType = "boundsLeftTop",
+            pointerEvents: pointerEvents
+          } = react;
+        if (!(element && ReactDOM && ReactDOM.createRoot)) return;
+        graphic.bindDom || (graphic.bindDom = new Map());
+        const lastDom = graphic.bindDom.get(element);
+        let wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          graphic.bindDom.forEach(_ref => {
+            let {
+              wrapGroup: wrapGroup
+            } = _ref;
+            application.global.removeDom(wrapGroup);
+          });
+          const _container = container;
+          if (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) {
+            const root = ReactDOM.createRoot(wrapGroup);
+            root.render(element), graphic.bindDom.set(element, {
+              dom: element,
+              container: container,
+              wrapGroup: wrapGroup,
+              root: root
+            });
+          }
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        let left = 0,
+          top = 0;
+        const b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
+          const matrix = graphic.globalTransMatrix;
+          left = matrix.e, top = matrix.f;
+        } else left = b.x1, top = b.y1;
+        const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
+          windowTL = stage.window.getTopLeft(!1),
+          offsetX = left + windowTL.left - containerTL.left,
+          offsetTop = top + windowTL.top - containerTL.top;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+      }
+    }
+
     const DefaultConfig$1 = {
       WIDTH: 500,
       HEIGHT: 500,
@@ -16959,22 +17060,24 @@
     };
     class Stage extends Group$2 {
       set viewBox(b) {
-        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
+        this.window.setViewBox(b);
       }
       get viewBox() {
-        return this._viewBox;
+        return this.window.getViewBox();
       }
       get x() {
-        return this._viewBox.x1;
+        return this.window.getViewBox().x1;
       }
       set x(x) {
-        this._viewBox.translate(x - this._viewBox.x1, 0);
+        const b = this.window.getViewBox();
+        b.translate(x - b.x1, 0), this.window.setViewBox(b);
       }
       get y() {
-        return this._viewBox.y1;
+        return this.window.getViewBox().y1;
       }
       set y(y) {
-        this._viewBox.translate(0, y - this._viewBox.y1);
+        const b = this.window.getViewBox();
+        b.translate(0, y - b.y1), this.window.setViewBox(b);
       }
       get width() {
         return this.window.width;
@@ -16983,13 +17086,13 @@
         this.resize(w, this.height);
       }
       get viewWidth() {
-        return this._viewBox.width();
+        return this.window.getViewBox().width();
       }
       set viewWidth(w) {
         this.resizeView(w, this.viewHeight);
       }
       get viewHeight() {
-        return this._viewBox.height();
+        return this.window.getViewBox().height();
       }
       set viewHeight(h) {
         this.resizeView(this.viewWidth, h);
@@ -17023,7 +17126,13 @@
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
         super({}), this._onVisibleChange = visible => {
-          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
+          if (!(this._skipRender < 0)) if (visible) {
+            if (this.dirtyBounds) {
+              const b = this.window.getViewBox();
+              this.dirtyBounds.setValue(b.x1, b.y1, b.width(), b.height());
+            }
+            this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
+          } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
@@ -17034,17 +17143,24 @@
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
+          viewBox: params.viewBox,
           container: params.container,
           dpr: params.dpr || this.global.devicePixelRatio,
           canvasControled: !1 !== params.canvasControled,
           title: params.title || "",
           canvas: params.canvas
-        }), this._viewBox = new AABBBounds$1(), params.viewBox ? this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : this._viewBox.setValue(0, 0, this.width, this.height), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._subView = !(this._viewBox.width() === this.width && this._viewBox.height() === this.height), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
+        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$4(this._background) && this._background.includes("/") && this.setAttributes({
+        })), 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.ReactDOM && this.enableReactAttribute(params.ReactDOM), 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$4(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,
@@ -17052,22 +17168,7 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents,
-          viewport: {
-            viewBox: this._viewBox,
-            get x() {
-              return this.viewBox.x1;
-            },
-            get y() {
-              return this.viewBox.y1;
-            },
-            get width() {
-              return this.viewBox.width();
-            },
-            get height() {
-              return this.viewBox.height();
-            }
-          }
+          supportsTouchEvents: this.params.supportsTouchEvents
         }, this.params.event)));
       }
       preventRender(prevent) {
@@ -17210,11 +17311,19 @@
           this.pluginService.unRegister(plugin);
         }));
       }
+      enableReactAttribute(container) {
+        this.reactAttribute || (this.reactAttribute = container, this.pluginService.register(new ReactAttributePlugin()));
+      }
+      disableReactAttribute() {
+        this.reactAttribute && (this.reactAttribute = !1, this.pluginService.findPluginsByName("ReactAttributePlugin").forEach(plugin => {
+          this.pluginService.unRegister(plugin);
+        }));
+      }
       getPluginsByName(name) {
         return this.pluginService.findPluginsByName(name);
       }
       tryUpdateAABBBounds() {
-        const viewBox = this._viewBox;
+        const viewBox = this.window.getViewBox();
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
       combineLayer(ILayer1, ILayer2) {
@@ -17241,12 +17350,12 @@
         this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
       clearViewBox(color) {
-        this.window.clearViewBox(this._viewBox, color);
+        this.window.clearViewBox(color);
       }
       render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -17259,7 +17368,7 @@
       _doRenderInThisFrame() {
         this.timeline.resume(), this.ticker.start();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       renderLayerList(layerList, params) {
         const list = [];
@@ -17271,14 +17380,17 @@
           layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
-            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+            viewBox: this.window.getViewBox(),
+            transMatrix: this.window.getViewBoxTransform()
           }, Object.assign({
-            renderStyle: this.renderStyle,
-            keepMatrix: this.params.renderKeepMatrix
+            renderStyle: this.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
+          viewBox: this.window.getViewBox(),
+          transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -17289,9 +17401,9 @@
       }
       resize(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        this.window.resize(w, h), this.forEachChildren(c => {
+        this.window.hasSubView() || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.window.resize(w, h), this.forEachChildren(c => {
           c.resize(w, h);
-        }), this._subView || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
       }
       resizeView(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -17334,7 +17446,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        super.release(), this.eventSystem && this.eventSystem.release(), this.pluginService.release(), this.forEach(layer => {
+        super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
       }
@@ -17345,47 +17457,41 @@
       getLayer(name) {
         return this.children.filter(layer => layer.name === name)[0];
       }
-      renderTo(window, params) {
+      renderTo(window) {
         this.forEachChildren((layer, i) => {
-          layer.drawTo(window, Object.assign(Object.assign({}, params), {
+          layer.drawTo(window, {
             renderService: this.renderService,
+            viewBox: window.getViewBox(),
+            transMatrix: window.getViewBoxTransform(),
             background: layer === this.defaultLayer ? this.background : void 0,
             clear: 0 === i,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
-          }));
+          });
         });
       }
       renderToNewWindow() {
-        let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let viewBox = arguments.length > 1 ? arguments[1] : undefined;
-        const window = container.get(VWindow);
-        if (fullImage) window.create({
-          width: this.viewWidth,
-          height: this.viewHeight,
+        const window = container.get(VWindow),
+          x1 = viewBox ? -viewBox.x1 : 0,
+          y1 = viewBox ? -viewBox.y1 : 0,
+          x2 = viewBox ? viewBox.x2 : this.viewWidth,
+          y2 = viewBox ? viewBox.y2 : this.viewHeight,
+          width = viewBox ? viewBox.width() : this.viewWidth,
+          height = viewBox ? viewBox.height() : this.viewHeight;
+        return window.create({
+          viewBox: {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          },
+          width: width,
+          height: height,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        });else {
-          const width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x),
-            height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
-          window.create({
-            width: width,
-            height: height,
-            dpr: this.window.dpr,
-            canvasControled: !0,
-            offscreen: !0,
-            title: ""
-          });
-        }
-        const x = viewBox ? -viewBox.x1 : 0,
-          y = viewBox ? -viewBox.y1 : 0;
-        return this.renderTo(window, {
-          x: x,
-          y: y,
-          width: viewBox ? viewBox.x2 : window.width,
-          height: viewBox ? viewBox.y2 : window.height
-        }), window;
+        }), this.renderTo(window), window;
       }
       toCanvas() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
@@ -17599,7 +17705,7 @@
       };
     let BaseWindowHandlerContribution = class {
       constructor() {
-        this._uid = Generator.GenAutoIncrementId();
+        this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds$1(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       onChange(cb) {
         this._onChangeCb = cb;
@@ -17620,6 +17726,18 @@
           left: 0
         };
       }
+      setViewBox(vb) {
+        this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
+      }
+      getViewBox() {
+        return this.viewBox;
+      }
+      setViewBoxTransform(a, b, c, d, e, f) {
+        this.modelMatrix.setValue(a, b, c, d, e, f);
+      }
+      getViewBoxTransform() {
+        return this.modelMatrix;
+      }
     };
     BaseWindowHandlerContribution = __decorate$K([injectable(), __metadata$x("design:paramtypes", [])], BaseWindowHandlerContribution);
 
@@ -17651,23 +17769,14 @@
           group: null
         };
         params.pickerService = this;
-        let offsetX = 0,
-          offsetY = 0;
-        if (params && params.bounds) {
-          if (!params.bounds.contains(point.x, point.y)) return result;
-          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
-        }
-        if (this.pickContext) if (params.keepMatrix) {
-          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
-            const t = this.pickContext.nativeContext.getTransform();
-            this.pickContext.setTransformFromMatrix(t, !0, 1);
-          }
-        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
-        params.pickContext = this.pickContext;
-        const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
+        const w = params.bounds.width(),
+          h = params.bounds.height();
+        if (!new AABBBounds$1().setValue(0, 0, w, h).containsPoint(point)) return result;
+        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        const parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         let group;
         for (let i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -18728,7 +18837,6 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const outP = [0, 0, 0],
-      initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) => {
         if (clockwise) for (; endAngle > startAngle;) endAngle -= pi2;else for (; endAngle < startAngle;) endAngle += pi2;
         const step = pi / 3 * (endAngle > startAngle ? 1 : -1);
@@ -18859,7 +18967,7 @@
         }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
         const context = canvas.nativeCanvas.getContext("2d");
         if (!context) throw new Error("发生错误，获取2d上下文失败");
-        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       reset() {
         this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -19221,7 +19329,10 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        this.setTransformFromMatrix(this._clearMatrix, setTransform, dpr);
+      }
+      setClearMatrix(a, b, c, d, e, f) {
+        this._clearMatrix.setValue(a, b, c, d, e, f);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -19452,10 +19563,10 @@
         return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
       }
       constructor() {
-        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global;
+        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global, this.viewBox = new AABBBounds$1(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       getTitle() {
-        return this.canvas.id.toString();
+        return this.canvas.id && this.canvas.id.toString();
       }
       getWH() {
         return {
@@ -19562,7 +19673,8 @@
         return this.canvas.nativeCanvas.dispatchEvent(event);
       }
       getStyle() {
-        return this.canvas.nativeCanvas.style;
+        var _a;
+        return null !== (_a = this.canvas.nativeCanvas.style) && void 0 !== _a ? _a : {};
       }
       setStyle(style) {
         this.canvas.nativeCanvas.style = style;
@@ -19581,8 +19693,9 @@
           bottom: 0
         };
       }
-      clearViewBox(vb, color) {
-        const context = this.getContext(),
+      clearViewBox(color) {
+        const vb = this.viewBox,
+          context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -19663,14 +19776,20 @@
         this.applyStyles = !0;
       }
       mapToCanvasPoint(nativeEvent, domElement) {
-        var _a;
+        var _a, _b;
+        let clientX = 0,
+          clientY = 0,
+          offsetX = 0,
+          offsetY = 0;
+        if (nativeEvent.changedTouches) {
+          const data = null !== (_a = nativeEvent.changedTouches[0]) && void 0 !== _a ? _a : {};
+          clientX = data.clientX || 0, clientY = data.clientY || 0, offsetX = clientX, offsetY = clientY;
+        } else clientX = nativeEvent.clientX || 0, clientY = nativeEvent.clientY || 0, offsetX = nativeEvent.offsetX || 0, offsetY = nativeEvent.offsetY || 0;
         if (domElement) {
-          const {
-              clientX: x,
-              clientY: y
-            } = nativeEvent,
+          const x = clientX,
+            y = clientY,
             rect = domElement.getBoundingClientRect(),
-            nativeCanvas = null === (_a = domElement.getNativeHandler) || void 0 === _a ? void 0 : _a.call(domElement).nativeCanvas;
+            nativeCanvas = null === (_b = domElement.getNativeHandler) || void 0 === _b ? void 0 : _b.call(domElement).nativeCanvas;
           let scaleX, scaleY;
           return nativeCanvas && (scaleX = rect.width / nativeCanvas.offsetWidth, scaleY = rect.height / nativeCanvas.offsetHeight), {
             x: (x - rect.left) / (isValidNumber$1(scaleX) ? scaleX : 1),
@@ -19678,8 +19797,8 @@
           };
         }
         return {
-          x: nativeEvent.offsetX,
-          y: nativeEvent.offsetY
+          x: offsetX,
+          y: offsetY
         };
       }
       getNativeAABBBounds(_dom) {
@@ -19952,7 +20071,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(vb, color) {}
+      clearViewBox(color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$v([injectable(), __param$n(0, inject(VGlobal)), __metadata$n("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -21360,10 +21479,10 @@
       loadPyramid3dPick || (loadPyramid3dPick = !0, bind(CanvasPyramid3dPicker).to(DefaultCanvasPyramid3dPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasPyramid3dPicker));
     });
 
-    const browser = isBrowserEnv();
+    const browser$1 = isBrowserEnv();
 
     function _registerArc() {
-      _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
+      _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser$1 ? arcCanvasPickModule : arcMathPickModule));
     }
     _registerArc.__loaded = !1;
     const registerArc = _registerArc;
@@ -21375,19 +21494,19 @@
     const registerArc3d = _registerArc3d;
 
     function _registerArea() {
-      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
     }
     _registerArea.__loaded = !1;
     const registerArea = _registerArea;
 
     function _registerCircle() {
-      _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
+      _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
     }
     _registerCircle.__loaded = !1;
     const registerCircle = _registerCircle;
 
     function _registerGlyph() {
-      _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
+      _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser$1 ? glyphCanvasPickModule : glyphMathPickModule));
     }
     _registerGlyph.__loaded = !1;
     const registerGlyph = _registerGlyph;
@@ -21399,25 +21518,25 @@
     const registerGroup = _registerGroup;
 
     function _registerImage() {
-      _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
+      _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser$1 ? imageCanvasPickModule : imageMathPickModule));
     }
     _registerImage.__loaded = !1;
     const registerImage = _registerImage;
 
     function _registerLine() {
-      _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
+      _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser$1 ? lineCanvasPickModule : lineMathPickModule));
     }
     _registerLine.__loaded = !1;
     const registerLine = _registerLine;
 
     function _registerPath() {
-      _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
+      _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser$1 ? pathCanvasPickModule : pathMathPickModule));
     }
     _registerPath.__loaded = !1;
     const registerPath = _registerPath;
 
     function _registerPolygon() {
-      _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
+      _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser$1 ? polygonCanvasPickModule : polygonMathPickModule));
     }
     _registerPolygon.__loaded = !1;
     const registerPolygon = _registerPolygon;
@@ -21429,7 +21548,7 @@
     const registerPyramid3d = _registerPyramid3d;
 
     function _registerRect() {
-      _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
+      _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser$1 ? rectCanvasPickModule : rectMathPickModule));
     }
     _registerRect.__loaded = !1;
     const registerRect = _registerRect;
@@ -21441,7 +21560,7 @@
     const registerRect3d = _registerRect3d;
 
     function _registerRichtext() {
-      _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+      _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser$1 ? richtextCanvasPickModule : richTextMathPickModule));
     }
     _registerRichtext.__loaded = !1;
     const registerRichtext = _registerRichtext;
@@ -21453,13 +21572,13 @@
     const registerShadowRoot = _registerShadowRoot;
 
     function _registerSymbol() {
-      _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
+      _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser$1 ? symbolCanvasPickModule : symbolMathPickModule));
     }
     _registerSymbol.__loaded = !1;
     const registerSymbol = _registerSymbol;
 
     function _registerText() {
-      _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
+      _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser$1 ? textCanvasPickModule : textMathPickModule));
     }
     _registerText.__loaded = !1;
     const registerText = _registerText;
@@ -22869,7 +22988,7 @@
             Safari: ua.indexOf('safari') > -1 && ua.indexOf('edge') === -1
         };
     }
-    analyzeUserAgent();
+    const { IE, Chrome, Firefox, Edge, Safari } = analyzeUserAgent();
     function isObject$1(obj) {
         return obj === Object(obj);
     }
@@ -22998,6 +23117,14 @@
         }
         return false;
     }
+    const browser = {
+        IE,
+        Edge,
+        Chrome,
+        Firefox,
+        Safari,
+        heightLimit: Chrome ? 33554431 : Firefox ? 17895588 : 10737433
+    };
     const obj = {
         isObject: isObject$1
     };
@@ -24864,6 +24991,25 @@
       registerGroup(), registerRect();
     }
 
+    const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";
+    var StateValue;
+    !function (StateValue) {
+      StateValue.selected = "selected", StateValue.selectedReverse = "selected_reverse", StateValue.hover = "hover", StateValue.hoverReverse = "hover_reverse";
+    }(StateValue || (StateValue = {}));
+    const DEFAULT_STATES$2 = {
+      [StateValue.selectedReverse]: {},
+      [StateValue.selected]: {},
+      [StateValue.hover]: {},
+      [StateValue.hoverReverse]: {}
+    };
+    const DEFAULT_HTML_TEXT_SPEC = {
+      container: "",
+      width: 30,
+      height: 30,
+      style: {}
+    };
+    const SCROLLBAR_EVENT = "scrollDrag";
+
     const delayMap = {
       debounce: debounce$1,
       throttle: throttle$1
@@ -24903,9 +25049,9 @@
           this._prePos = "horizontal" === direction ? e.clientX : e.clientY, this._dispatchEvent("scrollDown", {
             pos: this._prePos,
             event: e
-          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
           }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._computeScrollValue = e => {
@@ -24920,12 +25066,12 @@
             height: height
           } = this._getSliderRenderBounds();
           return "vertical" === direction ? (currentPos = e.clientY, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = e.clientX, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
-        }, this._onSliderPointerMove = delayMap[this.attribute.delayType](e => {
+        }, this._onSliderPointerMove = e => {
           e.stopPropagation();
           const preScrollRange = this.getScrollRange(),
             [currentPos, currentScrollValue] = this._computeScrollValue(e);
           this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
-        }, this.attribute.delayTime), this._onSliderPointerUp = e => {
+        }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
           e.preventDefault();
           const {
               realTime = !0,
@@ -24938,9 +25084,9 @@
           this._dispatchEvent("scrollUp", {
             pre: preRange,
             value: clampRange$1(range, limitRange[0], limitRange[1])
-          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMove, {
+          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
           }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
@@ -24967,7 +25113,7 @@
             }, !0), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
           }
         }
-        this.attribute.range = currScrollRange, realTime && this._dispatchEvent("scrollDrag", {
+        this.attribute.range = currScrollRange, realTime && this._dispatchEvent(SCROLLBAR_EVENT, {
           pre: preRange,
           value: currScrollRange
         });
@@ -25143,41 +25289,22 @@
       return direct ? angleLargeThanPI ? 2 * Math.PI - ang : ang : angleLargeThanPI ? ang : 2 * Math.PI - ang;
     }
 
-    const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";
-    var StateValue;
-    !function (StateValue) {
-      StateValue.selected = "selected", StateValue.selectedReverse = "selected_reverse", StateValue.hover = "hover", StateValue.hoverReverse = "hover_reverse";
-    }(StateValue || (StateValue = {}));
-    const DEFAULT_STATES$2 = {
-      [StateValue.selectedReverse]: {},
-      [StateValue.selected]: {},
-      [StateValue.hover]: {},
-      [StateValue.hoverReverse]: {}
-    };
-    const DEFAULT_HTML_TEXT_SPEC = {
-      container: "",
-      width: 30,
-      height: 30,
-      style: {}
-    };
-
     function measureTextSize(text, textSpec) {
-      let fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_TEXT_FONT_FAMILY$1;
-      var _a, _b;
+      let defaultTextTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (!text) return {
         width: 0,
         height: 0
       };
       const bounds = getTextBounds$1({
         text: text,
-        fontFamily: null !== (_a = textSpec.fontFamily) && void 0 !== _a ? _a : fontFamily,
-        fontSize: textSpec.fontSize || 12,
-        fontWeight: textSpec.fontWeight,
-        textAlign: null !== (_b = textSpec.textAlign) && void 0 !== _b ? _b : "center",
+        fontFamily: textSpec.fontFamily || defaultTextTheme.fontFamily || DEFAULT_TEXT_FONT_FAMILY$1,
+        fontSize: textSpec.fontSize || defaultTextTheme.fontSize || 12,
+        fontWeight: textSpec.fontWeight || defaultTextTheme.fontWeight,
+        textAlign: textSpec.textAlign || "center",
         textBaseline: textSpec.textBaseline,
         ellipsis: !!textSpec.ellipsis,
         maxLineWidth: textSpec.maxLineWidth || 1 / 0,
-        lineHeight: textSpec.fontSize || 12
+        lineHeight: textSpec.fontSize || defaultTextTheme.fontSize || 12
       });
       return {
         width: bounds.width(),
@@ -25212,7 +25339,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b;
+        var _a, _b, _c;
         const {
             text = "",
             textStyle = {},
@@ -25293,11 +25420,11 @@
             y: 0
           });
           isNil$3(textAttrs.lineHeight) && (textAttrs.lineHeight = textStyle.fontSize), textShape = group.createOrUpdateChild("tag-text", textAttrs, "text"), isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
-          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme().text.fontFamily),
+          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme()) || void 0 === _b ? void 0 : _b.text),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_b = shape.size) && void 0 !== _b ? _b : 10,
+          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
             maxSize = isNumber$4(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
@@ -25818,7 +25945,9 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$3(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          const line = graphicCreator$1.polygon(Object.assign(Object.assign({
+          let lineCreator = graphicCreator$1.line;
+          array$1(lineStyle)[0].cornerRadius && (lineCreator = graphicCreator$1.polygon);
+          const line = lineCreator(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -26020,6 +26149,19 @@
       }
     };
 
+    function getElMap(g) {
+      const elMap = {};
+      return traverseGroup(g, el => {
+        "group" !== el.type && el.id && (elMap[el.id] = el);
+      }), elMap;
+    }
+    function getVerticalCoord(point, vector) {
+      return {
+        x: point.x + vector[0],
+        y: point.y + vector[1]
+      };
+    }
+
     class AxisBase extends AbstractComponent {
       constructor() {
         super(...arguments), this.name = "axis", this.data = [], this.tickLineItems = [], this.subTickLineItems = [], this.axisLabelLayerSize = {}, this.axisLabelsContainer = null, this._onHover = e => {
@@ -26057,7 +26199,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._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26182,11 +26324,7 @@
         axisTitle.name = AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), container.add(axisTitle);
       }
       getVerticalCoord(point, offset, inside) {
-        const vector = this.getVerticalVector(offset, inside, point);
-        return {
-          x: point.x + vector[0],
-          y: point.y + vector[1]
-        };
+        return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
       }
       getTextAlign(vector) {
         let align = "center";
@@ -26329,6 +26467,9 @@
           }));
         }), data;
       }
+      release() {
+        super.release(), this._prevInnerView = null, this._innerView = null;
+      }
     }
 
     function rotate(x, y, deg, originX, originY) {
@@ -26491,17 +26632,42 @@
         limitLength: limitLength,
         verticalLimitLength: verticalLimitLength,
         ellipsis = "...",
-        orient: orient
+        orient: orient,
+        axisLength: axisLength
       } = config;
-      !isEmpty(labels) && isValidNumber$1(limitLength) && labels.forEach(label => {
+      if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
+      const DELTA = Math.sin(Math.PI / 10);
+      labels.forEach(label => {
         var _a;
         const angle = label.attribute.angle,
-          isRotated = !isNil$3(angle) && 0 !== angle;
-        if (("top" === orient || "bottom" === orient) && (isRotated && Math.floor(label.AABBBounds.height()) <= limitLength || !isRotated && Math.floor(label.AABBBounds.width()) <= verticalLimitLength)) return;
+          hasAngle = !isNil$3(angle),
+          cos = hasAngle ? Math.cos(angle) : 1,
+          sin = hasAngle ? Math.sin(angle) : 0,
+          isHorizontal = !hasAngle || Math.abs(sin) <= DELTA,
+          isVertical = hasAngle && Math.abs(cos) <= DELTA,
+          isX = "top" === orient || "bottom" === orient;
+        if (isX) {
+          if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
+          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+        }
         const direction = label.attribute.direction;
-        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
+        if (!isX) {
+          if ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          if ("vertical" !== direction) {
+            if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
+            if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          }
+        }
         let limitLabelLength = null;
-        limitLabelLength = isRotated ? Math.abs(limitLength / Math.sin(angle)) : "top" === orient || "bottom" === orient || "vertical" === direction ? verticalLimitLength : limitLength, isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
+        if (isHorizontal || isVertical) limitLabelLength = isX ? isHorizontal ? verticalLimitLength : limitLength : "vertical" === direction || isVertical ? verticalLimitLength : limitLength;else if (isX) {
+          const {
+              x1: x1,
+              x2: x2
+            } = label.AABBBounds,
+            tan = sin / cos;
+          limitLabelLength = tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength ? (axisLength - x1) / Math.abs(cos) : tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0 ? x2 / Math.abs(cos) : Math.abs(limitLength / sin);
+        } else limitLabelLength = Math.abs(limitLength / cos);
+        isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
           maxLineWidth: limitLabelLength,
           ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis
         });
@@ -26674,9 +26840,10 @@
             autoRotate = !0,
             shape: shape,
             background: background,
-            state = {}
+            state = {},
+            maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$1(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
+          restAttrs = __rest$1(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -26727,7 +26894,28 @@
           } = this.attribute;
           textBaseline = 1 === -1 * verticalFactor ? "bottom" : "top";
         } else textAlign = this.getTextAlign(vector), textBaseline = this.getTextBaseline(vector, !1);
+        let maxTagWidth = maxWidth;
+        if (isNil$3(maxTagWidth)) {
+          const {
+              verticalLimitSize: verticalLimitSize,
+              verticalMinSize: verticalMinSize,
+              orient: orient
+            } = this.attribute,
+            limitSize = Math.min(verticalLimitSize || 1 / 0, verticalMinSize || 1 / 0);
+          if (isValidNumber$1(limitSize)) {
+            if ("bottom" === orient || "top" === orient) {
+              if (angle !== Math.PI / 2) {
+                const cosValue = Math.abs(Math.cos(null != angle ? angle : 0));
+                maxTagWidth = cosValue < 1e-6 ? 1 / 0 : this.attribute.end.x / cosValue;
+              } else maxTagWidth = limitSize - offset;
+            } else if (angle && 0 !== angle) {
+              const sinValue = Math.abs(Math.sin(angle));
+              maxTagWidth = sinValue < 1e-6 ? 1 / 0 : this.attribute.end.y / sinValue;
+            } else maxTagWidth = limitSize - offset;
+          }
+        }
         const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), {
+          maxWidth: maxTagWidth,
           textStyle: Object.assign({
             textAlign: textAlign,
             textBaseline: textBaseline
@@ -26754,9 +26942,9 @@
       }
       getLabelAlign(vector, inside, angle) {
         const orient = this.attribute.orient;
-        if (isValidNumber$1(angle) || 0 === vector[0] && 0 === vector[1]) {
-          if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(orient, angle);
-          if ("left" === orient || "right" === orient) return getYAxisLabelAlign(orient, angle);
+        if (["top", "bottom", "right", "left"].includes(orient) || 0 === vector[0] && 0 === vector[1]) {
+          if ("top" === orient || "bottom" === orient) return getXAxisLabelAlign(inside ? "bottom" === orient ? "top" : "bottom" : orient, angle);
+          if ("left" === orient || "right" === orient) return getYAxisLabelAlign(inside ? "left" === orient ? "right" : "left" : orient, angle);
         }
         return {
           textAlign: this.getTextAlign(vector),
@@ -26851,12 +27039,15 @@
             labelRotateAngle: autoRotateAngle,
             orient: orient
           }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
-            const verticalLimitLength = "left" === orient || "right" === orient ? Math.abs(this.attribute.start.y - this.attribute.end.y) / labelShapes.length : autoHide$1 || autoRotate$1 ? 1 / 0 : Math.abs(this.attribute.start.x - this.attribute.end.x) / labelShapes.length;
+            const isVertical = "left" === orient || "right" === orient,
+              axisLength = isVertical ? Math.abs(this.attribute.start.y - this.attribute.end.y) : Math.abs(this.attribute.start.x - this.attribute.end.x),
+              verticalLimitLength = isVertical ? axisLength / labelShapes.length : autoHide$1 || autoRotate$1 ? 1 / 0 : axisLength / labelShapes.length;
             autoLimit(labelShapes, {
               limitLength: limitLength,
               verticalLimitLength: verticalLimitLength,
               ellipsis: limitEllipsis,
-              orient: orient
+              orient: orient,
+              axisLength: axisLength
             });
           }
           autoHide$1 && autoHide(labelShapes, {
@@ -26897,7 +27088,7 @@
         }
       }
       _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const {
             label: label,
             title: title,
@@ -26911,7 +27102,7 @@
         const axisLineWidth = line && line.visible ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
           tickLength = tick && tick.visible ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
         if (title && title.visible && "string" == typeof title.text) {
-          titleHeight = measureTextSize(title.text, title.textStyle, null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme().text.fontFamily).height;
+          titleHeight = measureTextSize(title.text, title.textStyle, null === (_e = null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme()) || void 0 === _e ? void 0 : _e.text).height;
           const padding = normalizePadding(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
         }
@@ -26974,7 +27165,7 @@
         };
       }
       render() {
-        var _a, _b;
+        var _a, _b, _c;
         this._reset();
         const {
           layout = "horizontal",
@@ -27016,7 +27207,7 @@
           } = measureTextSize(this._getPageText(total), Object.assign({
             textAlign: "center",
             textBaseline: "middle"
-          }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
+          }, textStyle), null === (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme()) || void 0 === _c ? void 0 : _c.text),
           handlerSizeX = isNumber$4(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$4(handlerSize) ? handlerSize : handlerSize[1],
           text = graphicCreator$1.text(Object.assign({
@@ -27246,8 +27437,9 @@
             maxRow = 2,
             maxWidth: maxWidth,
             maxHeight: maxHeight,
-            defaultSelected = [],
-            lazyload: lazyload
+            defaultSelected: defaultSelected,
+            lazyload: lazyload,
+            autoPage: autoPage
           } = this.attribute,
           {
             spaceCol = DEFAULT_ITEM_SPACE_COL,
@@ -27257,9 +27449,10 @@
           {
             items: legendItems,
             isHorizontal: isHorizontal,
-            startIndex: startIndex
+            startIndex: startIndex,
+            isScrollbar: isScrollbar
           } = this._itemContext,
-          maxPages = isHorizontal ? maxRow : maxCol;
+          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
         let item,
           {
             doWrap: doWrap,
@@ -27268,24 +27461,22 @@
             startY: startY,
             pages: pages
           } = this._itemContext;
-        for (let index = startIndex, len = legendItems.length; index < len; index++) {
-          if (lazyload && pages > this._itemContext.currentPage * maxPages) {
-            this._itemContext.startIndex = index;
-            break;
-          }
-          item = legendItems[index], item.id || (item.id = item.label), item.index = index;
-          const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index, legendItems),
+        for (let index = startIndex, len = legendItems.length; index < len && !(lazyload && pages > this._itemContext.currentPage * maxPages); index++) {
+          lazyload && (this._itemContext.startIndex = index + 1), item = legendItems[index], item.id || (item.id = item.label), item.index = index;
+          let isSelected = !0;
+          isArray$3(defaultSelected) && (isSelected = defaultSelected.includes(item.label));
+          const itemGroup = this._renderEachItem(item, isSelected, index, legendItems),
             itemWidth = itemGroup.attribute.width,
             itemHeight = itemGroup.attribute.height;
-          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid$3(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, startX = 0, startY += itemHeight + spaceRow, pages += 1)), index > 0 && itemGroup.setAttributes({
+          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid$3(maxWidth) && (isScrollbar && autoPage ? (pages = Math.ceil((startX + itemWidth) / maxWidth), doWrap = pages > 1) : startX + itemWidth > maxWidth && (doWrap = !0, startX > 0 && (pages += 1, startX = 0, startY += itemHeight + spaceRow))), 0 === startX && 0 === startY || itemGroup.setAttributes({
             x: startX,
             y: startY
-          }), startX += spaceCol + itemWidth) : (isValid$3(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), index > 0 && itemGroup.setAttributes({
+          }), startX += spaceCol + itemWidth) : (isValid$3(maxHeight) && (isScrollbar && autoPage ? (pages = Math.ceil((startY + itemHeight) / maxHeight), doWrap = pages > 1) : maxHeight < startY + itemHeight && (pages += 1, doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0)), 0 === startX && 0 === startY || itemGroup.setAttributes({
             x: startX,
             y: startY
           }), startY += spaceRow + itemHeight), itemsContainer.add(itemGroup);
         }
-        return this._itemContext.doWrap = doWrap, this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.maxWidthInCol = maxWidthInCol, this._itemContext.pages = pages, this._itemContext.maxPages = maxPages, lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
+        return this._itemContext.doWrap = doWrap, this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.maxWidthInCol = maxWidthInCol, this._itemContext.pages = pages, this._itemContext.maxPages = maxPages, isScrollbar && (this._itemContext.totalPage = pages), lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
       }
       _renderContent() {
         const {
@@ -27313,8 +27504,10 @@
             height: itemHeight
           } = item,
           widthsOptions = [];
-        isValid$3(maxItemWidth) && widthsOptions.push(maxItemWidth), isValid$3(itemWidth) && widthsOptions.push(itemWidth), widthsOptions.length && (isValid$3(maxWidth) && widthsOptions.push(maxWidth), this._itemWidthByUser = minInArray$1(widthsOptions)), isValid$3(itemHeight) && (this._itemHeightByUser = itemHeight), this._itemContext = {
-          currentPage: this.attribute.pager && this.attribute.pager.defaultCurrent || 1,
+        isValid$3(maxItemWidth) && widthsOptions.push(maxItemWidth), isValid$3(itemWidth) && widthsOptions.push(itemWidth), widthsOptions.length && (isValid$3(maxWidth) && widthsOptions.push(maxWidth), this._itemWidthByUser = minInArray$1(widthsOptions)), isValid$3(itemHeight) && (this._itemHeightByUser = itemHeight);
+        const pager = this.attribute.pager;
+        this._itemContext = {
+          currentPage: pager && pager.defaultCurrent || 1,
           doWrap: !1,
           maxWidthInCol: 0,
           maxPages: 1,
@@ -27324,10 +27517,11 @@
           startIndex: 0,
           items: legendItems,
           isHorizontal: isHorizontal,
-          totalPage: 1 / 0
+          totalPage: 1 / 0,
+          isScrollbar: pager && "scrollbar" === pager.type
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent(isHorizontal)), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
+        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -27476,27 +27670,13 @@
           itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
         return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
       }
-      _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+      _createPager(compStyle) {
         var _a, _b;
         const {
           disableTriggerEvent: disableTriggerEvent,
           maxRow: maxRow
         } = this.attribute;
-        return isScrollbar ? new ScrollBar(isHorizontal ? Object.assign(Object.assign({
-          direction: "vertical",
-          width: 12,
-          range: [0, .5]
-        }, compStyle), {
-          height: compSize,
-          disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign(Object.assign({
-          direction: "horizontal",
-          disableTriggerEvent: disableTriggerEvent,
-          range: [0, .5],
-          height: 12
-        }, compStyle), {
-          width: compSize
-        })) : new Pager(isHorizontal ? Object.assign(Object.assign({
+        return this._itemContext.isHorizontal ? new Pager(Object.assign(Object.assign({
           layout: 1 === maxRow ? "horizontal" : "vertical",
           total: 99
         }, merge({
@@ -27507,53 +27687,79 @@
         }, compStyle)), {
           defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
           disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign({
+        })) : new Pager(Object.assign({
           layout: "horizontal",
           total: 99,
           disableTriggerEvent: disableTriggerEvent,
           defaultCurrent: null === (_b = this.attribute.pager) || void 0 === _b ? void 0 : _b.defaultCurrent
         }, compStyle));
       }
-      _updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize) {
+      _createScrollbar(compStyle, compSize) {
+        const {
+          disableTriggerEvent: disableTriggerEvent
+        } = this.attribute;
+        return this._itemContext.isHorizontal ? new ScrollBar(Object.assign(Object.assign({
+          direction: "horizontal",
+          disableTriggerEvent: disableTriggerEvent,
+          range: [0, .5],
+          height: 12
+        }, compStyle), {
+          width: compSize
+        })) : new ScrollBar(Object.assign(Object.assign({
+          direction: "vertical",
+          width: 12,
+          range: [0, .5]
+        }, compStyle), {
+          height: compSize,
+          disableTriggerEvent: disableTriggerEvent
+        }));
+      }
+      _updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight) {
         const {
             maxHeight: maxHeight,
             pager: pager
           } = this.attribute,
           {
-            currentPage: currentPage,
-            totalPage: totalPage
-          } = this._itemContext;
-        if (isScrollbar) this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]), isHorizontal ? this._pagerComponent.setAttributes({
-          x: contentSize,
-          y: renderStartY
-        }) : this._pagerComponent.setAttributes({
-          x: 0,
-          y: maxHeight - this._pagerComponent.AABBBounds.height()
-        });else {
-          const position = pager && pager.position || "middle";
-          if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
-            let y;
-            y = "start" === position ? renderStartY : "end" === position ? renderStartY + compSize - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compSize / 2 - this._pagerComponent.AABBBounds.height() / 2, this._pagerComponent.setAttributes({
-              x: contentSize,
-              y: y
-            });
-          } else {
-            let x;
-            x = "start" === position ? 0 : "end" === position ? compSize - this._pagerComponent.AABBBounds.width() : (compSize - this._pagerComponent.AABBBounds.width()) / 2, this._pagerComponent.setAttributes({
-              x: x,
-              y: maxHeight - this._pagerComponent.AABBBounds.height()
-            });
-          }
+            totalPage: totalPage,
+            isHorizontal: isHorizontal
+          } = this._itemContext,
+          position = pager && pager.position || "middle";
+        if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
+          let y;
+          y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2, this._pagerComponent.setAttributes({
+            x: contentWidth,
+            y: y
+          });
+        } else {
+          let x;
+          x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2, this._pagerComponent.setAttributes({
+            x: x,
+            y: maxHeight - this._pagerComponent.AABBBounds.height()
+          });
         }
       }
-      _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
+      _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
+        const {
+          currentPage: currentPage,
+          totalPage: totalPage,
+          isHorizontal: isHorizontal
+        } = this._itemContext;
+        this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]), isHorizontal ? this._pagerComponent.setAttributes({
+          x: 0,
+          y: renderStartY + contentHeight
+        }) : this._pagerComponent.setAttributes({
+          x: contentWidth,
+          y: renderStartY
+        });
+      }
+      _bindEventsOfPager(pageSize, channel) {
         const pager = this.attribute.pager || {},
           {
             animation = !0,
             animationDuration = 450,
             animationEasing = "quadIn"
           } = pager,
-          pageParser = isScrollbar ? e => {
+          pageParser = this._itemContext.isScrollbar ? e => {
             const {
               value: value
             } = e.detail;
@@ -27568,16 +27774,14 @@
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
                 this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
               }
-              animation ? this._itemsContainer.animate().to(isHorizontal ? {
-                y: -(newPage - 1) * (compSize + spaceSize)
-              } : {
-                x: -(newPage - 1) * (compSize + spaceSize)
-              }, animationDuration, animationEasing) : isHorizontal ? this._itemsContainer.setAttribute("y", -(newPage - 1) * (compSize + spaceSize)) : this._itemsContainer.setAttribute("x", -(newPage - 1) * (compSize + spaceSize));
+              animation ? this._itemsContainer.animate().to({
+                [channel]: -(newPage - 1) * pageSize
+              }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
           };
-        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
+        this._itemContext.isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
       }
-      _renderPagerComponent(isHorizontal) {
+      _renderPager() {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
@@ -27597,51 +27801,105 @@
             defaultCurrent = 1
           } = pager,
           compStyle = __rest(pager, ["space", "defaultCurrent"]),
-          isScrollbar = "scrollbar" === pager.type;
+          {
+            isHorizontal: isHorizontal
+          } = this._itemContext;
         let comp,
-          compSize = 0,
-          contentSize = 0,
+          compWidth = 0,
+          compHeight = 0,
+          contentWidth = 0,
+          contentHeight = 0,
           startX = 0,
           startY = 0,
           pages = 1;
         if (isHorizontal) {
-          if (compSize = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxWidth - comp.AABBBounds.width() - pagerSpace, contentSize <= 0) return this._innerView.removeChild(comp), !1;
+          if (compHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, compWidth = maxWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), contentWidth = maxWidth - comp.AABBBounds.width() - pagerSpace, contentWidth <= 0) return this._innerView.removeChild(comp), !1;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               width: width,
               height: height
             } = item.attribute;
-            contentSize < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
+            contentWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
               x: startX,
               y: startY
             }), startX += spaceCol + width;
           }), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages;
           const total = Math.ceil(pages / maxRow);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         } else {
-          if (compSize = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, contentSize <= 0) return this._innerView.removeChild(comp), !1;
+          if (compWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, compHeight = maxHeight, contentWidth = compWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               height: height
             } = item.attribute;
-            contentSize < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
+            contentHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
               x: startX,
               y: startY
             }), startY += spaceRow + height;
           });
           const total = Math.ceil(pages / maxCol);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         }
-        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
         const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
-          width: isHorizontal ? contentSize : compSize,
-          height: isHorizontal ? compSize : contentSize,
+          width: isHorizontal ? contentWidth : compWidth,
+          height: isHorizontal ? compHeight : contentHeight,
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
+      }
+      _renderScrollbar() {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0,
+          {
+            maxWidth: maxWidth,
+            maxHeight: maxHeight,
+            item = {},
+            pager = {}
+          } = this.attribute,
+          {
+            spaceCol = DEFAULT_ITEM_SPACE_COL,
+            spaceRow = DEFAULT_ITEM_SPACE_ROW
+          } = item,
+          itemsContainer = this._itemsContainer,
+          {
+            space: pagerSpace = DEFAULT_PAGER_SPACE,
+            defaultCurrent = 1
+          } = pager,
+          compStyle = __rest(pager, ["space", "defaultCurrent"]),
+          {
+            isHorizontal: isHorizontal
+          } = this._itemContext;
+        let comp,
+          compSize = 0,
+          contentWidth = 0,
+          contentHeight = 0,
+          startY = 0,
+          pages = 1;
+        if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);else {
+          if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
+          itemsContainer.getChildren().forEach((item, index) => {
+            const {
+              height: height
+            } = item.attribute;
+            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height;
+          }), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+        }
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
+        const clipGroup = graphicCreator$1.group({
+          x: 0,
+          y: renderStartY,
+          width: contentWidth,
+          height: contentHeight,
+          clip: !0,
+          pickable: !1
+        });
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+      }
+      _renderPagerComponent() {
+        return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), !0;
       }
       _hover(legendItem, e) {
         this._lastActiveItem = legendItem;
@@ -29216,12 +29474,9 @@
           }, this._onTooltipUpdate(e), this._dispatchTooltipEvent("sliderTooltipShow"));
         }, this._onTooltipUpdate = e => {
           if (this._isChanging || !this._tooltipState || !this._tooltipState.isActive) return;
-          const {
-              min: min,
-              max: max
-            } = this.attribute,
-            pos = clamp$3(this._isHorizontal ? (e.viewX - this._rail.globalAABBBounds.x1) / this._rail.globalAABBBounds.width() : (e.viewY - this._rail.globalAABBBounds.y1) / this._rail.globalAABBBounds.height(), 0, 1);
-          pos !== this._tooltipState.pos && (this._tooltipState.pos = pos, this._tooltipState.value = min + (max - min) * pos, this._updateTooltip(), this._dispatchTooltipEvent("sliderTooltipUpdate"));
+          const railLen = this._isHorizontal ? this._rail.globalAABBBounds.width() : this._rail.globalAABBBounds.height(),
+            pos = clamp$3(this._isHorizontal ? (e.viewX - this._rail.globalAABBBounds.x1) / railLen : (e.viewY - this._rail.globalAABBBounds.y1) / railLen, 0, 1);
+          pos !== this._tooltipState.pos && (this._tooltipState.pos = pos, this._tooltipState.value = this.calculateValueByPos(pos * railLen), this._updateTooltip(), this._dispatchTooltipEvent("sliderTooltipUpdate"));
         }, this._onTooltipHide = () => {
           const {
             tooltip: tooltip
@@ -29249,7 +29504,7 @@
             delta = 0;
           this._isHorizontal ? (currentPos = e.clientX, delta = currentPos - this._prePos, originPos = null === (_b = this._currentHandler) || void 0 === _b ? void 0 : _b.attribute.x, railLen = railWidth) : (currentPos = e.clientY, delta = currentPos - this._prePos, originPos = null === (_a = this._currentHandler) || void 0 === _a ? void 0 : _a.attribute.y, railLen = railHeight);
           const newPos = clamp$3(originPos + delta, 0, railLen),
-            currentValue = newPos / railLen * (max - min) + min;
+            currentValue = this.calculateValueByPos(newPos);
           "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onHandlerPointerUp = e => {
           e.preventDefault(), this._isChanging = !1, this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
@@ -29269,7 +29524,8 @@
             railWidth: railWidth,
             railHeight: railHeight,
             min: min,
-            max: max
+            max: max,
+            inverse: inverse
           } = this.attribute;
           if (max === min) return;
           const {
@@ -29281,14 +29537,14 @@
           const delta = currentPos - this._prePos;
           if (startHandler) {
             const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y,
-              newPos = clamp$3(originPos + delta, 0, railLen - trackLen),
-              currentValue = newPos / railLen * (max - min) + min;
+              newPos = inverse ? clamp$3(originPos + delta, trackLen, railLen) : clamp$3(originPos + delta, 0, railLen - trackLen),
+              currentValue = this.calculateValueByPos(newPos);
             this._updateHandler(startHandler, newPos, currentValue);
           }
           if (endHandler) {
             const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y,
-              newPos = clamp$3(originPos + delta, trackLen, railLen),
-              currentValue = newPos / railLen * (max - min) + min,
+              newPos = inverse ? clamp$3(originPos + delta, 0, railLen - trackLen) : clamp$3(originPos + delta, trackLen, railLen),
+              currentValue = this.calculateValueByPos(newPos),
               startHandlerAttribute = null == startHandler ? void 0 : startHandler.attribute;
             this._updateHandler(endHandler, newPos, currentValue), this._track.setAttributes(this._isHorizontal ? {
               x: Math.min(startHandlerAttribute.x, endHandler.attribute.x),
@@ -29316,9 +29572,9 @@
           if (max === min) return;
           const startHandler = this._startHandler,
             endHandler = this._endHandler;
-          let currentPos, startHandlerPos, endHandlerPos, railLen;
-          this._isHorizontal ? (currentPos = e.viewX - this._rail.globalAABBBounds.x1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railLen = railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, railLen = railHeight);
-          const currentValue = currentPos / railLen * (max - min) + min;
+          let currentPos, startHandlerPos, endHandlerPos;
+          this._isHorizontal ? (currentPos = e.viewX - this._rail.globalAABBBounds.x1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, railHeight);
+          const currentValue = this.calculateValueByPos(currentPos);
           if (isValid$3(endHandlerPos)) {
             const updateHandler = Math.abs(currentPos - startHandlerPos) > Math.abs(currentPos - endHandlerPos) ? endHandler : startHandler;
             this._updateHandler(updateHandler, currentPos, currentValue);
@@ -29326,11 +29582,33 @@
           this._updateTrack(), this._dispatchChangeEvent();
         };
       }
-      setValue(value) {
+      calculatePosByValue(value, pos) {
         const {
           layout: layout,
           railWidth: railWidth,
           railHeight: railHeight,
+          min: min,
+          max: max,
+          inverse: inverse
+        } = this.attribute;
+        let ratio = 0;
+        ratio = min === max ? "start" === pos ? 0 : "end" === pos ? 1 : 0 : (value - min) / (max - min);
+        return (inverse ? 1 - ratio : ratio) * ("vertical" === layout ? railHeight : railWidth);
+      }
+      calculateValueByPos(pos) {
+        const {
+            layout: layout,
+            railWidth: railWidth,
+            railHeight: railHeight,
+            min: min,
+            max: max,
+            inverse: inverse
+          } = this.attribute,
+          railLen = "vertical" === layout ? railHeight : railWidth;
+        return min + (max - min) * (inverse ? 1 - pos / railLen : pos / railLen);
+      }
+      setValue(value) {
+        const {
           min: min,
           max: max
         } = this.attribute;
@@ -29339,14 +29617,8 @@
           {
             startHandler: startHandler,
             endHandler: endHandler
-          } = this._getHandlers(),
-          railLen = "vertical" === layout ? railHeight : railWidth,
-          startPos = (startValue - min) / (max - min) * railLen;
-        if (startHandler && this._updateHandler(startHandler, startPos, startValue), endHandler) {
-          const endPos = (endValue - min) / (max - min) * railLen;
-          this._updateHandler(endHandler, endPos, endValue);
-        }
-        this._updateTrack();
+          } = this._getHandlers();
+        startHandler && this._updateHandler(startHandler, this.calculatePosByValue(startValue), startValue), endHandler && this._updateHandler(endHandler, this.calculatePosByValue(endValue), endValue), this._updateTrack();
       }
       render() {
         var _a, _b;
@@ -29449,30 +29721,29 @@
         isNil$3(value) && (value = [min, max]);
         const handlerTextVisible = handlerText && handlerText.visible,
           isHorizontal = this._isHorizontal,
-          railLen = isHorizontal ? railWidth : railHeight,
           [startValue, endValue] = convertValueToRange(value),
-          handlerStart = max === min ? range ? 0 : railLen : (startValue - min) / (max - min) * railLen,
+          startPos = this.calculatePosByValue(startValue, range ? "start" : "end"),
           startHandler = this._renderHandler(Object.assign({
-            x: isHorizontal ? handlerStart : railWidth / 2,
-            y: isHorizontal ? railHeight / 2 : handlerStart,
+            x: isHorizontal ? startPos : railWidth / 2,
+            y: isHorizontal ? railHeight / 2 : startPos,
             size: handlerSize,
             strokeBoundsBuffer: 0,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           }, handlerStyle));
-        if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
+        if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, container.add(startHandler), this._currentValue.startPos = startPos, handlerTextVisible) {
           const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
           startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), this._startHandlerText = startHandlerText;
         }
         if (range) {
-          const handlerEnd = max === min ? railLen : (endValue - min) / (max - min) * railLen,
+          const endPos = this.calculatePosByValue(endValue, "end"),
             endHandler = this._renderHandler(Object.assign({
-              x: isHorizontal ? handlerEnd : railWidth / 2,
-              y: isHorizontal ? railHeight / 2 : handlerEnd,
+              x: isHorizontal ? endPos : railWidth / 2,
+              y: isHorizontal ? railHeight / 2 : endPos,
               size: handlerSize,
               strokeBoundsBuffer: 0,
               cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
             }, handlerStyle));
-          if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, container.add(endHandler), this._currentValue.endPos = handlerEnd, handlerTextVisible) {
+          if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, container.add(endHandler), this._currentValue.endPos = endPos, handlerTextVisible) {
             const endHandlerText = this._renderHandlerText(endValue, "end");
             endHandlerText.name = SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), this._endHandlerText = endHandlerText;
           }
@@ -29495,8 +29766,7 @@
           const clampValue = clampRange$1(value, min, max);
           startValue = clampValue[0], endValue = clampValue[1];
         } else startValue = min, endValue = clamp$3(value, min, max);
-        const isHorizontal = this._isHorizontal,
-          railLen = isHorizontal ? railWidth : railHeight;
+        const isHorizontal = this._isHorizontal;
         range || (startValue = min);
         const trackContainer = graphicCreator$1.group({
           x: 0,
@@ -29511,13 +29781,13 @@
         const draggableTrack = isObject$4(range) && !0 === range.draggableTrack;
         let cursor;
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
-        const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
-          startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
+        const startPos = this.calculatePosByValue(startValue, "start"),
+          endPos = this.calculatePosByValue(endValue, range ? "end" : "start"),
           track = graphicCreator$1.rect(Object.assign({
-            x: isHorizontal ? startPos : 0,
-            y: isHorizontal ? 0 : startPos,
-            width: isHorizontal ? trackWidth : railWidth,
-            height: isHorizontal ? railHeight : trackWidth,
+            x: isHorizontal ? Math.min(startPos, endPos) : 0,
+            y: isHorizontal ? 0 : Math.min(startPos, endPos),
+            width: isHorizontal ? Math.abs(endPos - startPos) : railWidth,
+            height: isHorizontal ? railHeight : Math.abs(endPos - startPos),
             cursor: cursor
           }, trackStyle));
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
@@ -29529,8 +29799,6 @@
         var _a, _b, _c;
         const {
             align: align,
-            min: min,
-            max: max,
             handlerSize = 14,
             handlerText = {},
             railHeight: railHeight,
@@ -29538,15 +29806,14 @@
             slidable: slidable
           } = this.attribute,
           isHorizontal = this._isHorizontal,
-          railLen = isHorizontal ? railWidth : railHeight,
-          handlerStart = max === min ? "start" === position ? 0 : railLen : (value - min) / (max - min) * railLen,
+          pos = this.calculatePosByValue(value, position),
           textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
           textStyle = {
             text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
             lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
-        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
+        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
         return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _renderTooltip() {
@@ -29587,7 +29854,12 @@
       _updateTooltip() {
         var _a, _b;
         if (!this._tooltipShape && !this._tooltipText || !this._tooltipState) return;
-        const coord = this._isHorizontal ? this._tooltipState.pos * this.attribute.railWidth : this._tooltipState.pos * this.attribute.railHeight,
+        const {
+            railWidth: railWidth,
+            railHeight: railHeight
+          } = this.attribute,
+          railLen = this._isHorizontal ? railWidth : railHeight,
+          coord = this._tooltipState.pos * railLen,
           coordKey = this._isHorizontal ? "x" : "y";
         this._tooltipShape && this._tooltipShape.setAttributes({
           visible: !0,
@@ -29617,7 +29889,12 @@
         this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
       }
       _updateTrack() {
-        const startHandler = this._startHandler,
+        const {
+            inverse: inverse,
+            railWidth: railWidth,
+            railHeight: railHeight
+          } = this.attribute,
+          startHandler = this._startHandler,
           endHandler = this._endHandler;
         if (this._isHorizontal) {
           const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x;
@@ -29627,7 +29904,10 @@
               x: Math.min(startHandlerPos, endHandlerPos),
               width: Math.abs(startHandlerPos - endHandlerPos)
             });
-          } else this._track.setAttributes({
+          } else inverse ? this._track.setAttributes({
+            x: startHandlerPos,
+            width: railWidth - startHandlerPos
+          }) : this._track.setAttributes({
             width: startHandlerPos
           });
         } else {
@@ -29638,7 +29918,10 @@
               y: Math.min(startHandlerPos, endHandlerPos),
               height: Math.abs(startHandlerPos - endHandlerPos)
             });
-          } else this._track.setAttributes({
+          } else inverse ? this._track.setAttributes({
+            y: startHandlerPos,
+            height: railHeight - startHandlerPos
+          }) : this._track.setAttributes({
             height: startHandlerPos
           });
         }
@@ -29798,6 +30081,7 @@
             handlerText: handlerText,
             showTooltip: showTooltip,
             tooltip: tooltip,
+            inverse: inverse,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
           domain = [],
@@ -29830,7 +30114,8 @@
           handlerText: handlerText,
           showTooltip: showTooltip,
           tooltip: tooltip,
-          disableTriggerEvent: disableTriggerEvent
+          disableTriggerEvent: disableTriggerEvent,
+          inverse: inverse
         });
         this._innerView.add(slider), this._slider = slider, slider.translateTo(0 - slider.AABBBounds.x1, (this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", DEFAULT_TITLE_SPACE) : 0) - slider.AABBBounds.y1), this._updateColor();
       }
@@ -29840,7 +30125,8 @@
       _getTrackColor() {
         const {
           colors: colors,
-          layout: layout
+          layout: layout,
+          inverse: inverse
         } = this.attribute;
         if (isEmpty(colors)) return;
         const count = colors.length;
@@ -29853,15 +30139,16 @@
             color: colors[i]
           });
         }
-        const isHorizontal = "horizontal" === layout;
-        return {
-          gradient: "linear",
-          stops: stops,
-          x0: 0,
-          y0: 0,
-          x1: isHorizontal ? 1 : 0,
-          y1: isHorizontal ? 0 : 1
-        };
+        const isHorizontal = "horizontal" === layout,
+          res = {
+            gradient: "linear",
+            stops: stops,
+            x0: 0,
+            y0: 0,
+            x1: isHorizontal ? 1 : 0,
+            y1: isHorizontal ? 0 : 1
+          };
+        return inverse && (isHorizontal ? (res.x0 = 1, res.x1 = 0) : (res.y0 = 1, res.y1 = 0)), res;
       }
       _updateColor() {
         const {
@@ -29983,7 +30270,8 @@
             showTooltip: showTooltip,
             tooltip: tooltip,
             sizeBackground: sizeBackground,
-            disableTriggerEvent: disableTriggerEvent
+            disableTriggerEvent: disableTriggerEvent,
+            inverse: inverse
           } = this.attribute,
           mainContainer = graphicCreator$1.group({
             x: 0,
@@ -30017,12 +30305,13 @@
           handlerText: handlerText,
           showTooltip: showTooltip,
           tooltip: tooltip,
-          disableTriggerEvent: disableTriggerEvent
+          disableTriggerEvent: disableTriggerEvent,
+          inverse: inverse
         });
         mainContainer.add(slider);
         let path,
           start = 0;
-        "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth},0L${railWidth + 12},${railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
+        "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${inverse ? 0 : railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${inverse ? 0 : railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth + 12},${inverse ? 0 : railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${inverse ? 0 : railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
         const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
@@ -32728,7 +33017,9 @@
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
-            this.component = new LineAxis(merge({}, axisStylrAttrs, attrs));
+            this.component = new LineAxis(merge({
+                disableTriggerEvent: this.table.options.disableInteraction
+            }, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
             this.component.originAxis = this;
         }
@@ -32904,89 +33195,6 @@
         }
     }
 
-    function diffCellAddress(col, row, oldCellIds, newCellIds, oldRowHeaderCellPositons, layout) {
-        const columnHeaderStart = layout.columnHeaderLevelCount;
-        const addCellPositions = [];
-        const removeCellPositions = [];
-        for (let i = 0; i < oldCellIds.length; i++) {
-            if (!newCellIds.includes(oldCellIds[i])) {
-                removeCellPositions.push(oldRowHeaderCellPositons[i]);
-            }
-        }
-        for (let i = 0; i < newCellIds.length; i++) {
-            if (!oldCellIds.includes(newCellIds[i])) {
-                const newCellAddr = { col, row: columnHeaderStart + i };
-                addCellPositions.push(newCellAddr);
-            }
-        }
-        let parentId = layout.getParentCellId(col, row);
-        let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
-        const updateCellPositions = [];
-        parentCellAddress && updateCellPositions.push(parentCellAddress);
-        while (parentId) {
-            parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
-            if (parentId) {
-                parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
-                updateCellPositions.push(parentCellAddress);
-            }
-        }
-        return {
-            addCellPositions,
-            removeCellPositions,
-            updateCellPositions
-        };
-    }
-    function calculateArrayDiff(originalArray, targetArray) {
-        const add = [];
-        const remove = [];
-        const originalMap = new Map();
-        for (let i = 0; i < originalArray.length; i++) {
-            const element = originalArray[i];
-            const key = JSON.stringify(element);
-            if (originalMap.has(key)) {
-                originalMap.get(key).push(i);
-            }
-            else {
-                originalMap.set(key, [i]);
-            }
-        }
-        for (let i = 0; i < targetArray.length; i++) {
-            const element = targetArray[i];
-            const key = JSON.stringify(element);
-            if (!originalMap.has(key)) {
-                add.push(i);
-            }
-            else {
-                const indices = originalMap.get(key);
-                indices.shift();
-                if (indices.length === 0) {
-                    originalMap.delete(key);
-                }
-            }
-        }
-        for (let i = 0; i < originalArray.length; i++) {
-            const element = originalArray[i];
-            if (!targetArray.some(item => isEqual(item, element))) {
-                remove.push(i);
-            }
-        }
-        return { add, remove };
-    }
-    function isEqual(arr1, arr2) {
-        if (arr1 === arr2) {
-            return true;
-        }
-        if (arr1.length !== arr2.length) {
-            return false;
-        }
-        for (let i = 0; i < arr1.length; i++) {
-            if (arr1[i] !== arr2[i]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
     class Aggregator {
         className = 'Aggregator';
         isRecord = true;
@@ -33810,7 +34018,7 @@
             const record = this.getOriginalRecord(this.currentIndexedData[index]);
             return record?.hierarchyState ?? null;
         }
-        toggleHierarchyState(index) {
+        toggleHierarchyState(index, bodyStartIndex, bodyEndIndex) {
             const oldIndexedData = this.currentIndexedData.slice(0);
             const indexed = this.getIndexKey(index);
             const state = this.getHierarchyState(index);
@@ -33841,8 +34049,21 @@
                 data.hierarchyState = HierarchyState.collapse;
             }
             this.updatePagerData();
-            const newDiff = calculateArrayDiff(oldIndexedData, this.currentIndexedData);
-            return newDiff;
+            const add = [];
+            const remove = [];
+            if (state === HierarchyState.collapse) {
+                const addLength = this.currentIndexedData.length - oldIndexedData.length;
+                for (let i = 0; i < addLength; i++) {
+                    add.push(index + i + 1);
+                }
+            }
+            else if (state === HierarchyState.expand) {
+                const removeLength = oldIndexedData.length - this.currentIndexedData.length;
+                for (let i = 0; i < removeLength; i++) {
+                    remove.push(index + i + 1);
+                }
+            }
+            return { add, remove };
         }
         pushChildrenNode(indexKey, hierarchyState, nodeData) {
             if (!hierarchyState || hierarchyState === HierarchyState.collapse || hierarchyState === HierarchyState.none) {
@@ -36640,6 +36861,9 @@
         const barPaddingLeft = Math.max(barPadding[3], Math.ceil(borderWidth[3] / 2));
         contentWidth -= barPaddingRight + barPaddingLeft;
         contentHeight -= barPaddingBottom + barPaddingTop;
+        if (row === table.rowCount - 1) {
+            contentHeight -= 1;
+        }
         const top = barPaddingTop;
         const left = barPaddingLeft;
         const right = contentWidth;
@@ -37267,7 +37491,7 @@
             this.numberType = CHART_NUMBER_TYPE;
             this.isShareChartSpec = isShareChartSpec;
             if (!params.chartInstance) {
-                const chartInstance = new params.ClassType(params.spec, {
+                const chartInstance = (this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -37277,8 +37501,9 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                });
+                })));
                 chartInstance.renderSync();
+                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -37296,34 +37521,53 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
+                    x1: 0,
+                    x2: x2 - x1,
+                    y1: 0,
+                    y2: y2 - y1
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
+                beforeRender: (chartStage) => {
+                    const stage = this.stage;
+                    const ctx = chartStage.window.getContext();
+                    const stageMatrix = stage.window.getViewBoxTransform();
+                    const viewBox = stage.window.getViewBox();
                     ctx.inuse = true;
                     ctx.clearMatrix();
+                    ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, true);
+                    ctx.translate(viewBox.x1, viewBox.y1);
                     ctx.setTransformForCurrent(true);
                     ctx.beginPath();
                     ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
                     ctx.clip();
+                    ctx.clearMatrix();
+                    if (!chartStage.needRender) {
+                        chartStage.pauseRender();
+                        table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds);
+                        table.scenegraph.updateNextFrame();
+                    }
                 },
                 afterRender(stage) {
                     const ctx = stage.window.getContext();
                     ctx.inuse = false;
+                    stage.needRender = false;
+                    chartStage.resumeRender();
                 }
-            });
+            }));
+            const chartStage = this.activeChartInstance.getStage();
+            const matrix = this.globalTransMatrix.clone();
+            const stageMatrix = this.stage.window.getViewBoxTransform();
+            matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+            chartStage.window.setViewBoxTransform &&
+                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) => {
@@ -37359,11 +37603,12 @@
             const cellGroup = this.parent;
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
+            const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
             return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+                x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
+                y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
             };
         }
     }
@@ -37394,6 +37639,10 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
+        bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
+        bodyBound.y2 = bodyBound.y2 + (table.options.viewBox?.y1 ?? 0);
         return bodyBound;
     }
 
@@ -37452,7 +37701,8 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
+            tableChartOption: table.options.chartOption
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -41785,7 +42035,7 @@
                 this.frozenShadowLine.setAttributes({
                     visible: true,
                     x: colX,
-                    height: this.table.tableNoFrameHeight
+                    height: this.table.getDrawRange().height
                 });
             }
         }
@@ -42208,48 +42458,65 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        axes?.forEach((axis, index) => {
-            if (axis.type === 'band') {
-                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
-            }
-            else {
-                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
-            }
-        });
         chartInstance.updateViewBox({
-            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
-            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
-            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
-            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+            x1: 0,
+            x2: viewBox.x2 - viewBox.x1,
+            y1: 0,
+            y2: viewBox.y2 - viewBox.y1
         }, false, false);
-        const table = chart.getRootNode().table;
-        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
-        if (typeof dataId === 'string') {
-            chartInstance.updateDataSync(dataId, data ?? []);
-        }
-        else {
-            const dataBatch = [];
-            for (const dataIdStr in dataId) {
-                const dataIdAndField = dataId[dataIdStr];
-                const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                dataBatch.push({
-                    id: dataIdStr,
-                    values: dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? [],
-                    fields: series?.data?.fields
-                });
-                if (!chartInstance.updateFullDataSync) {
-                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? []);
+        const chartStage = chartInstance.getStage();
+        const matrix = chart.globalTransMatrix.clone();
+        const stageMatrix = chart.stage.window.getViewBoxTransform();
+        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+        chartStage.window.setViewBoxTransform &&
+            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+        const { table } = chart.getRootNode();
+        let updateSpec = false;
+        if (table.options.specFormat) {
+            const formatResult = table.options.specFormat(chart.attribute.spec);
+            if (formatResult.needFormatSpec && formatResult.spec) {
+                const spec = formatResult.spec;
+                chartInstance.updateSpecSync(spec);
+                updateSpec = true;
+            }
+        }
+        if (!updateSpec) {
+            axes?.forEach((axis, index) => {
+                if (axis.type === 'band') {
+                    chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
+                }
+                else {
+                    chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
+                }
+            });
+            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
+            if (typeof dataId === 'string') {
+                chartInstance.updateDataSync(dataId, data ?? []);
+            }
+            else {
+                const dataBatch = [];
+                for (const dataIdStr in dataId) {
+                    const dataIdAndField = dataId[dataIdStr];
+                    const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                    dataBatch.push({
+                        id: dataIdStr,
+                        values: dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? [],
+                        fields: series?.data?.fields
+                    });
+                    if (!chartInstance.updateFullDataSync) {
+                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? []);
+                    }
                 }
+                chartInstance.updateFullDataSync?.(dataBatch);
             }
-            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -42311,7 +42578,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -42319,6 +42586,7 @@
             const { dataId, data, spec } = chart.attribute;
             chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
+            const { table } = chart.getRootNode();
             const { active, cacheCanvas, activeChartInstance } = chart;
             if (!active && cacheCanvas) {
                 if (isArray$3(cacheCanvas)) {
@@ -42332,6 +42600,27 @@
                 }
             }
             else if (activeChartInstance) {
+                if (table.options.specFormat) {
+                    const formatResult = table.options.specFormat(chart.attribute.spec);
+                    if (formatResult.needFormatSpec && formatResult.spec) {
+                        const spec = formatResult.spec;
+                        activeChartInstance.updateSpecSync(spec);
+                        return;
+                    }
+                }
+                const viewBox = chart.getViewBox();
+                activeChartInstance.updateViewBox({
+                    x1: 0,
+                    x2: viewBox.x2 - viewBox.x1,
+                    y1: 0,
+                    y2: viewBox.y2 - viewBox.y1
+                }, false, false);
+                const chartStage = activeChartInstance.getStage();
+                chartStage.needRender = true;
+                const matrix = chart.globalTransMatrix.clone();
+                const stageMatrix = chart.stage.window.getViewBoxTransform().clone();
+                stageMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+                chartStage.window.setViewBoxTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
                 if (typeof dataId === 'string') {
                     activeChartInstance.updateDataSync(dataId, data ?? []);
                 }
@@ -42361,13 +42650,13 @@
                 }
             }
             else {
-                if (chart.getRootNode().table.internalProps.renderChartAsync) {
+                if (table.internalProps.renderChartAsync) {
                     if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
                         chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
                         chartRenderQueueList.push(chart);
                     }
                     if (!IsHandlingChartQueue()) {
-                        startRenderChartQueue(chart.getRootNode().table);
+                        startRenderChartQueue(table);
                     }
                 }
                 else {
@@ -42376,31 +42665,7 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            const { context } = drawContext;
-            if (!context) {
-                return;
-            }
-            const { clip } = chart.attribute;
-            if (clip) {
-                context.save();
-            }
-            else {
-                context.highPerformanceSave();
-            }
-            context.transformFromMatrix(chart.transMatrix, true);
-            context.beginPath();
-            if (params.skipDraw) {
-                this.drawShape(chart, context, 0, 0, drawContext, params, () => false, () => false);
-            }
-            else {
-                this.drawShape(chart, context, 0, 0, drawContext);
-            }
-            if (clip) {
-                context.restore();
-            }
-            else {
-                context.highPerformanceRestore();
-            }
+            this._draw(chart, {}, false, drawContext, params);
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -46075,9 +46340,9 @@
         }
     }
     function removeRow(row, scene) {
-        removeCellGroup(row, scene);
         const proxy = scene.proxy;
         if (row >= proxy.rowStart && row <= proxy.rowEnd) {
+            removeCellGroup(row, scene);
             proxy.rowEnd--;
             proxy.currentRow--;
         }
@@ -46966,6 +47231,15 @@
             });
         }
     }
+    function clearCellChartCacheImage(col, row, scenegraph) {
+        const cellGroup = scenegraph.getCell(col, row);
+        cellGroup.children.forEach((node) => {
+            if (node.type === 'chart') {
+                node.cacheCanvas = null;
+                node.addUpdateBoundTag();
+            }
+        });
+    }
     function updateChartData(scenegraph) {
         const table = scenegraph.table;
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -47020,7 +47294,7 @@
                 }
                 newSelectedDataItemsInChart.push(selectedState);
             }
-            if (!isEqual$1(table._selectedDataItemsInChart, newSelectedDataItemsInChart)) {
+            if (!isEqual(table._selectedDataItemsInChart, newSelectedDataItemsInChart)) {
                 table._selectedDataItemsInChart = newSelectedDataItemsInChart;
                 table.internalProps.layoutMap.updateDataStateToChartInstance();
                 clearChartCacheImage(scenegraph);
@@ -47127,6 +47401,10 @@
         }
         updateCellRangeIcon(col, row, (icon) => icon.attribute.visibleTime === 'mouseenter_cell', (icon) => {
             icon.setAttribute('opacity', 0);
+            const iconBack = icon.parent.getChildByName('icon-back');
+            if (iconBack) {
+                iconBack.setAttribute('visible', false);
+            }
         }, scene);
         scene.updateNextFrame();
     }
@@ -47786,7 +48064,12 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (Env.mode === 'node') {
+            if (table.options.canvas && table.options.viewBox) {
+                vglobal.setEnv('browser');
+                width = table.options.viewBox.x2 - table.options.viewBox.x1;
+                height = table.options.viewBox.y2 - table.options.viewBox.y1;
+            }
+            else if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -47804,9 +48087,15 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                afterRender: () => {
+                beforeRender: (stage) => {
+                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
+                },
+                afterRender: (stage) => {
+                    this.table.options.afterRender && this.table.options.afterRender(stage);
                     this.table.fireListeners('after_render', null);
-                }
+                },
+                canvasControled: !table.options.canvas,
+                viewBox: table.options.viewBox
             });
             this.stage.defaultLayer.setTheme({
                 group: {
@@ -48410,17 +48699,17 @@
                 this.cornerHeaderGroup.setDeltaHeight(detaY);
                 this.rowHeaderGroup.setDeltaY(detaY);
                 this.bodyGroup.setDeltaY(detaY);
-                this.rightFrozenGroup.setDeltaY(detaY);
+                this.table.rightFrozenColCount && this.rightFrozenGroup.setDeltaY(detaY);
             }
             else if (row >= this.table.rowCount - this.table.bottomFrozenRowCount) {
                 this.leftBottomCornerGroup.setDeltaHeight(detaY);
                 this.bottomFrozenGroup.setDeltaHeight(detaY);
-                this.rightBottomCornerGroup.setDeltaHeight(detaY);
+                this.table.rightFrozenColCount && this.rightBottomCornerGroup.setDeltaHeight(detaY);
             }
             else {
                 this.rowHeaderGroup.setDeltaHeight(detaY);
                 this.bodyGroup.setDeltaHeight(detaY);
-                this.rightFrozenGroup.setDeltaHeight(detaY);
+                this.table.rightFrozenColCount && this.rightFrozenGroup.setDeltaHeight(detaY);
             }
         }
         updateContainerHeight(row, detaY) {
@@ -48443,7 +48732,8 @@
                 return;
             }
             if ((row >= this.proxy.rowStart && row <= this.proxy.rowEnd) ||
-                (row >= this.table.rowCount - this.table.bottomFrozenRowCount && row <= this.table.rowCount - 1)) {
+                (row >= this.table.rowCount - this.table.bottomFrozenRowCount && row <= this.table.rowCount - 1) ||
+                row < this.table.frozenRowCount) {
                 this.updateRowHeight(row, height - oldHeight);
             }
             this.table._clearRowRangeHeightsMap(row);
@@ -49250,7 +49540,7 @@
         return table._getLayoutCellId(col, row) === table._getLayoutCellId(range1Col, range1Row);
     }
 
-    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll) {
+    function updateSelectPosition(state, col, row, isShift, isCtrl, isSelectAll, isSelectMoving = false) {
         const { table, interactionState } = state;
         const { scenegraph } = table;
         const { highlightScope, disableHeader, cellPos } = state.select;
@@ -49258,7 +49548,7 @@
             col = -1;
             row = -1;
         }
-        if (col !== -1 && row !== -1) {
+        if (col !== -1 && row !== -1 && !isSelectMoving) {
             if (interactionState === InteractionState.grabing && state.select.ranges.length > 0) {
                 const currentRange = state.select.ranges[state.select.ranges.length - 1];
                 if (col > currentRange.start.col && col > currentRange.end.col) {
@@ -49294,7 +49584,9 @@
             state.select.ranges = [];
             scenegraph.deleteAllSelectBorder();
         }
-        else if (interactionState === InteractionState.default && !table.stateManager.isResizeCol()) {
+        else if (interactionState === InteractionState.default &&
+            !table.eventManager.isDraging &&
+            !table.stateManager.isResizeCol()) {
             const currentRange = state.select.ranges[state.select.ranges.length - 1];
             if (isShift && currentRange) {
                 if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) {
@@ -49367,7 +49659,8 @@
                     scenegraph.updateCellSelectBorder(currentRange.start.col, currentRange.start.row, currentRange.end.col, currentRange.end.row, extendSelectRange);
             }
         }
-        else if (interactionState === InteractionState.grabing && !table.stateManager.isResizeCol()) {
+        else if ((interactionState === InteractionState.grabing || table.eventManager.isDraging) &&
+            !table.stateManager.isResizeCol()) {
             let extendSelectRange = true;
             if (cellPos.col === -1) {
                 cellPos.col = col;
@@ -49697,7 +49990,7 @@
         const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
         if (cellLocation === 'columnHeader') {
             backX = state.columnMove.x;
-            if (state.table.isFrozenColumn(col)) {
+            if (state.table.isLeftFrozenColumn(col)) {
                 lineX =
                     state.columnMove.colTarget >= state.columnMove.colSource
                         ? state.table.getColsWidth(0, state.columnMove.colTarget)
@@ -49785,13 +50078,13 @@
                     state.table.scenegraph.updateHeaderPosition(0, -1, rowMin, rowMax, moveContext.moveType);
                 }
                 if (state.table.internalProps.frozenColDragHeaderMode === 'adjustFrozenCount' && state.table.isListTable()) {
-                    if (state.table.isFrozenColumn(state.columnMove.colTarget) &&
-                        !state.table.isFrozenColumn(state.columnMove.colSource)) {
+                    if (state.table.isLeftFrozenColumn(state.columnMove.colTarget) &&
+                        !state.table.isLeftFrozenColumn(state.columnMove.colSource)) {
                         state.table.frozenColCount +=
                             sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1;
                     }
-                    else if (state.table.isFrozenColumn(state.columnMove.colSource) &&
-                        !state.table.isFrozenColumn(state.columnMove.colTarget)) {
+                    else if (state.table.isLeftFrozenColumn(state.columnMove.colSource) &&
+                        !state.table.isLeftFrozenColumn(state.columnMove.colTarget)) {
                         state.table.frozenColCount -=
                             sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1;
                     }
@@ -50281,11 +50574,11 @@
         updateHoverPos(col, row) {
             updateHoverPosition(this, col, row);
         }
-        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false) {
+        updateSelectPos(col, row, isShift = false, isCtrl = false, isSelectAll = false, isSelectMoving = false) {
             if (row !== -1 && row !== -1) {
                 this.select.selecting = true;
             }
-            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll);
+            updateSelectPosition(this, col, row, isShift, isCtrl, isSelectAll, isSelectMoving);
         }
         checkCellRangeInSelect(cellPosStart, cellPosEnd) {
             return checkMultiCellInSelect(cellPosStart, cellPosEnd, this.select.ranges, this.select.highlightScope);
@@ -50495,6 +50788,9 @@
             const totalHeight = this.table.getAllRowsHeight();
             const oldVerticalBarPos = this.scroll.verticalBarPos;
             this.scroll.verticalBarPos = Math.ceil(yRatio * (totalHeight - this.table.scenegraph.height));
+            if (!isValid$3(this.scroll.verticalBarPos) || isNaN(this.scroll.verticalBarPos)) {
+                this.scroll.verticalBarPos = 0;
+            }
             this.table.scenegraph.setY(-this.scroll.verticalBarPos, yRatio === 1);
             this.scroll.verticalBarPos -= this.table.scenegraph.proxy.deltaY;
             this.table.scenegraph.proxy.deltaY = 0;
@@ -50517,6 +50813,9 @@
             const totalWidth = this.table.getAllColsWidth();
             const oldHorizontalBarPos = this.scroll.horizontalBarPos;
             this.scroll.horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width));
+            if (!isValid$3(this.scroll.horizontalBarPos) || isNaN(this.scroll.horizontalBarPos)) {
+                this.scroll.horizontalBarPos = 0;
+            }
             this.table.scenegraph.setX(-this.scroll.horizontalBarPos, xRatio === 1);
             this.scroll.horizontalBarPos -= this.table.scenegraph.proxy.deltaX;
             this.table.scenegraph.proxy.deltaX = 0;
@@ -50544,6 +50843,9 @@
             }
             const oldVerticalBarPos = this.scroll.verticalBarPos;
             this.scroll.verticalBarPos = top;
+            if (!isValid$3(this.scroll.verticalBarPos) || isNaN(this.scroll.verticalBarPos)) {
+                this.scroll.verticalBarPos = 0;
+            }
             this.table.scenegraph.setY(-top);
             const yRatio = top / (totalHeight - this.table.scenegraph.height);
             this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio);
@@ -50571,6 +50873,9 @@
             }
             const oldHorizontalBarPos = this.scroll.horizontalBarPos;
             this.scroll.horizontalBarPos = left;
+            if (!isValid$3(this.scroll.horizontalBarPos) || isNaN(this.scroll.horizontalBarPos)) {
+                this.scroll.horizontalBarPos = 0;
+            }
             this.table.scenegraph.setX(-left);
             const xRatio = left / (totalWidth - this.table.scenegraph.width);
             this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
@@ -51158,8 +51463,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.x,
-                y: e.y
+                x: e.viewport.x,
+                y: e.viewport.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -51196,9 +51501,6 @@
                 eventManager.touchSetTimeout = undefined;
             }
             const eventArgsSet = getCellEventArgsSet(e);
-            if (stateManager.interactionState === InteractionState.scrolling) {
-                return;
-            }
             if (stateManager.interactionState === InteractionState.grabing) {
                 if (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1) {
                     if (stateManager.isResizeCol()) ;
@@ -51214,6 +51516,9 @@
                 }
                 return;
             }
+            else if (table.eventManager.isDraging) {
+                eventManager.dealTableSelect(eventArgsSet, true);
+            }
             if (stateManager.isResizeCol() || eventManager.checkColumnResize(eventArgsSet)) {
                 if (table.stateManager.select && eventManager.checkCellFillhandle(eventArgsSet)) {
                     stateManager.updateCursor('crosshair');
@@ -51870,7 +52175,7 @@
         });
     }
 
-    function handleWhell(event, state) {
+    function handleWhell(event, state, isWheelEvent = true) {
         let { deltaX, deltaY } = event;
         if (event.shiftKey && event.deltaY) {
             deltaX = deltaY;
@@ -51890,7 +52195,7 @@
             state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY);
             state.showVerticalScrollBar(true);
         }
-        state.resetInteractionState();
+        isWheelEvent && state.resetInteractionState();
         if (event.cancelable &&
             (state.table.internalProps.overscrollBehavior === 'none' ||
                 (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
@@ -51935,6 +52240,64 @@
         const totalWidth = state.table.getAllColsWidth() - state.table.scenegraph.width;
         return totalWidth !== 0 && deltaX >= 0 && Math.abs(state.scroll.horizontalBarPos - totalWidth) < 1;
     }
+    class InertiaScroll {
+        friction;
+        lastTime;
+        speedX;
+        speedY;
+        stateManager;
+        runingId;
+        scrollHandle;
+        constructor(stateManager) {
+            this.stateManager = stateManager;
+        }
+        setScrollHandle(scrollHandle) {
+            this.scrollHandle = scrollHandle;
+        }
+        startInertia(speedX, speedY, friction) {
+            this.lastTime = Date.now();
+            this.speedX = speedX;
+            this.speedY = speedY;
+            this.friction = friction;
+            if (!this.runingId) {
+                this.runingId = requestAnimationFrame(this.inertia.bind(this));
+            }
+        }
+        inertia() {
+            const now = Date.now();
+            const dffTime = now - this.lastTime;
+            let stopped = true;
+            const f = Math.pow(this.friction, dffTime / 16);
+            const newSpeedX = f * this.speedX;
+            const newSpeedY = f * this.speedY;
+            let dx = 0;
+            let dy = 0;
+            if (Math.abs(newSpeedX) > 0.05) {
+                stopped = false;
+                dx = ((this.speedX + newSpeedX) / 2) * dffTime;
+            }
+            if (Math.abs(newSpeedY) > 0.05) {
+                stopped = false;
+                dy = ((this.speedY + newSpeedY) / 2) * dffTime;
+            }
+            this.scrollHandle?.(dx, dy);
+            if (stopped) {
+                this.runingId = null;
+                return;
+            }
+            this.lastTime = now;
+            this.speedX = newSpeedX;
+            this.speedY = newSpeedY;
+            this.runingId = requestAnimationFrame(this.inertia.bind(this));
+        }
+        endInertia() {
+            cancelAnimationFrame(this.runingId);
+            this.runingId = null;
+        }
+        isInertiaScrolling() {
+            return !!this.runingId;
+        }
+    }
 
     function bindContainerDomListener(eventManager) {
         const table = eventManager.table;
@@ -52057,51 +52420,61 @@
                 const data = table.getCopyValue();
                 if (isValid$3(data)) {
                     e.preventDefault();
-                    const setDataToHTML = (data) => {
-                        const result = ['<table>'];
-                        const META_HEAD = [
-                            '<meta name="author" content="Visactor"/>',
-                            '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'
-                        ].join('');
-                        const rows = data.split('\r\n');
-                        rows.forEach(function (rowCells, rowIndex) {
-                            const cells = rowCells.split('\t');
-                            const rowValues = [];
-                            if (rowIndex === 0) {
-                                result.push('<tbody>');
-                            }
-                            cells.forEach(function (cell, cellIndex) {
-                                const parsedCellData = !cell
-                                    ? ''
-                                    : cell
-                                        .toString()
-                                        .replace(/&/g, '&amp;')
-                                        .replace(/'/g, '&#39;')
-                                        .replace(/</g, '&lt;')
-                                        .replace(/>/g, '&gt;')
-                                        .replace(/\n/g, '<br>')
-                                        .replace(/(<br(\s*|\/)>(\r\n|\n)?|\r\n|\n)/g, '<br>\r\n')
-                                        .replace(/\x20{2,}/gi, (substring) => {
-                                        return `<span style="mso-spacerun: yes">${'&nbsp;'.repeat(substring.length - 1)} </span>`;
-                                    })
-                                        .replace(/\t/gi, '&#9;');
-                                rowValues.push(`<td>${parsedCellData}</td>`);
+                    if (navigator.clipboard?.write) {
+                        const setDataToHTML = (data) => {
+                            const result = ['<table>'];
+                            const META_HEAD = [
+                                '<meta name="author" content="Visactor"/>',
+                                '<style type="text/css">td{white-space:normal}br{mso-data-placement:same-cell}</style>'
+                            ].join('');
+                            const rows = data.split('\r\n');
+                            rows.forEach(function (rowCells, rowIndex) {
+                                const cells = rowCells.split('\t');
+                                const rowValues = [];
+                                if (rowIndex === 0) {
+                                    result.push('<tbody>');
+                                }
+                                cells.forEach(function (cell, cellIndex) {
+                                    const parsedCellData = !cell
+                                        ? ''
+                                        : cell
+                                            .toString()
+                                            .replace(/&/g, '&amp;')
+                                            .replace(/'/g, '&#39;')
+                                            .replace(/</g, '&lt;')
+                                            .replace(/>/g, '&gt;')
+                                            .replace(/\n/g, '<br>')
+                                            .replace(/(<br(\s*|\/)>(\r\n|\n)?|\r\n|\n)/g, '<br>\r\n')
+                                            .replace(/\x20{2,}/gi, (substring) => {
+                                            return `<span style="mso-spacerun: yes">${'&nbsp;'.repeat(substring.length - 1)} </span>`;
+                                        })
+                                            .replace(/\t/gi, '&#9;');
+                                    rowValues.push(`<td>${parsedCellData}</td>`);
+                                });
+                                result.push('<tr>', ...rowValues, '</tr>');
+                                if (rowIndex === rowCells.length - 1) {
+                                    result.push('</tbody>');
+                                }
                             });
-                            result.push('<tr>', ...rowValues, '</tr>');
-                            if (rowIndex === rowCells.length - 1) {
-                                result.push('</tbody>');
-                            }
-                        });
-                        result.push('</table>');
-                        return [META_HEAD, result.join('')].join('');
-                    };
-                    const dataHTML = setDataToHTML(data);
-                    navigator.clipboard.write([
-                        new ClipboardItem({
-                            'text/html': new Blob([dataHTML], { type: 'text/html' }),
-                            'text/plain': new Blob([data], { type: 'text/plain' })
-                        })
-                    ]);
+                            result.push('</table>');
+                            return [META_HEAD, result.join('')].join('');
+                        };
+                        const dataHTML = setDataToHTML(data);
+                        navigator.clipboard.write([
+                            new ClipboardItem({
+                                'text/html': new Blob([dataHTML], { type: 'text/html' }),
+                                'text/plain': new Blob([data], { type: 'text/plain' })
+                            })
+                        ]);
+                    }
+                    else {
+                        if (browser.IE) {
+                            window.clipboardData.setData('Text', data);
+                        }
+                        else {
+                            e.clipboardData.setData('text/plain', data);
+                        }
+                    }
                     table.fireListeners(TABLE_EVENT_TYPE.COPY_DATA, {
                         cellRange: table.stateManager.select.ranges,
                         copyData: data
@@ -52115,17 +52488,40 @@
                     return;
                 }
                 if (table.stateManager.select.ranges?.length > 0) {
-                    navigator.clipboard.read().then(clipboardItems => {
-                        for (const item of clipboardItems) {
-                            if (item.types.includes('text/html')) {
-                                pasteHtmlToTable(item);
-                            }
-                            else if (item.types.length === 1 && item.types[0] === 'text/plain') {
-                                pasteTextToTable(item);
+                    if (navigator.clipboard?.read) {
+                        navigator.clipboard.read().then(clipboardItems => {
+                            for (const item of clipboardItems) {
+                                if (item.types.includes('text/html')) {
+                                    pasteHtmlToTable(item);
+                                }
+                                else if (item.types.length === 1 && item.types[0] === 'text/plain') {
+                                    pasteTextToTable(item);
+                                }
+                                else ;
                             }
-                            else ;
-                        }
-                    });
+                        });
+                    }
+                    else {
+                        const ranges = table.stateManager.select.ranges;
+                        const col = Math.min(ranges[0].start.col, ranges[0].end.col);
+                        const row = Math.min(ranges[0].start.row, ranges[0].end.row);
+                        const clipboardData = e.clipboardData || window.Clipboard;
+                        const pastedData = clipboardData.getData('text');
+                        const rows = pastedData.split('\n');
+                        const values = [];
+                        rows.forEach(function (rowCells, rowIndex) {
+                            const cells = rowCells.split('\t');
+                            const rowValues = [];
+                            values.push(rowValues);
+                            cells.forEach(function (cell, cellIndex) {
+                                if (cellIndex === cells.length - 1) {
+                                    cell = cell.trim();
+                                }
+                                rowValues.push(cell);
+                            });
+                        });
+                        table.changeCellValues(col, row, values);
+                    }
                 }
             }
         });
@@ -52134,12 +52530,14 @@
                 e.preventDefault();
             }
         });
-        handler.on(table.getContainer(), 'resize', e => {
-            if (e.width === 0 && e.height === 0) {
-                return;
-            }
-            table.resize();
-        });
+        if (!table.options.canvas) {
+            handler.on(table.getContainer(), 'resize', e => {
+                if (e.width === 0 && e.height === 0) {
+                    return;
+                }
+                table.resize();
+            });
+        }
         function pasteHtmlToTable(item) {
             const ranges = table.stateManager.select.ranges;
             const selectRangeLength = ranges.length;
@@ -52286,6 +52684,7 @@
             table.eventManager.LastBodyPointerXY = null;
             table.eventManager.isDown = false;
             table.eventManager.isDraging = false;
+            table.eventManager.inertiaScroll.endInertia();
         };
         eventManager.globalEventListeners.push({
             name: 'pointerup',
@@ -52302,9 +52701,6 @@
                 }
             }
             const { x, y } = table._getMouseAbstractPoint(e, false);
-            if (stateManager.interactionState === InteractionState.scrolling) {
-                return;
-            }
             if (stateManager.interactionState === InteractionState.grabing) {
                 if (stateManager.isResizeCol()) {
                     eventManager.dealColumnResize(x, y);
@@ -52316,6 +52712,95 @@
                     }
                 }
             }
+            const isSelecting = table.stateManager.isSelecting();
+            if (eventManager.isDraging && isSelecting) {
+                const drawRange = table.getDrawRange();
+                const topFrozenRowHeight = table.getFrozenRowsHeight();
+                const bottomFrozenRowHeight = table.getBottomFrozenRowsHeight();
+                const leftFrozenColsWidth = table.getFrozenColsWidth();
+                const rightFrozenColsWidth = table.getRightFrozenColsWidth();
+                const startCell = table.stateManager.select.ranges[table.stateManager.select.ranges.length - 1].start;
+                const endCell = table.stateManager.select.ranges[table.stateManager.select.ranges.length - 1].end;
+                const canScrollY = table.isFrozenRow(startCell.row) === false || table.isFrozenRow(endCell.row) === false;
+                const canScrollX = table.isFrozenColumn(startCell.col) === false || table.isFrozenColumn(endCell.col) === false;
+                if (((y > drawRange.bottom - bottomFrozenRowHeight || y < drawRange.top + topFrozenRowHeight) && canScrollY) ||
+                    ((x > drawRange.right - rightFrozenColsWidth || x < drawRange.left + leftFrozenColsWidth) && canScrollX)) {
+                    table.eventManager.scrollXSpeed = 0;
+                    table.eventManager.scrollYSpeed = 0;
+                    let bottom = false;
+                    let top = false;
+                    let right = false;
+                    let left = false;
+                    if (y > drawRange.bottom - bottomFrozenRowHeight &&
+                        canScrollY &&
+                        table.scrollTop + table.tableNoFrameWidth < table.getAllRowsHeight()) {
+                        bottom = true;
+                        table.eventManager.scrollYSpeed = -(y - drawRange.bottom + bottomFrozenRowHeight) / 50;
+                    }
+                    else if (y < drawRange.top + topFrozenRowHeight && canScrollY && table.scrollTop > 0) {
+                        top = true;
+                        table.eventManager.scrollYSpeed = -(y - drawRange.top - topFrozenRowHeight) / 50;
+                    }
+                    if (x > drawRange.right - rightFrozenColsWidth &&
+                        canScrollX &&
+                        table.scrollLeft + table.tableNoFrameWidth < table.getAllColsWidth()) {
+                        right = true;
+                        table.eventManager.scrollXSpeed = -(x - drawRange.right + rightFrozenColsWidth) / 50;
+                    }
+                    else if (x < drawRange.left + leftFrozenColsWidth && canScrollX && table.scrollLeft > 0) {
+                        left = true;
+                        table.eventManager.scrollXSpeed = -(x - drawRange.left - leftFrozenColsWidth) / 50;
+                    }
+                    table.eventManager.inertiaScroll.startInertia(table.eventManager.scrollXSpeed, table.eventManager.scrollYSpeed, 1);
+                    table.eventManager.inertiaScroll.setScrollHandle((dx, dy) => {
+                        handleWhell({ deltaX: -dx, deltaY: -dy }, table.stateManager, false);
+                        let selectX;
+                        let selectY;
+                        if (bottom) {
+                            selectY = table.scrollTop + drawRange.height - bottomFrozenRowHeight - 20;
+                        }
+                        else if (top) {
+                            selectY = table.scrollTop + topFrozenRowHeight + 20;
+                        }
+                        if (right) {
+                            selectX = table.scrollLeft + drawRange.width - rightFrozenColsWidth - 20;
+                        }
+                        else if (left) {
+                            selectX = table.scrollLeft + leftFrozenColsWidth + 20;
+                        }
+                        let considerFrozenY = false;
+                        let considerFrozenX = false;
+                        if (!right && !left) {
+                            if ((x > table.tableNoFrameWidth - table.getRightFrozenColsWidth() && x < table.tableNoFrameWidth) ||
+                                (x > 0 && x < table.getFrozenColsWidth())) {
+                                selectX = x;
+                                considerFrozenX = true;
+                            }
+                            else {
+                                selectX = table.scrollLeft + x;
+                            }
+                        }
+                        if (!bottom && !top) {
+                            if ((y > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() && y < table.tableNoFrameHeight) ||
+                                (y > 0 && y < table.getFrozenRowsHeight())) {
+                                selectY = y;
+                                considerFrozenY = true;
+                            }
+                            else {
+                                selectY = table.scrollTop + y;
+                            }
+                        }
+                        table.stateManager.updateInteractionState(InteractionState.grabing);
+                        table.stateManager.updateSelectPos(table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX).col, table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY).row, false, false, false, true);
+                    });
+                }
+                else if (table.eventManager.inertiaScroll.isInertiaScrolling()) {
+                    table.eventManager.inertiaScroll.endInertia();
+                }
+                else {
+                    table.eventManager.scrollYSpeed = 0;
+                }
+            }
         };
         eventManager.globalEventListeners.push({
             name: 'pointermove',
@@ -52393,7 +52878,10 @@
                 const lastPoint = eventManager.touchMovePoints[eventManager.touchMovePoints?.length - 1];
                 const vX = (lastPoint.x - firstPoint.x) / (lastPoint.timestamp - firstPoint.timestamp);
                 const vY = (lastPoint.y - firstPoint.y) / (lastPoint.timestamp - firstPoint.timestamp);
-                startInertia(vX, vY, stateManager);
+                eventManager.inertiaScroll.startInertia(vX, vY, 0.95);
+                table.eventManager.inertiaScroll.setScrollHandle((dx, dy) => {
+                    handleWhell({ deltaX: -dx, deltaY: -dy }, table.stateManager);
+                });
             }
             eventManager.isTouchdown = false;
             eventManager.touchMovePoints = [];
@@ -52423,37 +52911,6 @@
     function isTouchEvent$1(e) {
         return !!e.changedTouches;
     }
-    function startInertia(vX, vY, stateManager) {
-        let time = Date.now();
-        const friction = 0.95;
-        const inertia = () => {
-            const now = Date.now();
-            const dffTime = now - time;
-            let stopped = true;
-            const f = Math.pow(friction, dffTime / 16);
-            const newVX = f * vX;
-            const newVY = f * vY;
-            let dx = 0;
-            let dy = 0;
-            if (Math.abs(newVX) > 0.05) {
-                stopped = false;
-                dx = ((vX + newVX) / 2) * dffTime;
-            }
-            if (Math.abs(newVY) > 0.05) {
-                stopped = false;
-                dy = ((vY + newVY) / 2) * dffTime;
-            }
-            handleWhell({ deltaX: -dx, deltaY: -dy }, stateManager);
-            if (stopped) {
-                return;
-            }
-            time = now;
-            vX = newVX;
-            vY = newVY;
-            requestAnimationFrame(inertia);
-        };
-        requestAnimationFrame(inertia);
-    }
 
     function bindAxisClickEvent(table) {
         if (!table.isPivotChart()) {
@@ -52593,10 +53050,14 @@
         LastBodyPointerXY;
         isDown = false;
         isDraging = false;
+        scrollYSpeed;
+        scrollXSpeed;
         globalEventListeners = [];
+        inertiaScroll;
         constructor(table) {
             this.table = table;
-            if (Env.mode === 'node') {
+            this.inertiaScroll = new InertiaScroll(table.stateManager);
+            if (Env.mode === 'node' || table.options.disableInteraction) {
                 return;
             }
             this.bindOuterEvent();
@@ -52745,7 +53206,7 @@
                     this.table.stateManager.updateSelectPos(-1, -1);
                     return false;
                 }
-                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
                 return true;
             }
             return false;
@@ -52793,10 +53254,10 @@
                             updateCol = eventArgs.col;
                         }
                     }
-                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
                 }
                 else {
-                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, false, isSelectMoving);
                 }
                 return true;
             }
@@ -55063,6 +55524,7 @@
     }
 
     class FocusInput extends EventTarget {
+        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -55082,6 +55544,7 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
+            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -55101,6 +55564,7 @@
             return this._input;
         }
         release() {
+            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -55234,7 +55698,8 @@
                 height: this.table.tableNoFrameHeight
             });
             const legend = new DiscreteLegend(merge({}, attrs, {
-                defaultSelected: this.selectedData
+                defaultSelected: this.selectedData,
+                disableTriggerEvent: this.table.options.disableInteraction
             }));
             legend.name = 'legend';
             this.legendComponent = legend;
@@ -56133,7 +56598,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.23.1-alpha.1";
+        version = "0.23.1-alpha.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -56146,13 +56611,12 @@
         columnWidthComputeMode;
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node') {
+            if (!container && options.mode !== 'node' && !options.canvas) {
                 throw new Error("vtable's container is undefined");
             }
             const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth } = options;
             this.container = container;
             this.options = options;
-            this.options.container = container;
             this._widthMode = widthMode;
             this._heightMode = heightMode;
             this._autoFillWidth = autoFillWidth;
@@ -56183,7 +56647,14 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (Env.mode !== 'node') {
+            if (this.options.canvas) {
+                internalProps.element = this.options.canvas.parentElement;
+                internalProps.element.style.position = 'relative';
+                internalProps.focusControl = new FocusInput(this, internalProps.element);
+                internalProps.canvas = this.options.canvas;
+                internalProps.context = internalProps.canvas.getContext('2d');
+            }
+            else if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -56524,7 +56995,21 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            if (Env.mode === 'browser') {
+            this.tableX = 0;
+            this.tableY = 0;
+            if (this.options.canvas && this.options.viewBox) {
+                widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
+                heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
+                if (this?.scenegraph?.stage) {
+                    if (this.options.viewBox) {
+                        this.scenegraph.stage.setViewBox(this.options.viewBox, false);
+                    }
+                    else {
+                        this.scenegraph.stage.resize(widthP, heightP);
+                    }
+                }
+            }
+            else if (Env.mode === 'browser') {
                 const element = this.getElement();
                 const width1 = element.parentElement?.offsetWidth ?? 1 - 1;
                 const height1 = element.parentElement?.offsetHeight ?? 1 - 1;
@@ -56570,6 +57055,22 @@
                 }
             }
         }
+        updateViewBox(newViewBox) {
+            const oldWidth = this.options?.viewBox.x2 ?? 0 - this.options?.viewBox.x1 ?? 0;
+            const oldHeight = this.options?.viewBox.y2 ?? 0 - this.options?.viewBox.y1 ?? 0;
+            const newWidth = newViewBox.x2 - newViewBox.x1;
+            const newHeight = newViewBox.y2 - newViewBox.y1;
+            this.options.viewBox = newViewBox;
+            if (oldWidth !== newWidth || oldHeight !== newHeight) {
+                this.resize();
+            }
+            else {
+                this.scenegraph.stage.setViewBox(this.options.viewBox, true);
+            }
+        }
+        setViewBoxTransform(a, b, c, d, e, f) {
+            this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
+        }
         get rowHierarchyType() {
             return 'grid';
         }
@@ -56948,8 +57449,8 @@
             return this.getCellsRectWidth(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row);
         }
         isFrozenCell(col, row) {
-            const isFrozenRow = this.isFrozenRow(row) || this.isBottomFrozenRow(row);
-            const isFrozenCol = this.isFrozenColumn(col) || this.isRightFrozenColumn(col);
+            const isFrozenRow = this.isFrozenRow(row);
+            const isFrozenCol = this.isFrozenColumn(col);
             if (isFrozenRow || isFrozenCol) {
                 return {
                     row: isFrozenRow,
@@ -57062,6 +57563,8 @@
             const visibleRect = this.getVisibleRect();
             rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
             rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
+            rect.offsetLeft(this.options.viewBox?.x1 ?? 0);
+            rect.offsetTop(this.options.viewBox?.y1 ?? 0);
             return rect;
         }
         getVisibleRect() {
@@ -57215,8 +57718,9 @@
             }
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
+            internalProps.focusControl.release();
             const { parentElement } = internalProps.element;
-            if (parentElement) {
+            if (parentElement && !this.options.canvas) {
                 parentElement.removeChild(internalProps.element);
             }
             this.isReleased = true;
@@ -57397,8 +57901,8 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - (this.options.viewBox?.x1 ?? 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
             return { x, y, inTable };
         }
         getTheme() {
@@ -57496,6 +58000,46 @@
             }
             return findBefore(candRow, bottom);
         }
+        getTargetColAtConsiderRightFrozen(absoluteX, isConsider) {
+            if (absoluteX === 0) {
+                return { left: 0, col: 0, right: 0, width: 0 };
+            }
+            if (isConsider &&
+                absoluteX > this.tableNoFrameWidth - this.getRightFrozenColsWidth() &&
+                absoluteX < this.tableNoFrameWidth) {
+                for (let i = 0; i < this.rightFrozenColCount; i++) {
+                    if (absoluteX > this.tableNoFrameWidth - this.getColsWidth(this.colCount - i - 1, this.colCount - 1)) {
+                        return {
+                            col: this.colCount - i - 1,
+                            left: undefined,
+                            right: undefined,
+                            width: undefined
+                        };
+                    }
+                }
+            }
+            return this.getTargetColAt(absoluteX);
+        }
+        getTargetRowAtConsiderBottomFrozen(absoluteY, isConsider) {
+            if (absoluteY === 0) {
+                return { top: 0, row: 0, bottom: 0, height: 0 };
+            }
+            if (isConsider &&
+                absoluteY > this.tableNoFrameHeight - this.getBottomFrozenRowsHeight() &&
+                absoluteY < this.tableNoFrameHeight) {
+                for (let i = 0; i < this.rightFrozenColCount; i++) {
+                    if (absoluteY > this.tableNoFrameHeight - this.getRowsHeight(this.rowCount - i - 1, this.rowCount - 1)) {
+                        return {
+                            row: this.rowCount - i - 1,
+                            top: undefined,
+                            bottom: undefined,
+                            height: undefined
+                        };
+                    }
+                }
+            }
+            return this.getTargetRowAt(absoluteY);
+        }
         computeTargetRowByY(absoluteY) {
             let defaultRowHeight = this.internalProps.defaultRowHeight;
             if (this._rowRangeHeightsMap.get(`$0$${this.rowCount - 1}`)) {
@@ -57776,7 +58320,7 @@
             return this.internalProps.layoutMap?.isCornerHeader(col, row);
         }
         isFrozenColumn(col, row) {
-            return this.internalProps.layoutMap?.isFrozenColumn(col, row);
+            return this.isLeftFrozenColumn(col, row) || this.isRightFrozenColumn(col, row);
         }
         isLeftFrozenColumn(col, row) {
             return this.internalProps.layoutMap?.isFrozenColumn(col, row);
@@ -57785,7 +58329,7 @@
             return this.internalProps.layoutMap?.isRightFrozenColumn(col, row);
         }
         isFrozenRow(col, row) {
-            return this.internalProps.layoutMap?.isFrozenRow(col, row);
+            return this.isTopFrozenRow(col, row) || this.isBottomFrozenRow(col, row);
         }
         isTopFrozenRow(col, row) {
             return this.internalProps.layoutMap?.isFrozenRow(col, row);
@@ -58023,8 +58567,7 @@
         }
         _canDragHeaderPosition(col, row) {
             if (this.isHeader(col, row) && this.stateManager.isSelected(col, row)) {
-                if (this.internalProps.frozenColDragHeaderMode === 'disabled' &&
-                    (this.isFrozenColumn(col) || this.isRightFrozenColumn(col))) {
+                if (this.internalProps.frozenColDragHeaderMode === 'disabled' && this.isFrozenColumn(col)) {
                     return false;
                 }
                 const selectRange = this.stateManager.select.ranges[0];
@@ -60584,7 +61127,7 @@
                 return false;
             }
             if (this._table.internalProps.frozenColDragHeaderMode === 'disabled') {
-                if (this._table.isFrozenColumn(target.col) || this._table.isRightFrozenColumn(target.col)) {
+                if (this._table.isFrozenColumn(target.col)) {
                     return false;
                 }
             }
@@ -60805,7 +61348,7 @@
         }
         _createOrUpdateTitleComponent(attrs) {
             if (this._titleComponent) {
-                if (!isEqual$1(attrs, this._cacheAttrs)) {
+                if (!isEqual(attrs, this._cacheAttrs)) {
                     this._titleComponent.setAttributes(attrs);
                 }
             }
@@ -61583,7 +62126,7 @@
                 }
             }
             const index = this.getRecordShowIndexByCell(col, row);
-            const diffDataIndices = this.dataSource.toggleHierarchyState(index);
+            const diffDataIndices = this.dataSource.toggleHierarchyState(index, this.scenegraph.proxy.rowStart - this.columnHeaderLevelCount, Math.max(this.scenegraph.proxy.rowEnd - this.columnHeaderLevelCount, this.scenegraph.proxy.rowStart - this.columnHeaderLevelCount + this.scenegraph.proxy.rowLimit - 1));
             const diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices);
             this.refreshRowColCount();
             this.clearCellStyleCache();
@@ -62325,6 +62868,39 @@
         }
     }
 
+    function diffCellAddress(col, row, oldCellIds, newCellIds, oldRowHeaderCellPositons, layout) {
+        const columnHeaderStart = layout.columnHeaderLevelCount;
+        const addCellPositions = [];
+        const removeCellPositions = [];
+        for (let i = 0; i < oldCellIds.length; i++) {
+            if (!newCellIds.includes(oldCellIds[i])) {
+                removeCellPositions.push(oldRowHeaderCellPositons[i]);
+            }
+        }
+        for (let i = 0; i < newCellIds.length; i++) {
+            if (!oldCellIds.includes(newCellIds[i])) {
+                const newCellAddr = { col, row: columnHeaderStart + i };
+                addCellPositions.push(newCellAddr);
+            }
+        }
+        let parentId = layout.getParentCellId(col, row);
+        let parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+        const updateCellPositions = [];
+        parentCellAddress && updateCellPositions.push(parentCellAddress);
+        while (parentId) {
+            parentId = layout.getParentCellId(parentCellAddress.col, parentCellAddress.row);
+            if (parentId) {
+                parentCellAddress = layout.getRowHeaderCellAddressByCellId(parentId);
+                updateCellPositions.push(parentCellAddress);
+            }
+        }
+        return {
+            addCellPositions,
+            removeCellPositions,
+            updateCellPositions
+        };
+    }
+
     const defaultDimension = { startInTotal: 0, level: 0 };
     class PivotHeaderLayoutMap {
         sharedVar;
@@ -67602,6 +68178,14 @@
             updateChartData(this.scenegraph);
             this.render();
         }
+        clearChartCacheImage(col, row) {
+            if (isNumber$4(col) && isNumber$4(row)) {
+                clearCellChartCacheImage(col, row, this.scenegraph);
+            }
+            else {
+                clearChartCacheImage(this.scenegraph);
+            }
+        }
         getLegendSelected() {
             return this.internalProps.legends.legendComponent._getSelectedLegends().map((d) => d.label);
         }
@@ -68300,7 +68884,7 @@
     }
 
     registerForVrender();
-    const version = "0.23.1-alpha.1";
+    const version = "0.23.1-alpha.2";
     function getIcons() {
         return get$2();
     }