@visactor/vtable 1.26.4-alpha.0 → 1.26.4

package/dist/vtable.js

@@ -41545,41 +41545,6 @@
         getGroupLength() {
             return this.dataConfig?.groupByRules?.length ?? 0;
         }
-        refreshRecords(records = [], dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
-            this.clearCache();
-            this.beforeChangedRecordsMap.clear();
-            this.groupAggregator = null;
-            this.addRecordRule = dataConfig?.addRecordRule || 'Object';
-            this.dataConfig = dataConfig;
-            this.columns = columns;
-            this._isGrouped = isArray$5(dataConfig?.groupByRules);
-            this.rowHierarchyType = rowHierarchyType;
-            this.dataSourceObj = {
-                get: (index) => records[index],
-                length: records.length,
-                records
-            };
-            this._source = this.processRecords(records);
-            this.sourceLength = this.source?.length || 0;
-            this.sortedIndexMap.clear();
-            this._currentPagerIndexedData = [];
-            this.userPagination = pagination;
-            this.pagination = pagination || {
-                totalCount: this.sourceLength,
-                perPageCount: this.sourceLength,
-                currentPage: 0
-            };
-            this.hierarchyExpandLevel = hierarchyExpandLevel >= 1 ? hierarchyExpandLevel : 0;
-            this.currentIndexedData = Array.from({ length: this.sourceLength }, (_, i) => i);
-            if (!this.userPagination) {
-                this.pagination.perPageCount = this.sourceLength;
-                this.pagination.totalCount = this.sourceLength;
-            }
-            if (rowHierarchyType === 'tree') {
-                this.initTreeHierarchyState();
-            }
-            this.updatePagerData();
-        }
         updateGroup() {
             this.clearCache();
             const oldSource = this.source;
@@ -42343,21 +42308,17 @@
             })
         ];
     }
-    function getListTableRowHierarchyType(table) {
-        const tableWithPlugins = table;
-        let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
-        if (isArray$5(table.internalProps.dataConfig?.groupByRules)) {
-            rowHierarchyType = 'tree';
-        }
-        if (tableWithPlugins.pluginManager?.getPluginByName('Master Detail Plugin')) {
-            rowHierarchyType = 'grid';
-        }
-        return rowHierarchyType;
-    }
     function _setRecords(table, records = []) {
+        const tableWithPlugins = table;
         _dealWithUpdateDataSource(table, () => {
             table.internalProps.records = records;
-            const rowHierarchyType = getListTableRowHierarchyType(table);
+            let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
+            if (isArray$5(table.internalProps.dataConfig?.groupByRules)) {
+                rowHierarchyType = 'tree';
+            }
+            if (tableWithPlugins.pluginManager.getPluginByName('Master Detail Plugin')) {
+                rowHierarchyType = 'grid';
+            }
             const newDataSource = (table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table)));
             table.addReleaseObj(newDataSource);
         });
@@ -43572,7 +43533,7 @@
                 col: range?.start.col ?? col,
                 row: range?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
+                value: table.getCellValue(col, row),
                 rect: {
                     left: 0,
                     top: 0,
@@ -43608,7 +43569,7 @@
                 col,
                 row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
+                value: table.getCellValue(col, row),
                 rect: {
                     left: 0,
                     top: 0,
@@ -44661,7 +44622,7 @@
     }
 
     function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
-        let contentWidth = 0;
+        let contentWidth;
         let leftIconWidth = 0;
         let rightIconWidth = 0;
         let absoluteRightIconWidth = 0;
@@ -44706,9 +44667,8 @@
                 wrapText.name = 'text';
                 wrapText.textBaseline = textBaseline;
                 cellGroup.appendChild(wrapText);
-                if (autoColWidth) {
-                    contentWidth = wrapText.AABBBounds.width();
-                }
+                contentWidth = wrapText.AABBBounds.width();
+                wrapText.AABBBounds.height();
             }
         }
         else {
@@ -44822,9 +44782,8 @@
                 cellContent.addContent(textMark);
                 cellGroup.appendChild(cellContent);
                 cellContent.layout();
-                if (autoColWidth) {
-                    contentWidth = cellContent.AABBBounds.width();
-                }
+                contentWidth = cellContent.AABBBounds.width();
+                cellContent.AABBBounds.height();
             }
             else {
                 if (cellGroup.firstChild) {
@@ -44833,9 +44792,8 @@
                 else {
                     cellGroup.appendChild(textMark);
                 }
-                if (autoColWidth) {
-                    contentWidth = textMark.AABBBounds.width();
-                }
+                contentWidth = textMark.AABBBounds.width();
+                textMark.AABBBounds.height();
             }
         }
         const width = autoColWidth
