@versa_ai/vmml-editor 1.0.40 → 1.0.42

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.40 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.42 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     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
+ESM dist\index.mjs     119.77 KB
+ESM dist\index.mjs.map 233.03 KB
+ESM ⚡️ Build success in 786ms
+CJS dist\index.js     121.41 KB
+CJS dist\index.js.map 233.32 KB
+CJS ⚡️ Build success in 787ms
+DTS ⚡️ Build success in 2403ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -617,6 +617,20 @@ var VmmlConverter = class {
       rotationY: _rotationY
     };
   }
+  findClip(id) {
+    const tracks = this.vmml.template.tracks || [];
+    const isString = typeof id === "string";
+    const ids = isString ? [id] : id;
+    const list = [];
+    tracks.forEach((track) => {
+      track.clips.forEach((clip) => {
+        if (ids == null ? void 0 : ids.includes(clip.id)) {
+          list.push(clip);
+        }
+      });
+    });
+    return list;
+  }
   /**
    * 转换 TextClip
    * @param fObj - 画布fObj
@@ -624,6 +638,7 @@ var VmmlConverter = class {
   addTextClip(fObj) {
     console.log("addTextClip fObj", fObj);
     const posParam = this.setPosParam(fObj);
+    console.log(fObj, "fObj>>>>");
     const { clipData: { id, inPoint, text, textColor, bgColor } } = fObj;
     const { template: { duration } } = this.vmml;
     const clips = [];
@@ -714,19 +729,7 @@ var VmmlConverter = class {
     const {
       clipData: { id, type, lineSpacing, originClip }
     } = fObj;
-    let existClip = null;
-    if (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);
-    }
+    const [existClip] = this.findClip(id);
     if (existClip) {
       !originClip && (existClip.fObj = fObj);
       if (type === "\u8868\u60C5\u5305") {
@@ -748,6 +751,32 @@ var VmmlConverter = class {
       }
     }
   }
+  updateTextClip(fObj, duration) {
+    console.log("updateClip fObj", fObj, this.tracks);
+    const posParam = this.setPosParam(fObj);
+    const {
+      clipData: { id }
+    } = fObj;
+    const [existClip] = this.findClip(id);
+    if (existClip) {
+      const { clipData: { text, textColor, bgColor } } = fObj;
+      const scale = this.fontSize / 22;
+      existClip.duration = duration;
+      console.log(bgColor, "bgColor>>>");
+      existClip.textClip = {
+        ...existClip.textClip,
+        posParam,
+        backgroundColor: this.toARGB(bgColor),
+        textContent: text,
+        textColor: this.toARGB(textColor),
+        dimension: {
+          width: Math.floor(fObj.width * scale),
+          height: Math.floor(fObj.height * scale)
+        }
+      };
+    }
+    console.log(this.vmml, "updateText>>>");
+  }
   /**
    * 删除 Clip
    * @param id - 实例 id
@@ -779,9 +808,11 @@ var VmmlConverter = class {
         }
       }
     }
+    console.log("\u5220\u9664\u4E4B\u540E\u7684vmml", this.vmml);
   }
   changeVmml(newVmml) {
     this.vmml = newVmml;
+    this.tracks = this.vmml.template.tracks;
   }
   //切换静音 视频/音频
   changeMute({ id, isMute }) {
@@ -1069,11 +1100,11 @@ var EditorCanvas = react.forwardRef(
         const ns = Math.floor((f ?? frame) / 30 * 1e6);
         const objects = fc.getObjects();
         objects.forEach((item) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d, _e;
           if (((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u6587\u5B57") {
             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", 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));
+            item.set("visible", ((_c = (_b = item == null ? void 0 : item.clipData) == null ? void 0 : _b.fileUrl) == null ? void 0 : _c.duration) > 0 && ns >= item.clipData.inPoint && ns < item.clipData.inPoint + ((_e = (_d = item.clipData) == null ? void 0 : _d.fileUrl) == null ? void 0 : _e.duration));
           }
         });
         fc.discardActiveObject();
@@ -1236,7 +1267,6 @@ 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();
@@ -1325,91 +1355,104 @@ var EditorCanvas = react.forwardRef(
       });
       window.dispatchEvent(event);
     };
+    const createTextObjs = async ({ strokeW, stColor, fontAssetUrl = null, letterSpace, bgColor, textContent, textBasicInfo, textColor }) => {
+      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 paddingX = 7;
+      const groupWidth = Math.max(...lines.map((l) => {
+        const temp = new fabric.fabric.Text(l || " ", { fontSize: 22, fontFamily, charSpacing: letterSpace, strokeWidth: strokeW ?? 0 });
+        return (temp == null ? void 0 : temp.width) ?? 0;
+      })) + paddingX * 2;
+      const groupHeight = lines.length * lineHeight;
+      const textObjs = [];
+      lines.forEach((line, idx) => {
+        const y = -groupHeight / 2 + lineHeight / 2 + idx * lineHeight;
+        let originX = "left";
+        let left = paddingX;
+        if (textBasicInfo.textAlign === "center") {
+          originX = "center";
+          left = 0;
+        } else if (textBasicInfo.textAlign === "right") {
+          originX = "right";
+          left = groupWidth - paddingX;
+        }
+        const strokeText = new fabric.fabric.Text(line || " ", {
+          fontFamily,
+          fontSize: 22,
+          fill: "transparent",
+          stroke: stColor,
+          strokeWidth: strokeW,
+          originX,
+          originY: "center",
+          left,
+          top: y,
+          charSpacing: letterSpace,
+          textAlign: "left",
+          objectCaching: false
+        });
+        const fillText = new fabric.fabric.Text(line || " ", {
+          fontFamily,
+          fontSize: 22,
+          fill: textColor,
+          stroke: "transparent",
+          originX,
+          originY: "center",
+          strokeWidth: 0,
+          left,
+          top: y,
+          charSpacing: letterSpace,
+          textAlign: "left",
+          objectCaching: false
+        });
+        textObjs.push(strokeText, fillText);
+      });
+      const bgRect = new fabric.fabric.Rect({
+        width: groupWidth,
+        height: groupHeight + 13,
+        // padddingY: 6.5
+        fill: bgColor,
+        originX: "center",
+        originY: "center",
+        rx: 5,
+        ry: 5
+      });
+      return {
+        objects: [bgRect, ...textObjs],
+        fontFamily
+      };
+    };
     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;
+        let { 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 strokeW = strokeColor && strokeWidth ? strokeWidth * 30 * 1.5 / fontSize : 0;
         const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
+        const letterSpace = letterSpacing * 22 / fontSize * 45;
         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], {
+        const { fontFamily, objects } = await createTextObjs({ strokeW, stColor, fontAssetUrl, letterSpace, bgColor, textContent, textBasicInfo, textColor: textFill });
+        const group = new fabric.fabric.Group([...objects], {
           left,
           top,
           scaleX,
@@ -1453,91 +1496,6 @@ var EditorCanvas = react.forwardRef(
         resolve(group);
       });
     };
-    const createTextFromClip = async (clip, fc2) => {
-      return new Promise(async (resolve) => {
-        const canvas = fc || fc2;
-        if (!canvas) {
-          resolve(null);
-          return;
-        }
-        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 strokeW = strokeWidth * 26 * 1.5 / fontSize;
-        const letterSpace = letterSpacing * 22 / fontSize;
-        const left = canvasSize.width * posParam.centerX;
-        const top = canvasSize.height * posParam.centerY - 2;
-        const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
-        const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
-        const isAiError = textContent === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor === "#00000000";
-        const textFill = vmmlUtils.argbToRgba(isAiError ? "#ffffffff" : textColor || "#ffffffff");
-        const textBasicInfo = {
-          isBack: backgroundColor ? true : false,
-          colorValue: textFill,
-          colorName: "custom",
-          textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left"
-        };
-        const textImgData = await createTextImg({ textContent, bgColor, stColor, strokeW, textColor: textFill, fontAssetUrl, textBasicInfo, letterSpacing: letterSpace });
-        const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
-        let fontMap = {};
-        try {
-          fontMap = fontJSON ? JSON.parse(fontJSON) : {};
-        } catch {
-          fontMap = {};
-        }
-        const fontFamily = fontMap[fontAssetUrl] || "";
-        fabric.fabric.Image.fromURL(textImgData.base64Image, (imgData) => {
-          imgData.set({
-            left,
-            top,
-            width: textImgData.width,
-            height: textImgData.height,
-            scaleX,
-            scaleY,
-            angle: posParam.rotationZ,
-            originX: "center",
-            originY: "center",
-            objectCaching: false,
-            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,
-              isAiError,
-              duration: clip.duration
-            }
-          });
-          imgData.on("selected", (options) => {
-            options.target.isSelected = -1;
-          });
-          imgData.on("moving", (options) => {
-            options.transform.target.isSelected = 0;
-          });
-          imgData.on("modified", () => {
-            const fObj = convertToJSON(imgData);
-            if (fObj.clipData.isAiError) {
-              fObj.clipData.textColor = "rgba(0, 0, 0, 0)";
-            }
-            if (isBatchModify) {
-              onBatchModify(fObj, canvas);
-            } else {
-              vmmlConverterRef.current.updateClip(fObj);
-            }
-          });
-          console.log("fabricjs>>>end>>>>>>>>>>>>");
-          resolve(imgData);
-        });
-      });
-    };
     const getFontFamilyName = (url) => {
       const filename = url.split("/").pop() || "";
       const name = filename.replace(/\.(ttf|otf|woff2?|eot)$/i, "");
@@ -1706,13 +1664,25 @@ var EditorCanvas = react.forwardRef(
       });
     };
     const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }) => {
-      const textImgData = await createTextImg({ textContent, bgColor, textColor, fontAssetUrl, textBasicInfo });
-      const target = fc.getObjects().find((item) => item.clipData.id === id);
-      target.setSrc(textImgData.base64Image, (img) => {
-        img.set({
+      var _a;
+      const target = fc.getObjects().find((item) => {
+        var _a2;
+        return ((_a2 = item.clipData) == null ? void 0 : _a2.id) === id;
+      });
+      const center = target.getCenterPoint();
+      const originClip = (_a = target.clipData) == null ? void 0 : _a.originClip;
+      if (originClip && (target == null ? void 0 : target.type) === "group") {
+        const objects = target.getObjects();
+        const strokeText = objects[1];
+        target._objects.length = 0;
+        const { objects: textObjects } = await createTextObjs({ strokeW: strokeText.strokeWidth, stColor: "", fontAssetUrl, letterSpace: strokeText.charSpacing, bgColor, textContent, textBasicInfo, textColor });
+        textObjects.forEach((obj) => {
+          target.addWithUpdate(obj);
+        });
+        target.set({
           visible: true,
           clipData: {
-            ...img.clipData,
+            ...target.clipData,
             textBasicInfo,
             textColor,
             text: textContent,
@@ -1720,10 +1690,20 @@ var EditorCanvas = react.forwardRef(
             isAiError: false
           }
         });
-        img.setCoords();
-        fc.renderAll();
-        vmmlConverterRef.current.updateClip(convertToJSON(img));
-      });
+        target._calcBounds();
+        target._updateObjectsCoords();
+        target.setPositionByOrigin(center, "center", "center");
+        originClip.textClip = {
+          ...originClip.textClip,
+          textContent,
+          backgroundColor: bgColor,
+          textColor,
+          strokeColor: ""
+        };
+        target.setCoords();
+        fc == null ? void 0 : fc.requestRenderAll();
+        vmmlConverterRef.current.updateClip(convertToJSON(target));
+      }
     };
     const changeObjectVisible = (id, visible = true) => {
       const target = fc.getObjects().find((item) => item.clipData.id === id);
@@ -1747,7 +1727,7 @@ var EditorCanvas = react.forwardRef(
         top: canvasSize.top,
         display: showCanvas ? "block" : "none"
       };
-    }, [showCanvas]);
+    }, [showCanvas, canvasSize]);
     react.useEffect(() => {
       if (!fc && canvasSize.width) {
         initCanvas();
@@ -1774,7 +1754,9 @@ var EditorCanvas = react.forwardRef(
     }, [fc, dragState]);
     react.useEffect(() => {
       if (canvasSize.width && canvasSize.height) {
-        if (vmmlConverterRef.current) ; else {
+        if (vmmlConverterRef.current) {
+          vmmlConverterRef.current.changeVmml(vmml);
+        } else {
           vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
         }
       }
@@ -1810,7 +1792,6 @@ var EditorCanvas = react.forwardRef(
       getfcObject,
       checkObjectInPoint,
       createImageFromClip,
-      createTextFromClip,
       changeObjectVisible,
       getCanvasCtx
     }), [fc, frame]);
@@ -2593,7 +2574,7 @@ var EditorFn = ({
   pauseWhenBuffering = false,
   isBatchModify = false,
   textWarapCenter = false,
-  hideConfig = null
+  hideConfig = { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
   // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 }, ref) => {
   var _a;
@@ -2801,6 +2782,10 @@ var EditorFn = ({
   const onPause = () => {
     setShowCanvas(true);
     setIsPlaying(false);
+    if (canvasRef.current) {
+      const { current: canvasC } = canvasRef;
+      canvasC.checkObjectInPoint();
+    }
   };
   const onWaiting = () => {
     var _a2, _b;
@@ -2838,7 +2823,6 @@ var EditorFn = ({
     if (fcTracks.length) {
       const clips = fcTracks.map((item) => item.clips).flat().filter((item) => Reflect.has(item, "fObj"));
       const fObjs = clips.map((item) => item.fObj);
-      setInitFcObjs(fObjs);
       fObjs.forEach((item) => {
         onVideoChange(item.clipData);
       });