@visactor/vtable 0.23.1-alpha.2 → 0.23.1

package/dist/vtable.js

@@ -4161,8 +4161,7 @@
       backgroundFit: !0,
       blur: 0,
       cursor: null,
-      html: null,
-      react: null
+      html: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -4386,7 +4385,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.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
+      ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineHeight ? character.lineHeight : 1, ctx.strokeStyle = strokeStyle;
       let fontSize = character.fontSize || 16;
       switch (character.script) {
         case "super":
@@ -4814,37 +4813,28 @@
       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();
+        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;
       }
       get style() {
-        var _a;
-        return null !== (_a = this._handler.getStyle()) && void 0 !== _a ? _a : {};
+        return this._handler.getStyle();
       }
       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, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
-          x1: 0,
-          y1: 0,
-          x2: this._width,
-          y2: this._height
-        }) : this.setViewBox({
-          x1: 0,
-          y1: 0,
-          x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
-          y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
-        }), this.title = this._handler.getTitle(), this.resizable = !0;
+        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
       }
       setWindowHandler(handler) {
         this._handler = handler;
@@ -4859,7 +4849,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
+        return this._handler.releaseWindow();
       }
       getContext() {
         return this._handler.getContext();
@@ -4885,35 +4875,8 @@
       getContainer() {
         return this._handler.container;
       }
-      clearViewBox(color) {
-        this._handler.clearViewBox(color);
-      }
-      setViewBox(viewBox) {
-        this._handler.setViewBox(viewBox);
-      }
-      setViewBoxTransform(a, b, c, d, e, f) {
-        this._handler.setViewBoxTransform(a, b, c, d, e, f);
-      }
-      getViewBox() {
-        return this._handler.getViewBox();
-      }
-      getViewBoxTransform() {
-        return this._handler.getViewBoxTransform();
-      }
-      pointTransform(x, y) {
-        const vb = this._handler.getViewBox(),
-          nextP = {
-            x: x,
-            y: y
-          };
-        return this._handler.getViewBoxTransform().transformPoint({
-          x: x,
-          y: y
-        }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
-      }
-      hasSubView() {
-        const viewBox = this._handler.getViewBox();
-        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+      clearViewBox(viewBox, color) {
+        this._handler.clearViewBox(viewBox, color);
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -4999,16 +4962,8 @@
         const window = container.get(VWindow),
           bounds = graphic.AABBBounds,
           width = bounds.width(),
-          height = bounds.height(),
-          x1 = -bounds.x1,
-          y1 = -bounds.y1;
+          height = bounds.height();
         window.create({
-          viewBox: {
-            x1: x1,
-            y1: y1,
-            x2: bounds.x2,
-            y2: bounds.y2
-          },
           width: width,
           height: height,
           canvas: canvas,
@@ -5017,10 +4972,14 @@
           offscreen: !0,
           title: ""
         });
-        const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        const x = -bounds.x1,
+          y = -bounds.y1,
+          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
         stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
-          transMatrix: window.getViewBoxTransform(),
-          viewBox: window.getViewBox(),
+          x: x,
+          y: y,
+          width: width,
+          height: height,
           stage: stage,
           layer: stage.defaultLayer,
           renderService: stage.renderService,
@@ -5844,7 +5803,7 @@
         const mappers = this.mappingTable[e.type];
         let target;
         const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.viewX, e.viewY, e), e.pickParams || (this._prePointTargetCache = {
+        if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage) && (null === (_e = null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d[cacheKey]) || void 0 === _e ? void 0 : _e.stage.renderCount) === (null === (_f = this._prePointTargetCache) || void 0 === _f ? void 0 : _f.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
           [cacheKey]: target,
           stageRenderCount: null !== (_g = null == target ? void 0 : target.stage.renderCount) && void 0 !== _g ? _g : -1
         })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
@@ -5879,14 +5838,12 @@
         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(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;
+        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;
       }
       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(null !== (_a = event.viewX) && void 0 !== _a ? _a : event.global.x, null !== (_b = event.viewY) && void 0 !== _b ? _b : 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(event.global.x, event.global.y, event), event;
       }
       clonePointerEvent(from, type) {
         const event = this.allocateEvent(FederatedPointerEvent);
@@ -5943,9 +5900,6 @@
         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 = {
@@ -5993,7 +5947,7 @@
           this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
-          const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? "outside" : "",
+          const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
             normalizedEvents = this.normalizeToPointerData(nativeEvent);
           for (let i = 0, j = normalizedEvents.length; i < j; i++) {
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
@@ -6017,6 +5971,7 @@
           resolution: resolution,
           rootNode: rootNode,
           global: global,
+          viewport: viewport,
           autoPreventDefault = !1,
           clickInterval: clickInterval,
           supportsTouchEvents = global.supportsTouchEvents,
@@ -6024,13 +5979,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.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
       }
       release() {
-        this.removeEvents(), this.manager && this.manager.release(), this.domElement = null, this.manager = null, this.globalObj = null;
+        this.setTargetElement(null);
       }
       setCursor(mode, target) {
         if (!target && !this.manager.rootTarget.window._handler.canvas.controled) return;
@@ -6066,19 +6021,25 @@
         this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().removeEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
       }
       mapToViewportPoint(event) {
-        return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
+        const viewport = this.viewport,
+          {
+            x: x,
+            y: y
+          } = event;
+        return {
+          x: x - viewport.x,
+          y: y - viewport.y
+        };
       }
       mapToCanvasPoint(nativeEvent) {
-        var _a, _b;
+        var _a;
         const point = null === (_a = this.globalObj) || void 0 === _a ? void 0 : _a.mapToCanvasPoint(nativeEvent, this.domElement);
         if (point) return point;
-        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();
+        const {
+            clientX: x,
+            clientY: y
+          } = nativeEvent,
+          rect = this.domElement.getBoundingClientRect();
         return {
           x: x - rect.left,
           y: y - rect.top
@@ -6125,17 +6086,6 @@
       transferMouseData(event, nativeEvent) {
         event.isTrusted = nativeEvent.isTrusted, event.srcElement = nativeEvent.srcElement, event.timeStamp = clock.now(), event.type = nativeEvent.type, event.altKey = nativeEvent.altKey, event.button = nativeEvent.button, event.buttons = nativeEvent.buttons, event.client.x = nativeEvent.clientX, event.client.y = nativeEvent.clientY, event.ctrlKey = nativeEvent.ctrlKey, event.shiftKey = nativeEvent.shiftKey, event.metaKey = nativeEvent.metaKey, event.movement.x = nativeEvent.movementX, event.movement.y = nativeEvent.movementY, event.page.x = nativeEvent.pageX, event.page.y = nativeEvent.pageY, event.relatedTarget = null;
       }
-      isEventOutsideOfTargetViewPort(nativeEvent) {
-        if (this.isEventOutsideOfTargetElement(nativeEvent)) return !0;
-        if (this.domElement.getViewBox) {
-          const p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent)),
-            b = this.domElement.getViewBox(),
-            w = b.width(),
-            h = b.height();
-          return !(p.x < w && p.y < h && p.x > 0 && p.y > 0);
-        }
-        return !1;
-      }
       isEventOutsideOfTargetElement(nativeEvent) {
         let target = nativeEvent.target;
         nativeEvent.composedPath && nativeEvent.composedPath().length > 0 && (target = nativeEvent.composedPath()[0]);
@@ -7160,9 +7110,9 @@
                 promises.push(end);
               } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
             }), Promise.all(promises).then(() => {
-              ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
             }).catch(error => {
-              ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
             });
           }
         }, 0);
@@ -7182,15 +7132,12 @@
           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.onLoadSuccessCb = [];
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds$1();
@@ -7297,7 +7244,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._globalAABBBounds.empty() || 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.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -8374,12 +8321,15 @@
       }
       render(params, userParams) {
         var _a;
+        const stage = this.stage;
         this.layerHandler.render([this], {
           renderService: params.renderService,
+          x: stage.x,
+          y: stage.y,
+          width: this.viewWidth,
+          height: this.viewHeight,
           stage: this.stage,
           layer: this,
-          viewBox: params.viewBox,
-          transMatrix: params.transMatrix,
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           updateBounds: params.updateBounds
         }, userParams), this.afterDrawCbs.forEach(c => c(this)), this.tryRenderSecondaryLayer(params, userParams);
@@ -8403,18 +8353,33 @@
         throw new Error("暂不支持");
       }
       prepare(dirtyBounds, params) {}
