@visactor/vtable 0.18.2-alpha.2 → 0.18.2

package/dist/vtable.js

@@ -4153,6 +4153,7 @@
     const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
       opacity: 1,
       background: null,
+      backgroundCornerRadius: 0,
       texture: null,
       textureColor: "black",
       textureSize: 10,
@@ -5321,7 +5322,10 @@
       removeAllChild() {
         if (!this._idMap) return;
         let child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          const next = child._next;
+          child.parent = null, child._prev = null, child._next = null, child = next;
+        }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
       replaceChild(newChild, oldChild) {
@@ -7054,18 +7058,10 @@
     class ResourceLoader {
       static GetImage(url, mark) {
         var _a;
-        let data = ResourceLoader.cache.get(url);
+        const data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(res => {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
       static GetSvg(svgStr, mark) {
         var _a;
@@ -7091,8 +7087,60 @@
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
       }
+      static loading() {
+        setTimeout(() => {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            const tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(task => {
+              const {
+                  url: url,
+                  marks: marks
+                } = task,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                const end = data.dataPromise.then(res => {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
+            }), Promise.all(promises).then(() => {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            }).catch(error => {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+      static loadImage(url, mark) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+      static improveImageLoading(url) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          const elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
+    }
+    function getIndex(url, arr) {
+      for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+      return -1;
     }
-    ResourceLoader.cache = new Map();
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds();
@@ -7290,7 +7338,7 @@
         const context = {
           type: AttributeUpdateType.INIT
         };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.onAttributeUpdate(context);
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
       }
       translate(x, y) {
         var _a, _b;
@@ -7708,7 +7756,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$4(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
       imageLoadSuccess(url, image, cb) {
         if (!this.resources) return;
@@ -8107,7 +8155,7 @@
       doUpdateAABBBounds() {
         const attribute = this.attribute,
           groupTheme = getTheme(this).group;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const bounds = application.graphicService.updateGroupAABBBounds(attribute, groupTheme, this._AABBBounds, this),
           {
             boundsPadding = groupTheme.boundsPadding
@@ -8732,7 +8780,7 @@
       }
       doUpdateAABBBounds(full) {
         const circleTheme = getTheme(this).circle;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateCircleAABBBounds(attribute, getTheme(this).circle, this._AABBBounds, full, this),
           {
@@ -8882,7 +8930,7 @@
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
     let Text$1 = class Text extends Graphic {
       get font() {
         const textTheme = getTheme(this).text;
@@ -8937,7 +8985,7 @@
       }
       doUpdateAABBBounds() {
         const textTheme = getTheme(this).text;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateTextAABBBounds(attribute, textTheme, this._AABBBounds, this),
           {
@@ -10029,7 +10077,7 @@
       }
       doUpdateAABBBounds(full) {
         const symbolTheme = getTheme(this).symbol;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateSymbolAABBBounds(attribute, getTheme(this).symbol, this._AABBBounds, full, this),
           {
@@ -10092,7 +10140,7 @@
       }
       doUpdateAABBBounds() {
         const lineTheme = getTheme(this).line;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateLineAABBBounds(attribute, getTheme(this).line, this._AABBBounds, this),
           {
@@ -10157,7 +10205,7 @@
       }
       doUpdateAABBBounds() {
         const rectTheme = getTheme(this).rect;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateRectAABBBounds(attribute, getTheme(this).rect, this._AABBBounds, this),
           {
@@ -10327,7 +10375,7 @@
         }), this;
       }
       doUpdateAABBBounds() {
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const bounds = application.graphicService.updateGlyphAABBBounds(this.attribute, getTheme(this).glyph, this._AABBBounds, this);
         return this.clearUpdateBoundTag(), bounds;
       }
@@ -10646,9 +10694,15 @@
           this.failCallback && this.failCallback();
         });
       }
+      setAttributes(params, forceUpdateTag, context) {
+        return params.image && this.loadImage(params.image), super.setAttributes(params, forceUpdateTag, context);
+      }
+      setAttribute(key, value, forceUpdateTag, context) {
+        return "image" === key && this.loadImage(value), super.setAttribute(key, value, forceUpdateTag, context);
+      }
       doUpdateAABBBounds() {
         const imageTheme = getTheme(this).image;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateImageAABBBounds(attribute, getTheme(this).image, this._AABBBounds, this),
           {
@@ -10924,7 +10978,7 @@
       }
       doUpdateAABBBounds() {
         const richTextTheme = getTheme(this).richtext;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateRichTextAABBBounds(attribute, getTheme(this).richtext, this._AABBBounds, this),
           {
@@ -10975,10 +11029,13 @@
               this.addUpdateBoundTag(), null === (_a = this.stage) || void 0 === _a || _a.renderNextFrame();
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
-        } else if (textConfig[i].text.includes("\n")) {
-          const textParts = textConfig[i].text.split("\n");
-          for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, textConfig[i]));
-        } else paragraphs.push(new Paragraph(textConfig[i].text, !1, textConfig[i]));
+        } else {
+          const richTextConfig = textConfig[i];
+          if (isNumber$3(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text.includes("\n")) {
+            const textParts = richTextConfig.text.split("\n");
+            for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
+          } else paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+        }
         const maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
           richTextWidthEnable = "number" == typeof width && Number.isFinite(width) && width > 0 && (!maxWidthFinite || width <= maxWidth),
@@ -11072,7 +11129,7 @@
       }
       doUpdateAABBBounds() {
         const pathTheme = getTheme(this).path;
-        this.doUpdatePathShape(), this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this.doUpdatePathShape(), this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updatePathAABBBounds(attribute, getTheme(this).path, this._AABBBounds, this),
           {
@@ -11133,7 +11190,7 @@
       }
       doUpdateAABBBounds() {
         const areaTheme = getTheme(this).area;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateAreaAABBBounds(attribute, getTheme(this).area, this._AABBBounds, this),
           {
@@ -11299,7 +11356,7 @@
       }
       doUpdateAABBBounds(full) {
         const arcTheme = getTheme(this).arc;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateArcAABBBounds(attribute, getTheme(this).arc, this._AABBBounds, full, this),
           {
@@ -11364,7 +11421,7 @@
       }
       doUpdateAABBBounds() {
         const polygonTheme = getTheme(this).arc;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updateArc3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           {
@@ -11400,7 +11457,7 @@
       }
       doUpdateAABBBounds() {
         const polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updatePolygonAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           {
@@ -11449,7 +11506,7 @@
       }
       doUpdateAABBBounds() {
         const polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         const attribute = this.attribute,
           bounds = application.graphicService.updatePyramid3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           {
@@ -12216,30 +12273,32 @@
         }
       }
       transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
-        const {
-            scaleX = theme.scaleX,
-            scaleY = theme.scaleY,
-            stroke = theme.stroke,
-            shadowBlur = theme.shadowBlur,
-            lineWidth = theme.lineWidth,
-            pickStrokeBuffer = theme.pickStrokeBuffer,
-            strokeBoundsBuffer = theme.strokeBoundsBuffer
-          } = attribute,
-          tb1 = this.tempAABBBounds1,
-          tb2 = this.tempAABBBounds2;
-        if (stroke && lineWidth) {
-          const scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
-          boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
-        }
-        if (shadowBlur) {
+        if (!aabbBounds.empty()) {
           const {
-              shadowOffsetX = theme.shadowOffsetX,
-              shadowOffsetY = theme.shadowOffsetY
+              scaleX = theme.scaleX,
+              scaleY = theme.scaleY,
+              stroke = theme.stroke,
+              shadowBlur = theme.shadowBlur,
+              lineWidth = theme.lineWidth,
+              pickStrokeBuffer = theme.pickStrokeBuffer,
+              strokeBoundsBuffer = theme.strokeBoundsBuffer
             } = attribute,
-            shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
-          boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
+            tb1 = this.tempAABBBounds1,
+            tb2 = this.tempAABBBounds2;
+          if (stroke && lineWidth) {
+            const scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
+            boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+          }
+          if (shadowBlur) {
+            const {
+                shadowOffsetX = theme.shadowOffsetX,
+                shadowOffsetY = theme.shadowOffsetY
+              } = attribute,
+              shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
+            boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
+          }
         }
-        this.combindShadowAABBBounds(aabbBounds, graphic);
+        if (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
         let updateMatrix = !0;
         const m = graphic.transMatrix;
         graphic && graphic.isContainer && (updateMatrix = !(1 === m.a && 0 === m.b && 0 === m.c && 1 === m.d && 0 === m.e && 0 === m.f)), updateMatrix && transformBoundsWithMatrix(aabbBounds, aabbBounds, m);
@@ -12271,7 +12330,7 @@
 
     let text;
     function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
     }
 
     const result = {
@@ -12402,6 +12461,234 @@
       }
     }
 
+    const parse$3 = function () {
+      const tokens = {
+        linearGradient: /^(linear\-gradient)/i,
+        radialGradient: /^(radial\-gradient)/i,
+        conicGradient: /^(conic\-gradient)/i,
+        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+        positionKeywords: /^(left|center|right|top|bottom)/i,
+        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        startCall: /^\(/,
+        endCall: /^\)/,
+        comma: /^,/,
+        hexColor: /(^\#[0-9a-fA-F]+)/,
+        literalColor: /^([a-zA-Z]+)/,
+        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+      };
+      let input = "";
+      function error(msg) {
+        const err = new Error(input + ": " + msg);
+        throw err.source = input, err;
+      }
+      function getAST() {
+        const ast = matchListing(matchDefinition);
+        return input.length > 0 && error("Invalid input not EOF"), ast;
+      }
+      function matchDefinition() {
+        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+      }
+      function matchGradient(gradientType, pattern, orientationMatcher) {
+        return function (pattern, callback) {
+          const captures = scan(pattern);
+          if (captures) {
+            scan(tokens.startCall) || error("Missing (");
+            const result = callback(captures);
+            return scan(tokens.endCall) || error("Missing )"), result;
+          }
+        }(pattern, function (captures) {
+          const orientation = orientationMatcher();
+          return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+            type: gradientType,
+            orientation: orientation,
+            colorStops: matchListing(matchColorStop)
+          };
+        });
+      }
+      function matchLinearOrientation() {
+        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+      }
+      function matchConicalOrientation() {
+        return match("angular", tokens.fromAngleValue, 1);
+      }
+      function matchListRadialOrientations() {
+        let radialOrientations,
+          lookaheadCache,
+          radialOrientation = matchRadialOrientation();
+        return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+      }
+      function matchRadialOrientation() {
+        let radialType = function () {
+          const circle = match("shape", /^(circle)/i, 0);
+          circle && (circle.style = matchLength() || matchExtentKeyword());
+          return circle;
+        }() || function () {
+          const ellipse = match("shape", /^(ellipse)/i, 0);
+          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+          return ellipse;
+        }();
+        if (radialType) radialType.at = matchAtPosition();else {
+          const extent = matchExtentKeyword();
+          if (extent) {
+            radialType = extent;
+            const positionAt = matchAtPosition();
+            positionAt && (radialType.at = positionAt);
+          } else {
+            const defaultPosition = matchPositioning();
+            defaultPosition && (radialType = {
+              type: "default-radial",
+              at: defaultPosition
+            });
+          }
+        }
+        return radialType;
+      }
+      function matchExtentKeyword() {
+        return match("extent-keyword", tokens.extentKeywords, 1);
+      }
+      function matchAtPosition() {
+        if (match("position", /^at/, 0)) {
+          const positioning = matchPositioning();
+          return positioning || error("Missing positioning value"), positioning;
+        }
+      }
+      function matchPositioning() {
+        const location = {
+          x: matchDistance(),
+          y: matchDistance()
+        };
+        if (location.x || location.y) return {
+          type: "position",
+          value: location
+        };
+      }
+      function matchListing(matcher) {
+        let captures = matcher();
+        const result = [];
+        if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+        return result;
+      }
+      function matchColorStop() {
+        const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+        return color || error("Expected color definition"), color.length = matchDistance(), color;
+      }
+      function matchDistance() {
+        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+      }
+      function matchLength() {
+        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+      }
+      function match(type, pattern, captureIndex) {
+        const captures = scan(pattern);
+        if (captures) return {
+          type: type,
+          value: captures[captureIndex]
+        };
+      }
+      function scan(regexp) {
+        const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+        blankCaptures && consume(blankCaptures[0].length);
+        const captures = regexp.exec(input);
+        return captures && consume(captures[0].length), captures;
+      }
+      function consume(size) {
+        input = input.substr(size);
+      }
+      return function (code) {
+        return input = code.toString(), getAST();
+      };
+    }();
+    class GradientParser {
+      static IsGradient(c) {
+        return !("string" == typeof c && c.length < 10);
+      }
+      static IsGradientStr(c) {
+        return "string" == typeof c && c.length > 10;
+      }
+      static Parse(c) {
+        if (GradientParser.IsGradientStr(c)) try {
+          const datum = parse$3(c)[0];
+          if (datum) {
+            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+          }
+        } catch (err) {
+          return c;
+        }
+        return c;
+      }
+      static ParseConic(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi / 2,
+          sa = parseFloat(orientation.value) / 180 * pi - halfPi;
+        return {
+          gradient: "conical",
+          x: .5,
+          y: .5,
+          startAngle: sa,
+          endAngle: sa + pi2,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseRadial(datum) {
+        const {
+          colorStops = []
+        } = datum;
+        return {
+          gradient: "radial",
+          x0: .5,
+          y0: .5,
+          x1: .5,
+          y1: .5,
+          r0: 0,
+          r1: 1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseLinear(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi / 2;
+        let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
+        for (; angle < 0;) angle += pi2;
+        for (; angle > pi2;) angle -= pi2;
+        let x0 = 0,
+          y0 = 0,
+          x1 = 0,
+          y1 = 0;
+        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
+          gradient: "linear",
+          x0: x0,
+          y0: y0,
+          x1: x1,
+          y1: y1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+    }
+
     function getScaledStroke(context, width, dpr) {
       let strokeWidth = width;
       const {
@@ -12418,7 +12705,7 @@
       if (!c || !0 === c) return "black";
       let result, color;
       if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-      return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
+      return color = GradientParser.Parse(color), "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
     }
     function createLinearGradient(context, color, params) {
       let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -14262,7 +14549,12 @@
           const res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        } else {
+          const {
+            backgroundCornerRadius: backgroundCornerRadius
+          } = graphic.attribute;
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        }
         shouldReCalBounds && boundsAllocate.free(b);
       }
     }
@@ -14631,7 +14923,9 @@
           image: url
         } = image.attribute;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        const res = image.resources.get(url);
+        if ("loading" === res.state && isString$2(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         const {
           context: context
         } = renderService.drawParams;
@@ -14671,6 +14965,197 @@
       },
       __metadata$H = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      };
+    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
+    const tempDirtyBounds = new AABBBounds();
+    class ShadowRootDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.shadowRoot) return !1;
+        const {
+          context: context
+        } = drawContext;
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          const m = graphic.globalTransMatrix.getInverse();
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+        }
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+      }
+    }
+    class DebugDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.attribute._debug_bounds) return !1;
+        const {
+          context: context
+        } = drawContext;
+        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
+        const b = graphic.AABBBounds;
+        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
+      }
+    }
+    let CommonDrawItemInterceptorContribution = class {
+      constructor() {
+        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    };
+    CommonDrawItemInterceptorContribution = __decorate$Y([injectable(), __metadata$H("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+    class InteractiveDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        let interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
+          }
+          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
+        }
+        return !1;
+      }
+      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        const baseGraphic = graphic.baseGraphic;
+        if (baseGraphic) {
+          this.processing = !0;
+          const {
+            context: context
+          } = drawContext;
+          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
+        }
+        return !1;
+      }
+      getShadowRoot(interactiveLayer) {
+        var _a;
+        let group = interactiveLayer.getElementById("_interactive_group");
+        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+      }
+    }
+    class Canvas3DDrawItemInterceptor {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
+        drawContext.in3dInterceptor = !0;
+        const {
+          context: context,
+          stage: stage
+        } = renderService.drawParams;
+        context.canvas;
+        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
+        const m = context.currentMatrix;
+        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
+        const matrix = mat4Allocate.allocate();
+        mat3Tomat4(matrix, m);
+        const lastModelMatrix = context.modelMatrix;
+        if (lastModelMatrix) {
+          if (matrix) {
+            const m = mat4Allocate.allocate();
+            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
+          }
+        } else context.modelMatrix = matrix;
+        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
+          let isPie = !1,
+            is3d = !1;
+          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
+            const children = graphic.getChildren(),
+              sortedChildren = [...children];
+            sortedChildren.sort((a, b) => {
+              var _a, _b, _c, _d;
+              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
+                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
+              for (; angle1 < 0;) angle1 += pi2;
+              for (; angle2 < 0;) angle2 += pi2;
+              return angle2 - angle1;
+            }), sortedChildren.forEach(c => {
+              c._next = null, c._prev = null;
+            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
+              graphic.appendChild(c);
+            });
+            const m = graphic.parent.globalTransMatrix;
+            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
+              c._next = null, c._prev = null;
+            }), children.forEach(c => {
+              graphic.appendChild(c);
+            });
+          } else if (is3d) {
+            const children = graphic.getChildren(),
+              zChildren = children.map(g => ({
+                ave_z: g.findFace().vertices.map(v => {
+                  var _a;
+                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+                }).reduce((a, b) => a + b, 0),
+                g: g
+              }));
+            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
+              i.g._next = null, i.g._prev = null;
+            }), graphic.update(), zChildren.forEach(i => {
+              graphic.add(i.g);
+            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
+              g._next = null, g._prev = null;
+            }), graphic.update(), children.forEach(g => {
+              graphic.add(g);
+            });
+          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
+        } else drawContribution.renderItem(graphic, drawContext);
+        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+      }
+      initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }
+
+    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+        var d,
+          c = arguments.length,
+          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      },
+      __metadata$G = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$u = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
@@ -14709,7 +15194,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
       }
     };
-    DefaultRenderService = __decorate$Y([injectable(), __param$u(0, inject(DrawContribution)), __metadata$H("design:paramtypes", [Object])], DefaultRenderService);
+    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();
@@ -14718,7 +15203,7 @@
     const PickerService = Symbol.for("PickerService");
     const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14751,7 +15236,7 @@
         return context.highPerformanceRestore(), result;
       }
     };
-    ShadowRootPickItemInterceptorContribution = __decorate$X([injectable()], ShadowRootPickItemInterceptorContribution);
+    ShadowRootPickItemInterceptorContribution = __decorate$W([injectable()], ShadowRootPickItemInterceptorContribution);
     let InteractivePickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -14770,7 +15255,7 @@
         return null;
       }
     };
-    InteractivePickItemInterceptorContribution = __decorate$X([injectable()], InteractivePickItemInterceptorContribution);
+    InteractivePickItemInterceptorContribution = __decorate$W([injectable()], InteractivePickItemInterceptorContribution);
     let Canvas3DPickItemInterceptor = class {
       constructor() {
         this.order = 1;
@@ -14830,7 +15315,7 @@
         context.setTransformForCurrent();
       }
     };
-    Canvas3DPickItemInterceptor = __decorate$X([injectable()], Canvas3DPickItemInterceptor);
+    Canvas3DPickItemInterceptor = __decorate$W([injectable()], Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule((bind, unbind, isBound) => {
       isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -14843,14 +15328,14 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$G = undefined && undefined.__metadata || function (k, v) {
+      __metadata$F = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$t = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14893,7 +15378,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$W([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AutoEnablePlugins)), __metadata$G("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$V([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AutoEnablePlugins)), __metadata$F("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -14907,14 +15392,14 @@
       bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$F = undefined && undefined.__metadata || function (k, v) {
+      __metadata$E = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let CanvasLayerHandlerContribution = class {
@@ -14984,16 +15469,16 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$V([injectable(), __metadata$F("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$E = undefined && undefined.__metadata || function (k, v) {
+      __metadata$D = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let EmptyLayerHandlerContribution = class {
@@ -15028,16 +15513,16 @@
       }
       release() {}
     };
-    EmptyLayerHandlerContribution = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], EmptyLayerHandlerContribution);
+    EmptyLayerHandlerContribution = __decorate$T([injectable(), __metadata$D("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$D = undefined && undefined.__metadata || function (k, v) {
+      __metadata$C = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let OffscreenLayerHandlerContribution = class {
@@ -15099,7 +15584,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$T([injectable(), __metadata$D("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$S([injectable(), __metadata$C("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -15215,197 +15700,6 @@
       return result;
     }
 
-    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-        var d,
-          c = arguments.length,
-          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-      },
-      __metadata$C = undefined && undefined.__metadata || function (k, v) {
-        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-      };
-    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-    const tempDirtyBounds = new AABBBounds();
-    class ShadowRootDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.shadowRoot) return !1;
-        const {
-          context: context
-        } = drawContext;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
-          const m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
-        }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
-      }
-    }
-    class DebugDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.attribute._debug_bounds) return !1;
-        const {
-          context: context
-        } = drawContext;
-        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
-        const b = graphic.AABBBounds;
-        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
-      }
-    }
-    let CommonDrawItemInterceptorContribution = class {
-      constructor() {
-        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
-        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-    };
-    CommonDrawItemInterceptorContribution = __decorate$S([injectable(), __metadata$C("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
-    class InteractiveDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
-      }
-      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        let interactiveGraphic = graphic.interactiveGraphic;
-        if (graphic.attribute.globalZIndex) {
-          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
-            globalZIndex: 0,
-            zIndex: graphic.attribute.globalZIndex
-          }, !1, {
-            skipUpdateCallback: !0
-          }), drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
-          }
-          return !0;
-        }
-        if (interactiveGraphic) {
-          drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
-          }
-          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
-        }
-        return !1;
-      }
-      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        const baseGraphic = graphic.baseGraphic;
-        if (baseGraphic) {
-          this.processing = !0;
-          const {
-            context: context
-          } = drawContext;
-          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
-        }
-        return !1;
-      }
-      getShadowRoot(interactiveLayer) {
-        var _a;
-        let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
-      }
-    }
-    class Canvas3DDrawItemInterceptor {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
-        drawContext.in3dInterceptor = !0;
-        const {
-          context: context,
-          stage: stage
-        } = renderService.drawParams;
-        context.canvas;
-        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
-        const m = context.currentMatrix;
-        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
-        const matrix = mat4Allocate.allocate();
-        mat3Tomat4(matrix, m);
-        const lastModelMatrix = context.modelMatrix;
-        if (lastModelMatrix) {
-          if (matrix) {
-            const m = mat4Allocate.allocate();
-            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
-          }
-        } else context.modelMatrix = matrix;
-        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-          let isPie = !1,
-            is3d = !1;
-          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
-            const children = graphic.getChildren(),
-              sortedChildren = [...children];
-            sortedChildren.sort((a, b) => {
-              var _a, _b, _c, _d;
-              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-              for (; angle1 < 0;) angle1 += pi2;
-              for (; angle2 < 0;) angle2 += pi2;
-              return angle2 - angle1;
-            }), sortedChildren.forEach(c => {
-              c._next = null, c._prev = null;
-            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
-              graphic.appendChild(c);
-            });
-            const m = graphic.parent.globalTransMatrix;
-            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
-              c._next = null, c._prev = null;
-            }), children.forEach(c => {
-              graphic.appendChild(c);
-            });
-          } else if (is3d) {
-            const children = graphic.getChildren(),
-              zChildren = children.map(g => ({
-                ave_z: g.findFace().vertices.map(v => {
-                  var _a;
-                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-                }).reduce((a, b) => a + b, 0),
-                g: g
-              }));
-            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
-              i.g._next = null, i.g._prev = null;
-            }), graphic.update(), zChildren.forEach(i => {
-              graphic.add(i.g);
-            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
-              g._next = null, g._prev = null;
-            }), graphic.update(), children.forEach(g => {
-              graphic.add(g);
-            });
-          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-        } else drawContribution.renderItem(graphic, drawContext);
-        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
-      }
-      initCanvasCtx(context) {
-        context.setTransformForCurrent();
-      }
-    }
-
     var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -15455,7 +15749,7 @@
         const d = context.dpr % 1;
         (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.clear(), this.backupDirtyBounds.clear()), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
