@versa_ai/vmml-editor 1.0.38 → 1.0.40

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.38 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.40 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -124,12 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 DTS Build start
-ESM dist\index.mjs     115.26 KB
-ESM dist\index.mjs.map 222.82 KB
-ESM ⚡️ Build success in 885ms
-CJS dist\index.js     116.86 KB
-CJS dist\index.js.map 223.11 KB
-CJS ⚡️ Build success in 886ms
-DTS ⚡️ Build success in 1577ms
+ESM dist\index.mjs     120.82 KB
+ESM dist\index.mjs.map 234.06 KB
+ESM ⚡️ Build success in 753ms
+CJS dist\index.js     122.51 KB
+CJS dist\index.js.map 234.35 KB
+CJS ⚡️ Build success in 754ms
+DTS ⚡️ Build success in 2765ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -709,15 +709,20 @@ var VmmlConverter = class {
    * @param fObj - 画布fObj
    */
   updateClip(fObj) {
-    console.log("updateClip fObj", fObj);
+    console.log("updateClip fObj", fObj, this.tracks);
     const posParam = this.setPosParam(fObj);
     const {
-      // clipData: { id, type, lineSpacing },
       clipData: { id, type, lineSpacing, originClip }
     } = fObj;
     let existClip = null;
     if (originClip) {
-      existClip = originClip;
+      for (const track of this.tracks) {
+        const clip = (track.clips || []).find((c) => c.id === originClip.id);
+        if (clip) {
+          existClip = clip;
+          break;
+        }
+      }
     } else {
       const editorTrack = this.tracks.find((track) => track.editorType === type);
       existClip = ((editorTrack == null ? void 0 : editorTrack.clips) || []).find((clip) => clip.id === id);
@@ -742,7 +747,6 @@ var VmmlConverter = class {
         };
       }
     }
-    console.log("updateClip \u6700\u7EC8vmml", this.vmml);
   }
   /**
    * 删除 Clip
@@ -751,7 +755,13 @@ var VmmlConverter = class {
    */
   deleteClip({ id, type, originClip }) {
     if (originClip) {
-      originClip.duration = 0;
+      for (const track of this.tracks) {
+        const clip = (track.clips || []).find((c) => c.id === originClip.id);
+        if (clip) {
+          clip.duration = 0;
+          break;
+        }
+      }
     } else {
       const editorTrack = this.tracks.find((track) => track.editorType === type);
       const index = editorTrack.clips.findIndex((item) => item.id === id);
@@ -769,7 +779,9 @@ var VmmlConverter = class {
         }
       }
     }
-    console.log("deleteClip \u6700\u7EC8Vmml", this.vmml);
+  }
+  changeVmml(newVmml) {
+    this.vmml = newVmml;
   }
   //切换静音 视频/音频
   changeMute({ id, isMute }) {
@@ -1020,6 +1032,7 @@ var EditorCanvas = react.forwardRef(
     const vmmlConverterRef = react.useRef(null);
     const heightScaleRef = react.useRef(1);
     const widthScaleRef = react.useRef(1);
+    const fontCacheRef = react.useRef(/* @__PURE__ */ new Map());
     const initCanvas = () => {
       const canvas = new fabric.fabric.Canvas("canvas", {
         width: canvasSize.width,
@@ -1058,9 +1071,9 @@ var EditorCanvas = react.forwardRef(
         objects.forEach((item) => {
           var _a, _b, _c;
           if (((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u6587\u5B57") {
-            item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
+            item.set("visible", item.clipData.duration > 0 && ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
           } else {
-            item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_c = (_b = item.clipData) == null ? void 0 : _b.fileUrl) == null ? void 0 : _c.duration));
+            item.set("visible", item.clipData.duration > 0 && ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_c = (_b = item.clipData) == null ? void 0 : _b.fileUrl) == null ? void 0 : _c.duration));
           }
         });
         fc.discardActiveObject();
@@ -1213,7 +1226,7 @@ var EditorCanvas = react.forwardRef(
           return createImageFromClip(clip);
         }
         if (clip.textClip && !clip.audioClip) {
-          return createTextFromClip(clip);
+          return createTextFromClipCanvas(clip);
         }
       });
       const res = await Promise.allSettled(promises);
@@ -1223,6 +1236,7 @@ var EditorCanvas = react.forwardRef(
           objects.push(item.value);
         }
       });
+      console.log(editRenderTime.current === time, "editRenderTime.current === time");
       if (editRenderTime.current === time) {
         canvas.add(...objects).renderAll();
         checkObjectInPoint();
@@ -1311,6 +1325,134 @@ var EditorCanvas = react.forwardRef(
       });
       window.dispatchEvent(event);
     };
