@visactor/vtable 1.3.1 → 1.4.0-alpha.0

package/dist/vtable.js

@@ -32684,7 +32684,9 @@
             const axisStylrAttrs = getAxisAttributes(this.option);
             const attrs = this.getUpdateAttribute();
             attrs.verticalFactor = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
-            this.component = new LineAxis(merge({}, axisStylrAttrs, attrs));
+            this.component = new LineAxis(merge({
+                disableTriggerEvent: this.table.options.disableInteraction
+            }, axisStylrAttrs, attrs));
             this.component.setAttributes(this.setLayoutStartPosition({ x: 0, y: 0 }));
             this.component.originAxis = this;
         }
@@ -35274,8 +35276,8 @@
     function getCellEventArgsSet(e) {
         const tableEvent = {
             abstractPos: {
-                x: e.x,
-                y: e.y
+                x: e.viewport.x,
+                y: e.viewport.y
             }
         };
         const targetCell = getTargetCell(e.target);
@@ -37413,7 +37415,7 @@
             this.numberType = CHART_NUMBER_TYPE;
             this.isShareChartSpec = isShareChartSpec;
             if (!params.chartInstance) {
-                const chartInstance = new params.ClassType(params.spec, {
+                const chartInstance = (this.chartInstance = new params.ClassType(params.spec, merge({}, this.attribute.tableChartOption, {
                     renderCanvas: params.canvas,
                     mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
                     modeParams: this.attribute.modeParams,
@@ -37423,8 +37425,9 @@
                     interactive: false,
                     animation: false,
                     autoFit: false
-                });
+                })));
                 chartInstance.renderSync();
+                chartInstance.getStage().enableDirtyBounds();
                 params.chartInstance = this.chartInstance = chartInstance;
             }
             else {
@@ -37442,34 +37445,53 @@
                 y1: y1 - table.scrollTop,
                 y2: y2 - table.scrollTop
             });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, merge({}, this.attribute.tableChartOption, {
                 renderCanvas: this.attribute.canvas,
                 mode: 'desktop-browser',
                 canvasControled: false,
                 viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
+                    x1: 0,
+                    x2: x2 - x1,
+                    y1: 0,
+                    y2: y2 - y1
                 },
                 dpr: table.internalProps.pixelRatio,
                 animation: false,
                 interactive: true,
                 autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
+                beforeRender: (chartStage) => {
+                    const stage = this.stage;
+                    const ctx = chartStage.window.getContext();
+                    const stageMatrix = stage.window.getViewBoxTransform();
+                    const viewBox = stage.window.getViewBox();
                     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) => {
@@ -37505,11 +37527,12 @@
             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(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)
+                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))
             };
         }
     }
@@ -37540,6 +37563,10 @@
             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;
     }
 
@@ -37621,7 +37648,8 @@
             data: table.getCellValue(col, row),
             cellPadding: padding,
             dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
+            tableChartOption: table.options.chartOption
         });
         cellGroup.appendChild(chartGroup);
         table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
@@ -39305,10 +39333,10 @@
         for (let col = range.start.col; col <= range.end.col; col++) {
             for (let row = range.start.row; row <= range.end.row; row++) {
                 const cellGroup = table.scenegraph.getCell(col, row, true);
-                if (cellGroup.role === 'cell' && range.start.row !== range.end.row && cellGroup.contentHeight !== cellHeight) {
+                if (cellGroup.role === 'cell' && range.start.row !== range.end.row && cellGroup.contentWidth !== cellWidth) {
                     updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.isAutoRowHeight(row), padding, textAlign, textBaseline);
                 }
-                if (cellGroup.role === 'cell' && range.start.col !== range.end.col && cellGroup.contentWidth !== cellWidth) {
+                if (cellGroup.role === 'cell' && range.start.col !== range.end.col && cellGroup.contentHeight !== cellHeight) {
                     updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.isAutoRowHeight(row), padding, textAlign, textBaseline, table.scenegraph);
                 }
                 cellGroup.contentWidth = cellWidth;
@@ -40997,9 +41025,6 @@
         return true;
     }
     function fillRowsHeight(height, startRow, endRow, table, newHeights) {
-        if (table.internalProps.useOneRowHeightFillAll) {
-            return;
-        }
         for (let row = startRow; row <= endRow; row++) {
             if (newHeights) {
                 newHeights[row] = height;
@@ -41008,7 +41033,6 @@
                 table._setRowHeight(row, height);
             }
         }
-        table.internalProps.useOneRowHeightFillAll = true;
     }
     function computeCustomRenderHeight(col, row, table) {
         const customRender = table.getCustomRender(col, row);
@@ -43262,48 +43286,65 @@
         if (viewBox.y2 <= viewBox.y1) {
             viewBox.y2 = viewBox.y1 + 1;
         }
-        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);
-            }
-        });
         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