@@ -15513,7 +15807,7 @@
         }, subLayers.set(group._uid, incrementalLayer));
         const incrementalContext = incrementalLayer.layer.getNativeHandler().getContext(),
           idc = incrementalLayer.drawContribution || container.get(IncrementalDrawContribution);
-        idc.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
+        idc.dirtyBounds.clear(), idc.backupDirtyBounds.clear(), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
           drawContribution: idc,
           clear: "transparent",
           layer: incrementalLayer.layer,
@@ -15951,11 +16245,10 @@
       container.load(renderModule);
     }
 
-    let loaded$l = !1;
     function preLoadAllModule() {
-      loaded$l || (loaded$l = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
+      preLoadAllModule.__loaded || (preLoadAllModule.__loaded = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
     }
-    preLoadAllModule();
+    preLoadAllModule.__loaded = !1, preLoadAllModule();
     const vglobal = container.get(VGlobal);
     application.global = vglobal;
     const graphicUtil = container.get(GraphicUtil);
@@ -16113,7 +16406,7 @@
             wrapGroup: wrapGroup
           } = _ref;
           application.global.removeDom(wrapGroup);
-        }), nativeDom = "string" == typeof dom ? new DOMParser().parseFromString(dom, "text/html").firstChild : dom;
+        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
         const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
         nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
         const wrapGroup = application.global.createDom({
@@ -18964,10 +19257,11 @@
     };
     DefaultCanvasGroupPicker = __decorate$A([injectable()], DefaultCanvasGroupPicker);
 
-    let loaded$k = !1;
-    var canvasModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      loaded$k || (loaded$k = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
+    const m = new ContainerModule((bind, unbind, isBound, rebind) => {
+      m.__vloaded || (m.__vloaded = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
     });
+    m.__vloaded = !1;
+    var canvasModule = m;
 
     const canvasPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       isBound(DefaultCanvasPickerService) || bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultCanvasPickerService) : bind(PickerService).toService(DefaultCanvasPickerService);
@@ -19227,7 +19521,7 @@
       }
       getNativeAABBBounds(_dom) {
         let dom = _dom;
-        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild), dom.getBoundingClientRect) {
+        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild, dom.lastChild && (dom = dom.lastChild.firstChild)), dom.getBoundingClientRect) {
           const b = dom.getBoundingClientRect();
           return new DynamicB(b);
         }
