@visactor/vtable 1.6.0-alpha.1 → 1.6.0-alpha.2

package/dist/vtable.js

@@ -45689,6 +45689,9 @@
                     },
                     get inlineRowBgColor() {
                         return selectionStyle?.inlineRowBgColor;
+                    },
+                    get selectionFillMode() {
+                        return selectionStyle?.selectionFillMode ?? 'overlay';
                     }
                 };
             }
@@ -45810,6 +45813,12 @@
                                     ? changeColor(that.selectionStyle.cellBgColor, 0.1, false)
                                     : undefined) ??
                                 undefined);
+                        },
+                        get cellBgColor() {
+                            if (that.selectionStyle.selectionFillMode === 'replace') {
+                                return style.select?.cellBgColor ?? that.selectionStyle.cellBgColor ?? undefined;
+                            }
+                            return undefined;
                         }
                     };
                 },
@@ -48660,12 +48669,14 @@
         };
     }
     class ReactCustomLayout {
+        removeAllContainer;
         table;
         customLayoutFuncCache;
         reactRemoveGraphicCache;
         headerCustomLayoutFuncCache;
         headerReactRemoveGraphicCache;
-        constructor(table) {
+        constructor(removeAllContainer, table) {
+            this.removeAllContainer = removeAllContainer;
             this.table = table;
             this.customLayoutFuncCache = new Map();
             this.reactRemoveGraphicCache = new Map();
@@ -48743,6 +48754,9 @@
                 removeFun(col, row);
             }
         }
+        clearCache() {
+            this.removeAllContainer();
+        }
     }
     function getUpdateCustomCellRangeInListTable(componentId, table, isHeaderCustomLayout) {
         const rowSeriesNumber = table.internalProps.rowSeriesNumber ? 1 : 0;
@@ -49296,7 +49310,7 @@
             return;
         }
         const cellGroup = getTargetCell(graphic);
