@visactor/vtable 1.0.0 → 1.0.1-beta.0

package/dist/vtable.js

@@ -936,6 +936,9 @@
       createDom(params) {
         return this._env || this.setEnv("browser"), this.envContribution.createDom(params);
       }
+      updateDom(dom, params) {
+        return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
+      }
       getElementTop(dom) {
         let baseWindow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
         return this._env || this.setEnv("browser"), this.envContribution.getElementTop(dom, baseWindow);
@@ -1571,6 +1574,89 @@
       return Number(a);
     }
 
+    const hasConsole = "undefined" != typeof console;
+    function log(method, level, input) {
+      const args = [level].concat([].slice.call(input));
+      hasConsole && console[method].apply(console, args);
+    }
+    var LoggerLevel;
+    !function (LoggerLevel) {
+      LoggerLevel[LoggerLevel.None = 0] = "None", LoggerLevel[LoggerLevel.Error = 1] = "Error", LoggerLevel[LoggerLevel.Warn = 2] = "Warn", LoggerLevel[LoggerLevel.Info = 3] = "Info", LoggerLevel[LoggerLevel.Debug = 4] = "Debug";
+    }(LoggerLevel || (LoggerLevel = {}));
+    class Logger {
+      static getInstance(level, method) {
+        return Logger._instance && isNumber$4(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+      }
+      static setInstance(logger) {
+        return Logger._instance = logger;
+      }
+      static setInstanceLevel(level) {
+        Logger._instance ? Logger._instance.level(level) : Logger._instance = new Logger(level);
+      }
+      static clearInstance() {
+        Logger._instance = null;
+      }
+      constructor() {
+        let level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LoggerLevel.None;
+        let method = arguments.length > 1 ? arguments[1] : undefined;
+        this._onErrorHandler = [], this._level = level, this._method = method;
+      }
+      addErrorHandler(handler) {
+        this._onErrorHandler.find(h => h === handler) || this._onErrorHandler.push(handler);
+      }
+      removeErrorHandler(handler) {
+        const index = this._onErrorHandler.findIndex(h => h === handler);
+        index < 0 || this._onErrorHandler.splice(index, 1);
+      }
+      callErrorHandler() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        this._onErrorHandler.forEach(h => h(...args));
+      }
+      canLogInfo() {
+        return this._level >= LoggerLevel.Info;
+      }
+      canLogDebug() {
+        return this._level >= LoggerLevel.Debug;
+      }
+      canLogError() {
+        return this._level >= LoggerLevel.Error;
+      }
+      canLogWarn() {
+        return this._level >= LoggerLevel.Warn;
+      }
+      level(levelValue) {
+        return arguments.length ? (this._level = +levelValue, this) : this._level;
+      }
+      error() {
+        var _a;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return this._level >= LoggerLevel.Error && (this._onErrorHandler.length ? this.callErrorHandler(...args) : log(null !== (_a = this._method) && void 0 !== _a ? _a : "error", "ERROR", args)), this;
+      }
+      warn() {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return this._level >= LoggerLevel.Warn && log(this._method || "warn", "WARN", args), this;
+      }
+      info() {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        return this._level >= LoggerLevel.Info && log(this._method || "log", "INFO", args), this;
+      }
+      debug() {
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        return this._level >= LoggerLevel.Debug && log(this._method || "log", "DEBUG", args), this;
+      }
+    }
+    Logger._instance = null;
+
     function bisect$1(a, x) {
       let lo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       let hi = arguments.length > 3 ? arguments[3] : undefined;
@@ -2638,9 +2724,6 @@
         y: (x - origin.x) * Math.sin(deg) + (origin.y - y) * Math.cos(deg) + origin.y
       };
     }
