@visactor/vtable 1.19.6 → 1.19.8

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 -
@@ -49783,6 +49797,9 @@
         else if (columnGroup.colHeight) {
             y = columnGroup.colHeight;
         }
+        else if (rowStart >= table.columnHeaderLevelCount && rowStart < table.rowCount - table.bottomFrozenRowCount) {
+            y = table.getRowsHeight(table.columnHeaderLevelCount, rowStart - 1);
+        }
         for (let j = rowStart; j <= rowEnd; j++) {
             const row = j;
             let cellLocation = table.getCellLocation(col, row);
@@ -54789,6 +54806,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 +55668,9 @@
             if (this.table.options.animationAppear) {
                 dealWithAnimationAppear(this.table);
             }
+            if (this.table.options.menu?.contextMenuWorkOnlyCell === false) {
+                this.canvasShowMenu();
+            }
             this.updateNextFrame();
         }
         dealWidthMode() {
@@ -57485,6 +57521,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 +58180,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) {
@@ -60295,40 +60333,63 @@
             if (eventArgsSet.eventArgs) {
                 stateManager.triggerContextMenu(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
                 const { col, row } = eventArgsSet.eventArgs;
-                if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
-                    const cellInfo = table.getCellInfo(col, row);
-                    let icon;
-                    let position;
-                    if (eventArgsSet.eventArgs?.target) {
-                        const iconInfo = getIconAndPositionFromTarget(eventArgsSet.eventArgs?.target);
-                        if (iconInfo) {
-                            icon = iconInfo.icon;
-                            position = iconInfo.position;
+                if (col >= 0 && row >= 0) {
+                    const ranges = table.getSelectedCellRanges();
+                    let cellInRange = false;
+                    if (ranges.length > 0) {
+                        for (let i = 0; i < ranges.length; i++) {
+                            const range = ranges[i];
+                            const startCol = range.start.col;
+                            const endCol = range.end.col;
+                            const startRow = range.start.row;
+                            const endRow = range.end.row;
+                            if ((col >= startCol && col <= endCol && row >= startRow && row <= endRow) ||
+                                (col >= endCol && col <= startCol && row >= endRow && row <= startRow) ||
+                                (col >= startCol && col <= endCol && row >= endRow && row <= startRow) ||
+                                (col >= endCol && col <= startCol && row >= startRow && row <= endRow)) {
+                                cellInRange = true;
+                                break;
+                            }
                         }
                     }
-                    const cellsEvent = {
-                        ...cellInfo,
-                        event: e.nativeEvent,
-                        cells: [],
-                        targetIcon: icon
-                            ? {
-                                name: icon.name,
-                                position: position,
-                                funcType: icon.attribute.funcType
+                    if (!cellInRange) {
+                        table.selectCell(col, row);
+                    }
+                    if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
+                        const cellInfo = table.getCellInfo(col, row);
+                        let icon;
+                        let position;
+                        if (eventArgsSet.eventArgs?.target) {
+                            const iconInfo = getIconAndPositionFromTarget(eventArgsSet.eventArgs?.target);
+                            if (iconInfo) {
+                                icon = iconInfo.icon;
+                                position = iconInfo.position;
                             }
-                            : undefined,
-                        target: eventArgsSet?.eventArgs?.target,
-                        mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
-                    };
-                    if (table.options.eventOptions?.contextmenuReturnAllSelectedCells ?? true) {
-                        if (cellInRanges(table.stateManager.select.ranges, col, row)) {
-                            cellsEvent.cells = table.getSelectedCellInfos();
                         }
-                        else {
-                            cellsEvent.cells = [[cellInfo]];
+                        const cellsEvent = {
+                            ...cellInfo,
+                            event: e.nativeEvent,
+                            cells: [],
+                            targetIcon: icon
+                                ? {
+                                    name: icon.name,
+                                    position: position,
+                                    funcType: icon.attribute.funcType
+                                }
+                                : undefined,
+                            target: eventArgsSet?.eventArgs?.target,
+                            mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+                        };
+                        if (table.options.eventOptions?.contextmenuReturnAllSelectedCells ?? true) {
+                            if (cellInRanges(table.stateManager.select.ranges, col, row)) {
+                                cellsEvent.cells = table.getSelectedCellInfos();
+                            }
+                            else {
+                                cellsEvent.cells = [[cellInfo]];
+                            }
                         }
+                        table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, cellsEvent);
                     }
-                    table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, cellsEvent);
                 }
             }
         });
@@ -62153,33 +62214,6 @@
         });
     }
 