@@ -19340,15 +19634,15 @@
     };
     BrowserEnvContribution = __decorate$y([injectable(), __metadata$q("design:paramtypes", [])], BrowserEnvContribution);
 
-    let isBrowserBound = !1;
     const browserEnvModule = new ContainerModule(bind => {
-      isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
+      browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
     });
-    let loaded$j = !1;
+    browserEnvModule.isBrowserBound = !1;
     function loadBrowserEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$j || (loaded$j = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+      loadBrowserEnv.__loaded || (loadBrowserEnv.__loaded = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
     }
+    loadBrowserEnv.__loaded = !1;
 
     var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -19590,14 +19884,14 @@
     };
     NodeEnvContribution = __decorate$u([injectable()], NodeEnvContribution);
 
-    let isNodeBound = !1;
     const nodeEnvModule = new ContainerModule(bind => {
-      isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
+      nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
     });
-    let loaded$i = !1;
+    nodeEnvModule.isNodeBound = !1;
     function loadNodeEnv(container) {
-      loaded$i || (loaded$i = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+      loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
     }
+    loadNodeEnv.__loaded = !1;
 
     var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -20905,95 +21199,113 @@
 
     const browser$1 = isBrowserEnv();
 
-    let loaded$h = !1;
-    function registerArc() {
-      loaded$h || (loaded$h = !0, registerArcGraphic(), container.load(arcModule), container.load(browser$1 ? arcCanvasPickModule : arcMathPickModule));
+    function _registerArc() {
+      _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser$1 ? arcCanvasPickModule : arcMathPickModule));
     }
