@visactor/vtable-calendar 1.26.4-alpha.0 → 1.26.4

package/dist/vtable-calendar.js

@@ -38981,20 +38981,6 @@
         var _a, _b, _c;
         return null !== (_c = null === (_b = null === (_a = this.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0;
       }
-      refreshRecords(records = [], dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
-        var _a;
-        this.clearCache(), this.beforeChangedRecordsMap.clear(), this.groupAggregator = null, this.addRecordRule = (null == dataConfig ? void 0 : dataConfig.addRecordRule) || "Object", this.dataConfig = dataConfig, this.columns = columns, this._isGrouped = isArray$5(null == dataConfig ? void 0 : dataConfig.groupByRules), this.rowHierarchyType = rowHierarchyType, this.dataSourceObj = {
-          get: index => records[index],
-          length: records.length,
-          records: records
-        }, this._source = this.processRecords(records), this.sourceLength = (null === (_a = this.source) || void 0 === _a ? void 0 : _a.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), this.userPagination || (this.pagination.perPageCount = this.sourceLength, this.pagination.totalCount = this.sourceLength), "tree" === rowHierarchyType && this.initTreeHierarchyState(), this.updatePagerData();
-      }
       updateGroup() {
         var _a, _b, _c;
         this.clearCache();
@@ -39553,17 +39539,14 @@
         table.dataSource.hierarchyExpandLevel && table.refreshRowColCount(), table.render();
       })];
     }
-    function getListTableRowHierarchyType(table) {
-      var _a, _b;
-      const tableWithPlugins = table;
-      let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
-      return isArray$5(null === (_a = table.internalProps.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) && (rowHierarchyType = "tree"), (null === (_b = tableWithPlugins.pluginManager) || void 0 === _b ? void 0 : _b.getPluginByName("Master Detail Plugin")) && (rowHierarchyType = "grid"), rowHierarchyType;
-    }
     function _setRecords(table, records = []) {
+      const tableWithPlugins = table;
       _dealWithUpdateDataSource(table, () => {
+        var _a;
         table.internalProps.records = records;
-        const rowHierarchyType = getListTableRowHierarchyType(table),
-          newDataSource = table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table));
+        let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
+        isArray$5(null === (_a = table.internalProps.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) && (rowHierarchyType = "tree"), 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);
       });
     }
@@ -40353,7 +40336,7 @@
           col: null !== (_b = null == range ? void 0 : range.start.col) && void 0 !== _b ? _b : col,
           row: null !== (_c = null == range ? void 0 : range.start.row) && void 0 !== _c ? _c : row,
           dataValue: table.getCellOriginValue(col, row),