-        if (!cellGroup || cellGroup.stage) {
+        if (!cellGroup || !cellGroup.stage) {
             return;
         }
         const table = cellGroup.stage.table;
@@ -50339,7 +50353,8 @@
                     x: 0,
                     y: 0,
                     fill: false,
-                    stroke: false
+                    stroke: false,
+                    pickable: false
                 });
                 cellContent.name = 'content';
                 cellContent.setCellContentOption({
@@ -50581,7 +50596,7 @@
             }
             newHeight = (cellGroup.contentHeight ?? cellHeight) - (padding[0] + padding[2]);
             cellGroup.forEachChildren((child) => {
-                if (child.type === 'rect' || child.type === 'chart') {
+                if (child.type === 'rect' || child.type === 'chart' || child.name === CUSTOM_CONTAINER_NAME) {
                     return;
                 }
                 if (child.name === 'mark') {
@@ -50600,7 +50615,7 @@
         }
         else if (textBaseline === 'middle' || textBaseline === 'bottom') {
             cellGroup.forEachChildren((child) => {
-                if (child.type === 'rect' || child.type === 'chart') {
+                if (child.type === 'rect' || child.type === 'chart' || child.name === CUSTOM_CONTAINER_NAME) {
                     return;
                 }
                 if (child.name === 'mark') {
@@ -50638,7 +50653,7 @@
         }
         cellGroup.forEachChildren((child) => {
             child.setAttribute('dy', 0);
-            if (child.type === 'rect' || child.type === 'chart') ;
+            if (child.type === 'rect' || child.type === 'chart' || child.name === CUSTOM_CONTAINER_NAME) ;
             else if (child.name === 'mark') {
                 child.setAttribute('y', 0);
             }
@@ -52616,8 +52631,8 @@
                             continue;
                         }
                         const mergedCell = scene.getCell(col, mergeRow);
-                        const customContainer = cell.getChildByName(CUSTOM_CONTAINER_NAME) ||
-                            cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
+                        const customContainer = mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) ||
+                            mergedCell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
                         customContainer.removeAllChild();
                         mergedCell.removeChild(customContainer);
                         getCustomCellMergeCustom(col, mergeRow, mergedCell, scene.table);
@@ -52627,7 +52642,11 @@
                     let customRender;
                     let customLayout;
                     const cellLocation = scene.table.getCellLocation(col, row);
-                    if (cellLocation !== 'body') {
+                    const { vTableMerge } = scene.table.getCellRawRecord(col, row);
+                    if (vTableMerge && scene.table.options.groupTitleCustomLayout) {
+                        customLayout = scene.table.options.groupTitleCustomLayout;
+                    }
+                    else if (cellLocation !== 'body') {
                         const define = scene.table.getHeaderDefine(col, row);
                         customRender = define?.headerCustomRender;
                         customLayout = define?.headerCustomLayout;
@@ -52637,6 +52656,15 @@
                         customRender = define?.customRender || scene.table.customRender;
                         customLayout = define?.customLayout;
                     }
+                    if ((customRender || customLayout) && isMergeCellGroup(cell)) {
+                        for (let mergeCol = cell.mergeStartCol; mergeCol <= cell.mergeEndCol; mergeCol++) {
+                            for (let mergeRow = cell.mergeStartRow; mergeRow <= cell.mergeEndRow; mergeRow++) {
+                                if (mergeRow !== row) {
+                                    scene.updateCellContent(mergeCol, mergeRow);
+                                }
+                            }
+                        }
+                    }
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
@@ -52950,7 +52978,7 @@
                         }
                         const mergedCell = scene.getCell(mergeCol, row);
                         const customContainer = mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) ||
-                            cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
+                            mergedCell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
                         customContainer.removeAllChild();
                         mergedCell.removeChild(customContainer);
                         getCustomCellMergeCustom(mergeCol, row, mergedCell, scene.table);
@@ -52960,7 +52988,11 @@
                     let customRender;
                     let customLayout;
                     const cellType = scene.table.getCellLocation(col, row);
-                    if (cellType !== 'body') {
+                    const { vTableMerge } = scene.table.getCellRawRecord(col, row);
+                    if (vTableMerge && scene.table.options.groupTitleCustomLayout) {
+                        customLayout = scene.table.options.groupTitleCustomLayout;
+                    }
+                    else if (cellType !== 'body') {
                         const define = scene.table.getHeaderDefine(col, row);
                         customRender = define?.headerCustomRender;
                         customLayout = define?.headerCustomLayout;
@@ -52970,6 +53002,15 @@
                         customRender = define?.customRender || scene.table.customRender;
                         customLayout = define?.customLayout;
                     }
+                    if ((customRender || customLayout) && isMergeCellGroup(cellGroup)) {
+                        for (let mergeCol = cellGroup.mergeStartCol; mergeCol <= cellGroup.mergeEndCol; mergeCol++) {
+                            if (mergeCol !== col) {
+                                for (let mergeRow = cellGroup.mergeStartRow; mergeRow <= cellGroup.mergeEndRow; mergeRow++) {
+                                    scene.updateCellContent(mergeCol, mergeRow);
+                                }
+                            }
+                        }
+                    }
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
@@ -52979,7 +53020,7 @@
                             width = scene.table.getColsWidth(cellGroup.mergeStartCol, cellGroup.mergeEndCol);
                             height = scene.table.getRowsHeight(cellGroup.mergeStartRow, cellGroup.mergeEndRow);
                         }
-                        const customResult = dealWithCustom(customLayout, customRender, col, row, width, height, false, scene.table.isAutoRowHeight(row), padding, isMergeCellGroup(cellGroup)
+                        const customResult = dealWithCustom(customLayout, customRender, cellGroup.mergeStartCol ?? col, cellGroup.mergeStartRow ?? row, width, height, false, scene.table.isAutoRowHeight(row), padding, isMergeCellGroup(cellGroup)
                             ? {
                                 start: { col: cellGroup.mergeStartCol, row: cellGroup.mergeStartRow },
                                 end: { col: cellGroup.mergeEndCol, row: cellGroup.mergeEndRow }
@@ -54678,8 +54719,23 @@
         return isHandlingChartQueue;
     }
     function renderChart(chart) {
-        const { axes, dataId, data, spec } = chart.attribute;
-        const { chartInstance } = chart;
+        const { axes, dataId, data, spec, ClassType, canvas, mode, modeParams, dpr } = chart.attribute;
+        let { chartInstance } = chart;
+        if (!chartInstance) {
+            chartInstance = new ClassType(spec, {
+                renderCanvas: canvas,
+                mode: mode === 'node' ? 'node' : 'desktop-browser',
+                modeParams: modeParams,
+                canvasControled: false,
+                viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
+                dpr: dpr,
+                interactive: false,
+                animation: false,
+                autoFit: false
+            });
+            chartInstance.renderSync();
+            chart.chartInstance = chartInstance;
+        }
         const viewBox = chart.getViewBox();
         if (viewBox.x2 <= viewBox.x1) {
             viewBox.x2 = viewBox.x1 + 1;
@@ -54701,8 +54757,6 @@
             y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
             y2: viewBox.y2 - chart.getRootNode().table.scrollTop
         }, false, false);
-        const table = chart.getRootNode().table;
-        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
         if (typeof dataId === 'string') {
             chartInstance.updateDataSync(dataId, data ?? []);
         }
@@ -55132,6 +55186,15 @@
                 }
             }
         }
+        else if (state.table.theme.selectionStyle.selectionFillMode === 'replace') {
+            for (let i = 0; i < ranges.length; i++) {
+                const range = ranges[i];
+                if (range.start.col <= col && range.start.row <= row && range.end.col >= col && range.end.row >= row) {
+                    selectMode = 'cellBgColor';
+                    break;
+                }
+            }
+        }
         return selectMode;
     }
     function isCellDisableSelect(table, col, row) {
@@ -58856,7 +58919,9 @@
         const bodyClickLineWidth = theme.selectionStyle?.cellBorderLineWidth;
         const rect = createRect({
             pickable: false,
-            fill: theme.selectionStyle?.cellBgColor ?? 'rgba(0, 0, 255,0.1)',
+            fill: theme.selectionStyle?.selectionFillMode === 'replace'
+                ? false
+                : theme.selectionStyle?.cellBgColor ?? 'rgba(0, 0, 255,0.1)',
             lineWidth: bodyClickLineWidth,
             stroke: strokes.map(stroke => {
                 if (stroke) {
@@ -59731,7 +59796,7 @@
         }
     }
 
-    function updateChartSize(scenegraph, col) {
+    function updateChartSizeForResizeColWidth(scenegraph, col) {
         for (let c = col; c <= scenegraph.proxy.colEnd; c++) {
             const columnGroup = scenegraph.getColGroup(c);
             columnGroup?.getChildren()?.forEach((cellNode) => {
@@ -59763,6 +59828,39 @@
             }
         }
     }
+    function updateChartSizeForResizeRowHeight(scenegraph, row) {
+        const updateCellNode = (c, r) => {
+            const cellNode = scenegraph.getCell(c, r);
+            const width = scenegraph.table.getColWidth(cellNode.col);
+            const height = scenegraph.table.getRowHeight(cellNode.row);
+            cellNode.children.forEach((node) => {
+                if (node.type === 'chart') {
+                    node.cacheCanvas = null;
+                    node.setAttribute('width', Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1]));
+                    node.setAttribute('height', Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2]));
+                }
+            });
+        };
+        for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
+            for (let r = row; r <= scenegraph.proxy.rowEnd; r++) {
+                updateCellNode(c, r);
+            }
+        }
+        if (scenegraph.table.rightFrozenColCount >= 1) {
+            for (let c = scenegraph.table.colCount - scenegraph.table.rightFrozenColCount; c <= scenegraph.table.colCount - 1; c++) {
+                for (let r = row; r <= scenegraph.proxy.rowEnd; r++) {
+                    updateCellNode(c, r);
+                }
+            }
+        }
+        if (scenegraph.table.frozenColCount >= 1) {
+            for (let c = 0; c <= scenegraph.table.frozenColCount - 1; c++) {
+                for (let r = row; r <= scenegraph.proxy.rowEnd; r++) {
+                    updateCellNode(c, r);
+                }
+            }
+        }
+    }
     function clearChartCacheImage(scenegraph) {
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
             const columnGroup = scenegraph.getColGroup(c);
@@ -60789,6 +60887,7 @@
                 delete this.tableGroup.border;
             }
             this.proxy?.release();
+            this.table.reactCustomLayout?.clearCache();
         }
         updateStageBackground() {
             this.stage.background = this.table.theme.underlayBackgroundColor;
@@ -60806,6 +60905,7 @@
         createSceneGraph(skipRowHeightClear = false) {
             if (!skipRowHeightClear) {
                 this.table.rowHeightsMap.clear();
+                this.table.internalProps.layoutMap.clearCellRangeMap();
             }
             if (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) {
                 this.stage.pluginService.autoEnablePlugins.getContributions().forEach((p) => {
@@ -61007,6 +61107,7 @@
         }
         deleteAllSelectBorder() {
             deleteAllSelectBorder(this);
+            deleteAllSelectingBorder(this);
         }
         updateCellSelectBorder(selectRange, extendSelectRange = true) {
             updateCellSelectBorder(this, selectRange, extendSelectRange);
@@ -61027,8 +61128,11 @@
                 this.updateContainer(true);
             }
         }
-        updateChartSize(col) {
-            updateChartSize(this, col);
+        updateChartSizeForResizeColWidth(col) {
+            updateChartSizeForResizeColWidth(this, col);
+        }
+        updateChartSizeForResizeRowHeight(col) {
+            updateChartSizeForResizeRowHeight(this, col);
         }
         updateChartState(datum) {
             this.table.isPivotChart() && updateChartState(this, datum);
@@ -61164,7 +61268,7 @@
                 this.table.heightMode === 'adaptive' ||
                 this.table.autoFillWidth ||
                 this.table.autoFillHeight) {
-                this.updateChartSize(this.table.rowHeaderLevelCount);
+                this.updateChartSizeForResizeColWidth(this.table.rowHeaderLevelCount);
             }
             this.proxy.progress();
             this.updateNextFrame();
@@ -62670,63 +62774,66 @@
             return;
         }
         const targetCell = adjustMoveHeaderTarget({ col: state.columnMove.colSource, row: state.columnMove.rowSource }, { col, row }, state.table);
-        state.columnMove.x = x - state.table.tableX;
-        state.columnMove.y = y - state.table.tableY;
-        state.columnMove.colTarget = targetCell.col;
-        state.columnMove.rowTarget = targetCell.row;
-        const canMove = state.table.internalProps.layoutMap.canMoveHeaderPosition({ col: state.columnMove.colSource, row: state.columnMove.rowSource }, { col: state.columnMove.colTarget, row: state.columnMove.rowTarget });
+        const canMove = state.table.internalProps.layoutMap.canMoveHeaderPosition({ col: state.columnMove.colSource, row: state.columnMove.rowSource }, { col: targetCell.col, row: targetCell.row });
         if (!canMove) {
             state.updateCursor('not-allowed');
+            state.columnMove.colTarget = state.columnMove.colSource;
+            state.columnMove.rowTarget = state.columnMove.rowSource;
         }
         else {
+            state.columnMove.x = x - state.table.tableX;
+            state.columnMove.y = y - state.table.tableY;
+            state.columnMove.colTarget = targetCell.col;
+            state.columnMove.rowTarget = targetCell.row;
             state.updateCursor('grabbing');
-        }
-        let lineX;
-        let backX;
-        let lineY;
-        let backY;
-        const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
-        if (cellLocation === 'columnHeader') {
-            backX = state.columnMove.x;
-            if (state.table.isLeftFrozenColumn(col)) {
-                lineX =
-                    state.columnMove.colTarget >= state.columnMove.colSource
-                        ? state.table.getColsWidth(0, state.columnMove.colTarget)
-                        : state.table.getColsWidth(0, state.columnMove.colTarget - 1);
-            }
-            else if (state.table.isRightFrozenColumn(col)) {
-                lineX = state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1);
-            }
-            else {
-                lineX =
-                    (state.columnMove.colTarget >= state.columnMove.colSource
-                        ? state.table.getColsWidth(0, state.columnMove.colTarget)
-                        : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) -
-                        state.table.stateManager.scroll.horizontalBarPos;
-            }
-        }
-        else if (cellLocation === 'rowHeader' ||
-            state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) {
-            backY = state.columnMove.y;
-            if (state.table.isFrozenRow(row)) {
-                lineY =
-                    state.columnMove.rowTarget >= state.columnMove.rowSource
-                        ? state.table.getRowsHeight(0, state.columnMove.rowTarget)
-                        : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1);
-            }
-            else if (state.table.isBottomFrozenRow(row)) {
-                lineY = state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1);
+            let lineX;
+            let backX;
+            let lineY;
+            let backY;
+            const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
+            if (cellLocation === 'columnHeader') {
+                backX = state.columnMove.x;
+                if (state.table.isLeftFrozenColumn(col)) {
+                    lineX =
+                        state.columnMove.colTarget >= state.columnMove.colSource
+                            ? state.table.getColsWidth(0, state.columnMove.colTarget)
+                            : state.table.getColsWidth(0, state.columnMove.colTarget - 1);
+                }
+                else if (state.table.isRightFrozenColumn(col)) {
+                    lineX = state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1);
+                }
+                else {
+                    lineX =
+                        (state.columnMove.colTarget >= state.columnMove.colSource
+                            ? state.table.getColsWidth(0, state.columnMove.colTarget)
+                            : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) -
+                            state.table.stateManager.scroll.horizontalBarPos;
+                }
             }
-            else {
-                lineY =
-                    (state.columnMove.rowTarget >= state.columnMove.rowSource
-                        ? state.table.getRowsHeight(0, state.columnMove.rowTarget)
-                        : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) -
-                        state.table.stateManager.scroll.verticalBarPos;
+            else if (cellLocation === 'rowHeader' ||
+                state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) {
+                backY = state.columnMove.y;
+                if (state.table.isFrozenRow(row)) {
+                    lineY =
+                        state.columnMove.rowTarget >= state.columnMove.rowSource
+                            ? state.table.getRowsHeight(0, state.columnMove.rowTarget)
+                            : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1);
+                }
+                else if (state.table.isBottomFrozenRow(row)) {
+                    lineY =
+                        state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1);
+                }
+                else {
+                    lineY =
+                        (state.columnMove.rowTarget >= state.columnMove.rowSource
+                            ? state.table.getRowsHeight(0, state.columnMove.rowTarget)
+                            : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) -
+                            state.table.stateManager.scroll.verticalBarPos;
+                }
             }
+            state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY);
+            state.table.scenegraph.updateNextFrame();
         }
-        state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY);
-        state.table.scenegraph.updateNextFrame();
     }
     function endMoveCol(state) {
         if ('canMoveHeaderPosition' in state.table.internalProps.layoutMap &&
@@ -63893,7 +64000,7 @@
             setTimeout(() => {
                 this.columnResize.resizing = false;
             }, 0);
-            this.table.scenegraph.updateChartSize(this.columnResize.col);
+            this.table.scenegraph.updateChartSizeForResizeColWidth(this.columnResize.col);
             this.checkFrozen();
             this.table.scenegraph.component.hideResizeCol();
             this.table.scenegraph.updateNextFrame();
@@ -63916,7 +64023,7 @@
             setTimeout(() => {
                 this.rowResize.resizing = false;
             }, 0);
-            this.table.scenegraph.updateChartSize(this.rowResize.row);
+            this.table.scenegraph.updateChartSizeForResizeColWidth(this.rowResize.row);
             this.table.scenegraph.component.hideResizeRow();
             this.table.scenegraph.updateNextFrame();
         }
@@ -64161,7 +64268,7 @@
             if (autoHide) {
                 clearTimeout(this._clearVerticalScrollBar);
                 this._clearVerticalScrollBar = setTimeout(() => {
-                    this.table.scenegraph.component.hideVerticalScrollBar();
+                    this.table.scenegraph?.component.hideVerticalScrollBar();
                 }, 1000);
             }
         }
@@ -64173,7 +64280,7 @@
             if (autoHide) {
                 clearTimeout(this._clearHorizontalScrollBar);
                 this._clearHorizontalScrollBar = setTimeout(() => {
-                    this.table.scenegraph.component.hideHorizontalScrollBar();
+                    this.table.scenegraph?.component.hideHorizontalScrollBar();
                 }, 1000);
             }
         }
