@visactor/vtable 0.9.3-alpha.0 → 0.9.3-alpha.2

package/dist/vtable.js

@@ -39565,23 +39565,25 @@
         let absoluteLeftIconWidth = 0;
         let absoluteRightIconWidth = 0;
         if (!Array.isArray(icons) || icons.length === 0) {
-            const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
-            const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
-            const attribute = {
-                text: text.length === 1 && !autoWrapText ? text[0] : text,
-                maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
-                textBaseline: 'top',
-                autoWrapText,
-                lineClamp,
-                heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
-                pickable: false,
-                dx: hierarchyOffset
-            };
-            const wrapText = new WrapText(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
-            wrapText.name = 'text';
-            cellGroup.appendChild(wrapText);
-            contentWidth = wrapText.AABBBounds.width();
-            contentHeight = wrapText.AABBBounds.height();
+            if (textStr) {
+                const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
+                const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
+                const attribute = {
+                    text: text.length === 1 && !autoWrapText ? text[0] : text,
+                    maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
+                    textBaseline: 'top',
+                    autoWrapText,
+                    lineClamp,
+                    heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
+                    pickable: false,
+                    dx: hierarchyOffset
+                };
+                const wrapText = new WrapText(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
+                wrapText.name = 'text';
+                cellGroup.appendChild(wrapText);
+                contentWidth = wrapText.AABBBounds.width();
+                contentHeight = wrapText.AABBBounds.height();
+            }
         }
         else {
             icons.forEach(icon => {
@@ -40590,7 +40592,7 @@
         else if (type === 'image' || type === 'video') {
             updateImageCellContentWhileResize(cellGroup, col, row, scene.table);
         }
-        else if (cellGroup.firstChild.name === 'axis') {
+        else if (cellGroup.firstChild?.name === 'axis') {
             const axisConfig = scene.table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, scene.table);
@@ -41746,7 +41748,7 @@
                     for (const dataIdStr in dataId) {
                         const dataIdAndField = dataId[dataIdStr];
                         activeChartInstance.updateDataSync(dataIdStr, dataIdAndField
-                            ? data.filter((item) => {
+                            ? data?.filter((item) => {
                                 return item.hasOwnProperty(dataIdAndField);
                             }) ?? []
                             : data ?? []);
@@ -41782,7 +41784,7 @@
                     for (const dataIdStr in dataId) {
                         const dataIdAndField = dataId[dataIdStr];
                         chartInstance.updateDataSync(dataIdStr, dataIdAndField
-                            ? data.filter((item) => {
+                            ? data?.filter((item) => {
                                 return item.hasOwnProperty(dataIdAndField);
                             }) ?? []
                             : data ?? []);
@@ -41895,9 +41897,26 @@
         if (!colorKey) {
             return undefined;
         }
-        const hoverStyle = table.isHeader(cellGroup.col, cellGroup.row)
-            ? table.theme.headerStyle?.hover
-            : table.theme.bodyStyle?.hover;
+        let hoverStyle;
+        const layout = table.internalProps.layoutMap;
+        if (layout.isCornerHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.cornerHeaderStyle?.hover;
+        }
+        else if (layout.isColumnHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.headerStyle?.hover;
+        }
+        else if (layout.isRowHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.rowHeaderStyle?.hover;
+        }
+        else if (layout.isBottomFrozenRow(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.bottomFrozenStyle?.hover || table.theme.headerStyle?.hover;
+        }
+        else if (layout.isRightFrozenColumn(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.rightFrozenStyle?.hover || table.theme.rowHeaderStyle?.hover;
+        }
+        else if (!table.isHeader(cellGroup.col, cellGroup.row)) {
+            hoverStyle = table.theme.bodyStyle?.hover;
+        }
         const fillColor = getProp(colorKey, hoverStyle, cellGroup.col, cellGroup.row, table);
         return fillColor;
     }
@@ -43361,6 +43380,9 @@
             if (cellTheme.text.textBaseline) {
                 textBaseline = cellTheme.text.textBaseline;
             }
+            if (cellType !== 'body' && !cellTheme.group.fill) {
+                cellTheme.group.fill = '#fff';
+            }
             let cellWidth = colWidth;
             let cellHeight = table.getRowHeight(row);
             const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
@@ -43557,33 +43579,20 @@
         else if (direction === 'right' && proxy.colStart - count < proxy.bodyLeftCol) {
             count = proxy.colStart - proxy.bodyLeftCol;
         }
-        const bodyGroup = proxy.table.scenegraph.bodyGroup;
+        proxy.table.scenegraph.bodyGroup;
         if (count < proxy.colEnd - proxy.colStart) {
             const startCol = direction === 'left' ? proxy.colStart : proxy.colEnd - count + 1;
             const endCol = direction === 'left' ? proxy.colStart + count - 1 : proxy.colEnd;
             const distStartCol = direction === 'left' ? proxy.colEnd + 1 : proxy.colStart - count;
             const distEndCol = direction === 'left' ? proxy.colEnd + count : proxy.colStart - 1;
             computeColsWidth(proxy.table, distStartCol, distEndCol);
-            for (let col = startCol; col <= endCol; col++) {
-                if (direction === 'left') {
-                    const colGroup = bodyGroup.firstChild;
-                    updateColGroupPosition(colGroup, bodyGroup.lastChild.col + 1, bodyGroup.lastChild.attribute.x + bodyGroup.lastChild.attribute.width);
-                    bodyGroup.appendChild(colGroup);
-                }
-                else {
-                    const colGroup = bodyGroup.lastChild;
-                    updateColGroupPosition(colGroup, bodyGroup.firstChild.col - 1, bodyGroup.firstChild.attribute.x - proxy.table.getColWidth(bodyGroup.firstChild.col - 1));
-                    bodyGroup.insertBefore(colGroup, bodyGroup.firstChild);
-                }
-            }
+            updatePartColPosition(startCol, endCol, direction, proxy);
             const syncLeftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenColCount * 1);
             const syncRightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenColCount * 2);
-            for (let col = syncLeftCol; col <= syncRightCol; col++) {
-                const colGroup = proxy.table.scenegraph.getColGroup(col);
-                updateColGroupContent(colGroup, proxy);
-            }
             proxy.colStart = direction === 'left' ? proxy.colStart + count : proxy.colStart - count;
             proxy.colEnd = direction === 'left' ? proxy.colEnd + count : proxy.colEnd - count;
+            checkFirstColMerge(distStartCol, proxy);
+            updateColContent(syncLeftCol, syncRightCol, proxy);
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
             proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
@@ -43598,24 +43607,13 @@
             computeColsWidth(proxy.table, distStartCol, distEndCol);
             const distStartColY = proxy.table.getColsWidth(proxy.bodyLeftCol, distStartCol - 1);
             console.log('distStartColY', proxy.bodyLeftCol, distStartCol - 1, distStartColY);
-            bodyGroup.forEachChildren((colGroup, index) => {
-                if (colGroup.type === 'group') {
-                    updateColGroupPosition(colGroup, direction === 'left' ? colGroup.col + count : colGroup.col - count, index === 0
-                        ? distStartColY
-                        : colGroup._prev.attribute.x + proxy.table.getColWidth(colGroup._prev.col));
-                }
-            });
+            updateAllColPosition(distStartColY, count, direction, proxy);
             const syncLeftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenRowCount * 1);
             const syncRightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenRowCount * 2);
-            for (let col = syncLeftCol; col <= syncRightCol; col++) {
-                const colGroup = proxy.table.scenegraph.getColGroup(col);
-                updateColGroupContent(colGroup, proxy);
-            }
-            const cellGroup = proxy.table.scenegraph.getCell(screenLeftCol, 0);
-            cellGroup.AABBBounds.width();
-            console.log('leftCell', cellGroup.col, cellGroup.globalAABBBounds, cellGroup);
             proxy.colStart = distStartCol;
             proxy.colEnd = distEndCol;
+            checkFirstColMerge(distStartCol, proxy);
+            updateColContent(syncLeftCol, syncRightCol, proxy);
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
             proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
@@ -43641,6 +43639,88 @@
         }
         colGroup.needUpdate = false;
     }
+    function updatePartColPosition(startCol, endCol, direction, proxy) {
+        for (let col = startCol; col <= endCol; col++) {
+            if (proxy.table.scenegraph.bodyGroup.childrenCount > 0) {
+                updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
+            }
+            if (proxy.table.scenegraph.colHeaderGroup.childrenCount > 0) {
+                updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
+            }
+            if (proxy.table.scenegraph.bottomFrozenGroup.childrenCount > 0) {
+                updateColPosition(proxy.table.scenegraph.bodyGroup, direction, proxy);
+            }
+        }
+    }
+    function updateColPosition(containerGroup, direction, proxy) {
+        if (direction === 'left') {
+            const colGroup = containerGroup.firstChild;
+            updateColGroupPosition(colGroup, containerGroup.lastChild.col + 1, containerGroup.lastChild.attribute.x + containerGroup.lastChild.attribute.width);
+            containerGroup.appendChild(colGroup);
+        }
+        else {
+            const colGroup = containerGroup.lastChild;
+            updateColGroupPosition(colGroup, containerGroup.firstChild.col - 1, containerGroup.firstChild.attribute.x -
+                proxy.table.getColWidth(containerGroup.firstChild.col - 1));
+            containerGroup.insertBefore(colGroup, containerGroup.firstChild);
+        }
+    }
+    function updateColContent(syncLeftCol, syncRightCol, proxy) {
+        for (let col = syncLeftCol; col <= syncRightCol; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            updateColGroupContent(colGroup, proxy);
+            const colHeaderColGroup = proxy.table.scenegraph.getColGroup(col, true);
+            updateColGroupContent(colHeaderColGroup, proxy);
+            const bottomColGroup = proxy.table.scenegraph.getColGroupInBottom(col);
+            updateColGroupContent(bottomColGroup, proxy);
+        }
+    }
+    function updateAllColPosition(distStartColY, count, direction, proxy) {
+        proxy.table.scenegraph.colHeaderGroup.forEachChildren((colGroup, index) => {
+            if (colGroup.type === 'group') {
+                updateColGroupPosition(colGroup, direction === 'left' ? colGroup.col + count : colGroup.col - count, index === 0
+                    ? distStartColY
+                    : colGroup._prev.attribute.x + proxy.table.getColWidth(colGroup._prev.col));
+            }
+        });
+        proxy.table.scenegraph.bottomFrozenGroup.forEachChildren((colGroup, index) => {
+            if (colGroup.type === 'group') {
+                updateColGroupPosition(colGroup, direction === 'left' ? colGroup.col + count : colGroup.col - count, index === 0
+                    ? distStartColY
+                    : colGroup._prev.attribute.x + proxy.table.getColWidth(colGroup._prev.col));
+            }
+        });
+        proxy.table.scenegraph.bodyGroup.forEachChildren((colGroup, index) => {
+            if (colGroup.type === 'group') {
+                updateColGroupPosition(colGroup, direction === 'left' ? colGroup.col + count : colGroup.col - count, index === 0
+                    ? distStartColY
+                    : colGroup._prev.attribute.x + proxy.table.getColWidth(colGroup._prev.col));
+            }
+        });
+    }
+    function checkFirstColMerge(col, proxy) {
+        for (let row = 0; row < proxy.table.rowCount; row++) {
+            if ((row >= proxy.table.columnHeaderLevelCount && row < proxy.rowStart) ||
+                (row > proxy.rowEnd && row < proxy.table.rowCount - proxy.table.bottomFrozenRowCount)) {
+                continue;
+            }
+            const range = getCellMergeInfo(proxy.table, col, row);
+            if (range && range.start.row !== row) {
+                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
+                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
+                newCellGroup.col = col;
+                newCellGroup.row = row;
+                newCellGroup.setAttribute('x', proxy.table.getColsWidth(proxy.table.rowHeaderLevelCount, range.start.col - 1));
+                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
+                oldCellGroup.parent.removeChild(oldCellGroup);
+                oldCellGroup.needUpdate = false;
+                newCellGroup.needUpdate = false;
+                if (proxy.cellCache.get(col)) {
+                    proxy.cellCache.set(col, newCellGroup);
+                }
+            }
+        }
+    }
 
     function updateAutoRow(colStart, colEnd, rowStart, rowEnd, table, direction = 'up') {
         if (direction === 'up') {
@@ -43713,39 +43793,21 @@
         if (count < proxy.rowEnd - proxy.rowStart) {
             const startRow = direction === 'up' ? proxy.rowStart : proxy.rowEnd - count + 1;
             const endRow = direction === 'up' ? proxy.rowStart + count - 1 : proxy.rowEnd;
-            for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
-                const colGroup = proxy.table.scenegraph.getColGroup(col);
-                for (let row = startRow; row <= endRow; row++) {
-                    if (direction === 'up') {
-                        const cellGroup = colGroup.firstChild;
-                        proxy.updateCellGroupPosition(cellGroup, colGroup.lastChild.row + 1, colGroup.lastChild.attribute.y + colGroup.lastChild.attribute.height);
-                        colGroup.appendChild(cellGroup);
-                    }
-                    else {
-                        const cellGroup = colGroup.lastChild;
-                        proxy.updateCellGroupPosition(cellGroup, colGroup.firstChild.row - 1, colGroup.firstChild.attribute.y - cellGroup.attribute.height);
-                        colGroup.insertBefore(cellGroup, colGroup.firstChild);
-                    }
-                }
-            }
+            updatePartRowPosition(startRow, endRow, direction, proxy);
             const distStartRow = direction === 'up' ? proxy.rowEnd + 1 : proxy.rowStart - count;
-            const distEndRow = direction === 'up' ? proxy.rowEnd + count : proxy.rowStart - 1;
+            direction === 'up' ? proxy.rowEnd + count : proxy.rowStart - 1;
             const syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1);
             const syncBottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2);
             if (proxy.table.heightMode === 'autoHeight') {
                 computeRowsHeight(proxy.table, syncTopRow, syncBottomRow);
             }
-            for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
-                for (let row = syncTopRow; row <= syncBottomRow; row++) {
-                    const cellGroup = proxy.highPerformanceGetCell(col, row, distStartRow, distEndRow);
-                    proxy.updateCellGroupContent(cellGroup);
-                }
-            }
+            proxy.rowStart = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
+            proxy.rowEnd = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
+            checkFirstRowMerge(distStartRow, proxy);
+            updateRowContent(syncTopRow, syncBottomRow, proxy);
             if (proxy.table.heightMode === 'autoHeight') {
                 updateAutoRow(proxy.bodyLeftCol, proxy.bodyRightCol, syncTopRow, syncBottomRow, proxy.table, direction);
             }
-            proxy.rowStart = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
-            proxy.rowEnd = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
             proxy.currentRow = direction === 'up' ? proxy.currentRow + count : proxy.currentRow - count;
             proxy.totalRow = direction === 'up' ? proxy.totalRow + count : proxy.totalRow - count;
             proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2);
@@ -43760,14 +43822,7 @@
             const distStartRow = direction === 'up' ? proxy.rowStart + count : proxy.rowStart - count;
             const distEndRow = direction === 'up' ? proxy.rowEnd + count : proxy.rowEnd - count;
             const distStartRowY = proxy.table.getRowsHeight(proxy.bodyTopRow, distStartRow - 1);
-            for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
-                const colGroup = proxy.table.scenegraph.getColGroup(col);
-                colGroup?.forEachChildren((cellGroup, index) => {
-                    proxy.updateCellGroupPosition(cellGroup, direction === 'up' ? cellGroup.row + count : cellGroup.row - count, index === 0
-                        ? distStartRowY
-                        : cellGroup._prev.attribute.y + cellGroup._prev.attribute.height);
-                });
-            }
+            updateAllRowPosition(distStartRowY, count, direction, proxy);
             let syncTopRow;
             let syncBottomRow;
             if (proxy.table.heightMode === 'autoHeight') {
@@ -43784,12 +43839,8 @@
             }
             proxy.rowStart = distStartRow;
             proxy.rowEnd = distEndRow;
-            for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
-                for (let row = syncTopRow; row <= syncBottomRow; row++) {
-                    const cellGroup = proxy.highPerformanceGetCell(col, row, distStartRow, distEndRow);
-                    proxy.updateCellGroupContent(cellGroup);
-                }
-            }
+            checkFirstRowMerge(distStartRow, proxy);
+            updateRowContent(syncTopRow, syncBottomRow, proxy);
             console.log('updateAutoRow', distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
             if (proxy.table.heightMode === 'autoHeight') {
                 updateAutoRow(proxy.bodyLeftCol, proxy.bodyRightCol, syncTopRow, syncBottomRow, proxy.table, distEndRow > proxy.bodyBottomRow - (proxy.rowEnd - proxy.rowStart + 1) ? 'down' : 'up');
@@ -43807,6 +43858,107 @@
             }
         }
     }
+    function updatePartRowPosition(startRow, endRow, direction, proxy) {
+        for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            for (let row = startRow; row <= endRow; row++) {
+                updateCellGroupPosition(colGroup, direction, proxy);
+            }
+        }
+        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            for (let row = startRow; row <= endRow; row++) {
+                updateCellGroupPosition(colGroup, direction, proxy);
+            }
+        }
+        for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            for (let row = startRow; row <= endRow; row++) {
+                updateCellGroupPosition(colGroup, direction, proxy);
+            }
+        }
+    }
+    function updateCellGroupPosition(colGroup, direction, proxy) {
+        if (direction === 'up') {
+            const cellGroup = colGroup.firstChild;
+            proxy.updateCellGroupPosition(cellGroup, colGroup.lastChild.row + 1, colGroup.lastChild.attribute.y + colGroup.lastChild.attribute.height);
+            colGroup.appendChild(cellGroup);
+        }
+        else {
+            const cellGroup = colGroup.lastChild;
+            proxy.updateCellGroupPosition(cellGroup, colGroup.firstChild.row - 1, colGroup.firstChild.attribute.y - cellGroup.attribute.height);
+            colGroup.insertBefore(cellGroup, colGroup.firstChild);
+        }
+    }
+    function updateAllRowPosition(distStartRowY, count, direction, proxy) {
+        for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            colGroup?.forEachChildren((cellGroup, index) => {
+                proxy.updateCellGroupPosition(cellGroup, direction === 'up' ? cellGroup.row + count : cellGroup.row - count, index === 0
+                    ? distStartRowY
+                    : cellGroup._prev.attribute.y + proxy.table.getRowHeight(cellGroup._prev.row));
+            });
+        }
+        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            colGroup?.forEachChildren((cellGroup, index) => {
+                proxy.updateCellGroupPosition(cellGroup, direction === 'up' ? cellGroup.row + count : cellGroup.row - count, index === 0
+                    ? distStartRowY
+                    : cellGroup._prev.attribute.y + proxy.table.getRowHeight(cellGroup._prev.row));
+            });
+        }
+        for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
+            const colGroup = proxy.table.scenegraph.getColGroup(col);
+            colGroup?.forEachChildren((cellGroup, index) => {
+                proxy.updateCellGroupPosition(cellGroup, direction === 'up' ? cellGroup.row + count : cellGroup.row - count, index === 0
+                    ? distStartRowY
+                    : cellGroup._prev.attribute.y + proxy.table.getRowHeight(cellGroup._prev.row));
+            });
+        }
+    }
+    function updateRowContent(syncTopRow, syncBottomRow, proxy) {
+        for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) {
+            for (let row = syncTopRow; row <= syncBottomRow; row++) {
+                const cellGroup = proxy.highPerformanceGetCell(col, row, true);
+                proxy.updateCellGroupContent(cellGroup);
+            }
+        }
+        for (let col = proxy.table.colCount - proxy.table.rightFrozenColCount; col < proxy.table.colCount; col++) {
+            for (let row = syncTopRow; row <= syncBottomRow; row++) {
+                const cellGroup = proxy.highPerformanceGetCell(col, row);
+                proxy.updateCellGroupContent(cellGroup);
+            }
+        }
+        for (let col = proxy.bodyLeftCol; col <= proxy.bodyRightCol; col++) {
+            for (let row = syncTopRow; row <= syncBottomRow; row++) {
+                const cellGroup = proxy.highPerformanceGetCell(col, row);
+                proxy.updateCellGroupContent(cellGroup);
+            }
+        }
+    }
+    function checkFirstRowMerge(row, proxy) {
+        for (let col = 0; col < proxy.table.colCount; col++) {
+            if ((col >= proxy.table.rowHeaderLevelCount && col < proxy.colStart) ||
+                (col > proxy.colEnd && col < proxy.table.colCount - proxy.table.rightFrozenColCount)) {
+                continue;
+            }
+            const range = getCellMergeInfo(proxy.table, col, row);
+            if (range && range.start.row !== row) {
+                const oldCellGroup = proxy.highPerformanceGetCell(col, row, true);
+                const newCellGroup = updateCell$1(range.start.col, range.start.row, proxy.table, true);
+                newCellGroup.col = col;
+                newCellGroup.row = row;
+                newCellGroup.setAttribute('y', proxy.table.getRowsHeight(proxy.table.columnHeaderLevelCount, range.start.row - 1));
+                oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
+                oldCellGroup.parent.removeChild(oldCellGroup);
+                oldCellGroup.needUpdate = false;
+                newCellGroup.needUpdate = false;
+                if (proxy.cellCache.get(col)) {
+                    proxy.cellCache.set(col, newCellGroup);
+                }
+            }
+        }
+    }
 
     class SceneProxy {
         table;
@@ -43991,6 +44143,22 @@
         createColGroup(onceCount) {
             const endCol = Math.min(this.totalCol, this.currentCol + onceCount);
             computeColsWidth(this.table, this.currentCol + 1, endCol);
+            if (this.table.columnHeaderLevelCount) {
+                const lastColumnGroup = (this.table.scenegraph.colHeaderGroup.lastChild instanceof Group
+                    ? this.table.scenegraph.colHeaderGroup.lastChild
+                    : this.table.scenegraph.colHeaderGroup.lastChild._prev);
+                const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
+                const yOrigin = lastColumnGroup.attribute.y;
+                createColGroup(this.table.scenegraph.colHeaderGroup, xOrigin, yOrigin, this.currentCol + 1, endCol, 0, this.table.columnHeaderLevelCount - 1, 'columnHeader', this.table);
+            }
+            if (this.table.bottomFrozenRowCount) {
+                const lastColumnGroup = (this.table.scenegraph.bottomFrozenGroup.lastChild instanceof Group
+                    ? this.table.scenegraph.bottomFrozenGroup.lastChild
+                    : this.table.scenegraph.bottomFrozenGroup.lastChild._prev);
+                const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width;
+                const yOrigin = lastColumnGroup.attribute.y;
+                createColGroup(this.table.scenegraph.bottomFrozenGroup, xOrigin, yOrigin, this.currentCol + 1, endCol, this.table.rowCount - this.table.bottomFrozenRowCount, this.table.rowCount - 1, 'columnHeader', this.table);
+            }
             const lastColumnGroup = (this.table.scenegraph.bodyGroup.lastChild instanceof Group
                 ? this.table.scenegraph.bodyGroup.lastChild
                 : this.table.scenegraph.bodyGroup.lastChild._prev);
@@ -44044,12 +44212,7 @@
             if (this.table.heightMode === 'autoHeight') {
                 computeRowsHeight(this.table, this.rowUpdatePos, distRow);
             }
-            for (let col = this.bodyLeftCol; col <= this.bodyRightCol; col++) {
-                for (let row = this.rowUpdatePos; row <= distRow; row++) {
-                    const cellGroup = this.highPerformanceGetCell(col, row);
-                    this.updateCellGroupContent(cellGroup);
-                }
-            }
+            updateRowContent(this.rowUpdatePos, distRow, this);
             if (this.table.heightMode === 'autoHeight') {
                 updateAutoRow(this.bodyLeftCol, this.bodyRightCol, this.rowUpdatePos, distRow, this.table, this.rowUpdateDirection);
             }
@@ -44060,17 +44223,8 @@
         }
         updateColGroups(count) {
             const distCol = Math.min(this.bodyRightCol, this.colUpdatePos + count);
-            for (let col = this.colUpdatePos; col <= distCol; col++) {
-                const colGroup = this.table.scenegraph.getColGroup(col);
-                if (colGroup) {
-                    let cellGroup = colGroup.firstChild;
-                    while (cellGroup) {
-                        const newCellGroup = this.updateCellGroupContent(cellGroup);
-                        cellGroup = newCellGroup._next;
-                    }
-                    colGroup.needUpdate = false;
-                }
-            }
+            computeColsWidth(this.table, this.colUpdatePos, distCol);
+            updateColContent(this.colUpdatePos, distCol, this);
             this.colUpdatePos = distCol + 1;
         }
         updateCellGroupPosition(cellGroup, newRow, y) {
@@ -44134,18 +44288,22 @@
                 await this.progress();
             }
         }
