@visactor/vtable 0.13.4-alpha.3 → 0.13.4

package/dist/vtable.js

@@ -2747,7 +2747,7 @@
 	max-height: none;
 }
 `;
-        document.body.appendChild(styleElement);
+        document.head.appendChild(styleElement);
     }
 
     function getScrollBarSize(scrollStyle) {
@@ -7867,7 +7867,7 @@
     let Application$1 = class Application {};
     const application$1 = new Application$1();
 
-    const DIRECTION_KEY$1 = {
+    const DIRECTION_KEY$2 = {
       horizontal: {
         width: "width",
         height: "height",
@@ -11618,7 +11618,7 @@
     !function (GroupUpdateAABBBoundsMode) {
       GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.LESS_GROUP = 0] = "LESS_GROUP", GroupUpdateAABBBoundsMode[GroupUpdateAABBBoundsMode.MORE_GROUP = 1] = "MORE_GROUP";
     }(GroupUpdateAABBBoundsMode || (GroupUpdateAABBBoundsMode = {}));
-    let Group$2 = class Group extends Graphic$1 {
+    let Group$1 = class Group extends Graphic$1 {
       constructor(params) {
         super(params), this.type = "group", this.parent = null, this.isContainer = !0, this.numberType = GROUP_NUMBER_TYPE, this._childUpdateTag = UpdateTag$1.UPDATE_BOUNDS;
       }
@@ -11768,9 +11768,9 @@
         return Group.NOWORK_ANIMATE_ATTR;
       }
     };
-    Group$2.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
+    Group$1.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
 
-    class Layer extends Group$2 {
+    class Layer extends Group$1 {
       get offscreen() {
         return this.layerHandler.offscreen;
       }
@@ -13590,7 +13590,7 @@
     }, NOWORK_ANIMATE_ATTR$1);
 
     const LINE_UPDATE_TAG_KEY = ["segments", "points", "curveType", ...GRAPHIC_UPDATE_TAG_KEY$1];
-    let Line$2 = class Line extends Graphic$1 {
+    let Line$3 = class Line extends Graphic$1 {
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         super(params), this.type = "line", this.numberType = LINE_NUMBER_TYPE;
@@ -13654,7 +13654,7 @@
         return Line.NOWORK_ANIMATE_ATTR;
       }
     };
-    Line$2.NOWORK_ANIMATE_ATTR = Object.assign({
+    Line$3.NOWORK_ANIMATE_ATTR = Object.assign({
       segments: 1,
       curveType: 1
     }, NOWORK_ANIMATE_ATTR$1);
@@ -13875,7 +13875,7 @@
 
     let Frame$1 = class Frame {
       constructor(left, top, width, height, ellipsis, wordBreak, verticalDirection, globalAlign, globalBaseline, layoutDirection, isWidthMax, isHeightMax, singleLine, icons) {
-        this.left = left, this.top = top, this.width = width, this.height = height, this.actualHeight = 0, this.bottom = top + height, this.right = left + width, this.ellipsis = ellipsis, this.wordBreak = wordBreak, this.verticalDirection = verticalDirection, this.lines = [], this.globalAlign = globalAlign, this.globalBaseline = globalBaseline, this.layoutDirection = layoutDirection, this.directionKey = DIRECTION_KEY$1[this.layoutDirection], this.isWidthMax = isWidthMax, this.isHeightMax = isHeightMax, this.singleLine = singleLine, icons ? (icons.clear(), this.icons = icons) : this.icons = new Map();
+        this.left = left, this.top = top, this.width = width, this.height = height, this.actualHeight = 0, this.bottom = top + height, this.right = left + width, this.ellipsis = ellipsis, this.wordBreak = wordBreak, this.verticalDirection = verticalDirection, this.lines = [], this.globalAlign = globalAlign, this.globalBaseline = globalBaseline, this.layoutDirection = layoutDirection, this.directionKey = DIRECTION_KEY$2[this.layoutDirection], this.isWidthMax = isWidthMax, this.isHeightMax = isHeightMax, this.singleLine = singleLine, icons ? (icons.clear(), this.icons = icons) : this.icons = new Map();
       }
       draw(ctx, drawIcon) {
         const {
@@ -14220,9 +14220,9 @@
       }
     };
 
-    let Line$1 = class Line {
+    let Line$2 = class Line {
       constructor(left, width, baseline, ascent, descent, lineBuffer, direction, isWidthMax) {
-        this.left = left, this.width = width, this.baseline = baseline, this.ascent = ascent, this.descent = descent, this.top = baseline - ascent, this.paragraphs = lineBuffer.map(p => p), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon$1 ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY$1[this.direction], this.actualWidth = 0;
+        this.left = left, this.width = width, this.baseline = baseline, this.ascent = ascent, this.descent = descent, this.top = baseline - ascent, this.paragraphs = lineBuffer.map(p => p), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon$1 ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY$2[this.direction], this.actualWidth = 0;
         let maxHeight = 0;
         this.paragraphs.forEach((word, index) => {
           if (0 === index && word instanceof Paragraph$1) {
@@ -14312,7 +14312,7 @@
 
     let Wrapper$1 = class Wrapper {
       constructor(frame) {
-        this.frame = frame, this.width = this.frame.width, this.height = this.frame.height, this.lineWidth = 0, this.y = this.frame.top, this.maxAscent = 0, this.maxDescent = 0, this.maxAscentForBlank = 0, this.maxDescentForBlank = 0, this.lineBuffer = [], this.direction = frame.layoutDirection, this.directionKey = DIRECTION_KEY$1[this.direction];
+        this.frame = frame, this.width = this.frame.width, this.height = this.frame.height, this.lineWidth = 0, this.y = this.frame.top, this.maxAscent = 0, this.maxDescent = 0, this.maxAscentForBlank = 0, this.maxDescentForBlank = 0, this.lineBuffer = [], this.direction = frame.layoutDirection, this.directionKey = DIRECTION_KEY$2[this.direction];
       }
       store(paragraph) {
         if (paragraph instanceof RichTextIcon$1) {
@@ -14326,7 +14326,7 @@
         if (0 === this.lineBuffer.length) return;
         const maxAscent = 0 === this.maxAscent ? this.maxAscentForBlank : this.maxAscent,
           maxDescent = 0 === this.maxDescent ? this.maxDescentForBlank : this.maxDescent,
-          line = new Line$1(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
+          line = new Line$2(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
         this.frame.lines.push(line), this.frame.actualHeight += line.height, this.y += line.height, this.lineBuffer.length = 0, this.lineWidth = this.maxAscent = this.maxDescent = this.maxAscentForBlank = this.maxDescentForBlank = 0;
       }
       deal(paragraph) {
@@ -14681,7 +14681,7 @@
     }, NOWORK_ANIMATE_ATTR$1);
 
     const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap", ...GRAPHIC_UPDATE_TAG_KEY$1];
-    let Arc$1 = class Arc extends Graphic$1 {
+    class Arc extends Graphic$1 {
       constructor(params) {
         super(params), this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
       }
@@ -14834,12 +14834,12 @@
       getNoWorkAnimateAttr() {
         return Arc.NOWORK_ANIMATE_ATTR;
       }
-    };
-    Arc$1.NOWORK_ANIMATE_ATTR = Object.assign({
+    }
+    Arc.NOWORK_ANIMATE_ATTR = Object.assign({
       cap: 1
     }, NOWORK_ANIMATE_ATTR$1);
 
-    class Arc3d extends Arc$1 {
+    class Arc3d extends Arc {
       constructor(params) {
         super(params), this.type = "arc3d", this.numberType = ARC3D_NUMBER_TYPE;
       }
@@ -15717,7 +15717,7 @@
     };
     DefaultGraphicService = __decorate$1C([injectable(), __param$P(0, inject(GraphicCreator)), __param$P(1, inject(ContributionProvider)), __param$P(1, named(RectBoundsContribution)), __param$P(2, inject(ContributionProvider)), __param$P(2, named(SymbolBoundsContribution)), __param$P(3, inject(ContributionProvider)), __param$P(3, named(CircleBoundsContribution)), __param$P(4, inject(ContributionProvider)), __param$P(4, named(ArcBoundsContribution)), __param$P(5, inject(ContributionProvider)), __param$P(5, named(PathBoundsContribution)), __metadata$13("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
-    class ShadowRoot extends Group$2 {
+    class ShadowRoot extends Group$1 {
       constructor(graphic) {
         super({
           x: 0,
@@ -15750,7 +15750,7 @@
     }
 
     function createArc(attributes) {
-      return new Arc$1(attributes);
+      return new Arc(attributes);
     }
     function createArea(attributes) {
       return new Area(attributes);
@@ -15759,10 +15759,10 @@
       return new Circle$1(attributes);
     }
     function createGroup(attributes) {
-      return new Group$2(attributes);
+      return new Group$1(attributes);
     }
     function createLine(attributes) {
-      return new Line$2(attributes);
+      return new Line$3(attributes);
     }
     function createPath(attributes) {
       return new Path(attributes);
@@ -20600,7 +20600,7 @@
       Y: 0,
       BACKGROUND: "white"
     };
-    class Stage extends Group$2 {
+    class Stage extends Group$1 {
       set viewBox(b) {
         this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
       }
@@ -22428,7 +22428,7 @@
         return 0;
       }
       getStaticCanvasCount() {
-        return 1;
+        return 999;
       }
       loadJson(url) {
         const jsonPromise = fetch(url).then(data => data.json());
@@ -25703,7 +25703,7 @@
     }
 
     const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
-    class AbstractComponent extends Group$2 {
+    class AbstractComponent extends Group$1 {
       constructor(attributes) {
         let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "2d";
         super(attributes), this.mode = mode, this.setTheme({
@@ -26050,7 +26050,7 @@
       }
       return t;
     };
-    let Tag$1 = class Tag extends AbstractComponent {
+    class Tag extends AbstractComponent {
       constructor(attributes) {
         super(merge$1({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
@@ -26138,8 +26138,8 @@
           isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
         }
       }
-    };
-    Tag$1.defaultAttributes = {
+    }
+    Tag.defaultAttributes = {
       visible: !0,
       textStyle: {
         fontSize: 12,
@@ -26972,7 +26972,7 @@
       }
       renderTitle(container) {
         const titleAttributes = this.getTitleAttribute(),
-          axisTitle = new Tag$1(Object.assign({}, titleAttributes));
+          axisTitle = new Tag(Object.assign({}, titleAttributes));
         axisTitle.name = AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), container.add(axisTitle);
       }
       getVerticalCoord(point, offset, inside) {
@@ -27890,7 +27890,7 @@
         }, shape.style), isValid$6(shape.space) && (tagAttrs.space = shape.space)), background && background.visible && (tagAttrs.panel = Object.assign({
           visible: !0
         }, background.style));
-        const titleTag = new Tag$1(tagAttrs);
+        const titleTag = new Tag(tagAttrs);
         titleTag.name = LEGEND_ELEMENT_NAME.title, this._title = titleTag, this._innerView.add(titleTag);
       }
       _adjustLayout() {
@@ -30587,7 +30587,7 @@
           subtextWidth = this._subTitle ? null === (_1 = this._subTitle) || void 0 === _1 ? void 0 : _1.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth),
           titleHeight = maintextHeight + (null !== (_2 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _2 ? _2 : subtextHeight);
-        if (isValid$6(width) && (titleWidth = width, null === (_3 = this._mainTitle) || void 0 === _3 || _3.setAttribute("maxLineWidth", width), null === (_4 = this._subTitle) || void 0 === _4 || _4.setAttribute("maxLineWidth", width)), isValid$6(height) && (titleHeight = height), isValid$6(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$6(maxWidth) && (null === (_5 = this._mainTitle) || void 0 === _5 || _5.setAttribute("maxLineWidth", maxWidth), null === (_6 = this._subTitle) || void 0 === _6 || _6.setAttribute("maxLineWidth", maxWidth), null === (_7 = this._mainTitle) || void 0 === _7 || _7.setAttribute("maxWidth", maxWidth), null === (_8 = this._subTitle) || void 0 === _8 || _8.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$6(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$6(maxHeight) && (null === (_9 = this._mainTitle) || void 0 === _9 || _9.setAttribute("maxHeight", maxHeight), null === (_10 = this._subTitle) || void 0 === _10 || _10.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth + parsedPadding[1] + parsedPadding[3], group.attribute.height = titleHeight + parsedPadding[0] + parsedPadding[2], isValid$6(align) || isValid$6(null == textStyle ? void 0 : textStyle.align)) {
+        if (isValid$6(width) && (titleWidth = width, null === (_3 = this._mainTitle) || void 0 === _3 || _3.setAttribute("maxLineWidth", width), null === (_4 = this._subTitle) || void 0 === _4 || _4.setAttribute("maxLineWidth", width)), isValid$6(height) && (titleHeight = height), isValid$6(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$6(maxWidth) && (null === (_5 = this._mainTitle) || void 0 === _5 || _5.setAttribute("maxLineWidth", maxWidth), null === (_6 = this._subTitle) || void 0 === _6 || _6.setAttribute("maxLineWidth", maxWidth), null === (_7 = this._mainTitle) || void 0 === _7 || _7.setAttribute("maxWidth", maxWidth), null === (_8 = this._subTitle) || void 0 === _8 || _8.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$6(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$6(maxHeight) && (null === (_9 = this._mainTitle) || void 0 === _9 || _9.setAttribute("maxHeight", maxHeight), null === (_10 = this._subTitle) || void 0 === _10 || _10.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, isValid$6(align) || isValid$6(null == textStyle ? void 0 : textStyle.align)) {
           const mainTitleAlign = (null == textStyle ? void 0 : textStyle.align) ? null == textStyle ? void 0 : textStyle.align : align,
             mainTitleWidth = null !== (_11 = null == textStyle ? void 0 : textStyle.width) && void 0 !== _11 ? _11 : maintextWidth;
           "left" === mainTitleAlign ? (null === (_12 = this._mainTitle) || void 0 === _12 || _12.setAttribute("x", 0), null === (_13 = this._mainTitle) || void 0 === _13 || _13.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (null === (_14 = this._mainTitle) || void 0 === _14 || _14.setAttribute("x", mainTitleWidth / 2), null === (_15 = this._mainTitle) || void 0 === _15 || _15.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (null === (_16 = this._mainTitle) || void 0 === _16 || _16.setAttribute("x", mainTitleWidth), null === (_17 = this._mainTitle) || void 0 === _17 || _17.setAttribute("textAlign", "right"));
@@ -32750,7 +32750,7 @@
     class Application {}
     const application = new Application();
 
-    const DIRECTION_KEY = {
+    const DIRECTION_KEY$1 = {
       horizontal: {
         width: "width",
         height: "height",
@@ -35273,7 +35273,7 @@
 
     class Frame {
       constructor(left, top, width, height, ellipsis, wordBreak, verticalDirection, globalAlign, globalBaseline, layoutDirection, isWidthMax, isHeightMax, singleLine, icons) {
-        this.left = left, this.top = top, this.width = width, this.height = height, this.actualHeight = 0, this.bottom = top + height, this.right = left + width, this.ellipsis = ellipsis, this.wordBreak = wordBreak, this.verticalDirection = verticalDirection, this.lines = [], this.globalAlign = globalAlign, this.globalBaseline = globalBaseline, this.layoutDirection = layoutDirection, this.directionKey = DIRECTION_KEY[this.layoutDirection], this.isWidthMax = isWidthMax, this.isHeightMax = isHeightMax, this.singleLine = singleLine, icons ? (icons.clear(), this.icons = icons) : this.icons = new Map();
+        this.left = left, this.top = top, this.width = width, this.height = height, this.actualHeight = 0, this.bottom = top + height, this.right = left + width, this.ellipsis = ellipsis, this.wordBreak = wordBreak, this.verticalDirection = verticalDirection, this.lines = [], this.globalAlign = globalAlign, this.globalBaseline = globalBaseline, this.layoutDirection = layoutDirection, this.directionKey = DIRECTION_KEY$1[this.layoutDirection], this.isWidthMax = isWidthMax, this.isHeightMax = isHeightMax, this.singleLine = singleLine, icons ? (icons.clear(), this.icons = icons) : this.icons = new Map();
       }
       draw(ctx, drawIcon) {
         const {
@@ -35618,9 +35618,9 @@
       }
     }
 
-    class Line {
+    let Line$1 = class Line {
       constructor(left, width, baseline, ascent, descent, lineBuffer, direction, isWidthMax) {
-        this.left = left, this.width = width, this.baseline = baseline, this.ascent = ascent, this.descent = descent, this.top = baseline - ascent, this.paragraphs = lineBuffer.map(p => p), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY[this.direction], this.actualWidth = 0;
+        this.left = left, this.width = width, this.baseline = baseline, this.ascent = ascent, this.descent = descent, this.top = baseline - ascent, this.paragraphs = lineBuffer.map(p => p), this.textAlign = (this.paragraphs[0] instanceof RichTextIcon ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY$1[this.direction], this.actualWidth = 0;
         let maxHeight = 0;
         this.paragraphs.forEach((word, index) => {
           if (0 === index && word instanceof Paragraph) {
@@ -35706,11 +35706,11 @@
           width += paragraph instanceof RichTextIcon ? paragraph.width : paragraph.getWidthWithEllips(this.direction);
         }), width;
       }
-    }
+    };
 
     class Wrapper {
       constructor(frame) {
-        this.frame = frame, this.width = this.frame.width, this.height = this.frame.height, this.lineWidth = 0, this.y = this.frame.top, this.maxAscent = 0, this.maxDescent = 0, this.maxAscentForBlank = 0, this.maxDescentForBlank = 0, this.lineBuffer = [], this.direction = frame.layoutDirection, this.directionKey = DIRECTION_KEY[this.direction];
+        this.frame = frame, this.width = this.frame.width, this.height = this.frame.height, this.lineWidth = 0, this.y = this.frame.top, this.maxAscent = 0, this.maxDescent = 0, this.maxAscentForBlank = 0, this.maxDescentForBlank = 0, this.lineBuffer = [], this.direction = frame.layoutDirection, this.directionKey = DIRECTION_KEY$1[this.direction];
       }
       store(paragraph) {
         if (paragraph instanceof RichTextIcon) {
@@ -35724,7 +35724,7 @@
         if (0 === this.lineBuffer.length) return;
         const maxAscent = 0 === this.maxAscent ? this.maxAscentForBlank : this.maxAscent,
           maxDescent = 0 === this.maxDescent ? this.maxDescentForBlank : this.maxDescent,
-          line = new Line(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
+          line = new Line$1(this.frame.left, this[this.directionKey.width], this.y + maxAscent, maxAscent, maxDescent, this.lineBuffer, this.direction, "horizontal" === this.direction ? this.frame.isWidthMax : this.frame.isHeightMax);
         this.frame.lines.push(line), this.frame.actualHeight += line.height, this.y += line.height, this.lineBuffer.length = 0, this.lineWidth = this.maxAscent = this.maxDescent = this.maxAscentForBlank = this.maxDescentForBlank = 0;
       }
       deal(paragraph) {
@@ -38071,7 +38071,7 @@
         };
     }
 
-    let Group$1 = class Group extends Group$2 {
+    class Group extends Group$1 {
         role;
         col;
         row;
@@ -38252,7 +38252,7 @@
                 this.colHeight += cellHeight;
             }
         }
-    };
+    }
     function after(group, selfChange) {
         if (!(group.stage && group.stage.renderCount)) {
             return;
@@ -38309,10 +38309,13 @@
             if (customRenderObj.rootContainer) {
                 customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
             }
-            if (customRenderObj.rootContainer instanceof Group$2) {
+            if (customRenderObj.rootContainer instanceof Group$1) {
                 elementsGroup = customRenderObj.rootContainer;
                 elementsGroup.name = 'custom-container';
             }
+            else if (customRenderObj.rootContainer) {
+                customElements = customRenderObj.rootContainer.getElements(undefined, false, false);
+            }
             renderDefault = customRenderObj.renderDefault;
         }
         else if (typeof customRender === 'function') {
@@ -38349,14 +38352,13 @@
             const value = table.getCellValue(col, row);
             elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
         }
-        dealPercentCalc(elementsGroup);
         return {
             elementsGroup,
             renderDefault
         };
     }
     function adjustElementToGroup(elements, width, height, value) {
-        const customGroup = new Group$1({
+        const customGroup = new Group({
             x: 0,
             y: 0,
             width,
@@ -38505,8 +38507,6 @@
                 rect.x = isString$3(rect.x)
                     ? transformString(rect.x, width - borderLineWidths[1])
                     : Number(rect.x);
-            }
-            if (isValid$6(rect.y)) {
                 rect.y = isString$3(rect.y)
                     ? transformString(rect.y, height - borderLineWidths[2])
                     : Number(rect.y);
@@ -38557,24 +38557,6 @@
         }
         return parseInt(str, 10);
     }
-    function dealPercentCalc(group) {
-        if (!group) {
-            return;
-        }
-        group.forEachChildren((child) => {
-            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
-                child.setAttribute('width', (child.attribute.width.percent / 100) * group.attribute.width +
-                    (child.attribute.width.delta ?? 0));
-            }
-            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
-                child.setAttribute('height', (child.attribute.height.percent / 100) * group.attribute.height +
-                    (child.attribute.height.delta ?? 0));
-            }
-            if (child.type === 'group') {
-                dealPercentCalc(child);
-            }
-        });
-    }
     function decodeReactDom(dom) {
         if (!dom.$$typeof) {
             return dom;
@@ -38955,7 +38937,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
-        const cellGroup = new Group$1({
+        const cellGroup = new Group({
             x: xOrigin,
             y: yOrigin,
             width,
@@ -39096,7 +39078,7 @@
         const height = table.getRowHeight(row);
         let contentWidth = width;
         let contentHeight = height;
-        const percentCompleteBarGroup = new Group$1({
+        const percentCompleteBarGroup = new Group({
             x: 0,
             y: 0,
             width: contentWidth,
@@ -39526,7 +39508,7 @@
     const yScale = new LinearScale();
     function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme) {
         if (!cellGroup) {
-            cellGroup = new Group$1({
+            cellGroup = new Group({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -39699,7 +39681,7 @@
         else {
             specObj = spec;
         }
-        const group = new Group$1({
+        const group = new Group({
             x,
             y,
             width,
@@ -39724,7 +39706,7 @@
                     interpolate: 'linear'
                 };
             }
-            const symbolGroup = new Group$1({
+            const symbolGroup = new Group({
                 x: 0,
                 y: 0,
                 width,
@@ -39748,7 +39730,7 @@
         return group;
     }
 
-    class CellContent extends Group$1 {
+    class CellContent extends Group {
         _leftGroup;
         _rightGroup;
         _centerGroup;
@@ -39760,19 +39742,19 @@
         _baseline;
         constructor(params) {
             super(params);
-            this._leftGroup = new Group$1({
+            this._leftGroup = new Group({
                 pickable: false,
                 fill: false,
                 stroke: false
             });
             this._leftGroup.role = 'content-left';
-            this._rightGroup = new Group$1({
+            this._rightGroup = new Group({
                 pickable: false,
                 fill: false,
                 stroke: false
             });
             this._rightGroup.role = 'content-right';
-            this._centerGroup = new Group$1({
+            this._centerGroup = new Group({
                 pickable: false,
                 fill: false,
                 stroke: false
@@ -41292,7 +41274,7 @@
                 if (customLayoutObj.rootContainer) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                 }
-                if (customLayoutObj.rootContainer instanceof Group$2) {
+                if (customLayoutObj.rootContainer instanceof Group$1) {
                     height = customLayoutObj.rootContainer.AABBBounds.height() ?? 0;
                 }
                 else if (customLayoutObj.rootContainer) {
@@ -41828,7 +41810,7 @@
         _menuInfo;
         constructor(table) {
             this._table = table;
-            this._menuInstance = new Group$1({
+            this._menuInstance = new Group({
                 x: 0,
                 y: 0,
                 fill: menuStyle.bgColor,
@@ -41918,7 +41900,7 @@
                         icon = item.icon;
                     }
                 }
-                const group = new Group$1({
+                const group = new Group({
                     y,
                     x,
                     height: menuStyle.lineHeight,
@@ -42792,7 +42774,7 @@
     }
 
     const CHART_NUMBER_TYPE = genNumberType$1();
-    class Chart extends Group$2 {
+    class Chart extends Group$1 {
         type = 'chart';
         chartInstance;
         activeChartInstance;
@@ -43919,9 +43901,14 @@
                 if (customLayoutObj.rootContainer) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                 }
-                if (customLayoutObj.rootContainer instanceof Group$2) {
+                if (customLayoutObj.rootContainer instanceof Group$1) {
                     width = customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
                 }
+                else if (customLayoutObj.rootContainer) {
+                    customLayoutObj.rootContainer.isRoot = true;
+                    const size = customLayoutObj.rootContainer.getContentSize();
+                    width = size.width ?? 0;
+                }
                 else {
                     width = 0;
                 }
@@ -43999,7 +43986,7 @@
         return widthDefined;
     }
 
-    const emptyGroup = new Group$1({});
+    const emptyGroup = new Group({});
     emptyGroup.role = 'empty';
 
     const chartTypes = {};
@@ -44018,7 +44005,7 @@
             padding = functionalPadding;
         }
         if (!cellGroup) {
-            cellGroup = new Group$1({
+            cellGroup = new Group({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -44076,7 +44063,7 @@
         const autoColWidth = colWidth === 'auto';
         const autoWrapText = headerStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const lineClamp = headerStyle.lineClamp;
-        const cellGroup = new Group$1({
+        const cellGroup = new Group({
             x: xOrigin,
             y: yOrigin,
             width: cellWidth,
@@ -44140,7 +44127,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
-        const cellGroup = new Group$1({
+        const cellGroup = new Group({
             x: xOrigin,
             y: yOrigin,
             width,
@@ -44231,7 +44218,7 @@
 
     function createCheckboxCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, table, cellTheme, define) {
         if (!cellGroup) {
-            cellGroup = new Group$1({
+            cellGroup = new Group({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -44531,7 +44518,7 @@
         }
         let newCellGroup;
         if (isMerge && (col !== range.start.col || row !== range.start.row)) {
-            newCellGroup = new Group$1({
+            newCellGroup = new Group({
                 x: 0,
                 y: addNew ? 0 : oldCellGroup.attribute.y,
                 width: 0,
@@ -44686,7 +44673,7 @@
             }
             if (mergeResult) {
                 const height = mergeResult.cellHeight / (range.end.row - range.start.row + 1);
-                const cellGroup = new Group$1({
+                const cellGroup = new Group({
                     x: 0,
                     y,
                     width: 0,
@@ -44748,7 +44735,7 @@
         for (let i = colStart; i <= colEnd; i++) {
             const col = i;
             const colWidth = table.getColWidth(col);
-            const columnGroup = new Group$1({
+            const columnGroup = new Group({
                 x: xOrigin + x,
                 y: yOrigin,
                 width: colWidth,
@@ -45671,7 +45658,7 @@
                 }
             }
             if (this.table.columnHeaderLevelCount) {
-                const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group$1
+                const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
                     ? this.table.scenegraph.colHeaderGroup.lastChild
                     : this.table.scenegraph.colHeaderGroup.lastChild._prev);
                 const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
@@ -45679,7 +45666,7 @@
                 createColGroup(this.table.scenegraph.colHeaderGroup, xOrigin, yOrigin, this.currentCol + 1, endCol, 0, this.table.columnHeaderLevelCount - 1, 'columnHeader', this.table);
             }
             if (this.table.bottomFrozenRowCount) {
-                const lastColumnGroup = (this.table.scenegraph.bottomFrozenGroup.lastChild instanceof Group$1
+                const lastColumnGroup = (this.table.scenegraph.bottomFrozenGroup.lastChild instanceof Group
                     ? this.table.scenegraph.bottomFrozenGroup.lastChild
                     : this.table.scenegraph.bottomFrozenGroup.lastChild._prev);
                 const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
@@ -45687,13 +45674,13 @@
                 createColGroup(this.table.scenegraph.bottomFrozenGroup, xOrigin, yOrigin, this.currentCol + 1, endCol, this.table.rowCount - this.table.bottomFrozenRowCount, this.table.rowCount - 1, 'columnHeader', this.table);
             }
             let lastColumnGroup = this.table.scenegraph.bodyGroup.lastChild &&
-                (this.table.scenegraph.bodyGroup.lastChild instanceof Group$1
+                (this.table.scenegraph.bodyGroup.lastChild instanceof Group
                     ? this.table.scenegraph.bodyGroup.lastChild
                     : this.table.scenegraph.bodyGroup.lastChild._prev);
             if (!lastColumnGroup) {
                 lastColumnGroup =
                     this.table.scenegraph.colHeaderGroup.lastChild &&
-                        (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group$1
+                        (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
                             ? this.table.scenegraph.colHeaderGroup.lastChild
                             : this.table.scenegraph.colHeaderGroup.lastChild._prev);
             }
@@ -45835,7 +45822,7 @@
         return getCellByCache(cacheCellGroup._next, row);
     }
 
-    new Group$2({});
+    new Group$1({});
     function moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, table) {
         const scene = table.scenegraph;
         const cellLocation = table.getCellLocation(colTarget, rowTarget);
@@ -45922,67 +45909,139 @@
     }
     function updateComponent(selectComp, key, scene) {
         const [startColStr, startRowStr, endColStr, endRowStr] = key.split('-');
-        const startCol = parseInt(startColStr, 10);
-        const startRow = parseInt(startRowStr, 10);
-        const endCol = parseInt(endColStr, 10);
-        const endRow = parseInt(endRowStr, 10);
-        let cellsBounds;
-        for (let i = startCol; i <= endCol; i++) {
-            for (let j = startRow; j <= endRow; j++) {
-                const cellGroup = scene.highPerformanceGetCell(i, j);
-                if (cellGroup.role !== 'cell') {
-                    continue;
+        let startCol = parseInt(startColStr, 10);
+        let startRow = parseInt(startRowStr, 10);
+        let endCol = parseInt(endColStr, 10);
+        let endRow = parseInt(endRowStr, 10);
+        let visibleCellRange;
+        switch (selectComp.role) {
+            case 'rowHeader':
+                visibleCellRange = scene.table.getBodyVisibleRowRange();
+                if (visibleCellRange) {
+                    startRow = Math.max(startRow, visibleCellRange.rowStart);
+                    endRow = Math.min(endRow, visibleCellRange.rowEnd);
                 }
-                cellGroup.AABBBounds.width();
-                const bounds = cellGroup.globalAABBBounds;
-                if (!cellsBounds) {
-                    cellsBounds = bounds;
+                break;
+            case 'columnHeader':
+                visibleCellRange = scene.table.getBodyVisibleCellRange();
+                if (visibleCellRange) {
+                    startCol = Math.max(startCol, visibleCellRange.colStart);
+                    endCol = Math.min(endCol, visibleCellRange.colEnd);
                 }
-                else {
-                    cellsBounds.union(bounds);
+                break;
+            case 'cornerHeader':
+                break;
+            case 'bottomFrozen':
+                visibleCellRange = scene.table.getBodyVisibleCellRange();
+                if (visibleCellRange) {
+                    startCol = Math.max(startCol, visibleCellRange.colStart);
+                    endCol = Math.min(endCol, visibleCellRange.colEnd);
                 }
-            }
-        }
-        if (!cellsBounds) {
-            selectComp.rect.setAttributes({
-                visible: false
-            });
-        }
-        else {
-            selectComp.rect.setAttributes({
-                x: cellsBounds.x1 - scene.tableGroup.attribute.x,
-                y: cellsBounds.y1 - scene.tableGroup.attribute.y,
-                width: cellsBounds.width(),
-                height: cellsBounds.height(),
-                visible: true
-            });
+                break;
+            case 'rightFrozen':
+                visibleCellRange = scene.table.getBodyVisibleCellRange();
+                if (visibleCellRange) {
+                    startRow = Math.max(startRow, visibleCellRange.rowStart);
+                    endRow = Math.min(endRow, visibleCellRange.rowEnd);
+                }
+                break;
+            case 'rightTopCorner':
+                break;
+            case 'leftBottomCorner':
+                break;
+            case 'rightBottomCorner':
+                break;
+            default:
+                visibleCellRange = scene.table.getBodyVisibleCellRange();
+                if (visibleCellRange) {
+                    startRow = Math.max(startRow, visibleCellRange.rowStart);
+                    endRow = Math.min(endRow, visibleCellRange.rowEnd);
+                    startCol = Math.max(startCol, visibleCellRange.colStart);
+                    endCol = Math.min(endCol, visibleCellRange.colEnd);
+                }
+                break;
         }
+        const cellRange = scene.table.getCellRange(startCol, startRow);
+        const colsWidth = scene.table.getColsWidth(cellRange.start.col, endCol);
+        const rowsHeight = scene.table.getRowsHeight(cellRange.start.row, endRow);
+        const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
+        selectComp.rect.setAttributes({
+            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
+            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            width: colsWidth,
+            height: rowsHeight,
+            visible: true
+        });
         const isNearRowHeader = startCol === scene.table.frozenColCount;
+        const isNearRightRowHeader = endCol === scene.table.colCount - scene.table.rightFrozenColCount - 1;
         const isNearColHeader = startRow === scene.table.frozenRowCount;
+        const isNearBottomColHeader = endRow === scene.table.rowCount - scene.table.bottomFrozenRowCount - 1;
         if ((isNearRowHeader && selectComp.rect.attribute.stroke[3]) ||
-            (isNearColHeader && selectComp.rect.attribute.stroke[0])) {
-            if (isNearRowHeader) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'columnHeader' ? scene.cornerHeaderGroup : scene.rowHeaderGroup);
-            }
-            if (isNearColHeader) {
-                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'rowHeader' ? scene.cornerHeaderGroup : scene.colHeaderGroup);
+            (isNearRightRowHeader && selectComp.rect.attribute.stroke[1]) ||
+            (isNearColHeader && selectComp.rect.attribute.stroke[0]) ||
+            (isNearBottomColHeader && selectComp.rect.attribute.stroke[2])) {
+            if (isNearRowHeader && selectComp.rect.attribute.stroke[3]) {
+                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'columnHeader'
+                    ? scene.cornerHeaderGroup
+                    : selectComp.role === 'bottomFrozen'
+                        ? scene.leftBottomCornerGroup
+                        : scene.rowHeaderGroup);
+            }
+            if (isNearBottomColHeader && selectComp.rect.attribute.stroke[2]) {
+                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'rowHeader'
+                    ? scene.leftBottomCornerGroup
+                    : selectComp.role === 'rightFrozen'
+                        ? scene.rightBottomCornerGroup
+                        : scene.bottomFrozenGroup);
+            }
+            if (isNearColHeader && selectComp.rect.attribute.stroke[0]) {
+                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'rowHeader'
+                    ? scene.cornerHeaderGroup
+                    : selectComp.role === 'rightFrozen'
+                        ? scene.rightTopCornerGroup
+                        : scene.colHeaderGroup);
+            }
+            if (isNearRightRowHeader && selectComp.rect.attribute.stroke[1]) {
+                scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'columnHeader'
+                    ? scene.rightTopCornerGroup
+                    : selectComp.role === 'bottomFrozen'
+                        ? scene.rightBottomCornerGroup
+                        : scene.rightFrozenGroup);
             }
             if (selectComp.rect.attribute.x < scene.rowHeaderGroup.attribute.width &&
                 scene.table.scrollLeft > 0 &&
-                (selectComp.role === 'body' || selectComp.role === 'columnHeader')) {
+                (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
                 selectComp.rect.setAttributes({
                     x: selectComp.rect.attribute.x + (scene.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x),
                     width: selectComp.rect.attribute.width - (scene.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x)
                 });
             }
+            if (scene.rightFrozenGroup.attribute.width > 0 &&
+                scene.rightFrozenGroup.attribute.height > 0 &&
+                selectComp.rect.attribute.x + selectComp.rect.attribute.width > scene.rightFrozenGroup.attribute.x &&
+                (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
+                selectComp.rect.setAttributes({
+                    x: selectComp.rect.attribute.x,
+                    width: scene.rightFrozenGroup.attribute.x - selectComp.rect.attribute.x
+                });
+            }
             if (selectComp.rect.attribute.y < scene.colHeaderGroup.attribute.height &&
                 scene.table.scrollTop > 0 &&
-                (selectComp.role === 'body' || selectComp.role === 'rowHeader')) {
+                (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
                 selectComp.rect.setAttributes({
                     y: selectComp.rect.attribute.y + (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
                     height: selectComp.rect.attribute.height - (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y)
                 });
             }
+            if (scene.bottomFrozenGroup.attribute.width > 0 &&
+                scene.bottomFrozenGroup.attribute.height > 0 &&
+                selectComp.rect.attribute.y + selectComp.rect.attribute.height > scene.bottomFrozenGroup.attribute.y &&
+                (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
+                selectComp.rect.setAttributes({
+                    y: selectComp.rect.attribute.y,
+                    height: scene.bottomFrozenGroup.attribute.y - selectComp.rect.attribute.y
+                });
+            }
         }
         else {
             scene.tableGroup.insertAfter(selectComp.rect, selectComp.role === 'body'
@@ -45991,7 +46050,17 @@
                     ? scene.colHeaderGroup
                     : selectComp.role === 'rowHeader'
                         ? scene.rowHeaderGroup
-                        : scene.cornerHeaderGroup);
+                        : selectComp.role === 'cornerHeader'
+                            ? scene.cornerHeaderGroup
+                            : selectComp.role === 'rightTopCorner'
+                                ? scene.rightTopCornerGroup
+                                : selectComp.role === 'rightFrozen'
+                                    ? scene.rightFrozenGroup
+                                    : selectComp.role === 'leftBottomCorner'
+                                        ? scene.leftBottomCornerGroup
+                                        : selectComp.role === 'bottomFrozen'
+                                            ? scene.bottomFrozenGroup
+                                            : scene.rightBottomCornerGroup);
         }
     }
     function updateCellSelectBorder(scene, newStartCol, newStartRow, newEndCol, newEndRow) {
@@ -46063,19 +46132,51 @@
         });
         scene.selectingRangeComponents = new Map();
         let needRowHeader = false;
+        let needRightRowHeader = false;
         let needColumnHeader = false;
+        let needBottomColumnHeader = false;
         let needBody = false;
         let needCornerHeader = false;
+        let needRightTopCornerHeader = false;
+        let needRightBottomCornerHeader = false;
+        let needLeftBottomCornerHeader = false;
         if (startCol <= scene.table.frozenColCount - 1 && startRow <= scene.table.frozenRowCount - 1) {
             needCornerHeader = true;
         }
-        if (startCol <= scene.table.frozenColCount - 1 && endRow >= scene.table.frozenRowCount) {
+        if (endCol >= scene.table.colCount - scene.table.rightFrozenColCount && startRow <= scene.table.frozenRowCount - 1) {
+            needRightTopCornerHeader = true;
+        }
+        if (startCol <= scene.table.frozenColCount - 1 && endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount) {
+            needLeftBottomCornerHeader = true;
+        }
+        if (endCol >= scene.table.colCount - scene.table.rightFrozenColCount &&
+            endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount) {
+            needRightBottomCornerHeader = true;
+        }
+        if (startCol <= scene.table.frozenColCount - 1 &&
+            endRow >= scene.table.frozenRowCount &&
+            startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1) {
             needRowHeader = true;
         }
-        if (startRow <= scene.table.frozenRowCount - 1 && endCol >= scene.table.frozenColCount) {
+        if (endCol >= scene.table.colCount - scene.table.rightFrozenColCount &&
+            endRow >= scene.table.frozenRowCount &&
+            startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1) {
+            needRightRowHeader = true;
+        }
+        if (startRow <= scene.table.frozenRowCount - 1 &&
+            endCol >= scene.table.frozenColCount &&
+            startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1) {
             needColumnHeader = true;
         }
-        if (endCol >= scene.table.frozenColCount && endRow >= scene.table.frozenRowCount) {
+        if (endRow >= scene.table.rowCount - scene.table.bottomFrozenRowCount &&
+            endCol >= scene.table.frozenColCount &&
+            startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1) {
+            needBottomColumnHeader = true;
+        }
+        if (startCol <= scene.table.colCount - scene.table.rightFrozenColCount - 1 &&
+            endCol >= scene.table.frozenColCount &&
+            startRow <= scene.table.rowCount - scene.table.bottomFrozenRowCount - 1 &&
+            endRow >= scene.table.frozenRowCount) {
             needBody = true;
         }
         if (needCornerHeader) {
@@ -46084,23 +46185,59 @@
             const strokeArray = [true, !needColumnHeader, !needRowHeader, true];
             scene.createCellSelectBorder(startCol, startRow, cornerEndCol, cornerEndRow, 'cornerHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
+        if (needRightTopCornerHeader) {
+            const cornerStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
+            const cornerEndRow = Math.min(endRow, scene.table.frozenRowCount - 1);
+            const strokeArray = [true, true, !needRightRowHeader, !needColumnHeader];
+            scene.createCellSelectBorder(cornerStartCol, startRow, endCol, cornerEndRow, 'rightTopCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+        }
+        if (needLeftBottomCornerHeader) {
+            const cornerEndCol = Math.min(endCol, scene.table.frozenColCount - 1);
+            const cornerStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
+            const strokeArray = [!needRowHeader, !needBottomColumnHeader, true, true];
+            scene.createCellSelectBorder(startCol, cornerStartRow, cornerEndCol, endRow, 'leftBottomCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+        }
+        if (needRightBottomCornerHeader) {
+            const cornerStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
+            const cornerStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
+            const strokeArray = [!needRightRowHeader, true, true, !needBottomColumnHeader];
+            scene.createCellSelectBorder(cornerStartCol, cornerStartRow, endCol, endRow, 'rightBottomCorner', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+        }
         if (needColumnHeader) {
             const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
+            const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
             const columnHeaderEndRow = Math.min(endRow, scene.table.frozenRowCount - 1);
-            const strokeArray = [true, true, !needBody, !needCornerHeader];
-            scene.createCellSelectBorder(columnHeaderStartCol, startRow, endCol, columnHeaderEndRow, 'columnHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+            const strokeArray = [true, !needRightTopCornerHeader, !needBody, !needCornerHeader];
+            scene.createCellSelectBorder(columnHeaderStartCol, startRow, columnHeaderEndCol, columnHeaderEndRow, 'columnHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+        }
+        if (needBottomColumnHeader) {
+            const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
+            const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
+            const columnHeaderStartRow = Math.max(startRow, scene.table.rowCount - scene.table.bottomFrozenRowCount);
+            const strokeArray = [!needBody, !needRightBottomCornerHeader, true, !needLeftBottomCornerHeader];
+            scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, endRow, 'bottomFrozen', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
         if (needRowHeader) {
             const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
+            const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
             const columnHeaderEndCol = Math.min(endCol, scene.table.frozenColCount - 1);
-            const strokeArray = [!needCornerHeader, !needBody, true, true];
-            scene.createCellSelectBorder(startCol, columnHeaderStartRow, columnHeaderEndCol, endRow, 'rowHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+            const strokeArray = [!needCornerHeader, !needBody, !needLeftBottomCornerHeader, true];
+            scene.createCellSelectBorder(startCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'rowHeader', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+        }
+        if (needRightRowHeader) {
+            const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
+            const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
+            const columnHeaderStartCol = Math.max(startCol, scene.table.colCount - scene.table.rightFrozenColCount);
+            const strokeArray = [!needRightTopCornerHeader, true, !needRightBottomCornerHeader, !needBody];
+            scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, endCol, columnHeaderEndRow, 'rightFrozen', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
         if (needBody) {
             const columnHeaderStartCol = Math.max(startCol, scene.table.frozenColCount);
             const columnHeaderStartRow = Math.max(startRow, scene.table.frozenRowCount);
-            const strokeArray = [!needColumnHeader, true, true, !needRowHeader];
-            scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, endCol, endRow, 'body', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
+            const columnHeaderEndCol = Math.min(endCol, scene.table.colCount - scene.table.rightFrozenColCount - 1);
+            const columnHeaderEndRow = Math.min(endRow, scene.table.rowCount - scene.table.bottomFrozenRowCount - 1);
+            const strokeArray = [!needColumnHeader, !needRightRowHeader, !needBottomColumnHeader, !needRowHeader];
+            scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'body', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
     }
 
@@ -46109,23 +46246,7 @@
         const startRow = Math.min(start_Row, end_Row);
         const endCol = Math.max(start_Col, end_Col);
         const endRow = Math.max(start_Row, end_Row);
-        let cellsBounds;
-        for (let i = startCol; i <= endCol; i++) {
-            for (let j = startRow; j <= endRow; j++) {
-                const cellGroup = scene.highPerformanceGetCell(i, j);
-                if (cellGroup.role === 'shadow-cell') {
-                    continue;
-                }
-                cellGroup.AABBBounds.width();
-                const bounds = cellGroup.globalAABBBounds;
-                if (!cellsBounds) {
-                    cellsBounds = bounds;
-                }
-                else {
-                    cellsBounds.union(bounds);
-                }
-            }
-        }
+        const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
         const theme = scene.table.theme;
         const bodyClickBorderColor = theme.selectionStyle?.cellBorderColor;
         const bodyClickLineWidth = theme.selectionStyle?.cellBorderLineWidth;
@@ -46139,10 +46260,10 @@
                 }
                 return false;
             }),
-            x: cellsBounds.x1 - scene.tableGroup.attribute.x,
-            y: cellsBounds.y1 - scene.tableGroup.attribute.y,
-            width: cellsBounds.width(),
-            height: cellsBounds.height(),
+            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
+            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            width: 0,
+            height: 0,
             visible: true
         });
         scene.lastSelectId = selectId;
@@ -46156,7 +46277,17 @@
                 ? scene.colHeaderGroup
                 : selectRangeType === 'rowHeader'
                     ? scene.rowHeaderGroup
-                    : scene.cornerHeaderGroup);
+                    : selectRangeType === 'cornerHeader'
+                        ? scene.cornerHeaderGroup
+                        : selectRangeType === 'rightTopCorner'
+                            ? scene.rightTopCornerGroup
+                            : selectRangeType === 'rightFrozen'
+                                ? scene.rightFrozenGroup
+                                : selectRangeType === 'leftBottomCorner'
+                                    ? scene.leftBottomCornerGroup
+                                    : selectRangeType === 'bottomFrozen'
+                                        ? scene.bottomFrozenGroup
+                                        : scene.rightBottomCornerGroup);
     }
 
     function moveSelectingRangeComponentsToSelectedRangeComponents(scene) {
@@ -46236,7 +46367,7 @@
     }
     function addRow(row, scene) {
         for (let col = 0; col < scene.table.colCount; col++) {
-            const cellGroup = new Group$1({
+            const cellGroup = new Group({
                 x: 0,
                 y: 0,
                 width: scene.table.getColWidth(col),
@@ -46509,7 +46640,7 @@
         scene.hasFrozen = true;
     }
     function moveColumnFromBodyToRowHeader(scene) {
-        const column = scene.bodyGroup.firstChild instanceof Group$1 ? scene.bodyGroup.firstChild : null;
+        const column = scene.bodyGroup.firstChild instanceof Group ? scene.bodyGroup.firstChild : null;
         if (column) {
             scene.rowHeaderGroup.appendChild(column);
             scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width + column.attribute.width);
@@ -46517,7 +46648,7 @@
         }
     }
     function moveColumnFromColHeaderToCornerHeader(scene) {
-        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group$1 ? scene.colHeaderGroup.firstChild : null;
+        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group ? scene.colHeaderGroup.firstChild : null;
         if (headerColumn) {
             scene.cornerHeaderGroup.appendChild(headerColumn);
             scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
@@ -46525,7 +46656,7 @@
         }
     }
     function moveColumnFromRowHeaderToBody(scene) {
-        const column = scene.rowHeaderGroup.lastChild instanceof Group$1
+        const column = scene.rowHeaderGroup.lastChild instanceof Group
             ? scene.rowHeaderGroup.lastChild
             : scene.rowHeaderGroup.lastChild?._prev;
         if (column) {
@@ -46535,7 +46666,7 @@
         }
     }
     function moveColumnFromCornerHeaderToColHeader(scene) {
-        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group$1
+        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group
             ? scene.cornerHeaderGroup.lastChild
             : scene.cornerHeaderGroup.lastChild?._prev;
         if (headerColumn) {
@@ -46545,7 +46676,7 @@
         }
     }
     function moveColumnFromBottomToLeftBottomCorner(scene) {
-        const column = scene.bottomFrozenGroup.firstChild instanceof Group$1 ? scene.bottomFrozenGroup.firstChild : null;
+        const column = scene.bottomFrozenGroup.firstChild instanceof Group ? scene.bottomFrozenGroup.firstChild : null;
         if (column) {
             scene.leftBottomCornerGroup.appendChild(column);
             scene.leftBottomCornerGroup.setAttribute('width', scene.leftBottomCornerGroup.attribute.width + column.attribute.width);
@@ -46553,7 +46684,7 @@
         }
     }
     function moveColumnFromLeftBottomCornerToBottom(scene) {
-        const column = scene.leftBottomCornerGroup.lastChild instanceof Group$1
+        const column = scene.leftBottomCornerGroup.lastChild instanceof Group
             ? scene.leftBottomCornerGroup.lastChild
             : scene.leftBottomCornerGroup.lastChild?._prev;
         if (column) {
@@ -46890,7 +47021,7 @@
     function initSceneGraph(scene) {
         const width = scene.table.tableNoFrameWidth;
         const height = scene.table.tableNoFrameHeight;
-        scene.tableGroup = new Group$1({ x: 0, y: 0, width, height, clip: true, pickable: false });
+        scene.tableGroup = new Group({ x: 0, y: 0, width, height, clip: true, pickable: false });
         scene.tableGroup.role = 'table';
         const colHeaderGroup = createContainerGroup(0, 0);
         colHeaderGroup.role = 'col-header';
@@ -46928,10 +47059,10 @@
             createCornerCell(rightBottomCornerGroup, scene.table.theme.cornerRightBottomCellStyle || scene.table.theme.cornerHeaderStyle);
         }
         scene.tableGroup.addChild(bodyGroup);
-        scene.tableGroup.addChild(rightFrozenGroup);
-        scene.tableGroup.addChild(bottomFrozenGroup);
         scene.tableGroup.addChild(rowHeaderGroup);
+        scene.tableGroup.addChild(bottomFrozenGroup);
         scene.tableGroup.addChild(colHeaderGroup);
+        scene.tableGroup.addChild(rightFrozenGroup);
         scene.tableGroup.addChild(rightBottomCornerGroup);
         scene.tableGroup.addChild(rightTopCornerGroup);
         scene.tableGroup.addChild(leftBottomCornerGroup);
@@ -46939,7 +47070,7 @@
         scene.tableGroup.addChild(componentGroup);
     }
     function createContainerGroup(width, height) {
-        return new Group$1({
+        return new Group({
             x: 0,
             y: 0,
             width,
@@ -47358,7 +47489,7 @@
             if (this.table.rightFrozenColCount > 0 &&
                 col >= this.table.colCount - this.table.rightFrozenColCount &&
                 row < this.table.frozenRowCount) {
-                cell = this.rightBottomCornerGroup.getColGroup(col)?.getRowGroup(row);
+                cell = this.rightTopCornerGroup.getColGroup(col)?.getRowGroup(row);
             }
             else if (this.table.bottomFrozenRowCount > 0 &&
                 row >= this.table.rowCount - this.table.bottomFrozenRowCount &&
@@ -47453,7 +47584,9 @@
             this.stage.renderNextFrame();
         }
         resetAllSelectComponent() {
-            updateAllSelectComponent(this);
+            if (this.table.stateManeger.select?.ranges?.length > 0) {
+                updateAllSelectComponent(this);
+            }
         }
         hideHoverIcon(col, row) {
             if (col === -1 || row === -1) {
@@ -50172,7 +50305,7 @@
                     eventManeger.dealColumnMover(eventArgsSet);
                 }
                 else {
-                    eventManeger.dealTableSelect(eventArgsSet);
+                    eventManeger.dealTableSelect(eventArgsSet, true);
                 }
                 return;
             }
@@ -50285,7 +50418,7 @@
             }
         });
         table.scenegraph.tableGroup.addEventListener('pointerleave', (e) => {
-            if (!stateManeger.isResizeCol()) {
+            if (!stateManeger.isResizeCol() && !stateManeger.isMoveCol() && !stateManeger.isSelecting()) {
                 stateManeger.updateInteractionState(InteractionState.default);
                 stateManeger.updateCursor();
             }
@@ -50322,10 +50455,15 @@
                 }
             }
             else if (stateManeger.isSelecting()) {
-                table.stateManeger.endSelectCells();
                 if (table.stateManeger.select?.ranges?.length) {
                     const lastCol = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.col;
                     const lastRow = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.row;
+                    table.stateManeger.select.selecting = false;
+                    table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
+                        ranges: table.stateManeger.select.ranges,
+                        col: lastCol,
+                        row: lastRow
+                    });
                     if (table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
                         const cellsEvent = {
                             event: e.nativeEvent,
@@ -50555,7 +50693,8 @@
             const target = e.target;
             if (target &&
                 !target.isDescendantsOf(table.scenegraph.tableGroup) &&
-                target !== table.scenegraph.tableGroup) {
+                target !== table.scenegraph.tableGroup &&
+                target !== table.scenegraph.stage) {
                 stateManeger.updateInteractionState(InteractionState.default);
                 eventManeger.dealTableHover();
                 eventManeger.dealTableSelect();
@@ -50740,7 +50879,8 @@
         }
         state.resetInteractionState();
         if (event.cancelable &&
-            ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
+            (state.table.internalProps.overscrollBehavior === 'none' ||
+                (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) ||
                 (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, state)))) {
             event.preventDefault();
         }
@@ -50870,7 +51010,8 @@
                 eventManeger.touchMovePoints[eventManeger.touchMovePoints.length - 2].y;
             handleWhell({ deltaX, deltaY }, stateManeger);
             if (e.cancelable &&
-                ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) ||
+                (table.internalProps.overscrollBehavior === 'none' ||
+                    (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) ||
                     (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManeger)))) {
                 e.preventDefault();
             }
@@ -51165,7 +51306,7 @@
         }
         dealMenuHover(eventArgsSet) {
         }
-        dealTableSelect(eventArgsSet) {
+        dealTableSelect(eventArgsSet, isSelectMoving) {
             if (!eventArgsSet) {
                 this.table.stateManeger.updateSelectPos(-1, -1);
                 return false;
@@ -51176,10 +51317,17 @@
                     return false;
                 }
                 const define = this.table.getBodyColumnDefine(eventArgs.col, eventArgs.row);
-                if (this.table.isHeader(eventArgs.col, eventArgs.row) && define?.disableHeaderSelect) {
+                if (this.table.isHeader(eventArgs.col, eventArgs.row) &&
+                    (define?.disableHeaderSelect || this.table.stateManeger.select?.disableHeader)) {
+                    if (!isSelectMoving) {
+                        this.table.stateManeger.updateSelectPos(-1, -1);
+                    }
                     return false;
                 }
                 else if (!this.table.isHeader(eventArgs.col, eventArgs.row) && define?.disableSelect) {
+                    if (!isSelectMoving) {
+                        this.table.stateManeger.updateSelectPos(-1, -1);
+                    }
                     return false;
                 }
                 if (this.table.isPivotChart() &&
@@ -51670,7 +51818,7 @@
 	margin-right: 15px;
 }
 `;