@@ -65665,6 +65772,7 @@
             eventManager.dealTableHover();
         });
         handler.on(table.getElement(), 'wheel', (e) => {
+            table.editorManager?.completeEdit();
             if (table.eventManager._enableTableScroll) {
                 handleWhell(e, stateManager);
             }
@@ -65757,16 +65865,32 @@
                 }
             }
             else if (e.key === 'Escape') {
-                table.editorManager.cancelEdit();
+                table.editorManager?.cancelEdit();
             }
             else if (e.key === 'Enter') {
-                if (table.editorManager.editingEditor) {
+                if (table.editorManager?.editingEditor) {
                     handleKeydownListener(e);
                     table.editorManager.completeEdit();
                     table.getElement().focus();
+                    if (table.options.keyboardOptions?.moveFocusCellOnEnter === true) {
+                        const targetCol = stateManager.select.cellPos.col;
+                        const targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+                        if (isCellDisableSelect(table, targetCol, targetRow)) {
+                            return;
+                        }
+                        table.selectCell(targetCol, targetRow, e.shiftKey);
+                    }
                     return;
                 }
-                if ((table.options.keyboardOptions?.editCellOnEnter ?? true) &&
+                if (table.options.keyboardOptions?.moveFocusCellOnEnter === true) {
+                    const targetCol = stateManager.select.cellPos.col;
+                    const targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+                    if (isCellDisableSelect(table, targetCol, targetRow)) {
+                        return;
+                    }
+                    table.selectCell(targetCol, targetRow, e.shiftKey);
+                }
+                else if ((table.options.keyboardOptions?.editCellOnEnter ?? true) &&
                     (table.stateManager.select.ranges?.length ?? 0) === 1) {
                     const startCol = table.stateManager.select.ranges[0].start.col;
                     const startRow = table.stateManager.select.ranges[0].start.row;
@@ -65811,6 +65935,16 @@
                     }
                 }
             }
+            else {
+                const editCellTrigger = table.options.editCellTrigger;
+                if ((editCellTrigger === 'keydown' || (Array.isArray(editCellTrigger) && editCellTrigger.includes('keydown'))) &&
+                    !table.editorManager?.editingEditor) {
+                    const allowedKeys = /^[a-zA-Z0-9+\-*\/%=.,\s]$/;
+                    if (e.key.match(allowedKeys)) {
+                        table.editorManager.startEditCell(stateManager.select.cellPos.col, stateManager.select.cellPos.row, '');
+                    }
+                }
+            }
             handleKeydownListener(e);
         });
         function handleKeydownListener(e) {
@@ -65943,6 +66077,9 @@
             if (e.width === 0 && e.height === 0) {
                 return;
             }
+            if (table.autoFillWidth || table.autoFillHeight) {
+                table.editorManager?.completeEdit();
+            }
             if (!isValid$1(table.options.pixelRatio)) {
                 table.setPixelRatio(getPixelRatio());
             }
@@ -66097,10 +66234,10 @@
             table.eventManager.isDown = false;
             table.eventManager.isDraging = false;
             table.eventManager.inertiaScroll.endInertia();
-            if (stateManager.isResizeCol()) {
+            if (stateManager.interactionState === 'grabing' && stateManager.isResizeCol()) {
                 endResizeCol(table);
             }
-            else if (stateManager.isResizeRow()) {
+            else if (stateManager.interactionState === 'grabing' && stateManager.isResizeRow()) {
                 endResizeRow(table);
             }
         };
@@ -66528,6 +66665,9 @@
         }
         updateEventBinder() {
             setTimeout(() => {
+                if (this.table.isReleased) {
+                    return;
+                }
                 if (checkHaveTextStick(this.table) && this.handleTextStickBindId?.length === 0) {
                     this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.SCROLL, e => {
                         handleTextStick(this.table);
@@ -66589,7 +66729,7 @@
                     else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
                         this.table.internalProps._widthResizedColMap.add(resizeCol.col);
-                        this.table.scenegraph.updateChartSize(resizeCol.col);
+                        this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
                         const state = this.table.stateManager;
                         if (state.columnResize.col < state.table.frozenColCount &&
                             !state.table.isPivotTable() &&
@@ -70871,12 +71011,13 @@
         scenegraph;
         stateManager;
         eventManager;
+        editorManager;
         _pixelRatio;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.6.0-alpha.1";
+        version = "1.6.0-alpha.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -71502,6 +71643,7 @@
         }
         setRowHeight(row, height) {
             this.scenegraph.setRowHeight(row, height);
+            this.scenegraph.updateChartSizeForResizeRowHeight(row);
             this.internalProps._heightResizedRowMap.add(row);
         }
         getRowsHeight(startRow, endRow) {
@@ -71599,6 +71741,7 @@
         }
         setColWidth(col, width) {
             this.scenegraph.setColWidth(col, width);
+            this.scenegraph.updateChartSizeForResizeColWidth(col);
             this.internalProps._widthResizedColMap.add(col);
         }
         _clearColRangeWidthsMap(col) {
@@ -73388,6 +73531,9 @@
         setMinMaxLimitWidth(setWidth = false) {
             const internalProps = this.internalProps;
             for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
+                if (this.internalProps._widthResizedColMap.has(col)) {
+                    continue;
+                }
                 const { width, minWidth, maxWidth } = internalProps.layoutMap.columnWidths?.[col] ?? {};
                 if (setWidth &&
                     width &&
@@ -73405,9 +73551,9 @@
         setSortedIndexMap(field, filedMap) {
             this.dataSource?.setSortedIndexMap(field, filedMap);
         }
-        checkReactCustomLayout() {
+        checkReactCustomLayout(removeAllContainer) {
             if (!this.reactCustomLayout) {
-                this.reactCustomLayout = new ReactCustomLayout(this);
+                this.reactCustomLayout = new ReactCustomLayout(removeAllContainer, this);
             }
         }
         get bodyDomContainer() {
@@ -75810,10 +75956,12 @@
             this.bindEvent();
         }
         bindEvent() {
-            const handler = this.table.internalProps.handler;
+            this.table.internalProps.handler;
+            const editCellTrigger = this.table.options.editCellTrigger;
             this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
-                if (!this.table.options.editCellTrigger ||
-                    this.table.options.editCellTrigger === 'doubleclick') {
+                if (!editCellTrigger ||
+                    editCellTrigger === 'doubleclick' ||
+                    (Array.isArray(editCellTrigger) && editCellTrigger.includes('doubleclick'))) {
                     const { col, row } = e;
                     const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
@@ -75824,19 +75972,11 @@
                 }
             });
             this.table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
-                if (this.table.options.editCellTrigger === 'click') {
+                if (editCellTrigger === 'click' || (Array.isArray(editCellTrigger) && editCellTrigger.includes('click'))) {
                     const { col, row } = e;
                     this.startEditCell(col, row);
                 }
             });
-            handler.on(this.table.getElement(), 'wheel', (e) => {
-                this.completeEdit();
-            });
-            handler.on(this.table.getElement(), 'resize', (e) => {
-                if (this.table.autoFillWidth || this.table.autoFillHeight) {
-                    this.completeEdit();
-                }
-            });
         }
         startEditCell(col, row, value) {
             const editor = this.table.getEditor(col, row);
@@ -76522,7 +76662,6 @@
 
     class ListTable extends BaseTable {
         showHeader = true;
-        editorManager;
         listTreeStickCellPlugin;
         constructor(container, options) {
             if (Env.mode === 'node') {
@@ -77093,7 +77232,7 @@
                     notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
                 }
                 if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
-                    this.scenegraph.updateChartSize(0);
+                    this.scenegraph.updateChartSizeForResizeColWidth(0);
                 }
             }
         }
@@ -77288,7 +77427,7 @@
             this.render();
             if (isValid$1(oldHoverState.col) && isValid$1(oldHoverState.row) && oldHoverState.col >= 0 && oldHoverState.row >= 0) {
                 setTimeout(() => {
-                    this.internalProps.tooltipHandler.showTooltip(oldHoverState.col, oldHoverState.row);
+                    this.internalProps?.tooltipHandler.showTooltip(oldHoverState.col, oldHoverState.row);
                 }, 0);
             }
         }
@@ -78544,6 +78683,16 @@
             }));
             legend.name = 'legend';
             this.legendComponent = legend;
+            if (this.visible === false) {
+                legend.setAttributes({
+                    maxWidth: 0,
+                    width: 0,
+                    maxHeight: 0,
+                    height: 0,
+                    clip: true
+                });
+                legend.hideAll();
+            }
             this.table.scenegraph.stage.defaultLayer.appendChild(legend);
             this.adjustTableSize(attrs);
         }
@@ -80169,9 +80318,16 @@
                 }
                 this.updateGroupTitle();
             });