-        highPerformanceGetCell(col, row, rowStart = this.rowStart, rowEnd = this.rowEnd, getShadow) {
-            if (row < rowStart || row > rowEnd) {
+        highPerformanceGetCell(col, row, getShadow) {
+            if (row >= this.table.columnHeaderLevelCount &&
+                row < this.table.rowCount - this.table.bottomFrozenRowCount &&
+                (row < this.rowStart || row > this.rowEnd)) {
                 return emptyGroup;
             }
-            if (row < this.rowStart || row > this.rowEnd || col < this.colStart || col > this.colEnd) {
+            if (col >= this.table.rowHeaderLevelCount &&
+                col < this.table.colCount - this.table.rightFrozenColCount &&
+                (col < this.colStart || col > this.colEnd)) {
                 return emptyGroup;
             }
             if (this.cellCache.get(col)) {
                 const cacheCellGoup = this.cellCache.get(col);
                 if ((cacheCellGoup._next || cacheCellGoup._prev) && Math.abs(cacheCellGoup.row - row) < row) {
                     let cellGroup = getCellByCache(cacheCellGoup, row);
-                    if (!cellGroup) {
+                    if (!cellGroup || (!getShadow && cellGroup.role === 'shadow-cell')) {
                         cellGroup = this.table.scenegraph.getCell(col, row, getShadow);
                     }
                     cellGroup.row && this.cellCache.set(col, cellGroup);
@@ -45326,10 +45484,7 @@
             return cell || emptyGroup;
         }
         highPerformanceGetCell(col, row, getShadow) {
-            if (!this.table.isHeader(col, row)) {
-                return this.proxy.highPerformanceGetCell(col, row, 0, this.table.rowCount - 1, getShadow);
-            }
-            return this.getCell(col, row, getShadow);
+            return this.proxy.highPerformanceGetCell(col, row, getShadow);
         }
         getColGroup(col, isCornerOrColHeader = false) {
             let element;
@@ -45841,6 +45996,7 @@
             this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width);
             this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width);
             this.colHeaderGroup.setAttribute('x', this.cornerHeaderGroup.attribute.width);
+            this.bottomFrozenGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
             this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
             this.updateTableSize();
             const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos;
@@ -51158,7 +51314,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.9.3-alpha.0";
+        version = "0.9.3-alpha.2";
         pagerConf;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -53344,6 +53500,9 @@
             const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
             const colIndex = layout.getRecordIndexByCol(col);
             indicatorKeys.forEach((key, index) => {
+                if (isArray$3(key)) {
+                    key = key[0];
+                }
                 const data = layout.dataset.collectedValues[key + '_align']
                     ? layout.dataset.collectedValues[key + '_align']
                     : layout.dataset.collectedValues[key];
@@ -53360,7 +53519,10 @@
                     seriesIndex: index
                 }));
             });
-            const rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, col)[0];
+            let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, col)[0];
+            if (isArray$3(rowDimensionKey)) {
+                rowDimensionKey = rowDimensionKey[0];
+            }
             const data = layout.dataset.cacheCollectedValues[rowDimensionKey] || layout.dataset.collectedValues[rowDimensionKey];
             const recordRow = layout.getRecordIndexByRow(row);
             const rowPath = layout.getRowKeysPath()[recordRow];
