@versa_ai/vmml-editor 1.0.45 → 1.0.47

package/dist/index.mjs

@@ -6,7 +6,6 @@ import { interpolate } from 'remotion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { fabric } from 'fabric';
 import { v4 } from 'uuid';
-import { toSvg } from 'dom-to-image';
 
 // src/index.tsx
 
@@ -1494,25 +1493,6 @@ var EditorCanvas = forwardRef(
       if (lower.includes(".ttf")) return "truetype";
       return null;
     };
-    const embedFontInSVG = async (svgString, url, fontBase64) => {
-      if (url) {
-        let res = fontBase64;
-        if (!res) await 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)) {
@@ -1535,117 +1515,50 @@ var EditorCanvas = 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 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.Image.fromURL(textImgData.base64Image, (imgData) => {
-          imgData.set({
-            left,
-            top,
-            angle,
-            width: textImgData.width,
-            height: textImgData.height,
-            scaleX,
-            scaleY,
-            clipData: {
-              id: 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.Group([...objects], {
+          left,
+          top,
+          scaleX,
+          scaleY,
+          angle,
+          originX: "center",
+          originY: "center",
+          clipData: {
+            duration: vmmlConverterRef.current.vmml.template.duration,
+            id: 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 }) => {
@@ -2853,7 +2766,7 @@ var EditorFn = ({
     if (editableArray.length && (vmmlState == null ? void 0 : vmmlState.template)) {
       initCanEditClips(vmmlState.template.tracks);
     }
-  }, [editableArray, refreshEdit, vmmlState]);
+  }, [editableArray, vmmlState]);
   useEffect(() => {
     if (vmmlState) {
       initFcObjects(vmmlState.template.tracks);