@visactor/vtable 0.19.1 → 0.19.2-alpha.1

package/cjs/core/BaseTable.js

@@ -45,9 +45,9 @@ class BaseTable extends EventTarget_1.EventTarget {
     }
     constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (super(), this.showFrozenIcon = !0, this.version = "0.19.1", this.id = `VTable${Date.now()}`, 
+        if (super(), this.showFrozenIcon = !0, this.version = "0.19.2-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) throw new Error("vtable's container is undefined");
+        !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, keyboardOptions: keyboardOptions, eventOptions: eventOptions, columnResizeMode: columnResizeMode, 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} = options;
         this.container = container, this.options = options, this.options.container = container, 
         this._widthMode = widthMode, this._heightMode = heightMode, this._autoFillWidth = autoFillWidth, 
@@ -63,8 +63,10 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.tableNoFrameHeight = 0, this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight;
         const internalProps = this.internalProps = {};
         void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), 
-        "node" !== env_1.Env.mode && (internalProps.element = (0, tableHelper_1.createRootElement)(this.padding), 
-        internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
+        this.options.canvas ? (internalProps.element = this.options.canvas.parentElement, 
+        internalProps.element.style.position = "relative", internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
+        internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== env_1.Env.mode && (internalProps.element = (0, 
+        tableHelper_1.createRootElement)(this.padding), internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
         internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), 
         internalProps.context = internalProps.canvas.getContext("2d")), internalProps.handler = new EventHandler_1.EventHandler, 
         (0, vutils_1.isNumber)(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), 
@@ -296,34 +298,44 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.internalProps.pixelRatio = pixelRatio, this.scenegraph.setPixelRatio(pixelRatio);
     }
     _updateSize() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const {padding: padding} = this;
         let widthP = 0, heightP = 0;
