@visactor/vtable 0.22.1 → 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) => {
@@ -45269,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,
@@ -45276,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
@@ -45479,6 +45492,7 @@
         ifExtendSelectRange && extendSelectRange();
         scene.selectingRangeComponents.forEach((selectComp, key) => {
             selectComp.rect.delete();
+            selectComp.fillhandle?.delete();
         });
         scene.selectingRangeComponents = new Map();
         let needRowHeader = false;
@@ -45608,11 +45622,27 @@
     }
 
     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;
@@ -45632,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'
@@ -45654,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);
         });
@@ -45672,6 +45735,7 @@
             const lastSelectId = key.split('-')[4];
             if (lastSelectId === scene.lastSelectId) {
                 selectComp.rect.delete();
+                selectComp.fillhandle?.delete();
                 scene.selectedRangeComponents.delete(key);
             }
         });
@@ -45679,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;
@@ -47854,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) => {
@@ -49648,6 +49722,7 @@
         table;
         interactionState;
         select;
+        fillHandle;
         hover;
         hoverIcon;
         residentHoverIcon;
@@ -49750,6 +49825,11 @@
                 },
                 selecting: false
             };
+            this.fillHandle = {
+                isFilling: false,
+                startX: undefined,
+                startY: undefined
+            };
             this.hover = {
                 highlightScope: HighlightScope.single,
                 cellPos: {
@@ -49953,6 +50033,9 @@
         isResizeCol() {
             return this.columnResize.resizing;
         }
+        isFillHandle() {
+            return this.fillHandle.isFilling;
+        }
         isSelecting() {
             return this.select.selecting;
         }
@@ -49989,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);
         }
@@ -50732,6 +50830,9 @@
                     else if (stateManager.isMoveCol()) {
                         eventManager.dealColumnMover(eventArgsSet);
                     }
+                    else if (stateManager.isFillHandle()) {
+                        eventManager.dealFillSelect(eventArgsSet, true);
+                    }
                     else {
                         eventManager.dealTableSelect(eventArgsSet, true);
                     }
@@ -50739,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();
@@ -50974,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;
@@ -50983,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);
                     }
@@ -51028,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 = {
@@ -51625,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 ;
                         }
@@ -51721,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;
@@ -52110,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;
@@ -52187,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);
         }
@@ -52205,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);
         }
@@ -55495,7 +55742,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.22.1";
+        version = "0.23.0-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57726,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);
         }
@@ -67576,7 +67830,7 @@
     }
 
     registerForVrender();
-    const version = "0.22.1";
+    const version = "0.23.0-alpha.0";
     function getIcons() {
         return get$2();
     }