+            this.table.on('resize_column', e => {
+                this.updateGroupTitle();
+            });
         }
         updateGroupTitle() {
-            if (this.skipStartRow !== -1 &&
+            if (this.table.scrollTop === 0) {
+                this.titleRows = [];
+                this.showedTitleRows = [];
+            }
+            else if (this.skipStartRow !== -1 &&
                 this.skipEndRow !== -1 &&
                 this.skipStartRow !== this.table.scenegraph.proxy.bodyTopRow - 1) {
                 if (this.table.scenegraph.proxy.screenTopRow <= this.skipStartRow ||
@@ -80334,7 +80490,8 @@
                 x: 0,
                 y: 0,
                 width: 0,
-                height: 0
+                height: 0,
+                cursor: 'pointer'
             });
             colHeaderGroup.add(hackBorder);
             colHeaderGroup.border = hackBorder;
@@ -80346,7 +80503,7 @@
                 const cellGroup = getTargetCell(shadowTarget);
                 const { col, row } = cellGroup;
                 const rowIndex = titleRows.indexOf(row);
-                table.scrollToCell({ col, row: row - rowIndex });
+                scrollToRow(row - rowIndex, table);
             });
         }
         if (!cornerHeaderGroup.border) {
@@ -80354,7 +80511,8 @@
                 x: 0,
                 y: 0,
                 width: 0,
-                height: 0
+                height: 0,
+                cursor: 'pointer'
             });
             cornerHeaderGroup.add(hackBorder);
             cornerHeaderGroup.border = hackBorder;
