@visactor/vtable 1.3.2-alpha.1 → 1.3.2

package/dist/vtable.js

@@ -25061,6 +25061,12 @@
                     },
                     get color() {
                         return tooltip.color ?? '#FFF';
+                    },
+                    get maxWidth() {
+                        return tooltip.maxWidth;
+                    },
+                    get maxHeight() {
+                        return tooltip.maxHeight;
                     }
                 };
             }
@@ -32684,9 +32690,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;
         }
@@ -35276,8 +35280,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);
@@ -37415,7 +37419,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,
@@ -37425,9 +37429,8 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                })));
+                });
                 chartInstance.renderSync();
-                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -37445,53 +37448,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) => {
@@ -37527,12 +37511,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)
             };
         }
     }
@@ -37563,10 +37546,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;
     }
 
@@ -37648,8 +37627,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);
@@ -41751,6 +41729,10 @@
             const cellChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, scene.table);
             isHeightChange = isHeightChange || cellChange;
         }
+        if (!autoWrapText) {
+            const style = scene.table._getCellStyle(col, row);
+            autoWrapText = style.autoWrapText;
+        }
         return autoRowHeight && autoWrapText ? isHeightChange : false;
     }
     function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, table) {
@@ -43290,65 +43272,48 @@
         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);
+        const table = chart.getRootNode().table;
+        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(chartInstance);
+        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);
@@ -43410,7 +43375,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) {
@@ -43418,7 +43383,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)) {
@@ -43432,27 +43396,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 ?? []);
                 }
@@ -43482,13 +43425,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 {
@@ -43497,7 +43440,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([
@@ -48332,15 +48299,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++) {
@@ -49202,12 +49160,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;
@@ -49225,15 +49178,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({
@@ -53367,6 +53314,9 @@
             table.editorManager?.completeEdit(e.nativeEvent);
             stateManager.updateInteractionState(InteractionState.default);
             eventManager.dealTableHover();
+            if (table.options.select?.outsideClickDeselect) {
+                eventManager.dealTableSelect();
+            }
         });
         table.scenegraph.tableGroup.addEventListener('pointerdown', (e) => {
             if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE)) {
@@ -53653,8 +53603,10 @@
                 !target.isDescendantsOf(table.scenegraph.tableGroup)) {
                 stateManager.updateInteractionState(InteractionState.default);
                 eventManager.dealTableHover();
-                eventManager.dealTableSelect();
                 stateManager.endSelectCells();
+                if (table.options.select?.blankAreaClickDeselect ?? true) {
+                    eventManager.dealTableSelect();
+                }
                 stateManager.updateCursor();
                 table.scenegraph.updateChartState(null);
             }
@@ -54418,19 +54370,17 @@
                 e.preventDefault();
             }
         });
-        if (!table.options.canvas) {
-            handler.on(table.getContainer(), 'resize', e => {
-                if (e.width === 0 && e.height === 0) {
-                    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 (!isValid$1(table.options.pixelRatio)) {
+                table.setPixelRatio(getPixelRatio());
+            }
+            if (!e.windowSizeNotChange) {
+                table.resize();
+            }
+        });
         function pasteHtmlToTable(item) {
             const ranges = table.stateManager.select.ranges;
             const selectRangeLength = ranges.length;
@@ -54978,7 +54928,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();
@@ -56658,12 +56608,30 @@
 	white-space: pre-wrap;
 	margin: 0;
 	box-sizing: border-box;
-	overflow: hidden;
+	overflow: auto;
 	word-wrap: break-word;
 	position: relative;
 	background-color: #FFF;
 	z-index: 2;
-	border-radius: 4px
+	border-radius: 4px;
+}
+/*  WebKit Microsoft Edge（新版）： */
+.vtable__bubble-tooltip-element__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+/*  Opera Firefox  */
+.vtable__bubble-tooltip-element__content > scrollbar-track {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+/* Internet Explorer 11 和 Microsoft Edge（旧版） */
+.vtable__bubble-tooltip-element__content > scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
 }
 .vtable__bubble-tooltip-element__triangle {
 	/* font-size: .75rem; */
@@ -56697,7 +56665,7 @@
         constructor() {
             this._handler = new EventHandler();
             const rootElement = (this._rootElement = createElement('div', [TOOLTIP_CLASS, HIDDEN_CLASS]));
-            const messageElement = createElement('span', [CONTENT_CLASS]);
+            const messageElement = createElement('div', [CONTENT_CLASS]);
             const triangle = createElement('span', [TRIANGLE_CLASS]);
             rootElement.appendChild(triangle);
             rootElement.appendChild(messageElement);
@@ -56710,6 +56678,9 @@
                 this._disappearDelay = undefined;
                 this.unbindFromCell();
             });
+            messageElement.addEventListener('wheel', e => {
+                e.stopPropagation();
+            });
         }
         bindToCell(table, col, row, tooltipInstanceInfo, confine) {
             this._disappearDelay = tooltipInstanceInfo?.disappearDelay;
@@ -56734,6 +56705,10 @@
                 tooltipInstanceInfo?.style?.color && (messageElement.style.color = tooltipInstanceInfo?.style?.color);
                 tooltipInstanceInfo?.style?.padding &&
                     (messageElement.style.padding = `${tooltipInstanceInfo?.style?.padding.join('px ')}px`);
+                tooltipInstanceInfo?.style?.maxHeight &&
+                    (messageElement.style.maxHeight = `${tooltipInstanceInfo?.style?.maxHeight}px`);
+                tooltipInstanceInfo?.style?.maxWidth &&
+                    (messageElement.style.maxWidth = `${tooltipInstanceInfo?.style?.maxWidth}px`);
                 messageElement && (messageElement.textContent = tooltipInstanceInfo?.content);
                 const binded = this._bindToCell(table, col, row, tooltipInstanceInfo?.position, tooltipInstanceInfo?.referencePosition, confine, tooltipInstanceInfo?.style?.arrowMark);
                 if (binded) {
@@ -57112,7 +57087,7 @@
                         rect
                     },
                     disappearDelay: table.internalProps.tooltip.overflowTextTooltipDisappearDelay ?? 0,
-                    style: { arrowMark: false }
+                    style: table.theme.tooltipStyle
                 };
             }
             else if (table.internalProps.tooltip?.isShowOverflowTextTooltip) {
@@ -57540,7 +57515,6 @@
     }
 
     class FocusInput extends EventTarget {
-        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -57560,7 +57534,6 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
-            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -57580,7 +57553,6 @@
             return this._input;
         }
         release() {
-            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -57700,8 +57672,7 @@
                 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;
@@ -59263,246 +59234,6 @@
         return customTree;
     }
 
