@visactor/vtable 1.19.6 → 1.19.7

package/dist/vtable.js

@@ -34905,6 +34905,7 @@
         MOUSEENTER_CELL: 'mouseenter_cell',
         MOUSELEAVE_CELL: 'mouseleave_cell',
         CONTEXTMENU_CELL: 'contextmenu_cell',
+        CONTEXTMENU_CANVAS: 'contextmenu_canvas',
         RESIZE_COLUMN: 'resize_column',
         RESIZE_COLUMN_END: 'resize_column_end',
         RESIZE_ROW: 'resize_row',
@@ -36402,6 +36403,9 @@
                     },
                     get verticalPadding() {
                         return scroll.verticalPadding ?? 0;
+                    },
+                    get ignoreFrozenCols() {
+                        return scroll.ignoreFrozenCols ?? false;
                     }
                 };
             }
@@ -39769,8 +39773,8 @@
             if (isValid$3(newRecord)) {
                 newRecord.hierarchyState = oldSource[i].hierarchyState;
             }
-            if (isArray$7(oldRecord.children) &&
-                isArray$7(newRecord.children) &&
+            if (isArray$7(oldRecord?.children) &&
+                isArray$7(newRecord?.children) &&
                 oldRecord.map.size !== 0 &&
                 newRecord.map.size !== 0) {
                 syncGroupCollapseState(oldRecord.children, newRecord.children, oldRecord.map, newRecord.map);
@@ -46422,19 +46426,19 @@
             const visible1 = theme.scrollStyle?.visible;
             const horizontalVisible = theme.scrollStyle?.horizontalVisible ?? visible1;
             const verticalVisible = theme.scrollStyle?.verticalVisible ?? visible1;
-            const tableWidth = Math.ceil(this.table.scenegraph.tableGroup.attribute.width);
-            const tableHeight = Math.ceil(this.table.scenegraph.tableGroup.attribute.height);
+            const tableWidth = Math.ceil(this.table.tableNoFrameWidth);
+            const tableHeight = Math.ceil(this.table.tableNoFrameHeight);
             const totalHeight = this.table.getAllRowsHeight();
             const totalWidth = this.table.getAllColsWidth();
             const frozenRowsHeight = this.table.getFrozenRowsHeight();
             const frozenColsWidth = this.table.getFrozenColsWidth();
             const bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight();
             const rightFrozenColsWidth = this.table.getRightFrozenColsWidth();
+            const hoverOn = this.table.theme.scrollStyle.hoverOn;
             const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
             if (totalWidth > tableWidth + sizeTolerance) {
                 const y = Math.min(tableHeight, totalHeight);
                 const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
-                const hoverOn = this.table.theme.scrollStyle.hoverOn;
                 let attrY = 0;
                 if (this.table.theme.scrollStyle.barToSide) {
                     attrY =
@@ -46445,10 +46449,21 @@
                 else {
                     attrY = y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
                 }
+                let hScrollBarx = frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0);
+                let hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
+                const ignoreFrozenCols = this.table.theme.scrollStyle?.ignoreFrozenCols ?? false;
+                if (ignoreFrozenCols) {
+                    hScrollBarx = !hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0;
+                    hScrollBarWidth = tableWidth;
+                }
+                else {
+                    hScrollBarx = frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0);
+                    hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
+                }
                 this.hScrollBar.setAttributes({
-                    x: frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0),
+                    x: hScrollBarx,
                     y: attrY,
-                    width: tableWidth - frozenColsWidth - rightFrozenColsWidth,
+                    width: hScrollBarWidth,
                     range: [0, rangeEnd],
                     visible: horizontalVisible === 'always'
                 });
@@ -46473,7 +46488,6 @@
                 const x = Math.min(tableWidth, totalWidth);
                 const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
                 let attrX = 0;
-                const hoverOn = this.table.theme.scrollStyle.hoverOn;
                 if (this.table.theme.scrollStyle.barToSide) {
                     attrX =
                         this.table.tableNoFrameWidth -
@@ -54789,6 +54803,22 @@
             this.isPivot = this.table.isPivotTable();
             initSceneGraph(this);
         }
+        canvasShowMenu() {
+            this.stage.addEventListener('rightdown', (e) => {
+                const eventArgsSet = getCellEventArgsSet(e);
+                if (!eventArgsSet.eventArgs) {
+                    this.table.stateManager.triggerContextMenu(-1, -1, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                    this.table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CANVAS, {
+                        event: e,
+                        x: eventArgsSet.abstractPos.x,
+                        y: eventArgsSet.abstractPos.y,
+                        col: -1,
+                        row: -1,
+                        target: undefined
+                    });
+                }
+            });
+        }
         clearCells() {
             this.table.animationManager.clear();
             if (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) {
@@ -55635,6 +55665,9 @@
             if (this.table.options.animationAppear) {
                 dealWithAnimationAppear(this.table);
             }
+            if (this.table.options.menu?.contextMenuWorkOnlyCell === false) {
+                this.canvasShowMenu();
+            }
             this.updateNextFrame();
         }
         dealWidthMode() {
@@ -57485,6 +57518,7 @@
         }
         state.columnResize.x = xInTable;
         state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen);
+        state.table._updateSize();
         if (state.columnResize.col < state.table.frozenColCount &&
             !state.table.isPivotTable() &&
             !state.table.transpose) {
@@ -58143,6 +58177,7 @@
         }
         state.rowResize.y = yInTable;
         state.table.scenegraph.component.updateResizeRow(state.rowResize.row, xInTable, state.rowResize.isBottomFrozen);
+        state.table._updateSize();
         state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForRow(detaY, state) {
@@ -63337,6 +63372,9 @@
             const rect = table.getCellRangeRelativeRect({ col, row });
             const element = table.internalProps.menu.parentElement ?? table.getElement();
             const { top, bottom, left, right } = rect;
+            if (col === -1 && row === -1) {
+                return true;
+            }
             if (table.isFrozenCell(col, row)) {
                 return true;
             }
@@ -67226,7 +67264,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.19.6";
+        version = "1.19.7";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -67918,8 +67956,17 @@
                 widthP = this.canvasWidth - 1;
                 heightP = this.canvasHeight - 1;
             }
-            const width = Math.floor(widthP - getVerticalScrollBarSize(this.getTheme().scrollStyle));
-            const height = Math.floor(heightP - getHorizontalScrollBarSize(this.getTheme().scrollStyle));
+            const scrollStyle = this.getTheme().scrollStyle;
+            let vScrollBarWidth = 0;
+            let hScrollBarWidth = 0;
+            vScrollBarWidth = this.shouldVScrollBarWidthShow(widthP, heightP, scrollStyle)
+                ? getVerticalScrollBarSize(scrollStyle)
+                : 0;
+            hScrollBarWidth = this.shouldHScrollBarWidthShow(widthP, heightP, scrollStyle)
+                ? getHorizontalScrollBarSize(scrollStyle)
+                : 0;
+            const width = Math.floor(widthP - vScrollBarWidth);
+            const height = Math.floor(heightP - hScrollBarWidth);
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
@@ -67932,15 +67979,67 @@
                 else {
                     this.tableX = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
                     this.tableY = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                    const rightBorder = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
                     this.tableNoFrameWidth =
-                        width - ((lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0)) - ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
+                        width -
+                            (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) -
+                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
+                    const bottomBorder = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
                     this.tableNoFrameHeight =
-                        height - ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) - ((lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0));
+                        height -
+                            (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) -
+                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0));
                 }
             }
             this._clearColRangeWidthsMap();
             this._clearRowRangeHeightsMap();
         }
