@visactor/vtable 0.22.0 → 0.23.0-alpha.0

package/dist/vtable.js

@@ -23050,7 +23050,10 @@
         CHECKBOX_STATE_CHANGE: 'checkbox_state_change',
         AFTER_RENDER: 'after_render',
         INITIALIZED: 'initialized',
-        CHANGE_CELL_VALUE: 'change_cell_value'
+        CHANGE_CELL_VALUE: 'change_cell_value',
+        DRAG_FILL_HANDLE_END: 'drag_fill_handle_end',
+        MOUSEDOWN_FILL_HANDLE: 'mousedown_fill_handle',
+        DBLCLICK_FILL_HANDLE: 'dblclick_fill_handle'
     };
 
     const judgeType = (value) => {
@@ -33851,11 +33854,20 @@
                 if (typeof field === 'string' || typeof field === 'number') {
                     const beforeChangedValue = this.beforeChangedRecordsMap[dataIndex][field];
                     const record = this.getOriginalRecord(dataIndex);
+                    let formatValue = value;
                     if (typeof beforeChangedValue === 'number' && isAllDigits(value)) {
-                        record[field] = parseFloat(value);
+                        formatValue = parseFloat(value);
+                    }
+                    if (isPromise(record)) {
+                        record
+                            .then(record => {
+                            record[field] = formatValue;
+                        })
+                            .catch((err) => {
+                        });
                     }
                     else {
-                        record[field] = value;
+                        record[field] = formatValue;
                     }
                 }
             }
@@ -35475,7 +35487,9 @@
         });
     }
     function decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
+        if (!dom ||
+            (!isValid$3(dom.$$typeof) &&
+                !isValid$3(dom.vtype))) {
             return dom;
         }
         const type = dom.type;
@@ -38347,16 +38361,6 @@
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
-        let bgColorFunc;
-        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
-            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
-                if (mappingRule.bgColor &&
-                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
-                        mappingRule.bgColor.indicatorKey) {
-                    bgColorFunc = mappingRule.bgColor.mapping;
-                }
-            });
-        }
         let cellGroup;
         if (type === 'text' || type === 'link') {
             if (type === 'link') {
@@ -38382,22 +38386,6 @@
                     }
                 }
             }