@@ -80366,7 +80524,7 @@
                 const cellGroup = getTargetCell(shadowTarget);
                 const { col, row } = cellGroup;
                 const rowIndex = titleRows.indexOf(row);
-                table.scrollToCell({ col, row: row - rowIndex });
+                scrollToRow(row - rowIndex, table);
             });
         }
         const shadowGroup = colHeaderGroup.border.shadowRoot;
@@ -80375,6 +80533,15 @@
         shadowGroupFrozen.removeAllChild();
         return { shadowGroup, shadowGroupFrozen };
     }
+    function scrollToRow(row, table) {
+        const drawRange = table.getDrawRange();
+        if (isValid$1(row) && row >= table.frozenRowCount) {
+            const frozenHeight = table.getFrozenRowsHeight();
+            const top = table.getRowsHeight(0, row - 1);
+            table.scrollTop = Math.min(top - frozenHeight, table.getAllRowsHeight() - drawRange.height) - 1;
+        }
+        table.scenegraph.updateNextFrame();
+    }
     const registerListTreeStickCellPlugin = () => {
         Factory.registerComponent('listTreeStickCellPlugin', ListTreeStickCellPlugin);
     };
@@ -82498,6 +82665,7 @@
                                     disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
                                 },
                                 dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+                                headerIcon: dimensionInfo?.cornerHeaderIcon,
                                 pivotInfo: {
                                     value: dimensionInfo?.title ?? '',
                                     dimensionKey,
@@ -82544,6 +82712,7 @@
                                     disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
                                 },
                                 dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+                                headerIcon: dimensionInfo?.cornerHeaderIcon,
                                 pivotInfo: {
                                     value: dimensionInfo?.title ?? '',
                                     dimensionKey,
@@ -82594,6 +82763,7 @@
                                     disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
                                 },
                                 dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+                                headerIcon: dimensionInfo?.cornerHeaderIcon,
                                 pivotInfo: {
                                     value: dimensionInfo?.title ?? '',
                                     dimensionKey,
@@ -82640,6 +82810,7 @@
                                     disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
                                 },
                                 dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+                                headerIcon: dimensionInfo?.cornerHeaderIcon,
                                 pivotInfo: {
                                     value: dimensionInfo?.title ?? '',
                                     dimensionKey,
@@ -82685,6 +82856,7 @@
                                 disableHeaderSelect: !!this.cornerSetting.disableHeaderSelect
                             },
                             dropDownMenu: dimensionInfo?.cornerDropDownMenu,
