@visactor/vtable 1.6.2-alpha.3 → 1.7.0-alpha.1

package/cjs/core/BaseTable.d.ts

@@ -50,6 +50,7 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
     eventManager: EventManager;
     editorManager: EditManeger;
     _pixelRatio: number;
+    canvasSizeSeted?: boolean;
     static get EVENT_TYPE(): typeof TABLE_EVENT_TYPE;
     readonly options: BaseTableConstructorOptions;
     version: string;
@@ -74,6 +75,7 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
     getContainer(): HTMLElement;
     getElement(): HTMLElement;
     get canvas(): HTMLCanvasElement;
+    setCanvasSize(canvasWidth: number, canvasHeight: number): void;
     resize(): void;
     get rowCount(): number;
     set rowCount(rowCount: number);

package/cjs/core/BaseTable.js

@@ -43,7 +43,7 @@ class BaseTable extends EventTarget_1.EventTarget {
     }
     constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.6.2-alpha.3", this.id = `VTable${Date.now()}`, 
+        if (super(), this.showFrozenIcon = !0, this.version = "1.7.0-alpha.1", this.id = `VTable${Date.now()}`, 
         this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = (0, util_1.throttle2)(this.render.bind(this), 200), 
         !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         const {frozenColCount: frozenColCount = 0, 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, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = pixel_ratio_1.defaultPixelRatio, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, mode: mode, modeParams: modeParams, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight, clearDOM: clearDOM = !0} = options;
@@ -58,7 +58,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         }, 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), 
         padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), 
-        padding.right && (this.padding.right = padding.right))), this.tableNoFrameWidth = 0, 
+        padding.right && (this.padding.right = padding.right))), (0, vutils_1.isValid)(canvasHeight) && (0, 
+        vutils_1.isValid)(canvasWidth) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, 
         this.tableNoFrameHeight = 0, this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight, 
         this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal";
         const internalProps = this.internalProps = {};
@@ -148,6 +149,9 @@ class BaseTable extends EventTarget_1.EventTarget {
     get canvas() {
         return this.internalProps.canvas;
     }
+    setCanvasSize(canvasWidth, canvasHeight) {
+        this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight, this.resize();
+    }
     resize() {
         var _a;
         this._updateSize(), null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach((legend => {
@@ -355,7 +359,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         heightP = this.options.viewBox.y2 - this.options.viewBox.y1, (null === (_a = null == this ? void 0 : this.scenegraph) || void 0 === _a ? void 0 : _a.stage) && (this.options.viewBox ? this.scenegraph.stage.setViewBox(this.options.viewBox, !1) : this.scenegraph.stage.resize(widthP, heightP)); else if ("browser" === env_1.Env.mode) {
             const element = this.getElement();
             let widthWithoutPadding = 0, heightWithoutPadding = 0;
-            if (element.parentElement) {
+            if (this.canvasSizeSeted) widthWithoutPadding = this.canvasWidth, heightWithoutPadding = this.canvasHeight; else if (element.parentElement) {
                 const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
                 widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10), 
                 heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20);
@@ -372,7 +376,7 @@ class BaseTable extends EventTarget_1.EventTarget {
             this.internalProps.bodyDomContainer.style.height = `${heightP}px`), this.internalProps.headerDomContainer && (this.internalProps.headerDomContainer.style.width = `${widthP}px`, 
             this.internalProps.headerDomContainer.style.height = `${heightP}px`);
         } else "node" === env_1.Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
-        const width = Math.floor(widthP - style.getScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getScrollBarSize(this.getTheme().scrollStyle));
+        const width = Math.floor(widthP - style.getVerticalScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getHorizontalScrollBarSize(this.getTheme().scrollStyle));
         if (null === (_g = this.internalProps.theme) || void 0 === _g ? void 0 : _g.frameStyle) {
             const lineWidths = toBoxArray(null !== (_j = null === (_h = this.internalProps.theme.frameStyle) || void 0 === _h ? void 0 : _h.borderLineWidth) && void 0 !== _j ? _j : [ null ]), shadowWidths = toBoxArray(null !== (_l = null === (_k = this.internalProps.theme.frameStyle) || void 0 === _k ? void 0 : _k.shadowBlur) && void 0 !== _l ? _l : [ 0 ]);
             (null === (_m = this.theme.frameStyle) || void 0 === _m ? void 0 : _m.innerBorder) ? (this.tableX = 0,