@visactor/vtable 1.5.4-beta.1 → 1.5.5-alpha.0

package/dist/vtable.js

@@ -44372,11 +44372,9 @@
     }
     function getPromiseValue(value, callback) {
         if (isPromise(value)) {
-            value
-                .then(result => {
+            value.then(result => {
                 callback(result);
-            })
-                .catch((err) => {
+            }).catch((err) => {
             });
         }
         else {
@@ -46080,6 +46078,9 @@
                     },
                     get inlineRowBgColor() {
                         return selectionStyle?.inlineRowBgColor;
+                    },
+                    get selectionFillMode() {
+                        return selectionStyle?.selectionFillMode ?? 'overlay';
                     }
                 };
             }
@@ -46201,6 +46202,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;
                         }
                     };
                 },
@@ -48909,12 +48916,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();
@@ -48992,6 +49001,9 @@
                 removeFun(col, row);
             }
         }
+        clearCache() {
+            this.removeAllContainer();
+        }
     }
     function getUpdateCustomCellRangeInListTable(componentId, table, isHeaderCustomLayout) {
         const rowSeriesNumber = table.internalProps.rowSeriesNumber ? 1 : 0;
@@ -49107,8 +49119,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.viewport.x,
-                y: e.viewport.y
+                x: e.x,
+                y: e.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -50580,7 +50592,8 @@
                     x: 0,
                     y: 0,
                     fill: false,
-                    stroke: false
+                    stroke: false,
+                    pickable: false
                 });
                 cellContent.name = 'content';
                 cellContent.setCellContentOption({
@@ -50822,7 +50835,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') {
@@ -50841,7 +50854,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') {
@@ -50879,7 +50892,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);
             }
@@ -52827,8 +52840,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);
@@ -53161,7 +53174,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);
@@ -54746,7 +54759,7 @@
             this.numberType = CHART_NUMBER_TYPE;
             this.isShareChartSpec = isShareChartSpec;
             if (!params.chartInstance) {
-                const chartInstance = (this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
+                const chartInstance = new params.ClassType(params.spec, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -54756,9 +54769,8 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                })));
+                });
                 chartInstance.renderSync();
-                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -54776,53 +54788,34 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: 0,
-                    x2: x2 - x1,
-                    y1: 0,
-                    y2: y2 - y1
+                    x1: x1 - table.scrollLeft,
+                    x2: x2 - table.scrollLeft,
+                    y1: y1 - table.scrollTop,
+                    y2: y2 - table.scrollTop
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (chartStage) => {
-                    const stage = this.stage;
-                    const ctx = chartStage.window.getContext();
-                    const stageMatrix = stage.window.getViewBoxTransform();
-                    const viewBox = stage.window.getViewBox();
+                beforeRender: (stage) => {
+                    const ctx = stage.window.getContext();
                     ctx.inuse = true;
                     ctx.clearMatrix();
-                    ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, true);
-                    ctx.translate(viewBox.x1, viewBox.y1);
                     ctx.setTransformForCurrent(true);
                     ctx.beginPath();
                     ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
                     ctx.clip();
-                    ctx.clearMatrix();
-                    if (!chartStage.needRender) {
-                        chartStage.pauseRender();
-                        table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds);
-                        table.scenegraph.updateNextFrame();
-                    }
                 },
                 afterRender(stage) {
                     const ctx = stage.window.getContext();
                     ctx.inuse = false;
-                    stage.needRender = false;
-                    chartStage.resumeRender();
                 }
-            }));
-            const chartStage = this.activeChartInstance.getStage();
-            const matrix = this.globalTransMatrix.clone();
-            const stageMatrix = this.stage.window.getViewBoxTransform();
-            matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
-            chartStage.window.setViewBoxTransform &&
-                chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+            });
             this.activeChartInstance.renderSync();
             table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
             this.activeChartInstance.on('click', (params) => {
@@ -54858,12 +54851,11 @@
             const cellGroup = this.parent;
             const padding = this.attribute.cellPadding;
             const table = this.stage.table;
-            const { x1, y1, x2, y2 } = cellGroup.globalAABBBounds;
             return {
-                x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
-                x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (table.options.viewBox?.x1 ?? 0)),
-                y1: Math.ceil(y1 + padding[0] + table.scrollTop + (table.options.viewBox?.y1 ?? 0)),
-                y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (table.options.viewBox?.y1 ?? 0))
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
             };
         }
     }