@@ -53384,6 +53546,9 @@
             const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
             const rowIndex = layout.getRecordIndexByRow(row);
             indicatorKeys.forEach((key, index) => {
+                if (isArray$3(key)) {
+                    key = key[0];
+                }
                 const data = layout.dataset.collectedValues[key + '_align']
                     ? layout.dataset.collectedValues[key + '_align']
                     : layout.dataset.collectedValues[key];
@@ -53400,7 +53565,10 @@
                     seriesIndex: index
                 }));
             });
-            const columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+            let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+            if (isArray$3(columnDimensionKey)) {
+                columnDimensionKey = columnDimensionKey[0];
+            }
             const data = layout.dataset.cacheCollectedValues[columnDimensionKey] || layout.dataset.collectedValues[columnDimensionKey];
             const recordCol = layout.getRecordIndexByCol(col);
             const colPath = layout.getColKeysPath()[recordCol];
@@ -56006,7 +56174,10 @@
                 col >= layout.rowHeaderLevelCount &&
                 col < layout.colCount - layout.rightFrozenColCount) {
                 const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, layout.columnHeaderLevelCount - 1);
-                const defaultKey = indicatorKeys[1];
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
                 if (!defaultKey) {
                     return undefined;
                 }
@@ -56037,7 +56208,10 @@
                 col >= layout.rowHeaderLevelCount &&
                 col < layout.colCount - layout.rightFrozenColCount) {
                 const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
-                const defaultKey = indicatorKeys[0];
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
                 const data = layout.dataset.collectedValues[defaultKey + '_align']
                     ? layout.dataset.collectedValues[defaultKey + '_align']
                     : layout.dataset.collectedValues[defaultKey];
@@ -56072,7 +56246,10 @@
             else if (col === layout.rowHeaderLevelCount - 1 &&
                 row >= layout.rowHeaderLevelCount &&
                 row < layout.rowCount - layout.bottomFrozenRowCount) {
-                const rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
+                let rowDimensionKey = layout.getDimensionKeyInChartSpec(layout.rowHeaderLevelCount, row)[0];
+                if (isArray$3(rowDimensionKey)) {
+                    rowDimensionKey = rowDimensionKey[0];
+                }
                 const data = layout.dataset.collectedValues[rowDimensionKey];
                 const recordRow = layout.getRecordIndexByRow(row);
                 const rowPath = layout.getRowKeysPath()[recordRow];
@@ -56098,7 +56275,10 @@
                 row >= layout.columnHeaderLevelCount &&
                 row < layout.rowCount - layout.bottomFrozenRowCount) {
                 const indicatorKeys = layout.getIndicatorKeyInChartSpec(col, row);
-                const defaultKey = indicatorKeys[0];
+                let defaultKey = indicatorKeys[0];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
                 const data = layout.dataset.collectedValues[defaultKey + '_align']
                     ? layout.dataset.collectedValues[defaultKey + '_align']
                     : layout.dataset.collectedValues[defaultKey];
@@ -56134,7 +56314,10 @@
                 row >= layout.columnHeaderLevelCount &&
                 row < layout.rowCount - layout.bottomFrozenRowCount) {
                 const indicatorKeys = layout.getIndicatorKeyInChartSpec(layout.rowHeaderLevelCount - 1, row);
-                const defaultKey = indicatorKeys[1];
+                let defaultKey = indicatorKeys[1];
+                if (isArray$3(defaultKey)) {
+                    defaultKey = defaultKey[0];
+                }
                 if (!defaultKey) {
                     return undefined;
                 }
@@ -56164,7 +56347,10 @@
             else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
                 col >= layout.rowHeaderLevelCount &&
                 col < layout.colCount - layout.rightFrozenColCount) {
-                const columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+                let columnDimensionKey = layout.getDimensionKeyInChartSpec(col, layout.columnHeaderLevelCount)[0];
+                if (isArray$3(columnDimensionKey)) {
+                    columnDimensionKey = columnDimensionKey[0];
+                }
                 const data = layout.dataset.collectedValues[columnDimensionKey];
                 const recordCol = layout.getRecordIndexByCol(col);
                 const colPath = layout.getColKeysPath()[recordCol];
@@ -56231,8 +56417,10 @@
         cornerSetting;
         _table;
         hasTwoIndicatorAxes;
+        _chartItemSpanSize;
         constructor(table, dataset) {
             this._table = table;
+            this._chartItemSpanSize = 0;
             this.rowTree = table.options.rowTree;
             this.columnTree = table.options.columnTree;
             this.rowsDefine = table.options.rows ?? [];
@@ -56349,6 +56537,28 @@
                     }
                     return false;
                 });