+        shouldVScrollBarWidthShow(tableWidth, tableHeight, scrollStyle) {
+            if (scrollStyle.hoverOn || scrollStyle.visible === 'none') {
+                return false;
+            }
+            const totalHeight = this.getAllRowsHeight();
+            const sizeTolerance = scrollStyle.visible ? getHorizontalScrollBarSize(scrollStyle) : 0;
+            const isHScrollBarDecideVScrollBar = totalHeight > tableHeight - sizeTolerance && totalHeight <= tableHeight;
+            if (isHScrollBarDecideVScrollBar) {
+                const totalWidth = this.getAllColsWidth();
+                const sizeTolerance = scrollStyle.visible ? getVerticalScrollBarSize(scrollStyle) : 0;
+                const isVScrollBarDecideHScrollBar = totalWidth > tableWidth - sizeTolerance && totalWidth <= tableWidth;
+                if (isVScrollBarDecideHScrollBar) {
+                    return false;
+                }
+                if (totalWidth > tableWidth) {
+                    return true;
+                }
+                if (totalWidth <= tableWidth - sizeTolerance) {
+                    return false;
+                }
+            }
+            return !(totalHeight <= tableHeight - sizeTolerance);
+        }
+        shouldHScrollBarWidthShow(tableWidth, tableHeight, scrollStyle) {
+            if (scrollStyle.hoverOn || scrollStyle.visible === 'none') {
+                return false;
+            }
+            const totalWidth = this.getAllColsWidth();
+            const sizeTolerance = scrollStyle.visible ? getVerticalScrollBarSize(scrollStyle) : 0;
+            const isVScrollBarDecideHScrollBar = totalWidth > tableWidth - sizeTolerance && totalWidth <= tableWidth;
+            if (isVScrollBarDecideHScrollBar) {
+                const totalHeight = this.getAllRowsHeight();
+                const sizeTolerance = scrollStyle.visible ? getHorizontalScrollBarSize(scrollStyle) : 0;
+                const isHScrollBarDecideVScrollBar = totalHeight > tableHeight - sizeTolerance && totalHeight <= tableHeight;
+                if (isHScrollBarDecideVScrollBar) {
+                    return false;
+                }
+                if (totalHeight > tableHeight) {
+                    return true;
+                }
+                if (totalHeight <= tableHeight - sizeTolerance) {
+                    return false;
+                }
+            }
+            return !(totalWidth <= tableWidth - sizeTolerance);
+        }
         updateViewBox(newViewBox) {
             const oldWidth = (this.options?.viewBox?.x2 ?? 0) - (this.options?.viewBox?.x1 ?? 0);
             const oldHeight = (this.options?.viewBox?.y2 ?? 0) - (this.options?.viewBox?.y1 ?? 0);
@@ -73075,7 +73174,7 @@
                 }
                 const expand = !hd.hierarchyState || hd.hierarchyState === HierarchyState.expand;
                 if (!!hd.columns && !!expand) {
-                    const isAllHided = hd.columns.every((c) => c.hide);
+                    const isAllHided = hd.columns.every((c) => c.hide) || hd.hide;
                     !isAllHided &&
                         this._addHeaders(maxRow + 1, hd.columns, [...roots, id], hd.hideColumnsSubHeader || hideColumnsSubHeader, hd.levelSpan).forEach(c => results.push(c));
                 }