+    _registerArc.__loaded = !1;
+    const registerArc = _registerArc;
 
-    let loaded$g = !1;
-    function registerArc3d() {
-      loaded$g || (loaded$g = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+    function _registerArc3d() {
+      _registerArc3d.__loaded || (_registerArc3d.__loaded = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
     }
+    _registerArc3d.__loaded = !1;
+    const registerArc3d = _registerArc3d;
 
-    let loaded$f = !1;
-    function registerArea() {
-      loaded$f || (loaded$f = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
+    function _registerArea() {
+      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
     }
+    _registerArea.__loaded = !1;
+    const registerArea = _registerArea;
 
-    let loaded$e = !1;
-    function registerCircle() {
-      loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
+    function _registerCircle() {
+      _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
     }
+    _registerCircle.__loaded = !1;
+    const registerCircle = _registerCircle;
 
-    let loaded$d = !1;
-    function registerGlyph() {
-      loaded$d || (loaded$d = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser$1 ? glyphCanvasPickModule : glyphMathPickModule));
+    function _registerGlyph() {
+      _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser$1 ? glyphCanvasPickModule : glyphMathPickModule));
     }
+    _registerGlyph.__loaded = !1;
+    const registerGlyph = _registerGlyph;
 
-    let loaded$c = !1;
-    function registerGroup() {
-      loaded$c || (loaded$c = !0, registerGroupGraphic());
+    function _registerGroup() {
+      _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic());
     }
+    _registerGroup.__loaded = !1;
+    const registerGroup = _registerGroup;
 
-    let loaded$b = !1;
-    function registerImage() {
-      loaded$b || (loaded$b = !0, registerImageGraphic(), container.load(imageModule), container.load(browser$1 ? imageCanvasPickModule : imageMathPickModule));
+    function _registerImage() {
+      _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser$1 ? imageCanvasPickModule : imageMathPickModule));
     }
+    _registerImage.__loaded = !1;
+    const registerImage = _registerImage;
 
-    let loaded$a = !1;
-    function registerLine() {
-      loaded$a || (loaded$a = !0, registerLineGraphic(), container.load(lineModule), container.load(browser$1 ? lineCanvasPickModule : lineMathPickModule));
+    function _registerLine() {
+      _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser$1 ? lineCanvasPickModule : lineMathPickModule));
     }
+    _registerLine.__loaded = !1;
+    const registerLine = _registerLine;
 
-    let loaded$9 = !1;
-    function registerPath() {
-      loaded$9 || (loaded$9 = !0, registerPathGraphic(), container.load(pathModule), container.load(browser$1 ? pathCanvasPickModule : pathMathPickModule));
+    function _registerPath() {
+      _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser$1 ? pathCanvasPickModule : pathMathPickModule));
     }
+    _registerPath.__loaded = !1;
+    const registerPath = _registerPath;
 
-    let loaded$8 = !1;
-    function registerPolygon() {
-      loaded$8 || (loaded$8 = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser$1 ? polygonCanvasPickModule : polygonMathPickModule));
+    function _registerPolygon() {
+      _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser$1 ? polygonCanvasPickModule : polygonMathPickModule));
     }
