@visactor/vtable-sheet 1.26.3 → 1.26.4

package/cjs/index.d.ts

@@ -2,5 +2,5 @@ import VTableSheet from './components/vtable-sheet';
 import type { ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions } from './ts-types';
 import * as TYPES from './ts-types';
 import * as VTable from './vtable';
-export declare const version = "1.26.3";
+export declare const version = "1.26.4";
 export { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions };

package/cjs/index.js

@@ -47,4 +47,4 @@ exports.VTable = VTable;
 
 const style_manager_1 = require("./styles/style-manager");
 
-exports.version = "1.26.3", (0, style_manager_1.importStyles)();
+exports.version = "1.26.4", (0, style_manager_1.importStyles)();

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.26.3\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions };\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.26.4\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions, IVTableSheetUpdateOptions };\n"]}

package/dist/vtable-sheet.js

@@ -45636,7 +45636,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
@@ -61445,7 +61445,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.3", 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__ = {
@@ -70310,8 +70310,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$2(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);
@@ -70369,7 +70427,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,
@@ -70419,11 +70525,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],
@@ -70432,9 +70535,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) {
@@ -96229,7 +96334,7 @@
         importStyle();
     }
 
-    const version = "1.26.3";
+    const version = "1.26.4";
     importStyles();
 
     exports.TYPES = index;