@@ -54894,10 +54886,6 @@
             bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
             bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
         }
-        bodyBound.x1 = bodyBound.x1 + (table.options.viewBox?.x1 ?? 0);
-        bodyBound.x2 = bodyBound.x2 + (table.options.viewBox?.x1 ?? 0);
-        bodyBound.y1 = bodyBound.y1 + (table.options.viewBox?.y1 ?? 0);
-        bodyBound.y2 = bodyBound.y2 + (table.options.viewBox?.y1 ?? 0);
         return bodyBound;
     }
 
@@ -54914,8 +54902,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;
@@ -54923,65 +54926,46 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        chartInstance.updateViewBox({
-            x1: 0,
-            x2: viewBox.x2 - viewBox.x1,
-            y1: 0,
-            y2: viewBox.y2 - viewBox.y1
-        }, false, false);
-        const chartStage = chartInstance.getStage();
-        const matrix = chart.globalTransMatrix.clone();
-        const stageMatrix = chart.stage.window.getViewBoxTransform();
-        matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
-        chartStage.window.setViewBoxTransform &&
-            chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-        const { table } = chart.getRootNode();
-        let updateSpec = false;
-        if (table.options.specFormat) {
-            const formatResult = table.options.specFormat(chart.attribute.spec);
-            if (formatResult.needFormatSpec && formatResult.spec) {
-                const spec = formatResult.spec;
-                chartInstance.updateSpecSync(spec);
-                updateSpec = true;
-            }
-        }
-        if (!updateSpec) {
-            axes?.forEach((axis, index) => {
-                if (axis.type === 'band') {
-                    chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
-                }
-                else {
-                    chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
-                }
-            });
-            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
-            if (typeof dataId === 'string') {
-                chartInstance.updateDataSync(dataId, data ?? []);
+        axes?.forEach((axis, index) => {
+            if (axis.type === 'band') {
+                chartInstance.updateModelSpec({ type: 'axes', index }, { domain: axis.domain.slice(0) }, true);
             }
             else {
-                const dataBatch = [];
-                for (const dataIdStr in dataId) {
-                    const dataIdAndField = dataId[dataIdStr];
-                    const series = spec.series.find((item) => item?.data?.id === dataIdStr);
-                    dataBatch.push({
-                        id: dataIdStr,
-                        values: dataIdAndField
-                            ? data?.filter((item) => {
-                                return item.hasOwnProperty(dataIdAndField);
-                            }) ?? []
-                            : data ?? [],
-                        fields: series?.data?.fields
-                    });
-                    if (!chartInstance.updateFullDataSync) {
-                        chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                            ? data?.filter((item) => {
-                                return item.hasOwnProperty(dataIdAndField);
-                            }) ?? []
-                            : data ?? []);
-                    }
+                chartInstance.updateModelSpecSync({ type: 'axes', index }, { min: axis.range?.min ?? 0, max: axis.range?.max ?? 0 }, true);
+            }
+        });
+        chartInstance.updateViewBox({
+            x1: viewBox.x1 - chart.getRootNode().table.scrollLeft,
+            x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
+            y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
+            y2: viewBox.y2 - chart.getRootNode().table.scrollTop
+        }, false, false);
+        if (typeof dataId === 'string') {
+            chartInstance.updateDataSync(dataId, data ?? []);
+        }
+        else {
+            const dataBatch = [];
+            for (const dataIdStr in dataId) {
+                const dataIdAndField = dataId[dataIdStr];
+                const series = spec.series.find((item) => item?.data?.id === dataIdStr);
+                dataBatch.push({
+                    id: dataIdStr,
+                    values: dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? [],
+                    fields: series?.data?.fields
+                });
+                if (!chartInstance.updateFullDataSync) {
+                    chartInstance.updateDataSync(dataIdStr, dataIdAndField
+                        ? data?.filter((item) => {
+                            return item.hasOwnProperty(dataIdAndField);
+                        }) ?? []
+                        : data ?? []);
                 }
-                chartInstance.updateFullDataSync?.(dataBatch);
             }
+            chartInstance.updateFullDataSync?.(dataBatch);
         }
         const sg = chartInstance.getStage();
         cacheStageCanvas(sg, chart);
@@ -55043,7 +55027,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -55051,7 +55035,6 @@
             const { dataId, data, spec } = chart.attribute;
             chart.getViewBox();
             const { width = groupAttribute.width, height = groupAttribute.height } = chart.attribute;
-            const { table } = chart.getRootNode();
             const { active, cacheCanvas, activeChartInstance } = chart;
             if (!active && cacheCanvas) {
                 if (isArray$1(cacheCanvas)) {
@@ -55065,27 +55048,6 @@
                 }
             }
             else if (activeChartInstance) {
-                if (table.options.specFormat) {
-                    const formatResult = table.options.specFormat(chart.attribute.spec);
-                    if (formatResult.needFormatSpec && formatResult.spec) {
-                        const spec = formatResult.spec;
-                        activeChartInstance.updateSpecSync(spec);
-                        return;
-                    }
-                }
-                const viewBox = chart.getViewBox();
-                activeChartInstance.updateViewBox({
-                    x1: 0,
-                    x2: viewBox.x2 - viewBox.x1,
-                    y1: 0,
-                    y2: viewBox.y2 - viewBox.y1
-                }, false, false);
-                const chartStage = activeChartInstance.getStage();
-                chartStage.needRender = true;
-                const matrix = chart.globalTransMatrix.clone();
-                const stageMatrix = chart.stage.window.getViewBoxTransform().clone();
-                stageMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-                chartStage.window.setViewBoxTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
                 if (typeof dataId === 'string') {
                     activeChartInstance.updateDataSync(dataId, data ?? []);
                 }
@@ -55115,13 +55077,13 @@
                 }
             }
             else {
-                if (table.internalProps.renderChartAsync) {
+                if (chart.getRootNode().table.internalProps.renderChartAsync) {
                     if (chartRenderKeys.indexOf(`${chart.parent.col}+${chart.parent.row}`) === -1) {
                         chartRenderKeys.push(`${chart.parent.col}+${chart.parent.row}`);
                         chartRenderQueueList.push(chart);
                     }
                     if (!IsHandlingChartQueue()) {
-                        startRenderChartQueue(table);
+                        startRenderChartQueue(chart.getRootNode().table);
                     }
                 }
                 else {
@@ -55130,7 +55092,31 @@
             }
         }
         draw(chart, renderService, drawContext, params) {
-            this._draw(chart, {}, false, drawContext, params);
+            const { context } = drawContext;
+            if (!context) {
+                return;
+            }
+            const { clip } = chart.attribute;
+            if (clip) {
+                context.save();
+            }
+            else {
+                context.highPerformanceSave();
+            }
+            context.transformFromMatrix(chart.transMatrix, true);
+            context.beginPath();
+            if (params.skipDraw) {
+                this.drawShape(chart, context, 0, 0, drawContext, params, () => false, () => false);
+            }
+            else {
+                this.drawShape(chart, context, 0, 0, drawContext);
+            }
+            if (clip) {
+                context.restore();
+            }
+            else {
+                context.highPerformanceRestore();
+            }
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -55383,6 +55369,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) {
@@ -57792,7 +57787,7 @@
             }
             [colStart, colEnd].forEach((col) => {
                 const style = table._getCellStyle(col, row);
-                if (style?.textStick) {
+                if (style?.textStick && style?.textStick !== 'vertical') {
                     const cellGroup = table.scenegraph.getCell(col, row);
                     adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
                 }
@@ -57804,7 +57799,9 @@
             }
             [rowStart, rowEnd].forEach((row) => {
                 const style = table._getCellStyle(col, row);
-                if (style?.textStick && table.internalProps.layoutMap.rowHierarchyType !== 'tree') {
+                if (style?.textStick &&
+                    table.internalProps.layoutMap.rowHierarchyType !== 'tree' &&
+                    style?.textStick !== 'horizontal') {
                     const cellGroup = table.scenegraph.getCell(col, row);
                     adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
                 }
@@ -57816,19 +57813,19 @@
             }
             [rowStart, rowEnd].forEach((row) => {
                 const style = table._getCellStyle(col, row);
-                if (style?.textStick) {
+                if (style?.textStick && style?.textStick !== 'horizontal') {
                     const cellGroup = table.scenegraph.getCell(col, row);
                     adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
                 }
             });
         }
-        for (let row = rowStart; row < rowEnd; row++) {
+        for (let row = rowStart; row <= rowEnd; row++) {
             if (colEnd < colStart) {
                 break;
             }
             [colStart, colEnd].forEach((col) => {
                 const style = table._getCellStyle(col, row);
-                if (table._getCellStyle(col, row)?.textStick) {
+                if (style?.textStick && style?.textStick !== 'vertical') {
                     const cellGroup = table.scenegraph.getCell(col, row);
                     adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
                 }
@@ -59094,7 +59091,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) {
@@ -59969,7 +59968,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) => {
@@ -60001,6 +60000,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);
@@ -60014,15 +60046,6 @@
             });
         }
     }
-    function clearCellChartCacheImage(col, row, scenegraph) {
-        const cellGroup = scenegraph.getCell(col, row);
-        cellGroup.children.forEach((node) => {
-            if (node.type === 'chart') {
-                node.cacheCanvas = null;
-                node.addUpdateBoundTag();
-            }
-        });
-    }
     function updateChartData(scenegraph) {
         const table = scenegraph.table;
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -60884,12 +60907,7 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (table.options.canvas && table.options.viewBox) {
-                vglobal.setEnv('browser');
-                width = table.options.viewBox.x2 - table.options.viewBox.x1;
-                height = table.options.viewBox.y2 - table.options.viewBox.y1;
-            }
-            else if (Env.mode === 'node') {
+            if (Env.mode === 'node') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -60907,15 +60925,9 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                beforeRender: (stage) => {
-                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
-                },
-                afterRender: (stage) => {
-                    this.table.options.afterRender && this.table.options.afterRender(stage);
+                afterRender: () => {
                     this.table.fireListeners('after_render', null);
                 },
-                canvasControled: !table.options.canvas,
-                viewBox: table.options.viewBox,
                 ...table.options.renderOption
             });
             this.stage.defaultLayer.setTheme({
@@ -61047,6 +61059,7 @@
                 delete this.tableGroup.border;
             }
             this.proxy?.release();
+            this.table.reactCustomLayout?.clearCache();
         }
         updateStageBackground() {
             this.stage.background = this.table.theme.underlayBackgroundColor;
@@ -61064,6 +61077,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) => {
@@ -61286,8 +61300,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);
@@ -61423,7 +61440,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();
@@ -62929,63 +62946,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 &&
@@ -64152,7 +64172,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();
@@ -64175,7 +64195,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();
         }
@@ -64420,7 +64440,7 @@
             if (autoHide) {
                 clearTimeout(this._clearVerticalScrollBar);
                 this._clearVerticalScrollBar = setTimeout(() => {
-                    this.table.scenegraph.component.hideVerticalScrollBar();
+                    this.table.scenegraph?.component.hideVerticalScrollBar();
                 }, 1000);
             }
         }
@@ -64432,7 +64452,7 @@
             if (autoHide) {
                 clearTimeout(this._clearHorizontalScrollBar);
                 this._clearHorizontalScrollBar = setTimeout(() => {
-                    this.table.scenegraph.component.hideHorizontalScrollBar();
+                    this.table.scenegraph?.component.hideHorizontalScrollBar();
                 }, 1000);
             }
         }
@@ -65924,6 +65944,7 @@
             eventManager.dealTableHover();
         });
         handler.on(table.getElement(), 'wheel', (e) => {
+            table.editorManager?.completeEdit();
             if (table.eventManager._enableTableScroll) {
                 handleWhell(e, stateManager);
             }
@@ -66016,16 +66037,32 @@
                 }
             }
             else if (e.key === 'Escape') {
-                table.editorManager.cancelEdit();
+                table.editorManager?.cancelEdit();
             }
             else if (e.key === 'Enter') {
                 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;
@@ -66070,6 +66107,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) {
@@ -66198,19 +66245,20 @@
                 e.preventDefault();
             }
         });