@@ -74649,7 +74748,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -74666,6 +74764,7 @@
                 this.listTreeStickCellPlugin = new ListTreeStickCellPlugin(this);
             }
             setTimeout(() => {
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -74724,6 +74823,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.bodyBottomStyleCache = new Map();
+            this._updateSize();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.renderAsync();
@@ -75055,6 +75155,9 @@
                 table.colCount = layoutMap.colCount ?? 0;
                 table.rowCount = layoutMap.recordsCount * layoutMap.bodyRowSpanCount + layoutMap.headerLevelCount;
                 this.internalProps.frozenColCount = this.options.frozenColCount ?? 0;
+                if (this.options.frozenColCount >= this.colCount) {
+                    this.internalProps.frozenColCount = 0;
+                }
                 table.frozenRowCount = Math.max(layoutMap.headerLevelCount, this.options.frozenRowCount ?? 0);
                 if (table.bottomFrozenRowCount !== (this.options.bottomFrozenRowCount ?? 0)) {
                     table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
@@ -75385,6 +75488,7 @@
             this.refreshRowColCount();
             this.stateManager.initCheckedState(this.records);
             this.scenegraph.createSceneGraph();
+            this.resize();
         }
         getCheckboxState(field) {
             if (this.stateManager.checkedState.size < this.rowCount - this.columnHeaderLevelCount) {
@@ -75499,11 +75603,11 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
+            this._updateSize();
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
-                this._updateSize();
                 this.internalProps.title.resize();
-                this.scenegraph.resize();
             }
+            this.scenegraph.resize();
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
                     this.internalProps.emptyTip?.resetVisible();
@@ -77802,10 +77906,11 @@
             if (!this.legendComponent || this.visible === false) {
                 return;
             }
-            this.legendComponent.setAttributes({
-                maxWidth: this.table.tableNoFrameWidth,
-                maxHeight: this.table.tableNoFrameHeight
+            const attrs = this.getLegendAttributes({
+                width: this.table.tableNoFrameWidth,
+                height: this.table.tableNoFrameHeight
             });
+            this.legendComponent.setAttributes(attrs);
             this.adjustTableSize(this.legendComponent.attribute);
         }
         adjustTableSize(attrs) {
@@ -78495,6 +78600,19 @@
         }
     };
     function getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions) {
+        if (col === -1 && row === -1 && type === 'context-menu') {
+            if (dropDownMenuOptions?.content) {
+                return {
+                    type,
+                    position: dropDownMenuOptions.position,
+                    referencePosition: dropDownMenuOptions.referencePosition ?? {
+                        rect: { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 }
+                    },
+                    content: dropDownMenuOptions.content
+                };
+            }
+            return null;
+        }
         const { lineHeight, textBaseline, textStick } = table._getCellStyle(col, row);
         let rect = table.getCellRangeRelativeRect(table.getCellRange(col, row));
         if (textStick) {
@@ -78577,7 +78695,9 @@
             const { instance, info: menuInstanceInfo } = instanceInfo;
             const attach = instance && instance.bindMenuElement(col, row, menuInstanceInfo);
             if (attach) {
-                const range = this._table.getCellRange(col, row);
+                const range = col === -1 && row === -1
+                    ? { start: { col: -1, row: -1 }, end: { col: -1, row: -1 } }
+                    : this._table.getCellRange(col, row);
                 this._attachInfo = { range, instance };
             }
         }
@@ -78638,6 +78758,22 @@
                     });
                 }
             });