@@ -45553,7 +45511,7 @@
         const rowEnd = cellGroup.mergeEndCol ?? cellGroup.row;
         const leftIconWidth = cellGroup._cellLeftIconWidth ?? 0;
         const rightIconWidth = cellGroup._cellRightIconWidth ?? 0;
-        if (image.keepAspectRatio) {
+        if (image.keepAspectRatio || isDamagePic(image)) {
             const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width || originImage.videoWidth, originImage.height || originImage.videoHeight, cellWidth - (padding[1] + padding[3]), cellHeight - (padding[0] + padding[2]));
             const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
             for (let col = colStart; col <= colEnd; col++) {
@@ -45721,7 +45679,7 @@
         }
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, headerStyle) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         let isAsync = false;
         let cellGroup;
         if (isPromise(value)) {
@@ -45770,7 +45728,7 @@
             }
             const { customElementsGroup, renderDefault } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult);
             const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
+            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
@@ -45808,7 +45766,7 @@
             const style = table._getCellStyle(col, row);
             const dataValue = table.getCellOriginValue(col, row);
             const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
+            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
             const createProgressBarCell = Factory.getFunction('createProgressBarCell');
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table, range);
             if (cellGroup.firstChild) {
@@ -45826,7 +45784,7 @@
             const isAggregation = 'isAggregation' in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row);
             if (isAggregation) {
                 const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync, headerStyle);
+                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync);
             }
             else {
                 const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup');
@@ -45837,7 +45795,7 @@
             const isAggregation = 'isAggregation' in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row);
             if (isAggregation) {
                 const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync, headerStyle);