+                            headerIcon: dimensionInfo?.cornerHeaderIcon,
                             pivotInfo: {
                                 value: dimensionInfo?.title ?? '',
                                 dimensionKey,
@@ -83884,6 +84056,9 @@
             if (this.isSeriesNumberInHeader(target.col, target.row) || this.isSeriesNumberInHeader(source.col, source.row)) {
                 return false;
             }
+            if (this.isCornerHeader(target.col, target.row)) {
+                return false;
+            }
             if (source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) {
                 return false;
             }
@@ -84052,14 +84227,14 @@
             if (isCornerCell) {
                 if (this.cornerSetting.titleOnDimension === 'row') {
                     for (let i = 0; i < this.rowDimensionKeys.length; i++) {
-                        if (rowHeaderPaths[0].dimensionKey === this.rowDimensionKeys[i]) {
+                        if (rowHeaderPaths[0]?.dimensionKey === this.rowDimensionKeys[i]) {
                             return { col: i + this.leftRowSeriesNumberColumnCount, row: 0 };
                         }
                     }
                 }
                 else {
                     for (let i = 0; i < this.colDimensionKeys.length; i++) {
-                        if (colHeaderPaths[0].dimensionKey === this.colDimensionKeys[i]) {
+                        if (colHeaderPaths[0]?.dimensionKey === this.colDimensionKeys[i]) {
                             return { col: 0, row: i };
                         }
                     }
@@ -86532,7 +86707,6 @@
     class PivotTable extends BaseTable {
         layoutNodeId = { seqId: 0 };
         pivotSortState;
-        editorManager;
         dataset;
         flatDataToObjects;
         constructor(container, options) {
@@ -87499,7 +87673,7 @@
                     notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
                 }
                 if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
-                    this.scenegraph.updateChartSize(0);
+                    this.scenegraph.updateChartSizeForResizeColWidth(0);
                 }
             }
         }
@@ -89591,7 +89765,7 @@
     }
 
     registerForVrender();
-    const version = "1.6.0-alpha.1";
+    const version = "1.6.0-alpha.2";
     function getIcons() {
         return get$2();
     }