-    function getRowAt(absoluteY, _this) {
-        const frozen = _getTargetFrozenRowAt(_this, absoluteY);
-        if (frozen) {
-            return frozen;
-        }
-        let row = getTargetRowAt(absoluteY, _this);
-        if (!row) {
-            row = {
-                top: -1,
-                row: -1,
-                bottom: -1,
-                height: -1
-            };
-        }
-        return row;
-    }
-    function getColAt(absoluteX, _this) {
-        const frozen = _getTargetFrozenColAt(_this, absoluteX);
-        if (frozen) {
-            return frozen;
-        }
-        let col = getTargetColAt(absoluteX, _this);
-        if (!col) {
-            col = {
-                left: -1,
-                col: -1,
-                right: -1,
-                width: 1
-            };
-        }
-        return col;
-    }
-    function getCellAt(absoluteX, absoluteY, _this) {
-        const rowInfo = getRowAt(absoluteY, _this);
-        const { row, top, bottom, height } = rowInfo;
-        const colInfo = getColAt(absoluteX, _this);
-        const { col, left, right, width } = colInfo;
-        const rect = {
-            left,
-            right,
-            top,
-            bottom,
-            width,
-            height
-        };
-        return {
-            row,
-            col,
-            rect
-        };
-    }
-    function getTargetColAt(absoluteX, _this) {
-        if (absoluteX === 0) {
-            return { left: 0, col: 0, right: 0, width: 0 };
-        }
-        const findBefore = (startCol, startRight) => {
-            let right = startRight;
-            for (let col = startCol; col >= 0; col--) {
-                const width = _this.getColWidth(col);
-                const left = right - width;
-                if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
-                    return {
-                        left,
-                        col,
-                        right,
-                        width
-                    };
-                }
-                right = left;
-            }
-            return null;
-        };
-        const findAfter = (startCol, startRight) => {
-            let left = startRight - _this.getColWidth(startCol);
-            const { colCount } = _this.internalProps;
-            for (let col = startCol; col < colCount; col++) {
-                const width = _this.getColWidth(col);
-                const right = left + width;
-                if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
-                    return {
-                        left,
-                        col,
-                        right,
-                        width
-                    };
-                }
-                left = right;
-            }
-            return null;
-        };
-        const candCol = computeTargetColByX(absoluteX, _this);
-        const right = _this.getColsWidth(0, candCol);
-        if (absoluteX >= right) {
-            return findAfter(candCol, right);
-        }
-        return findBefore(candCol, right);
-    }
-    function getTargetRowAt(absoluteY, _this) {
-        if (absoluteY === 0) {
-            return { top: 0, row: 0, bottom: 0, height: 0 };
-        }
-        const findBefore = (startRow, startBottom) => {
-            let bottom = startBottom;
-            for (let row = startRow; row >= 0; row--) {
-                const height = _this.getRowHeight(row);
-                const top = bottom - height;
-                if (Math.round(top) <= Math.round(absoluteY) && Math.round(absoluteY) < Math.round(bottom)) {
-                    return {
-                        top,
-                        row,
-                        bottom,
-                        height
-                    };
-                }
-                bottom = top;
-            }
-            return null;
-        };
-        const findAfter = (startRow, startBottom) => {
-            let top = startBottom - _this.getRowHeight(startRow);
-            const { rowCount } = _this.internalProps;
-            for (let row = startRow; row < rowCount; row++) {
-                const height = _this.getRowHeight(row);
-                const bottom = top + height;
-                if (Math.round(top) <= Math.round(absoluteY) && Math.round(absoluteY) < Math.round(bottom)) {
-                    return {
-                        top,
-                        row,
-                        bottom,
-                        height
-                    };
-                }
-                top = bottom;
-            }
-            return null;
-        };
-        const candRow = computeTargetRowByY(absoluteY, _this);
-        const bottom = _this.getRowsHeight(0, candRow);
-        if (absoluteY >= bottom) {
-            return findAfter(candRow, bottom);
-        }
-        return findBefore(candRow, bottom);
-    }
-    function getTargetColAtConsiderRightFrozen(absoluteX, isConsider, _this) {
-        if (absoluteX === 0) {
-            return { left: 0, col: 0, right: 0, width: 0 };
-        }
-        if (isConsider &&
-            absoluteX > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() &&
-            absoluteX < _this.tableNoFrameWidth) {
-            for (let i = 0; i < _this.rightFrozenColCount; i++) {
-                if (absoluteX > _this.tableNoFrameWidth - _this.getColsWidth(_this.colCount - i - 1, _this.colCount - 1)) {
-                    return {
-                        col: _this.colCount - i - 1,
-                        left: undefined,
-                        right: undefined,
-                        width: undefined
-                    };
-                }
-            }
-        }
-        return getTargetColAt(absoluteX, _this);
-    }
-    function getTargetRowAtConsiderBottomFrozen(absoluteY, isConsider, _this) {
-        if (absoluteY === 0) {
-            return { top: 0, row: 0, bottom: 0, height: 0 };
-        }
-        if (isConsider &&
-            absoluteY > _this.tableNoFrameHeight - _this.getBottomFrozenRowsHeight() &&
-            absoluteY < _this.tableNoFrameHeight) {
-            for (let i = 0; i < _this.rightFrozenColCount; i++) {
-                if (absoluteY > _this.tableNoFrameHeight - _this.getRowsHeight(_this.rowCount - i - 1, _this.rowCount - 1)) {
-                    return {
-                        row: _this.rowCount - i - 1,
-                        top: undefined,
-                        bottom: undefined,
-                        height: undefined
-                    };
-                }
-            }
-        }
-        return getTargetRowAt(absoluteY, _this);
-    }
-    function computeTargetRowByY(absoluteY, _this) {
-        let defaultRowHeight = _this.internalProps.defaultRowHeight;
-        if (_this._rowRangeHeightsMap.get(`$0$${_this.rowCount - 1}`)) {
-            defaultRowHeight = _this._rowRangeHeightsMap.get(`$0$${_this.rowCount - 1}`) / _this.rowCount;
-        }
-        return Math.min(Math.ceil(absoluteY / defaultRowHeight), _this.rowCount - 1);
-    }
-    function computeTargetColByX(absoluteX, _this) {
-        if (_this._colRangeWidthsMap.get(`$0$${_this.colCount - 1}`)) {
-            let startCol = 0;
-            let endCol = _this.colCount - 1;
-            while (endCol - startCol > 1) {
-                const midCol = Math.floor((startCol + endCol) / 2);
-                if (absoluteX < _this._colRangeWidthsMap.get(`$0$${midCol}`)) {
-                    endCol = midCol;
-                }
-                else if (absoluteX > _this._colRangeWidthsMap.get(`$0$${midCol}`)) {
-                    startCol = midCol;
-                }
-                else {
-                    return midCol;
-                }
-            }
-            return endCol;
-        }
-        return Math.min(Math.ceil(absoluteX / _this.internalProps.defaultColWidth), _this.colCount - 1);
-    }
-    function getCellAtRelativePosition(x, y, _this) {
-        x -= _this.tableX;
-        y -= _this.tableY;
-        let bottomFrozen = false;
-        if (y > _this.tableNoFrameHeight - _this.getBottomFrozenRowsHeight() && y < _this.tableNoFrameHeight) {
-            bottomFrozen = true;
-        }
-        let rightFrozen = false;
-        if (x > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() && x < _this.tableNoFrameWidth) {
-            rightFrozen = true;
-        }
-        const colInfo = getTargetColAtConsiderRightFrozen(rightFrozen ? x : x + _this.scrollLeft, rightFrozen, _this);
-        const rowInfo = getTargetRowAtConsiderBottomFrozen(bottomFrozen ? y : y + _this.scrollTop, bottomFrozen, _this);
-        const { row, top, bottom, height } = rowInfo;
-        const { col, left, right, width } = colInfo;
-        const rect = {
-            left,
-            right,
-            top,
-            bottom,
-            width,
-            height
-        };
-        return {
-            row,
-            col,
-            rect
-        };
-    }
-
     const { toBoxArray } = style;
     const { isTouchEvent } = event;
     const rangeReg = /^\$(\d+)\$(\d+)$/;