+    _registerPolygon.__loaded = !1;
+    const registerPolygon = _registerPolygon;
 
-    let loaded$7 = !1;
-    function registerPyramid3d() {
-      loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+    function _registerPyramid3d() {
+      _registerPyramid3d.__loaded || (_registerPyramid3d.__loaded = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
     }
+    _registerPyramid3d.__loaded = !1;
+    const registerPyramid3d = _registerPyramid3d;
 
-    let loaded$6 = !1;
-    function registerRect() {
-      loaded$6 || (loaded$6 = !0, registerRectGraphic(), container.load(rectModule), container.load(browser$1 ? rectCanvasPickModule : rectMathPickModule));
+    function _registerRect() {
+      _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser$1 ? rectCanvasPickModule : rectMathPickModule));
     }
+    _registerRect.__loaded = !1;
+    const registerRect = _registerRect;
 
-    let loaded$5 = !1;
-    function registerRect3d() {
-      loaded$5 || (loaded$5 = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+    function _registerRect3d() {
+      _registerRect3d.__loaded || (_registerRect3d.__loaded = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
     }
+    _registerRect3d.__loaded = !1;
+    const registerRect3d = _registerRect3d;
 
-    let loaded$4 = !1;
-    function registerRichtext() {
-      loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser$1 ? richtextCanvasPickModule : richTextMathPickModule));
+    function _registerRichtext() {
+      _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser$1 ? richtextCanvasPickModule : richTextMathPickModule));
     }
+    _registerRichtext.__loaded = !1;
+    const registerRichtext = _registerRichtext;
 
-    let loaded$3 = !1;
-    function registerShadowRoot() {
-      loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
+    function _registerShadowRoot() {
+      _registerShadowRoot.__loaded || (_registerShadowRoot.__loaded = !0, registerShadowRootGraphic());
     }
+    _registerShadowRoot.__loaded = !1;
+    const registerShadowRoot = _registerShadowRoot;
 
-    let loaded$2 = !1;
-    function registerSymbol() {
-      loaded$2 || (loaded$2 = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser$1 ? symbolCanvasPickModule : symbolMathPickModule));
+    function _registerSymbol() {
+      _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser$1 ? symbolCanvasPickModule : symbolMathPickModule));
     }