+            x1: 0,
+            x2: viewBox.x2 - viewBox.x1,
+            y1: 0,
+            y2: viewBox.y2 - viewBox.y1
         }, 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 ?? []);
+        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 ?? []);
+            }
+            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);
@@ -43365,7 +43406,7 @@
     }
 
     const ChartRender = Symbol.for('ChartRender');
-    let DefaultCanvasChartRender = class DefaultCanvasChartRender {
+    let DefaultCanvasChartRender = class DefaultCanvasChartRender extends BaseRender {
         type;
         numberType = CHART_NUMBER_TYPE;
         drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -43373,6 +43414,7 @@
             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)) {
@@ -43386,6 +43428,27 @@
                 }
             }
             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 ?? []);
                 }
@@ -43415,13 +43478,13 @@
                 }
             }
             else {
-                if (chart.getRootNode().table.internalProps.renderChartAsync) {
+                if (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(chart.getRootNode().table);
+                        startRenderChartQueue(table);
                     }
                 }
                 else {
@@ -43430,31 +43493,7 @@
             }
         }
         draw(chart, renderService, 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();
-            }
+            this._draw(chart, {}, false, drawContext, params);
         }
     };
     DefaultCanvasChartRender = __decorate([
@@ -47919,9 +47958,6 @@
             }
         }
         else if (scene.table.frozenColCount < scene.table.rowHeaderLevelCount) {
-            scene.bodyGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height);
-            scene.bodyGroup.setAttribute('y', scene.rowHeaderGroup.attribute.y);
-            scene.colHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height);
             for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) {
                 moveColumnFromRowHeaderToBody(scene);
                 moveColumnFromCornerHeaderToColHeader(scene);
@@ -47948,9 +47984,6 @@
     }
     function resetFrozen(scene) {
         if (scene.frozenColCount > scene.table.frozenColCount) {
-            scene.bodyGroup.setAttribute('height', scene.rowHeaderGroup.attribute.height);
-            scene.bodyGroup.setAttribute('y', scene.rowHeaderGroup.attribute.y);
-            scene.colHeaderGroup.setAttribute('height', scene.cornerHeaderGroup.attribute.height);
             for (let i = 0; i < scene.frozenColCount - scene.table.frozenColCount; i++) {
                 moveColumnFromRowHeaderToBody(scene);
                 moveColumnFromCornerHeaderToColHeader(scene);
@@ -48289,6 +48322,15 @@
             });
         }
     }
+    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++) {
@@ -49150,7 +49192,12 @@
             setPoptipTheme(this.table.theme.textPopTipStyle);
             let width;
             let height;
-            if (Env.mode === 'node') {
+            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') {
                 vglobal.setEnv('node', table.options.modeParams);
                 width = table.canvasWidth;
                 height = table.canvasHeight;
@@ -49168,9 +49215,15 @@
                 background: table.theme.underlayBackgroundColor,
                 dpr: table.internalProps.pixelRatio,
                 enableLayout: true,
-                afterRender: () => {
+                beforeRender: (stage) => {
+                    this.table.options.beforeRender && this.table.options.beforeRender(stage);
+                },
+                afterRender: (stage) => {
+                    this.table.options.afterRender && this.table.options.afterRender(stage);
                     this.table.fireListeners('after_render', null);
                 },
+                canvasControled: !table.options.canvas,
+                viewBox: table.options.viewBox,
                 ...table.options.renderOption
             });
             this.stage.defaultLayer.setTheme({
@@ -49618,7 +49671,6 @@
             computeColsWidth(this.table, 0, this.table.colCount - 1, true);
         }
         recalculateRowHeights() {
-            this.table.internalProps.useOneRowHeightFillAll = false;
             computeRowsHeight(this.table, 0, this.table.rowCount - 1, true, true);
         }
         resize() {
@@ -50331,7 +50383,6 @@
         }
         updateRow(removeCells, addCells, updateCells = []) {
             this.table.internalProps.layoutMap.clearCellRangeMap();
-            this.table.internalProps.useOneRowHeightFillAll = false;
             const addRows = deduplication$1(addCells.map(cell => cell.row)).sort((a, b) => a - b);
             const updateRows = deduplication$1(updateCells.map(cell => cell.row)).sort((a, b) => a - b);
             const isNotFillHeight = this.table.getAllRowsHeight() -
@@ -50658,7 +50709,6 @@
         if (headerC?.sort) {
             executeSort(tableState, table, headerC);
         }
-        table.internalProps.useOneRowHeightFillAll = false;
         table.internalProps.layoutMap.clearCellRangeMap();
         table.scenegraph.sortCell();
         table.stateManager.updateSelectPos(-1, -1);
@@ -51205,7 +51255,6 @@
             const oldTargetMergeInfo = state.table.getCellRange(state.columnMove.colTarget, state.columnMove.rowTarget);
             const moveContext = state.table._moveHeaderPosition({ col: state.columnMove.colSource, row: state.columnMove.rowSource }, { col: state.columnMove.colTarget, row: state.columnMove.rowTarget });
             if (moveContext) {
-                state.table.internalProps.useOneRowHeightFillAll = false;
                 state.table.internalProps.layoutMap.clearCellRangeMap();
                 const sourceMergeInfo = state.table.getCellRange(state.columnMove.colSource, state.columnMove.rowSource);
                 const targetMergeInfo = state.table.getCellRange(state.columnMove.colTarget, state.columnMove.rowTarget);
@@ -54355,17 +54404,19 @@
                 e.preventDefault();
             }
         });
-        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();
-            }
-        });
+        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();
+                }
+            });
+        }
         function pasteHtmlToTable(item) {
             const ranges = table.stateManager.select.ranges;
             const selectRangeLength = ranges.length;
@@ -54630,11 +54681,7 @@
                             }
                         }
                         table.stateManager.updateInteractionState(InteractionState.grabing);