@@ -59535,7 +59266,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.3.2-alpha.1";
+        version = "1.3.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59549,7 +59280,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, 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;
@@ -59587,14 +59318,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');
@@ -59991,21 +59715,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;
@@ -60064,23 +59774,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';
         }
@@ -60531,16 +60224,55 @@
             return null;
         }
         getRowAt(absoluteY) {
-            return getRowAt(absoluteY, this);
+            const frozen = _getTargetFrozenRowAt(this, absoluteY);
+            if (frozen) {
+                return frozen;
+            }
+            let row = this.getTargetRowAt(absoluteY);
+            if (!row) {
+                row = {
+                    top: -1,
+                    row: -1,
+                    bottom: -1,
+                    height: -1
+                };
+            }
+            return row;
         }
         getColAt(absoluteX) {
-            return getColAt(absoluteX, this);
+            const frozen = _getTargetFrozenColAt(this, absoluteX);
+            if (frozen) {
+                return frozen;
+            }
+            let col = this.getTargetColAt(absoluteX);
+            if (!col) {
+                col = {
+                    left: -1,
+                    col: -1,
+                    right: -1,
+                    width: 1
+                };
+            }
+            return col;
         }
         getCellAt(absoluteX, absoluteY) {
-            return getCellAt(absoluteX, absoluteY, this);
-        }
-        getCellAtRelativePosition(relativeX, relativeY) {
-            return getCellAtRelativePosition(relativeX, relativeY, this);
+            const rowInfo = this.getRowAt(absoluteY);
+            const { row, top, bottom, height } = rowInfo;
+            const colInfo = this.getColAt(absoluteX);
+            const { col, left, right, width } = colInfo;
+            const rect = {
+                left,
+                right,
+                top,
+                bottom,
+                width,
+                height
+            };
+            return {
+                row,
+                col,
+                rect
+            };
         }
         _checkRowCol(col, row) {
             if (col >= 0 && col < this.colCount && row >= 0 && row < this.rowCount) {
@@ -60595,8 +60327,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() {
@@ -60756,9 +60486,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?.();
@@ -60981,29 +60710,171 @@
             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;
         }
         getTargetColAt(absoluteX) {
-            return getTargetColAt(absoluteX, this);
+            if (absoluteX === 0) {
+                return { left: 0, col: 0, right: 0, width: 0 };
+            }
+            const findBefore = (startCol, startRight) => {
+                let right = startRight;
+                for (let col = startCol; col >= 0; col--) {
+                    const width = this.getColWidth(col);
+                    const left = right - width;
+                    if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
+                        return {
+                            left,
+                            col,
+                            right,
+                            width
+                        };
+                    }
+                    right = left;
+                }
+                return null;
+            };
+            const findAfter = (startCol, startRight) => {
+                let left = startRight - this.getColWidth(startCol);
+                const { colCount } = this.internalProps;
+                for (let col = startCol; col < colCount; col++) {
+                    const width = this.getColWidth(col);
+                    const right = left + width;
+                    if (Math.round(left) <= Math.round(absoluteX) && Math.round(absoluteX) < Math.round(right)) {
+                        return {
+                            left,
+                            col,
+                            right,
+                            width
+                        };
+                    }
+                    left = right;
+                }
+                return null;
+            };
+            const candCol = this.computeTargetColByX(absoluteX);
+            const right = this.getColsWidth(0, candCol);
+            if (absoluteX >= right) {
+                return findAfter(candCol, right);
+            }
+            return findBefore(candCol, right);
         }
         getTargetRowAt(absoluteY) {
-            return getTargetRowAt(absoluteY, this);
+            if (absoluteY === 0) {
+                return { top: 0, row: 0, bottom: 0, height: 0 };
+            }
+            const findBefore = (startRow, startBottom) => {
+                let bottom = startBottom;
+                for (let row = startRow; row >= 0; row--) {
+                    const height = this.getRowHeight(row);
+                    const top = bottom - height;
+                    if (Math.round(top) <= Math.round(absoluteY) && Math.round(absoluteY) < Math.round(bottom)) {
+                        return {
+                            top,
+                            row,
+                            bottom,
+                            height
+                        };
+                    }
+                    bottom = top;
+                }
+                return null;
+            };
+            const findAfter = (startRow, startBottom) => {
+                let top = startBottom - this.getRowHeight(startRow);
+                const { rowCount } = this.internalProps;
+                for (let row = startRow; row < rowCount; row++) {
+                    const height = this.getRowHeight(row);
+                    const bottom = top + height;
+                    if (Math.round(top) <= Math.round(absoluteY) && Math.round(absoluteY) < Math.round(bottom)) {
+                        return {
+                            top,
+                            row,
+                            bottom,
+                            height
+                        };
+                    }
+                    top = bottom;
+                }
+                return null;
+            };
+            const candRow = this.computeTargetRowByY(absoluteY);
+            const bottom = this.getRowsHeight(0, candRow);
+            if (absoluteY >= bottom) {
+                return findAfter(candRow, bottom);
+            }
+            return findBefore(candRow, bottom);
         }
         getTargetColAtConsiderRightFrozen(absoluteX, isConsider) {
-            return getTargetColAtConsiderRightFrozen(absoluteX, isConsider, this);
+            if (absoluteX === 0) {
+                return { left: 0, col: 0, right: 0, width: 0 };
+            }
+            if (isConsider &&
+                absoluteX > this.tableNoFrameWidth - this.getRightFrozenColsWidth() &&
+                absoluteX < this.tableNoFrameWidth) {
+                for (let i = 0; i < this.rightFrozenColCount; i++) {
+                    if (absoluteX > this.tableNoFrameWidth - this.getColsWidth(this.colCount - i - 1, this.colCount - 1)) {
+                        return {
+                            col: this.colCount - i - 1,
+                            left: undefined,
+                            right: undefined,
+                            width: undefined
+                        };
+                    }
+                }
+            }
+            return this.getTargetColAt(absoluteX);
         }
         getTargetRowAtConsiderBottomFrozen(absoluteY, isConsider) {
-            return getTargetRowAtConsiderBottomFrozen(absoluteY, isConsider, this);
+            if (absoluteY === 0) {
+                return { top: 0, row: 0, bottom: 0, height: 0 };
+            }
+            if (isConsider &&
+                absoluteY > this.tableNoFrameHeight - this.getBottomFrozenRowsHeight() &&
+                absoluteY < this.tableNoFrameHeight) {
+                for (let i = 0; i < this.rightFrozenColCount; i++) {
+                    if (absoluteY > this.tableNoFrameHeight - this.getRowsHeight(this.rowCount - i - 1, this.rowCount - 1)) {
+                        return {
+                            row: this.rowCount - i - 1,
+                            top: undefined,
+                            bottom: undefined,
+                            height: undefined
+                        };
+                    }
+                }
+            }
+            return this.getTargetRowAt(absoluteY);
+        }
+        computeTargetRowByY(absoluteY) {
+            let defaultRowHeight = this.internalProps.defaultRowHeight;
+            if (this._rowRangeHeightsMap.get(`$0$${this.rowCount - 1}`)) {
+                defaultRowHeight = this._rowRangeHeightsMap.get(`$0$${this.rowCount - 1}`) / this.rowCount;
+            }
+            return Math.min(Math.ceil(absoluteY / defaultRowHeight), this.rowCount - 1);
+        }
+        computeTargetColByX(absoluteX) {
+            if (this._colRangeWidthsMap.get(`$0$${this.colCount - 1}`)) {
+                let startCol = 0;
+                let endCol = this.colCount - 1;
+                while (endCol - startCol > 1) {
+                    const midCol = Math.floor((startCol + endCol) / 2);
+                    if (absoluteX < this._colRangeWidthsMap.get(`$0$${midCol}`)) {
+                        endCol = midCol;
+                    }
+                    else if (absoluteX > this._colRangeWidthsMap.get(`$0$${midCol}`)) {
+                        startCol = midCol;
+                    }
+                    else {
+                        return midCol;
+                    }
+                }
+                return endCol;
+            }
+            return Math.min(Math.ceil(absoluteX / this.internalProps.defaultColWidth), this.colCount - 1);
         }
         clearSelected() {
             this.stateManager.updateSelectPos(-1, -1);
@@ -61946,35 +61817,69 @@
             if (col < this.frozenColCount && row < this.frozenRowCount) {
                 return true;
             }
-            const colHeaderRangeRect = this.getCellRangeRelativeRect({
-                start: {
-                    col: 0,
-                    row: 0
-                },
-                end: {
-                    col: this.colCount - 1,
-                    row: this.columnHeaderLevelCount
-                }
-            });
-            const rowHeaderRangeRect = this.getCellRangeRelativeRect({
-                start: {
-                    col: 0,
-                    row: 0
-                },
-                end: {
-                    col: this.rowHeaderLevelCount,
-                    row: this.rowCount - 1
-                }
-            });
+            let colHeaderRangeRect;
+            if (this.frozenRowCount >= 1) {
+                colHeaderRangeRect = this.getCellRangeRelativeRect({
+                    start: {
+                        col: 0,
+                        row: 0
+                    },
+                    end: {
+                        col: this.colCount - 1,
+                        row: this.frozenRowCount - 1
+                    }
+                });
+            }
+            let rowHeaderRangeRect;
+            if (this.frozenColCount >= 1) {
+                rowHeaderRangeRect = this.getCellRangeRelativeRect({
+                    start: {
+                        col: 0,
+                        row: 0
+                    },
+                    end: {
+                        col: this.frozenColCount - 1,
+                        row: this.rowCount - 1
+                    }
+                });
+            }
+            let bottomFrozenRangeRect;
+            if (this.bottomFrozenRowCount >= 1) {
+                bottomFrozenRangeRect = this.getCellRangeRelativeRect({
+                    start: {
+                        col: 0,
+                        row: this.rowCount - this.bottomFrozenRowCount
+                    },
+                    end: {
+                        col: this.colCount - 1,
+                        row: this.rowCount - 1
+                    }
+                });
+            }
+            let rightFrozenRangeRect;
+            if (this.rightFrozenColCount >= 1) {
+                rightFrozenRangeRect = this.getCellRangeRelativeRect({
+                    start: {
+                        col: this.colCount - this.rightFrozenColCount,
+                        row: 0
+                    },
+                    end: {
+                        col: this.colCount - 1,
+                        row: this.rowCount - 1
+                    }
+                });
+            }
             if (rect.top >= drawRange.top &&
                 rect.bottom <= drawRange.bottom &&
                 rect.left >= drawRange.left &&
                 rect.right <= drawRange.right) {
-                if (this.isHeader(col, row)) {
+                if (this.isFrozenCell(col, row)) {
                     return true;
                 }
-                else if (drawRange.top >= colHeaderRangeRect.bottom &&
-                    drawRange.left >= rowHeaderRangeRect.right) {
+                else if (rect.top >= (colHeaderRangeRect?.bottom ?? rect.top) &&
+                    rect.left >= (rowHeaderRangeRect?.right ?? rect.left) &&
+                    rect.bottom <= (bottomFrozenRangeRect?.top ?? rect.bottom) &&
+                    rect.right <= (rightFrozenRangeRect?.left ?? rect.right)) {
                     return true;
                 }
             }
@@ -64269,10 +64174,12 @@
             const topHeaderHeight = !this.table.transpose || this.table.options.indicatorsAsCol
                 ? this.table.getFrozenRowsHeight()
                 : 0;
-            const width = (this.table.columnHeaderLevelCount > 0 ? this.table.getDrawRange().width : this.table.tableNoFrameWidth) -
-                leftHeaderWidth;
-            const height = (this.table.rowHeaderLevelCount > 0 ? this.table.getDrawRange().height : this.table.tableNoFrameHeight) -
-                topHeaderHeight;
+            const width = (this.table.columnHeaderLevelCount > 0 && this.table.isListTable()
+                ? this.table.getDrawRange().width
+                : this.table.tableNoFrameWidth) - leftHeaderWidth;
+            const height = (this.table.rowHeaderLevelCount > 0 && this.table.isListTable()
+                ? this.table.getDrawRange().height
+                : this.table.tableNoFrameHeight) - topHeaderHeight;
             this._emptyTipComponent.setAttributes({
                 spaceBetweenTextAndIcon: this._emptyTipOption.spaceBetweenTextAndIcon,
                 x: this.table.tableX + leftHeaderWidth,
@@ -64315,10 +64222,12 @@
             const topHeaderHeight = !this.table.transpose || this.table.options.indicatorsAsCol
                 ? this.table.getFrozenRowsHeight()
                 : 0;
-            const width = (this.table.columnHeaderLevelCount > 0 ? this.table.getDrawRange().width : this.table.tableNoFrameWidth) -
-                leftHeaderWidth;
-            const height = (this.table.rowHeaderLevelCount > 0 ? this.table.getDrawRange().height : this.table.tableNoFrameHeight) -
-                topHeaderHeight;
+            const width = (this.table.columnHeaderLevelCount > 0 && this.table.isListTable()
+                ? this.table.getDrawRange().width
+                : this.table.tableNoFrameWidth) - leftHeaderWidth;
+            const height = (this.table.rowHeaderLevelCount > 0 && this.table.isListTable()
+                ? this.table.getDrawRange().height
+                : this.table.tableNoFrameHeight) - topHeaderHeight;
             return {
                 spaceBetweenTextAndIcon: this._emptyTipOption.spaceBetweenTextAndIcon,
                 x: this.table.tableX + leftHeaderWidth,
@@ -65813,11 +65722,8 @@
             this.rowDimensionKeys = this.rowDimensionTree.dimensionKeys.valueArr();
             this.fullRowDimensionKeys = this.fullRowDimensionKeys.concat(this.rowDimensionKeys);
             this.resetRowHeaderLevelCount();
-            this._generateColHeaderIds();
-            this.colIndex = 0;
-            this._generateRowHeaderIds();
             if (this._table.isPivotChart()) {
-                this.hasTwoIndicatorAxes = this._indicators.some(indicatorObject => {
+                this.hasTwoIndicatorAxes = this.indicatorsDefine.some((indicatorObject) => {
                     if (indicatorObject.chartSpec &&
                         indicatorObject.chartSpec.series &&
                         indicatorObject.chartSpec.series.length > 1) {
@@ -65836,6 +65742,9 @@
                 });
             }
             this.resetColumnHeaderLevelCount();
+            this._generateColHeaderIds();
+            this.colIndex = 0;
+            this._generateRowHeaderIds();
             this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL);
             if (table.options.rowHierarchyType === 'tree' && this.extensionRows?.length >= 1) {
                 this.generateExtensionRowTree();
@@ -65855,7 +65764,21 @@
             }
             this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
             if (this.cornerSetting.titleOnDimension === 'column') {
-                const colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr();
+                let colDimensionKeys = this.columnDimensionTree.dimensionKeysIncludeVirtual.valueArr();
+                if (this.dataset &&
+                    (this.dataset.records?.length ?? 0) === 0 &&
+                    !this.dataset.customColTree &&
+                    !this.dataset.customRowTree) {
+                    colDimensionKeys = this.columnsDefine.map(define => {
+                        if (typeof define === 'string') {
+                            return define;
+                        }
+                        return define.dimensionKey;
+                    });
+                    if (this.indicatorsAsCol) {
+                        colDimensionKeys.push(this.indicatorDimensionKey);
+                    }
+                }
                 this.cornerHeaderObjs = this._addCornerHeaders(this.columnHeaderTitle ? [''].concat(colDimensionKeys) : colDimensionKeys, this.columnsDefine);
             }
             else if (this.cornerSetting.titleOnDimension === 'row') {
@@ -65871,7 +65794,21 @@
                     this.cornerHeaderObjs = this._addCornerHeaders(this.rowHeaderTitle ? [''].concat(rowTreeFirstKey) : rowTreeFirstKey, this.rowsDefine.concat(extensionRowDimensions));
                 }
                 else {
-                    const rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr();
+                    let rowDimensionKeys = this.rowDimensionTree.dimensionKeysIncludeVirtual.valueArr();
+                    if (this.dataset &&
+                        (this.dataset.records?.length ?? 0) === 0 &&
+                        !this.dataset.customColTree &&
+                        !this.dataset.customRowTree) {
+                        rowDimensionKeys = this.rowsDefine.map(define => {
+                            if (typeof define === 'string') {
+                                return define;
+                            }
+                            return define.dimensionKey;
+                        });
+                        if (!this.indicatorsAsCol) {
+                            rowDimensionKeys.push(this.indicatorDimensionKey);
+                        }
+                    }
                     this.cornerHeaderObjs = this._addCornerHeaders(this.rowHeaderTitle ? [''].concat(rowDimensionKeys) : rowDimensionKeys, this.rowsDefine);
                 }
             }
@@ -65977,12 +65914,24 @@
         }
         _generateColHeaderIds() {
             if (this.columnDimensionTree.tree.children?.length >= 1) {
-                this._addHeaders(this._columnHeaderCellFullPathIds, 0, this.columnDimensionTree.tree.children, [], this.columnHeaderObjs);
+                let startRow = 0;
+                if (this.dataset &&
+                    (this.dataset.records?.length ?? 0) === 0 &&
+                    !this.dataset.customColTree &&
+                    !this.dataset.customRowTree &&
+                    this.indicatorsAsCol &&
+                    this.columnDimensionTree.totalLevel < this.columnHeaderLevelCount) {
+                    startRow = this.columnHeaderLevelCount - this.columnDimensionTree.totalLevel;
+                    for (let i = 0; i < startRow; i++) {
+                        this._columnHeaderCellFullPathIds.unshift([]);
+                    }
+                }
+                this._addHeaders(this._columnHeaderCellFullPathIds, startRow, this.columnDimensionTree.tree.children, [], this.columnHeaderObjs);
             }
             if (this.columnHeaderTitle) {
                 this.sharedVar.seqId = Math.max(this.sharedVar.seqId, this._headerObjects.length);
                 const id = ++this.sharedVar.seqId;
-                const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount).fill(id);
+                const firstRowIds = Array(this.colCount - this.rowHeaderLevelCount - this.rightFrozenColCount).fill(id);
                 this._columnHeaderCellFullPathIds.unshift(firstRowIds);
                 const cell = {
                     id,
@@ -66013,7 +65962,19 @@
                     this._addHeadersForTreeMode(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowDimensionTree.totalLevel, true, this.rowsDefine, this.rowHeaderObjs);
                 }
                 else {
-                    this._addHeaders(this._rowHeaderCellFullPathIds_FULL, 0, this.rowDimensionTree.tree.children, [], this.rowHeaderObjs);
+                    let startRow = 0;
+                    if (this.dataset &&
+                        (this.dataset.records?.length ?? 0) === 0 &&
+                        !this.dataset.customColTree &&
+                        !this.dataset.customRowTree &&
+                        !this.indicatorsAsCol &&
+                        this.rowDimensionTree.totalLevel < this.rowHeaderLevelCount) {
+                        startRow = this.rowHeaderLevelCount - this.rowDimensionTree.totalLevel;
+                        for (let i = 0; i < startRow; i++) {
+                            this._rowHeaderCellFullPathIds_FULL.unshift([]);
+                        }
+                    }
+                    this._addHeaders(this._rowHeaderCellFullPathIds_FULL, startRow, this.rowDimensionTree.tree.children, [], this.rowHeaderObjs);
                 }
             }
             if (this.rowHeaderTitle) {
@@ -66538,6 +66499,25 @@
                     checkHasCartesianChart(this.indicatorsDefine)) {
                     count -= 1;
                 }
+                if (count === 0 && this.dataset && !this.dataset.customColTree && !this.dataset.customRowTree) {
+                    if (this.cornerSetting.titleOnDimension === 'row') {
+                        count = 1;
+                    }
+                    else if ((this.dataset.records?.length ?? 0) === 0 && this.cornerSetting.titleOnDimension === 'column') {
+                        count = this.columnsDefine.length ?? 0;
+                    }
+                }
+                else if (this.dataset &&
+                    (this.dataset.records?.length ?? 0) === 0 &&
+                    !this.dataset.customColTree &&
+                    !this.dataset.customRowTree) {
+                    if (this.cornerSetting.titleOnDimension === 'column') {
+                        count = this.columnsDefine.length ?? 0;
+                        if (!this.hideIndicatorName && this.indicatorsAsCol) {
+                            count++;
+                        }
+                    }
+                }
                 this.columnHeaderLevelCount = count;
                 return;
             }
@@ -66565,6 +66545,25 @@
                 if (this.rowHeaderTitle) {
                     count += 1;
                 }
+                if (count === 0 && this.dataset && !this.dataset.customColTree && !this.dataset.customRowTree) {
+                    if (this.cornerSetting.titleOnDimension === 'column') {
+                        count = 1;
+                    }
+                    else if ((this.dataset.records?.length ?? 0) === 0 && this.cornerSetting.titleOnDimension === 'row') {
+                        count = this.rowsDefine.length ?? 0;
+                    }
+                }
+                else if (this.dataset &&
+                    (this.dataset.records?.length ?? 0) === 0 &&
+                    !this.dataset.customColTree &&
+                    !this.dataset.customRowTree) {
+                    if (this.cornerSetting.titleOnDimension === 'row') {
+                        count = this.rowsDefine.length;
+                        if (!this.hideIndicatorName && !this.indicatorsAsCol) {
+                            count++;
+                        }
+                    }
+                }
                 this.rowHeaderLevelCount = count;
                 return;
             }
@@ -66676,16 +66675,16 @@
                     return '';
                 }
                 else if (this.isCornerHeader(col, row)) {
-                    return this._cornerHeaderCellIds[row][col - this.leftRowSeriesNumberColumnCount];
+                    return this._cornerHeaderCellIds[row]?.[col - this.leftRowSeriesNumberColumnCount];
                 }
                 else if (this.isColumnHeader(col, row)) {
-                    return this._columnHeaderCellIds[row][col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount];
+                    return this._columnHeaderCellIds[row]?.[col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount];
                 }
                 else if (this.isRowHeader(col, row)) {
                     return this._rowHeaderCellIds[row - this.columnHeaderLevelCount]?.[col - this.leftRowSeriesNumberColumnCount];
                 }
                 else if (this.isRightFrozenColumn(col, row)) {
-                    return this._rowHeaderCellIds[row - this.columnHeaderLevelCount][this.rowHeaderLevelCount - 1];
+                    return this._rowHeaderCellIds[row - this.columnHeaderLevelCount]?.[this.rowHeaderLevelCount - 1];
                 }
                 else if (this.isBottomFrozenRow(col, row)) {
                     return this._columnHeaderCellIds[this.columnHeaderLevelCount - 1]?.[col - this.rowHeaderLevelCount - this.leftRowSeriesNumberColumnCount];
@@ -68077,10 +68076,10 @@
             this.columnTree = dataset.colHeaderTree;
             this.columnDimensionTree = new DimensionTree(this.columnTree ?? [], this.sharedVar);
             this.rowDimensionTree = new DimensionTree(this.rowTree ?? [], this.sharedVar, this.rowHierarchyType, this.rowHierarchyType === 'tree' ? this.rowExpandLevel : undefined);
+            this.resetColumnHeaderLevelCount();
             this._generateColHeaderIds();
             this.colIndex = 0;
             this._generateRowHeaderIds();
-            this.resetColumnHeaderLevelCount();
             this._rowHeaderCellFullPathIds_FULL = transpose(this._rowHeaderCellFullPathIds_FULL);
             this._headerObjectMap = this._headerObjects.reduce((o, e) => {
                 o[e.id] = e;
@@ -68520,7 +68519,9 @@
         collectedValues = {};
         cacheCollectedValues = {};
         rows;
+        rowsHasValue;
         columns;
+        columnsHasValue;
         indicatorKeys;
         customRowTree;
         customColTree;
@@ -68580,6 +68581,8 @@
             this.rowFlatKeys = {};
             this.colKeys = [];
             this.rowKeys = [];
+            this.rowsHasValue = [];
+            this.columnsHasValue = [];
             if (records) {
                 this.records = records;
                 typeof window !== 'undefined' ? window.performance.now() : 0;
@@ -68600,19 +68603,25 @@
                 }
                 else {
                     if (this.rowHierarchyType === 'tree') {
-                        this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.totals?.row?.showGrandTotals ||
+                        this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows.filter((key, index) => {
+                            return this.rowsHasValue[index];
+                        }), this.indicatorsAsCol ? undefined : this.indicators, this.totals?.row?.showGrandTotals ||
                             (!this.indicatorsAsCol && this.columns.length === 0) ||
                             (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel);
                     }
                     else {
-                        this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel, this.totals?.row?.showGrandTotalsOnTop ?? false, this.totals?.row?.showSubTotalsOnTop ?? false);
+                        this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows.filter((key, index) => {
+                            return this.rowsHasValue[index];
+                        }), this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel, this.totals?.row?.showGrandTotalsOnTop ?? false, this.totals?.row?.showSubTotalsOnTop ?? false);
                     }
                 }
                 if (this.customColTree) {
                     this.colHeaderTree = this.customColTree;
                 }
                 else {
-                    this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns, this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel, this.totals?.column?.showGrandTotalsOnLeft ?? false, this.totals?.column?.showSubTotalsOnLeft ?? false);
+                    this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns.filter((key, index) => {
+                        return this.columnsHasValue[index];
+                    }), this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel, this.totals?.column?.showGrandTotalsOnLeft ?? false, this.totals?.column?.showSubTotalsOnLeft ?? false);
                 }
                 typeof window !== 'undefined' ? window.performance.now() : 0;
                 if (this.dataConfig?.isPivotChart) {
@@ -68809,6 +68818,7 @@
             for (let l = 0, len1 = this.rows.length; l < len1; l++) {
                 const rowAttr = this.rows[l];
                 if (rowAttr in record) {
+                    this.rowsHasValue[l] = true;
                     rowKey.push(record[rowAttr]);
                 }
                 else if (rowAttr !== IndicatorDimensionKeyPlaceholder) {
@@ -68834,6 +68844,7 @@
             for (let n = 0, len2 = this.columns.length; n < len2; n++) {
                 const colAttr = this.columns[n];
                 if (colAttr in record) {
+                    this.columnsHasValue[n] = true;
                     colKey.push(record[colAttr]);
                 }
                 else if (colAttr !== IndicatorDimensionKeyPlaceholder) {
@@ -68959,16 +68970,22 @@
             this.sortKeys();
             if (!this.customRowTree) {
                 if (this.rowHierarchyType === 'tree') {
-                    this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.totals?.row?.showGrandTotals ||
+                    this.rowHeaderTree = this.ArrToTree1(this.rowKeys, this.rows.filter((key, index) => {
+                        return this.rowsHasValue[index];
+                    }), this.indicatorsAsCol ? undefined : this.indicators, this.totals?.row?.showGrandTotals ||
                         (!this.indicatorsAsCol && this.columns.length === 0) ||
                         (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel);
                 }
                 else {
-                    this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows, this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel, this.totals?.row?.showGrandTotalsOnTop ?? false, this.totals?.row?.showSubTotalsOnTop ?? false);
+                    this.rowHeaderTree = this.ArrToTree(this.rowKeys, this.rows.filter((key, index) => {
+                        return this.rowsHasValue[index];
+                    }), this.indicatorsAsCol ? undefined : this.indicators, this.rowsIsTotal, this.totals?.row?.showGrandTotals || (this.indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel, this.totals?.row?.showGrandTotalsOnTop ?? false, this.totals?.row?.showSubTotalsOnTop ?? false);
                 }
             }
             if (!this.customColTree) {
-                this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns, this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel, this.totals?.column?.showGrandTotalsOnLeft ?? false, this.totals?.column?.showSubTotalsOnLeft ?? false);
+                this.colHeaderTree = this.ArrToTree(this.colKeys, this.columns.filter((key, index) => {
+                    return this.columnsHasValue[index];
+                }), this.indicatorsAsCol ? this.indicators : undefined, this.colsIsTotal, this.totals?.column?.showGrandTotals || (!this.indicatorsAsCol && this.columns.length === 0), this.colGrandTotalLabel, this.colSubTotalLabel, this.totals?.column?.showGrandTotalsOnLeft ?? false, this.totals?.column?.showSubTotalsOnLeft ?? false);
             }
         }
         updateFilterRules(filterRules, isResetTree = false) {
@@ -71744,14 +71761,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 => {
@@ -72545,7 +72554,7 @@
     }
 
     registerForVrender();
-    const version = "1.3.2-alpha.1";
+    const version = "1.3.2";
     function getIcons() {
         return get$2();
     }