-        document.body.appendChild(styleElement);
+        document.head.appendChild(styleElement);
     }
 
     importStyle$1();
@@ -52600,7 +52748,7 @@
 	border: 1px solid #E6E8ED;
 }
 `;
-        document.body.appendChild(styleElement);
+        document.head.appendChild(styleElement);
     }
 
     importStyle();
@@ -54093,7 +54241,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.13.4-alpha.3";
+        version = "0.13.4";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -54105,7 +54253,7 @@
             if (!container && options.mode !== 'node') {
                 throw new Error("vtable's container is undefined");
             }
-            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight } = options;
+            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior } = options;
             this.container = container;
             this.options = options;
             this.options.container = container;
@@ -54157,6 +54305,7 @@
             internalProps.dragHeaderMode = dragHeaderMode;
             internalProps.renderChartAsync = renderChartAsync;
             setBatchRenderChartCount(renderChartAsyncBatchCount);
+            internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
             internalProps._colRangeWidthsMap = new Map();
@@ -54971,6 +55120,51 @@
             }
             return count;
         }
+        getBodyVisibleCellRange() {
+            const { scrollTop, scrollLeft } = this;
+            const frozenRowsHeight = this.getFrozenRowsHeight();
+            const frozenColsWidth = this.getFrozenColsWidth();
+            const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
+            const rightFrozenColsWidth = this.getRightFrozenColsWidth();
+            const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
+            const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);
+            const rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight
+                ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
+                : this.rowCount - 1;
+            const colEnd = this.getAllColsWidth() > this.tableNoFrameWidth
+                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
+                : this.colCount - 1;
+            if (colEnd < 0 || rowEnd < 0) {
+                return null;
+            }
+            return { rowStart, colStart, rowEnd, colEnd };
+        }
+        getBodyVisibleRowRange() {
+            const { scrollTop } = this;
+            const frozenRowsHeight = this.getFrozenRowsHeight();
+            const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
+            const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
+            const rowEnd = this.getAllRowsHeight() > this.tableNoFrameHeight
+                ? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
+                : this.rowCount - 1;
+            if (rowEnd < 0) {
+                return null;
+            }
+            return { rowStart, rowEnd };
+        }
+        getBodyVisibleColRange() {
+            const { scrollLeft } = this;
+            const frozenColsWidth = this.getFrozenColsWidth();
+            const rightFrozenColsWidth = this.getRightFrozenColsWidth();
+            const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);
+            const colEnd = this.getAllColsWidth() > this.tableNoFrameWidth
+                ? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
+                : this.colCount - 1;
+            if (colEnd < 0) {
+                return null;
+            }
+            return { colStart, colEnd };
+        }
         get visibleColCount() {
             const { frozenColCount } = this;
             const visibleRect = this.getVisibleRect();
@@ -55055,7 +55249,7 @@
         }
         updateOption(options) {
             this.options = options;
-            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, customRender, renderChartAsync, renderChartAsyncBatchCount } = options;
+            const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, customRender, renderChartAsync, renderChartAsyncBatchCount, overscrollBehavior } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
             }
@@ -55096,6 +55290,7 @@
             internalProps.dragHeaderMode = dragHeaderMode;
             internalProps.renderChartAsync = renderChartAsync;
             setBatchRenderChartCount(renderChartAsyncBatchCount);
+            internalProps.overscrollBehavior = overscrollBehavior ?? 'auto';
             internalProps.cellTextOverflows = {};
             internalProps._rowHeightsMap = new NumberMap();
             internalProps._rowRangeHeightsMap = new Map();
@@ -63038,67 +63233,70 @@
         }
         getChartInstance(cellHeaderPaths) {
             const cellAddr = this.getCellAddressByHeaderPaths(cellHeaderPaths);
-            const cellPosition = this.getCellRelativeRect(cellAddr.col, cellAddr.row);
-            const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
-            let chartInstance;
-            const chartNode = cellGroup?.getChildren()?.[0];
-            if (chartNode.attribute.chartInstance) {
-                chartInstance = chartNode.attribute.chartInstance;
-                const { dataId, data, axes, spec } = chartNode.attribute;
-                const viewBox = chartNode.getViewBox();
-                axes.forEach((axis, index) => {
-                    if (axis.type === 'linear') {
-                        const chartAxis = chartInstance._chart._components[index];
-                        chartAxis._domain = {
-                            min: axis.range?.min ?? 0,
-                            max: axis.range?.max ?? 0
-                        };
-                    }
-                    else if (axis.type === 'band') {
-                        const chartAxis = chartInstance._chart._components[index];
-                        chartAxis._spec.domain = axis.domain.slice(0);
-                        chartAxis.updateScaleDomain();
+            if (cellAddr) {
+                const cellPosition = this.getCellRelativeRect(cellAddr.col, cellAddr.row);
+                const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
+                let chartInstance;
+                const chartNode = cellGroup?.getChildren()?.[0];
+                if (chartNode.attribute.chartInstance) {
+                    chartInstance = chartNode.attribute.chartInstance;
+                    const { dataId, data, axes, spec } = chartNode.attribute;
+                    const viewBox = chartNode.getViewBox();
+                    axes.forEach((axis, index) => {
+                        if (axis.type === 'linear') {
+                            const chartAxis = chartInstance._chart._components[index];
+                            chartAxis._domain = {
+                                min: axis.range?.min ?? 0,
+                                max: axis.range?.max ?? 0
+                            };
+                        }
+                        else if (axis.type === 'band') {
+                            const chartAxis = chartInstance._chart._components[index];
+                            chartAxis._spec.domain = axis.domain.slice(0);
+                            chartAxis.updateScaleDomain();
+                        }
+                    });
+                    chartInstance.updateViewBox({
+                        x1: viewBox.x1 - chartNode.getRootNode().table.scrollLeft,
+                        x2: viewBox.x2 - chartNode.getRootNode().table.scrollLeft,
+                        y1: viewBox.y1 - chartNode.getRootNode().table.scrollTop,
+                        y2: viewBox.y2 - chartNode.getRootNode().table.scrollTop
+                    }, false, false);
+                    if (typeof dataId === 'string') {
+                        chartInstance.updateDataSync(dataId, data ?? []);
                     }
-                });
-                chartInstance.updateViewBox({
-                    x1: viewBox.x1 - chartNode.getRootNode().table.scrollLeft,
-                    x2: viewBox.x2 - chartNode.getRootNode().table.scrollLeft,
-                    y1: viewBox.y1 - chartNode.getRootNode().table.scrollTop,
-                    y2: viewBox.y2 - chartNode.getRootNode().table.scrollTop
-                }, false, false);
-                if (typeof dataId === 'string') {
-                    chartInstance.updateDataSync(dataId, data ?? []);
-                }
-                else {
-                    const dataBatch = [];
-                    for (const dataIdStr in dataId) {
-                        const dataIdAndField = dataId[dataIdStr];
-                        const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                        dataBatch.push({
-                            id: dataIdStr,
-                            values: dataIdAndField
-                                ? data?.filter((item) => {
-                                    return item.hasOwnProperty(dataIdAndField);
-                                }) ?? []
-                                : data ?? [],
-                            fields: series?.data?.fields
-                        });
-                        if (!chartInstance.updateFullDataSync) {
-                            chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                                ? data?.filter((item) => {
-                                    return item.hasOwnProperty(dataIdAndField);
-                                }) ?? []
-                                : data ?? []);
+                    else {
+                        const dataBatch = [];
+                        for (const dataIdStr in dataId) {
+                            const dataIdAndField = dataId[dataIdStr];
+                            const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                            dataBatch.push({
+                                id: dataIdStr,
+                                values: dataIdAndField
+                                    ? data?.filter((item) => {
+                                        return item.hasOwnProperty(dataIdAndField);
+                                    }) ?? []
+                                    : data ?? [],
+                                fields: series?.data?.fields
+                            });
+                            if (!chartInstance.updateFullDataSync) {
+                                chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                                    ? data?.filter((item) => {
+                                        return item.hasOwnProperty(dataIdAndField);
+                                    }) ?? []
+                                    : data ?? []);
+                            }
                         }
+                        chartInstance.updateFullDataSync?.(dataBatch);
                     }
-                    chartInstance.updateFullDataSync?.(dataBatch);
+                    this.render();
                 }
-                this.render();
+                return {
+                    chartInstance,
+                    bounds: cellPosition.bounds
+                };
             }
-            return {
-                chartInstance,
-                bounds: cellPosition.bounds
-            };
+            return {};
         }
         _getDimensionSortArray() {
             if (this.options?.axes?.length) {
@@ -63117,180 +63315,569 @@
         }
     }
 
-    class Circle extends Circle$1 {
+    class BaseElement {
+        type;
+        id;
+        x = 0;
+        y = 0;
+        width = 0;
+        height = 0;
+        marginLeft;
+        marginRight;
+        marginTop;
+        marginBottom;
+        layoutWidth;
+        layoutHeight;
+        dx = 0;
+        dy = 0;
+        background;
         constructor(options) {
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
-            super(options);
+            this.id = options.id;
+            this.marginLeft = options.marginLeft ?? 0;
+            this.marginRight = options.marginRight ?? 0;
+            this.marginTop = options.marginTop ?? 0;
+            this.marginBottom = options.marginBottom ?? 0;
+            this.background = options.background || undefined;
+        }
+        getSize(table) {
+            this.initLayoutSize();
+        }
+        initLayoutSize() {
+            this.layoutWidth = this.width + this.marginLeft + this.marginRight;
+            this.layoutHeight = this.height + this.marginTop + this.marginBottom;
+            if (this.background) {
+                this.layoutWidth += (this.background.expandX || 0) * 2;
+                this.layoutHeight += (this.background.expandY || 0) * 2;
+            }
+            this.dx = this.marginLeft;
+            this.dy = this.marginTop;
         }
     }
 
-    class Container extends Group$2 {
-        constructor(containerOptions) {
-            if (containerOptions.direction) {
-                containerOptions.flexDirection = containerOptions.direction;
-            }
-            if (containerOptions.justifyContent &&
-                (containerOptions.justifyContent === 'start' || containerOptions.justifyContent === 'end')) {
-                containerOptions.justifyContent = ('flex-' + containerOptions.justifyContent);
-            }
-            if (containerOptions.alignItems &&
-                (containerOptions.alignItems === 'start' || containerOptions.alignItems === 'end')) {
-                containerOptions.alignItems = ('flex-' + containerOptions.alignItems);
-            }
-            if (containerOptions.alignContent &&
-                (containerOptions.alignContent === 'start' || containerOptions.alignContent === 'end')) {
-                containerOptions.alignContent = ('flex-' + containerOptions.alignContent);
-            }
-            containerOptions.display = 'flex';
-            if (!containerOptions.flexDirection) {
-                containerOptions.flexDirection = 'row';
-            }
-            containerOptions.clip = true;
-            containerOptions.fill = containerOptions?.background?.fill;
-            containerOptions.stroke = containerOptions?.background?.stroke;
-            containerOptions.lineWidth = containerOptions?.background?.lineWidth;
-            containerOptions.cornerRadius = containerOptions?.background?.cornerRadius;
-            const isPaddingNumber = isArray$5(containerOptions.boundsPadding);
-            const padding = [
-                containerOptions.marginTop ??
-                    (isPaddingNumber ? containerOptions.boundsPadding[0] : containerOptions.boundsPadding) ??
-                    0,
-                containerOptions.marginRight ??
-                    (isPaddingNumber ? containerOptions.boundsPadding[1] : containerOptions.boundsPadding) ??
-                    0,
-                containerOptions.marginBottom ??
-                    (isPaddingNumber
-                        ? containerOptions.boundsPadding[2] ?? containerOptions.boundsPadding[0]
-                        : containerOptions.boundsPadding) ??
-                    0,
-                containerOptions.marginLeft ??
-                    (isPaddingNumber
-                        ? containerOptions.boundsPadding[3] ?? containerOptions.boundsPadding[1]
-                        : containerOptions.boundsPadding) ??
-                    0
-            ];
-            containerOptions.boundsPadding = padding;
-            super(containerOptions);
+    class Circle extends BaseElement {
+        type = 'circle';
+        radius;
+        radian;
+        lineWidth;
+        fill;
+        stroke;
+        constructor(options) {
+            super(options);
+            this.radius = options.radius;
+            this.radian = options.radian;
+            this.lineWidth = options.lineWidth;
+            this.fill = options.fill;
+            this.stroke = options.stroke;
+            this.width = this.radius * 2;
+            this.height = this.radius * 2;
+            this.initLayoutSize();
+            this.dx += this.radius;
+            this.dy += this.radius;
         }
     }
 
-    class GroupElement extends Container {
-        constructor(option) {
-            option.flexWrap = 'nowrap';
-            super(option);
+    const DIRECTION_KEY = {
+        row: {
+            x: 'x',
+            y: 'y',
+            width: 'width',
+            height: 'height',
+            layoutWidth: 'layoutWidth',
+            layoutHeight: 'layoutHeight',
+            widthLimit: 'widthLimit',
+            heightLimit: 'heightLimit',
+            parentX: 'parentX',
+            parentY: 'parentY',
+            dx: 'dx',
+            dy: 'dy'
+        },
+        column: {
+            x: 'y',
+            y: 'x',
+            width: 'height',
+            height: 'width',
+            layoutWidth: 'layoutHeight',
+            layoutHeight: 'layoutWidth',
+            widthLimit: 'heightLimit',
+            heightLimit: 'widthLimit',
+            parentX: 'parentY',
+            parentY: 'parentX',
+            dx: 'dy',
+            dy: 'dx'
+        }
+    };
+
+    class Line {
+        width = 0;
+        height = 0;
+        y = 0;
+        x = 0;
+        children = [];
+        addAble = true;
+        widthLimit = 0;
+        heightLimit = 0;
+        direction;
+        directionKey;
+        offsetX = 0;
+        justifyContent;
+        alignItems;
+        constructor(widthLimit, direction, justifyContent, alignItems) {
+            this.direction = direction;
+            this.directionKey = DIRECTION_KEY[this.direction];
+            this.justifyContent = justifyContent;
+            this.alignItems = alignItems;
+            this[this.directionKey.widthLimit] = widthLimit;
+        }
+        add(element) {
+            element[this.directionKey.x] = this[this.directionKey.width];
+            this[this.directionKey.width] += element[this.directionKey.layoutWidth];
+            this.children.push(element);
+            this.updateHeight(element);
+        }
+        canAdd(element) {
+            if (this[this.directionKey.width] + element[this.directionKey.layoutWidth] > this[this.directionKey.widthLimit]) {
+                return false;
+            }
+            return true;
+        }
+        updateHeight(element) {
+            if (element[this.directionKey.layoutHeight] > this[this.directionKey.height]) {
+                this[this.directionKey.height] = element[this.directionKey.layoutHeight];
+            }
+        }
+        lineFinish() {
+            this.updateXAlign();
+        }
+        updateXAlign() {
+            const offsetX = this[this.directionKey.widthLimit] - this[this.directionKey.width];
+            if (this.justifyContent === 'center') {
+                this.offsetX = offsetX / 2;
+            }
+            else if (this.justifyContent === 'start') {
+                this.offsetX = 0;
+            }
+            else {
+                this.offsetX = offsetX;
+            }
+        }
+        getOffsetY(element) {
+            switch (this.alignItems) {
+                case 'start':
+                    return 0;
+                case 'center':
+                    return (this[this.directionKey.height] - element[this.directionKey.layoutHeight]) / 2;
+                case 'end':
+                    return this[this.directionKey.height] - element[this.directionKey.layoutHeight];
+                default:
+                    return 0;
+            }
+        }
+        getContentSize() {
+            const result = {
+                width: 0,
+                height: 0
+            };
+            for (let i = 0; i < this.children.length; i++) {
+                const element = this.children[i];
+                let size;
+                if (element.type === 'container') {
+                    size = element.getContentSize();
+                }
+                else {
+                    size = {
+                        width: element.layoutWidth,
+                        height: element.layoutHeight
+                    };
+                }
+                if (result[this.directionKey.height] < size[this.directionKey.height]) {
+                    result[this.directionKey.height] = size[this.directionKey.height];
+                }
+                result[this.directionKey.width] += size[this.directionKey.width];
+            }
+            return result;
+        }
+        getElements(parentPos = { parentX: 0, parentY: 0 }, isHover = false, isSelect = false) {
+            const elements = [];
+            for (let i = 0; i < this.children.length; i++) {
+                const element = this.children[i];
+                if (element.type === 'container' || element.type === 'group-element') {
+                    const childElements = element.getElements({
+                        [this.directionKey.parentX]: this.offsetX + this[this.directionKey.x] + parentPos.parentX,
+                        [this.directionKey.parentY]: this.getOffsetY(element) + this[this.directionKey.y] + parentPos.parentY
+                    }, isHover, isSelect);
+                    elements.push(...childElements);
+                }
+                else {
+                    if (element.type === 'icon' &&
+                        ((element.cache?.visibleTime === 'mouseenter_cell' && !isHover) ||
+                            (element.cache?.visibleTime === 'click_cell' && !isSelect))) {
+                        continue;
+                    }
+                    element[this.directionKey.x] += this.offsetX + this[this.directionKey.x] + parentPos.parentX;
+                    element[this.directionKey.y] += this.getOffsetY(element) + this[this.directionKey.y] + parentPos.parentY;
+                    elements.push(element);
+                }
+            }
+            return elements;
         }
     }
 
-    class Icon extends Image$3 {
-        svg;
-        iconName;
-        cache;
+    class Rect extends BaseElement {
+        type = 'rect';
+        lineWidth;
+        cornerRadius;
+        radius;
+        fill;
+        stroke;
+        constructor(options) {
+            super(options);
+            this.width = options.width;
+            this.height = options.height;
+            this.lineWidth = options.lineWidth || 0;
+            this.cornerRadius = options.cornerRadius || 0;
+            this.radius = this.cornerRadius;
+            this.fill = options.fill || '#777';
+            this.stroke = options.stroke || undefined;
+            this.initLayoutSize();
+        }
+    }
+
+    class Container extends BaseElement {
+        type = 'container';
+        _widthObj;
+        _heightObj;
+        needCalcSize = false;
+        direction;
+        justifyContent;
+        alignItems;
+        alignContent;
+        lines = [];
+        currentLine;
+        currentLineY = 0;
+        table;
+        directionKey;
+        showBounds;
+        offsetY = 0;
+        isRoot;
         constructor(options) {
-            let cache;
-            if (isString$3(options.iconName)) {
-                const regedIcons = get$1();
-                cache = regedIcons[options.iconName];
-                if (cache) {
-                    options.width = options.width ?? cache.width;
-                    options.height = options.height ?? cache.height;
-                    options.svg = cache.svg;
-                    options.cursor = cache.cursor;
-                }
-            }
-            if (options.svg) {
-                options.image = options.svg;
-            }
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
             super(options);
-            this.cache = cache;
+            this.direction = options.direction || 'row';
+            this.justifyContent = options.justifyContent || 'start';
+            this.alignItems = options.alignItems || 'start';
+            this.alignContent = options.alignContent || 'start';
+            if (isNumber$6(options.width)) {
+                this.width = options.width;
+            }
+            else {
+                this._widthObj = options.width;
+                this.needCalcSize = true;
+            }
+            if (isNumber$6(options.height)) {
+                this.height = options.height;
+            }
+            else {
+                this._heightObj = options.height;
+                this.needCalcSize = true;
+            }
+            this.directionKey = DIRECTION_KEY[this.direction];
+            this.showBounds = options.showBounds || false;
+            this.initLayoutSize();
         }
-    }
-
-    let Image$1 = class Image extends Image$3 {
+        add(element) {
+            if (this.needCalcSize) {
+                throw new Error('Need to specify a parent element before adding a child element when use percent size!');
+            }
+            if (element.type === 'container') {
+                element.calcSize(this.width, this.height);
+            }
+            if (this.currentLine && this.currentLine.canAdd(element)) {
+                this.currentLine.add(element);
+            }
+            else {
+                if (this.currentLine) {
+                    this.currentLine.addAble = false;
+                    this.currentLineY += this.currentLine[this.directionKey.height];
+                    this.currentLine.lineFinish();
+                }
+                this.currentLine = new Line(this[this.directionKey.width], this.direction, this.justifyContent, this.alignItems);
+                this.currentLine[this.directionKey.y] = this.currentLineY;
+                this.currentLine.add(element);
+                this.lines.push(this.currentLine);
+            }
+        }
+        updateYAlign() {
+            const offsetY = this[this.directionKey.height] - this.currentLineY;
+            if (this.alignContent === 'center') {
+                this.offsetY = offsetY / 2;
+            }
+            else if (this.alignContent === 'start') {
+                this.offsetY = 0;
+            }
+            else {
+                this.offsetY = offsetY;
+            }
+        }
+        getSize() {
+            const result = {
+                width: 0,
+                height: 0
+            };
+            if (this.currentLine && this.currentLine.addAble) {
+                result[this.directionKey.height] = this.currentLineY + this.currentLine[this.directionKey.height];
+            }
+            else {
+                result[this.directionKey.height] = this.currentLineY;
+            }
+            for (let i = 0; i < this.lines.length; i++) {
+                const line = this.lines[i];
+                if (result[this.directionKey.width] < line[this.directionKey.width]) {
+                    result[this.directionKey.width] = line[this.directionKey.width];
+                }
+            }
+            return result;
+        }
+        getContentSize() {
+            const result = {
+                width: 0,
+                height: 0
+            };
+            const calcFlag = {
+                width: true,
+                height: true
+            };
+            if (!this.isRoot && !this._heightObj) {
+                calcFlag.height = false;
+                result.height = this.height;
+            }
+            if (!this.isRoot && !this._widthObj) {
+                calcFlag.width = false;
+                result.width = this.width;
+            }
+            for (let i = 0; i < this.lines.length; i++) {
+                const line = this.lines[i];
+                const size = line.getContentSize();
+                if (calcFlag[this.directionKey.width] && result[this.directionKey.width] < size[this.directionKey.width]) {
+                    result[this.directionKey.width] = size[this.directionKey.width];
+                }
+                if (calcFlag[this.directionKey.height]) {
+                    result[this.directionKey.height] += size[this.directionKey.height];
+                }
+            }
+            return result;
+        }
+        calcSize(parentWidth, parentHeight) {
+            if (this._heightObj) {
+                this.height = (parentHeight * this._heightObj.percent) / 100 + this._heightObj.delta;
+                this.needCalcSize = false;
+                this.initLayoutSize();
+            }
+            if (this._widthObj) {
+                this.width = (parentWidth * this._widthObj.percent) / 100 + this._widthObj.delta;
+                this.needCalcSize = false;
+                this.initLayoutSize();
+            }
+        }
+        getElements(parentPos = { parentX: 0, parentY: 0 }, isHover = false, isSelect = false) {
+            if (this.currentLine && this.currentLine.addAble) {
+                this.currentLine.addAble = false;
+                this.currentLineY += this.currentLine[this.directionKey.height];
+                this.currentLine.lineFinish();
+            }
+            this.updateYAlign();
+            const elements = [];
+            if (this.background && this.background.fill) {
+                const backgroundRect = new Rect({
+                    width: this.width,
+                    height: this.height,
+                    stroke: this.background.stroke ?? false,
+                    fill: this.background.fill,
+                    cornerRadius: this.background.cornerRadius ?? 0,
+                    lineWidth: this.background.lineWidth ?? 1
+                });
+                backgroundRect.x += this.x + parentPos.parentX;
+                backgroundRect.y += this.y + parentPos.parentY;
+                elements.push(backgroundRect);
+            }
+            if (this.showBounds) {
+                const boundsRect = new Rect({
+                    width: this.width,
+                    height: this.height,
+                    cornerRadius: 0,
+                    stroke: 'red',
+                    fill: 'rgba(255, 0, 0, 0.2)',
+                    lineWidth: 4
+                });
+                boundsRect.x += this.x + parentPos.parentX;
+                boundsRect.y += this.y + parentPos.parentY;
+                elements.push(boundsRect);
+            }
+            for (let i = 0; i < this.lines.length; i++) {
+                const line = this.lines[i];
+                line[this.directionKey.y] += this.offsetY;
+                const linesElements = line.getElements({
+                    [this.directionKey.parentX]: this.x + parentPos.parentX,
+                    [this.directionKey.parentY]: this.y + parentPos.parentY
+                }, isHover, isSelect);
+                elements.push(...linesElements);
+            }
+            return elements;
+        }
+    }
+
+    class GroupElement extends BaseElement {
+        type = 'group-element';
+        direction;
+        alignItems;
+        width = 0;
+        height = 0;
+        children = [];
+        directionKey;
         constructor(options) {
-            if (options.src) {
-                options.image = options.src;
-            }
-            if (options.shape === 'circle') {
-                options.cornerRadius = options.width / 2;
-            }
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
             super(options);
+            this.direction = options.direction || 'row';
+            this.alignItems = options.alignItems || 'start';
+            this.directionKey = DIRECTION_KEY[this.direction];
         }
-    };
+        add(element) {
+            element.x = this.width;
+            this.width += element.layoutWidth;
+            this.children.push(element);
+            this.updateHeight(element);
+            this.initLayoutSize();
+        }
+        updateHeight(element) {
+            if (element.layoutHeight > this.height) {
+                this.height = element.layoutHeight;
+            }
+        }
+        getOffsetY(element) {
+            switch (this.alignItems) {
+                case 'start':
+                    return 0;
+                case 'center':
+                    return (this[this.directionKey.height] - element[this.directionKey.layoutHeight]) / 2;
+                case 'end':
+                    return this[this.directionKey.height] - element[this.directionKey.layoutHeight];
+                default:
+                    return 0;
+            }
+        }
+        getElements(parentPos = { parentX: 0, parentY: 0 }, isHover = false, isSelect = false) {
+            const elements = [];
+            for (let i = 0; i < this.children.length; i++) {
+                const element = this.children[i];
+                if (element.type === 'icon' &&
+                    ((element.cache?.visibleTime === 'mouseenter_cell' && !isHover) ||
+                        (element.cache?.visibleTime === 'click_cell' && !isSelect))) {
+                    continue;
+                }
+                element[this.directionKey.x] += this[this.directionKey.dx] + this[this.directionKey.x] + parentPos.parentX;
+                element[this.directionKey.y] +=
+                    this.getOffsetY(element) + this[this.directionKey.dy] + this[this.directionKey.y] + parentPos.parentY;
+                elements.push(element);
+            }
+            return elements;
+        }
+    }
 
-    class Rect extends Rect$1 {
+    class Icon extends BaseElement {
+        type = 'icon';
+        svg;
+        iconName;
+        cursor;
+        cache;
         constructor(options) {
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
             super(options);
+            this.iconName = options.iconName;
+            if (isString$3(this.iconName)) {
+                const regedIcons = get$1();
+                const cache = regedIcons[this.iconName];
+                if (cache) {
+                    this.cache = cache;
+                    this.width = cache.width;
+                    this.height = cache.height;
+                    this.svg = cache.svg;
+                    this.cursor = cache.cursor;
+                }
+            }
+            this.width = options.width ?? this.width;
+            this.height = options.height ?? this.height;
+            this.svg = options.svg ?? this.svg;
+            this.initLayoutSize();
         }
     }
 
-    class Text extends WrapText {
+    let Image$1 = class Image extends BaseElement {
+        type = 'image';
+        src;
+        cursor;
+        cache;
+        shape;
+        constructor(options) {
+            super(options);
+            this.width = options.width ?? this.width;
+            this.height = options.height ?? this.height;
+            this.src = options.src ?? this.src;
+            this.shape = options.shape ?? this.shape;
+            this.initLayoutSize();
+        }
+    };
+
+    class Text extends BaseElement {
+        type = 'text';
+        text;
+        fill;
+        color;
+        stroke;
+        lineWidth;
+        fontSize;
+        fontFamily;
+        fontWeight;
+        fontVariant;
+        fontStyle;
+        ellipsis;
+        maxLineWidth;
+        textAlign;
+        textBaseline;
+        lineHeight;
+        underline;
+        lineThrough;
+        heightLimit;
+        lineClamp;
         constructor(options) {
-            if (!options.textBaseline) {
-                options.textBaseline = 'top';
-            }
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
             super(options);
+            this.text = options.text;
+            this.fontSize = options.fontSize || 12;
+            this.fontFamily = options.fontFamily || 'Arial,sans-serif';
+            this.fill = options.color || options.fill || 'black';
+            this.textBaseline = options.textBaseline || 'top';
+            this.textAlign = options.textAlign || 'left';
+            options.stroke && (this.stroke = options.stroke);
+            options.lineWidth && (this.lineWidth = options.lineWidth);
+            options.fontWeight && (this.fontWeight = options.fontWeight);
+            options.fontVariant && (this.fontVariant = options.fontVariant);
+            options.fontStyle && (this.fontStyle = options.fontStyle);
+            options.ellipsis && (this.ellipsis = options.ellipsis);
+            options.maxLineWidth && (this.maxLineWidth = options.maxLineWidth);
+            options.lineHeight && (this.lineHeight = options.lineHeight);
+            options.underline && (this.underline = options.underline);
+            options.lineThrough && (this.lineThrough = options.lineThrough);
+            options.heightLimit && (this.heightLimit = options.heightLimit);
+            options.lineClamp && (this.lineClamp = options.lineClamp);
         }
         getSize(table) {
-            this.AABBBounds.width();
+            const { width, height } = table.measureText(this.text, {
+                fontSize: this.fontSize,
+                fontWeight: this.fontWeight,
+                fontFamily: this.fontFamily
+            });
+            this.width = width;
+            this.height = height;
+            this.initLayoutSize();
+            if (this.background) {
+                this.dx += this.background.expandX || 0;
+                this.dy += this.background.expandY || 0;
+            }
         }
     }
 
@@ -63301,74 +63888,41 @@
         };
     }
 
-    class Arc extends Arc$1 {
-        constructor(options) {
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
-            super(options);
-        }
-    }
-
-    class Tag extends Tag$1 {
+    class Sector extends BaseElement {
+        type = 'arc';
+        radius;
+        startDegree = 0;
+        endDegree = 360;
+        clockWise = true;
+        lineWidth;
+        fill;
+        stroke;
         constructor(options) {
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
-            super(options);
-        }
-        getSize(table) {
-            this.AABBBounds.width();
-        }
-    }
-
-    class Group extends Group$2 {
-        constructor(options) {
-            const isPaddingNumber = isArray$5(options.boundsPadding);
-            const padding = [
-                options.marginTop ?? (isPaddingNumber ? options.boundsPadding[0] : options.boundsPadding) ?? 0,
-                options.marginRight ?? (isPaddingNumber ? options.boundsPadding[1] : options.boundsPadding) ?? 0,
-                options.marginBottom ??
-                    (isPaddingNumber ? options.boundsPadding[2] ?? options.boundsPadding[0] : options.boundsPadding) ??
-                    0,
-                options.marginLeft ??
-                    (isPaddingNumber ? options.boundsPadding[3] ?? options.boundsPadding[1] : options.boundsPadding) ??
-                    0
-            ];
-            options.boundsPadding = padding;
             super(options);
+            this.radius = options.radius;
+            this.startDegree = options.startDegree;
+            this.endDegree = options.endDegree;
+            this.clockWise = options.clockWise;
+            this.lineWidth = options.lineWidth;
+            this.fill = options.fill;
+            this.stroke = options.stroke;
+            this.width = this.radius * 2;
+            this.height = this.radius * 2;
+            this.initLayoutSize();
+            this.dx += this.radius;
+            this.dy += this.radius;
         }
     }
 
     var index = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        Arc: Arc,
         Circle: Circle,
         Container: Container,
-        Group: Group,
         GroupElement: GroupElement,
         Icon: Icon,
         Image: Image$1,
         Rect: Rect,
-        Tag: Tag,
+        Sector: Sector,
         Text: Text,
         percentCalc: percentCalc
     });
@@ -63619,10 +64173,10 @@
     }
 
     function VTag(params) {
-        return new Tag$1(params ? params.attribute : {});
+        return new Tag(params ? params.attribute : {});
     }
 
-    const version = "0.13.4-alpha.3";
+    const version = "0.13.4";
     function getIcons() {
         return get$1();
     }