-        if (!table.options.canvas) {
-            handler.on(table.getContainer(), 'resize', e => {
-                if ((e.width === 0 && e.height === 0) || table.isReleased) {
-                    return;
-                }
-                if (!isValid$1(table.options.pixelRatio)) {
-                    table.setPixelRatio(getPixelRatio());
-                }
-                if (!e.windowSizeNotChange) {
-                    table.resize();
-                }
-            });
-        }
+        handler.on(table.getContainer(), 'resize', e => {
+            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());
+            }
+            if (!e.windowSizeNotChange) {
+                table.resize();
+            }
+        });
         const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g;
         const cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
         function pasteHtmlToTable(item) {
@@ -66358,10 +66406,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);
             }
         };
@@ -66772,7 +66820,7 @@
             this.table = table;
             this.handleTextStickBindId = [];
             this.inertiaScroll = new InertiaScroll(table.stateManager);
-            if (Env.mode === 'node' || table.options.disableInteraction) {
+            if (Env.mode === 'node') {
                 return;
             }
             this.bindOuterEvent();
@@ -66853,7 +66901,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() &&
@@ -68373,7 +68421,6 @@
     }
 
     class FocusInput extends EventTarget {
-        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -68393,7 +68440,6 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
-            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -68413,7 +68459,6 @@
             return this._input;
         }
         release() {
-            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -70557,12 +70602,13 @@
         scenegraph;
         stateManager;
         eventManager;
+        editorManager;
         _pixelRatio;
         static get EVENT_TYPE() {
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.5.4-beta.1";
+        version = "1.5.5-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -70577,7 +70623,7 @@
         _hasAutoImageColumn;
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node' && !options.canvas) {
+            if (!container && options.mode !== 'node') {
                 throw new Error("vtable's container is undefined");
             }
             const { frozenColCount = 0, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, columnResizeMode, rowResizeMode = 'none', dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
@@ -70615,14 +70661,7 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (this.options.canvas) {
-                internalProps.element = this.options.canvas.parentElement;
-                internalProps.element.style.position = 'relative';
-                internalProps.focusControl = new FocusInput(this, internalProps.element);
-                internalProps.canvas = this.options.canvas;
-                internalProps.context = internalProps.canvas.getContext('2d');
-            }
-            else if (Env.mode !== 'node') {
+            if (Env.mode !== 'node') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -71030,21 +71069,7 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            this.tableX = 0;
-            this.tableY = 0;
-            if (this.options.canvas && this.options.viewBox) {
-                widthP = this.options.viewBox.x2 - this.options.viewBox.x1;
-                heightP = this.options.viewBox.y2 - this.options.viewBox.y1;
-                if (this?.scenegraph?.stage) {
-                    if (this.options.viewBox) {
-                        this.scenegraph.stage.setViewBox(this.options.viewBox, false);
-                    }
-                    else {
-                        this.scenegraph.stage.resize(widthP, heightP);
-                    }
-                }
-            }
-            else if (Env.mode === 'browser') {
+            if (Env.mode === 'browser') {
                 const element = this.getElement();
                 let widthWithoutPadding = 0;
                 let heightWithoutPadding = 0;
@@ -71111,23 +71136,6 @@
                 }
             }
         }
-        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;
-            const newWidth = newViewBox.x2 - newViewBox.x1;
-            const newHeight = newViewBox.y2 - newViewBox.y1;
-            this.options.viewBox = newViewBox;
-            if (oldWidth !== newWidth || oldHeight !== newHeight) {
-                this.resize();
-            }
-            else {
-                this.scenegraph.stage.setViewBox(this.options.viewBox, true);
-            }
-        }
-        setViewBoxTransform(a, b, c, d, e, f) {
-            this.internalProps.modifiedViewBoxTransform = true;
-            this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
-        }
         get rowHierarchyType() {
             return 'grid';
         }
@@ -71224,6 +71232,7 @@
         }
         setRowHeight(row, height) {
             this.scenegraph.setRowHeight(row, height);
+            this.scenegraph.updateChartSizeForResizeRowHeight(row);
             this.internalProps._heightResizedRowMap.add(row);
         }
         getRowsHeight(startRow, endRow) {
@@ -71321,6 +71330,7 @@
         }
         setColWidth(col, width) {
             this.scenegraph.setColWidth(col, width);
+            this.scenegraph.updateChartSizeForResizeColWidth(col);
             this.internalProps._widthResizedColMap.add(col);
         }
         _clearColRangeWidthsMap(col) {
@@ -71652,8 +71662,6 @@
             const visibleRect = this.getVisibleRect();
             rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
             rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
-            rect.offsetLeft(this.options.viewBox?.x1 ?? 0);
-            rect.offsetTop(this.options.viewBox?.y1 ?? 0);
             return rect;
         }
         getVisibleRect() {
@@ -71813,9 +71821,8 @@
             }
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
-            internalProps.focusControl.release();
             const { parentElement } = internalProps.element;
-            if (parentElement && !this.options.canvas) {
+            if (parentElement) {
                 parentElement.removeChild(internalProps.element);
             }
             this.editorManager?.editingEditor?.onEnd?.();
@@ -71859,7 +71866,7 @@
             this.autoFillHeight = autoFillHeight ?? false;
             this.customRender = customRender;
             const internalProps = this.internalProps;
-            if (Env.mode !== 'node' && !options.canvas) {
+            if (Env.mode !== 'node') {
                 updateRootElementPadding(internalProps.element, this.padding);
             }
             this.columnWidthComputeMode = options.columnWidthComputeMode ?? 'normal';
@@ -72040,14 +72047,9 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0) - (this.options.viewBox?.x1 ?? 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0) - (this.options.viewBox?.y1 ?? 0);
-            const point = { x, y, inTable };
-            if (this.internalProps.modifiedViewBoxTransform && this.scenegraph.stage.window.getViewBoxTransform()) {
-                const transform = this.scenegraph.stage.window.getViewBoxTransform();
-                transform.transformPoint(point, point);
-            }
-            return point;
+            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
+            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
+            return { x, y, inTable };
         }
         getTheme() {
             return this.internalProps.theme;
@@ -73275,6 +73277,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 &&
@@ -73292,9 +73297,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() {
@@ -75678,10 +75683,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);
@@ -75692,19 +75699,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);
@@ -75810,7 +75809,6 @@
 
     class ListTable extends BaseTable {
         showHeader = true;
-        editorManager;
         constructor(container, options) {
             if (Env.mode === 'node') {
                 options = container;
@@ -76373,7 +76371,7 @@
                     notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
                 }
                 if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
-                    this.scenegraph.updateChartSize(0);
+                    this.scenegraph.updateChartSizeForResizeColWidth(0);
                 }
             }
         }