+    _registerSymbol.__loaded = !1;
+    const registerSymbol = _registerSymbol;
 
-    let loaded$1 = !1;
-    function registerText() {
-      loaded$1 || (loaded$1 = !0, registerTextGraphic(), container.load(textModule), container.load(browser$1 ? textCanvasPickModule : textMathPickModule));
+    function _registerText() {
+      _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser$1 ? textCanvasPickModule : textMathPickModule));
     }
+    _registerText.__loaded = !1;
+    const registerText = _registerText;
 
-    let loaded = !1;
-    function registerWrapText() {
-      loaded || (loaded = !0, registerWrapTextGraphic());
+    function _registerWrapText() {
+      _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
     }
+    _registerWrapText.__loaded = !1;
+    const registerWrapText = _registerWrapText;
 
     let registed = false;
     function registerForVrender() {
@@ -28635,7 +28947,7 @@
           }, textStyle);
           this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
         } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
-          text: [text]
+          text: isArray$1(text) ? text : [text]
         }, textStyle), {
           maxLineWidth: null !== (_t = textStyle.maxLineWidth) && void 0 !== _t ? _t : width,
           heightLimit: textStyle.heightLimit,
@@ -28676,7 +28988,7 @@
           }, subtextStyle);
           this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
         } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
-          text: [subtext]
+          text: isArray$1(subtext) ? subtext : [subtext]
         }, subtextStyle), {
           maxLineWidth: null !== (_12 = subtextStyle.maxLineWidth) && void 0 !== _12 ? _12 : width,
           heightLimit: subtextStyle.heightLimit,
@@ -36208,7 +36520,7 @@
             }
             titleWidth += attribute.title.space ?? 4;
         }
-        return tickWidth + labelWidth + titleWidth + 2;
+        return tickWidth + labelWidth + titleWidth + 1;
     }
     function computeAxisComponentHeight(config, table) {
         const attribute = merge({}, commonAxis, config);
@@ -36280,7 +36592,7 @@
             }
             titleHeight += attribute.title.space ?? 4;
         }
-        return tickHeight + labelHeight + titleHeight + 2;
+        return tickHeight + labelHeight + titleHeight + 1;
     }
     function formatDecimal(number) {
         if (typeof number !== 'number') {
@@ -37818,6 +38130,21 @@
                 this.columnMoverBack.setAttribute('y', backY);
             }
         }
+        updateStyle() {
+            const columnMoverLineWidth = this.table.theme.dragHeaderSplitLine.lineWidth;
+            const columnMoverLineColor = this.table.theme.dragHeaderSplitLine.lineColor;
+            const columnMoverShadowBlockColor = this.table.theme.dragHeaderSplitLine.shadowBlockColor;
+            this.columnMoverLabel.setAttributes({
+                fill: columnMoverLineColor
+            });
+            this.columnMoverLine.setAttributes({
+                stroke: columnMoverLineColor,
+                lineWidth: columnMoverLineWidth
+            });
+            this.columnMoverBack.setAttributes({
+                fill: columnMoverShadowBlockColor
+            });
+        }
     }
 
     function getColX(col, table, isRightFrozen) {
@@ -38205,6 +38532,78 @@
                 y: bounds.y1
             };
         }
