@visactor/vtable 0.13.4-alpha.2 → 0.13.4-alpha.3

package/dist/vtable.js

@@ -7867,7 +7867,7 @@
     let Application$1 = class Application {};
     const application$1 = new Application$1();
 
-    const DIRECTION_KEY$2 = {
+    const DIRECTION_KEY$1 = {
       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$1 = class Group extends Graphic$1 {
+    let Group$2 = 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$1.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
+    Group$2.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR$1;
 
-    class Layer extends Group$1 {
+    class Layer extends Group$2 {
       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$3 = class Line extends Graphic$1 {
+    let Line$2 = 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$3.NOWORK_ANIMATE_ATTR = Object.assign({
+    Line$2.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$2[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 {
@@ -14220,9 +14220,9 @@
       }
     };
 
-    let Line$2 = 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$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;
+        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;
         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$2[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$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$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);
+          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) {
@@ -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];
-    class Arc extends Graphic$1 {
+    let Arc$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.NOWORK_ANIMATE_ATTR = Object.assign({
+    };
+    Arc$1.NOWORK_ANIMATE_ATTR = Object.assign({
       cap: 1
     }, NOWORK_ANIMATE_ATTR$1);
 
-    class Arc3d extends Arc {
+    class Arc3d extends Arc$1 {
       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$1 {
+    class ShadowRoot extends Group$2 {
       constructor(graphic) {
         super({
           x: 0,
@@ -15750,7 +15750,7 @@
     }
 
     function createArc(attributes) {
-      return new Arc(attributes);
+      return new Arc$1(attributes);
     }
     function createArea(attributes) {
       return new Area(attributes);
@@ -15759,10 +15759,10 @@
       return new Circle$1(attributes);
     }
     function createGroup(attributes) {
-      return new Group$1(attributes);
+      return new Group$2(attributes);
     }
     function createLine(attributes) {
-      return new Line$3(attributes);
+      return new Line$2(attributes);
     }
     function createPath(attributes) {
       return new Path(attributes);
@@ -20600,7 +20600,7 @@
       Y: 0,
       BACKGROUND: "white"
     };
-    class Stage extends Group$1 {
+    class Stage extends Group$2 {
       set viewBox(b) {
         this._viewBox.setValue(b.x1, b.y1, b.x2, b.y2);
       }
@@ -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$1 {
+    class AbstractComponent extends Group$2 {
       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;
     };
-    class Tag extends AbstractComponent {
+    let Tag$1 = 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.defaultAttributes = {
+    };
+    Tag$1.defaultAttributes = {
       visible: !0,
       textStyle: {
         fontSize: 12,
@@ -26972,7 +26972,7 @@
       }
       renderTitle(container) {
         const titleAttributes = this.getTitleAttribute(),
-          axisTitle = new Tag(Object.assign({}, titleAttributes));
+          axisTitle = new Tag$1(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(tagAttrs);
+        const titleTag = new Tag$1(tagAttrs);
         titleTag.name = LEGEND_ELEMENT_NAME.title, this._title = titleTag, this._innerView.add(titleTag);
       }
       _adjustLayout() {
@@ -32750,7 +32750,7 @@
     class Application {}
     const application = new Application();
 
-    const DIRECTION_KEY$1 = {
+    const DIRECTION_KEY = {
       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$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[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 @@
       }
     }
 
-    let Line$1 = class Line {
+    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$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 ? this.paragraphs[0].attribute.textAlign : this.paragraphs[0].character.textAlign) || "left", this.direction = direction, this.directionKey = DIRECTION_KEY[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$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[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$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(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 @@
         };
     }
 
-    class Group extends Group$1 {
+    let Group$1 = class Group extends Group$2 {
         role;
         col;
         row;
@@ -38252,7 +38252,7 @@
                 this.colHeight += cellHeight;
             }
         }
-    }
+    };
     function after(group, selfChange) {
         if (!(group.stage && group.stage.renderCount)) {
             return;
@@ -38309,13 +38309,10 @@
             if (customRenderObj.rootContainer) {
                 customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
             }
-            if (customRenderObj.rootContainer instanceof Group$1) {
+            if (customRenderObj.rootContainer instanceof Group$2) {
                 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') {
@@ -38352,13 +38349,14 @@
             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({
+        const customGroup = new Group$1({
             x: 0,
             y: 0,
             width,
@@ -38507,6 +38505,8 @@
                 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,6 +38557,24 @@
         }
         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;
@@ -38937,7 +38955,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
-        const cellGroup = new Group({
+        const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
             width,
@@ -39078,7 +39096,7 @@
         const height = table.getRowHeight(row);
         let contentWidth = width;
         let contentHeight = height;
-        const percentCompleteBarGroup = new Group({
+        const percentCompleteBarGroup = new Group$1({
             x: 0,
             y: 0,
             width: contentWidth,
@@ -39508,7 +39526,7 @@
     const yScale = new LinearScale();
     function createSparkLineCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, table, cellTheme) {
         if (!cellGroup) {
-            cellGroup = new Group({
+            cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -39681,7 +39699,7 @@
         else {
             specObj = spec;
         }
-        const group = new Group({
+        const group = new Group$1({
             x,
             y,
             width,
@@ -39706,7 +39724,7 @@
                     interpolate: 'linear'
                 };
             }
-            const symbolGroup = new Group({
+            const symbolGroup = new Group$1({
                 x: 0,
                 y: 0,
                 width,
@@ -39730,7 +39748,7 @@
         return group;
     }
 
-    class CellContent extends Group {
+    class CellContent extends Group$1 {
         _leftGroup;
         _rightGroup;
         _centerGroup;
@@ -39742,19 +39760,19 @@
         _baseline;
         constructor(params) {
             super(params);
-            this._leftGroup = new Group({
+            this._leftGroup = new Group$1({
                 pickable: false,
                 fill: false,
                 stroke: false
             });
             this._leftGroup.role = 'content-left';
-            this._rightGroup = new Group({
+            this._rightGroup = new Group$1({
                 pickable: false,
                 fill: false,
                 stroke: false
             });
             this._rightGroup.role = 'content-right';
-            this._centerGroup = new Group({
+            this._centerGroup = new Group$1({
                 pickable: false,
                 fill: false,
                 stroke: false
@@ -40385,21 +40403,11 @@
     }
 
     const DEFAULT_CONTINUOUS_TICK_COUNT = 5;
-    function getAxisDomainRangeAndLabels(min, max, axisOption, isZeroAlign, axisLength, skipTick) {
+    function getAxisDomainRangeAndLabels(min, max, axisOption, isZeroAlign, skipTick) {
         if (axisOption?.zero) {
             min = Math.min(min, 0);
             max = Math.max(max, 0);
         }
-        if (axisOption?.expand) {
-            const domainMin = min;
-            const domainMax = max;
-            if (isValid$6(axisOption.expand.min)) {
-                min = domainMin - (domainMax - domainMin) * axisOption.expand.min;
-            }
-            if (isValid$6(axisOption.expand.max)) {
-                max = domainMax + (domainMax - domainMin) * axisOption.expand.max;
-            }
-        }
         if (isNumber$6(axisOption?.min)) {
             min = axisOption.min;
         }
@@ -40421,14 +40429,6 @@
         scale.domain([min, max], !!axisOption?.nice);
         if (axisOption?.nice && !isZeroAlign) {
             let tickCount = axisOption.tick?.forceTickCount ?? axisOption.tick?.tickCount ?? 10;
-            if (isFunction$1(tickCount)) {
-                tickCount = tickCount({
-                    axisLength,
-                    labelStyle: axisOption?.label?.style ?? {
-                        fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE
-                    }
-                });
-            }
             if (axisOption.niceType === 'accurateFirst') {
                 tickCount = Math.max(10, tickCount);
             }
@@ -40459,7 +40459,6 @@
         if (!layout._table.isPivotChart()) {
             return undefined;
         }
-        const table = layout._table;
         if (layout.indicatorsAsCol) {
             if (layout.hasTwoIndicatorAxes &&
                 row === layout.columnHeaderLevelCount - 1 &&
@@ -40479,7 +40478,7 @@
                     range.min = range.min < 0 ? -1 : 0;
                     range.max = range.max > 0 ? 1 : 0;
                 }
-                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getColWidth(col));
+                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                 range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
                 range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
                 if (isNumber$6(axisOption?.min)) {
@@ -40529,7 +40528,7 @@
                     range.min = range.min < 0 ? -1 : 0;
                     range.max = range.max > 0 ? 1 : 0;
                 }
-                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getColWidth(col));
+                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                 range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
                 range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
                 if (isNumber$6(axisOption?.min)) {
@@ -40609,7 +40608,7 @@
                     range.min = range.min < 0 ? -1 : 0;
                     range.max = range.max > 0 ? 1 : 0;
                 }
-                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getRowHeight(row));
+                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                 range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
                 range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
                 if (isNumber$6(axisOption?.min)) {
@@ -40657,7 +40656,7 @@
                     range.min = range.min < 0 ? -1 : 0;
                     range.max = range.max > 0 ? 1 : 0;
                 }
-                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getRowHeight(row));
+                const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                 range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
                 range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
                 if (isNumber$6(axisOption?.min)) {
@@ -41293,7 +41292,7 @@
                 if (customLayoutObj.rootContainer) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                 }
-                if (customLayoutObj.rootContainer instanceof Group$1) {
+                if (customLayoutObj.rootContainer instanceof Group$2) {
                     height = customLayoutObj.rootContainer.AABBBounds.height() ?? 0;
                 }
                 else if (customLayoutObj.rootContainer) {
@@ -41431,6 +41430,9 @@
         let rowStart = 0;
         let rowEnd = 0;
         if (row < scene.table.columnHeaderLevelCount) {
+            scene.colHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height + detaY);
+            scene.rowHeaderGroup.setAttribute('y', scene.colHeaderGroup.attribute.y + detaY);
+            scene.bodyGroup.setAttribute('y', scene.bodyGroup.attribute.y + detaY);
             rowStart = row + 1;
             rowEnd = scene.table.columnHeaderLevelCount - 1;
         }
@@ -41826,7 +41828,7 @@
         _menuInfo;
         constructor(table) {
             this._table = table;
-            this._menuInstance = new Group({
+            this._menuInstance = new Group$1({
                 x: 0,
                 y: 0,
                 fill: menuStyle.bgColor,
@@ -41916,7 +41918,7 @@
                         icon = item.icon;
                     }
                 }
-                const group = new Group({
+                const group = new Group$1({
                     y,
                     x,
                     height: menuStyle.lineHeight,
@@ -42790,7 +42792,7 @@
     }
 
     const CHART_NUMBER_TYPE = genNumberType$1();
-    class Chart extends Group$1 {
+    class Chart extends Group$2 {
         type = 'chart';
         chartInstance;
         activeChartInstance;
@@ -43917,14 +43919,9 @@
                 if (customLayoutObj.rootContainer) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                 }
-                if (customLayoutObj.rootContainer instanceof Group$1) {
+                if (customLayoutObj.rootContainer instanceof Group$2) {
                     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;
                 }
@@ -44002,7 +43999,7 @@
         return widthDefined;
     }
 
-    const emptyGroup = new Group({});
+    const emptyGroup = new Group$1({});
     emptyGroup.role = 'empty';
 
     const chartTypes = {};
@@ -44021,7 +44018,7 @@
             padding = functionalPadding;
         }
         if (!cellGroup) {
-            cellGroup = new Group({
+            cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -44079,7 +44076,7 @@
         const autoColWidth = colWidth === 'auto';
         const autoWrapText = headerStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const lineClamp = headerStyle.lineClamp;
-        const cellGroup = new Group({
+        const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
             width: cellWidth,
@@ -44143,7 +44140,7 @@
         if (cellTheme?.text?.textBaseline) {
             textBaseline = cellTheme?.text?.textBaseline;
         }
-        const cellGroup = new Group({
+        const cellGroup = new Group$1({
             x: xOrigin,
             y: yOrigin,
             width,
@@ -44234,7 +44231,7 @@
 
     function createCheckboxCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, colWidth, width, height, padding, textAlign, textBaseline, table, cellTheme, define) {
         if (!cellGroup) {
-            cellGroup = new Group({
+            cellGroup = new Group$1({
                 x: xOrigin,
                 y: yOrigin,
                 width,
@@ -44534,7 +44531,7 @@
         }
         let newCellGroup;
         if (isMerge && (col !== range.start.col || row !== range.start.row)) {
-            newCellGroup = new Group({
+            newCellGroup = new Group$1({
                 x: 0,
                 y: addNew ? 0 : oldCellGroup.attribute.y,
                 width: 0,
@@ -44689,7 +44686,7 @@
             }
             if (mergeResult) {
                 const height = mergeResult.cellHeight / (range.end.row - range.start.row + 1);
-                const cellGroup = new Group({
+                const cellGroup = new Group$1({
                     x: 0,
                     y,
                     width: 0,
@@ -44751,7 +44748,7 @@
         for (let i = colStart; i <= colEnd; i++) {
             const col = i;
             const colWidth = table.getColWidth(col);
-            const columnGroup = new Group({
+            const columnGroup = new Group$1({
                 x: xOrigin + x,
                 y: yOrigin,
                 width: colWidth,
@@ -45674,7 +45671,7 @@
                 }
             }
             if (this.table.columnHeaderLevelCount) {
-                const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
+                const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group$1
                     ? this.table.scenegraph.colHeaderGroup.lastChild
                     : this.table.scenegraph.colHeaderGroup.lastChild._prev);
                 const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
@@ -45682,7 +45679,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
+                const lastColumnGroup = (this.table.scenegraph.bottomFrozenGroup.lastChild instanceof Group$1
                     ? this.table.scenegraph.bottomFrozenGroup.lastChild
                     : this.table.scenegraph.bottomFrozenGroup.lastChild._prev);
                 const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
@@ -45690,13 +45687,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
+                (this.table.scenegraph.bodyGroup.lastChild instanceof Group$1
                     ? 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
+                        (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group$1
                             ? this.table.scenegraph.colHeaderGroup.lastChild
                             : this.table.scenegraph.colHeaderGroup.lastChild._prev);
             }
@@ -45838,7 +45835,7 @@
         return getCellByCache(cacheCellGroup._next, row);
     }
 
-    new Group$1({});
+    new Group$2({});
     function moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, table) {
         const scene = table.scenegraph;
         const cellLocation = table.getCellLocation(colTarget, rowTarget);
@@ -46239,7 +46236,7 @@
     }
     function addRow(row, scene) {
         for (let col = 0; col < scene.table.colCount; col++) {
-            const cellGroup = new Group({
+            const cellGroup = new Group$1({
                 x: 0,
                 y: 0,
                 width: scene.table.getColWidth(col),
@@ -46512,7 +46509,7 @@
         scene.hasFrozen = true;
     }
     function moveColumnFromBodyToRowHeader(scene) {
-        const column = scene.bodyGroup.firstChild instanceof Group ? scene.bodyGroup.firstChild : null;
+        const column = scene.bodyGroup.firstChild instanceof Group$1 ? scene.bodyGroup.firstChild : null;
         if (column) {
             scene.rowHeaderGroup.appendChild(column);
             scene.rowHeaderGroup.setAttribute('width', scene.rowHeaderGroup.attribute.width + column.attribute.width);
@@ -46520,7 +46517,7 @@
         }
     }
     function moveColumnFromColHeaderToCornerHeader(scene) {
-        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group ? scene.colHeaderGroup.firstChild : null;
+        const headerColumn = scene.colHeaderGroup.firstChild instanceof Group$1 ? scene.colHeaderGroup.firstChild : null;
         if (headerColumn) {
             scene.cornerHeaderGroup.appendChild(headerColumn);
             scene.cornerHeaderGroup.setAttribute('width', scene.cornerHeaderGroup.attribute.width + headerColumn.attribute.width);
@@ -46528,7 +46525,7 @@
         }
     }
     function moveColumnFromRowHeaderToBody(scene) {
-        const column = scene.rowHeaderGroup.lastChild instanceof Group
+        const column = scene.rowHeaderGroup.lastChild instanceof Group$1
             ? scene.rowHeaderGroup.lastChild
             : scene.rowHeaderGroup.lastChild?._prev;
         if (column) {
@@ -46538,7 +46535,7 @@
         }
     }
     function moveColumnFromCornerHeaderToColHeader(scene) {
-        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group
+        const headerColumn = scene.cornerHeaderGroup.lastChild instanceof Group$1
             ? scene.cornerHeaderGroup.lastChild
             : scene.cornerHeaderGroup.lastChild?._prev;
         if (headerColumn) {
@@ -46548,7 +46545,7 @@
         }
     }
     function moveColumnFromBottomToLeftBottomCorner(scene) {
-        const column = scene.bottomFrozenGroup.firstChild instanceof Group ? scene.bottomFrozenGroup.firstChild : null;
+        const column = scene.bottomFrozenGroup.firstChild instanceof Group$1 ? scene.bottomFrozenGroup.firstChild : null;
         if (column) {
             scene.leftBottomCornerGroup.appendChild(column);
             scene.leftBottomCornerGroup.setAttribute('width', scene.leftBottomCornerGroup.attribute.width + column.attribute.width);
@@ -46556,7 +46553,7 @@
         }
     }
     function moveColumnFromLeftBottomCornerToBottom(scene) {
-        const column = scene.leftBottomCornerGroup.lastChild instanceof Group
+        const column = scene.leftBottomCornerGroup.lastChild instanceof Group$1
             ? scene.leftBottomCornerGroup.lastChild
             : scene.leftBottomCornerGroup.lastChild?._prev;
         if (column) {
@@ -46893,7 +46890,7 @@
     function initSceneGraph(scene) {
         const width = scene.table.tableNoFrameWidth;
         const height = scene.table.tableNoFrameHeight;
-        scene.tableGroup = new Group({ x: 0, y: 0, width, height, clip: true, pickable: false });
+        scene.tableGroup = new Group$1({ x: 0, y: 0, width, height, clip: true, pickable: false });
         scene.tableGroup.role = 'table';
         const colHeaderGroup = createContainerGroup(0, 0);
         colHeaderGroup.role = 'col-header';
@@ -46942,7 +46939,7 @@
         scene.tableGroup.addChild(componentGroup);
     }
     function createContainerGroup(width, height) {
-        return new Group({
+        return new Group$1({
             x: 0,
             y: 0,
             width,
@@ -54096,7 +54093,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.13.4-alpha.2";
+        version = "0.13.4-alpha.3";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -56367,7 +56364,6 @@
     }
     function getChartAxes(col, row, layout) {
         const axes = [];
-        const table = layout._table;
         if (layout.indicatorsAsCol) {
             const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
             const colPath = layout.getColKeysPath(col, row);
@@ -56383,7 +56379,7 @@
                     range.max = Math.max(range.max, 0);
                 }
                 if (axisOption?.nice) {
-                    const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getColWidth(col));
+                    const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                     range.min = axisRange[0];
                     range.max = axisRange[1];
                 }
@@ -56444,7 +56440,7 @@
                     range.max = Math.max(range.max, 0);
                 }
                 if (axisOption?.nice) {
-                    const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, table.getRowHeight(row));
+                    const { range: axisRange } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign);
                     range.min = axisRange[0];
                     range.max = axisRange[1];
                 }
@@ -63121,569 +63117,180 @@
         }
     }
 
-    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) {
-            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 Circle extends BaseElement {
-        type = 'circle';
-        radius;
-        radian;
-        lineWidth;
-        fill;
-        stroke;
+    class Circle extends Circle$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);
-            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;
         }
     }
 
-    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 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 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) {
-            super(options);
-            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();
-        }
-        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) {
-            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 GroupElement extends Container {
+        constructor(option) {
+            option.flexWrap = 'nowrap';
+            super(option);
         }
     }
 
-    class Icon extends BaseElement {
-        type = 'icon';
+    class Icon extends Image$3 {
         svg;
         iconName;
-        cursor;
         cache;
         constructor(options) {
-            super(options);
-            this.iconName = options.iconName;
-            if (isString$3(this.iconName)) {
+            let cache;
+            if (isString$3(options.iconName)) {
                 const regedIcons = get$1();
-                const cache = regedIcons[this.iconName];
+                cache = regedIcons[options.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();
+                    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;
         }
     }
 
-    let Image$1 = class Image extends BaseElement {
-        type = 'image';
-        src;
-        cursor;
-        cache;
-        shape;
+    let Image$1 = class Image extends Image$3 {
+        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);
+        }
+    };
+
+    class Rect extends Rect$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);
-            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;
+        }
+    }
+
+    class Text extends WrapText {
         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) {
-            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;
-            }
+            this.AABBBounds.width();
         }
     }
 
@@ -63694,41 +63301,74 @@
         };
     }
 
-    class Sector extends BaseElement {
-        type = 'arc';
-        radius;
-        startDegree = 0;
-        endDegree = 360;
-        clockWise = true;
-        lineWidth;
-        fill;
-        stroke;
+    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 {
+        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,
-        Sector: Sector,
+        Tag: Tag,
         Text: Text,
         percentCalc: percentCalc
     });
@@ -63979,10 +63619,10 @@
     }
 
     function VTag(params) {
-        return new Tag(params ? params.attribute : {});
+        return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.13.4-alpha.2";
+    const version = "0.13.4-alpha.3";
     function getIcons() {
         return get$1();
     }