+      combineTo(target, params) {
+        var _a, _b, _c;
+        this.offscreen && (this.layerHandler.drawTo(target, [this], Object.assign({
+          background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
+          renderService: params.renderService,
+          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
+          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
+          width: this.viewWidth,
+          height: this.viewHeight,
+          stage: this.stage,
+          layer: this
+        }, params)), this.afterDrawCbs.forEach(c => c(this)));
+      }
       release() {
         super.release(), this.layerHandler.release(), this.subLayers && this.subLayers.forEach(l => {
           application.layerService.releaseLayer(this.stage, l.layer);
         });
       }
       drawTo(target, params) {
-        var _a;
+        var _a, _b, _c;
         this.layerHandler.drawTo(target, [this], Object.assign({
           background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
           renderService: params.renderService,
-          viewBox: params.viewBox,
-          transMatrix: params.transMatrix,
+          x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
+          y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
+          width: this.viewWidth,
+          height: this.viewHeight,
           stage: this.stage,
           layer: this
         }, params)), this.afterDrawCbs.forEach(c => c(this));
@@ -8496,9 +8461,6 @@
       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);
 
@@ -8535,9 +8497,7 @@
           fillOpacity = themeAttributes.fillOpacity,
           lineWidth = themeAttributes.lineWidth,
           strokeOpacity = themeAttributes.strokeOpacity,
-          visible = themeAttributes.visible,
-          x: originX = themeAttributes.x,
-          y: originY = themeAttributes.y
+          visible = themeAttributes.visible
         } = graphic.attribute,
         fVisible = fillVisible(opacity, fillOpacity, fill),
         sVisible = strokeVisible(opacity, strokeOpacity),
@@ -8548,7 +8508,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 - 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;
+      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;
     }
     function intersect$2(x0, y0, x1, y1, x2, y2, x3, y3) {
       const x10 = x1 - x0,
@@ -11037,8 +10997,7 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight,
-          lineWidth: lineWidth
+          fontWeight: fontWeight
         } = this.attribute;
         return Object.assign({
           fill: fill,
@@ -11046,8 +11005,7 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight,
-          lineWidth: lineWidth
+          fontWeight: fontWeight
         }, config);
       }
       doUpdateFrameCache() {
@@ -14346,9 +14304,7 @@
           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];
-        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, {
+        direction = abs(endP.x - startP.x) > abs(endP.y - startP.y) ? Direction.ROW : Direction.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
@@ -14726,7 +14682,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) + xOffset + 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) + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, line.width, textAttribute, context);
             })));
           } else {
             text.tryUpdateAABBBounds();
@@ -14828,6 +14784,7 @@
       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,
@@ -14835,6 +14792,7 @@
             underlineDash = textAttribute.underlineDash,
             fillOpacity = textAttribute.fillOpacity
           } = text.attribute,
+          offsetX = textDrawOffsetX(textAlign, w),
           offsetY = textLayoutOffsetY("alphabetic", fontSize, fontSize),
           attribute = {
             lineWidth: 0,
@@ -14846,12 +14804,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 + 0, dy, z), context.lineTo(x + 0 + w, dy, z), context.stroke();
+          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + 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 + 0, dy, z), context.lineTo(x + 0 + w, dy, z), context.stroke();
+          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
         }
       }
     };
@@ -15648,10 +15606,10 @@
       render(group, params) {
         var _a;
         params.renderService.render(group, Object.assign(Object.assign({
-          context: this.context,
-          viewBox: params.stage.window.getViewBox(),
-          transMatrix: params.stage.window.getViewBoxTransform()
+          context: this.context
         }, params), {
+          x: 0,
+          y: 0,
           clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
         }));
       }
@@ -15666,12 +15624,11 @@
         const context = target.getContext(),
           targetDpr = target.dpr,
           {
-            viewBox: viewBox
-          } = params,
-          x = viewBox.x1,
-          y = viewBox.y1,
-          width = viewBox.width(),
-          height = viewBox.height();
+            x = 0,
+            y = 0,
+            width = this.layer.viewWidth,
+            height = this.layer.viewHeight
+          } = params;
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
       merge(layerHandlers) {}
@@ -15827,22 +15784,32 @@
         const {
           context: context,
           stage: stage,
-          viewBox: viewBox,
-          transMatrix: transMatrix
+          x = 0,
+          y = 0,
+          width: width,
+          height: height
         } = drawContext;
         if (!context) return;
-        const dirtyBounds = this.dirtyBounds.setValue(0, 0, viewBox.width(), viewBox.height());
+        if (drawContext.keepMatrix) {
+          if (context.nativeContext && context.nativeContext.getTransform) {
+            const t = context.nativeContext.getTransform();
+            context.setTransformFromMatrix(t, !0, 1);
+          }
+        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
+        const dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           const b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
+        const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
+        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
+        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -15966,25 +15933,29 @@
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
         const {
-            clear: clear,
-            viewBox: viewBox
-          } = drawContext,
-          width = viewBox.width(),
-          height = viewBox.height();
+          clear: clear
+        } = drawContext;
         if (clear) {
-          context.clearRect(0, 0, width, height);
+          const canvas = context.getCanvas(),
+            {
+              width = canvas.width,
+              height = canvas.height
+            } = drawContext,
+            x = 0,
+            y = 0;
+          context.clearRect(x, y, width, height);
           const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
           if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
+            res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
-              x1: 0,
-              y1: 0,
-              x2: 0 + width,
-              y2: 0 + height
+              x1: x,
+              y1: y,
+              x2: x + width,
+              y2: y + height
             }
-          }, 0, 0), context.fillRect(0, 0, width, height);
+          }, 0, 0), context.fillRect(x, y, width, height);
         }
       }
       afterDraw(renderService, drawParams) {}
@@ -16241,16 +16212,25 @@
           this.currentRenderService = renderService;
           const {
             context: context,
-            viewBox: viewBox
+            x = 0,
+            y = 0
           } = drawContext;