+        updateStyle() {
+            const theme = this.table.theme;
+            const scrollRailColor = theme.scrollStyle?.scrollRailColor;
+            const scrollSliderColor = theme.scrollStyle?.scrollSliderColor;
+            const width = theme.scrollStyle?.width;
+            this.hScrollBar.setAttributes({
+                height: width,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle: {
+                    fill: scrollSliderColor
+                }
+            });
+            this.vScrollBar.setAttributes({
+                width,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle: {
+                    fill: scrollSliderColor
+                }
+            });
+            const columnResizeColor = theme.columnResize?.lineColor;
+            const columnResizeWidth = theme.columnResize?.lineWidth;
+            const columnResizeBgColor = theme.columnResize?.bgColor;
+            const columnResizeBgWidth = theme.columnResize?.width;
+            this.columnResizeLine.setAttributes({
+                stroke: columnResizeColor,
+                lineWidth: columnResizeWidth
+            });
+            this.columnResizeBgLine = createLine({
+                stroke: columnResizeBgColor,
+                lineWidth: columnResizeBgWidth
+            });
+            const labelColor = theme.columnResize?.labelColor;
+            const labelFontSize = theme.columnResize?.labelFontSize;
+            const labelFontFamily = theme.columnResize?.labelFontFamily;
+            const labelBackgroundFill = theme.columnResize?.labelBackgroundFill;
+            const labelBackgroundCornerRadius = theme.columnResize?.labelBackgroundCornerRadius;
+            this.columnResizeLabel.lastChild.setAttributes({
+                fontSize: labelFontSize,
+                fill: labelColor,
+                fontFamily: labelFontFamily,
+                dy: -labelFontSize / 2
+            });
+            this.columnResizeLabel.firstChild.setAttributes({
+                fill: labelBackgroundFill,
+                width: 5 * labelFontSize * 0.8,
+                height: labelFontSize + 8,
+                cornerRadius: labelBackgroundCornerRadius,
+                dy: -labelFontSize / 2 - 4
+            });
+            const shadowWidth = theme.frozenColumnLine?.shadow?.width;
+            const shadowStartColor = theme.frozenColumnLine?.shadow?.startColor;
+            const shadowEndColor = theme.frozenColumnLine?.shadow?.endColor;
+            this.frozenShadowLine.setAttributes({
+                width: shadowWidth,
+                fill: {
+                    gradient: 'linear',
+                    x0: 0,
+                    y0: 0,
+                    x1: 1,
+                    y1: 0,
+                    stops: [
+                        { color: shadowStartColor, offset: 0 },
+                        { color: shadowEndColor, offset: 1 }
+                    ]
+                }
+            });
+            this.cellMover.updateStyle();
+        }
     }
 
     function createFrameBorder(group, frameTheme, role, strokeArray, justForXYPosition) {
@@ -39836,7 +40235,7 @@
             createColGroup(colHeaderGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, 0, table.columnHeaderLevelCount - 1, 'columnHeader', table);
         createColGroup(rowHeaderGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, table.columnHeaderLevelCount, distRow - table.bottomFrozenRowCount, table.isListTable() && !table.internalProps.transpose ? 'body' : 'rowHeader', table);
         if (table.bottomFrozenRowCount > 0) {
-            createColGroup(leftBottomCornerGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isListTable() ? 'body' : 'rowHeader', table);
+            createColGroup(leftBottomCornerGroup, xOrigin, yOrigin, 0, table.frozenColCount - 1, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isListTable() ? (table.transpose ? 'rowHeader' : 'body') : 'rowHeader', table);
             distCol - table.rightFrozenColCount >= table.frozenColCount &&
                 createColGroup(bottomFrozenGroup, xOrigin, yOrigin, table.frozenColCount, distCol - table.rightFrozenColCount, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1, table.isPivotChart() ? 'rowHeader' : 'body', table);
         }
@@ -40248,7 +40647,7 @@
                 updateAutoRow(proxy.bodyLeftCol, proxy.bodyRightCol, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
                 updateAutoRow(0, proxy.table.frozenColCount - 1, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
                 updateAutoRow(proxy.table.colCount - proxy.table.rightFrozenColCount, proxy.table.colCount - 1, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
-                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, screenTopRow, true);
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.colStart, screenTopRow, true);
                 const deltaY = screenTopY - (cellGroup.attribute.y + proxy.table.getFrozenRowsHeight() + proxy.table.scenegraph.proxy.deltaY);
                 proxy.table.scenegraph.proxy.deltaY += deltaY;
             }
@@ -40287,12 +40686,12 @@
                 updateAutoRow(proxy.table.colCount - proxy.table.rightFrozenColCount, proxy.table.colCount - 1, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
             }
             if (syncTopRow === proxy.bodyTopRow) {
-                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncTopRow, true);
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.colStart, syncTopRow, true);
                 const deltaY = cellGroup.attribute.y - y;
                 proxy.table.scenegraph.proxy.deltaY = deltaY;
             }
             else if (syncBottomRow === proxy.bodyBottomRow) {
-                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, syncBottomRow, true);
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.colStart, syncBottomRow, true);
                 const deltaY = cellGroup.attribute.y +
                     cellGroup.attribute.height -
                     (proxy.table.tableNoFrameHeight - proxy.table.getFrozenRowsHeight()) -
@@ -40300,7 +40699,7 @@
                 proxy.table.scenegraph.proxy.deltaY = -deltaY;
             }
             else {
-                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.bodyLeftCol, screenTopRow, true);
+                const cellGroup = proxy.table.scenegraph.highPerformanceGetCell(proxy.colStart, screenTopRow, true);
                 const deltaY = screenTopY - (cellGroup.attribute.y + proxy.table.getFrozenRowsHeight() + proxy.table.scenegraph.proxy.deltaY);
                 proxy.table.scenegraph.proxy.deltaY = deltaY;
             }