-    function rightButtonClickEvent(table) {
-        table.on(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, e => {
-            const { col, row } = e;
-            const ranges = table.getSelectedCellRanges();
-            let cellInRange = false;
-            if (ranges.length > 0) {
-                for (let i = 0; i < ranges.length; i++) {
-                    const range = ranges[i];
-                    const startCol = range.start.col;
-                    const endCol = range.end.col;
-                    const startRow = range.start.row;
-                    const endRow = range.end.row;
-                    if ((col >= startCol && col <= endCol && row >= startRow && row <= endRow) ||
-                        (col >= endCol && col <= startCol && row >= endRow && row <= startRow) ||
-                        (col >= startCol && col <= endCol && row >= endRow && row <= startRow) ||
-                        (col >= endCol && col <= startCol && row >= startRow && row <= endRow)) {
-                        cellInRange = true;
-                        break;
-                    }
-                }
-            }
-            if (!cellInRange) {
-                table.selectCell(col, row);
-            }
-        });
-    }
-
     class EventManager {
         table;
         isTouchdown;
@@ -62264,7 +62298,6 @@
             bindGroupCheckboxTreeChange(this.table);
             bindHeaderCheckboxChange(this.table);
             bindButtonClickEvent(this.table);
-            rightButtonClickEvent(this.table);
         }
         dealTableHover(eventArgsSet) {
             if (!eventArgsSet) {
@@ -63337,6 +63370,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;
             }
@@ -64928,22 +64964,24 @@
         }
     }
     function generateLayoutTree(tree, children) {
-        children?.forEach((node) => {
-            const diemnsonNode = {
-                dimensionKey: node.dimensionKey,
-                indicatorKey: node.indicatorKey,
-                value: node.value,
-                hierarchyState: node.hierarchyState,
-                children: undefined,
-                virtual: node.virtual ?? false,
-                levelSpan: node.levelSpan ?? 1
-            };
-            tree.push(diemnsonNode);
-            if (node.children) {
-                diemnsonNode.children = [];
-                generateLayoutTree(diemnsonNode.children, node.children);
-            }
-        });
+        if (Array.isArray(children)) {
+            children?.forEach((node) => {
+                const diemnsonNode = {
+                    dimensionKey: node.dimensionKey,
+                    indicatorKey: node.indicatorKey,
+                    value: node.value,
+                    hierarchyState: node.hierarchyState,
+                    children: undefined,
+                    virtual: node.virtual ?? false,
+                    levelSpan: node.levelSpan ?? 1
+                };
+                tree.push(diemnsonNode);
+                if (node.children) {
+                    diemnsonNode.children = [];
+                    generateLayoutTree(diemnsonNode.children, node.children);
+                }
+            });
+        }
     }
     function countLayoutTree(children, countParentNode) {
         let count = 0;
@@ -67226,7 +67264,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.19.6";
+        version = "1.19.8";
         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;
@@ -84737,10 +84873,10 @@
                 needLowestLevel_colPaths = true;
                 needLowestLevel_rowPaths = true;
             }
-            if (colHeaderPaths.length >= this._getColumnHeaderTreeExpandedMaxLevelCount()) {
+            if ((colHeaderPaths?.length ?? 0) && colHeaderPaths.length >= this._getColumnHeaderTreeExpandedMaxLevelCount()) {
                 needLowestLevel_colPaths = true;
             }
-            if (rowHeaderPaths.length >= this._getRowHeaderTreeExpandedMaxLevelCount()) {
+            if ((rowHeaderPaths?.length ?? 0) && rowHeaderPaths.length >= this._getRowHeaderTreeExpandedMaxLevelCount()) {
                 needLowestLevel_rowPaths = true;
             }
             let col;
@@ -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);
             }
@@ -88040,7 +88176,7 @@
             if (sourceNode.value === targetNode.value && sourceNode.dimensionKey === targetNode.dimensionKey) {
                 targetNode.hierarchyState =
                     targetNode.hierarchyState ?? (targetNode?.children ? sourceNode.hierarchyState : undefined);
-                targetNode?.children?.forEach((targetChildNode, index) => {
+                targetNode?.children?.forEach?.((targetChildNode, index) => {
                     if (sourceNode?.children?.[index] && targetChildNode) {
                         const beforeRowDimension = sourceNode.children.find((item) => item.dimensionKey === targetChildNode.dimensionKey && item.value === targetChildNode.value);
                         if (beforeRowDimension) {
@@ -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.8";
     function getIcons() {
         return get$2();
     }