@versa_ai/vmml-editor 1.0.44 → 1.0.47

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.44 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.47 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.
 
@@ -66,7 +67,6 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-DTS Build start
 
  WARN  ▲ [WARNING] Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
 
@@ -124,12 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-CJS dist\index.js     121.53 KB
-CJS dist\index.js.map 233.39 KB
-CJS ⚡️ Build success in 1082ms
-ESM dist\index.mjs     119.73 KB
-ESM dist\index.mjs.map 233.08 KB
-ESM ⚡️ Build success in 1083ms
-DTS ⚡️ Build success in 2236ms
+ESM dist\index.mjs     115.63 KB
+ESM dist\index.mjs.map 224.90 KB
+ESM ⚡️ Build success in 918ms
+CJS dist\index.js     117.40 KB
+CJS dist\index.js.map 225.19 KB
+CJS ⚡️ Build success in 918ms
+DTS ⚡️ Build success in 2182ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -8,7 +8,6 @@ var remotion = require('remotion');
 var jsxRuntime = require('react/jsx-runtime');
 var fabric = require('fabric');
 var uuid = require('uuid');
-var domToImage = require('dom-to-image');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -641,7 +640,6 @@ var VmmlConverter = class {
    * @param fObj - 画布fObj
    */
   addTextClip(fObj) {
-    console.log("addTextClip fObj", fObj);
     const posParam = this.setPosParam(fObj);
     const { clipData: { id, inPoint, text, textColor, bgColor } } = fObj;
     const { template: { duration } } = this.vmml;
@@ -684,14 +682,12 @@ var VmmlConverter = class {
     } else {
       editorTrack.clips.push(tClipData);
     }
-    console.log("addTextClip \u6700\u7EC8vmml", this.vmml);
   }
   /**
    * 转换 VideoClip
    * @param fObj - 画布fObj
    */
   addVideoClip(fObj) {
-    console.log("addVideoClip fObj", fObj);
     const clips = [];
     const editorTrack = this.tracks.find((track) => track.editorType === "\u8868\u60C5\u5305");
     const clipData = this.loadClipData(fObj);
@@ -721,14 +717,12 @@ var VmmlConverter = class {
         }
       }
     }