@@ -41243,10 +41642,10 @@
         }
     }
     function updateCellSelectBorder(scene, newStartCol, newStartRow, newEndCol, newEndRow) {
-        let startCol = Math.min(newEndCol, newStartCol);
-        let startRow = Math.min(newEndRow, newStartRow);
-        let endCol = Math.max(newEndCol, newStartCol);
-        let endRow = Math.max(newEndRow, newStartRow);
+        let startCol = Math.max(Math.min(newEndCol, newStartCol), 0);
+        let startRow = Math.max(Math.min(newEndRow, newStartRow), 0);
+        let endCol = Math.min(Math.max(newEndCol, newStartCol), scene.table.colCount - 1);
+        let endRow = Math.min(Math.max(newEndRow, newStartRow), scene.table.rowCount - 1);
         const extendSelectRange = () => {
             let isExtend = false;
             for (let col = startCol; col <= endCol; col++) {
@@ -41263,7 +41662,7 @@
                 if (!isExtend && col === endCol) {
                     for (let row = startRow; row <= endRow; row++) {
                         const mergeInfo = getCellMergeInfo(scene.table, col, row);
-                        if (mergeInfo && mergeInfo.end.col > endCol) {
+                        if (mergeInfo && Math.min(mergeInfo.end.col, scene.table.colCount - 1) > endCol) {
                             endCol = mergeInfo.end.col;
                             isExtend = true;
                             break;
@@ -41289,7 +41688,7 @@
                     if (!isExtend && row === endRow) {
                         for (let col = startCol; col <= endCol; col++) {
                             const mergeInfo = getCellMergeInfo(scene.table, col, row);
-                            if (mergeInfo && mergeInfo.end.row > endRow) {
+                            if (mergeInfo && Math.min(mergeInfo.end.row, scene.table.rowCount - 1) > endRow) {
                                 endRow = mergeInfo.end.row;
                                 isExtend = true;
                                 break;
@@ -43525,6 +43924,9 @@
             this.selectedRangeComponents = new Map();
             this.selectingRangeComponents = new Map();
         }
+        updateComponent() {
+            this.component.updateStyle();
+        }
         createSceneGraph() {
             if (this.table.isPivotChart() || this.table.hasCustomRenderOrLayout()) {
                 this.stage.pluginService.autoEnablePlugins.getContributions().forEach((p) => {
@@ -43857,12 +44259,12 @@
             this.tableGroup.setAttributes({
                 x: this.table.tableX,
                 y: this.table.tableY,
-                width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, 0) +
-                    Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, 0) +
-                    this.rightBottomCornerGroup.attribute.width),
-                height: Math.min(this.table.tableNoFrameHeight, Math.max(this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.height, 0) +
-                    Math.max(this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.height, 0) +
-                    this.bottomFrozenGroup.attribute.height)
+                width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, this.bottomFrozenGroup.attribute.width, 0) +
+                    Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, this.leftBottomCornerGroup.attribute.width, 0) +
+                    Math.max(this.rightTopCornerGroup.attribute.width, this.rightFrozenGroup.attribute.width, this.rightBottomCornerGroup.attribute.width, 0)),
+                height: Math.min(this.table.tableNoFrameHeight, Math.max(this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.height, this.rightTopCornerGroup.attribute.height, 0) +
+                    Math.max(this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.height, this.rightFrozenGroup.attribute.height, 0) +
+                    Math.max(this.leftBottomCornerGroup.attribute.height, this.bottomFrozenGroup.attribute.height, this.rightBottomCornerGroup.attribute.height, 0))
             });
             if (this.tableGroup.border && this.tableGroup.border.type === 'rect') {
                 this.tableGroup.border.setAttributes({
@@ -44002,9 +44404,9 @@
                 return;
             }
             this.bodyGroup.setAttribute('y', this.colHeaderGroup.attribute.height + y);
-            this.rowHeaderGroup.setAttribute('y', this.colHeaderGroup.attribute.height + y);
+            this.rowHeaderGroup.setAttribute('y', this.cornerHeaderGroup.attribute.height + y);
             if (this.table.rightFrozenColCount > 0) {
-                this.rightFrozenGroup.setAttribute('y', this.colHeaderGroup.attribute.height + y);
+                this.rightFrozenGroup.setAttribute('y', this.rightTopCornerGroup.attribute.height + y);
             }
             this.updateNextFrame();
         }
@@ -44088,7 +44490,7 @@
             });
             this.cornerHeaderGroup.setAttribute('width', cornerHeaderWidth);
             this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
-            this.rowHeaderGroup.setAttribute('y', this.colHeaderGroup.attribute.height);
+            this.rowHeaderGroup.setAttribute('y', this.cornerHeaderGroup.attribute.height);
             this.bodyGroup.setAttributes({
                 x: this.rowHeaderGroup.attribute.width,
                 y: this.colHeaderGroup.attribute.height
@@ -44227,7 +44629,7 @@
             this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width);
             this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width);
             this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width);
-            this.bottomFrozenGroup.setDeltaWidth(rowHeaderX - this.bottomFrozenGroup.attribute.width);
+            this.bottomFrozenGroup.setDeltaWidth(colHeaderX - this.bottomFrozenGroup.attribute.width);
             this.rightFrozenGroup.setDeltaWidth(rightX - this.table.getRightFrozenColsWidth());
             this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width);
             this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width);
@@ -46832,6 +47234,7 @@
             const target = e.target;
             if (!table.eventManager.isDraging &&
                 target &&
+                target.isDescendantsOf(table.scenegraph.stage) &&
                 !target.isDescendantsOf(table.scenegraph.tableGroup)) {
                 stateManager.updateInteractionState(InteractionState.default);
                 eventManager.dealTableHover();
@@ -50628,7 +51031,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.18.2-alpha.2";
+        version = "0.18.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51757,6 +52160,7 @@
             internalProps.title?.release();
             internalProps.layoutMap.release();
             this.scenegraph.clearCells();
+            this.scenegraph.updateComponent();
             this.stateManager.updateOptionSetState();
             this._updateSize();
             this.eventManager.updateEventBinder();
@@ -52050,6 +52454,7 @@
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
             this.options.theme = theme;
+            this.scenegraph.updateComponent();
             this.scenegraph.updateStageBackground();
             this.scenegraph.clearCells();
             this.clearCellStyleCache();
@@ -55098,14 +55503,14 @@
             let pasteColEnd = startCol;
             let pasteRowEnd = startRow;
             for (let i = 0; i < values.length; i++) {
-                if (pasteRowEnd >= this.rowCount - 1) {
+                if (startRow + i > this.rowCount - 1) {
                     break;
                 }
                 pasteRowEnd = startRow + i;
                 const rowValues = values[i];
                 let thisRowPasteColEnd = startCol;
                 for (let j = 0; j < rowValues.length; j++) {
-                    if (thisRowPasteColEnd >= this.colCount - 1) {
+                    if (startCol + j > this.colCount - 1) {
                         break;
                     }
                     thisRowPasteColEnd = startCol + j;
@@ -58829,8 +59234,12 @@
                     }
                     else if (this.collectValuesBy[field].range) {
                         const fieldRange = this.collectedValues[field][collectKeys];
-                        fieldRange.max = Math.max(record[field], fieldRange.max);
-                        fieldRange.min = Math.min(record[field], fieldRange.min);
+                        const max = Math.max(record[field], fieldRange.max);
+                        const min = Math.min(record[field], fieldRange.min);
+                        if (!isNaN(max)) {
+                            fieldRange.max = max;
+                            fieldRange.min = min;
+                        }
                     }
                     else {
                         const fieldRange = this.collectedValues[field][collectKeys];
@@ -60357,14 +60766,14 @@
             let pasteColEnd = startCol;
             let pasteRowEnd = startRow;
             for (let i = 0; i < values.length; i++) {
-                if (pasteRowEnd >= this.rowCount - 1) {
+                if (startRow + i > this.rowCount - 1) {
                     break;
                 }
                 pasteRowEnd = startRow + i;
                 const rowValues = values[i];
                 let thisRowPasteColEnd = startCol;
                 for (let j = 0; j < rowValues.length; j++) {
-                    if (thisRowPasteColEnd >= this.colCount - 1) {
+                    if (startCol + j > this.colCount - 1) {
                         break;
                     }
                     thisRowPasteColEnd = startCol + j;
@@ -61874,7 +62283,7 @@
     }
 
     registerForVrender();
-    const version = "0.18.2-alpha.2";
+    const version = "0.18.2";
     function getIcons() {
         return get$1();
     }