+                this._chartItemSpanSize = 0;
+                this._indicatorObjects.find(indicatorObject => {
+                    if (indicatorObject.chartSpec?.barWidth) {
+                        this._chartItemSpanSize = indicatorObject.chartSpec?.barWidth;
+                    }
+                    if (this._chartItemSpanSize > 0) {
+                        return true;
+                    }
+                    indicatorObject.chartSpec.series?.find((seriesObject) => {
+                        if (seriesObject.barWidth) {
+                            this._chartItemSpanSize = seriesObject.barWidth;
+                        }
+                        if (this._chartItemSpanSize > 0) {
+                            return true;
+                        }
+                        return false;
+                    });
+                    if (this._chartItemSpanSize > 0) {
+                        return true;
+                    }
+                    return false;
+                });
                 if (this.indicatorsAsCol) {
                     const cell_id = 'rowHeaderEmpty';
                     this._headerObjectMap[cell_id] = {
@@ -56547,7 +56757,7 @@
             else if (this.cornerSetting.titleOnDimension === 'row') {
                 cornerAttrs = this.rowShowAttrs;
             }
-            cornerAttrs.forEach(cornerAttrStr => {
+            cornerAttrs?.forEach(cornerAttrStr => {
                 if (!this._headerObjectMap[cornerAttrStr]) {
                     const dimensionInfo = this.getDimensionInfo(cornerAttrStr);
                     this._headerObjectMap[cornerAttrStr] = {
@@ -57285,7 +57495,8 @@
                     break;
                 }
             }
-            return (collectedValues?.size ?? 0) * 50;
+            const barWidth = this._chartItemSpanSize || 25;
+            return (collectedValues?.length ?? 0) * (barWidth + barWidth / 3);
         }
         getIndicatorKeyInChartSpec(_col, _row) {
             const chartSpec = this.getRawChartSpec(_col, _row);
@@ -57322,10 +57533,10 @@
             const dimensionKeys = [];
             if (chartSpec) {
                 if (this.indicatorsAsCol === false) {
-                    dimensionKeys.push(chartSpec.xField);
+                    dimensionKeys.push(chartSpec.xField ?? chartSpec?.series[0]?.xField);
                 }
                 else {
-                    dimensionKeys.push(chartSpec.yField);
+                    dimensionKeys.push(chartSpec.yField ?? chartSpec?.series[0]?.yField);
                 }
                 return dimensionKeys;
             }
@@ -58069,6 +58280,7 @@
                 const t0 = typeof window !== 'undefined' ? window.performance.now() : 0;
                 this.setRecords(records);
                 this.processCollectedValuesWithSumBy();
+                this.processCollectedValuesWithSortBy();
                 const t1 = typeof window !== 'undefined' ? window.performance.now() : 0;
                 console.log('processRecords:', t1 - t0);
                 const t4 = typeof window !== 'undefined' ? window.performance.now() : 0;
@@ -58131,6 +58343,15 @@
                 }
             }
         }
+        processCollectedValuesWithSortBy() {
+            for (const field in this.collectedValues) {
+                if (this.collectValuesBy[field]?.sortBy) {
+                    for (const byKeys in this.collectedValues[field]) {
+                        this.collectedValues[field][byKeys] = this.collectedValues[field][byKeys].sort((a, b) => this.collectValuesBy[field]?.sortBy.indexOf(a) - this.collectValuesBy[field]?.sortBy.indexOf(b));
+                    }
+                }
+            }
+        }
         processRecords() {
             let isNeedFilter = false;
             if (this.dataConfig?.filterRules?.length >= 1) {
@@ -58194,7 +58415,7 @@
                             };
                         }
                         else {
-                            this.collectedValues[field][collectKeys] = new Set();
+                            this.collectedValues[field][collectKeys] = [];
                         }
                     }
                     if (this.collectValuesBy[field].sumBy) {
@@ -58211,7 +58432,9 @@
                     }
                     else {
                         const fieldRange = this.collectedValues[field][collectKeys];
-                        fieldRange.add(record[field]);
+                        if (fieldRange.indexOf(record[field]) === -1) {
+                            fieldRange.push(record[field]);
+                        }
                     }
                 }
             }