@@ -77690,9 +77688,7 @@
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
-            this.component = new LineAxis(merge({
-                disableTriggerEvent: this.table.options.disableInteraction
-            }, axisStylrAttrs, attrs));
+            this.component = new LineAxis(merge({}, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
             this.component.originAxis = this;
         }
@@ -78273,11 +78269,20 @@
                 height: this.table.tableNoFrameHeight
             });
             const legend = new DiscreteLegend(merge({}, attrs, {
-                defaultSelected: this.selectedData,
-                disableTriggerEvent: this.table.options.disableInteraction
+                defaultSelected: this.selectedData
             }));
             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);
         }
@@ -79964,8 +79969,7 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
-            tableChartOption: table.options.chartOption
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -83398,6 +83402,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;
             }
@@ -86046,7 +86053,6 @@
     class PivotTable extends BaseTable {
         layoutNodeId = { seqId: 0 };
         pivotSortState;
-        editorManager;
         dataset;
         flatDataToObjects;
         constructor(container, options) {
@@ -87013,7 +87019,7 @@
                     notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
                 }
                 if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
-                    this.scenegraph.updateChartSize(0);
+                    this.scenegraph.updateChartSizeForResizeColWidth(0);
                 }
             }
         }
@@ -88312,14 +88318,6 @@
             updateChartData(this.scenegraph);
             this.render();
         }
-        clearChartCacheImage(col, row) {
-            if (isNumber$2(col) && isNumber$2(row)) {
-                clearCellChartCacheImage(col, row, this.scenegraph);
-            }
-            else {
-                clearChartCacheImage(this.scenegraph);
-            }
-        }
         getLegendSelected() {
             const selected = [];
             this.internalProps.legends?.forEach(legend => {
@@ -89113,7 +89111,7 @@
     }
 
     registerForVrender();
-    const version = "1.5.4-beta.1";
+    const version = "1.5.5-alpha.0";
     function getIcons() {
         return get$2();
     }