+                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync);
             }
             else {
                 const createRadioCellGroup = Factory.getFunction('createRadioCellGroup');
@@ -47054,7 +47012,7 @@
                 col: cellRange?.start.col ?? col,
                 row: cellRange?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
+                value: table.getCellValue(col, row),
                 rect: getCellRect$1(col, row, table),
                 table,
                 originCol: col,
@@ -53609,7 +53567,7 @@
                 col: cellRange?.start.col ?? col,
                 row: cellRange?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
+                value: table.getCellValue(col, row),
                 rect: getCellRect(col, row, table),
                 table,
                 originCol: col,
@@ -54014,7 +53972,6 @@
             let customStyle;
             let customResult;
             let isCustomMerge = false;
-            let rawRecord;
             if (table.internalProps.customMergeCell) {
                 const customMerge = table.getCustomMerge(col, row);
                 if (customMerge) {
@@ -54064,19 +54021,8 @@
                     !(isAggregation && isSeriesNumber);
             if (!range &&
                 (table.internalProps.enableTreeNodeMerge || cellLocation !== 'body' || define?.mergeCell)) {
-                if (table.internalProps.enableTreeNodeMerge &&
-                    cellLocation === 'body' &&
-                    !define?.mergeCell) {
-                    rawRecord = table.getCellRawRecord(col, row);
-                    if (rawRecord?.vtableMerge) {
-                        range = table.getCellRange(col, row);
-                        isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                    }
-                }
-                else {
-                    range = table.getCellRange(col, row);
-                    isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                }
+                range = table.getCellRange(col, row);
+                isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
                 if (isMerge) {
                     const needUpdateRange = rowStart > range.start.row;
                     const mergeSize = dealMerge(range, mergeMap, table, needUpdateRange);
@@ -54086,7 +54032,7 @@
             }
             let isVtableMerge = false;
             if (table.internalProps.enableTreeNodeMerge && isMerge) {
-                rawRecord = rawRecord ?? table.getCellRawRecord(range.start.col, range.start.row);
+                const rawRecord = table.getCellRawRecord(range.start.col, range.start.row);
                 const { vtableMergeName, vtableMerge } = rawRecord ?? {};
                 isVtableMerge = vtableMerge;
                 if (vtableMerge) {
@@ -54147,7 +54093,7 @@
                 if (cellLocation !== 'body' && !cellTheme.group.fill) {
                     cellTheme.group.fill = '#fff';
                 }
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
@@ -54197,7 +54143,7 @@
         if (cellLocation !== 'body' && !cellTheme.group.fill) {
             cellTheme.group.fill = '#fff';
         }
-        createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
+        createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
     }
     function dealMerge(range, mergeMap, table, forceUpdate) {
         let cellWidth = 0;
@@ -60271,42 +60217,42 @@
             this.updateNextFrame();
         }
         updateContainerAttrHeightAndY() {
-            this.cornerHeaderGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
-            this.colHeaderGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
-            this.rightTopCornerGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
-            this.rowHeaderGroup.forEachChildrenSkipChild((column) => {
-                column.firstChild &&
-                    updateContainerChildrenY(column, column.firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
+            for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) {
+                updateContainerChildrenY(this.cornerHeaderGroup.children[i], 0);
+            }
+            for (let i = 0; i < this.colHeaderGroup.children.length; i++) {
+                updateContainerChildrenY(this.colHeaderGroup.children[i], 0);
+            }
+            for (let i = 0; i < this.rightTopCornerGroup.children.length; i++) {
+                updateContainerChildrenY(this.rightTopCornerGroup.children[i], 0);
+            }
+            for (let i = 0; i < this.rowHeaderGroup.children.length; i++) {
+                this.rowHeaderGroup.children[i].firstChild &&
+                    updateContainerChildrenY(this.rowHeaderGroup.children[i], this.rowHeaderGroup.children[i].firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.rowHeaderGroup.children[i].firstChild.row - 1)
                         : 0);
-            });
-            this.bodyGroup.forEachChildrenSkipChild((column) => {
-                column.firstChild &&
-                    updateContainerChildrenY(column, column.firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
+            }
+            for (let i = 0; i < this.bodyGroup.children.length; i++) {
+                this.bodyGroup.children[i].firstChild &&
+                    updateContainerChildrenY(this.bodyGroup.children[i], this.bodyGroup.children[i].firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.bodyGroup.children[i].firstChild.row - 1)
                         : 0);
-            });
-            this.rightFrozenGroup.forEachChildrenSkipChild((column) => {
-                column.firstChild &&
-                    updateContainerChildrenY(column, column.firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
+            }
+            for (let i = 0; i < this.rightFrozenGroup.children.length; i++) {
+                this.rightFrozenGroup.children[i].firstChild &&
+                    updateContainerChildrenY(this.rightFrozenGroup.children[i], this.rightFrozenGroup.children[i].firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.rightFrozenGroup.children[i].firstChild.row - 1)
                         : 0);
-            });
-            this.leftBottomCornerGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
-            this.bottomFrozenGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
-            this.rightBottomCornerGroup.forEachChildrenSkipChild((column) => {
-                updateContainerChildrenY(column, 0);
-            });
+            }
+            for (let i = 0; i < this.leftBottomCornerGroup.children.length; i++) {
+                updateContainerChildrenY(this.leftBottomCornerGroup.children[i], 0);
+            }
+            for (let i = 0; i < this.bottomFrozenGroup.children.length; i++) {
+                updateContainerChildrenY(this.bottomFrozenGroup.children[i], 0);
+            }
+            for (let i = 0; i < this.rightBottomCornerGroup.children.length; i++) {
+                updateContainerChildrenY(this.rightBottomCornerGroup.children[i], 0);
+            }
         }
         updateContainer(updateConfig = { async: false, needUpdateCellY: false }) {
             if (updateConfig.async) {
@@ -65220,15 +65166,19 @@
             if (e.button !== 0) {
                 return;
             }
+            const endedResizeCol = stateManager.isResizeCol();
+            const endedResizeRow = stateManager.isResizeRow();
+            const endedMoveCol = stateManager.isMoveCol();
+            const shouldSkipClickCell = endedResizeCol || endedResizeRow;
             if (stateManager.interactionState === 'grabing') {
                 stateManager.updateInteractionState(InteractionState.default);
-                if (stateManager.isResizeCol()) {
+                if (endedResizeCol) {
                     endResizeCol(table);
                 }
-                else if (stateManager.isResizeRow()) {
+                else if (endedResizeRow) {
                     endResizeRow(table);
                 }
-                else if (stateManager.isMoveCol()) {
+                else if (endedMoveCol) {
                     const endMoveColSuccess = table.stateManager.endMoveCol();
                     fireMoveColEventListeners(table, endMoveColSuccess, e.nativeEvent);
                 }
@@ -65258,7 +65208,7 @@
             else if (stateManager.interactionState === InteractionState.scrolling) {
                 stateManager.updateInteractionState(InteractionState.default);
             }
-            if (!table.eventManager.isDraging) {
+            if (!table.eventManager.isDraging && !shouldSkipClickCell) {
                 const eventArgsSet = getEventArgsSet(e);
                 if (!eventManager.isTouchMove &&
                     e.button === 0 &&
@@ -72109,7 +72059,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.26.2";
+        version = "1.26.4";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -73964,9 +73914,7 @@
             internalProps.emptyTip = null;
             internalProps.layoutMap.release();
             clearChartRenderQueue();
-            if (!updateConfig?.skipClearCells) {
-                this.scenegraph.clearCells();
-            }
+            this.scenegraph.clearCells();
             this.scenegraph.updateComponent();
             this.stateManager.updateOptionSetState();
             this._updateSize();
@@ -80232,19 +80180,8 @@
             clearRowHeightCache: true
         }) {
             const internalProps = this.internalProps;
-            const prevSortState = internalProps.sortState;
-            const nextSortStates = Array.isArray(options.sortState)
-                ? options.sortState
-                : options.sortState
-                    ? [options.sortState]
-                    : [];
-            const hasActiveSortState = nextSortStates.some(item => item?.field && item?.order && item.order !== 'normal');
-            const shouldSkipInitialClearCells = Boolean(options.records) || (!!options.dataSource && this.dataSource !== options.dataSource);
             this.pluginManager.removeOrAddPlugins(options.plugins);
-            super.updateOption(options, {
-                ...updateConfig,
-                skipClearCells: shouldSkipInitialClearCells
-            });
+            super.updateOption(options, updateConfig);
             internalProps.frozenColDragHeaderMode =
                 options.dragOrder?.frozenColDragHeaderMode ?? options.frozenColDragHeaderMode;
             this.pagination = options.pagination;
@@ -80282,13 +80219,6 @@
             if (options.dataSource && this.dataSource !== options.dataSource) {
                 this.dataSource = options.dataSource;
             }
-            else if (options.records &&
-                options.records === internalProps.records &&
-                options.sortState === prevSortState &&
-                !hasActiveSortState &&
-                this.dataSource instanceof CachedDataSource) {
-                this._refreshCurrentRecordsForOptionUpdate(options.records);
-            }
             else if (options.records) {
                 this.setRecords(options.records, {
                     sortState: options.sortState
@@ -80323,34 +80253,6 @@
                 setTimeout(resolve, 0);
             });
         }
-        _refreshCurrentRecordsForOptionUpdate(records) {
-            const dataSource = this.dataSource;
-            this.stateManager.endResizeIfResizing();
-            clearChartRenderQueue();
-            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
-            this.scenegraph.clearCells();
-            this.internalProps.records = records;
-            dataSource.refreshRecords(records, this.internalProps.dataConfig, this.pagination, this.internalProps.columns, getListTableRowHierarchyType(this), getHierarchyExpandLevel(this));
-            this.refreshRowColCount();
-            this.stateManager.initCheckedState(records);
-            this.clearCellStyleCache();
-            this.scenegraph.createSceneGraph();
-            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
-            this._updateSize();
-            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
-            layoutOrder.forEach(component => {
-                if (component === 'legend') {
-                    this.internalProps.legends?.forEach(legend => {
-                        legend?.resize();
-                    });
-                }
-                else if (component === 'title') {
-                    this.internalProps.title?.resize();
-                }
-            });
-            this.scenegraph.resize();
-            this.render();
-        }
         updatePagination(pagination) {
             if (this.pagination) {
                 typeof pagination.currentPage === 'number' &&
@@ -86054,6 +85956,77 @@
     }
 
     const regedIcons = get$2();
+    function releaseVideoResource(video) {
+        try {
+            video.pause();
+        }
+        catch (err) {
+        }
+        video.removeAttribute('src');
+        try {
+            video.load();
+        }
+        catch (err) {
+        }
+    }
+    function getVideoFirstFrameTimeout(table) {
+        const timeout = table.options.customConfig?.videoFirstFrameTimeout;
+        return typeof timeout === 'number' && timeout >= 0 ? timeout : 8000;
+    }
+    function getVideoFirstFrameMaxCanvasSize(table) {
+        const maxCanvasSize = table.options.customConfig?.videoFirstFrameMaxCanvasSize;
+        return typeof maxCanvasSize === 'number' && maxCanvasSize > 0 ? maxCanvasSize : 512;
+    }
+    function snapshotVideoFirstFrame(video, image, table) {
+        const displayWidth = image.attribute.width;
+        const displayHeight = image.attribute.height;
+        if (typeof displayWidth !== 'number' ||
+            typeof displayHeight !== 'number' ||
+            displayWidth <= 0 ||
+            displayHeight <= 0) {
+            return false;
+        }
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return false;
+        }
+        const dpr = Math.min((typeof window === 'undefined' ? 1 : window.devicePixelRatio) || 1, 2);
+        const maxSize = getVideoFirstFrameMaxCanvasSize(table);
+        const scale = Math.min(dpr, maxSize / Math.max(displayWidth, displayHeight));
+        canvas.width = Math.max(1, Math.ceil(displayWidth * scale));
+        canvas.height = Math.max(1, Math.ceil(displayHeight * scale));
+        canvas.style.width = `${displayWidth}px`;
+        canvas.style.height = `${displayHeight}px`;
+        try {
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            image.setAttributes({ image: canvas });
+            return true;
+        }
+        catch (err) {
+            return false;
+        }
+    }
+    function getSvgSize(svg) {
+        const svgTag = svg.match(/<svg\b[^>]*>/i)?.[0];
+        if (!svgTag) {
+            return undefined;
+        }
+        const widthMatch = svgTag.match(/\bwidth=["']?([\d.]+)/i);
+        const heightMatch = svgTag.match(/\bheight=["']?([\d.]+)/i);
+        const width = widthMatch ? Number(widthMatch[1]) : undefined;
+        const height = heightMatch ? Number(heightMatch[1]) : undefined;
+        if (width > 0 && height > 0) {
+            return { width, height };
+        }
+        const viewBoxMatch = svgTag.match(/\bviewBox=["']\s*[-\d.]+\s+[-\d.]+\s+([\d.]+)\s+([\d.]+)\s*["']/i);
+        const viewBoxWidth = viewBoxMatch ? Number(viewBoxMatch[1]) : undefined;
+        const viewBoxHeight = viewBoxMatch ? Number(viewBoxMatch[2]) : undefined;
+        if (viewBoxWidth > 0 && viewBoxHeight > 0) {
+            return { width: viewBoxWidth, height: viewBoxHeight };
+        }
+        return undefined;
+    }
     function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -86157,7 +86130,75 @@
         }
         const value = table.getCellValue(col, row);
         const video = document.createElement('video');
+        video.muted = true;
+        video.playsInline = true;
+        const shouldSnapshot = table.options.customConfig?.videoFirstFrameSnapshot === true;
+        let loadTimer;
+        let videoReleased = false;
+        const clearVideoLoadTimer = () => {
+            if (loadTimer !== undefined) {
+                clearTimeout(loadTimer);
+                loadTimer = undefined;
+            }
+        };
+        const releaseCurrentVideo = () => {
+            if (videoReleased) {
+                return;
+            }
+            videoReleased = true;
+            clearVideoLoadTimer();
+            releaseVideoResource(video);
+        };
+        const isCurrentImage = () => cellGroup.getChildByName('image', true) === image;
+        const setVideoDamageImage = () => {
+            const regedIcons = get$2();
+            const damageIcon = regedIcons.video_damage_pic || regedIcons.damage_pic;
+            const damageImage = damageIcon.svg;
+            image.setAttributes({
+                image: damageImage
+            });
+            const originImage = image.resources?.get(damageImage)?.data;
+            const svgSize = typeof damageImage === 'string' ? getSvgSize(damageImage) : undefined;
+            const originWidth = originImage?.width || damageIcon.width || svgSize?.width || 24;
+            const originHeight = originImage?.height || damageIcon.height || svgSize?.height || 24;
+            const { width: cellWidth, height: cellHeight, isMerge } = getCellRange$1(cellGroup, table);
+            const availableWidth = cellWidth - padding[1] - padding[3];
+            const availableHeight = cellHeight - padding[0] - padding[2];
+            if (originWidth > 0 && originHeight > 0 && availableWidth > 0 && availableHeight > 0) {
+                const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originWidth, originHeight, availableWidth, availableHeight);
+                const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
+                image.setAttributes({
+                    x: pos.x,
+                    y: pos.y,
+                    width: imageWidth,
+                    height: imageHeight
+                });
+                if (isMerge) {
+                    updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+                }
+            }
+        };
+        const handleVideoLoadFail = () => {
+            if (videoReleased) {
+                return;
+            }
+            if (isCurrentImage()) {
+                setVideoDamageImage();
+                table.scenegraph.updateNextFrame();
+            }
+            if (shouldSnapshot) {
+                releaseCurrentVideo();
+            }
+        };
         video.addEventListener('loadeddata', () => {
+            clearVideoLoadTimer();
+            if (videoReleased) {
+                return;
+            }
+            if (!isCurrentImage()) {
+                releaseCurrentVideo();
+                return;
+            }
             if (imageAutoSizing) {
                 _adjustWidthHeight(col, row, video.videoWidth, video.videoHeight, table.scenegraph, padding, cellGroup);
             }
@@ -86205,16 +86246,13 @@
             });
             playIcon.name = 'play-icon';
             cellGroup.appendChild(playIcon);
+            if (shouldSnapshot && snapshotVideoFirstFrame(video, image, table)) {
+                releaseCurrentVideo();
+            }
             table.scenegraph.updateNextFrame();
         });
-        video.onerror = () => {
-            const regedIcons = get$2();
-            image.image = regedIcons.video_damage_pic
-                ? regedIcons.video_damage_pic.svg
-                : regedIcons.damage_pic.svg;
-        };
-        video.src = value;
-        video.setAttribute('preload', 'auto');
+        video.addEventListener('error', handleVideoLoadFail);
+        video.addEventListener('abort', handleVideoLoadFail);
         const image = createImage({
             x: padding[3],
             y: padding[0],
@@ -86234,6 +86272,12 @@
                 table.scenegraph.updateNextFrame();
             }
         };
+        video.setAttribute('preload', 'auto');
+        video.src = value;
+        const timeout = getVideoFirstFrameTimeout(table);
+        if (shouldSnapshot && timeout > 0) {
+            loadTimer = setTimeout(handleVideoLoadFail, timeout);
+        }
         return cellGroup;
     }
 
@@ -86375,8 +86419,8 @@
         }
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle) {
-        headerStyle = headerStyle || table._getCellStyle(col, row);
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync) {
+        const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
             padding = functionalPadding;
@@ -96821,7 +96865,7 @@
     }
 
     registerForVrender();
-    const version = "1.26.2";
+    const version = "1.26.4";
     function getIcons() {
         return get$2();
     }