@@ -59559,13 +59782,21 @@
                                 collectValuesBy[xField] = {
                                     by: columnKeys,
                                     type: chartSeries.direction !== 'horizontal' ? 'xField' : undefined,
-                                    range: chartSeries.direction === 'horizontal'
+                                    range: chartSeries.direction === 'horizontal',
+                                    sortBy: chartSeries.direction !== 'horizontal'
+                                        ? chartSeries?.data?.fields?.[xField]?.domain ??
+                                            indicatorDefine.chartSpec?.data?.fields?.[xField]?.domain
+                                        : undefined
                                 };
                                 const yField = chartSeries.yField;
                                 collectValuesBy[yField] = {
                                     by: rowKeys,
                                     range: chartSeries.direction !== 'horizontal',
-                                    sumBy: chartSeries.stack !== false && columnKeys.concat(xField)
+                                    sumBy: chartSeries.stack !== false && columnKeys.concat(xField),
+                                    sortBy: chartSeries.direction === 'horizontal'
+                                        ? chartSeries?.data?.fields?.[yField]?.domain ??
+                                            indicatorDefine.chartSpec?.data?.fields?.[yField]?.domain
+                                        : undefined
                                 };
                             });
                         }
@@ -59576,13 +59807,19 @@
                             collectValuesBy[xField] = {
                                 by: columnKeys,
                                 type: indicatorDefine.chartSpec.direction !== 'horizontal' ? 'xField' : undefined,
-                                range: indicatorDefine.chartSpec.direction === 'horizontal'
+                                range: indicatorDefine.chartSpec.direction === 'horizontal',
+                                sortBy: indicatorDefine.chartSpec.direction !== 'horizontal'
+                                    ? indicatorDefine.chartSpec?.data?.fields?.[xField]?.domain
+                                    : undefined
                             };
                             const yField = indicatorDefine.chartSpec.yField;
                             collectValuesBy[yField] = {
                                 by: rowKeys,
                                 range: option.indicators[i].chartSpec.direction !== 'horizontal',
-                                sumBy: indicatorDefine.chartSpec.stack !== false && columnKeys.concat(xField)
+                                sumBy: indicatorDefine.chartSpec.stack !== false && columnKeys.concat(xField),
+                                sortBy: indicatorDefine.chartSpec.direction === 'horizontal'
+                                    ? indicatorDefine.chartSpec?.data?.fields?.[yField]?.domain
+                                    : undefined
                             };
                         }
                     }