-        if ("browser" === env_1.Env.mode) {
-            const element = this.getElement(), width1 = null !== (_b = null === (_a = element.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) && void 0 !== _b ? _b : 0, height1 = null !== (_d = null === (_c = element.parentElement) || void 0 === _c ? void 0 : _c.offsetHeight) && void 0 !== _d ? _d : 0;
+        if (this.tableX = 0, this.tableY = 0, this.options.canvas && this.options.viewBox) widthP = this.options.viewBox.x2 - this.options.viewBox.x1, 
+        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(), width1 = null !== (_c = null === (_b = element.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 0, height1 = null !== (_e = null === (_d = element.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 0;
             element.style.width = width1 && width1 - padding.left - padding.right + "px" || "0px", 
             element.style.height = height1 && height1 - padding.top - padding.bottom + "px" || "0px";
             const {canvas: canvas} = this.internalProps;
-            widthP = null !== (_f = null === (_e = canvas.parentElement) || void 0 === _e ? void 0 : _e.offsetWidth) && void 0 !== _f ? _f : 0, 
-            heightP = null !== (_h = null === (_g = canvas.parentElement) || void 0 === _g ? void 0 : _g.offsetHeight) && void 0 !== _h ? _h : 0, 
-            (null === (_j = null == this ? void 0 : this.scenegraph) || void 0 === _j ? void 0 : _j.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
+            widthP = null !== (_g = null === (_f = canvas.parentElement) || void 0 === _f ? void 0 : _f.offsetWidth) && void 0 !== _g ? _g : 0, 
+            heightP = null !== (_j = null === (_h = canvas.parentElement) || void 0 === _h ? void 0 : _h.offsetHeight) && void 0 !== _j ? _j : 0, 
+            (null === (_k = null == this ? void 0 : this.scenegraph) || void 0 === _k ? void 0 : _k.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
             canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, 
             canvas.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));
-        if (null === (_k = this.internalProps.theme) || void 0 === _k ? void 0 : _k.frameStyle) {
-            const lineWidths = toBoxArray(null !== (_m = null === (_l = this.internalProps.theme.frameStyle) || void 0 === _l ? void 0 : _l.borderLineWidth) && void 0 !== _m ? _m : [ null ]), shadowWidths = toBoxArray(null !== (_p = null === (_o = this.internalProps.theme.frameStyle) || void 0 === _o ? void 0 : _o.shadowBlur) && void 0 !== _p ? _p : [ 0 ]);
-            this.tableX = (null !== (_q = lineWidths[3]) && void 0 !== _q ? _q : 0) + (null !== (_r = shadowWidths[3]) && void 0 !== _r ? _r : 0), 
-            this.tableY = (null !== (_s = lineWidths[0]) && void 0 !== _s ? _s : 0) + (null !== (_t = shadowWidths[0]) && void 0 !== _t ? _t : 0), 
-            this.tableNoFrameWidth = width - ((null !== (_u = lineWidths[1]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[1]) && void 0 !== _v ? _v : 0)) - ((null !== (_w = lineWidths[3]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[3]) && void 0 !== _x ? _x : 0)), 
-            this.tableNoFrameHeight = height - ((null !== (_y = lineWidths[0]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[0]) && void 0 !== _z ? _z : 0)) - ((null !== (_0 = lineWidths[2]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[2]) && void 0 !== _1 ? _1 : 0));
-        }
+        if (null === (_l = this.internalProps.theme) || void 0 === _l ? void 0 : _l.frameStyle) {
+            const lineWidths = toBoxArray(null !== (_o = null === (_m = this.internalProps.theme.frameStyle) || void 0 === _m ? void 0 : _m.borderLineWidth) && void 0 !== _o ? _o : [ null ]), shadowWidths = toBoxArray(null !== (_q = null === (_p = this.internalProps.theme.frameStyle) || void 0 === _p ? void 0 : _p.shadowBlur) && void 0 !== _q ? _q : [ 0 ]);
+            this.tableX += (null !== (_r = lineWidths[3]) && void 0 !== _r ? _r : 0) + (null !== (_s = shadowWidths[3]) && void 0 !== _s ? _s : 0), 
+            this.tableY += (null !== (_t = lineWidths[0]) && void 0 !== _t ? _t : 0) + (null !== (_u = shadowWidths[0]) && void 0 !== _u ? _u : 0), 
+            this.tableNoFrameWidth = width - ((null !== (_v = lineWidths[1]) && void 0 !== _v ? _v : 0) + (null !== (_w = shadowWidths[1]) && void 0 !== _w ? _w : 0)) - ((null !== (_x = lineWidths[3]) && void 0 !== _x ? _x : 0) + (null !== (_y = shadowWidths[3]) && void 0 !== _y ? _y : 0)), 
+            this.tableNoFrameHeight = height - ((null !== (_z = lineWidths[0]) && void 0 !== _z ? _z : 0) + (null !== (_0 = shadowWidths[0]) && void 0 !== _0 ? _0 : 0)) - ((null !== (_1 = lineWidths[2]) && void 0 !== _1 ? _1 : 0) + (null !== (_2 = shadowWidths[2]) && void 0 !== _2 ? _2 : 0));
+        } else this.tableX += 0, this.tableY += 0, this.tableNoFrameWidth = width, this.tableNoFrameHeight = height;
+    }
+    updateViewBox(newViewBox) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const oldWidth = null !== (_d = null !== (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.viewBox.x2) && void 0 !== _b ? _b : 0 - (null === (_c = this.options) || void 0 === _c ? void 0 : _c.viewBox.x1)) && void 0 !== _d ? _d : 0, oldHeight = null !== (_h = null !== (_f = null === (_e = this.options) || void 0 === _e ? void 0 : _e.viewBox.y2) && void 0 !== _f ? _f : 0 - (null === (_g = this.options) || void 0 === _g ? void 0 : _g.viewBox.y1)) && void 0 !== _h ? _h : 0, newWidth = newViewBox.x2 - newViewBox.x1, newHeight = newViewBox.y2 - newViewBox.y1;
+        this.options.viewBox = newViewBox, oldWidth !== newWidth || oldHeight !== newHeight ? this.resize() : this.scenegraph.stage.setViewBox(this.options.viewBox, !0);
+    }
+    setViewBoxTransform(a, b, c, d, e, f) {
+        this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
     }
     get rowHierarchyType() {
         return "grid";
     }
     getColsWidth(startCol, endCol) {
         var _a;
+        if (startCol > endCol) return 0;
         startCol = Math.max(startCol, 0), endCol = Math.min(endCol, (null !== (_a = this.colCount) && void 0 !== _a ? _a : 1 / 0) - 1);
         const cachedColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol}`);
         if (null != cachedColWidth) return cachedColWidth;
@@ -352,6 +364,7 @@ class BaseTable extends EventTarget_1.EventTarget {
     }
     getRowsHeight(startRow, endRow) {
         var _a;
+        if (startRow > endRow) return 0;
         startRow = Math.max(startRow, 0), endRow = Math.min(endRow, (null !== (_a = this.rowCount) && void 0 !== _a ? _a : 1 / 0) - 1);
         let h = 0;
         if ("standard" === this.heightMode && !this.autoFillHeight && this.internalProps.layoutMap && endRow >= this.columnHeaderLevelCount && !this.bottomFrozenRowCount && !this.hasAutoImageColumn()) {
@@ -478,21 +491,16 @@ class BaseTable extends EventTarget_1.EventTarget {
         return rect.top = targetTop, rect.bottom = targetBottom, rect;
     }
     getCellsRect(startCol, startRow, endCol, endRow) {
-        const isFrozenStartCell = this.isFrozenCell(startCol, startRow), isFrozenEndCell = this.isFrozenCell(endCol, endRow);
+        var _a, _b, _c, _d, _e, _f;
         let absoluteLeft = this.getColsWidth(0, startCol - 1) || 0, width = this.getColsWidth(startCol, endCol);
-        if (null == isFrozenStartCell ? void 0 : isFrozenStartCell.col) {
-            const scrollLeft = this.scrollLeft;
-            absoluteLeft += scrollLeft, (null == isFrozenEndCell ? void 0 : isFrozenEndCell.col) || (width -= scrollLeft, 
-            width = Math.max(width, this.getColsWidth(startCol, this.frozenColCount - 1)));
-        }
-        const absoluteTop = this.getRowsHeight(0, startRow - 1);
-        let height = this.getRowsHeight(startRow, endRow);
-        if (null == isFrozenStartCell ? void 0 : isFrozenStartCell.row) {
-            const scrollTop = this.scrollTop;
-            (null == isFrozenEndCell ? void 0 : isFrozenEndCell.row) || (height -= scrollTop, 
-            height = Math.max(height, this.getRowsHeight(startRow, this.frozenRowCount - 1)));
-        }
-        return new Rect_1.Rect(Math.round(absoluteLeft), Math.round(absoluteTop), Math.round(width), Math.round(height));
+        const scrollLeft = this.scrollLeft;
+        this.isLeftFrozenColumn(startCol) && this.isRightFrozenColumn(endCol) ? width = this.tableNoFrameWidth - (null !== (_a = this.getColsWidth(startCol + 1, this.colCount - 1)) && void 0 !== _a ? _a : 0) - absoluteLeft : this.isLeftFrozenColumn(startCol) && !this.isLeftFrozenColumn(endCol) ? width = Math.max(width - scrollLeft, this.getColsWidth(startCol, this.frozenColCount - 1)) : !this.isRightFrozenColumn(startCol) && this.isRightFrozenColumn(endCol) ? (absoluteLeft = Math.min(absoluteLeft - scrollLeft, this.tableNoFrameWidth - this.getRightFrozenColsWidth()), 
+        width = this.tableNoFrameWidth - (null !== (_b = this.getColsWidth(startCol + 1, this.colCount - 1)) && void 0 !== _b ? _b : 0) - absoluteLeft) : this.isRightFrozenColumn(startCol) && (absoluteLeft = this.tableNoFrameWidth - (null !== (_c = this.getColsWidth(startCol, this.colCount - 1)) && void 0 !== _c ? _c : 0));
+        let absoluteTop = this.getRowsHeight(0, startRow - 1), height = this.getRowsHeight(startRow, endRow);
+        const scrollTop = this.scrollTop;
+        return this.isTopFrozenRow(startRow) && this.isBottomFrozenRow(endRow) ? height = this.tableNoFrameHeight - (null !== (_d = this.getRowsHeight(startRow + 1, this.rowCount - 1)) && void 0 !== _d ? _d : 0) - absoluteTop : this.isTopFrozenRow(startRow) && !this.isTopFrozenRow(endRow) ? height = Math.max(height - scrollTop, this.getRowsHeight(startRow, this.frozenRowCount - 1)) : !this.isBottomFrozenRow(startRow) && this.isBottomFrozenRow(endRow) ? (absoluteTop = Math.min(absoluteTop - scrollTop, this.tableNoFrameHeight - this.getBottomFrozenRowsHeight()), 
+        height = this.tableNoFrameHeight - (null !== (_e = this.getRowsHeight(startRow + 1, this.rowCount - 1)) && void 0 !== _e ? _e : 0) - absoluteTop) : this.isBottomFrozenRow(startRow) && (absoluteTop = this.tableNoFrameHeight - (null !== (_f = this.getRowsHeight(startRow, this.rowCount - 1)) && void 0 !== _f ? _f : 0)), 
+        new Rect_1.Rect(Math.round(absoluteLeft), Math.round(absoluteTop), Math.round(width), Math.round(height));
     }
     getCellsRectWidth(startCol, startRow, endCol, endRow) {
         const isFrozenStartCell = this.isFrozenCell(startCol, startRow), isFrozenEndCell = this.isFrozenCell(endCol, endRow);
@@ -581,8 +589,11 @@ class BaseTable extends EventTarget_1.EventTarget {
         }));
     }
     _toRelativeRect(absoluteRect, relativeX = !0, relativeY = !0) {
+        var _a, _b, _c, _d;
         const rect = absoluteRect.copy(), visibleRect = this.getVisibleRect();
         return rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0)), rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0)), 
+        rect.offsetLeft(null !== (_b = null === (_a = this.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0), 
+        rect.offsetTop(null !== (_d = null === (_c = this.options.viewBox) || void 0 === _c ? void 0 : _c.y1) && void 0 !== _d ? _d : 0), 
         rect;
     }
     getVisibleRect() {
@@ -686,7 +697,8 @@ class BaseTable extends EventTarget_1.EventTarget {
             return null === (_a = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _a ? void 0 : _a.call(releaseObj);
         })), internalProps.releaseList = null), this.scenegraph.stage.release(), this.scenegraph.proxy.release();
         const {parentElement: parentElement} = internalProps.element;
-        parentElement && parentElement.removeChild(internalProps.element), this.isReleased = !0;
+        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), 
+        this.isReleased = !0;
     }
     fireListeners(type, event) {
         return super.fireListeners(type, event);
@@ -771,6 +783,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return new Rect_1.Rect(this.tableX, this.tableY, width, height);
     }
     _getMouseAbstractPoint(evt, isAddScroll = !0) {
+        var _a, _b, _c, _d;
         let e;
         if (!evt) return {
             inTable: !1,
@@ -783,8 +796,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         rect.right <= clientX && (inTable = !1), rect.bottom <= clientY && (inTable = !1);
         const currentWidth = rect.width, widthRatio = currentWidth / (this.canvas.offsetWidth || currentWidth), currentHeight = rect.height, heightRatio = currentHeight / (this.canvas.offsetHeight || currentHeight);
         return {
-            x: (clientX - rect.left) / widthRatio + (isAddScroll ? this.scrollLeft : 0),
-            y: (clientY - rect.top) / heightRatio + (isAddScroll ? this.scrollTop : 0),
+            x: (clientX - rect.left) / widthRatio + (isAddScroll ? this.scrollLeft : 0) - (null !== (_b = null === (_a = this.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0),
+            y: (clientY - rect.top) / heightRatio + (isAddScroll ? this.scrollTop : 0) - (null !== (_d = null === (_c = this.options.viewBox) || void 0 === _c ? void 0 : _c.y1) && void 0 !== _d ? _d : 0),
             inTable: inTable
         };
     }
@@ -1024,6 +1037,9 @@ class BaseTable extends EventTarget_1.EventTarget {
         }
         return this.internalProps.layoutMap.getCellRange(col, row);
     }
+    hasCustomMerge() {
+        return !!this.internalProps.customMergeCell;
+    }
     getCustomMerge(col, row) {
         if (this.internalProps.customMergeCell) {
             const customMerge = this.internalProps.customMergeCell(col, row, this);