-            if (bgColorFunc) {
-                const cellValue = table.getCellOriginValue(col, row);
-                const bgColor = bgColorFunc(table, cellValue);
-                if (bgColor) {
-                    if (cellTheme) {
-                        cellTheme.group.fill = bgColor;
-                    }
-                    else {
-                        cellTheme = {
-                            group: {
-                                fill: bgColor
-                            }
-                        };
-                    }
-                }
-            }
             let customElementsGroup;
             let renderDefault = true;
             if (customResult) {
@@ -38601,16 +38589,6 @@
         const textAlign = cellTheme.text.textAlign;
         const textBaseline = cellTheme.text.textBaseline;
         let newCellGroup;
-        let bgColorFunc;
-        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
-            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
-                if (mappingRule.bgColor &&
-                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
-                        mappingRule.bgColor.indicatorKey) {
-                    bgColorFunc = mappingRule.bgColor.mapping;
-                }
-            });
-        }
         let cellWidth;
         let cellHeight;
         if (range) {
@@ -38623,10 +38601,10 @@
         }
         if (isPromise(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
         }
         if (isMerge) {
             const { width: contentWidth } = newCellGroup.attribute;
@@ -38637,7 +38615,7 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
+    function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -38676,10 +38654,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 (range.start.row !== range.end.row) {
+                if (cellGroup.role === 'cell' && range.start.row !== range.end.row && cellGroup.contentWidth !== cellWidth) {
                     updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.heightMode === 'autoHeight', padding, textAlign, textBaseline);
                 }
-                if (range.start.col !== range.end.col) {
+                if (cellGroup.role === 'cell' && range.start.col !== range.end.col && cellGroup.contentHeight !== cellHeight) {
                     updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.heightMode === 'autoHeight', padding, textAlign, textBaseline, table.scenegraph);
                 }
                 cellGroup.contentWidth = cellWidth;
@@ -43836,12 +43814,12 @@
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
-                    const rangeWidth = table.getColWidth(col);
+                    table.getColWidth(col);
                     const { width: contentWidth } = cellGroup.attribute;
                     const { height: contentHeight } = cellGroup.attribute;
                     cellGroup.contentWidth = contentWidth;
                     cellGroup.contentHeight = contentHeight;
-                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
+                    dealWithMergeCellSize(range, contentWidth, contentHeight, padding, textAlign, textBaseline, table);
                     columnGroup.updateColumnHeight(rangeHeight);
                     y += rangeHeight;
                 }
@@ -44877,7 +44855,7 @@
             computeColsWidth(this.table, this.currentCol + 1, endCol);
             for (let row = 0; row < this.table.rowCount; row++) {
                 const cellGroup = this.highPerformanceGetCell(this.currentCol, row);
-                if (isNumber$4(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
+                if (cellGroup.role === 'cell' && isNumber$4(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
                     this.table.scenegraph.updateCellContent(cellGroup.col, cellGroup.row);
                 }
             }
@@ -45294,6 +45272,7 @@
         const colsWidth = scene.table.getColsWidth(computeRectCellRangeStartCol, computeRectCellRangeEndCol);
         const rowsHeight = scene.table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
         const firstCellBound = scene.highPerformanceGetCell(computeRectCellRangeStartCol, computeRectCellRangeStartRow).globalAABBBounds;
+        const lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeEndCol, computeRectCellRangeEndRow).globalAABBBounds;
         selectComp.rect.setAttributes({
             x: firstCellBound.x1 - scene.tableGroup.attribute.x,
             y: firstCellBound.y1 - scene.tableGroup.attribute.y,
@@ -45301,6 +45280,15 @@
             height: rowsHeight,
             visible: true
         });
+        if (selectComp.fillhandle) {
+            selectComp.fillhandle.setAttributes({
+                x: lastCellBound.x2 - scene.tableGroup.attribute.x - 3,
+                y: lastCellBound.y2 - scene.tableGroup.attribute.y - 3,
+                width: 6,
+                height: 6,
+                visible: true
+            });
+        }
         const isNearRowHeader = scene.table.frozenColCount ? startCol === scene.table.frozenColCount : false;
         const isNearRightRowHeader = scene.table.rightFrozenColCount
             ? scene.table.rightFrozenColCount > 0 && endCol === scene.table.colCount - scene.table.rightFrozenColCount - 1
@@ -45504,6 +45492,7 @@
         ifExtendSelectRange && extendSelectRange();
         scene.selectingRangeComponents.forEach((selectComp, key) => {
             selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
         });
         scene.selectingRangeComponents = new Map();
         let needRowHeader = false;
@@ -45615,13 +45604,45 @@
             scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'body', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
     }
+    function hideCellSelectBorder(scene) {
+        scene.selectingRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+    }
+    function restoreCellSelectBorder(scene) {
+        scene.selectingRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+    }
 
     function createCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
+        let isHasFillHandleRect = !!scene.table.options.excelOptions?.fillHandle;
+        if (scene.table.stateManager.select.ranges?.length > 1) {
+            isHasFillHandleRect = false;
+            scene.removeFillHandleFromSelectComponents();
+        }
+        else if (scene.table.stateManager.select.ranges?.length === 1) {
+            const maxRow = Math.max(scene.table.stateManager.select.ranges[0].start.row, scene.table.stateManager.select.ranges[0].end.row);
+            const maxCol = Math.max(scene.table.stateManager.select.ranges[0].start.col, scene.table.stateManager.select.ranges[0].end.col);
+            if (scene.table.isHeader(maxCol, maxRow)) {
+                isHasFillHandleRect = false;
+            }
+        }
+        if (Array.isArray(strokes) && (strokes[1] === false || strokes[2] === false)) {
+            isHasFillHandleRect = false;
+        }
         const startCol = Math.min(start_Col, end_Col);
         const startRow = Math.min(start_Row, end_Row);
         const endCol = Math.max(start_Col, end_Col);
         const endRow = Math.max(start_Row, end_Row);
         const firstCellBound = scene.highPerformanceGetCell(startCol, startRow).globalAABBBounds;
+        const lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
         const theme = scene.table.theme;
         const bodyClickBorderColor = theme.selectionStyle?.cellBorderColor;
         const bodyClickLineWidth = theme.selectionStyle?.cellBorderLineWidth;
@@ -45641,9 +45662,23 @@
             height: 0,
             visible: true
         });