+            table.on(TABLE_EVENT_TYPE.CONTEXTMENU_CANVAS, e => {
+                if (table.internalProps.menu?.renderMode === 'html') {
+                    const abstractPos = table._getMouseAbstractPoint(e.event);
+                    let menu = null;
+                    if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {
+                        menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row), e.row, e.col, table);
+                    }
+                    else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
+                        menu = table.internalProps.menu?.contextMenuItems;
+                    }
+                    this._bindToCell(-1, -1, 'context-menu', {
+                        content: menu,
+                        position: { x: abstractPos.x, y: abstractPos.y }
+                    });
+                }
+            });
         }
         _getMenuInstanceInfo(col, row, type, dropDownMenuOptions) {
             const table = this._table;
@@ -87789,7 +87925,6 @@
                 if (options.title) {
                     const Title = Factory.getComponent('title');
                     this.internalProps.title = new Title(options.title, this);
-                    this.scenegraph.resize();
                 }
                 if (this.options.emptyTip) {
                     if (this.internalProps.emptyTip) {
@@ -87802,6 +87937,7 @@
                     }
                 }
                 setTimeout(() => {
+                    this.resize();
                     this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
                 }, 0);
             }
@@ -89479,7 +89615,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -89492,6 +89627,7 @@
                 }
             }
             setTimeout(() => {
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -91050,7 +91186,7 @@
     }
 
     registerForVrender();
-    const version = "1.19.6";
+    const version = "1.19.7";
     function getIcons() {
         return get$2();
     }