@versa_ai/vmml-editor 1.0.41 → 1.0.43

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.41 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.43 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
 
 
 
-CJS dist\index.js     122.59 KB
-CJS dist\index.js.map 234.64 KB
-CJS ⚡️ Build success in 868ms
-ESM dist\index.mjs     120.90 KB
-ESM dist\index.mjs.map 234.34 KB
-ESM ⚡️ Build success in 868ms
-DTS ⚡️ Build success in 1828ms
+ESM dist\index.mjs     119.67 KB
+ESM dist\index.mjs.map 232.93 KB
+ESM ⚡️ Build success in 941ms
+CJS dist\index.js     121.47 KB
+CJS dist\index.js.map 233.24 KB
+CJS ⚡️ Build success in 942ms
+DTS ⚡️ Build success in 1928ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var vmmlPlayer = require('@versa_ai/vmml-player');
+var cloneDeep = require('lodash.clonedeep');
 var react = require('react');
 var vmmlUtils = require('@versa_ai/vmml-utils');
 var remotion = require('remotion');
@@ -9,6 +10,10 @@ var fabric = require('fabric');
 var uuid = require('uuid');
 var domToImage = require('dom-to-image');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cloneDeep__default = /*#__PURE__*/_interopDefault(cloneDeep);
+
 // src/index.tsx
 
 // src/assets/css/index.scss
@@ -750,6 +755,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
@@ -757,13 +788,8 @@ var VmmlConverter = class {
    */
   deleteClip({ id, type, originClip }) {
     if (originClip) {
-      for (const track of this.tracks) {
-        const clip = (track.clips || []).find((c) => c.id === originClip.id);
-        if (clip) {
-          clip.duration = 0;
-          break;
-        }
-      }
+      const [existClip] = this.findClip(id);
+      existClip.duration = 0;
     } else {
       const editorTrack = this.tracks.find((track) => track.editorType === type);
       const index = editorTrack.clips.findIndex((item) => item.id === id);
@@ -781,9 +807,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 }) {
@@ -1071,11 +1099,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();
@@ -1238,7 +1266,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();
@@ -1327,6 +1354,82 @@ 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) => {
+        let options = { fontSize: 22, fontFamily, strokeWidth: strokeW ?? 0 };
+        if (letterSpace) options.charSpacing = letterSpace;
+        let temp = new fabric.fabric.Text(l, options);
+        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 = textBasicInfo.textAlign;
+        let left = paddingX;
+        if (originX === "center") {
+          left = groupWidth / 2;
+        } else if (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,
+          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,
+          textAlign: "left",
+          objectCaching: false
+        });
+        if (letterSpace) {
+          fillText.set({ charSpacing: letterSpace });
+          strokeText.set({ charSpacing: letterSpace });
+        }
+        textObjs.push(strokeText, fillText);
+      });
+      const bgRect = new fabric.fabric.Rect({
+        width: groupWidth,
+        height: groupHeight + 13,
+        // padddingY: 6.5
+        fill: bgColor,
+        originX: "left",
+        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;
@@ -1339,79 +1442,18 @@ var EditorCanvas = react.forwardRef(
         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 ? letterSpacing * 22 / fontSize * 45 : 0;
         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,
@@ -1455,91 +1497,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, "");
@@ -1708,13 +1665,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,
@@ -1722,10 +1691,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);
@@ -1749,7 +1728,7 @@ var EditorCanvas = react.forwardRef(
         top: canvasSize.top,
         display: showCanvas ? "block" : "none"
       };
-    }, [showCanvas]);
+    }, [showCanvas, canvasSize]);
     react.useEffect(() => {
       if (!fc && canvasSize.width) {
         initCanvas();
@@ -1814,7 +1793,6 @@ var EditorCanvas = react.forwardRef(
       getfcObject,
       checkObjectInPoint,
       createImageFromClip,
-      createTextFromClip,
       changeObjectVisible,
       getCanvasCtx
     }), [fc, frame]);
@@ -2597,7 +2575,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;
@@ -2805,6 +2783,10 @@ var EditorFn = ({
   const onPause = () => {
     setShowCanvas(true);
     setIsPlaying(false);
+    if (canvasRef.current) {
+      const { current: canvasC } = canvasRef;
+      canvasC.checkObjectInPoint();
+    }
   };
   const onWaiting = () => {
     var _a2, _b;
@@ -2842,7 +2824,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);
       });
@@ -2945,9 +2926,8 @@ var EditorFn = ({
     if (!playing) needPlay.current = false;
     const currentFrame = checkFrame ?? (((_c = player == null ? void 0 : player.getCurrentFrame) == null ? void 0 : _c.call(player)) ?? frame ?? pauseFrame);
     setFrame(currentFrame);
-    const convertedVmml = v;
+    const convertedVmml = cloneDeep__default.default(v);
     const isSame = JSON.stringify(convertedVmml) == JSON.stringify(vmmlState);
-    console.log(isSame, "VMML\u662F\u5426\u76F8\u540C", convertedVmml, vmmlState);
     if (!isSame) {
       (_e = (_d = canvasCurrent == null ? void 0 : canvasCurrent.getCanvasCtx()) == null ? void 0 : _d.clear) == null ? void 0 : _e.call(_d);
       setVmmlState(convertedVmml);