-                        const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
-                        const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
-                        if (isValid$1(targetCol) && isValid$1(targetRow)) {
-                            table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, true);
-                        }
+                        table.stateManager.updateSelectPos(table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX).col, table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY).row, false, false, false, true);
                     });
                 }
                 else if (table.eventManager.inertiaScroll.isInertiaScrolling()) {
@@ -54913,7 +54960,7 @@
             this.table = table;
             this.handleTextStickBindId = [];
             this.inertiaScroll = new InertiaScroll(table.stateManager);
-            if (Env.mode === 'node') {
+            if (Env.mode === 'node' || table.options.disableInteraction) {
                 return;
             }
             this.bindOuterEvent();
@@ -57475,6 +57522,7 @@
     }
 
     class FocusInput extends EventTarget {
+        _container;
         _table;
         _input;
         constructor(table, parentElement) {
@@ -57494,6 +57542,7 @@
             input.dataset.vtable = 'vtable';
             input.readOnly = true;
             parentElement.appendChild(div);
+            this._container = div;
         }
         focus() {
             this._input.focus({ preventScroll: true });
@@ -57513,6 +57562,7 @@
             return this._input;
         }
         release() {
+            this._container.parentElement?.removeChild(this._container);
         }
     }
 
@@ -57632,7 +57682,8 @@
                 height: this.table.tableNoFrameHeight
             });
             const legend = new DiscreteLegend(merge({}, attrs, {
-                defaultSelected: this.selectedData
+                defaultSelected: this.selectedData,
+                disableTriggerEvent: this.table.options.disableInteraction
             }));
             legend.name = 'legend';
             this.legendComponent = legend;