-          context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(viewBox.x1, viewBox.y1, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
-            var _a, _b;
-            return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
-          }).forEach(group => {
-            this.renderGroup(group, drawContext);
-          }), this.hooks.completeDraw.tap("top-draw", () => {
-            context.restore(), context.restore(), context.draw(), context.inuse = !1, this.rendering = !1;
-          }));
+          if (context) {
+            if (drawContext.keepMatrix) {
+              if (context.nativeContext && context.nativeContext.getTransform) {
+                const t = context.nativeContext.getTransform();
+                context.setTransformFromMatrix(t, !0, 1);
+              }
+            } else context.inuse = !0, context.clearMatrix();
+            context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+              var _a, _b;
+              return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
+            }).forEach(group => {
+              this.renderGroup(group, drawContext);
+            }), this.hooks.completeDraw.tap("top-draw", () => {
+              context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), this.rendering = !1;
+            });
+          }
         });
       }
       _increaseRender(group, drawContext) {
@@ -16420,10 +16400,12 @@
           if (!layer || !group.layer.subLayers) return;
           const subLayer = group.layer.subLayers.get(group._uid);
           subLayer && subLayer.drawContribution && subLayer.drawContribution.draw(stage.renderService, Object.assign({
+            x: stage.x,
+            y: stage.y,
+            width: layer.viewWidth,
+            height: layer.viewHeight,
             stage: stage,
             layer: layer,
-            viewBox: stage.window.getViewBox(),
-            transMatrix: stage.window.getViewBoxTransform(),
             clear: "transparent",
             renderService: stage.renderService,
             updateBounds: !1,
@@ -16436,7 +16418,7 @@
 
     class HtmlAttributePlugin {
       constructor() {
-        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.lastDomContainerSet = new Set(), this.currentDomContainerSet = new Set();
+        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
       }
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
@@ -16448,17 +16430,15 @@
         });
       }
       deactivate(context) {
-        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();
+        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key);
       }
       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 => {
@@ -16485,8 +16465,7 @@
           width: width,
           height: height,
           style: style,
-          anchorType = "boundsLeftTop",
-          pointerEvents: pointerEvents
+          anchorType = "boundsLeftTop"
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
@@ -16512,7 +16491,7 @@
             wrapGroup: wrapGroup
           }));
         } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -16524,15 +16503,7 @@
           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`, 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);
-        });
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
       }
     }
 
@@ -16979,78 +16950,6 @@
       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,
@@ -17060,24 +16959,22 @@
     };
     class Stage extends Group$2 {
       set viewBox(b) {
-        this.window.setViewBox(b);
+        this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
       }
       get viewBox() {
-        return this.window.getViewBox();
+        return this._viewBox;
       }
       get x() {
-        return this.window.getViewBox().x1;
+        return this._viewBox.x1;
       }
       set x(x) {
-        const b = this.window.getViewBox();
-        b.translate(x - b.x1, 0), this.window.setViewBox(b);
+        this._viewBox.translate(x - this._viewBox.x1, 0);
       }
       get y() {
-        return this.window.getViewBox().y1;
+        return this._viewBox.y1;
       }
       set y(y) {
-        const b = this.window.getViewBox();
-        b.translate(0, y - b.y1), this.window.setViewBox(b);
+        this._viewBox.translate(0, y - this._viewBox.y1);
       }
       get width() {
         return this.window.width;
@@ -17086,13 +16983,13 @@
         this.resize(w, this.height);
       }
       get viewWidth() {
-        return this.window.getViewBox().width();
+        return this._viewBox.width();
       }
       set viewWidth(w) {
         this.resizeView(w, this.viewHeight);
       }
       get viewHeight() {
-        return this.window.getViewBox().height();
+        return this._viewBox.height();
       }
       set viewHeight(h) {
         this.resizeView(this.viewWidth, h);
@@ -17126,13 +17023,7 @@
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
         super({}), this._onVisibleChange = visible => {
-          if (!(this._skipRender < 0)) if (visible) {
-            if (this.dirtyBounds) {
-              const b = this.window.getViewBox();
-              this.dirtyBounds.setValue(b.x1, b.y1, b.width(), b.height());
-            }
-            this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
-          } else this._skipRender = 1;
+          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
@@ -17143,24 +17034,17 @@
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
-          viewBox: params.viewBox,
           container: params.container,
           dpr: params.dpr || this.global.devicePixelRatio,
           canvasControled: !1 !== params.canvasControled,
           title: params.title || "",
           canvas: params.canvas
-        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
+        }), this._viewBox = new AABBBounds$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, {
           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.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({
+        })), 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({
           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,
@@ -17168,7 +17052,22 @@
           rootNode: this,
           global: this.global,
           supportsPointerEvents: this.params.supportsPointerEvents,
-          supportsTouchEvents: this.params.supportsTouchEvents
+          supportsTouchEvents: this.params.supportsTouchEvents,
+          viewport: {
+            viewBox: this._viewBox,
+            get x() {
+              return this.viewBox.x1;
+            },
+            get y() {
+              return this.viewBox.y1;
+            },
+            get width() {
+              return this.viewBox.width();
+            },
+            get height() {
+              return this.viewBox.height();
+            }
+          }
         }, this.params.event)));
       }
       preventRender(prevent) {
@@ -17311,19 +17210,11 @@
           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.window.getViewBox();
+        const viewBox = this._viewBox;
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
       }
       combineLayer(ILayer1, ILayer2) {
@@ -17350,12 +17241,12 @@
         this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
       clearViewBox(color) {
-        this.window.clearViewBox(color);
+        this.window.clearViewBox(this._viewBox, color);
       }
       render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -17368,7 +17259,7 @@
       _doRenderInThisFrame() {
         this.timeline.resume(), this.ticker.start();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {}), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), this.state = state, this._skipRender && this._skipRender++;
       }
       renderLayerList(layerList, params) {
         const list = [];
@@ -17380,17 +17271,14 @@
           layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
-            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
-            viewBox: this.window.getViewBox(),
-            transMatrix: this.window.getViewBoxTransform()
+            updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: this.renderStyle
+            renderStyle: this.renderStyle,
+            keepMatrix: this.params.renderKeepMatrix
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
-          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
-          viewBox: this.window.getViewBox(),
-          transMatrix: this.window.getViewBoxTransform()
+          updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
         }, Object.assign({
           renderStyle: this.renderStyle
         }, params));
@@ -17401,9 +17289,9 @@
       }
       resize(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        this.window.hasSubView() || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.window.resize(w, h), this.forEachChildren(c => {
+        this.window.resize(w, h), this.forEachChildren(c => {
           c.resize(w, h);
-        }), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
+        }), this._subView || this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h), this.camera && this.option3d && this.set3dOptions(this.option3d), rerender && this.render();
       }
       resizeView(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -17446,7 +17334,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        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 => {
+        super.release(), this.eventSystem && this.eventSystem.release(), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
       }
@@ -17457,41 +17345,47 @@
       getLayer(name) {
         return this.children.filter(layer => layer.name === name)[0];
       }
-      renderTo(window) {
+      renderTo(window, params) {
         this.forEachChildren((layer, i) => {
-          layer.drawTo(window, {
+          layer.drawTo(window, Object.assign(Object.assign({}, params), {
             renderService: this.renderService,
-            viewBox: window.getViewBox(),
-            transMatrix: window.getViewBoxTransform(),
             background: layer === this.defaultLayer ? this.background : void 0,
             clear: 0 === i,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
-          });
+          }));
         });
       }
       renderToNewWindow() {
+        let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let viewBox = arguments.length > 1 ? arguments[1] : undefined;
-        const window = container.get(VWindow),
-          x1 = viewBox ? -viewBox.x1 : 0,
-          y1 = viewBox ? -viewBox.y1 : 0,
-          x2 = viewBox ? viewBox.x2 : this.viewWidth,
-          y2 = viewBox ? viewBox.y2 : this.viewHeight,
-          width = viewBox ? viewBox.width() : this.viewWidth,
-          height = viewBox ? viewBox.height() : this.viewHeight;
-        return window.create({
-          viewBox: {
-            x1: x1,
-            y1: y1,
-            x2: x2,
-            y2: y2
-          },
-          width: width,
-          height: height,
+        const window = container.get(VWindow);
+        if (fullImage) window.create({
+          width: this.viewWidth,
+          height: this.viewHeight,
           dpr: this.window.dpr,
           canvasControled: !0,
           offscreen: !0,
           title: ""
-        }), this.renderTo(window), window;
+        });else {
+          const width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x),
+            height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
+          window.create({
+            width: width,
+            height: height,
+            dpr: this.window.dpr,
+            canvasControled: !0,
+            offscreen: !0,
+            title: ""
+          });
+        }
+        const x = viewBox ? -viewBox.x1 : 0,
+          y = viewBox ? -viewBox.y1 : 0;
+        return this.renderTo(window, {
+          x: x,
+          y: y,
+          width: viewBox ? viewBox.x2 : window.width,
+          height: viewBox ? viewBox.y2 : window.height
+        }), window;
       }
       toCanvas() {
         let fullImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
@@ -17705,7 +17599,7 @@
       };
     let BaseWindowHandlerContribution = class {
       constructor() {
-        this._uid = Generator.GenAutoIncrementId(), this.viewBox = new AABBBounds$1(), this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this._uid = Generator.GenAutoIncrementId();
       }
       onChange(cb) {
         this._onChangeCb = cb;
@@ -17726,18 +17620,6 @@
           left: 0
         };
       }
-      setViewBox(vb) {
-        this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
-      }
-      getViewBox() {
-        return this.viewBox;
-      }
-      setViewBoxTransform(a, b, c, d, e, f) {
-        this.modelMatrix.setValue(a, b, c, d, e, f);
-      }
-      getViewBoxTransform() {
-        return this.modelMatrix;
-      }
     };
     BaseWindowHandlerContribution = __decorate$K([injectable(), __metadata$x("design:paramtypes", [])], BaseWindowHandlerContribution);
 
@@ -17769,14 +17651,23 @@
           group: null
         };
         params.pickerService = this;
-        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 offsetX = 0,
+          offsetY = 0;
+        if (params && params.bounds) {
+          if (!params.bounds.contains(point.x, point.y)) return result;
+          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
+        }
+        if (this.pickContext) if (params.keepMatrix) {
+          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
+            const t = this.pickContext.nativeContext.getTransform();
+            this.pickContext.setTransformFromMatrix(t, !0, 1);
+          }
+        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
+        params.pickContext = this.pickContext;
+        const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
         let group;
         for (let i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -18837,6 +18728,7 @@
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const outP = [0, 0, 0],
+      initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
       addArcToBezierPath = (bezierPath, startAngle, endAngle, cx, cy, rx, ry, clockwise) => {
         if (clockwise) for (; endAngle > startAngle;) endAngle -= pi2;else for (; endAngle < startAngle;) endAngle += pi2;
         const step = pi / 3 * (endAngle > startAngle ? 1 : -1);
@@ -18967,7 +18859,7 @@
         }), this._clearShadowStyle = !1, this._clearFilterStyle = !1, this._clearGlobalCompositeOperationStyle = !1;
         const context = canvas.nativeCanvas.getContext("2d");
         if (!context) throw new Error("发生错误，获取2d上下文失败");
-        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
+        this.nativeContext = context, this.canvas = canvas, this.matrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
       }
       reset() {
         this.stack.length && Logger.getInstance().warn("可能存在bug，matrix没有清空"), this.matrix.setValue(1, 0, 0, 1, 0, 0), this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.stack.length = 0, this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
@@ -19329,10 +19221,7 @@
       clearMatrix() {
         let setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
         let dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
-        this.setTransformFromMatrix(this._clearMatrix, setTransform, dpr);
-      }
-      setClearMatrix(a, b, c, d, e, f) {
-        this._clearMatrix.setValue(a, b, c, d, e, f);
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
       }
       onlyTranslate() {
         let dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
@@ -19563,10 +19452,10 @@
         return `${BrowserWindowHandlerContribution_1.idprefix}_${BrowserWindowHandlerContribution_1.prefix_count++}`;
       }
       constructor() {
-        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);
+        super(), this.type = "browser", this._canvasIsIntersecting = !0, this.global = application.global;
       }
       getTitle() {
-        return this.canvas.id && this.canvas.id.toString();
+        return this.canvas.id.toString();
       }
       getWH() {
         return {
@@ -19673,8 +19562,7 @@
         return this.canvas.nativeCanvas.dispatchEvent(event);
       }
       getStyle() {
-        var _a;
-        return null !== (_a = this.canvas.nativeCanvas.style) && void 0 !== _a ? _a : {};
+        return this.canvas.nativeCanvas.style;
       }
       setStyle(style) {
         this.canvas.nativeCanvas.style = style;
@@ -19693,9 +19581,8 @@
           bottom: 0
         };
       }
-      clearViewBox(color) {
-        const vb = this.viewBox,
-          context = this.getContext(),
+      clearViewBox(vb, color) {
+        const context = this.getContext(),
           dpr = this.getDpr();
         context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
       }
@@ -19776,20 +19663,14 @@
         this.applyStyles = !0;
       }
       mapToCanvasPoint(nativeEvent, domElement) {
-        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;
+        var _a;
         if (domElement) {
-          const x = clientX,
-            y = clientY,
+          const {
+              clientX: x,
+              clientY: y
+            } = nativeEvent,
             rect = domElement.getBoundingClientRect(),
-            nativeCanvas = null === (_b = domElement.getNativeHandler) || void 0 === _b ? void 0 : _b.call(domElement).nativeCanvas;
+            nativeCanvas = null === (_a = domElement.getNativeHandler) || void 0 === _a ? void 0 : _a.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),
@@ -19797,8 +19678,8 @@
           };
         }
         return {
-          x: offsetX,
-          y: offsetY
+          x: nativeEvent.offsetX,
+          y: nativeEvent.offsetY
         };
       }
       getNativeAABBBounds(_dom) {
@@ -20071,7 +19952,7 @@
       getBoundingClientRect() {
         return null;
       }
-      clearViewBox(color) {}
+      clearViewBox(vb, color) {}
     };
     NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$v([injectable(), __param$n(0, inject(VGlobal)), __metadata$n("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
@@ -24991,25 +24872,6 @@
       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
@@ -25049,9 +24911,9 @@
           this._prePos = "horizontal" === direction ? e.clientX : e.clientY, this._dispatchEvent("scrollDown", {
             pos: this._prePos,
             event: e
-          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
           }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._computeScrollValue = e => {
@@ -25066,12 +24928,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 = e => {
+        }, this._onSliderPointerMove = delayMap[this.attribute.delayType](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._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
+        }, this.attribute.delayTime), this._onSliderPointerUp = e => {
           e.preventDefault();
           const {
               realTime = !0,
@@ -25084,9 +24946,9 @@
           this._dispatchEvent("scrollUp", {
             pre: preRange,
             value: clampRange$1(range, limitRange[0], limitRange[1])
-          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
           }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
         };
@@ -25113,7 +24975,7 @@
             }, !0), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
           }
         }
-        this.attribute.range = currScrollRange, realTime && this._dispatchEvent(SCROLLBAR_EVENT, {
+        this.attribute.range = currScrollRange, realTime && this._dispatchEvent("scrollDrag", {
           pre: preRange,
           value: currScrollRange
         });
@@ -25289,22 +25151,41 @@
       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 defaultTextTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      let fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_TEXT_FONT_FAMILY$1;
+      var _a, _b;
       if (!text) return {
         width: 0,
         height: 0
       };
       const bounds = getTextBounds$1({
         text: text,
-        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",
+        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",
         textBaseline: textSpec.textBaseline,
         ellipsis: !!textSpec.ellipsis,
         maxLineWidth: textSpec.maxLineWidth || 1 / 0,
-        lineHeight: textSpec.fontSize || defaultTextTheme.fontSize || 12
+        lineHeight: textSpec.fontSize || 12
       });
       return {
         width: bounds.width(),
@@ -25339,7 +25220,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b, _c;
+        var _a, _b;
         const {
             text = "",
             textStyle = {},
@@ -25420,11 +25301,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 === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme()) || void 0 === _b ? void 0 : _b.text),
+          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme().text.fontFamily),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
+          const size = null !== (_b = shape.size) && void 0 !== _b ? _b : 10,
             maxSize = isNumber$4(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
@@ -25945,9 +25826,7 @@
             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 {
-          let lineCreator = graphicCreator$1.line;
-          array$1(lineStyle)[0].cornerRadius && (lineCreator = graphicCreator$1.polygon);
-          const line = lineCreator(Object.assign(Object.assign({
+          const line = graphicCreator$1.polygon(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -26149,19 +26028,6 @@
       }
     };
 
-    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 => {
@@ -26199,7 +26065,7 @@
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator$1.group({
+        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26324,7 +26190,11 @@
         axisTitle.name = AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), container.add(axisTitle);
       }
       getVerticalCoord(point, offset, inside) {
-        return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
+        const vector = this.getVerticalVector(offset, inside, point);
+        return {
+          x: point.x + vector[0],
+          y: point.y + vector[1]
+        };
       }
       getTextAlign(vector) {
         let align = "center";
@@ -26467,9 +26337,6 @@
           }));
         }), data;
       }
-      release() {
-        super.release(), this._prevInnerView = null, this._innerView = null;
-      }
     }
 
     function rotate(x, y, deg, originX, originY) {
@@ -26632,42 +26499,17 @@
         limitLength: limitLength,
         verticalLimitLength: verticalLimitLength,
         ellipsis = "...",
-        orient: orient,
-        axisLength: axisLength
+        orient: orient
       } = config;
-      if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const DELTA = Math.sin(Math.PI / 10);
-      labels.forEach(label => {
+      !isEmpty(labels) && isValidNumber$1(limitLength) && labels.forEach(label => {
         var _a;
         const angle = label.attribute.angle,
-          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;
-        }
+          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;
         const direction = label.attribute.direction;
-        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;
-          }
-        }
+        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
         let limitLabelLength = null;
-        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({
+        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({
           maxLineWidth: limitLabelLength,
           ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis
         });
@@ -26840,10 +26682,9 @@
             autoRotate = !0,
             shape: shape,
             background: background,
-            state = {},
-            maxWidth: maxWidth
+            state = {}
           } = _d,
-          restAttrs = __rest$1(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+          restAttrs = __rest$1(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -26894,28 +26735,7 @@
           } = 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
@@ -26942,9 +26762,9 @@
       }
       getLabelAlign(vector, inside, angle) {
         const orient = this.attribute.orient;
-        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);
+        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);
         }
         return {
           textAlign: this.getTextAlign(vector),
@@ -27039,15 +26859,12 @@
             labelRotateAngle: autoRotateAngle,
             orient: orient
           }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
-            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;
+            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;
             autoLimit(labelShapes, {
               limitLength: limitLength,
               verticalLimitLength: verticalLimitLength,
               ellipsis: limitEllipsis,
-              orient: orient,
-              axisLength: axisLength
+              orient: orient
             });
           }
           autoHide$1 && autoHide(labelShapes, {
@@ -27088,7 +26905,7 @@
         }
       }
       _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const {
             label: label,
             title: title,
@@ -27102,7 +26919,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 === (_e = null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme()) || void 0 === _e ? void 0 : _e.text).height;
+          titleHeight = measureTextSize(title.text, title.textStyle, null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme().text.fontFamily).height;
           const padding = normalizePadding(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
         }
@@ -27165,7 +26982,7 @@
         };
       }
       render() {
-        var _a, _b, _c;
+        var _a, _b;
         this._reset();
         const {
           layout = "horizontal",
@@ -27207,7 +27024,7 @@
           } = measureTextSize(this._getPageText(total), Object.assign({
             textAlign: "center",
             textBaseline: "middle"
-          }, textStyle), null === (_c = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme()) || void 0 === _c ? void 0 : _c.text),
+          }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
           handlerSizeX = isNumber$4(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$4(handlerSize) ? handlerSize : handlerSize[1],
           text = graphicCreator$1.text(Object.assign({
@@ -27437,9 +27254,8 @@
             maxRow = 2,
             maxWidth: maxWidth,
             maxHeight: maxHeight,
-            defaultSelected: defaultSelected,
-            lazyload: lazyload,
-            autoPage: autoPage
+            defaultSelected = [],
+            lazyload: lazyload
           } = this.attribute,
           {
             spaceCol = DEFAULT_ITEM_SPACE_COL,
@@ -27449,10 +27265,9 @@
           {
             items: legendItems,
             isHorizontal: isHorizontal,
-            startIndex: startIndex,
-            isScrollbar: isScrollbar
+            startIndex: startIndex
           } = this._itemContext,
-          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+          maxPages = isHorizontal ? maxRow : maxCol;
         let item,
           {
             doWrap: doWrap,
@@ -27461,22 +27276,24 @@
             startY: startY,
             pages: pages
           } = this._itemContext;
-        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),
+        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),
             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) && (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({
+          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({
             x: startX,
             y: startY
-          }), 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({
+          }), startX += spaceCol + itemWidth) : (isValid$3(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), index > 0 && 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, isScrollbar && (this._itemContext.totalPage = pages), 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, lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
       }
       _renderContent() {
         const {
@@ -27504,10 +27321,8 @@
             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);
-        const pager = this.attribute.pager;
-        this._itemContext = {
-          currentPage: pager && 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), this._itemContext = {
+          currentPage: this.attribute.pager && this.attribute.pager.defaultCurrent || 1,
           doWrap: !1,
           maxWidthInCol: 0,
           maxPages: 1,
@@ -27517,11 +27332,10 @@
           startIndex: 0,
           items: legendItems,
           isHorizontal: isHorizontal,
-          totalPage: 1 / 0,
-          isScrollbar: pager && "scrollbar" === pager.type
+          totalPage: 1 / 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        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));
+        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));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -27670,13 +27484,27 @@
           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(compStyle) {
+      _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
         var _a, _b;
         const {
           disableTriggerEvent: disableTriggerEvent,
           maxRow: maxRow
         } = this.attribute;
-        return this._itemContext.isHorizontal ? new Pager(Object.assign(Object.assign({
+        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({
           layout: 1 === maxRow ? "horizontal" : "vertical",
           total: 99
         }, merge({
@@ -27687,79 +27515,53 @@
         }, compStyle)), {
           defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
           disableTriggerEvent: disableTriggerEvent
-        })) : new Pager(Object.assign({
+        }) : Object.assign({
           layout: "horizontal",
           total: 99,
           disableTriggerEvent: disableTriggerEvent,
           defaultCurrent: null === (_b = this.attribute.pager) || void 0 === _b ? void 0 : _b.defaultCurrent
         }, compStyle));
       }
-      _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) {
+      _updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize) {
         const {
             maxHeight: maxHeight,
             pager: pager
           } = this.attribute,
           {
-            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()
-          });
-        }
-      }
-      _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,
+            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()
+            });
+          }
+        }
       }
-      _bindEventsOfPager(pageSize, channel) {
+      _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
         const pager = this.attribute.pager || {},
           {
             animation = !0,
             animationDuration = 450,
             animationEasing = "quadIn"
           } = pager,
-          pageParser = this._itemContext.isScrollbar ? e => {
+          pageParser = isScrollbar ? e => {
             const {
               value: value
             } = e.detail;
@@ -27774,14 +27576,16 @@
                 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({
-                [channel]: -(newPage - 1) * pageSize
-              }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+              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));
             }
           };
-        this._itemContext.isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
+        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
       }
-      _renderPager() {
+      _renderPagerComponent(isHorizontal) {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$5(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
@@ -27801,105 +27605,51 @@
             defaultCurrent = 1
           } = pager,
           compStyle = __rest(pager, ["space", "defaultCurrent"]),
-          {
-            isHorizontal: isHorizontal
-          } = this._itemContext;
+          isScrollbar = "scrollbar" === pager.type;
         let comp,
-          compWidth = 0,
-          compHeight = 0,
-          contentWidth = 0,
-          contentHeight = 0,
+          compSize = 0,
+          contentSize = 0,
           startX = 0,
           startY = 0,
           pages = 1;
         if (isHorizontal) {
-          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;
+          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;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               width: width,
               height: height
             } = item.attribute;
-            contentWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
+            contentSize < 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(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         } else {
-          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;
+          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;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               height: height
             } = item.attribute;
-            contentHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
+            contentSize < 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(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
-        }
-        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 ? contentWidth : compWidth,
-          height: isHorizontal ? compHeight : contentHeight,
-          clip: !0,
-          pickable: !1
-        });
-        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);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
         }
-        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
         const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
-          width: contentWidth,
-          height: contentHeight,
+          width: isHorizontal ? contentSize : compSize,
+          height: isHorizontal ? compSize : contentSize,
           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;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), !0;
       }
       _hover(legendItem, e) {
         this._lastActiveItem = legendItem;
@@ -29474,9 +29224,12 @@
           }, this._onTooltipUpdate(e), this._dispatchTooltipEvent("sliderTooltipShow"));
         }, this._onTooltipUpdate = e => {
           if (this._isChanging || !this._tooltipState || !this._tooltipState.isActive) return;
-          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"));
+          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"));
         }, this._onTooltipHide = () => {
           const {
             tooltip: tooltip
@@ -29504,7 +29257,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 = this.calculateValueByPos(newPos);
+            currentValue = newPos / railLen * (max - min) + min;
           "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, {
@@ -29524,8 +29277,7 @@
             railWidth: railWidth,
             railHeight: railHeight,
             min: min,
-            max: max,
-            inverse: inverse
+            max: max
           } = this.attribute;
           if (max === min) return;
           const {
@@ -29537,14 +29289,14 @@
           const delta = currentPos - this._prePos;
           if (startHandler) {
             const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y,
-              newPos = inverse ? clamp$3(originPos + delta, trackLen, railLen) : clamp$3(originPos + delta, 0, railLen - trackLen),
-              currentValue = this.calculateValueByPos(newPos);
+              newPos = clamp$3(originPos + delta, 0, railLen - trackLen),
+              currentValue = newPos / railLen * (max - min) + min;
             this._updateHandler(startHandler, newPos, currentValue);
           }
           if (endHandler) {
             const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y,
-              newPos = inverse ? clamp$3(originPos + delta, 0, railLen - trackLen) : clamp$3(originPos + delta, trackLen, railLen),
-              currentValue = this.calculateValueByPos(newPos),
+              newPos = clamp$3(originPos + delta, trackLen, railLen),
+              currentValue = newPos / railLen * (max - min) + min,
               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),
@@ -29572,9 +29324,9 @@
           if (max === min) return;
           const startHandler = this._startHandler,
             endHandler = this._endHandler;
-          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);
+          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;
           if (isValid$3(endHandlerPos)) {
             const updateHandler = Math.abs(currentPos - startHandlerPos) > Math.abs(currentPos - endHandlerPos) ? endHandler : startHandler;
             this._updateHandler(updateHandler, currentPos, currentValue);
@@ -29582,33 +29334,11 @@
           this._updateTrack(), this._dispatchChangeEvent();
         };
       }
-      calculatePosByValue(value, pos) {
+      setValue(value) {
         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;
@@ -29617,8 +29347,14 @@
           {
             startHandler: startHandler,
             endHandler: endHandler
-          } = this._getHandlers();
-        startHandler && this._updateHandler(startHandler, this.calculatePosByValue(startValue), startValue), endHandler && this._updateHandler(endHandler, this.calculatePosByValue(endValue), endValue), this._updateTrack();
+          } = 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();
       }
       render() {
         var _a, _b;
@@ -29721,29 +29457,30 @@
         isNil$3(value) && (value = [min, max]);
         const handlerTextVisible = handlerText && handlerText.visible,
           isHorizontal = this._isHorizontal,
+          railLen = isHorizontal ? railWidth : railHeight,
           [startValue, endValue] = convertValueToRange(value),
-          startPos = this.calculatePosByValue(startValue, range ? "start" : "end"),
+          handlerStart = max === min ? range ? 0 : railLen : (startValue - min) / (max - min) * railLen,
           startHandler = this._renderHandler(Object.assign({
-            x: isHorizontal ? startPos : railWidth / 2,
-            y: isHorizontal ? railHeight / 2 : startPos,
+            x: isHorizontal ? handlerStart : railWidth / 2,
+            y: isHorizontal ? railHeight / 2 : handlerStart,
             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 = startPos, handlerTextVisible) {
+        if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
           const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
           startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), this._startHandlerText = startHandlerText;
         }
         if (range) {
-          const endPos = this.calculatePosByValue(endValue, "end"),
+          const handlerEnd = max === min ? railLen : (endValue - min) / (max - min) * railLen,
             endHandler = this._renderHandler(Object.assign({
-              x: isHorizontal ? endPos : railWidth / 2,
-              y: isHorizontal ? railHeight / 2 : endPos,
+              x: isHorizontal ? handlerEnd : railWidth / 2,
+              y: isHorizontal ? railHeight / 2 : handlerEnd,
               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 = endPos, handlerTextVisible) {
+          if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, container.add(endHandler), this._currentValue.endPos = handlerEnd, handlerTextVisible) {
             const endHandlerText = this._renderHandlerText(endValue, "end");
             endHandlerText.name = SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), this._endHandlerText = endHandlerText;
           }
@@ -29766,7 +29503,8 @@
           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;
+        const isHorizontal = this._isHorizontal,
+          railLen = isHorizontal ? railWidth : railHeight;
         range || (startValue = min);
         const trackContainer = graphicCreator$1.group({
           x: 0,
@@ -29781,13 +29519,13 @@
         const draggableTrack = isObject$4(range) && !0 === range.draggableTrack;
         let cursor;
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
-        const startPos = this.calculatePosByValue(startValue, "start"),
-          endPos = this.calculatePosByValue(endValue, range ? "end" : "start"),
+        const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
+          startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
           track = graphicCreator$1.rect(Object.assign({
-            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),
+            x: isHorizontal ? startPos : 0,
+            y: isHorizontal ? 0 : startPos,
+            width: isHorizontal ? trackWidth : railWidth,
+            height: isHorizontal ? railHeight : trackWidth,
             cursor: cursor
           }, trackStyle));
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
@@ -29799,6 +29537,8 @@
         var _a, _b, _c;
         const {
             align: align,
+            min: min,
+            max: max,
             handlerSize = 14,
             handlerText = {},
             railHeight: railHeight,
@@ -29806,14 +29546,15 @@
             slidable: slidable
           } = this.attribute,
           isHorizontal = this._isHorizontal,
-          pos = this.calculatePosByValue(value, position),
+          railLen = isHorizontal ? railWidth : railHeight,
+          handlerStart = max === min ? "start" === position ? 0 : railLen : (value - min) / (max - min) * railLen,
           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 = 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);
+        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);
         return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _renderTooltip() {
@@ -29854,12 +29595,7 @@
       _updateTooltip() {
         var _a, _b;
         if (!this._tooltipShape && !this._tooltipText || !this._tooltipState) return;
-        const {
-            railWidth: railWidth,
-            railHeight: railHeight
-          } = this.attribute,
-          railLen = this._isHorizontal ? railWidth : railHeight,
-          coord = this._tooltipState.pos * railLen,
+        const coord = this._isHorizontal ? this._tooltipState.pos * this.attribute.railWidth : this._tooltipState.pos * this.attribute.railHeight,
           coordKey = this._isHorizontal ? "x" : "y";
         this._tooltipShape && this._tooltipShape.setAttributes({
           visible: !0,
@@ -29889,12 +29625,7 @@
         this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
       }
       _updateTrack() {
-        const {
-            inverse: inverse,
-            railWidth: railWidth,
-            railHeight: railHeight
-          } = this.attribute,
-          startHandler = this._startHandler,
+        const startHandler = this._startHandler,
           endHandler = this._endHandler;
         if (this._isHorizontal) {
           const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x;
@@ -29904,10 +29635,7 @@
               x: Math.min(startHandlerPos, endHandlerPos),
               width: Math.abs(startHandlerPos - endHandlerPos)
             });
-          } else inverse ? this._track.setAttributes({
-            x: startHandlerPos,
-            width: railWidth - startHandlerPos
-          }) : this._track.setAttributes({
+          } else this._track.setAttributes({
             width: startHandlerPos
           });
         } else {
@@ -29918,10 +29646,7 @@
               y: Math.min(startHandlerPos, endHandlerPos),
               height: Math.abs(startHandlerPos - endHandlerPos)
             });
-          } else inverse ? this._track.setAttributes({
-            y: startHandlerPos,
-            height: railHeight - startHandlerPos
-          }) : this._track.setAttributes({
+          } else this._track.setAttributes({
             height: startHandlerPos
           });
         }
@@ -30081,7 +29806,6 @@
             handlerText: handlerText,
             showTooltip: showTooltip,
             tooltip: tooltip,
-            inverse: inverse,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
           domain = [],
@@ -30114,8 +29838,7 @@
           handlerText: handlerText,
           showTooltip: showTooltip,
           tooltip: tooltip,
-          disableTriggerEvent: disableTriggerEvent,
-          inverse: inverse
+          disableTriggerEvent: disableTriggerEvent
         });
         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();
       }
@@ -30125,8 +29848,7 @@
       _getTrackColor() {
         const {
           colors: colors,
-          layout: layout,
-          inverse: inverse
+          layout: layout
         } = this.attribute;
         if (isEmpty(colors)) return;
         const count = colors.length;
@@ -30139,16 +29861,15 @@
             color: colors[i]
           });
         }
-        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;
+        const isHorizontal = "horizontal" === layout;
+        return {
+          gradient: "linear",
+          stops: stops,
+          x0: 0,
+          y0: 0,
+          x1: isHorizontal ? 1 : 0,
+          y1: isHorizontal ? 0 : 1
+        };
       }
       _updateColor() {
         const {
@@ -30270,8 +29991,7 @@
             showTooltip: showTooltip,
             tooltip: tooltip,
             sizeBackground: sizeBackground,
-            disableTriggerEvent: disableTriggerEvent,
-            inverse: inverse
+            disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
           mainContainer = graphicCreator$1.group({
             x: 0,
@@ -30305,13 +30025,12 @@
           handlerText: handlerText,
           showTooltip: showTooltip,
           tooltip: tooltip,
-          disableTriggerEvent: disableTriggerEvent,
-          inverse: inverse
+          disableTriggerEvent: disableTriggerEvent
         });
         mainContainer.add(slider);
         let path,
           start = 0;
-        "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));
+        "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));
         const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
@@ -33017,9 +32736,7 @@
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
-            this.component = new LineAxis(merge({
-                disableTriggerEvent: this.table.options.disableInteraction
-            }, axisStylrAttrs, attrs));
+            this.component = new LineAxis(merge({}, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
             this.component.originAxis = this;
         }
@@ -37491,7 +37208,7 @@
             this.numberType = CHART_NUMBER_TYPE;
             this.isShareChartSpec = isShareChartSpec;
             if (!params.chartInstance) {
-                const chartInstance = (this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
+                const chartInstance = new params.ClassType(params.spec, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -37501,9 +37218,8 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                })));
+                });
                 chartInstance.renderSync();
-                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -37521,53 +37237,34 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: 0,
-                    x2: x2 - x1,
-                    y1: 0,
-                    y2: y2 - y1
+                    x1: x1 - table.scrollLeft,
+                    x2: x2 - table.scrollLeft,
+                    y1: y1 - table.scrollTop,
+                    y2: y2 - table.scrollTop
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (chartStage) => {
-                    const stage = this.stage;
-                    const ctx = chartStage.window.getContext();
-                    const stageMatrix = stage.window.getViewBoxTransform();
-                    const viewBox = stage.window.getViewBox();
+                beforeRender: (stage) => {
+                    const ctx = stage.window.getContext();
                     ctx.inuse = true;
                     ctx.clearMatrix();
-                    ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, true);
-                    ctx.translate(viewBox.x1, viewBox.y1);
                     ctx.setTransformForCurrent(true);
                     ctx.beginPath();
                     ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
                     ctx.clip();
-                    ctx.clearMatrix();
-                    if (!chartStage.needRender) {
-                        chartStage.pauseRender();
-                        table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds);
-                        table.scenegraph.updateNextFrame();
-                    }
                 },
                 afterRender(stage) {
                     const ctx = stage.window.getContext();
                     ctx.inuse = false;
-                    stage.needRender = false;
-                    chartStage.resumeRender();
                 }
-            }));
-            const chartStage = this.activeChartInstance.getStage();
-            const matrix = this.globalTransMatrix.clone();
-            const stageMatrix = this.stage.window.getViewBoxTransform();
-            matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
-            chartStage.window.setViewBoxTransform &&
-                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) => {
@@ -37603,12 +37300,11 @@
             const cellGroup = this.parent;
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
-            const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
             return {
-                x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
-                x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
-                y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
-                y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
             };
         }
     }
@@ -37639,10 +37335,6 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
-        bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
-        bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
-        bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
-        bodyBound.y2 = bodyBound.y2 + (table.options.viewBox?.y1 ?? 0);
         return bodyBound;
     }
 
@@ -37701,8 +37393,7 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
-            tableChartOption: table.options.chartOption
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -37942,7 +37633,7 @@
                     wordBreak: 'break-word',
                     heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
                     pickable: false,
-                    dx: hierarchyOffset + _contentOffset,
+                    dx: (textAlign === 'left' ? hierarchyOffset : 0) + _contentOffset,
                     whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
@@ -38044,7 +37735,8 @@
                     lineClamp,
                     wordBreak: 'break-word',
                     whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
-                    dx: _contentOffset + (!contentLeftIcons.length && !contentRightIcons.length ? hierarchyOffset : 0)
+                    dx: (textAlign === 'left' ? (!contentLeftIcons.length && !contentRightIcons.length ? hierarchyOffset : 0) : 0) +
+                        _contentOffset
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
                 wrapText.name = 'text';
@@ -38261,7 +37953,7 @@
         let contentHeight;
         if (textMark instanceof Text$1) {
             oldTextHeight = textMark.AABBBounds.height();
-            textMark.setAttribute('maxLineWidth', distWidth - leftIconWidth - rightIconHeight - (padding[1] + padding[3]));
+            textMark.setAttribute('maxLineWidth', distWidth - leftIconWidth - rightIconHeight - (padding[1] + padding[3]) - (textMark.attribute.dx ?? 0));
             contentHeight = textMark.AABBBounds.height();
         }
         else if (textMark instanceof RichText) {
@@ -38945,7 +38637,7 @@
                     wordBreak: 'break-word',
                     heightLimit: cellHeight - (padding[0] + padding[2]),
                     pickable: false,
-                    dx: hierarchyOffset,
+                    dx: textAlign === 'left' ? hierarchyOffset : 0,
                     x
                 };
                 textMark.setAttributes(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
@@ -40639,7 +40331,8 @@
                 }
             }
             else if (autoWrapText) {
-                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth;
+                const hierarchyOffset = getHierarchyOffset(col, row, table);
+                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - hierarchyOffset;
                 utilTextMark.setAttributes({
                     maxLineWidth,
                     text: lines,
@@ -42458,65 +42151,48 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        chartInstance.updateViewBox({
-            x1: 0,
-            x2: viewBox.x2 - viewBox.x1,
-            y1: 0,
-            y2: viewBox.y2 - viewBox.y1
-        }, false, false);
-        const chartStage = chartInstance.getStage();
-        const matrix = chart.globalTransMatrix.clone();
-        const stageMatrix = chart.stage.window.getViewBoxTransform();
-        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
-        chartStage.window.setViewBoxTransform &&
-            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-        const { table } = chart.getRootNode();
-        let updateSpec = false;
-        if (table.options.specFormat) {
-            const formatResult = table.options.specFormat(chart.attribute.spec);
-            if (formatResult.needFormatSpec && formatResult.spec) {
-                const spec = formatResult.spec;
-                chartInstance.updateSpecSync(spec);
-                updateSpec = true;
-            }
-        }
-        if (!updateSpec) {
-            axes?.forEach((axis, index) => {
-                if (axis.type === 'band') {
-                    chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
-                }
-                else {
-                    chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
-                }
-            });
-            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
-            if (typeof dataId === 'string') {
-                chartInstance.updateDataSync(dataId, data ?? []);
+        axes?.forEach((axis, index) => {
+            if (axis.type === 'band') {
+                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
             }
             else {
-                const dataBatch = [];
-                for (const dataIdStr in dataId) {
-                    const dataIdAndField = dataId[dataIdStr];
-                    const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                    dataBatch.push({
-                        id: dataIdStr,
-                        values: dataIdAndField
-                            ? data?.filter((item) => {
-                                return item.hasOwnProperty(dataIdAndField);
-                            }) ?? []
-                            : data ?? [],
-                        fields: series?.data?.fields
-                    });
-                    if (!chartInstance.updateFullDataSync) {
-                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                            ? data?.filter((item) => {
-                                return item.hasOwnProperty(dataIdAndField);
-                            }) ?? []
-                            : data ?? []);
-                    }
+                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
+            }
+        });
+        chartInstance.updateViewBox({
+            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
+            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
+            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
+            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+        }, false, false);
+        const table = chart.getRootNode().table;
+        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
+        if (typeof dataId === 'string') {
+            chartInstance.updateDataSync(dataId, data ?? []);
+        }
+        else {
+            const dataBatch = [];
+            for (const dataIdStr in dataId) {
+                const dataIdAndField = dataId[dataIdStr];
+                const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                dataBatch.push({
+                    id: dataIdStr,
+                    values: dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? [],
+                    fields: series?.data?.fields
+                });
+                if (!chartInstance.updateFullDataSync) {
+                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? []);
                 }
-                chartInstance.updateFullDataSync?.(dataBatch);
             }
+            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -42578,7 +42254,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -42586,7 +42262,6 @@
             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)) {
@@ -42600,27 +42275,6 @@
                 }
             }
             else if (activeChartInstance) {
-                if (table.options.specFormat) {
-                    const formatResult = table.options.specFormat(chart.attribute.spec);
-                    if (formatResult.needFormatSpec && formatResult.spec) {
-                        const spec = formatResult.spec;
-                        activeChartInstance.updateSpecSync(spec);
-                        return;
-                    }
-                }
-                const viewBox = chart.getViewBox();
-                activeChartInstance.updateViewBox({
-                    x1: 0,
-                    x2: viewBox.x2 - viewBox.x1,
-                    y1: 0,
-                    y2: viewBox.y2 - viewBox.y1
-                }, false, false);
-                const chartStage = activeChartInstance.getStage();
-                chartStage.needRender = true;
-                const matrix = chart.globalTransMatrix.clone();
-                const stageMatrix = chart.stage.window.getViewBoxTransform().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 ?? []);
                 }
@@ -42650,13 +42304,13 @@
                 }
             }
             else {
-                if (table.internalProps.renderChartAsync) {
+                if (chart.getRootNode().table.internalProps.renderChartAsync) {
                     if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
                         chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
                         chartRenderQueueList.push(chart);
                     }
                     if (!IsHandlingChartQueue()) {
-                        startRenderChartQueue(table);
+                        startRenderChartQueue(chart.getRootNode().table);
                     }
                 }
                 else {
@@ -42665,7 +42319,31 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            this._draw(chart, {}, false, drawContext, params);
+            const { context } = drawContext;
+            if (!context) {
+                return;
+            }
+            const { clip } = chart.attribute;
+            if (clip) {
+                context.save();
+            }
+            else {
+                context.highPerformanceSave();
+            }
+            context.transformFromMatrix(chart.transMatrix, true);
+            context.beginPath();
+            if (params.skipDraw) {
+                this.drawShape(chart, context, 0, 0, drawContext, params, () => false, () => false);
+            }
+            else {
+                this.drawShape(chart, context, 0, 0, drawContext);
+            }
+            if (clip) {
+                context.restore();
+            }
+            else {
+                context.highPerformanceRestore();
+            }
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -47231,15 +46909,6 @@
             });
         }
     }
-    function clearCellChartCacheImage(col, row, scenegraph) {
-        const cellGroup = scenegraph.getCell(col, row);
-        cellGroup.children.forEach((node) => {
-            if (node.type === 'chart') {
-                node.cacheCanvas = null;
-                node.addUpdateBoundTag();
-            }
-        });
-    }
     function updateChartData(scenegraph) {
         const table = scenegraph.table;
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -48064,12 +47733,7 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (table.options.canvas && table.options.viewBox) {
-                vglobal.setEnv('browser');
-                width = table.options.viewBox.x2 - table.options.viewBox.x1;
-                height = table.options.viewBox.y2 - table.options.viewBox.y1;
-            }
-            else if (Env.mode === 'node') {
+            if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -48087,15 +47751,9 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                beforeRender: (stage) => {
-                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
-                },
-                afterRender: (stage) => {
-                    this.table.options.afterRender && this.table.options.afterRender(stage);
+                afterRender: () => {
                     this.table.fireListeners('after_render', null);
-                },
-                canvasControled: !table.options.canvas,
-                viewBox: table.options.viewBox
+                }
             });
             this.stage.defaultLayer.setTheme({
                 group: {
@@ -51463,8 +51121,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.viewport.x,
-                y: e.viewport.y
+                x: e.x,
+                y: e.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -52530,14 +52188,12 @@
                 e.preventDefault();
             }
         });
-        if (!table.options.canvas) {
-            handler.on(table.getContainer(), 'resize', e => {
-                if (e.width === 0 && e.height === 0) {
-                    return;
-                }
-                table.resize();
-            });
-        }
+        handler.on(table.getContainer(), 'resize', e => {
+            if (e.width === 0 && e.height === 0) {
+                return;
+            }
+            table.resize();
+        });
         function pasteHtmlToTable(item) {
             const ranges = table.stateManager.select.ranges;
             const selectRangeLength = ranges.length;
@@ -53057,7 +52713,7 @@
         constructor(table) {
             this.table = table;
             this.inertiaScroll = new InertiaScroll(table.stateManager);
-            if (Env.mode === 'node' || table.options.disableInteraction) {
+            if (Env.mode === 'node') {
                 return;
             }
             this.bindOuterEvent();
@@ -55524,7 +55180,6 @@
     }
 
     class FocusInput extends EventTarget {
-        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -55544,7 +55199,6 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
-            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -55564,7 +55218,6 @@
             return this._input;
         }
         release() {
-            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -55698,8 +55351,7 @@
                 height: this.table.tableNoFrameHeight
             });
             const legend = new DiscreteLegend(merge({}, attrs, {
-                defaultSelected: this.selectedData,
-                disableTriggerEvent: this.table.options.disableInteraction
+                defaultSelected: this.selectedData
             }));
             legend.name = 'legend';
             this.legendComponent = legend;
@@ -56598,7 +56250,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.23.1-alpha.2";
+        version = "0.23.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -56611,7 +56263,7 @@
         columnWidthComputeMode;
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node' && !options.canvas) {
+            if (!container && options.mode !== 'node') {
                 throw new Error("vtable's container is undefined");
             }
             const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth } = options;
@@ -56647,14 +56299,7 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (this.options.canvas) {
-                internalProps.element = this.options.canvas.parentElement;
-                internalProps.element.style.position = 'relative';
-                internalProps.focusControl = new FocusInput(this, internalProps.element);
-                internalProps.canvas = this.options.canvas;
-                internalProps.context = internalProps.canvas.getContext('2d');
-            }
-            else if (Env.mode !== 'node') {
+            if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -56995,21 +56640,7 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            this.tableX = 0;
-            this.tableY = 0;
-            if (this.options.canvas && this.options.viewBox) {
-                widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
-                heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
-                if (this?.scenegraph?.stage) {
-                    if (this.options.viewBox) {
-                        this.scenegraph.stage.setViewBox(this.options.viewBox, false);
-                    }
-                    else {
-                        this.scenegraph.stage.resize(widthP, heightP);
-                    }
-                }
-            }
-            else if (Env.mode === 'browser') {
+            if (Env.mode === 'browser') {
                 const element = this.getElement();
                 const width1 = element.parentElement?.offsetWidth ?? 1 - 1;
                 const height1 = element.parentElement?.offsetHeight ?? 1 - 1;
@@ -57055,22 +56686,6 @@
                 }
             }
         }
-        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';
         }
@@ -57563,8 +57178,6 @@
             const visibleRect = this.getVisibleRect();
             rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
             rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
-            rect.offsetLeft(this.options.viewBox?.x1 ?? 0);
-            rect.offsetTop(this.options.viewBox?.y1 ?? 0);
             return rect;
         }
         getVisibleRect() {
@@ -57718,9 +57331,8 @@
             }
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
-            internalProps.focusControl.release();
             const { parentElement } = internalProps.element;
-            if (parentElement && !this.options.canvas) {
+            if (parentElement) {
                 parentElement.removeChild(internalProps.element);
             }
             this.isReleased = true;
@@ -57901,8 +57513,8 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - (this.options.viewBox?.x1 ?? 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
             return { x, y, inTable };
         }
         getTheme() {
@@ -68178,14 +67790,6 @@
             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);
         }
@@ -68884,7 +68488,7 @@
     }
 
     registerForVrender();
-    const version = "0.23.1-alpha.2";
+    const version = "0.23.1";
     function getIcons() {
         return get$2();
     }