-    console.log("addVideoClip \u6700\u7EC8vmml", this.vmml);
   }
   /**
    * 更新 clip
    * @param fObj - 画布fObj
    */
   updateClip(fObj) {
-    console.log("updateClip fObj", fObj, this.tracks);
     const posParam = this.setPosParam(fObj);
     const {
       clipData: { id, type, lineSpacing, originClip }
@@ -756,7 +750,6 @@ var VmmlConverter = class {
     }
   }
   updateTextClip(fObj, duration) {
-    console.log("updateClip fObj", fObj, this.tracks);
     const posParam = this.setPosParam(fObj);
     const {
       clipData: { id }
@@ -766,7 +759,6 @@ var VmmlConverter = class {
       const { clipData: { text, textColor, bgColor } } = fObj;
       const scale = this.fontSize / 22;
       existClip.duration = duration;
-      console.log(bgColor, "bgColor>>>");
       existClip.textClip = {
         ...existClip.textClip,
         posParam,
@@ -779,7 +771,6 @@ var VmmlConverter = class {
         }
       };
     }
-    console.log(this.vmml, "updateText>>>");
   }
   /**
    * 删除 Clip
@@ -807,7 +798,6 @@ var VmmlConverter = class {
         }
       }
     }
-    console.log("\u5220\u9664\u4E4B\u540E\u7684vmml", this.vmml);
   }
   changeVmml(newVmml) {
     this.vmml = newVmml;
@@ -824,7 +814,6 @@ var VmmlConverter = class {
         editorTrack.clips[index + 1].audioClip.volume = volume;
       }
     }
-    console.log("changeMute \u6700\u7EC8Vmml", this.vmml);
   }
   //加载clip数据
   loadClipData(fObj) {
@@ -1510,25 +1499,6 @@ var EditorCanvas = react.forwardRef(
       if (lower.includes(".ttf")) return "truetype";
       return null;
     };
-    const embedFontInSVG = async (svgString, url, fontBase64) => {
-      if (url) {
-        let res = fontBase64;
-        if (!res) await vmmlUtils.urlToBlob({ url });
-        const format = detectFontFormat(url);
-        const fontFamilyName = getFontFamilyName(url);
-        const srcValue = format ? `url('${res}') format('${format}')` : `url('${res}')`;
-        const fontFace = `
-        @font-face {
-          font-family: '${fontFamilyName}';
-          src: ${srcValue};
-        }
-      `;
-        const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
-        const result = svgString.replace("</svg>", `${styleElement}</svg>`);
-        return result;
-      }
-      return svgString;
-    };
     const loadFont = async (url) => {
       if (!url) return null;
       if (fontCacheRef.current.has(url)) {
@@ -1551,117 +1521,50 @@ var EditorCanvas = react.forwardRef(
       fontCacheRef.current.set(url, loadPromise);
       return loadPromise;
     };
-    const setTextAlign = (p, stroke, direction) => {
-      if (direction === "center") {
-        p.style.justifyContent = "center";
-        stroke.style.left = "50%";
-        stroke.style.top = "50%";
-        stroke.style.transform = "translate(-50%, -50%)";
-      }
-      if (direction === "left") {
-        stroke.style.left = "0";
-        stroke.style.top = "0";
-        stroke.style.transform = "none";
-      }
-      if (direction === "right") {
-        p.style.justifyContent = "flex-end";
-        stroke.style.right = "0";
-        stroke.style.top = "50%";
-        stroke.style.transform = "translateY(-50%)";
-      }
-    };
-    const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo, letterSpacing }) => {
-      const fontBase64 = await loadFont(fontAssetUrl);
-      const container = document.createElement("div");
-      container.style.backgroundColor = bgColor;
-      container.style.boxSizing = "content-box";
-      container.style.display = "inline-block";
-      container.style.textAlign = textBasicInfo.textAlign || "left";
-      const lines = textContent.split("\n");
-      const fontFamily = fontAssetUrl ? getFontFamilyName(fontAssetUrl) : "sansMedium";
-      lines.forEach((line) => {
-        const p = document.createElement("p");
-        p.style.position = "relative";
-        p.style.display = "flex";
-        p.style.fontSize = "22px";
-        p.style.lineHeight = "22px";
-        p.style.fontFamily = fontFamily;
-        p.style.whiteSpace = "nowrap";
-        p.style.margin = "0";
-        p.style.padding = "0";
-        if (letterSpacing) p.style.letterSpacing = `${letterSpacing}px`;
-        p.style.zIndex = "2";
-        const fill = document.createElement("span");
-        fill.textContent = line || " ";
-        fill.style.color = textColor;
-        fill.style.position = "relative";
-        fill.style.zIndex = "1";
-        const stroke = document.createElement("span");
-        stroke.textContent = line || " ";
-        stroke.style.position = "absolute";
-        stroke.style.color = "transparent";
-        stroke.style.webkitTextStrokeWidth = `${strokeW}px`;
-        stroke.style.webkitTextStrokeColor = stColor;
-        let dr = textBasicInfo.textAlign || "left";
-        if (textWarapCenter) dr = "center";
-        setTextAlign(p, stroke, dr);
-        p.appendChild(fill);
-        p.appendChild(stroke);
-        container.appendChild(p);
-      });
-      container.style.padding = "6.5px 7px 6.5px 7px";
-      container.style.borderRadius = "5px";
-      document.body.appendChild(container);
-      const { width, height } = container == null ? void 0 : container.getBoundingClientRect();
-      const dataurl = await domToImage.toSvg(container);
-      document.body.removeChild(container);
-      const base64Image = await embedFontInSVG(dataurl, fontAssetUrl, fontBase64);
-      return { base64Image, height, width };
-    };
     const createText = async ({ textContent, bgColor, textColor, position, textBasicInfo, id }, fc2) => {
       const canvas = fc || fc2;
       const { left, top, angle, scaleX, scaleY, zoomX, zoomY } = position;
-      const textImgData = await createTextImg({ textContent, bgColor, textColor, textBasicInfo });
+      const { objects } = await createTextObjs({ strokeW: 0, stColor: "", fontAssetUrl: null, letterSpace: 0, bgColor, textContent, textBasicInfo, textColor });
       return new Promise((resolve, reject) => {
-        fabric.fabric.Image.fromURL(textImgData.base64Image, (imgData) => {
-          imgData.set({
-            left,
-            top,
-            angle,
-            width: textImgData.width,
-            height: textImgData.height,
-            scaleX,
-            scaleY,
-            clipData: {
-              id: uuid.v4(),
-              inPoint: Math.floor(frame / 30 * 1e6),
-              inFrame: frame,
-              type: "\u6587\u5B57",
-              textBasicInfo,
-              textColor,
-              text: textContent,
-              bgColor
-            }
-          });
-          imgData.on("selected", (options) => {
-            options.target.isSelected = -1;
-          });
-          imgData.on("moving", (options) => {
-            options.transform.target.isSelected = 0;
-          });
-          imgData.on("modified", () => {
-            const fObj = convertToJSON(imgData);
-            vmmlConverterRef.current.updateClip(fObj);
-          });
-          canvas.centerObject(imgData);
-          canvas.add(imgData);
-          setTimeout(() => {
-            canvas.renderAll();
-          });
-          onVideoChange(imgData.clipData);
-          vmmlConverterRef.current.addTextClip(convertToJSON(imgData));
-          resolve(true);
+        const group = new fabric.fabric.Group([...objects], {
+          left,
+          top,
+          scaleX,
+          scaleY,
+          angle,
+          originX: "center",
+          originY: "center",
+          clipData: {
+            duration: vmmlConverterRef.current.vmml.template.duration,
+            id: uuid.v4(),
+            inPoint: Math.floor(frame / 30 * 1e6),
+            inFrame: frame,
+            type: "\u6587\u5B57",
+            textBasicInfo,
+            textColor,
+            text: textContent,
+            bgColor,
+            visible: true
+          }
+        });
+        group.on("selected", (options) => {
+          options.target.isSelected = -1;
+        });
+        group.on("moving", (options) => {
+          options.transform.target.isSelected = 0;
+        });
+        group.on("modified", () => {
+          const fObj = convertToJSON(group);
+          vmmlConverterRef.current.updateClip(fObj);
+        });
+        canvas.centerObject(group);
+        canvas.add(group);
+        setTimeout(() => {
+          canvas.renderAll();
         });
+        onVideoChange((group == null ? void 0 : group.clipData) ?? null);
+        vmmlConverterRef.current.addTextClip(convertToJSON(group));
+        resolve(true);
       });
     };
     const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }) => {
@@ -2869,7 +2772,7 @@ var EditorFn = ({
     if (editableArray.length && (vmmlState == null ? void 0 : vmmlState.template)) {
       initCanEditClips(vmmlState.template.tracks);
     }
-  }, [editableArray, refreshEdit, vmmlState]);
+  }, [editableArray, vmmlState]);
   react.useEffect(() => {
     if (vmmlState) {
       initFcObjects(vmmlState.template.tracks);
@@ -2928,7 +2831,6 @@ var EditorFn = ({
     setFrame(currentFrame);
     const convertedVmml = v;
     const isSame = JSON.stringify(convertedVmml) == JSON.stringify(vmmlState);
-    console.log(isSame, "isSamew>>>");
     if (!isSame) {
       const currentV = cloneDeep__default.default(convertedVmml);
       (_e = (_d = canvasCurrent == null ? void 0 : canvasCurrent.getCanvasCtx()) == null ? void 0 : _d.clear) == null ? void 0 : _e.call(_d);