-    function toDeg(angle) {
-      return angle / 180 * Math.PI;
-    }
     function getCenterPoint(box) {
       return {
         x: (box.x1 + box.x2) / 2,
@@ -2648,7 +2731,7 @@
       };
     }
     function toRect(box, isDeg) {
-      const deg = isDeg ? box.angle : toDeg(box.angle),
+      const deg = isDeg ? box.angle : degreeToRadian(box.angle),
         cp = getCenterPoint(box);
       return [rotate$1({
         x: box.x1,
@@ -2683,10 +2766,10 @@
         BC = vector(rect1[1], rect1[2]),
         A1B1 = vector(rect2[0], rect2[1]),
         B1C1 = vector(rect2[1], rect2[2]),
-        deg11 = isDeg ? box1.angle : toDeg(box1.angle);
-      let deg12 = isDeg ? box1.angle + halfPi$1 : toDeg(90 - box1.angle);
-      const deg21 = isDeg ? box2.angle : toDeg(box2.angle);
-      let deg22 = isDeg ? box2.angle + halfPi$1 : toDeg(90 - box2.angle);
+        deg11 = isDeg ? box1.angle : degreeToRadian(box1.angle);
+      let deg12 = isDeg ? box1.angle + halfPi$1 : degreeToRadian(90 - box1.angle);
+      const deg21 = isDeg ? box2.angle : degreeToRadian(box2.angle);
+      let deg22 = isDeg ? box2.angle + halfPi$1 : degreeToRadian(90 - box2.angle);
       deg12 > pi2 && (deg12 -= pi2), deg22 > pi2 && (deg22 -= pi2);
       const isCover = (checkAxisRadius, deg, targetAxis1, targetAxis2) => {
         const checkAxis = [Math.cos(deg), Math.sin(deg)];
@@ -2918,88 +3001,53 @@
     }
     TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
 
-    const hasConsole = "undefined" != typeof console;
-    function log(method, level, input) {
-      const args = [level].concat([].slice.call(input));
-      hasConsole && console[method].apply(console, args);
-    }
-    var LoggerLevel;
-    !function (LoggerLevel) {
-      LoggerLevel[LoggerLevel.None = 0] = "None", LoggerLevel[LoggerLevel.Error = 1] = "Error", LoggerLevel[LoggerLevel.Warn = 2] = "Warn", LoggerLevel[LoggerLevel.Info = 3] = "Info", LoggerLevel[LoggerLevel.Debug = 4] = "Debug";
-    }(LoggerLevel || (LoggerLevel = {}));
-    class Logger {
-      static getInstance(level, method) {
-        return Logger._instance && isNumber$4(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
-      }
-      static setInstance(logger) {
-        return Logger._instance = logger;
-      }
-      static setInstanceLevel(level) {
-        Logger._instance ? Logger._instance.level(level) : Logger._instance = new Logger(level);
-      }
-      static clearInstance() {
-        Logger._instance = null;
-      }
-      constructor() {
-        let level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LoggerLevel.None;
-        let method = arguments.length > 1 ? arguments[1] : undefined;
-        this._onErrorHandler = [], this._level = level, this._method = method;
-      }
-      addErrorHandler(handler) {
-        this._onErrorHandler.find(h => h === handler) || this._onErrorHandler.push(handler);
-      }
-      removeErrorHandler(handler) {
-        const index = this._onErrorHandler.findIndex(h => h === handler);
-        index < 0 || this._onErrorHandler.splice(index, 1);
-      }
-      callErrorHandler() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        this._onErrorHandler.forEach(h => h(...args));
-      }
-      canLogInfo() {
-        return this._level >= LoggerLevel.Info;
-      }
-      canLogDebug() {
-        return this._level >= LoggerLevel.Debug;
-      }
-      canLogError() {
-        return this._level >= LoggerLevel.Error;
-      }
-      canLogWarn() {
-        return this._level >= LoggerLevel.Warn;
-      }
-      level(levelValue) {
-        return arguments.length ? (this._level = +levelValue, this) : this._level;
-      }
-      error() {
-        var _a;
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        return this._level >= LoggerLevel.Error && (this._onErrorHandler.length ? this.callErrorHandler(...args) : log(null !== (_a = this._method) && void 0 !== _a ? _a : "error", "ERROR", args)), this;
-      }
-      warn() {
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-        return this._level >= LoggerLevel.Warn && log(this._method || "warn", "WARN", args), this;
-      }
-      info() {
-        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-          args[_key4] = arguments[_key4];
-        }
-        return this._level >= LoggerLevel.Info && log(this._method || "log", "INFO", args), this;
-      }
-      debug() {
-        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-          args[_key5] = arguments[_key5];
-        }
-        return this._level >= LoggerLevel.Debug && log(this._method || "log", "DEBUG", args), this;
+    const calculateAnchorOfBounds = (bounds, anchorType) => {
+      const {
+          x1: x1,
+          x2: x2,
+          y1: y1,
+          y2: y2
+        } = bounds,
+        rectWidth = Math.abs(x2 - x1),
+        rectHeight = Math.abs(y2 - y1);
+      let anchorX = (x1 + x2) / 2,
+        anchorY = (y1 + y2) / 2,
+        sx = 0,
+        sy = 0;
+      switch (anchorType) {
+        case "top":
+        case "inside-top":
+          sy = -.5;
+          break;
+        case "bottom":
+        case "inside-bottom":
+          sy = .5;
+          break;
+        case "left":
+        case "inside-left":
+          sx = -.5;
+          break;
+        case "right":
+        case "inside-right":
+          sx = .5;
+          break;
+        case "top-right":
+          sx = .5, sy = -.5;
+          break;
+        case "top-left":
+          sx = -.5, sy = -.5;
+          break;
+        case "bottom-right":
+          sx = .5, sy = .5;
+          break;
+        case "bottom-left":
+          sx = -.5, sy = .5;
       }
-    }
-    Logger._instance = null;
+      return anchorX += sx * rectWidth, anchorY += sy * rectHeight, {
+        x: anchorX,
+        y: anchorY
+      };
+    };
 
     function normalizePadding(padding) {
       if (isValidNumber$1(padding)) return [padding, padding, padding, padding];
@@ -3031,6 +3079,22 @@
       return [0, 0, 0, 0];
     }
 
+    const styleStringToObject = function () {
+      let styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+      const res = {};
+      return styleStr.split(";").forEach(item => {
+        if (item) {
+          const arr = item.split(":");
+          if (2 === arr.length) {
+            const key = arr[0].trim(),
+              value = arr[1].trim();
+            key && value && (res[key] = value);
+          }
+        }
+      }), res;
+    };
+    const lowerCamelCaseToMiddle = str => str.replace(/([A-Z])/g, "-$1").toLowerCase();
+
     const circleThreshold = tau - 1e-8;
     class BoundsContext {
       constructor(bounds) {
@@ -4156,6 +4220,8 @@
       pickStrokeBuffer: 0
     };
     const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
+      forceBoundsWidth: void 0,
+      forceBoundsHeight: void 0,
       opacity: 1,
       background: null,
       backgroundOpacity: 1,
@@ -4182,6 +4248,7 @@
     };
     const DefaultAttribute = Object.assign(Object.assign(Object.assign({
       strokeSeg: null,
+      renderable: !0,
       pickable: !0,
       childrenPickable: !0,
       fillPickable: !0,
@@ -4237,7 +4304,8 @@
       flexWrap: "wrap",
       justifyContent: "flex-start",
       alignItems: "flex-start",
-      alignContent: "flex-start"
+      alignContent: "flex-start",
+      baseOpacity: 1
     });
     const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: "",
@@ -4273,7 +4341,7 @@
       strokeBoundsBuffer: 0,
       cornerRadius: 0
     });
-    const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+    Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
       height: 0,
       x1: 0,
@@ -4300,6 +4368,7 @@
       textBaseline: "top",
       layoutDirection: "horizontal",
       textConfig: [],
+      disableAutoWrapLine: !1,
       maxHeight: void 0,
       maxWidth: void 0,
       singleLine: !1
@@ -4374,7 +4443,11 @@
     function applyFillStyle(ctx, character) {
       const fillStyle = character && character.fill || defaultFormatting.fill;
       if (!fillStyle) return void (ctx.globalAlpha = 0);
-      ctx.globalAlpha = 1, ctx.fillStyle = fillStyle;
+      const {
+        fillOpacity = 1,
+        opacity = 1
+      } = character;
+      ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle;
       let fontSize = character.fontSize || 16;
       switch (character.script) {
         case "super":
@@ -4393,7 +4466,11 @@
     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;
+      const {
+        strokeOpacity = 1,
+        opacity = 1
+      } = character;
+      ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
       let fontSize = character.fontSize || 16;
       switch (character.script) {
         case "super":
@@ -5113,7 +5190,6 @@
         symbol: DefaultSymbolAttribute,
         text: DefaultTextAttribute,
         rect: DefaultRectAttribute,
-        rect3d: DefaultRect3dAttribute,
         polygon: DefaultPolygonAttribute,
         richtext: DefaultRichTextAttribute,
         richtextIcon: DefaultRichTextIconAttribute,
@@ -5132,7 +5208,6 @@
         symbol: Object.assign({}, defaultThemeObj.symbol),
         text: Object.assign({}, defaultThemeObj.text),
         rect: Object.assign({}, defaultThemeObj.rect),
-        rect3d: Object.assign({}, defaultThemeObj.rect3d),
         polygon: Object.assign({}, defaultThemeObj.polygon),
         richtext: Object.assign({}, defaultThemeObj.richtext),
         richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
@@ -5605,7 +5680,19 @@
         }, this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = manager;
       }
       composedPath() {
-        return !this.manager || this.path && this.path[this.path.length - 1] === this.target || (this.path = this.target ? this.manager.propagationPath(this.target) : []), this.path;
+        return !this.manager || this.path && this.path[this.path.length - 1] === this.target || (this.path = this.target ? this.manager.propagationPath(this.target) : []), this.composedDetailPath(), this.path;
+      }
+      composedDetailPath() {
+        this.pickParams && this.pickParams.graphic && (this.detailPath = this.path.slice(), this._composedDetailPath(this.pickParams));
+      }
+      _composedDetailPath(params) {
+        if (params && params.graphic) {
+          const g = this.pickParams.graphic;
+          if (g.stage) {
+            const path = g.stage.eventSystem.manager.propagationPath(g);
+            this.detailPath.push(path), this._composedDetailPath(params.params);
+          }
+        }
       }
       preventDefault() {
         this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault(), this.defaultPrevented = !0;
@@ -5724,7 +5811,7 @@
     }
     let EventManager$1 = class EventManager {
       constructor(root, config) {
-        this.dispatch = new EventEmitter(), this.cursorTarget = null, this.mappingState = {
+        this.dispatch = new EventEmitter(), this.cursorTarget = null, this.pauseNotify = !1, this.mappingState = {
           trackingData: {}
         }, this.eventPool = new Map(), this.onPointerDown = (from, target) => {
           if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
@@ -5885,6 +5972,7 @@
         return propagationPath.reverse(), propagationPath;
       }
       notifyTarget(e, type) {
+        if (this.pauseNotify) return;
         type = null != type ? type : e.type;
         const key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${type}capture` : type;
         this.notifyListeners(e, key), e.eventPhase === e.AT_TARGET && this.notifyListeners(e, type);
@@ -5969,7 +6057,7 @@
       dispatchEvent(e) {
         var _a;
         if (!(e instanceof FederatedEvent)) throw new Error("DisplayObject cannot propagate events outside of the Federated Events API");
-        return e.defaultPrevented = !1, e.path = [], e.target = this, null === (_a = null == e ? void 0 : e.manager) || void 0 === _a || _a.dispatchEvent(e), !e.defaultPrevented;
+        return e.defaultPrevented = !1, e.path = [], e.detailPath && (e.detailPath = []), e.target = this, null === (_a = null == e ? void 0 : e.manager) || void 0 === _a || _a.dispatchEvent(e), !e.defaultPrevented;
       },
       emit(eventName, object) {
         return this.dispatchEvent(new CustomEvent(eventName, object));
@@ -6156,6 +6244,12 @@
         nativeEvent.composedPath && nativeEvent.composedPath().length > 0 && (target = nativeEvent.composedPath()[0]);
         return target !== (this.domElement.getNativeHandler ? this.domElement.getNativeHandler().nativeCanvas : this.domElement);
       }
+      pauseTriggerEvent() {
+        this.manager.pauseNotify = !0;
+      }
+      resumeTriggerEvent() {
+        this.manager.pauseNotify = !1;
+      }
     }
 
     class ManualTickHandler {
@@ -8546,7 +8640,7 @@
     }
     function drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
       if (!graphic.pathProxy) return !1;
-      const themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type],
+      const themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type.replace("3d", "")],
         {
           fill = themeAttributes.fill,
           stroke = themeAttributes.stroke,
@@ -8904,6 +8998,15 @@
       let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
       return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
     }
+    function textAttributesToStyle(attrs) {
+      const style = {};
+      return ["textAlign", "fontFamily", "fontVariant", "fontStyle", "fontWeight"].forEach(key => {
+        attrs[key] && (style[lowerCamelCaseToMiddle(key)] = attrs[key]);
+      }), ["fontSize", "lineHeight"].forEach(key => {
+        const styleKey = lowerCamelCaseToMiddle(key);
+        isNil$3(attrs[key]) || (style[styleKey] = /^[0-9]*$/.test(`${attrs[key]}`) ? `${attrs[key]}px` : `${attrs[key]}`);
+      }), attrs.underline ? style["text-decoration"] = "underline" : attrs.lineThrough && (style["text-decoration"] = "line-through"), attrs.fill && isString$2(attrs.fill) && (style.color = attrs.fill), style;
+    }
 
     class CanvasTextLayout {
       constructor(fontFamily, options, textMeasure) {
@@ -10326,7 +10429,7 @@
             vertices: [],
             edges: []
           },
-          rectTheme = getTheme(this).rect3d,
+          rectTheme = getTheme(this).rect,
           {
             x1: x1,
             y1: y1,
@@ -10524,11 +10627,11 @@
             } = this.lines[i];
             if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) return lastLineTag;
             let lastLine = !1;
-            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           } else {
             const detalHeight = Math.floor((frameHeight - this.actualHeight) / 2);
             "vertical" === this.layoutDirection ? deltaX += detalHeight : deltaY += detalHeight;
-            for (let i = 0; i < this.lines.length; i++) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+            for (let i = 0; i < this.lines.length; i++) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           }
         } else if ("bottom" === this.verticalDirection && "vertical" !== this.layoutDirection) for (let i = 0; i < this.lines.length; i++) {
           const {
@@ -10536,11 +10639,11 @@
               height: height
             } = this.lines[i],
             y = frameHeight - this.lines[i].top - this.lines[i].height;
-          if (0 === frameHeight) this.lines[i].draw(ctx, !1, deltaX, y + deltaY, drawIcon);else {
+          if (0 === frameHeight) this.lines[i].draw(ctx, !1, deltaX, y + deltaY, this.ellipsis, drawIcon);else {
             if (y + height > this[this.directionKey.top] + frameHeight || y < this[this.directionKey.top]) return lastLineTag;
             {
               let lastLine = !1;
-              this.ellipsis && this.lines[i + 1] && y - this.lines[i + 1].height < this[this.directionKey.top] && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, deltaX, y + deltaY, drawIcon);
+              this.ellipsis && this.lines[i + 1] && y - this.lines[i + 1].height < this[this.directionKey.top] && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, deltaX, y + deltaY, this.ellipsis, drawIcon);
             }
           }
         } else {
@@ -10551,11 +10654,11 @@
               top: top,
               height: height
             } = this.lines[i];
-            if (0 === frameHeight) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);else {
+            if (0 === frameHeight) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);else {
               if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) return lastLineTag;
               {
                 let lastLine = !1;
-                this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+                this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
               }
             }
           }
@@ -10594,7 +10697,8 @@
               height: height
             } = this.lines[i];
             if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) ;else if (this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight) {
-              const lineWidth = this.lines[i].getWidthWithEllips();
+              const ellipsis = !0 === this.ellipsis ? "..." : this.ellipsis || "",
+                lineWidth = this.lines[i].getWidthWithEllips(ellipsis);
               lineWidth > widthBound && (widthBound = lineWidth), heightBound += this.lines[i].height;
             } else this.lines[i].actualWidth > widthBound && (widthBound = this.lines[i].actualWidth), heightBound += this.lines[i].height;
           } else {
@@ -10609,7 +10713,8 @@
             y = frameHeight - this.lines[i].top - this.lines[i].height;
           if (0 === frameHeight) this.lines[i].actualWidth > widthBound && (widthBound = this.lines[i].actualWidth), heightBound += this.lines[i].height;else if (y + height > this[this.directionKey.top] + frameHeight || y < this[this.directionKey.top]) ;else {
             if (this.ellipsis && this.lines[i + 1] && y - this.lines[i + 1].height < this[this.directionKey.top]) {
-              const lineWidth = this.lines[i].getWidthWithEllips();
+              const ellipsis = !0 === this.ellipsis ? "..." : this.ellipsis || "",
+                lineWidth = this.lines[i].getWidthWithEllips(ellipsis);
               lineWidth > widthBound && (widthBound = lineWidth), heightBound += this.lines[i].height;
             } else this.lines[i].actualWidth > widthBound && (widthBound = this.lines[i].actualWidth), heightBound += this.lines[i].height;
           }
@@ -10620,7 +10725,8 @@
           } = this.lines[i];
           if (0 === frameHeight) this.lines[i].actualWidth > widthBound && (widthBound = this.lines[i].actualWidth), heightBound += this.lines[i].height;else if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) ;else {
             if (this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight) {
-              const lineWidth = this.lines[i].getWidthWithEllips();
+              const ellipsis = !0 === this.ellipsis ? "..." : this.ellipsis || "",
+                lineWidth = this.lines[i].getWidthWithEllips(ellipsis);
               lineWidth > widthBound && (widthBound = lineWidth), heightBound += this.lines[i].height;
             } else this.lines[i].actualWidth > widthBound && (widthBound = this.lines[i].actualWidth), heightBound += this.lines[i].height;
           }
@@ -10646,7 +10752,7 @@
         let halfDetaHeight = 0,
           deltaAscent = 0,
           deltaDescent = 0;
-        this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height);
+        this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
       }
       updateWidth() {
         const {
@@ -10659,11 +10765,11 @@
           left = this.left + deltaLeft;
         baseline += this.top;
         let direction = this.direction;
-        if (this.verticalEllipsis) text = "...", direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
+        if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
-          if ("add" === this.ellipsis) text += "...", "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+          if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += "...", "right" === textAlign || "end" === textAlign) {
+            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
               const {
                 width: width
               } = measureTextCanvas(this.text.slice(index), this.character);
@@ -10687,7 +10793,7 @@
         if ("add" === this.ellipsis) return width + this.ellipsisWidth;
         if ("replace" === this.ellipsis) {
           const index = getStrByWithCanvas(text, width - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-          text = text.slice(0, index), text += "...";
+          text = text.slice(0, index), text += this.ellipsisStr;
           const {
             width: measureWidth
           } = measureTextCanvas(this.text.slice(index), this.character);
@@ -10858,22 +10964,25 @@
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
-      draw(ctx, lastLine, x, y, drawIcon) {
-        if (lastLine) {
+      draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
+        if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
           let otherParagraphWidth = 0;
           for (let i = this.paragraphs.length - 1; i >= 0; i--) {
             const paragraph = this.paragraphs[i];
+            if (paragraph.overflow) continue;
             if (paragraph instanceof RichTextIcon) break;
             if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
               paragraph.verticalEllipsis = !0;
               break;
             }
+            const ellipsis = !0 === drawEllipsis ? "..." : drawEllipsis || "";
+            paragraph.ellipsisStr = ellipsis;
             const {
                 width: width
-              } = measureTextCanvas("...", paragraph.character),
+              } = measureTextCanvas(ellipsis, paragraph.character),
               ellipsisWidth = width || 0;
             if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
-              paragraph.ellipsis = "add";
+              lastLine && (paragraph.ellipsis = "add");
               break;
             }
             if (ellipsisWidth <= this.blankWidth + otherParagraphWidth + paragraph.width) {
@@ -10891,14 +11000,14 @@
           paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
         });
       }
-      getWidthWithEllips() {
+      getWidthWithEllips(ellipsis) {
         let otherParagraphWidth = 0;
         for (let i = this.paragraphs.length - 1; i >= 0; i--) {
           const paragraph = this.paragraphs[i];
           if (paragraph instanceof RichTextIcon) break;
           const {
               width: width
-            } = measureTextCanvas("...", paragraph.character),
+            } = measureTextCanvas(ellipsis, paragraph.character),
             ellipsisWidth = width || 0;
           if (ellipsisWidth <= this.blankWidth + otherParagraphWidth) {
             paragraph.ellipsis = "add", paragraph.ellipsisWidth = ellipsisWidth;
@@ -11057,7 +11166,10 @@
           fontFamily: fontFamily,
           fontStyle: fontStyle,
           fontWeight: fontWeight,
-          lineWidth: lineWidth
+          lineWidth: lineWidth,
+          opacity: opacity,
+          fillOpacity: fillOpacity,
+          strokeOpacity: strokeOpacity
         } = this.attribute;
         return Object.assign({
           fill: fill,
@@ -11066,7 +11178,10 @@
           fontFamily: fontFamily,
           fontStyle: fontStyle,
           fontWeight: fontWeight,
-          lineWidth: lineWidth
+          lineWidth: lineWidth,
+          opacity: opacity,
+          fillOpacity: fillOpacity,
+          strokeOpacity: strokeOpacity
         }, config);
       }
       doUpdateFrameCache() {
@@ -11083,7 +11198,8 @@
             textAlign: textAlign,
             textBaseline: textBaseline,
             layoutDirection: layoutDirection,
-            singleLine: singleLine
+            singleLine: singleLine,
+            disableAutoWrapLine: disableAutoWrapLine
           } = this.attribute,
           paragraphs = [];
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
@@ -11109,7 +11225,14 @@
           richTextHeightEnable = "number" == typeof height && Number.isFinite(height) && height > 0 && (!maxHeightFinite || height <= maxHeight),
           frame = new Frame(0, 0, (richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0) || 0, (richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
           wrapper = new Wrapper(frame);
-        for (let i = 0; i < paragraphs.length; i++) wrapper.deal(paragraphs[i]);
+        if (disableAutoWrapLine) {
+          let lineCount = 0,
+            skip = !1;
+          for (let i = 0; i < paragraphs.length; i++) {
+            const p = paragraphs[i];
+            skip ? (p.overflow = !0, p.left = 1 / 0, p.top = 1 / 0, !p.newLine && frame.lines[frame.lines.length - 1].paragraphs.push(p)) : wrapper.deal(p), frame.lines.length !== lineCount && (lineCount = frame.lines.length, wrapper.lineBuffer.length = 0, p.overflow = !0, p.left = 1e3, p.top = 1e3, frame.lines[frame.lines.length - 1].paragraphs.push(p), skip = !0), p.newLine && (skip = !1, wrapper.lineWidth = 0);
+          }
+        } else for (let i = 0; i < paragraphs.length; i++) wrapper.deal(paragraphs[i]);
         wrapper.send();
         if (!("horizontal" === frame.layoutDirection ? richTextWidthEnable : richTextHeightEnable)) {
           const frameSize = frame.getActualSizeWidthEllipsis();
@@ -12044,6 +12167,22 @@
           aabbBounds.union(node.AABBBounds);
         }), aabbBounds) : aabbBounds;
       }
+      updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+        const {
+          textAlign: textAlign,
+          textBaseline: textBaseline
+        } = attribute;
+        if (null != attribute.forceBoundsHeight) {
+          const h = isNumber$4(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
+            dy = textLayoutOffsetY(textBaseline, h, h);
+          aabbBounds.set(aabbBounds.x1, dy, aabbBounds.x2, dy + h);
+        }
+        if (null != attribute.forceBoundsWidth) {
+          const w = isNumber$4(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
+            dx = textDrawOffsetX(textAlign, w);
+          aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
+        }
+      }
       updateRichTextAABBBounds(attribute, richtextTheme, aabbBounds, graphic) {
         if (!this._validCheck(attribute, richtextTheme, aabbBounds, graphic)) return aabbBounds;
         if (!graphic) return aabbBounds;
@@ -12090,7 +12229,7 @@
         aabbBounds.translate(deltaX, deltaY);
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, graphic), aabbBounds;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || this.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, graphic), aabbBounds;
       }
       updateTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
         if (!this._validCheck(attribute, textTheme, aabbBounds, graphic)) return aabbBounds;
@@ -12112,7 +12251,7 @@
           const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
           boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
         }
-        return this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
+        return this.combindShadowAABBBounds(aabbBounds, graphic), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || this.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
       }
       updatePathAABBBounds(attribute, pathTheme, aabbBounds, graphic) {
         if (!this._validCheck(attribute, pathTheme, aabbBounds, graphic)) return aabbBounds;
@@ -12394,6 +12533,7 @@
       }
       _validCheck(attribute, theme, aabbBounds, graphic) {
         if (!graphic) return !0;
+        if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
         if (!graphic.valid) return aabbBounds.clear(), !1;
         const {
           visible = theme.visible
@@ -12434,11 +12574,17 @@
       }
       beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
         this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
+          if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+            if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+          }
           c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
         });
       }
       afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
         this._afterRenderContribitions && this._afterRenderContribitions.forEach(c => {
+          if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+            if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+          }
           c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
         });
       }
@@ -12538,6 +12684,10 @@
           context: context
         } = drawContext;
         if (!context) return;
+        const {
+          renderable: renderable
+        } = graphic.attribute;
+        if (!1 === renderable) return;
         context.highPerformanceSave();
         const data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
           {
@@ -13416,11 +13566,17 @@
       }
       drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb) {
         const {
-          width = groupAttribute.width,
-          height = groupAttribute.height,
+          x1: x1,
+          y1: y1,
+          x: originX = groupAttribute.x,
+          y: originY = groupAttribute.y,
           stroke = groupAttribute.stroke
         } = rect.attribute;
-        if (Array.isArray(stroke) && stroke.some(s => !1 === s)) {
+        let {
+          width: width,
+          height: height
+        } = rect.attribute;
+        if (width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0, Array.isArray(stroke) && stroke.some(s => !1 === s)) {
           if (context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute), context.beginPath(), context.moveTo(x, y), stroke[0] ? context.lineTo(x + width, y) : context.moveTo(x + width, y), stroke[1] ? context.lineTo(x + width, y + height) : context.moveTo(x + width, y + height), stroke[2] ? context.lineTo(x, y + height) : context.moveTo(x, y + height), stroke[3]) {
             const adjustY = stroke[0] ? y - context.lineWidth / 2 : y;
             context.lineTo(x, adjustY);
@@ -14844,7 +15000,7 @@
             strokeOpacity: fillOpacity
           };
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
           const dy = y + offsetY + fontSize + underlineOffset;
           context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
         }
@@ -14873,7 +15029,7 @@
           };
         let deltaY = -3;
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && 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();
         }
@@ -15177,6 +15333,13 @@
       }
       beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
         const baseGraphic = graphic.baseGraphic;
+        if (!baseGraphic.stage) {
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).removeChild(graphic);
+          }
+          return !0;
+        }
         if (baseGraphic) {
           this.processing = !0;
           const {
@@ -15317,7 +15480,7 @@
     DefaultRenderService = __decorate$X([injectable(), __param$u(0, inject(DrawContribution)), __metadata$G("design:paramtypes", [Object])], DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
-      bind(RenderService).to(DefaultRenderService).inSingletonScope();
+      bind(RenderService).to(DefaultRenderService);
     });
 
     const PickerService = Symbol.for("PickerService");
@@ -15871,7 +16034,7 @@
           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.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1, context.draw();
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -16090,9 +16253,10 @@
         } = drawContext;
         if (!context) return;
         const {
-          clip: clip
+          clip: clip,
+          baseOpacity = 1
         } = group.attribute;
-        clip ? context.save() : context.highPerformanceSave();
+        clip ? context.save() : context.highPerformanceSave(), context.baseGlobalAlpha *= baseOpacity;
         const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
           lastModelMatrix = context.modelMatrix;
         if (context.camera) {
@@ -16106,7 +16270,7 @@
           scrollY = groupAttribute.scrollY
         } = group.attribute;
         let p;
-        (scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, p && p.then ? p.then(() => {
+        (scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha /= baseOpacity, p && p.then ? p.then(() => {
           clip ? context.restore() : context.highPerformanceRestore();
         }) : clip ? context.restore() : context.highPerformanceRestore();
       }
@@ -16465,103 +16629,171 @@
 
     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, this.htmlMap = {}, this.renderId = 0;
       }
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
           stage && stage === this.pluginService.stage && this.drawHTML(context.stage.renderService);
-        }), application.graphicService.hooks.onRemove.tap(this.key, graphic => {
-          this.removeDom(graphic);
-        }), application.graphicService.hooks.onRelease.tap(this.key, graphic => {
-          this.removeDom(graphic);
         });
       }
       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();
       }
+      getWrapContainer(stage, userContainer, domParams) {
+        let nativeContainer;
+        return nativeContainer = userContainer ? "string" == typeof userContainer ? application.global.getElementById(userContainer) : userContainer : stage.window.getContainer(), {
+          wrapContainer: application.global.createDom(Object.assign({
+            tagName: "div",
+            parent: nativeContainer
+          }, domParams)),
+          nativeContainer: nativeContainer
+        };
+      }
+      parseDefaultStyleFromGraphic(graphic) {
+        const attrs = "text" === graphic.type && graphic.attribute ? graphic.attribute : getTheme(graphic).text;
+        return textAttributesToStyle(attrs);
+      }
+      getTransformOfText(graphic) {
+        const textTheme = getTheme(graphic).text,
+          {
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline
+          } = graphic.attribute,
+          cssAttrs = graphic.globalTransMatrix.toTransformAttrs(),
+          {
+            rotateDeg: rotateDeg,
+            scaleX: scaleX,
+            scaleY: scaleY
+          } = cssAttrs,
+          translateMap = {
+            left: "0",
+            start: "0",
+            end: "-100%",
+            center: "-50%",
+            right: "-100%",
+            top: "0",
+            middle: "-50%",
+            bottom: "-100%",
+            alphabetic: "-79%"
+          },
+          originMap = {
+            left: "0",
+            start: "0",
+            end: "100%",
+            center: "50%",
+            right: "100%",
+            top: "0",
+            middle: "50%",
+            bottom: "100%",
+            alphabetic: "79%"
+          };
+        return {
+          textAlign: textAlign,
+          transform: `translate(${translateMap[textAlign]},${translateMap[textBaseline]}) rotate(${rotateDeg}deg) scaleX(${scaleX}) scaleY(${scaleY})`,
+          transformOrigin: `${originMap[textAlign]} ${originMap[textBaseline]}`
+        };
+      }
+      updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, options) {
+        const {
+          pointerEvents: pointerEvents
+        } = options;
+        let calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
+        calculateStyle.display = !1 !== graphic.attribute.visible ? "block" : "none", calculateStyle.pointerEvents = !0 === pointerEvents ? "all" : pointerEvents || "none", wrapContainer.style.position || (wrapContainer.style.position = "absolute", nativeContainer.style.position = "relative");
+        let left = 0,
+          top = 0;
+        const b = graphic.globalAABBBounds;
+        let anchorType = options.anchorType;
+        if (isNil$3(anchorType) && (anchorType = "text" === graphic.type ? "position" : "boundsLeftTop"), "boundsLeftTop" === anchorType && (anchorType = "top-left"), "position" === anchorType || b.empty()) {
+          const matrix = graphic.globalTransMatrix;
+          left = matrix.e, top = matrix.f;
+        } else {
+          const anchor = calculateAnchorOfBounds(b, anchorType);
+          left = anchor.x, top = anchor.y;
+        }
+        const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
+          windowTL = stage.window.getTopLeft(!1),
+          offsetX = left + windowTL.left - containerTL.left,
+          offsetTop = top + windowTL.top - containerTL.top;
+        if (calculateStyle.left = `${offsetX}px`, calculateStyle.top = `${offsetTop}px`, "text" === graphic.type && "position" === anchorType && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), this.getTransformOfText(graphic))), isFunction$1(options.style)) {
+          const userStyle = options.style({
+            top: offsetTop,
+            left: offsetX,
+            width: b.width(),
+            height: b.height()
+          }, graphic, wrapContainer);
+          userStyle && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), userStyle));
+        } else isObject$4(options.style) ? calculateStyle = Object.assign(Object.assign({}, calculateStyle), options.style) : isString$2(options.style) && options.style && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), styleStringToObject(options.style)));
+        application.global.updateDom(wrapContainer, {
+          width: options.width,
+          height: options.width,
+          style: calculateStyle
+        });
+      }
+      clearCacheContainer() {
+        this.htmlMap && Object.keys(this.htmlMap).forEach(key => {
+          this.htmlMap[key] && this.htmlMap[key].renderId !== this.renderId && this.removeElement(key);
+        }), this.renderId += 1;
+      }
       drawHTML(renderService) {
         "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());
+        }), this.clearCacheContainer());
       }
       renderGroupHTML(group) {
         this.renderGraphicHTML(group), group.forEachChildren(g => {
           g.isContainer ? this.renderGroupHTML(g) : this.renderGraphicHTML(g);
         });
       }
-      removeDom(graphic) {
-        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
-          item.dom && item.dom.parentElement.removeChild(item.dom);
-        }), graphic.bindDom.clear());
+      removeElement(id) {
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        const {
+          wrapContainer: wrapContainer
+        } = this.htmlMap[id];
+        wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
       }
       renderGraphicHTML(graphic) {
+        var _a;
         const {
           html: html
         } = graphic.attribute;
-        if (!html) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
-          item.dom && item.dom.parentElement.removeChild(item.dom);
-        }), graphic.bindDom.clear()));
+        if (!html) return;
         const stage = graphic.stage;
         if (!stage) return;
         const {
           dom: dom,
-          container: container,
-          width: width,
-          height: height,
-          style: style,
-          anchorType = "boundsLeftTop",
-          pointerEvents: pointerEvents
+          container: container
         } = html;
-        graphic.bindDom || (graphic.bindDom = new Map());
-        const lastDom = graphic.bindDom.get(dom);
-        let wrapGroup, nativeContainer;
-        if (!lastDom || container && container !== lastDom.container) {
-          let nativeDom;
-          graphic.bindDom.forEach(_ref => {
-            let {
-              wrapGroup: wrapGroup
-            } = _ref;
-            application.global.removeDom(wrapGroup);
-          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-          const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
-            tagName: "div",
-            width: width,
-            height: height,
-            style: style,
-            parent: nativeContainer
-          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-            dom: nativeDom,
+        if (!dom) return;
+        const id = isNil$3(html.id) ? `${null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid}_react` : html.id;
+        if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id), this.htmlMap && this.htmlMap[id]) "string" == typeof dom ? this.htmlMap[id].wrapContainer.innerHTML = dom : dom !== this.htmlMap[id].wrapContainer.firstChild && (this.htmlMap[id].wrapContainer.removeChild(this.htmlMap[id].wrapContainer.firstChild), this.htmlMap[id].wrapContainer.appendChild(dom));else {
+          const {
+            wrapContainer: wrapContainer,
+            nativeContainer: nativeContainer
+          } = this.getWrapContainer(stage, container);
+          wrapContainer && ("string" == typeof dom ? wrapContainer.innerHTML = dom : wrapContainer.appendChild(dom), this.htmlMap || (this.htmlMap = {}), this.htmlMap[id] = {
+            wrapContainer: wrapContainer,
+            nativeContainer: nativeContainer,
             container: container,
-            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");
-        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`, this.currentDomContainerSet.add(wrapGroup);
+            renderId: this.renderId
+          });
+        }
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        const {
+          wrapContainer: wrapContainer,
+          nativeContainer: nativeContainer
+        } = this.htmlMap[id];
+        this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, html), this.htmlMap[id].renderId = this.renderId;
       }
       release() {
-        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+        "browser" === application.global.env && this.removeAllDom(this.pluginService.stage.defaultLayer);
       }
       removeAllDom(g) {
-        this.removeDom(g), g.forEachChildren(item => {
-          item.isContainer && this.removeAllDom(g);
-        });
+        this.htmlMap && (Object.keys(this.htmlMap).forEach(key => {
+          this.removeElement(key);
+        }), this.htmlMap = null);
       }
     }
 
@@ -16769,7 +17001,7 @@
           }
         } else if ("flex-end" === justifyContent) {
           let pos = main.len;
-          for (let i = lastIdx; i <= currSeg.idx; i++) {
+          for (let i = currSeg.idx; i >= lastIdx; i--) {
             pos -= mianLenArray[i].mainLen;
             const posBaseLeftTop = pos + getPadding(children[i], main.field),
               b = this.getAABBBounds(children[i]);
@@ -17010,73 +17242,58 @@
 
     class ReactAttributePlugin extends HtmlAttributePlugin {
       constructor() {
-        super(...arguments), this.name = "ReactAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+        super(...arguments), this.name = "ReactAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.htmlMap = {};
       }
-      removeDom(graphic) {
-        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
-          item.root && item.root.unmount();
-        }), graphic.bindDom.clear());
+      removeElement(id) {
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        const {
+          root: root,
+          wrapContainer: wrapContainer
+        } = this.htmlMap[id];
+        if (root) {
+          application.global.getRequestAnimationFrame()(() => {
+            root.unmount();
+          });
+        }
+        wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
       }
       renderGraphicHTML(graphic) {
+        var _a;
         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()));
+        if (!react) return;
         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
+            container: container
           } = 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,
