k-vtable 1.0.2 → 1.0.4

package/es/core/BaseTable.js

@@ -89,8 +89,8 @@ export class BaseTable extends EventTarget {
         return TABLE_EVENT_TYPE;
     }
     constructor(container, options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.0.2", this.id = `VTable${Date.now()}`, 
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        if (super(), this.showFrozenIcon = !0, this.version = "1.0.4", this.id = `VTable${Date.now()}`, 
         this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), 
         "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, 
         container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
@@ -99,11 +99,22 @@ export class BaseTable extends EventTarget {
             container: container
         }), container = options.container && options.container instanceof HTMLElement ? options.container : container, 
         !1 === (null === (_a = options.customConfig) || void 0 === _a ? void 0 : _a.imageAnonymous) && (vglobal.isImageAnonymous = !1);
-        const {frozenColCount: frozenColCount = 0, unfreezeAllOnExceedsMaxWidth: unfreezeAllOnExceedsMaxWidth, frozenRowCount: frozenRowCount, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, widthAdaptiveMode: widthAdaptiveMode = "only-body", heightAdaptiveMode: heightAdaptiveMode = "only-body", keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, enableCheckboxCascade: enableCheckboxCascade, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", resize: resize, dragHeaderMode: dragHeaderMode, dragOrder: dragOrder, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = defaultPixelRatio, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, mode: mode, modeParams: modeParams, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight, clearDOM: clearDOM = !0} = options;
+        const {frozenColCount: frozenColCount = 0, unfreezeAllOnExceedsMaxWidth: unfreezeAllOnExceedsMaxWidth, frozenRowCount: frozenRowCount, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, containerFit: containerFit = {
+            width: !1,
+            height: !1
+        }, widthAdaptiveMode: widthAdaptiveMode = "only-body", heightAdaptiveMode: heightAdaptiveMode = "only-body", keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, enableCheckboxCascade: enableCheckboxCascade, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", resize: resize, dragHeaderMode: dragHeaderMode, dragOrder: dragOrder, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = defaultPixelRatio, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, mode: mode, modeParams: modeParams, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight, clearDOM: clearDOM = !0} = options;
         this.container = container, this.options = options, this._widthMode = widthMode, 
         this._heightMode = heightMode, this._widthAdaptiveMode = widthAdaptiveMode, this._heightAdaptiveMode = heightAdaptiveMode, 
-        this._autoFillWidth = autoFillWidth, this._autoFillHeight = autoFillHeight, this.customRender = customRender, 
-        this.padding = {
+        this._autoFillWidth = autoFillWidth, this._autoFillHeight = autoFillHeight, void 0 !== containerFit && (this._containerFit = "boolean" == typeof containerFit ? {
+            width: containerFit,
+            height: containerFit
+        } : containerFit && "object" == typeof containerFit ? {
+            width: null === (_b = containerFit.width) || void 0 === _b || _b,
+            height: null === (_c = containerFit.height) || void 0 === _c || _c
+        } : {
+            width: !1,
+            height: !1
+        }), this.customRender = customRender, this.padding = {
             top: 0,
             right: 0,
             left: 0,
@@ -113,7 +124,7 @@ export class BaseTable extends EventTarget {
         padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), 
         padding.right && (this.padding.right = padding.right))), (isValid(canvasHeight) || isValid(canvasWidth)) && (this.canvasSizeSeted = !0), 
         this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.canvasWidth = isNumber(canvasWidth) ? canvasWidth : void 0, 
-        this.canvasHeight = isNumber(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_b = options.columnWidthComputeMode) && void 0 !== _b ? _b : "normal";
+        this.canvasHeight = isNumber(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal";
         const internalProps = this.internalProps = {};
         void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), 
         this.options.canvas ? ("node" !== Env.mode && (internalProps.element = this.options.canvas.parentElement, 
@@ -121,7 +132,7 @@ export class BaseTable extends EventTarget {
         internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== Env.mode && (internalProps.element = createRootElement(this.padding), 
         internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = document.createElement("canvas"), 
         internalProps.element.appendChild(internalProps.canvas), internalProps.context = internalProps.canvas.getContext("2d"), 
-        (null === (_c = options.customConfig) || void 0 === _c ? void 0 : _c.createReactContainer) && createReactContainer(this)), 
+        (null === (_e = options.customConfig) || void 0 === _e ? void 0 : _e.createReactContainer) && createReactContainer(this)), 
         internalProps.handler = new EventHandler, isNumber(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), 
         internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, 
         internalProps.frozenRowCount = frozenRowCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, 
@@ -129,9 +140,9 @@ export class BaseTable extends EventTarget {
         internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, 
         internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, 
         internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = enableCheckboxCascade, 
-        internalProps.columnResizeMode = null !== (_d = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _d ? _d : columnResizeMode, 
-        internalProps.rowResizeMode = null !== (_e = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _e ? _e : rowResizeMode, 
-        internalProps.dragHeaderMode = null !== (_g = null !== (_f = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _f ? _f : dragHeaderMode) && void 0 !== _g ? _g : "none", 
+        internalProps.columnResizeMode = null !== (_f = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _f ? _f : columnResizeMode, 
+        internalProps.rowResizeMode = null !== (_g = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _g ? _g : rowResizeMode, 
+        internalProps.dragHeaderMode = null !== (_j = null !== (_h = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _h ? _h : dragHeaderMode) && void 0 !== _j ? _j : "none", 
         internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), 
         internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", 
         internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map, 
@@ -145,14 +156,14 @@ export class BaseTable extends EventTarget {
                 var _a;
                 return "node" === Env.mode ? that.canvasWidth / (null != pixelRatio ? pixelRatio : 1) : this._.canvas.width / (null !== (_a = this._.context.pixelRatio) && void 0 !== _a ? _a : window.devicePixelRatio);
             }
-        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes.of(null !== (_h = options.theme) && void 0 !== _h ? _h : themes.DEFAULT), 
+        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes.of(null !== (_k = options.theme) && void 0 !== _k ? _k : themes.DEFAULT), 
         internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), 
         container ? (clearDOM && (container.innerHTML = ""), container.appendChild(internalProps.element), 
         this._updateSize()) : this._updateSize(), internalProps.bodyHelper = new BodyHelper(this), 
         internalProps.headerHelper = new HeaderHelper(this), internalProps.rowSeriesNumberHelper = new RowSeriesNumberHelper(this), 
         internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, 
-        internalProps.allowFrozenColCount = null !== (_j = options.allowFrozenColCount) && void 0 !== _j ? _j : 0, 
-        internalProps.limitMaxAutoWidth = null !== (_k = options.limitMaxAutoWidth) && void 0 !== _k ? _k : 450, 
+        internalProps.allowFrozenColCount = null !== (_l = options.allowFrozenColCount) && void 0 !== _l ? _l : 0, 
+        internalProps.limitMaxAutoWidth = null !== (_m = options.limitMaxAutoWidth) && void 0 !== _m ? _m : 450, 
         internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, 
         internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, 
         this.scenegraph = new Scenegraph(this), this.stateManager = new StateManager(this), 
@@ -183,8 +194,8 @@ export class BaseTable extends EventTarget {
         }
         if (internalProps.menu = Object.assign({
             renderMode: "html"
-        }, options.menu), Array.isArray(null === (_l = options.menu) || void 0 === _l ? void 0 : _l.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_m = options.menu) || void 0 === _m ? void 0 : _m.dropDownMenuHighlight), 
-        (Array.isArray(null === (_o = options.menu) || void 0 === _o ? void 0 : _o.defaultHeaderMenuItems) || "function" == typeof (null === (_p = options.menu) || void 0 === _p ? void 0 : _p.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
+        }, options.menu), Array.isArray(null === (_o = options.menu) || void 0 === _o ? void 0 : _o.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_p = options.menu) || void 0 === _p ? void 0 : _p.dropDownMenuHighlight), 
+        (Array.isArray(null === (_q = options.menu) || void 0 === _q ? void 0 : _q.defaultHeaderMenuItems) || "function" == typeof (null === (_r = options.menu) || void 0 === _r ? void 0 : _r.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
         "html" === internalProps.menu.renderMode) {
             const MenuHandler = Factory.getComponent("menuHandler");
             internalProps.menuHandler = new MenuHandler(this);
@@ -194,7 +205,7 @@ export class BaseTable extends EventTarget {
             changedCells: new Map
         }, internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell);
         const CustomCellStylePlugin = Factory.getComponent("customCellStylePlugin");
-        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_q = options.customCellStyle) && void 0 !== _q ? _q : [], null !== (_r = options.customCellStyleArrangement) && void 0 !== _r ? _r : [])), 
+        CustomCellStylePlugin && (this.customCellStylePlugin = new CustomCellStylePlugin(this, null !== (_s = options.customCellStyle) && void 0 !== _s ? _s : [], null !== (_t = options.customCellStyleArrangement) && void 0 !== _t ? _t : [])), 
         this._adjustCanvasSizeByOption();
     }
     _adjustCanvasSizeByOption() {
@@ -521,13 +532,14 @@ export class BaseTable extends EventTarget {
         if (null != cachedColWidth) return cachedColWidth;
         const cachedLowerColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol - 1}`);
         if (null != cachedLowerColWidth) {
-            const addWidth = cachedLowerColWidth + this.getColWidth(endCol);
-            return startCol >= 0 && endCol >= 0 && !Number.isNaN(addWidth) && this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(addWidth)), 
+            let addWidth = cachedLowerColWidth + this.getColWidth(endCol);
+            return this.rightFrozenColCount > 0 && endCol === this.colCount - this.rightFrozenColCount && (addWidth = this._getRangeSizeForContainerFit(startCol, endCol, addWidth, "col")), 
+            startCol >= 0 && endCol >= 0 && !Number.isNaN(addWidth) && this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(addWidth)), 
             Math.round(addWidth);
         }
         let w = 0;
         for (let col = startCol; col <= endCol; col++) w += this.getColWidth(col);
-        return startCol >= 0 && endCol >= 0 && this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(w)), 
+        return w = this._getRangeSizeForContainerFit(startCol, endCol, w, "col"), startCol >= 0 && endCol >= 0 && this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(w)), 
         Math.round(w);
     }
     getRowHeight(row) {
@@ -576,12 +588,43 @@ export class BaseTable extends EventTarget {
             }
             h = this.rowHeightsMap.getSumInRange(startRow, endRow);
         } else {
+            const bottomFrozenStartRow = this.rowCount - this.bottomFrozenRowCount;
             for (let i = startRow; i < Math.min(endRow + 1, this.columnHeaderLevelCount); i++) h += this.getRowHeight(i);
-            endRow >= this.columnHeaderLevelCount && (h += this.defaultRowHeight * (Math.min(endRow, this.rowCount - this.bottomFrozenRowCount - 1) - Math.max(this.columnHeaderLevelCount, startRow) + 1));
-            for (let i = this.rowCount - this.bottomFrozenRowCount; i < endRow + 1; i++) h += this.getRowHeight(i);
+            endRow >= this.columnHeaderLevelCount && (h += this.defaultRowHeight * (Math.min(endRow, bottomFrozenStartRow - 1) - Math.max(this.columnHeaderLevelCount, startRow) + 1));
+            let currentBottomFrozenRowsHeight = 0;
+            for (let i = bottomFrozenStartRow; i < endRow + 1; i++) currentBottomFrozenRowsHeight += this.getRowHeight(i);
+            h = this._getRangeSizeForContainerFit(startRow, endRow, h + currentBottomFrozenRowsHeight, "row");
         }
         return Math.round(h);
     }
+    _getRangeSizeForContainerFit(start, end, totalSize, type = "col") {
+        var _a;
+        if (!isFinite(start) || !isFinite(end)) return totalSize;
+        const keyMap = "col" === type ? {
+            totalCount: "colCount",
+            frozenCount: "rightFrozenColCount",
+            fitType: "width",
+            tableSize: "tableNoFrameWidth",
+            getSize: "getColWidth"
+        } : {
+            totalCount: "rowCount",
+            frozenCount: "bottomFrozenRowCount",
+            fitType: "height",
+            tableSize: "tableNoFrameHeight",
+            getSize: "getRowHeight"
+        }, tableSize = this[keyMap.tableSize];
+        if (totalSize >= tableSize) return totalSize;
+        const frozenStart = this[keyMap.totalCount] - this[keyMap.frozenCount];
+        if (!isFinite(this[keyMap.totalCount]) || this[keyMap.frozenCount] <= 0 || frozenStart < 0) return totalSize;
+        if (start > frozenStart || end < frozenStart || start === end || !(null === (_a = this.containerFit) || void 0 === _a ? void 0 : _a[keyMap.fitType])) return totalSize;
+        const last = this[keyMap.totalCount] - 1;
+        let size = tableSize;
+        if (start > 0) for (let i = 0; i < start; i++) if (size -= this[keyMap.getSize](i), 
+        size <= 0) return totalSize;
+        if (end !== last) for (let i = end + 1; i <= last; i++) if (size -= this[keyMap.getSize](i), 
+        size <= 0) return totalSize;
+        return size;
+    }
     getColWidthDefined(col) {
         var _a;
         const {layoutMap: layoutMap} = this.internalProps;
@@ -904,10 +947,10 @@ export class BaseTable extends EventTarget {
         return super.fireListeners(type, event);
     }
     updateOption(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         null === (_a = this.editorManager) || void 0 === _a || _a.cancelEdit(), this.options = options, 
         this._hasAutoImageColumn = void 0;
-        const {frozenColCount: frozenColCount = 0, unfreezeAllOnExceedsMaxWidth: unfreezeAllOnExceedsMaxWidth, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth = 80, keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, enableCheckboxCascade: enableCheckboxCascade, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", resize: resize, dragHeaderMode: dragHeaderMode, dragOrder: dragOrder, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, pixelRatio: pixelRatio, widthMode: widthMode, heightMode: heightMode, autoFillWidth: autoFillWidth, autoFillHeight: autoFillHeight, widthAdaptiveMode: widthAdaptiveMode, heightAdaptiveMode: heightAdaptiveMode, customRender: customRender, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight} = options;
+        const {frozenColCount: frozenColCount = 0, unfreezeAllOnExceedsMaxWidth: unfreezeAllOnExceedsMaxWidth, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth = 80, keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, enableCheckboxCascade: enableCheckboxCascade, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", resize: resize, dragHeaderMode: dragHeaderMode, dragOrder: dragOrder, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, pixelRatio: pixelRatio, widthMode: widthMode, heightMode: heightMode, autoFillWidth: autoFillWidth, autoFillHeight: autoFillHeight, containerFit: containerFit, widthAdaptiveMode: widthAdaptiveMode, heightAdaptiveMode: heightAdaptiveMode, customRender: customRender, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight} = options;
         pixelRatio && pixelRatio !== this.internalProps.pixelRatio && (this.internalProps.pixelRatio = pixelRatio), 
         padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, 
         this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), 
@@ -918,36 +961,45 @@ export class BaseTable extends EventTarget {
         this._widthAdaptiveMode = null != widthAdaptiveMode ? widthAdaptiveMode : "only-body", 
         this._heightAdaptiveMode = null != heightAdaptiveMode ? heightAdaptiveMode : "only-body", 
         this.autoFillWidth = null != autoFillWidth && autoFillWidth, this.autoFillHeight = null != autoFillHeight && autoFillHeight, 
-        this.customRender = customRender, this.canvasWidth = isNumber(canvasWidth) ? canvasWidth : void 0, 
+        void 0 !== containerFit && (this._containerFit = "boolean" == typeof containerFit ? {
+            width: containerFit,
+            height: containerFit
+        } : containerFit && "object" == typeof containerFit ? {
+            width: null === (_b = containerFit.width) || void 0 === _b || _b,
+            height: null === (_c = containerFit.height) || void 0 === _c || _c
+        } : {
+            width: !1,
+            height: !1
+        }), this.customRender = customRender, this.canvasWidth = isNumber(canvasWidth) ? canvasWidth : void 0, 
         this.canvasHeight = isNumber(canvasHeight) ? canvasHeight : void 0;
         const internalProps = this.internalProps;
         if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), 
-        this.columnWidthComputeMode = null !== (_b = options.columnWidthComputeMode) && void 0 !== _b ? _b : "normal", 
+        this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal", 
         internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, 
         internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, 
         internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, 
         internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, 
         internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = enableCheckboxCascade, 
-        internalProps.columnResizeMode = null !== (_c = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _c ? _c : columnResizeMode, 
-        internalProps.rowResizeMode = null !== (_d = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _d ? _d : rowResizeMode, 
-        internalProps.dragHeaderMode = null !== (_f = null !== (_e = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _e ? _e : dragHeaderMode) && void 0 !== _f ? _f : "none", 
+        internalProps.columnResizeMode = null !== (_e = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _e ? _e : columnResizeMode, 
+        internalProps.rowResizeMode = null !== (_f = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _f ? _f : rowResizeMode, 
+        internalProps.dragHeaderMode = null !== (_h = null !== (_g = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _g ? _g : dragHeaderMode) && void 0 !== _h ? _h : "none", 
         internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), 
         internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", 
         internalProps.cellTextOverflows = {}, internalProps._rowHeightsMap = new NumberRangeMap(this), 
         internalProps._rowRangeHeightsMap = new Map, internalProps._colRangeWidthsMap = new Map, 
         internalProps._widthResizedColMap = new Set, internalProps._heightResizedRowMap = new Set, 
         this.colWidthsMap = new NumberMap, this.colContentWidthsMap = new NumberMap, this.colWidthsLimit = {}, 
-        internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_g = options.theme) && void 0 !== _g ? _g : themes.DEFAULT), 
+        internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_j = options.theme) && void 0 !== _j ? _j : themes.DEFAULT), 
         internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), 
         this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, 
-        internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_h = options.allowFrozenColCount) && void 0 !== _h ? _h : 0, 
-        internalProps.limitMaxAutoWidth = null !== (_j = options.limitMaxAutoWidth) && void 0 !== _j ? _j : 450, 
+        internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_k = options.allowFrozenColCount) && void 0 !== _k ? _k : 0, 
+        internalProps.limitMaxAutoWidth = null !== (_l = options.limitMaxAutoWidth) && void 0 !== _l ? _l : 450, 
         internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, 
         internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, 
-        null === (_k = internalProps.legends) || void 0 === _k || _k.forEach((legend => {
+        null === (_m = internalProps.legends) || void 0 === _m || _m.forEach((legend => {
             null == legend || legend.release();
-        })), null === (_l = internalProps.title) || void 0 === _l || _l.release(), internalProps.title = null, 
-        null === (_m = internalProps.emptyTip) || void 0 === _m || _m.release(), internalProps.emptyTip = null, 
+        })), null === (_o = internalProps.title) || void 0 === _o || _o.release(), internalProps.title = null, 
+        null === (_p = internalProps.emptyTip) || void 0 === _p || _p.release(), internalProps.emptyTip = null, 
         internalProps.layoutMap.release(), clearChartRenderQueue(), this.scenegraph.clearCells(), 
         this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), 
         this.eventManager.updateEventBinder(), options.legends) {
@@ -976,15 +1028,15 @@ export class BaseTable extends EventTarget {
         }
         if (internalProps.menu = Object.assign({
             renderMode: "html"
-        }, options.menu), Array.isArray(null === (_o = options.menu) || void 0 === _o ? void 0 : _o.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_p = options.menu) || void 0 === _p ? void 0 : _p.dropDownMenuHighlight), 
-        (Array.isArray(null === (_q = options.menu) || void 0 === _q ? void 0 : _q.defaultHeaderMenuItems) || "function" == typeof (null === (_r = options.menu) || void 0 === _r ? void 0 : _r.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
+        }, options.menu), Array.isArray(null === (_q = options.menu) || void 0 === _q ? void 0 : _q.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_r = options.menu) || void 0 === _r ? void 0 : _r.dropDownMenuHighlight), 
+        (Array.isArray(null === (_s = options.menu) || void 0 === _s ? void 0 : _s.defaultHeaderMenuItems) || "function" == typeof (null === (_t = options.menu) || void 0 === _t ? void 0 : _t.defaultHeaderMenuItems)) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
         "html" === internalProps.menu.renderMode && !internalProps.menuHandler) {
             const MenuHandler = Factory.getComponent("menuHandler");
             internalProps.menuHandler = new MenuHandler(this);
         }
         this.clearCellStyleCache(), this.clearColWidthCache(), this.clearRowHeightCache(), 
         internalProps.customMergeCell = getCustomMergeCellFunc(options.customMergeCell), 
-        null === (_s = this.customCellStylePlugin) || void 0 === _s || _s.updateCustomCell(null !== (_t = options.customCellStyle) && void 0 !== _t ? _t : [], null !== (_u = options.customCellStyleArrangement) && void 0 !== _u ? _u : []), 
+        null === (_u = this.customCellStylePlugin) || void 0 === _u || _u.updateCustomCell(null !== (_v = options.customCellStyle) && void 0 !== _v ? _v : [], null !== (_w = options.customCellStyleArrangement) && void 0 !== _w ? _w : []), 
         this._adjustCanvasSizeByOption();
     }
     renderWithRecreateCells() {
@@ -1020,7 +1072,8 @@ export class BaseTable extends EventTarget {
         return 0;
     }
     getDrawRange() {
-        const width = Math.min(this.tableNoFrameWidth, this.getAllColsWidth()), height = Math.min(this.tableNoFrameHeight, this.getAllRowsHeight());
+        var _a, _b;
+        const width = (null === (_a = this.containerFit) || void 0 === _a ? void 0 : _a.width) ? this.tableNoFrameWidth : Math.min(this.tableNoFrameWidth, this.getAllColsWidth()), height = (null === (_b = this.containerFit) || void 0 === _b ? void 0 : _b.height) ? this.tableNoFrameHeight : Math.min(this.tableNoFrameHeight, this.getAllRowsHeight());
         return new Rect(this.tableX, this.tableY, width, height);
     }
     _getMouseAbstractPoint(evt) {
@@ -1770,8 +1823,11 @@ export class BaseTable extends EventTarget {
         this.render();
         const stage = this.scenegraph.stage;
         if (stage) {
-            const contentWidth = this.tableX + this.getAllColsWidth(), contentHeight = this.tableY + this.getAllRowsHeight();
-            if (contentWidth >= this.canvasWidth && contentHeight >= this.canvasHeight) {
+            let contentWidth = this.tableX + this.getAllColsWidth(), contentHeight = this.tableY + this.getAllRowsHeight();
+            if (this.internalProps.legends && this.internalProps.legends.forEach((legend => {
+                "right" === legend.orient ? contentWidth = Math.max(contentWidth, legend.legendComponent.globalAABBBounds.x2) : "bottom" === legend.orient && (contentHeight = Math.max(contentHeight, legend.legendComponent.globalAABBBounds.y2));
+            })), this.internalProps.title && ("right" === this.internalProps.title._titleOption.orient ? contentWidth = Math.max(contentWidth, this.internalProps.title.getComponentGraphic().globalAABBBounds.x2) : "bottom" === this.internalProps.title._titleOption.orient && (contentHeight = Math.max(contentHeight, this.internalProps.title.getComponentGraphic().globalAABBBounds.y2))), 
+            contentWidth >= this.canvasWidth && contentHeight >= this.canvasHeight) {
                 stage.render();
                 return stage.window.getImageBuffer(type);
             }
@@ -1919,5 +1975,21 @@ export class BaseTable extends EventTarget {
     checkHasColumnAutoWidth() {
         return checkHasColumnAutoWidth(this);
     }
+    get containerFit() {
+        return this._containerFit;
+    }
+    set containerFit(containerFit) {
+        var _a, _b;
+        this._containerFit = "boolean" == typeof containerFit ? {
+            width: containerFit,
+            height: containerFit
+        } : containerFit && "object" == typeof containerFit ? {
+            width: null === (_a = containerFit.width) || void 0 === _a || _a,
+            height: null === (_b = containerFit.height) || void 0 === _b || _b
+        } : {
+            width: !1,
+            height: !1
+        };
+    }
 }
 //# sourceMappingURL=BaseTable.js.map