@@ -59600,13 +59837,21 @@
                                 collectValuesBy[yField] = {
                                     by: rowKeys,
                                     type: chartSeries.direction === 'horizontal' ? 'yField' : undefined,
-                                    range: chartSeries.direction !== 'horizontal'
+                                    range: chartSeries.direction !== 'horizontal',
+                                    sortBy: chartSeries.direction === 'horizontal'
+                                        ? chartSeries?.data?.fields?.[yField]?.domain ??
+                                            indicatorDefine.chartSpec?.data?.fields?.[yField]?.domain
+                                        : undefined
                                 };
                                 const xField = chartSeries.xField;
                                 collectValuesBy[xField] = {
                                     by: columnKeys,
                                     range: chartSeries.direction === 'horizontal',
-                                    sumBy: chartSeries.stack !== false && rowKeys.concat(yField)
+                                    sumBy: chartSeries.stack !== false && rowKeys.concat(yField),
+                                    sortBy: chartSeries.direction !== 'horizontal'
+                                        ? chartSeries?.data?.fields?.[xField]?.domain ??
+                                            indicatorDefine.chartSpec?.data?.fields?.[xField]?.domain
+                                        : undefined
                                 };
                             });
                         }
@@ -59617,13 +59862,19 @@
                             collectValuesBy[yField] = {
                                 by: rowKeys,
                                 type: indicatorDefine.chartSpec.direction === 'horizontal' ? 'yField' : undefined,
-                                range: indicatorDefine.chartSpec.direction !== 'horizontal'
+                                range: indicatorDefine.chartSpec.direction !== 'horizontal',
+                                sortBy: indicatorDefine.chartSpec.direction === 'horizontal'
+                                    ? indicatorDefine.chartSpec?.data?.fields?.[yField]?.domain
+                                    : undefined
                             };
                             const xField = indicatorDefine.chartSpec.xField;
                             collectValuesBy[xField] = {
                                 by: columnKeys,
                                 range: option.indicators[i].chartSpec.direction === 'horizontal',
-                                sumBy: indicatorDefine.chartSpec.stack !== false && rowKeys.concat(yField)
+                                sumBy: indicatorDefine.chartSpec.stack !== false && rowKeys.concat(yField),
+                                sortBy: indicatorDefine.chartSpec.direction !== 'horizontal'
+                                    ? indicatorDefine.chartSpec?.data?.fields?.[xField]?.domain
+                                    : undefined
                             };
                         }
                     }
@@ -60403,7 +60654,7 @@
         percentCalc: percentCalc
     });
 
-    const version = "0.9.3-alpha.0";
+    const version = "0.9.3-alpha.2";
     function getIcons() {
         return get$1();
     }