+        const id = isNil$3(react.id) ? `${null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid}_react` : react.id;
+        if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id), this.htmlMap && this.htmlMap[id]) this.htmlMap[id].root.render(element);else {
+          const {
+            wrapContainer: wrapContainer,
+            nativeContainer: nativeContainer
+          } = this.getWrapContainer(stage, container);
+          if (wrapContainer) {
+            const root = ReactDOM.createRoot(wrapContainer);
+            root.render(element), this.htmlMap || (this.htmlMap = {}), this.htmlMap[id] = {
+              root: root,
+              wrapContainer: wrapContainer,
+              nativeContainer: nativeContainer,
               container: container,
-              wrapGroup: wrapGroup,
-              root: root
-            });
+              renderId: this.renderId
+            };
           }
-        } 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`;
+        }
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        const {
+          wrapContainer: wrapContainer,
+          nativeContainer: nativeContainer
+        } = this.htmlMap[id];
+        this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react), this.htmlMap[id].renderId = this.renderId;
       }
     }
 
@@ -17534,6 +17751,16 @@
       getCursor() {
         return this._cursor;
       }
+      eventPointTransform(e) {
+        const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+        return this.stage.window.pointTransform(point.x, point.y);
+      }
+      pauseTriggerEvent() {
+        this._eventSystem && this._eventSystem.pauseTriggerEvent();
+      }
+      resumeTriggerEvent() {
+        this._eventSystem && this._eventSystem.resumeTriggerEvent();
+      }
     }
 
     function createStage(params) {
@@ -17667,6 +17894,9 @@
       createDom(params) {
         return null;
       }
+      updateDom(dom, params) {
+        return !1;
+      }
       getDynamicCanvasCount() {
         return 999;
       }
@@ -18058,7 +18288,7 @@
       }
       drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a;
-        const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect3d,
+        const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect,
           {
             fill = rectAttribute.fill,
             stroke = rectAttribute.stroke,
@@ -18499,6 +18729,36 @@
       graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
     }
 
+    const MathPickerContribution = Symbol.for("MathPickerContribution");
+    const MathArcPicker = Symbol.for("MathArcPicker");
+    const MathAreaPicker = Symbol.for("MathAreaPicker");
+    const MathCirclePicker = Symbol.for("MathCirclePicker");
+    const MathImagePicker = Symbol.for("MathImagePicker");
+    const MathLinePicker = Symbol.for("MathLinePicker");
+    const MathPathPicker = Symbol.for("MathPathPicker");
+    const MathRectPicker = Symbol.for("MathRectPicker");
+    const MathSymbolPicker = Symbol.for("MathSymbolPicker");
+    const MathTextPicker = Symbol.for("MathTextPicker");
+    const MathPolygonPicker = Symbol.for("MathPolygonPicker");
+    const MathGlyphPicker = Symbol.for("MathGlyphPicker");
+    const CanvasArcPicker = Symbol.for("CanvasArcPicker");
+    const CanvasArc3dPicker = Symbol.for("CanvasArc3dPicker");
+    const CanvasAreaPicker = Symbol.for("CanvasAreaPicker");
+    const CanvasCirclePicker = Symbol.for("CanvasCirclePicker");
+    const CanvasImagePicker = Symbol.for("CanvasImagePicker");
+    const CanvasLinePicker = Symbol.for("CanvasLinePicker");
+    const CanvasPathPicker = Symbol.for("CanvasPathPicker");
+    const CanvasRectPicker = Symbol.for("CanvasRectPicker");
+    const CanvasRect3dPicker = Symbol.for("CanvasRect3dPicker");
+    const CanvasSymbolPicker = Symbol.for("CanvasSymbolPicker");
+    const CanvasTextPicker = Symbol.for("CanvasTextPicker");
+    const CanvasPolygonPicker = Symbol.for("CanvasPolygonPicker");
+    const CanvasPyramid3dPicker = Symbol.for("CanvasPyramid3dPicker");
+    const CanvasRichTextPicker = Symbol.for("CanvasRichTextPicker");
+    const CanvasGlyphPicker = Symbol.for("CanvasGlyphPicker");
+    const CanvasGroupPicker = Symbol.for("CanvasGroupPicker");
+    const CanvasPickerContribution = Symbol.for("CanvasPickerContribution");
+
     const REACT_TO_CANOPUS_EVENTS = {
       onPointerDown: "pointerdown",
       onPointerUp: "pointerup",
@@ -18903,7 +19163,7 @@
         return this.nativeContext.font;
       }
       set globalAlpha(d) {
-        this.nativeContext.globalAlpha = d;
+        this.nativeContext.globalAlpha = d * this.baseGlobalAlpha;
       }
       get globalAlpha() {
         return this.nativeContext.globalAlpha;
@@ -18996,7 +19256,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), this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0), this.baseGlobalAlpha = 1;
       }
       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);
@@ -19237,7 +19497,7 @@
       setLineDash(segments) {
         const a = arguments,
           _context = this.nativeContext;
-        this.nativeContext.setLineDash ? _context.setLineDash(a[0]) : "mozDash" in _context ? _context.mozDash = a[0] : "webkitLineDash" in _context && (_context.webkitLineDash = a[0]);
+        this.nativeContext.setLineDash ? a[0] && _context.setLineDash(a[0]) : "mozDash" in _context ? _context.mozDash = a[0] : "webkitLineDash" in _context && (_context.webkitLineDash = a[0]);
       }
       stroke(path) {
         this.disableStroke || (path ? this.nativeContext.stroke(path) : this.nativeContext.stroke());
@@ -19276,7 +19536,7 @@
           opacity = defaultParams.opacity,
           fill = defaultParams.fill
         } = attribute;
-        fillOpacity > 1e-12 && opacity > 1e-12 ? (_context.globalAlpha = fillOpacity * opacity, _context.fillStyle = createColor(this, fill, params, offsetX, offsetY)) : _context.globalAlpha = fillOpacity * opacity;
+        fillOpacity > 1e-12 && opacity > 1e-12 ? (_context.globalAlpha = fillOpacity * opacity * this.baseGlobalAlpha, _context.fillStyle = createColor(this, fill, params, offsetX, offsetY)) : _context.globalAlpha = fillOpacity * opacity * this.baseGlobalAlpha;
       }
       setShadowBlendStyle(params, attribute, defaultParams) {
         if (Array.isArray(defaultParams)) {
@@ -19328,7 +19588,7 @@
             lineCap = defaultParams.lineCap,
             miterLimit = defaultParams.miterLimit
           } = attribute;
-          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
@@ -19452,36 +19712,6 @@
 
     const browserCanvasModule = createModule(BrowserCanvas, BrowserContext2d);
 
-    const MathPickerContribution = Symbol.for("MathPickerContribution");
-    const MathArcPicker = Symbol.for("MathArcPicker");
-    const MathAreaPicker = Symbol.for("MathAreaPicker");
-    const MathCirclePicker = Symbol.for("MathCirclePicker");
-    const MathImagePicker = Symbol.for("MathImagePicker");
-    const MathLinePicker = Symbol.for("MathLinePicker");
-    const MathPathPicker = Symbol.for("MathPathPicker");
-    const MathRectPicker = Symbol.for("MathRectPicker");
-    const MathSymbolPicker = Symbol.for("MathSymbolPicker");
-    const MathTextPicker = Symbol.for("MathTextPicker");
-    const MathPolygonPicker = Symbol.for("MathPolygonPicker");
-    const MathGlyphPicker = Symbol.for("MathGlyphPicker");
-    const CanvasArcPicker = Symbol.for("CanvasArcPicker");
-    const CanvasArc3dPicker = Symbol.for("CanvasArc3dPicker");
-    const CanvasAreaPicker = Symbol.for("CanvasAreaPicker");
-    const CanvasCirclePicker = Symbol.for("CanvasCirclePicker");
-    const CanvasImagePicker = Symbol.for("CanvasImagePicker");
-    const CanvasLinePicker = Symbol.for("CanvasLinePicker");
-    const CanvasPathPicker = Symbol.for("CanvasPathPicker");
-    const CanvasRectPicker = Symbol.for("CanvasRectPicker");
-    const CanvasRect3dPicker = Symbol.for("CanvasRect3dPicker");
-    const CanvasSymbolPicker = Symbol.for("CanvasSymbolPicker");
-    const CanvasTextPicker = Symbol.for("CanvasTextPicker");
-    const CanvasPolygonPicker = Symbol.for("CanvasPolygonPicker");
-    const CanvasPyramid3dPicker = Symbol.for("CanvasPyramid3dPicker");
-    const CanvasRichTextPicker = Symbol.for("CanvasRichTextPicker");
-    const CanvasGlyphPicker = Symbol.for("CanvasGlyphPicker");
-    const CanvasGroupPicker = Symbol.for("CanvasGroupPicker");
-    const CanvasPickerContribution = Symbol.for("CanvasPickerContribution");
-
     var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -19524,9 +19754,11 @@
         }
         const picker = this.pickerMap.get(graphic.numberType);
         if (!picker) return null;
-        const g = picker.contains(graphic, point, params) ? graphic : null,
+        const pd = picker.contains(graphic, point, params),
+          g = pd ? graphic : null,
           data = {
-            graphic: g
+            graphic: g,
+            params: pd
           };
         if (g) return data;
         if (this.InterceptorContributions.length) for (let i = 0; i < this.InterceptorContributions.length; i++) {
@@ -19841,18 +20073,23 @@
       removeDom(dom) {
         return dom.parentElement.removeChild(dom), !0;
       }
+      updateDom(dom, params) {
+        const {
+          width: width,
+          height: height,
+          style: style
+        } = params;
+        return style && (isString$2(style) ? dom.setAttribute("style", style) : Object.keys(style).forEach(k => {
+          dom.style[k] = style[k];
+        })), null != width && (dom.style.width = `${width}px`), null != height && (dom.style.height = `${height}px`), !0;
+      }
       createDom(params) {
         const {
             tagName = "div",
-            width: width,
-            height: height,
-            style: style,
             parent: parent
           } = params,
           element = document.createElement(tagName);
-        if (style && (isString$2(style) ? element.setAttribute("style", style) : Object.keys(style).forEach(k => {
-          element.setAttribute(k, style[k]);
-        })), null != width && (element.style.width = `${width}px`), null != height && (element.style.height = `${height}px`), parent) {
+        if (this.updateDom(element, params), parent) {
           const pd = isString$2(parent) ? this.getElementById(parent) : parent;
           pd && pd.appendChild && pd.appendChild(element);
         }
@@ -25149,7 +25386,8 @@
       }
       bindEvents() {}
       _getNodeId(id) {
-        return `${this.id}-${this.name}-${id}`;
+        var _a;
+        return `${null !== (_a = this.id) && void 0 !== _a ? _a : this._uid}-${this.name}-${id}`;
       }
       _dispatchEvent(eventName, details) {
         var _a;
@@ -25215,9 +25453,13 @@
         }, this._onSliderPointerDown = e => {
           e.stopPropagation();
           const {
-            direction: direction
-          } = this.attribute;
-          this._prePos = "horizontal" === direction ? e.clientX : e.clientY, this._dispatchEvent("scrollDown", {
+              direction: direction
+            } = this.attribute,
+            {
+              x: x,
+              y: y
+            } = this.stage.eventPointTransform(e);
+          this._prePos = "horizontal" === direction ? x : y, this._dispatchEvent("scrollDown", {
             pos: this._prePos,
             event: e
           }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
@@ -25227,8 +25469,12 @@
           }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
         }, this._computeScrollValue = e => {
           const {
-            direction: direction
-          } = this.attribute;
+              direction: direction
+            } = this.attribute,
+            {
+              x: x,
+              y: y
+            } = this.stage.eventPointTransform(e);
           let currentScrollValue,
             currentPos,
             delta = 0;
@@ -25236,7 +25482,7 @@
             width: width,
             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];
+          return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
         }, this._onSliderPointerMove = e => {
           e.stopPropagation();
           const preScrollRange = this.getScrollRange(),
@@ -25488,12 +25734,42 @@
     }
     function isRichText(attributes) {
       let typeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "type";
-      return typeKey in attributes && "rich" === attributes[typeKey] || isObject$4(attributes.text) && "rich" === attributes.text.type;
+      return "rich" === getTextType(attributes, typeKey);
+    }
+    function getTextType(attributes) {
+      let typeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "type";
+      var _a, _b;
+      return isObject$4(attributes.text) && "type" in attributes.text ? null !== (_a = attributes.text.type) && void 0 !== _a ? _a : "text" : typeKey in attributes && null !== (_b = attributes[typeKey]) && void 0 !== _b ? _b : "text";
     }
     function richTextAttributeTransform(attributes) {
       var _a, _b;
       return attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.maxWidth = attributes.maxLineWidth, attributes.textConfig = attributes.text.text || attributes.text, attributes;
     }
+    function htmlAttributeTransform(attributes) {
+      const {
+          text: text,
+          _originText: _originText
+        } = attributes,
+        {
+          text: html
+        } = text;
+      return attributes.html = html, attributes.text = _originText, attributes.renderable = !1, attributes;
+    }
+    function reactAttributeTransform(attributes) {
+      const {
+          text: text,
+          _originText: _originText
+        } = attributes,
+        {
+          text: react
+        } = text;
+      return attributes.react = react, attributes.text = _originText, attributes.renderable = !1, attributes;
+    }
+    function createTextGraphicByType(textAttributes) {
+      let typeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "type";
+      const textType = getTextType(textAttributes, typeKey);
+      return "rich" === textType ? graphicCreator.richtext(richTextAttributeTransform(textAttributes)) : ("html" === textType ? textAttributes = htmlAttributeTransform(textAttributes) : "react" === textType && (textAttributes = reactAttributeTransform(textAttributes)), graphicCreator.text(textAttributes));
+    }
 
     function loadTagComponent() {
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
@@ -25510,6 +25786,12 @@
     };
     loadTagComponent();
     let Tag$1 = class Tag extends AbstractComponent {
+      getBgRect() {
+        return this._bgRect;
+      }
+      getTextShape() {
+        return this._textShape;
+      }
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
@@ -25583,7 +25865,7 @@
               width: textShape.AABBBounds.width(),
               height: textShape.AABBBounds.height()
             }), "rect");
-            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), this._bgRect = bgRect;
           }
         } else {
           const textAttrs = Object.assign(Object.assign({
@@ -25635,9 +25917,10 @@
               width: tagWidth,
               height: tagHeight
             }), "rect");
-            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), this._bgRect = bgRect;
           }
         }
+        this._textShape = textShape;
       }
     };
     Tag$1.defaultAttributes = {
@@ -26089,7 +26372,7 @@
         return this._mainSegmentPoints;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Segment.defaultAttributes, attributes)), this.name = "segment";
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Segment.defaultAttributes, attributes)), this.name = "segment", this.key = "segment", this.lines = [];
       }
       render() {
         this.removeAllChild(!0), this._reset();
@@ -26104,8 +26387,9 @@
         } = this.attribute;
         if (!visible) return;
         this._computeLineAngle();
-        const startSymbolShape = this._renderSymbol(startSymbol, "start"),
-          endSymbolShape = this._renderSymbol(endSymbol, "end");
+        const points = this._getMainSegmentPoints(),
+          startSymbolShape = this._renderSymbol(startSymbol, points, "start"),
+          endSymbolShape = this._renderSymbol(endSymbol, points, "end");
         if (this.startSymbol = startSymbolShape, this.endSymbol = endSymbolShape, multiSegment) {
           const points = [...this.attribute.points];
           if (isValidNumber$1(mainSegmentIndex)) points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex]);else {
@@ -26119,7 +26403,7 @@
             }, isArray$3(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
               fill: !1
             }));
-            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);
+            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), this.lines.push(line);
           });
         } else {
           let lineCreator = graphicCreator.line;
@@ -26130,11 +26414,13 @@
             fill: !1,
             closePath: !1
           }));
-          line.name = `${this.name}-line`, line.id = this._getNodeId("line"), isEmpty(null == state ? void 0 : state.line) || (line.states = [].concat(state.line)[0]), this.add(line);
+          line.name = `${this.name}-line`, line.id = this._getNodeId("line"), isEmpty(null == state ? void 0 : state.line) || (line.states = [].concat(state.line)[0]), this.add(line), this.lines.push(line);
         }
       }
-      _renderSymbol(attribute, dim) {
-        const points = this._getMainSegmentPoints();
+      _computeRotate(angle) {
+        return angle + Math.PI / 2;
+      }
+      _renderSymbol(attribute, points, dim) {
         if (!points.length) return;
         const {
           autoRotate = !0
@@ -26160,15 +26446,15 @@
           "start" === dim ? (position = {
             x: start.x + (isValidNumber$1(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
             y: start.y + (isValidNumber$1(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
-          }, rotate = startAngle + Math.PI / 2) : (position = {
+          }, rotate = this._computeRotate(startAngle)) : (position = {
             x: end.x + (isValidNumber$1(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
             y: end.y + (isValidNumber$1(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
-          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+          }, rotate = this._computeRotate(endAngle)), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
             symbolType: symbolType,
             size: size,
             angle: autoRotate ? rotate + refAngle : 0,
             strokeBoundsBuffer: 0
-          }), style)), symbol.name = `${this.name}-${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), isEmpty(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), this.add(symbol);
+          }), style)), symbol.name = `${this.name}-${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), isEmpty(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), "start" === dim ? isEmpty(null == state ? void 0 : state.startSymbol) || (symbol.states = state.startSymbol) : isEmpty(null == state ? void 0 : state.endSymbol) || (symbol.states = state.endSymbol), this.add(symbol);
         }
         return symbol;
       }
@@ -26375,25 +26661,32 @@
       return scale(vector, (inside ? -1 : 1) * (axisInside ? -1 : 1) * offset / length(vector));
     }
 
+    const dispatchHoverState = (e, container, lastHover) => {
+      const target = e.target;
+      return target !== lastHover && target.name && !isEmpty(target.states) ? (target.addState(StateValue.hover, !0), traverseGroup(container, node => {
+        node !== target && node.name && !isEmpty(node.states) && node.addState(StateValue.hoverReverse, !0);
+      }), target) : lastHover;
+    };
+    const dispatchUnHoverState = (e, container, lastHover) => lastHover ? (traverseGroup(container, node => {
+      node.name && !isEmpty(node.states) && (node.removeState(StateValue.hoverReverse), node.removeState(StateValue.hover));
+    }), null) : lastHover;
+    const dispatchClickState = (e, container, lastSelect) => {
+      const target = e.target;
+      return lastSelect === target && target.hasState(StateValue.selected) ? (traverseGroup(container, node => {
+        node.name && !isEmpty(node.states) && (node.removeState(StateValue.selectedReverse), node.removeState(StateValue.selected));
+      }), null) : target.name && !isEmpty(target.states) ? (target.addState(StateValue.selected, !0), traverseGroup(container, node => {
+        node !== target && node.name && !isEmpty(node.states) && node.addState(StateValue.selectedReverse, !0);
+      }), target) : lastSelect;
+    };
+
     class AxisBase extends AbstractComponent {
       constructor() {
         super(...arguments), this.name = "axis", this.data = [], this.tickLineItems = [], this.subTickLineItems = [], this.axisLabelLayerSize = {}, this.axisLabelsContainer = null, this._onHover = e => {
-          const target = e.target;
-          target !== this._lastHover && target.name && !isEmpty(target.states) && (target.addState(StateValue.hover, !0), traverseGroup(this.axisContainer, node => {
-            node !== target && node.name && !isEmpty(node.states) && node.addState(StateValue.hoverReverse, !0);
-          }), this._lastHover = target);
+          this._lastHover = dispatchHoverState(e, this.axisContainer, this._lastHover);
         }, this._onUnHover = e => {
-          this._lastHover && (traverseGroup(this.axisContainer, node => {
-            node.name && !isEmpty(node.states) && (node.removeState(StateValue.hoverReverse), node.removeState(StateValue.hover));
-          }), this._lastHover = null);
+          this._lastHover = dispatchUnHoverState(e, this.axisContainer, this._lastHover);
         }, this._onClick = e => {
-          const target = e.target;
-          if (this._lastSelect === target && target.hasState(StateValue.selected)) return this._lastSelect = null, void traverseGroup(this.axisContainer, node => {
-            node.name && !isEmpty(node.states) && (node.removeState(StateValue.selectedReverse), node.removeState(StateValue.selected));
-          });
-          target.name && !isEmpty(target.states) && (target.addState(StateValue.selected, !0), traverseGroup(this.axisContainer, node => {
-            node !== target && node.name && !isEmpty(node.states) && node.addState(StateValue.selectedReverse, !0);
-          }), this._lastSelect = target);
+          this._lastSelect = dispatchClickState(e, this.axisContainer, this._lastSelect);
         };
       }
       getInnerView() {
@@ -26520,9 +26813,9 @@
           });
         return labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup), data.forEach((item, index) => {
           var _a;
-          const labelStyle = this._getLabelAttribute(item, index, data, layer);
-          let text;
-          if (text = isRichText(labelStyle) ? graphicCreator.richtext(richTextAttributeTransform(labelStyle)) : graphicCreator.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
+          const labelStyle = this._getLabelAttribute(item, index, data, layer),
+            text = createTextGraphicByType(labelStyle);
+          if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
             const labelState = merge({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
@@ -26663,6 +26956,7 @@
           layer: layer
         })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
           text: null != text ? text : textContent,
+          _originText: tickDatum.label,
           lineHeight: null == textStyle ? void 0 : textStyle.fontSize,
           type: type
         }), textStyle);
@@ -27607,8 +27901,11 @@
           var _a, _b, _c, _d;
           const target = e.target;
           if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
-            const legendItem = target.delegate;
-            if (target.name === LEGEND_ELEMENT_NAME.focus) {
+            const legendItem = target.delegate,
+              {
+                selectMode = "multiple"
+              } = this.attribute;
+            if (target.name === LEGEND_ELEMENT_NAME.focus || "focus" === selectMode) {
               const isFocusSelected = legendItem.hasState(LegendStateValue.focus);
               legendItem.toggleState(LegendStateValue.focus), isFocusSelected ? null === (_a = this._itemsContainer) || void 0 === _a || _a.getChildren().forEach(item => {
                 this._removeLegendItemState(item, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover, LegendStateValue.focus], e), this._setLegendItemState(item, LegendStateValue.selected, e);
@@ -27620,7 +27917,6 @@
                 item.removeState(LegendStateValue.focus);
               });
               const {
-                  selectMode = "multiple",
                   allowAllCanceled = !0
                 } = this.attribute,
                 isSelected = legendItem.hasState(LegendStateValue.selected),
@@ -27817,8 +28113,7 @@
             shape.fill && isNil$3(shapeStyle.state[key].fill) && color && (shapeStyle.state[key].fill = color), shape.stroke && isNil$3(shapeStyle.state[key].stroke) && color && (shapeStyle.state[key].stroke = color);
           }), this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state), itemShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(itemShape);
         }
-        let labelShape,
-          focusSpace = 0;
+        let focusSpace = 0;
         if (focus) {
           const focusSize = get$5(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
           focusShape = graphicCreator.symbol(Object.assign(Object.assign({
@@ -27839,9 +28134,11 @@
             textBaseline: "middle",
             lineHeight: null === (_b = labelStyle.style) || void 0 === _b ? void 0 : _b.fontSize
           }, labelStyle.style), {
-            text: text
-          });
-        labelShape = isRichText(labelAttributes) ? graphicCreator.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator.text(labelAttributes), this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
+            text: text,
+            _originText: labelAttr.formatMethod ? label : void 0
+          }),
+          labelShape = createTextGraphicByType(labelAttributes);
+        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
         const labelSpace = get$5(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$3(value)) {
           const valueSpace = get$5(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
@@ -27853,10 +28150,11 @@
               textBaseline: "middle",
               lineHeight: valueStyle.style.fontSize
             }, valueStyle.style), {
-              text: valueText
-            });
-          let valueShape;
-          if (valueShape = isRichText(valueAttributes) ? graphicCreator.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator.text(valueAttributes), this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
+              text: valueText,
+              _originText: valueAttr.formatMethod ? value : void 0
+            }),
+            valueShape = createTextGraphicByType(valueAttributes);
+          if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
             const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace;
             this._autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape), valueAttr.alignRight ? valueShape.setAttributes({
               textAlign: "right",
@@ -29260,7 +29558,12 @@
           } = this.attribute;
           tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1), this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
         }, this._onHandlerPointerdown = e => {
-          e.stopPropagation(), this._isChanging = !0, this._currentHandler = e.target, this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+          e.stopPropagation(), this._isChanging = !0;
+          const {
+            x: x,
+            y: y
+          } = this.stage.eventPointTransform(e);
+          this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
           }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
@@ -29275,11 +29578,15 @@
             max: max
           } = this.attribute;
           if (max === min) return;
+          const {
+            x: x,
+            y: y
+          } = this.stage.eventPointTransform(e);
           let currentPos,
             originPos,
             railLen,
             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);
+          this._isHorizontal ? (currentPos = x, delta = currentPos - this._prePos, originPos = null === (_b = this._currentHandler) || void 0 === _b ? void 0 : _b.attribute.x, railLen = railWidth) : (currentPos = y, 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);
           "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
@@ -29290,7 +29597,12 @@
             capture: !0
           }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
         }, this._onTrackPointerdown = e => {
-          e.stopPropagation(), this._isChanging = !0, this._prePos = this._isHorizontal ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
+          e.stopPropagation(), this._isChanging = !0;
+          const {
+            x: x,
+            y: y
+          } = this.stage.eventPointTransform(e);
+          this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
           }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
@@ -29310,7 +29622,11 @@
             endHandler: endHandler
           } = this._getHandlers();
           let currentPos, trackLen, railLen;
-          this._isHorizontal ? (currentPos = e.clientX, trackLen = this._track.attribute.width, railLen = railWidth) : (currentPos = e.clientY, trackLen = this._track.attribute.height, railLen = railHeight);
+          const {
+            x: x,
+            y: y
+          } = this.stage.eventPointTransform(e);
+          this._isHorizontal ? (currentPos = x, trackLen = this._track.attribute.width, railLen = railWidth) : (currentPos = y, trackLen = this._track.attribute.height, railLen = railHeight);
           const delta = currentPos - this._prePos;
           if (startHandler) {
             const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y,
@@ -33097,7 +33413,9 @@
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
-            this.component = new LineAxis(merge({}, axisStylrAttrs, attrs));
+            this.component = new LineAxis(merge({
+                disableTriggerEvent: this.table.options.disableInteraction
+            }, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
             this.component.originAxis = this;
         }
@@ -37715,7 +38033,7 @@
             this.numberType = CHART_NUMBER_TYPE;
             this.isShareChartSpec = isShareChartSpec;
             if (!params.chartInstance) {
-                const chartInstance = new params.ClassType(params.spec, {
+                const chartInstance = (this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -37725,8 +38043,9 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                });
+                })));
                 chartInstance.renderSync();
+                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -37744,34 +38063,53 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
+                    x1: 0,
+                    x2: x2 - x1,
+                    y1: 0,
+                    y2: y2 - y1
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
+                beforeRender: (chartStage) => {
+                    const stage = this.stage;
+                    const ctx = chartStage.window.getContext();
+                    const stageMatrix = stage.window.getViewBoxTransform();
+                    const viewBox = stage.window.getViewBox();
                     ctx.inuse = true;
                     ctx.clearMatrix();
+                    ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, true);
+                    ctx.translate(viewBox.x1, viewBox.y1);
                     ctx.setTransformForCurrent(true);
                     ctx.beginPath();
                     ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
                     ctx.clip();
+                    ctx.clearMatrix();
+                    if (!chartStage.needRender) {
+                        chartStage.pauseRender();
+                        table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds);
+                        table.scenegraph.updateNextFrame();
+                    }
                 },
                 afterRender(stage) {
                     const ctx = stage.window.getContext();
                     ctx.inuse = false;
+                    stage.needRender = false;
+                    chartStage.resumeRender();
                 }
-            });
+            }));
+            const chartStage = this.activeChartInstance.getStage();
+            const matrix = this.globalTransMatrix.clone();
+            const stageMatrix = this.stage.window.getViewBoxTransform();
+            matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+            chartStage.window.setViewBoxTransform &&
+                chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
             this.activeChartInstance.renderSync();
             table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
             this.activeChartInstance.on('click', (params) => {
@@ -37807,11 +38145,12 @@
             const cellGroup = this.parent;
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
+            const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
             return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+                x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
+                y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
+                y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
             };
         }
     }
@@ -37842,6 +38181,10 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
+        bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
+        bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
+        bodyBound.y2 = bodyBound.y2 + (table.options.viewBox?.y1 ?? 0);
         return bodyBound;
     }
 
@@ -37923,7 +38266,8 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
+            tableChartOption: table.options.chartOption
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -43501,48 +43845,65 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        axes?.forEach((axis, index) => {
-            if (axis.type === 'band') {
-                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
-            }
-            else {
-                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
-            }
-        });
         chartInstance.updateViewBox({
-            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
-            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
-            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
-            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+            x1: 0,
+            x2: viewBox.x2 - viewBox.x1,
+            y1: 0,
+            y2: viewBox.y2 - viewBox.y1
         }, false, false);
-        const table = chart.getRootNode().table;
-        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
-        if (typeof dataId === 'string') {
-            chartInstance.updateDataSync(dataId, data ?? []);
-        }
-        else {
-            const dataBatch = [];
-            for (const dataIdStr in dataId) {
-                const dataIdAndField = dataId[dataIdStr];
-                const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                dataBatch.push({
-                    id: dataIdStr,
-                    values: dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? [],
-                    fields: series?.data?.fields
-                });
-                if (!chartInstance.updateFullDataSync) {
-                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                        ? data?.filter((item) => {
-                            return item.hasOwnProperty(dataIdAndField);
-                        }) ?? []
-                        : data ?? []);
+        const chartStage = chartInstance.getStage();
+        const matrix = chart.globalTransMatrix.clone();
+        const stageMatrix = chart.stage.window.getViewBoxTransform();
+        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+        chartStage.window.setViewBoxTransform &&
+            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+        const { table } = chart.getRootNode();
+        let updateSpec = false;
+        if (table.options.specFormat) {
+            const formatResult = table.options.specFormat(chart.attribute.spec);
+            if (formatResult.needFormatSpec && formatResult.spec) {
+                const spec = formatResult.spec;
+                chartInstance.updateSpecSync(spec);
+                updateSpec = true;
+            }
+        }
+        if (!updateSpec) {
+            axes?.forEach((axis, index) => {
+                if (axis.type === 'band') {
+                    chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
+                }
+                else {
+                    chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
+                }
+            });
+            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
+            if (typeof dataId === 'string') {
+                chartInstance.updateDataSync(dataId, data ?? []);
+            }
+            else {
+                const dataBatch = [];
+                for (const dataIdStr in dataId) {
+                    const dataIdAndField = dataId[dataIdStr];
+                    const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                    dataBatch.push({
+                        id: dataIdStr,
+                        values: dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? [],
+                        fields: series?.data?.fields
+                    });
+                    if (!chartInstance.updateFullDataSync) {
+                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                            ? data?.filter((item) => {
+                                return item.hasOwnProperty(dataIdAndField);
+                            }) ?? []
+                            : data ?? []);
+                    }
                 }
+                chartInstance.updateFullDataSync?.(dataBatch);
             }
-            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -43604,7 +43965,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -43612,6 +43973,7 @@
             const { dataId, data, spec } = chart.attribute;
             chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
+            const { table } = chart.getRootNode();
             const { active, cacheCanvas, activeChartInstance } = chart;
             if (!active && cacheCanvas) {
                 if (isArray$3(cacheCanvas)) {
@@ -43625,6 +43987,27 @@
                 }
             }
             else if (activeChartInstance) {
+                if (table.options.specFormat) {
+                    const formatResult = table.options.specFormat(chart.attribute.spec);
+                    if (formatResult.needFormatSpec && formatResult.spec) {
+                        const spec = formatResult.spec;
+                        activeChartInstance.updateSpecSync(spec);
+                        return;
+                    }
+                }
+                const viewBox = chart.getViewBox();
+                activeChartInstance.updateViewBox({
+                    x1: 0,
+                    x2: viewBox.x2 - viewBox.x1,
+                    y1: 0,
+                    y2: viewBox.y2 - viewBox.y1
+                }, false, false);
+                const chartStage = activeChartInstance.getStage();
+                chartStage.needRender = true;
+                const matrix = chart.globalTransMatrix.clone();
+                const stageMatrix = chart.stage.window.getViewBoxTransform().clone();
+                stageMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+                chartStage.window.setViewBoxTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
                 if (typeof dataId === 'string') {
                     activeChartInstance.updateDataSync(dataId, data ?? []);
                 }
@@ -43654,13 +44037,13 @@
                 }
             }
             else {
-                if (chart.getRootNode().table.internalProps.renderChartAsync) {
+                if (table.internalProps.renderChartAsync) {
                     if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
                         chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
                         chartRenderQueueList.push(chart);
                     }
                     if (!IsHandlingChartQueue()) {
-                        startRenderChartQueue(chart.getRootNode().table);
+                        startRenderChartQueue(table);
                     }
                 }
                 else {
@@ -43669,31 +44052,7 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            const { context } = drawContext;
-            if (!context) {
-                return;
-            }
-            const { clip } = chart.attribute;
-            if (clip) {
-                context.save();
-            }
-            else {
-                context.highPerformanceSave();
-            }
-            context.transformFromMatrix(chart.transMatrix, true);
-            context.beginPath();
-            if (params.skipDraw) {
-                this.drawShape(chart, context, 0, 0, drawContext, params, () => false, () => false);
-            }
-            else {
-                this.drawShape(chart, context, 0, 0, drawContext);
-            }
-            if (clip) {
-                context.restore();
-            }
-            else {
-                context.highPerformanceRestore();
-            }
+            this._draw(chart, {}, false, drawContext, params);
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -48333,6 +48692,15 @@
             });
         }
     }
+    function clearCellChartCacheImage(col, row, scenegraph) {
+        const cellGroup = scenegraph.getCell(col, row);
+        cellGroup.children.forEach((node) => {
+            if (node.type === 'chart') {
+                node.cacheCanvas = null;
+                node.addUpdateBoundTag();
+            }
+        });
+    }
     function updateChartData(scenegraph) {
         const table = scenegraph.table;
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -49118,6 +49486,44 @@
         }
     }
 
+    function dealWithAnimationAppear(table) {
+        if (!table.options.animationAppear) {
+            return;
+        }
+        let duration;
+        let delay;
+        let type;
+        let direction;
+        if (table.options.animationAppear === true) {
+            duration = 500;
+            delay = 0;
+            type = 'one-by-one';
+            direction = 'column';
+        }
+        else {
+            duration = table.options.animationAppear.duration ?? 500;
+            delay = table.options.animationAppear.delay ?? 0;
+            type = table.options.animationAppear.type ?? 'one-by-one';
+            direction = table.options.animationAppear.direction ?? 'row';
+        }
+        const { scenegraph: scene, frozenColCount, frozenRowCount } = table;
+        const { colStart, colEnd, rowStart, rowEnd } = scene.proxy;
+        for (let col = 0; col <= colEnd; col++) {
+            for (let row = 0; row <= rowEnd; row++) {
+                const cellGroup = scene.highPerformanceGetCell(col, row);
+                if (cellGroup && cellGroup.role === 'cell') {
+                    cellGroup.forEachChildren((child) => {
+                        child.setAttribute('opacity', 0);
+                        child
+                            .animate()
+                            .wait(type === 'one-by-one' ? (direction === 'row' ? row : col) * (duration - delay) : delay)
+                            .to({ opacity: 1 }, duration, 'linear');
+                    });
+                }
+            }
+        }
+    }
+
     registerForVrender();
     loadPoptip();
     container.load(splitModule);
@@ -49157,7 +49563,12 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (Env.mode === 'node') {
+            if (table.options.canvas && table.options.viewBox) {
+                vglobal.setEnv('browser');
+                width = table.options.viewBox.x2 - table.options.viewBox.x1;
+                height = table.options.viewBox.y2 - table.options.viewBox.y1;
+            }
+            else if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -49175,9 +49586,16 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                afterRender: () => {
+                beforeRender: (stage) => {
+                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
+                },
+                afterRender: (stage) => {
+                    this.table.options.afterRender && this.table.options.afterRender(stage);
                     this.table.fireListeners('after_render', null);
-                }
+                },
+                canvasControled: !table.options.canvas,
+                viewBox: table.options.viewBox,
+                ...table.options.renderOption
             });
             this.stage.defaultLayer.setTheme({
                 group: {
@@ -49911,6 +50329,9 @@
             this.updateBorderSizeAndPosition();
             this.component.updateScrollBar();
             handleTextStick(this.table);
+            if (this.table.options.animationAppear) {
+                dealWithAnimationAppear(this.table);
+            }
             this.updateNextFrame();
         }
         dealWidthMode() {
@@ -53028,8 +53449,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.x,
-                y: e.y
+                x: e.viewport.x,
+                y: e.viewport.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -54294,12 +54715,14 @@
                 e.preventDefault();
             }
         });
-        handler.on(table.getContainer(), 'resize', e => {
-            if (e.width === 0 && e.height === 0) {
-                return;
-            }
-            table.resize();
-        });
+        if (!table.options.canvas) {
+            handler.on(table.getContainer(), 'resize', e => {
+                if (e.width === 0 && e.height === 0) {
+                    return;
+                }
+                table.resize();
+            });
+        }
         function pasteHtmlToTable(item) {
             const ranges = table.stateManager.select.ranges;
             const selectRangeLength = ranges.length;
@@ -54842,7 +55265,7 @@
             this.table = table;
             this.handleTextStickBindId = [];
             this.inertiaScroll = new InertiaScroll(table.stateManager);
-            if (Env.mode === 'node') {
+            if (Env.mode === 'node' || table.options.disableInteraction) {
                 return;
             }
             this.bindOuterEvent();
@@ -57355,6 +57778,7 @@
     }
 
     class FocusInput extends EventTarget {
+        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -57374,6 +57798,7 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
+            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -57393,6 +57818,7 @@
             return this._input;
         }
         release() {
+            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -57526,7 +57952,8 @@
                 height: this.table.tableNoFrameHeight
             });
             const legend = new DiscreteLegend(merge({}, attrs, {
-                defaultSelected: this.selectedData
+                defaultSelected: this.selectedData,
+                disableTriggerEvent: this.table.options.disableInteraction
             }));
             legend.name = 'legend';
             this.legendComponent = legend;
@@ -58441,7 +58868,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.0.0";
+        version = "1.0.1-beta.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -58454,7 +58881,7 @@
         columnWidthComputeMode;
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node') {
+            if (!container && options.mode !== 'node' && !options.canvas) {
                 throw new Error("vtable's container is undefined");
             }
             const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
@@ -58492,7 +58919,14 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (Env.mode !== 'node') {
+            if (this.options.canvas) {
+                internalProps.element = this.options.canvas.parentElement;
+                internalProps.element.style.position = 'relative';
+                internalProps.focusControl = new FocusInput(this, internalProps.element);
+                internalProps.canvas = this.options.canvas;
+                internalProps.context = internalProps.canvas.getContext('2d');
+            }
+            else if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -58862,7 +59296,21 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            if (Env.mode === 'browser') {
+            this.tableX = 0;
+            this.tableY = 0;
+            if (this.options.canvas && this.options.viewBox) {
+                widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
+                heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
+                if (this?.scenegraph?.stage) {
+                    if (this.options.viewBox) {
+                        this.scenegraph.stage.setViewBox(this.options.viewBox, false);
+                    }
+                    else {
+                        this.scenegraph.stage.resize(widthP, heightP);
+                    }
+                }
+            }
+            else if (Env.mode === 'browser') {
                 const element = this.getElement();
                 let widthWithoutPadding = 0;
                 let heightWithoutPadding = 0;
@@ -58921,6 +59369,22 @@
                 }
             }
         }
+        updateViewBox(newViewBox) {
+            const oldWidth = this.options?.viewBox.x2 ?? 0 - this.options?.viewBox.x1 ?? 0;
+            const oldHeight = this.options?.viewBox.y2 ?? 0 - this.options?.viewBox.y1 ?? 0;
+            const newWidth = newViewBox.x2 - newViewBox.x1;
+            const newHeight = newViewBox.y2 - newViewBox.y1;
+            this.options.viewBox = newViewBox;
+            if (oldWidth !== newWidth || oldHeight !== newHeight) {
+                this.resize();
+            }
+            else {
+                this.scenegraph.stage.setViewBox(this.options.viewBox, true);
+            }
+        }
+        setViewBoxTransform(a, b, c, d, e, f) {
+            this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
+        }
         get rowHierarchyType() {
             return 'grid';
         }
@@ -59466,6 +59930,8 @@
             const visibleRect = this.getVisibleRect();
             rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
             rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
+            rect.offsetLeft(this.options.viewBox?.x1 ?? 0);
+            rect.offsetTop(this.options.viewBox?.y1 ?? 0);
             return rect;
         }
         getVisibleRect() {
@@ -59619,8 +60085,9 @@
             }
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
+            internalProps.focusControl.release();
             const { parentElement } = internalProps.element;
-            if (parentElement) {
+            if (parentElement && !this.options.canvas) {
                 parentElement.removeChild(internalProps.element);
             }
             this.editorManager?.editingEditor?.onEnd?.();
@@ -59822,8 +60289,8 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - (this.options.viewBox?.x1 ?? 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
             return { x, y, inTable };
         }
         getTheme() {
@@ -70864,6 +71331,14 @@
             updateChartData(this.scenegraph);
             this.render();
         }
+        clearChartCacheImage(col, row) {
+            if (isNumber$4(col) && isNumber$4(row)) {
+                clearCellChartCacheImage(col, row, this.scenegraph);
+            }
+            else {
+                clearChartCacheImage(this.scenegraph);
+            }
+        }
         getLegendSelected() {
             return this.internalProps.legends.legendComponent._getSelectedLegends().map((d) => d.label);
         }
@@ -71647,7 +72122,7 @@
     }
 
     registerForVrender();
-    const version = "1.0.0";
+    const version = "1.0.1-beta.0";
     function getIcons() {
         return get$2();
     }