-          value: table.getCellValue(col, row) || "",
+          value: table.getCellValue(col, row),
           rect: {
             left: 0,
             top: 0,
@@ -40375,7 +40358,7 @@
           col: col,
           row: row,
           dataValue: table.getCellOriginValue(col, row),
-          value: table.getCellValue(col, row) || "",
+          value: table.getCellValue(col, row),
           rect: {
             left: 0,
             top: 0,
@@ -40939,7 +40922,7 @@
 
     function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      let contentWidth = 0,
+      let contentWidth,
         leftIconWidth = 0,
         rightIconWidth = 0,
         absoluteRightIconWidth = 0;
@@ -41019,8 +41002,8 @@
           }), contentRightIcons.forEach(icon => {
             const iconMark = dealWithIcon(icon, void 0, cellGroup.col, cellGroup.row, range, table, dealWithIconComputeVar);
             iconMark.role = "icon-content-right", iconMark.name = icon.name, cellContent.addRightOccupyingIcon(iconMark);
-          }), cellContent.addContent(textMark), cellGroup.appendChild(cellContent), cellContent.layout(), autoColWidth && (contentWidth = cellContent.AABBBounds.width());
-        } else cellGroup.firstChild ? cellGroup.insertBefore(textMark, cellGroup.firstChild) : cellGroup.appendChild(textMark), autoColWidth && (contentWidth = textMark.AABBBounds.width());
+          }), cellContent.addContent(textMark), cellGroup.appendChild(cellContent), cellContent.layout(), contentWidth = cellContent.AABBBounds.width(), cellContent.AABBBounds.height();
+        } else cellGroup.firstChild ? cellGroup.insertBefore(textMark, cellGroup.firstChild) : cellGroup.appendChild(textMark), contentWidth = textMark.AABBBounds.width(), textMark.AABBBounds.height();
       } else if (isValid$1(textStr)) {
         const {
             text: text,
@@ -41044,7 +41027,7 @@
             keepCenterInLine: !0
           },
           wrapText = new Text(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
-        wrapText.name = "text", wrapText.textBaseline = textBaseline, cellGroup.appendChild(wrapText), autoColWidth && (contentWidth = wrapText.AABBBounds.width());
+        wrapText.name = "text", wrapText.textBaseline = textBaseline, cellGroup.appendChild(wrapText), contentWidth = wrapText.AABBBounds.width(), wrapText.AABBBounds.height();
       }
       const width = autoColWidth ? leftIconWidth + contentWidth + rightIconWidth : cellWidth - (padding[1] + padding[3]),
         height = cellHeight - (padding[0] + padding[2]);
@@ -41377,7 +41360,7 @@
         rowEnd = null !== (_k = cellGroup.mergeEndCol) && void 0 !== _k ? _k : cellGroup.row,
         leftIconWidth = null !== (_l = cellGroup._cellLeftIconWidth) && void 0 !== _l ? _l : 0,
         rightIconWidth = null !== (_m = cellGroup._cellRightIconWidth) && void 0 !== _m ? _m : 0;
-      if (image.keepAspectRatio) {
+      if (image.keepAspectRatio || isDamagePic(image)) {
         const {
             width: imageWidth,
             height: imageHeight
@@ -41502,7 +41485,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) {
       var _a, _b;
       let cellGroup,
         isAsync = !1;
@@ -41537,7 +41520,7 @@
           customElementsGroup: customElementsGroup,
           renderDefault: renderDefault
         } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult);
-        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
+        cellGroup = Factory.getFunction("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 axis = new (Factory.getComponent("axis"))(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, null !== (_a = axisConfig.__vtableBodyChartCellPadding) && void 0 !== _a ? _a : padding, table);
@@ -41560,20 +41543,20 @@
           } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult),
           style = table._getCellStyle(col, row),
           dataValue = table.getCellOriginValue(col, row);
-        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
+        cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
         const progressBarGroup = Factory.getFunction("createProgressBarCell")(define, style, colWidth, value, dataValue, col, row, padding, table, range);
         cellGroup.firstChild ? cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild) : cellGroup.appendChild(progressBarGroup);
       } else if ("sparkline" === type) {
         cellGroup = Factory.getFunction("createSparkLineCellGroup")(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync);
       } else if ("checkbox" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
-          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync, headerStyle);
+          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
         } else {
           cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !1);
         }
       } else if ("radio" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
-          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync, headerStyle);
+          cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
         } else {
           cellGroup = Factory.getFunction("createRadioCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
         }
@@ -42364,7 +42347,7 @@
           col: null !== (_b = null == cellRange ? void 0 : cellRange.start.col) && void 0 !== _b ? _b : col,
           row: null !== (_c = null == cellRange ? void 0 : cellRange.start.row) && void 0 !== _c ? _c : row,
           dataValue: table.getCellOriginValue(col, row),
-          value: table.getCellValue(col, row) || "",
+          value: table.getCellValue(col, row),
           rect: getCellRect$1(col, row, table),
           table: table,
           originCol: col,
@@ -46545,7 +46528,7 @@
           col: null !== (_b = null == cellRange ? void 0 : cellRange.start.col) && void 0 !== _b ? _b : col,
           row: null !== (_c = null == cellRange ? void 0 : cellRange.start.row) && void 0 !== _c ? _c : row,
           dataValue: table.getCellOriginValue(col, row),
-          value: table.getCellValue(col, row) || "",
+          value: table.getCellValue(col, row),
           rect: getCellRect(col, row, table),
           table: table,
           originCol: col,
@@ -46785,7 +46768,6 @@
           isMerge,
           customStyle,
           customResult,
-          rawRecord,
           cellLocation = table.getCellLocation(col, row),
           value = table.getCellValue(col, row),
           cellWidth = colWidth,
@@ -46815,17 +46797,17 @@
         const isAggregation = "isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row),
           isSeriesNumber = table.internalProps.layoutMap.isSeriesNumber(col, row);
         let mayHaveIcon = "body" !== cellLocation || ((null == define ? void 0 : define.dragOrder) || !!(null == define ? void 0 : define.icon) || !!(null == define ? void 0 : define.tree)) && !(isAggregation && isSeriesNumber);
-        if (!range && (table.internalProps.enableTreeNodeMerge || "body" !== cellLocation || (null == define ? void 0 : define.mergeCell)) && (table.internalProps.enableTreeNodeMerge && "body" === cellLocation && !(null == define ? void 0 : define.mergeCell) ? (rawRecord = table.getCellRawRecord(col, row), (null == rawRecord ? void 0 : rawRecord.vtableMerge) && (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), isMerge)) {
+        if (!range && (table.internalProps.enableTreeNodeMerge || "body" !== cellLocation || (null == define ? void 0 : define.mergeCell)) && (range = table.getCellRange(col, row), isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row, isMerge)) {
           const mergeSize = dealMerge(range, mergeMap, table, rowStart > range.start.row);
           cellWidth = mergeSize.cellWidth, cellHeight = mergeSize.cellHeight;
         }
         let isVtableMerge = !1;
         if (table.internalProps.enableTreeNodeMerge && isMerge) {
-          rawRecord = null != rawRecord ? rawRecord : table.getCellRawRecord(range.start.col, range.start.row);
-          const {
-            vtableMergeName: vtableMergeName,
-            vtableMerge: vtableMerge
-          } = null != rawRecord ? rawRecord : {};
+          const rawRecord = table.getCellRawRecord(range.start.col, range.start.row),
+            {
+              vtableMergeName: vtableMergeName,
+              vtableMerge: vtableMerge
+            } = null != rawRecord ? rawRecord : {};
           isVtableMerge = vtableMerge, vtableMerge && (mayHaveIcon = !0, table.internalProps.groupTitleCustomLayout && (customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, void 0, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), !1, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table)), table.internalProps.groupTitleFieldFormat ? value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table) : void 0 !== vtableMergeName && (value = vtableMergeName));
         }
         const type = isVtableMerge || isCustomMerge ? "text" : table.getCellType(col, row);
