@versa_ai/vmml-editor 1.0.38 → 1.0.39

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.39 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,6 +9,7 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
+DTS Build start
 
  WARN  ▲ [WARNING] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
 
@@ -123,13 +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
+CJS dist\index.js     122.27 KB
+CJS dist\index.js.map 233.66 KB
+CJS ⚡️ Build success in 839ms
+ESM dist\index.mjs     120.58 KB
+ESM dist\index.mjs.map 233.36 KB
+ESM ⚡️ Build success in 839ms
+DTS ⚡️ Build success in 2050ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1020,6 +1020,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,
@@ -1055,6 +1056,7 @@ var EditorCanvas = react.forwardRef(
       if (fc) {
         const ns = Math.floor((f ?? frame) / 30 * 1e6);
         const objects = fc.getObjects();
+        console.log(objects, "fc>>>>>>>>>>>>>>>>", frame);
         objects.forEach((item) => {
           var _a, _b, _c;
           if (((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u6587\u5B57") {
@@ -1213,7 +1215,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 +1225,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 +1314,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");
+        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 +1522,7 @@ var EditorCanvas = react.forwardRef(
               vmmlConverterRef.current.updateClip(fObj);
             }
           });
+          console.log("fabricjs>>>end>>>>>>>>>>>>");
           resolve(imgData);
         });
       });
@@ -1429,17 +1561,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") {