@@ -58140,9 +58191,6 @@
         put(position, newValue) {
             if (this.data.has(position)) {
                 const oldValue = this.data.get(position);
-                if (oldValue === newValue) {
-                    return;
-                }
                 this.data.set(position, newValue);
                 const difference = newValue - oldValue;
                 this.totalSum += difference;
@@ -59226,7 +59274,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.3.1";
+        version = "1.4.0-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -59240,7 +59288,7 @@
         _hasAutoImageColumn;
         constructor(container, options = {}) {
             super();
-            if (!container && options.mode !== 'node') {
+            if (!container && options.mode !== 'node' && !options.canvas) {
                 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;
@@ -59278,7 +59326,14 @@
             if (typeof allowFrozenColCount === 'number' && allowFrozenColCount <= 0) {
                 this.showFrozenIcon = false;
             }
-            if (Env.mode !== 'node') {
+            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') {
                 internalProps.element = createRootElement(this.padding);
                 internalProps.focusControl = new FocusInput(this, internalProps.element);
                 internalProps.canvas = document.createElement('canvas');
@@ -59675,7 +59730,21 @@
             const { padding } = this;
             let widthP = 0;
             let heightP = 0;
-            if (Env.mode === 'browser') {
+            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') {
                 const element = this.getElement();
                 let widthWithoutPadding = 0;
                 let heightWithoutPadding = 0;
@@ -59734,6 +59803,23 @@
                 }
             }
         }
+        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';
         }
@@ -60287,6 +60373,8 @@
             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() {
@@ -60446,8 +60534,9 @@
             }
             this.scenegraph.stage.release();
             this.scenegraph.proxy.release();
+            internalProps.focusControl.release();
             const { parentElement } = internalProps.element;
-            if (parentElement) {
+            if (parentElement && !this.options.canvas) {
                 parentElement.removeChild(internalProps.element);
             }
             this.editorManager?.editingEditor?.onEnd?.();
@@ -60602,7 +60691,6 @@
         renderWithRecreateCells() {
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.clearCells();
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
@@ -60670,9 +60758,14 @@
             const currentHeight = rect.height;
             const originHeight = this.canvas.offsetHeight || currentHeight;
             const heightRatio = currentHeight / originHeight;
-            const x = (clientX - rect.left) / widthRatio + (isAddScroll ? table.scrollLeft : 0);
-            const y = (clientY - rect.top) / heightRatio + (isAddScroll ? table.scrollTop : 0);
-            return { x, y, inTable };
+            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;
         }
         getTheme() {
             return this.internalProps.theme;
@@ -64203,7 +64296,6 @@
                 this.editorManager = new EditManeger(this);
             }
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             if (options.dataSource) {
                 _setDataSource(this, options.dataSource);
             }
@@ -64255,7 +64347,6 @@
             this.internalProps.headerHelper.setTableColumnsEditor();
             this._hasAutoImageColumn = undefined;
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.clearCells();
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
@@ -64275,7 +64366,6 @@
             this.internalProps.columns = header;
             this.options.header = header;
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.renderAsync();
         }
         get transpose() {
@@ -64448,7 +64538,6 @@
             this.internalProps.headerHelper.setTableColumnsEditor();
             this.transpose = options.transpose ?? false;
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             if (internalProps.releaseList) {
                 internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
                 internalProps.releaseList = null;
@@ -64491,7 +64580,6 @@
                 pagination.perPageCount &&
                     (this.pagination.perPageCount = pagination.perPageCount || this.pagination.perPageCount);
                 this.internalProps.layoutMap.clearCellRangeMap();
-                this.internalProps.useOneRowHeightFillAll = false;
                 this.scenegraph.clearCells();
                 this.dataSource.updatePagination(this.pagination);
                 this.refreshRowColCount();
@@ -64718,7 +64806,6 @@
             this.refreshRowColCount();
             this.clearCellStyleCache();
             this.internalProps.layoutMap.clearCellRangeMap();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.updateHierarchyIcon(col, row);
             this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions);
             if (checkHasChart) {
@@ -64798,7 +64885,6 @@
                 if (hd.define.sort !== false) {
                     this.dataSource.sort(hd.field, order, sortFunc);
                     this.internalProps.layoutMap.clearCellRangeMap();
-                    this.internalProps.useOneRowHeightFillAll = false;
                     this.scenegraph.sortCell();
                 }
             }
@@ -67496,7 +67582,6 @@
         }
         setPagination(pagination) {
             this.clearCellRangeMap();
-            this._table.internalProps.useOneRowHeightFillAll = false;
             this.pagination = pagination;
             if (this.rowHierarchyType === 'grid' &&
                 isValid$1(this.pagination?.perPageCount) &&
@@ -69532,7 +69617,6 @@
                     this.editorManager = new EditManeger(this);
                 }
                 this.refreshHeader();
-                this.internalProps.useOneRowHeightFillAll = false;
                 this.stateManager.initCheckedState(records);
                 this.scenegraph.createSceneGraph();
                 if (options.title) {
@@ -69668,7 +69752,6 @@
                 this.pivotSortState = options.pivotSortState;
             }
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             if (internalProps.releaseList) {
                 internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
                 internalProps.releaseList = null;
@@ -70115,7 +70198,6 @@
             this.internalProps.layoutMap.resetHeaderTree();
             this.scenegraph.clearCells();
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.createSceneGraph();
             this.render();
         }
@@ -70451,7 +70533,6 @@
                 }
             }
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.clearCells();
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
@@ -70882,7 +70963,6 @@
             rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId);
             this.internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.createSceneGraph();
             if (options.title) {
                 this.internalProps.title = new Title(options.title, this);
@@ -71040,7 +71120,6 @@
             rowDimensionTree = new DimensionTree(this.dataset.rowHeaderTree ?? [], this.layoutNodeId);
             internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             if (internalProps.releaseList) {
                 internalProps.releaseList.forEach(releaseObj => releaseObj?.release?.());
                 internalProps.releaseList = null;
@@ -71274,7 +71353,6 @@
             this.internalProps.layoutMap.resetHeaderTree();
             this.scenegraph.clearCells();
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.createSceneGraph();
             this.render();
         }
@@ -71575,6 +71653,14 @@
             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 => {
@@ -71743,7 +71829,6 @@
             }
             internalProps.layoutMap = new PivotHeaderLayoutMap(this, this.dataset, columnDimensionTree, rowDimensionTree);
             this.refreshHeader();
-            this.internalProps.useOneRowHeightFillAll = false;
             this.scenegraph.clearCells();
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
@@ -72368,7 +72453,7 @@
     }
 
     registerForVrender();
-    const version = "1.3.1";
+    const version = "1.4.0-alpha.0";
     function getIcons() {
         return get$2();
     }