@@ -46855,7 +46837,7 @@
           const cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row),
             cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
           cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || 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);
           if (columnGroup.updateColumnRowNumber(row), isMerge) {
             const rangeHeight = table.getRowHeight(row),
               {
@@ -46897,7 +46879,7 @@
         } = createCellArgs,
         cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row),
         cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
-      cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || 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);
+      cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), cellTheme.group.width = colWidth, cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight, cellTheme._vtable.padding && (padding = cellTheme._vtable.padding), cellTheme.text.textAlign && (textAlign = cellTheme.text.textAlign), cellTheme.text.textBaseline && (textBaseline = cellTheme.text.textBaseline), "body" === cellLocation || 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);
     }
     function dealMerge(range, mergeMap, table, forceUpdate) {
       let cellWidth = 0,
@@ -50347,28 +50329,16 @@
         updateContainerChildrenX(this.rightFrozenGroup, rightStartX), updateContainerChildrenX(this.rightTopCornerGroup, rightStartX), updateContainerChildrenX(this.rightBottomCornerGroup, rightStartX), 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 => {
-          var _a;
-          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.firstChild.row - 1) : 0);
-        }), this.bodyGroup.forEachChildrenSkipChild(column => {
-          var _a;
-          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.firstChild.row - 1) : 0);
-        }), this.rightFrozenGroup.forEachChildrenSkipChild(column => {
-          var _a;
-          column.firstChild && updateContainerChildrenY(column, column.firstChild.row > 0 ? this.table.getRowsHeight(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, column.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);
-        });
+        var _a, _b, _c;
+        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(null !== (_a = this.table.frozenRowCount) && void 0 !== _a ? _a : 0, this.rowHeaderGroup.children[i].firstChild.row - 1) : 0);
+        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(null !== (_b = this.table.frozenRowCount) && void 0 !== _b ? _b : 0, this.bodyGroup.children[i].firstChild.row - 1) : 0);
+        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(null !== (_c = this.table.frozenRowCount) && void 0 !== _c ? _c : 0, this.rightFrozenGroup.children[i].firstChild.row - 1) : 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: !1,
@@ -53315,70 +53285,73 @@
         });
       }), table.scenegraph.tableGroup.addEventListener("pointerup", e => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (0 === e.button) {
-          if ("grabing" === stateManager.interactionState) {
-            if (stateManager.updateInteractionState(InteractionState.default), stateManager.isResizeCol()) endResizeCol(table);else if (stateManager.isResizeRow()) endResizeRow(table);else if (stateManager.isMoveCol()) {
-              const endMoveColSuccess = table.stateManager.endMoveCol();
-              fireMoveColEventListeners(table, endMoveColSuccess, e.nativeEvent);
-            } else if (stateManager.isSelecting()) {
-              table.stateManager.endSelectCells(), table.stateManager.isFillHandle() && table.stateManager.endFillSelect();
-              const eventArgsSet = getEventArgsSet(e);
-              if (table.eventManager.isDraging && eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
-                const cellsEvent = {
-                  event: e.nativeEvent,
-                  cells: [],
-                  col: eventArgsSet.eventArgs.target.col,
-                  row: eventArgsSet.eventArgs.target.row,
-                  scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
-                  target: null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target,
-                  mergeCellInfo: null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.mergeInfo
-                };
-                cellsEvent.cells = table.getSelectedCellInfos(), table.fireListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END, cellsEvent);
-              }
-            }
-          } else stateManager.interactionState === InteractionState.scrolling && stateManager.updateInteractionState(InteractionState.default);
-          if (!table.eventManager.isDraging) {
+        if (0 !== e.button) return;
+        const endedResizeCol = stateManager.isResizeCol(),
+          endedResizeRow = stateManager.isResizeRow(),
+          endedMoveCol = stateManager.isMoveCol(),
+          shouldSkipClickCell = endedResizeCol || endedResizeRow;
+        if ("grabing" === stateManager.interactionState) {
+          if (stateManager.updateInteractionState(InteractionState.default), endedResizeCol) endResizeCol(table);else if (endedResizeRow) endResizeRow(table);else if (endedMoveCol) {
+            const endMoveColSuccess = table.stateManager.endMoveCol();
+            fireMoveColEventListeners(table, endMoveColSuccess, e.nativeEvent);
+          } else if (stateManager.isSelecting()) {
+            table.stateManager.endSelectCells(), table.stateManager.isFillHandle() && table.stateManager.endFillSelect();
             const eventArgsSet = getEventArgsSet(e);
-            if (!eventManager.isTouchMove && 0 === e.button && eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.CLICK_CELL)) {
-              const {
-                  col: col,
-                  row: row
-                } = eventArgsSet.eventArgs,
-                cellInfo = table.getCellInfo(col, row);
-              let icon, position;
-              if (null === (_c = eventArgsSet.eventArgs) || void 0 === _c ? void 0 : _c.target) {
-                const iconInfo = getIconAndPositionFromTarget(null === (_d = eventArgsSet.eventArgs) || void 0 === _d ? void 0 : _d.target);
-                iconInfo && (icon = iconInfo.icon, position = iconInfo.position);
-              }
-              const cellsEvent = Object.assign(Object.assign({}, cellInfo), {
+            if (table.eventManager.isDraging && eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
+              const cellsEvent = {
                 event: e.nativeEvent,
-                federatedEvent: e,
                 cells: [],
-                targetIcon: icon ? {
-                  name: icon.name,
-                  position: position,
-                  funcType: icon.attribute.funcType
-                } : void 0,
-                target: null === (_e = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _e ? void 0 : _e.target,
-                mergeCellInfo: null === (_f = eventArgsSet.eventArgs) || void 0 === _f ? void 0 : _f.mergeInfo
-              });
-              table.fireListeners(TABLE_EVENT_TYPE.CLICK_CELL, cellsEvent);
+                col: eventArgsSet.eventArgs.target.col,
+                row: eventArgsSet.eventArgs.target.row,
+                scaleRatio: table.canvas.getBoundingClientRect().width / table.canvas.offsetWidth,
+                target: null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target,
+                mergeCellInfo: null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.mergeInfo
+              };
+              cellsEvent.cells = table.getSelectedCellInfos(), table.fireListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END, cellsEvent);
             }
           }
-          if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL)) {
-            const eventArgsSet = getEventArgsSet(e);
-            eventArgsSet.eventArgs && table.fireListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL, {
-              col: eventArgsSet.eventArgs.col,
-              row: eventArgsSet.eventArgs.row,
+        } else stateManager.interactionState === InteractionState.scrolling && stateManager.updateInteractionState(InteractionState.default);
+        if (!table.eventManager.isDraging && !shouldSkipClickCell) {
+          const eventArgsSet = getEventArgsSet(e);
+          if (!eventManager.isTouchMove && 0 === e.button && eventArgsSet.eventArgs && table.hasListeners(TABLE_EVENT_TYPE.CLICK_CELL)) {
+            const {
+                col: col,
+                row: row
+              } = eventArgsSet.eventArgs,
+              cellInfo = table.getCellInfo(col, row);
+            let icon, position;
+            if (null === (_c = eventArgsSet.eventArgs) || void 0 === _c ? void 0 : _c.target) {
+              const iconInfo = getIconAndPositionFromTarget(null === (_d = eventArgsSet.eventArgs) || void 0 === _d ? void 0 : _d.target);
+              iconInfo && (icon = iconInfo.icon, position = iconInfo.position);
+            }
+            const cellsEvent = Object.assign(Object.assign({}, cellInfo), {
               event: e.nativeEvent,
-              target: null === (_g = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _g ? void 0 : _g.target,
-              mergeCellInfo: null === (_h = eventArgsSet.eventArgs) || void 0 === _h ? void 0 : _h.mergeInfo
+              federatedEvent: e,
+              cells: [],
+              targetIcon: icon ? {
+                name: icon.name,
+                position: position,
+                funcType: icon.attribute.funcType
+              } : void 0,
+              target: null === (_e = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _e ? void 0 : _e.target,
+              mergeCellInfo: null === (_f = eventArgsSet.eventArgs) || void 0 === _f ? void 0 : _f.mergeInfo
             });
+            table.fireListeners(TABLE_EVENT_TYPE.CLICK_CELL, cellsEvent);
           }
-          setTimeout(() => {
-            eventManager.isDown = !1, eventManager.isTouchdown = !1, eventManager.isTouchMove = !1, eventManager.isDraging = !1, eventManager.touchMovePoints = [];
-          }, 0);
         }
+        if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL)) {
+          const eventArgsSet = getEventArgsSet(e);
+          eventArgsSet.eventArgs && table.fireListeners(TABLE_EVENT_TYPE.MOUSEUP_CELL, {
+            col: eventArgsSet.eventArgs.col,
+            row: eventArgsSet.eventArgs.row,
+            event: e.nativeEvent,
+            target: null === (_g = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _g ? void 0 : _g.target,
+            mergeCellInfo: null === (_h = eventArgsSet.eventArgs) || void 0 === _h ? void 0 : _h.mergeInfo
+          });
+        }
+        setTimeout(() => {
+          eventManager.isDown = !1, eventManager.isTouchdown = !1, eventManager.isTouchMove = !1, eventManager.isDraging = !1, eventManager.touchMovePoints = [];
+        }, 0);
       }), table.scenegraph.tableGroup.addEventListener("rightdown", e => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const eventArgsSet = getEventArgsSet(e);
@@ -57196,7 +57169,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this._scrollToRowCorrectTimer = null, this._tableBorderWidth_left = 0, this._tableBorderWidth_right = 0, this._tableBorderWidth_top = 0, this._tableBorderWidth_bottom = 0, this.version = "1.26.2", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "undefined" != typeof window) {
+        if (super(), this.showFrozenIcon = !0, this._scrollToRowCorrectTimer = null, this._tableBorderWidth_left = 0, this._tableBorderWidth_right = 0, this._tableBorderWidth_top = 0, this._tableBorderWidth_bottom = 0, this.version = "1.26.4", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "undefined" != typeof window) {
           const g = window;
           g[this.id] = this;
           const registry = g.__vtable__ || (g.__vtable__ = {
@@ -58255,7 +58228,7 @@
         const internalProps = this.internalProps;
         if ("node" === Env.mode || options.canvas || updateRootElementPadding(internalProps.element, this.padding), this.columnWidthComputeMode = null !== (_d = options.columnWidthComputeMode) && void 0 !== _d ? _d : "normal", internalProps.frozenColCount = frozenColCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.enableCheckboxCascade = null === (_e = null != enableCheckboxCascade ? enableCheckboxCascade : null == rowSeriesNumber ? void 0 : rowSeriesNumber.enableTreeCheckbox) || void 0 === _e || _e, internalProps.enableHeaderCheckboxCascade = enableCheckboxCascade || null == enableHeaderCheckboxCascade || enableHeaderCheckboxCascade, internalProps.columnResizeMode = null !== (_f = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _f ? _f : columnResizeMode, internalProps.canResizeColumn = null == resize ? void 0 : resize.canResizeColumn, internalProps.rowResizeMode = null !== (_g = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _g ? _g : rowResizeMode, internalProps.dragHeaderMode = null !== (_j = null !== (_h = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _h ? _h : dragHeaderMode) && void 0 !== _j ? _j : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps.cellTextOverflows = {}, internalProps.groupBy = null !== (_k = null == groupConfig ? void 0 : groupConfig.groupBy) && void 0 !== _k ? _k : groupBy, internalProps.groupTitleCheckbox = null == groupConfig ? void 0 : groupConfig.titleCheckbox, internalProps.groupTitleFieldFormat = null !== (_l = null == groupConfig ? void 0 : groupConfig.titleFieldFormat) && void 0 !== _l ? _l : groupTitleFieldFormat, internalProps.groupTitleCustomLayout = null !== (_m = null == groupConfig ? void 0 : groupConfig.titleCustomLayout) && void 0 !== _m ? _m : groupTitleCustomLayout, internalProps.enableTreeStickCell = null !== (_o = null == groupConfig ? void 0 : groupConfig.enableTreeStickCell) && void 0 !== _o ? _o : enableTreeStickCell, (null == updateConfig ? void 0 : updateConfig.clearColWidthCache) && (internalProps._widthResizedColMap.clear(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {}), (null == updateConfig ? void 0 : updateConfig.clearRowHeightCache) && (internalProps._heightResizedRowMap.clear(), internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map()), internalProps.stick.changedCells.clear(), internalProps.theme = themes.of(null !== (_p = options.theme) && void 0 !== _p ? _p : themes.DEFAULT), internalProps.theme.isPivot = this.isPivotTable(), setIconColor(internalProps.theme.functionalIconsStyle), this.scenegraph.updateStageBackground(), internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, internalProps.allowFrozenColCount = null !== (_q = options.allowFrozenColCount) && void 0 !== _q ? _q : 0, internalProps.limitMaxAutoWidth = null !== (_r = options.limitMaxAutoWidth) && void 0 !== _r ? _r : 450, internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, null === (_s = internalProps.legends) || void 0 === _s || _s.forEach(legend => {
           null == legend || legend.release();
-        }), null === (_t = internalProps.title) || void 0 === _t || _t.release(), internalProps.title = null, null === (_u = internalProps.emptyTip) || void 0 === _u || _u.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), clearChartRenderQueue(), (null == updateConfig ? void 0 : updateConfig.skipClearCells) || this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
+        }), null === (_t = internalProps.title) || void 0 === _t || _t.release(), internalProps.title = null, null === (_u = internalProps.emptyTip) || void 0 === _u || _u.release(), internalProps.emptyTip = null, internalProps.layoutMap.release(), clearChartRenderQueue(), this.scenegraph.clearCells(), this.scenegraph.updateComponent(), this.stateManager.updateOptionSetState(), this._updateSize(), this.eventManager.updateEventBinder(), options.legends) {
           internalProps.legends = [];
           const createLegend = Factory.getFunction("createLegend");
           if (Array.isArray(options.legends)) {
@@ -62281,19 +62254,14 @@
         clearRowHeightCache: !0
       }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const internalProps = this.internalProps,
-          prevSortState = internalProps.sortState,
-          hasActiveSortState = (Array.isArray(options.sortState) ? options.sortState : options.sortState ? [options.sortState] : []).some(item => (null == item ? void 0 : item.field) && (null == item ? void 0 : item.order) && "normal" !== item.order),
-          shouldSkipInitialClearCells = Boolean(options.records) || !!options.dataSource && this.dataSource !== options.dataSource;
-        if (this.pluginManager.removeOrAddPlugins(options.plugins), super.updateOption(options, Object.assign(Object.assign({}, updateConfig), {
-          skipClearCells: shouldSkipInitialClearCells
-        })), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
+        const internalProps = this.internalProps;
+        if (this.pluginManager.removeOrAddPlugins(options.plugins), super.updateOption(options, updateConfig), internalProps.frozenColDragHeaderMode = null !== (_b = null === (_a = options.dragOrder) || void 0 === _a ? void 0 : _a.frozenColDragHeaderMode) && void 0 !== _b ? _b : options.frozenColDragHeaderMode, this.pagination = options.pagination, internalProps.sortState = options.sortState, internalProps.dataConfig = this.internalProps.groupBy ? getGroupByDataConfig(this.internalProps.groupBy, options.addRecordRule) : {
           addRecordRule: options.addRecordRule
         }, this.showHeader = null === (_c = options.showHeader) || void 0 === _c || _c, internalProps.columns = options.columns ? cloneDeepSpec(options.columns, ["children"]) : options.header ? cloneDeepSpec(options.header, ["children"]) : [], generateAggregationForColumn(this), internalProps.enableTreeNodeMerge = null !== (_e = null !== (_d = options.enableTreeNodeMerge) && void 0 !== _d ? _d : isValid$1(this.internalProps.groupBy)) && void 0 !== _e && _e, this.internalProps.headerHelper.setTableColumnsEditor(), this.transpose = null !== (_f = options.transpose) && void 0 !== _f && _f, this.refreshHeader(), this.internalProps.useOneRowHeightFillAll = !1, this.internalProps.columnWidthConfig = options.columnWidthConfig, this.internalProps.rowHeightConfig = options.rowHeightConfig, internalProps.releaseList) for (let i = internalProps.releaseList.length - 1; i >= 0; i--) {
           const releaseObj = internalProps.releaseList[i];
           releaseObj instanceof DataSource ? releaseObj.updateColumns(this.internalProps.columns) : (null === (_g = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _g || _g.call(releaseObj), internalProps.releaseList.splice(i, 1));
         }
-        if (options.dataSource && this.dataSource !== options.dataSource ? this.dataSource = options.dataSource : options.records && options.records === internalProps.records && options.sortState === prevSortState && !hasActiveSortState && this.dataSource instanceof CachedDataSource ? this._refreshCurrentRecordsForOptionUpdate(options.records) : options.records ? this.setRecords(options.records, {
+        if (options.dataSource && this.dataSource !== options.dataSource ? this.dataSource = options.dataSource : options.records ? this.setRecords(options.records, {
           sortState: options.sortState
         }) : (this.refreshRowColCount(), this._resetFrozenColCount(), this.scenegraph.createSceneGraph(), this.render()), options.title) {
           const Title = Factory.getComponent("title");
@@ -62309,22 +62277,6 @@
           setTimeout(resolve, 0);
         });
       }
-      _refreshCurrentRecordsForOptionUpdate(records) {
-        var _a;
-        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();
-        (null !== (_a = this.options.componentLayoutOrder) && void 0 !== _a ? _a : ["legend", "title"]).forEach(component => {
-          var _a, _b;
-          "legend" === component ? null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach(legend => {
-            null == legend || legend.resize();
-          }) : "title" === component && (null === (_b = this.internalProps.title) || void 0 === _b || _b.resize());
-        }), this.scenegraph.resize(), this.render();
-      }
       updatePagination(pagination) {
         this.pagination && ("number" == typeof pagination.currentPage && pagination.currentPage >= 0 && (this.pagination.currentPage = pagination.currentPage), pagination.perPageCount && (this.pagination.perPageCount = pagination.perPageCount || this.pagination.perPageCount), this.internalProps.layoutMap.clearCellRangeMap(), this.internalProps.useOneRowHeightFillAll = !1, this.scenegraph.clearCells(), this.dataSource.updatePagination(this.pagination), this.refreshRowColCount(), this.stateManager.initCheckedState(this.records), this.scenegraph.createSceneGraph(), this.renderAsync());
       }
@@ -66046,8 +65998,66 @@
     }
 
     const regedIcons = get$2();
+    function releaseVideoResource(video) {
+      try {
+        video.pause();
+      } catch (err) {}
+      video.removeAttribute("src");
+      try {
+        video.load();
+      } catch (err) {}
+    }
+    function getVideoFirstFrameTimeout(table) {
+      var _a;
+      const timeout = null === (_a = table.options.customConfig) || void 0 === _a ? void 0 : _a.videoFirstFrameTimeout;
+      return "number" == typeof timeout && timeout >= 0 ? timeout : 8e3;
+    }
+    function getVideoFirstFrameMaxCanvasSize(table) {
+      var _a;
+      const maxCanvasSize = null === (_a = table.options.customConfig) || void 0 === _a ? void 0 : _a.videoFirstFrameMaxCanvasSize;
+      return "number" == typeof maxCanvasSize && maxCanvasSize > 0 ? maxCanvasSize : 512;
+    }
+    function snapshotVideoFirstFrame(video, image, table) {
+      const displayWidth = image.attribute.width,
+        displayHeight = image.attribute.height;
+      if ("number" != typeof displayWidth || "number" != typeof displayHeight || displayWidth <= 0 || displayHeight <= 0) return !1;
+      const canvas = document.createElement("canvas"),
+        context = canvas.getContext("2d");
+      if (!context) return !1;
+      const dpr = Math.min(("undefined" == typeof window ? 1 : window.devicePixelRatio) || 1, 2),
+        maxSize = getVideoFirstFrameMaxCanvasSize(table),
+        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 {
+        return context.drawImage(video, 0, 0, canvas.width, canvas.height), image.setAttributes({
+          image: canvas
+        }), !0;
+      } catch (err) {
+        return !1;
+      }
+    }
+    function getSvgSize(svg) {
+      var _a;
+      const svgTag = null === (_a = svg.match(/<svg\b[^>]*>/i)) || void 0 === _a ? void 0 : _a[0];
+      if (!svgTag) return;
+      const widthMatch = svgTag.match(/\bwidth=["']?([\d.]+)/i),
+        heightMatch = svgTag.match(/\bheight=["']?([\d.]+)/i),
+        width = widthMatch ? Number(widthMatch[1]) : void 0,
+        height = heightMatch ? Number(heightMatch[1]) : void 0;
+      if (width > 0 && height > 0) return {
+        width: width,
+        height: height
+      };
+      const viewBoxMatch = svgTag.match(/\bviewBox=["']\s*[-\d.]+\s+[-\d.]+\s+([\d.]+)\s+([\d.]+)\s*["']/i),
+        viewBoxWidth = viewBoxMatch ? Number(viewBoxMatch[1]) : void 0,
+        viewBoxHeight = viewBoxMatch ? Number(viewBoxMatch[2]) : void 0;
+      return viewBoxWidth > 0 && viewBoxHeight > 0 ? {
+        width: viewBoxWidth,
+        height: viewBoxHeight
+      } : void 0;
+    }
     function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
       const headerStyle = table._getCellStyle(col, row),
         functionalPadding = getFunctionalProp("padding", headerStyle, col, row, table);
       (null === (_a = table.options.customConfig) || void 0 === _a ? void 0 : _a.imageMargin) ? padding = getQuadProps(null === (_b = table.options.customConfig) || void 0 === _b ? void 0 : _b.imageMargin) : isValid$1(functionalPadding) && (padding = functionalPadding), (null === (_c = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _c ? void 0 : _c.textAlign) && (textAlign = null === (_d = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _d ? void 0 : _d.textAlign), (null === (_e = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _e ? void 0 : _e.textBaseline) && (textBaseline = null === (_f = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _f ? void 0 : _f.textBaseline);
@@ -66105,7 +66115,55 @@
       }
       const value = table.getCellValue(col, row),
         video = document.createElement("video");
+      video.muted = !0, video.playsInline = !0;
+      const shouldSnapshot = !0 === (null === (_6 = table.options.customConfig) || void 0 === _6 ? void 0 : _6.videoFirstFrameSnapshot);
+      let loadTimer,
+        videoReleased = !1;
+      const clearVideoLoadTimer = () => {
+          void 0 !== loadTimer && (clearTimeout(loadTimer), loadTimer = void 0);
+        },
+        releaseCurrentVideo = () => {
+          videoReleased || (videoReleased = !0, clearVideoLoadTimer(), releaseVideoResource(video));
+        },
+        isCurrentImage = () => cellGroup.getChildByName("image", !0) === image,
+        handleVideoLoadFail = () => {
+          videoReleased || (isCurrentImage() && ((() => {
+            var _a, _b;
+            const regedIcons = get$2(),
+              damageIcon = regedIcons.video_damage_pic || regedIcons.damage_pic,
+              damageImage = damageIcon.svg;
+            image.setAttributes({
+              image: damageImage
+            });
+            const originImage = null === (_b = null === (_a = image.resources) || void 0 === _a ? void 0 : _a.get(damageImage)) || void 0 === _b ? void 0 : _b.data,
+              svgSize = "string" == typeof damageImage ? getSvgSize(damageImage) : void 0,
+              originWidth = (null == originImage ? void 0 : originImage.width) || damageIcon.width || (null == svgSize ? void 0 : svgSize.width) || 24,
+              originHeight = (null == originImage ? void 0 : originImage.height) || damageIcon.height || (null == svgSize ? void 0 : svgSize.height) || 24,
+              {
+                width: cellWidth,
+                height: cellHeight,
+                isMerge: isMerge
+              } = getCellRange$1(cellGroup, table),
+              availableWidth = cellWidth - padding[1] - padding[3],
+              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),
+                pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
+              image.setAttributes({
+                x: pos.x,
+                y: pos.y,
+                width: imageWidth,
+                height: imageHeight
+              }), isMerge && updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+            }
+          })(), table.scenegraph.updateNextFrame()), shouldSnapshot && releaseCurrentVideo());
+        };
       video.addEventListener("loadeddata", () => {
+        if (clearVideoLoadTimer(), videoReleased) return;
+        if (!isCurrentImage()) return void releaseCurrentVideo();
         imageAutoSizing && _adjustWidthHeight(col, row, video.videoWidth, video.videoHeight, table.scenegraph, padding, cellGroup);
         const {
           width: cellWidth,
@@ -66155,11 +66213,8 @@
             dx: dx,
             dy: dy
           });
-        playIcon.name = "play-icon", cellGroup.appendChild(playIcon), 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");
+        playIcon.name = "play-icon", cellGroup.appendChild(playIcon), shouldSnapshot && snapshotVideoFirstFrame(video, image, table) && releaseCurrentVideo(), table.scenegraph.updateNextFrame();
+      }), video.addEventListener("error", handleVideoLoadFail), video.addEventListener("abort", handleVideoLoadFail);
       const image = createImage({
         x: padding[3],
         y: padding[0],
@@ -66168,9 +66223,11 @@
         image: video,
         cursor: "pointer"
       });
-      return image.name = "image", image.keepAspectRatio = keepAspectRatio, image.textAlign = textAlign, image.textBaseline = textBaseline, cellGroup.appendChild(image), image.successCallback = () => {
+      image.name = "image", image.keepAspectRatio = keepAspectRatio, image.textAlign = textAlign, image.textBaseline = textBaseline, cellGroup.appendChild(image), image.successCallback = () => {
         isDamagePic(image) && (updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table), table.scenegraph.updateNextFrame());
-      }, cellGroup;
+      }, video.setAttribute("preload", "auto"), video.src = value;
+      const timeout = getVideoFirstFrameTimeout(table);
+      return shouldSnapshot && timeout > 0 && (loadTimer = setTimeout(handleVideoLoadFail, timeout)), cellGroup;
     }
 
     function createMark(marked, cellGroup, table) {
@@ -66230,10 +66287,10 @@
       }
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
-      headerStyle = headerStyle || table._getCellStyle(col, row);
-      const functionalPadding = getFunctionalProp("padding", headerStyle, col, row, table);
+      const headerStyle = table._getCellStyle(col, row),
+        functionalPadding = getFunctionalProp("padding", headerStyle, col, row, table);
       isValid$1(functionalPadding) && (padding = functionalPadding), (null === (_a = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _a ? void 0 : _a.textAlign) && (textAlign = null === (_b = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _b ? void 0 : _b.textAlign), (null === (_c = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _c ? void 0 : _c.textBaseline) && (textBaseline = null === (_d = null == cellTheme ? void 0 : cellTheme.text) || void 0 === _d ? void 0 : _d.textBaseline);
       const autoRowHeight = table.isAutoRowHeight(row),
         autoColWidth = "auto" === colWidth,