+        let fillhandle;
+        if (isHasFillHandleRect) {
+            fillhandle = createRect({
+                pickable: false,
+                fill: bodyClickBorderColor,
+                stroke: bodyClickBorderColor,
+                x: lastCellBound.x2 - 3,
+                y: lastCellBound.y2 - 3,
+                width: 6,
+                height: 6,
+                visible: true
+            });
+        }
         scene.lastSelectId = selectId;
         scene.selectingRangeComponents.set(`${startCol}-${startRow}-${endCol}-${endRow}-${selectId}`, {
             rect,
+            fillhandle,
             role: selectRangeType
         });
         scene.tableGroup.insertAfter(rect, selectRangeType === 'body'
@@ -45663,12 +45698,31 @@
                                     : selectRangeType === 'bottomFrozen'
                                         ? scene.bottomFrozenGroup
                                         : scene.rightBottomCornerGroup);
+        isHasFillHandleRect &&
+            scene.tableGroup.insertAfter(fillhandle, selectRangeType === 'body'
+                ? scene.bodyGroup
+                : selectRangeType === 'columnHeader'
+                    ? scene.colHeaderGroup
+                    : selectRangeType === 'rowHeader'
+                        ? scene.rowHeaderGroup
+                        : selectRangeType === 'cornerHeader'
+                            ? scene.cornerHeaderGroup
+                            : selectRangeType === 'rightTopCorner'
+                                ? scene.rightTopCornerGroup
+                                : selectRangeType === 'rightFrozen'
+                                    ? scene.rightFrozenGroup
+                                    : selectRangeType === 'leftBottomCorner'
+                                        ? scene.leftBottomCornerGroup
+                                        : selectRangeType === 'bottomFrozen'
+                                            ? scene.bottomFrozenGroup
+                                            : scene.rightBottomCornerGroup);
     }
 
     function moveSelectingRangeComponentsToSelectedRangeComponents(scene) {
         scene.selectingRangeComponents.forEach((rangeComponent, key) => {
             if (scene.selectedRangeComponents.get(key)) {
-                scene.selectedRangeComponents.get(key).rect.delete();
+                scene.selectingRangeComponents.get(key).rect.delete();
+                scene.selectingRangeComponents.get(key).fillhandle?.delete();
             }
             scene.selectedRangeComponents.set(key, rangeComponent);
         });
@@ -45681,6 +45735,7 @@
             const lastSelectId = key.split('-')[4];
             if (lastSelectId === scene.lastSelectId) {
                 selectComp.rect.delete();
+                selectComp.fillhandle?.delete();
                 scene.selectedRangeComponents.delete(key);
             }
         });
@@ -45688,9 +45743,16 @@
     function deleteAllSelectBorder(scene) {
         scene.selectedRangeComponents.forEach((selectComp, key) => {
             selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
         });
         scene.selectedRangeComponents = new Map();
     }