+    const createTextFromClipCanvas = async (clip, fc2) => {
+      return new Promise(async (resolve) => {
+        const canvas = fc || fc2;
+        if (!canvas) return null;
+        const { width, height } = vmml.template.dimension;
+        const fontSize = vmmlUtils.getFontSize(width, height);
+        const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth, letterSpacing } = clip.textClip;
+        const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
+        const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
+        const left = canvasSize.width * posParam.centerX;
+        const top = canvasSize.height * posParam.centerY;
+        const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
+        const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
+        const textFill = vmmlUtils.argbToRgba(textColor || "#ffffffff");
+        const strokeW = strokeColor && strokeWidth ? strokeWidth * 26 * 1.5 / fontSize : 0;
+        const letterSpace = letterSpacing * 22 / fontSize;
+        let fontFamily = "sansMedium";
+        if (fontAssetUrl) {
+          const base64 = await loadFont(fontAssetUrl);
+          if (base64) {
+            fontFamily = getFontFamilyName(fontAssetUrl);
+            await document.fonts.ready;
+          }
+        }
+        const lines = textContent.split("\n").filter((item) => item);
+        const lineHeight = 22 + strokeW;
+        const textHeight = lines.length * lineHeight;
+        const groupWidth = Math.max(...lines.map((l) => {
+          const temp = new fabric.fabric.Text(l || " ", { fontSize: 22, fontFamily, charSpacing: (letterSpace || 0) * 50, strokeWidth: strokeW ?? 0 });
+          return (temp == null ? void 0 : temp.width) ?? 0;
+        })) + 14;
+        const groupHeight = textHeight + 13;
+        const textObjs = [];
+        lines.forEach((line, idx) => {
+          const y = (groupHeight - textHeight) / 2 + idx * lineHeight + lineHeight / 2 + 1;
+          const strokeText = new fabric.fabric.Text(line || " ", {
+            fontFamily,
+            fontSize: 22,
+            fill: "transparent",
+            stroke: stColor,
+            strokeWidth: strokeW,
+            originX: "center",
+            originY: "center",
+            left: groupWidth / 2,
+            // 水平居中
+            top: y,
+            charSpacing: (letterSpace || 0) * 50,
+            textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left",
+            objectCaching: false
+          });
+          const fillText = new fabric.fabric.Text(line || " ", {
+            fontFamily,
+            fontSize: 22,
+            fill: textFill,
+            stroke: "transparent",
+            originX: "center",
+            originY: "center",
+            strokeWidth: 0,
+            left: groupWidth / 2,
+            // 水平居中
+            top: y,
+            charSpacing: (letterSpace || 0) * 50,
+            textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left",
+            objectCaching: false
+          });
+          textObjs.push(strokeText, fillText);
+        });
+        const bgRect = new fabric.fabric.Rect({
+          width: groupWidth,
+          height: groupHeight,
+          fill: bgColor,
+          originX: "left",
+          originY: "top",
+          rx: 5,
+          ry: 5,
+          left: 0,
+          top: 0
+        });
+        const textBasicInfo = {
+          isBack: backgroundColor ? true : false,
+          colorValue: textFill,
+          colorName: "custom",
+          textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left"
+        };
+        const group = new fabric.fabric.Group([bgRect, ...textObjs], {
+          left,
+          top,
+          scaleX,
+          scaleY,
+          angle: posParam.rotationZ,
+          originX: "center",
+          originY: "center",
+          clipData: {
+            id: clip.id,
+            inPoint: clip.inPoint,
+            inFrame: vmmlUtils.getFrames(clip.inPoint, 30),
+            type: "\u6587\u5B57",
+            textColor: textFill,
+            text: textContent,
+            bgColor,
+            originClip: clip,
+            fontAssetUrl,
+            fontFamily,
+            textBasicInfo,
+            duration: clip.duration
+          },
+          objectCaching: false
+        });
+        group.on("selected", (options) => {
+          options.target.isSelected = -1;
+        });
+        group.on("moving", (options) => {
+          options.transform.target.isSelected = 0;
+        });
+        group.on("modified", () => {
+          const fObj = convertToJSON(group);
+          if (fObj.clipData.isAiError) {
+            fObj.clipData.textColor = "rgba(0, 0, 0, 0)";
+          }
+          if (isBatchModify) {
+            onBatchModify(fObj, canvas);
+          } else {
+            vmmlConverterRef.current.updateClip(fObj);
+          }
+        });
+        resolve(group);
+      });
+    };
     const createTextFromClip = async (clip, fc2) => {
       return new Promise(async (resolve) => {
         const canvas = fc || fc2;
@@ -1391,6 +1533,7 @@ var EditorCanvas = react.forwardRef(
               vmmlConverterRef.current.updateClip(fObj);
             }
           });
+          console.log("fabricjs>>>end>>>>>>>>>>>>");
           resolve(imgData);
         });
       });
@@ -1429,17 +1572,25 @@ var EditorCanvas = react.forwardRef(
     };
     const loadFont = async (url) => {
       if (!url) return null;
-      try {
-        const base64 = await vmmlUtils.urlToBlob({ url });
-        const fontFamilyName = getFontFamilyName(url);
-        const format = detectFontFormat(url);
-        const fontFace = new FontFace(fontFamilyName, `url(${base64})${format ? ` format('${format}')` : ""}`);
-        await fontFace.load();
-        document.fonts.add(fontFace);
-        return base64;
-      } catch (e) {
-        return null;
+      if (fontCacheRef.current.has(url)) {
+        return fontCacheRef.current.get(url);
       }
+      const loadPromise = (async () => {
+        try {
+          const base64 = await vmmlUtils.urlToBlob({ url });
+          const fontFamilyName = getFontFamilyName(url);
+          const format = detectFontFormat(url);
+          const fontFace = new FontFace(fontFamilyName, `url(${base64})${format ? ` format('${format}')` : ""}`);
+          await fontFace.load();
+          document.fonts.add(fontFace);
+          return base64;
+        } catch (e) {
+          console.error("Font load failed:", url, e);
+          return null;
+        }
+      })();
+      fontCacheRef.current.set(url, loadPromise);
+      return loadPromise;
     };
     const setTextAlign = (p, stroke, direction) => {
       if (direction === "center") {
@@ -1622,8 +1773,10 @@ var EditorCanvas = react.forwardRef(
       }
     }, [fc, dragState]);
     react.useEffect(() => {
-      if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
-        vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
+      if (canvasSize.width && canvasSize.height) {
+        if (vmmlConverterRef.current) ; else {
+          vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
+        }
       }
     }, [canvasSize, vmml]);
     react.useEffect(() => {