+    function removeFillHandleFromSelectComponents(scene) {
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.fillhandle?.delete();
+            selectComp.fillhandle = undefined;
+        });
+    }
 
     function updateRow(removeCells, addCells, updateCells, table) {
         const scene = table.scenegraph;
@@ -47863,6 +47925,9 @@
         updateCellSelectBorder(newStartCol, newStartRow, newEndCol, newEndRow, extendSelectRange = true) {
             updateCellSelectBorder(this, newStartCol, newStartRow, newEndCol, newEndRow, extendSelectRange);
         }
+        removeFillHandleFromSelectComponents() {
+            removeFillHandleFromSelectComponents(this);
+        }
         recreateAllSelectRangeComponents() {
             deleteAllSelectBorder(this);
             this.table.stateManager.select.ranges.forEach((cellRange) => {
@@ -49657,6 +49722,7 @@
         table;
         interactionState;
         select;
+        fillHandle;
         hover;
         hoverIcon;
         residentHoverIcon;
@@ -49759,6 +49825,11 @@
                 },
                 selecting: false
             };
+            this.fillHandle = {
+                isFilling: false,
+                startX: undefined,
+                startY: undefined
+            };
             this.hover = {
                 highlightScope: HighlightScope.single,
                 cellPos: {
@@ -49962,6 +50033,9 @@
         isResizeCol() {
             return this.columnResize.resizing;
         }
+        isFillHandle() {
+            return this.fillHandle.isFilling;
+        }
         isSelecting() {
             return this.select.selecting;
         }
@@ -49998,6 +50072,21 @@
             this.table.stateManager.updateSelectPos(-1, -1);
             this.table.scenegraph.updateNextFrame();
         }
+        startFillSelect(x, y) {
+            this.fillHandle.isFilling = true;
+            this.fillHandle.startX = x;
+            this.fillHandle.startY = y;
+            this.table.scenegraph.updateNextFrame();
+            this.table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_FILL_HANDLE, {});
+        }
+        endFillSelect() {
+            this.fillHandle.isFilling = false;
+            this.fillHandle.startX = undefined;
+            this.fillHandle.startY = undefined;
+            this.table.stateManager.fillHandle.directionRow = undefined;
+            this.table.eventManager.isDraging &&
+                this.table.fireListeners(TABLE_EVENT_TYPE.DRAG_FILL_HANDLE_END, { direction: this.fillHandle.direction });
+        }
         updateResizeCol(xInTable, yInTable) {
             updateResizeColumn(xInTable, yInTable, this);
         }
@@ -50741,6 +50830,9 @@
                     else if (stateManager.isMoveCol()) {
                         eventManager.dealColumnMover(eventArgsSet);
                     }
+                    else if (stateManager.isFillHandle()) {
+                        eventManager.dealFillSelect(eventArgsSet, true);
+                    }
                     else {
                         eventManager.dealTableSelect(eventArgsSet, true);
                     }
@@ -50748,7 +50840,12 @@
                 return;
             }
             if (stateManager.isResizeCol() || eventManager.checkColumnResize(eventArgsSet)) {
-                stateManager.updateCursor('col-resize');
+                if (table.stateManager.select && eventManager.checkCellFillhandle(eventArgsSet)) {
+                    stateManager.updateCursor('crosshair');
+                }
+                else {
+                    stateManager.updateCursor('col-resize');
+                }
             }
             else {
                 stateManager.updateCursor();
@@ -50983,7 +51080,7 @@
                     eventManager.dealTableHover(eventArgsSet);
                 }
                 else {
-                    if (eventManager.checkColumnResize(eventArgsSet, true)) {
+                    if (!eventManager.checkCellFillhandle(eventArgsSet) && eventManager.checkColumnResize(eventArgsSet, true)) {
                         table.scenegraph.updateChartState(null);
                         stateManager.updateInteractionState(InteractionState.grabing);
                         return;
@@ -50992,6 +51089,10 @@
                         stateManager.updateInteractionState(InteractionState.grabing);
                         return;
                     }
+                    if (eventManager.checkCellFillhandle(eventArgsSet, true) && eventManager.dealFillSelect(eventArgsSet)) {
+                        stateManager.updateInteractionState(InteractionState.grabing);
+                        return;
+                    }
                     if (eventManager.dealTableSelect(eventArgsSet)) {
                         stateManager.updateInteractionState(InteractionState.grabing);
                     }
@@ -51037,6 +51138,9 @@
                 }
                 else if (stateManager.isSelecting()) {
                     table.stateManager.endSelectCells();
+                    if (table.stateManager.isFillHandle()) {
+                        table.stateManager.endFillSelect();
+                    }
                     const eventArgsSet = getCellEventArgsSet(e);
                     if (eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
                         const cellsEvent = {
@@ -51634,84 +51738,13 @@
                     return;
                 }
                 if (table.stateManager.select.ranges?.length > 0) {
-                    const ranges = table.stateManager.select.ranges;
-                    const col = Math.min(ranges[0].start.col, ranges[0].end.col);
-                    const row = Math.min(ranges[0].start.row, ranges[0].end.row);
-                    const values = [];
                     navigator.clipboard.read().then(clipboardItems => {
                         for (const item of clipboardItems) {
                             if (item.types.includes('text/html')) {
-                                item.getType('text/html').then(blob => {
-                                    blob.text().then(pastedData => {
-                                        if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
-                                            const regex = /<tr[^>]*>(.*?)<\/tr>/gs;
-                                            const matches = Array.from(pastedData.matchAll(regex));
-                                            for (const match of matches) {
-                                                const rowContent = match[1];
-                                                const cellRegex = /<td[^>]*>(.*?)<\/td>/gs;
-                                                const cellMatches = Array.from(rowContent.matchAll(cellRegex));
-                                                const rowValues = cellMatches.map(cellMatch => {
-                                                    return (cellMatch[1]
-                                                        .replace(/(<(?!br)([^>]+)>)/gi, '')
-                                                        .replace(/<br(\s*|\/)>[\r\n]?/gim, '\n')
-                                                        .replace(/&amp;/g, '&')
-                                                        .replace(/&lt;/g, '<')
-                                                        .replace(/&gt;/g, '>')
-                                                        .replace(/&#9;/gi, '\t')
-                                                        .replace(/&nbsp;/g, ' '));
-                                                });
-                                                values.push(rowValues);
-                                            }
-                                            table.changeCellValues(col, row, values, true);
-                                        }
-                                        else {
-                                            navigator.clipboard.read().then(clipboardItems => {
-                                                for (const item of clipboardItems) {
-                                                    if (item.types.includes('text/plain')) {
-                                                        item.getType('text/plain').then(blob => {
-                                                            blob.text().then(pastedData => {
-                                                                const rows = pastedData.split('\n');
-                                                                rows.forEach(function (rowCells, rowIndex) {
-                                                                    const cells = rowCells.split('\t');
-                                                                    const rowValues = [];
-                                                                    values.push(rowValues);
-                                                                    cells.forEach(function (cell, cellIndex) {
-                                                                        if (cellIndex === cells.length - 1) {
-                                                                            cell = cell.trim();
-                                                                        }
-                                                                        rowValues.push(cell);
-                                                                    });
-                                                                });
-                                                                table.changeCellValues(col, row, values, true);
-                                                            });
-                                                        });
-                                                    }
-                                                }
-                                            });
-                                        }
-                                    });
-                                });
+                                pasteHtmlToTable(item);
                             }
                             else if (item.types.length === 1 && item.types[0] === 'text/plain') {
-                                item.getType('text/plain').then(blob => {
-                                    blob.text().then(pastedData => {
-                                        const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
-                                        if (rows.length > 1 && rows[rows.length - 1] === '') {
-                                            rows.pop();
-                                        }
-                                        rows.forEach(function (rowCells, rowIndex) {
-                                            const cells = rowCells.split('\t');
-                                            cells.forEach(function (cell, cellIndex) {
-                                                if (cell.includes('\n')) {
-                                                    cell = cell
-                                                        .replace(/^"(.*)"$/, '$1')
-                                                        .replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(''));
-                                                }
-                                            });
-                                        });
-                                    });
-                                });
-                                table.changeCellValues(col, row, values, true);
+                                pasteTextToTable(item);
                             }
                             else ;
                         }
@@ -51730,6 +51763,138 @@
             }
             table.resize();
         });
+        function pasteHtmlToTable(item) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            item.getType('text/html').then((blob) => {
+                blob.text().then((pastedData) => {
+                    if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
+                        const regex = /<tr[^>]*>(.*?)<\/tr>/gs;
+                        const matches = Array.from(pastedData.matchAll(regex));
+                        for (const match of matches) {
+                            const rowContent = match[1];
+                            const cellRegex = /<td[^>]*>(.*?)<\/td>/gs;
+                            const cellMatches = Array.from(rowContent.matchAll(cellRegex));
+                            const rowValues = cellMatches.map(cellMatch => {
+                                return (cellMatch[1]
+                                    .replace(/(<(?!br)([^>]+)>)/gi, '')
+                                    .replace(/<br(\s*|\/)>[\r\n]?/gim, '\n')
+                                    .replace(/&amp;/g, '&')
+                                    .replace(/&lt;/g, '<')
+                                    .replace(/&gt;/g, '>')
+                                    .replace(/&#9;/gi, '\t')
+                                    .replace(/&nbsp;/g, ' '));
+                            });
+                            values.push(rowValues);
+                            pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+                        }
+                        pasteValuesRowCount = values.length ?? 0;
+                        values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                        table.changeCellValues(col, row, values, true);
+                    }
+                    else {
+                        navigator.clipboard.read().then(clipboardItems => {
+                            for (const item of clipboardItems) {
+                                if (item.types.includes('text/plain')) {
+                                    item.getType('text/plain').then((blob) => {
+                                        blob.text().then(_pasteValue);
+                                    });
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+        function _pasteValue(pastedData) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            let values = [];
+            const rows = pastedData.split('\n');
+            rows.forEach(function (rowCells, rowIndex) {
+                const cells = rowCells.split('\t');
+                const rowValues = [];
+                values.push(rowValues);
+                cells.forEach(function (cell, cellIndex) {
+                    if (cellIndex === cells.length - 1) {
+                        cell = cell.trim();
+                    }
+                    rowValues.push(cell);
+                });
+                pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+            });
+            pasteValuesRowCount = values.length ?? 0;
+            values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+            table.changeCellValues(col, row, values, true);
+        }
+        function pasteTextToTable(item) {
+            const ranges = table.stateManager.select.ranges;
+            const selectRangeLength = ranges.length;
+            const col = Math.min(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const row = Math.min(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            const maxCol = Math.max(ranges[selectRangeLength - 1].start.col, ranges[selectRangeLength - 1].end.col);
+            const maxRow = Math.max(ranges[selectRangeLength - 1].start.row, ranges[selectRangeLength - 1].end.row);
+            let pasteValuesColCount = 0;
+            let pasteValuesRowCount = 0;
+            item.getType('text/plain').then((blob) => {
+                blob.text().then((pastedData) => {
+                    const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
+                    let values = [];
+                    if (rows.length > 1 && rows[rows.length - 1] === '') {
+                        rows.pop();
+                    }
+                    rows.forEach(function (rowCells, rowIndex) {
+                        const cells = rowCells.split('\t');
+                        const rowValues = [];
+                        values.push(rowValues);
+                        cells.forEach(function (cell, cellIndex) {
+                            if (cell.includes('\n')) {
+                                cell = cell
+                                    .replace(/^"(.*)"$/, '$1')
+                                    .replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(''));
+                            }
+                            rowValues.push(cell);
+                        });
+                        pasteValuesColCount = Math.max(pasteValuesColCount, rowValues?.length ?? 0);
+                    });
+                    pasteValuesRowCount = values.length ?? 0;
+                    values = handlePasteValues(values, pasteValuesRowCount, pasteValuesColCount, maxRow - row + 1, maxCol - col + 1);
+                    table.changeCellValues(col, row, values, true);
+                });
+            });
+        }
+        function handlePasteValues(values, rowCount, colCount, selectedRowCount, selectedColCount) {
+            if (selectedColCount > colCount || selectedRowCount > rowCount) {
+                if (selectedColCount % colCount === 0 && selectedRowCount % rowCount === 0) {
+                    const toPasteValues = [];
+                    for (let i = 0; i < selectedRowCount; i++) {
+                        const rowPasteValue = [];
+                        toPasteValues.push(rowPasteValue);
+                        for (let j = 0; j < selectedColCount; j++) {
+                            const copiedRow = i % rowCount;
+                            const copiedCol = j % colCount;
+                            rowPasteValue.push(values[copiedRow][copiedCol]);
+                        }
+                    }
+                    return toPasteValues;
+                }
+                return values;
+            }
+            return values;
+        }
         const globalPointerdownCallback = (e) => {
             table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
             table.eventManager.isDown = true;
@@ -52119,7 +52284,10 @@
                 if (e.federatedEvent) {
                     const eventArgsSet = getCellEventArgsSet(e.federatedEvent);
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
-                    if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
+                    if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) {
+                        this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});
+                    }
+                    else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
                         this.table.scenegraph.updateChartSize(resizeCol.col);
                         const state = this.table.stateManager;
@@ -52196,6 +52364,53 @@
             }
             return false;
         }
+        dealFillSelect(eventArgsSet, isSelectMoving) {
+            const { eventArgs } = eventArgsSet;
+            if (eventArgs) {
+                if (this.table.stateManager.select?.ranges?.length && this.table.stateManager.isFillHandle()) {
+                    let updateRow;
+                    let updateCol;
+                    const currentRange = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1];
+                    if (isSelectMoving) {
+                        if (!isValid$3(this.table.stateManager.fillHandle.directionRow)) {
+                            if (Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >=
+                                Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x)) {
+                                this.table.stateManager.fillHandle.directionRow = true;
+                                if (this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y > 0) {
+                                    this.table.stateManager.fillHandle.direction = 'top';
+                                }
+                                else {
+                                    this.table.stateManager.fillHandle.direction = 'bottom';
+                                }
+                            }
+                            else {
+                                this.table.stateManager.fillHandle.directionRow = false;
+                                if (this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x > 0) {
+                                    this.table.stateManager.fillHandle.direction = 'left';
+                                }
+                                else {
+                                    this.table.stateManager.fillHandle.direction = 'right';
+                                }
+                            }
+                        }
+                        if (this.table.stateManager.fillHandle.directionRow) {
+                            updateRow = eventArgs.row;
+                            updateCol = currentRange.end.col;
+                        }
+                        else {
+                            updateRow = currentRange.end.row;
+                            updateCol = eventArgs.col;
+                        }
+                    }
+                    this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, true, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                }
+                else {
+                    this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey);
+                }
+                return true;
+            }
+            return false;
+        }
         deelTableSelectAll() {
             this.table.stateManager.updateSelectPos(-1, -1, false, false, true);
         }
@@ -52214,6 +52429,29 @@
             }
             return false;
         }
+        checkCellFillhandle(eventArgsSet, update) {
+            if (this.table.options.excelOptions?.fillHandle) {
+                const { eventArgs } = eventArgsSet;
+                if (eventArgs) {
+                    if (this.table.stateManager.select?.ranges?.length) {
+                        const lastCol = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.col;
+                        const lastRow = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row;
+                        const lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                        const distanceX = Math.abs(eventArgsSet.abstractPos.x - lastCellBound.x2);
+                        const distanceY = Math.abs(eventArgsSet.abstractPos.y - lastCellBound.y2);
+                        const squareSize = 6 * 3;
+                        if (this.table.stateManager.fillHandle?.isFilling ||
+                            (distanceX <= squareSize / 2 && distanceY <= squareSize / 2)) {
+                            if (update) {
+                                this.table.stateManager.startFillSelect(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                            }
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        }
         dealColumnResize(xInTable, yInTable) {
             this.table.stateManager.updateResizeCol(xInTable, yInTable);
         }
@@ -55504,7 +55742,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.22.0";
+        version = "0.23.0-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57281,6 +57519,16 @@
                 }
                 return cacheStyle;
             }
+            let bgColorFunc;
+            if (this.internalProps?.dataConfig?.mappingRules && !this.isHeader(col, row)) {
+                this.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
+                    if (mappingRule.bgColor &&
+                        this.internalProps.layoutMap.getIndicatorKey(col, row) ===
+                            mappingRule.bgColor.indicatorKey) {
+                        bgColorFunc = mappingRule.bgColor.mapping;
+                    }
+                });
+            }
             let cacheKey;
             const cellType = this.getCellType(col, row);
             if (this.isSeriesNumberInBody(col, row)) {
@@ -57321,6 +57569,9 @@
                 dataValue: this.getCellOriginValue(col, row),
                 cellHeaderPaths: this.getCellHeaderPaths(col, row)
             }, styleClass, this.options.autoWrapText, this.theme);
+            if (bgColorFunc) {
+                cacheStyle = mergeStyle(cacheStyle, { bgColor: bgColorFunc });
+            }
             if (!isFunction$3(style)) {
                 if (layoutMap.isBottomFrozenRow(row)) {
                     this.bodyBottomStyleCache.set(cacheKey, cacheStyle);
@@ -57625,7 +57876,7 @@
                                     const copyCellValue = getCopyCellValue(c, r, range);
                                     if (typeof Promise !== 'undefined' && copyCellValue instanceof Promise) ;
                                     else {
-                                        const strCellValue = `${copyCellValue}`;
+                                        const strCellValue = isValid$3(copyCellValue) ? `${copyCellValue}` : '';
                                         if (/^\[object .*\]$/.exec(strCellValue)) ;
                                         else {
                                             copyValue += strCellValue;
@@ -57722,6 +57973,13 @@
             }
             return cellInfoArray;
         }
+        getSelectedCellRanges() {
+            const ranges = this.stateManager.select.ranges;
+            if (!ranges.length) {
+                return [];
+            }
+            return cloneDeep(ranges);
+        }
         measureText(text, font) {
             return textMeasure.measureText(text, font);
         }
@@ -57799,11 +58057,20 @@
                 this.scrollToCell({ col, row });
             }
             const cellRect = this.getCellRelativeRect(col, row);
+            if (this.stateManager.select?.ranges?.length > 0) {
+                hideCellSelectBorder(this.scenegraph);
+            }
+            const { col: hoverCol, row: hoverRow } = this.stateManager.hover.cellPos;
+            this.stateManager.updateHoverPos(-1, -1);
             const c = this.scenegraph.stage.toCanvas(false, new AABBBounds$1().set(cellRect.left + this.tableX + 1, cellRect.top + this.tableY + 1, cellRect.right + this.tableX, cellRect.bottom + this.tableY));
             if (!isInView) {
                 this.setScrollTop(scrollTop);
                 this.setScrollLeft(scrollLeft);
             }
+            if (this.stateManager.select?.ranges?.length > 0) {
+                restoreCellSelectBorder(this.scenegraph);
+            }
+            this.stateManager.updateHoverPos(hoverCol, hoverRow);
             return c.toDataURL();
         }
         exportCellRangeImg(cellRange) {
@@ -63362,7 +63629,7 @@
                                     dimension.indicatorKey === rowDimension.indicatorKey &&
                                     (!rowDimension.value || dimension.value === rowDimension.value))) {
                                 rowArr = dimension.children;
-                                if (needLowestLevel && !rowArr) {
+                                if (needLowestLevel && (!rowArr || rowArr.some(row => row.dimensionKey === 'axis'))) {
                                     rowDimensionFinded = dimension;
                                 }
                                 else if (!needLowestLevel) {
@@ -67563,7 +67830,7 @@
     }
 
     registerForVrender();
-    const version = "0.22.0";
+    const version = "0.23.0-alpha.0";
     function getIcons() {
         return get$2();
     }