@versa_ai/vmml-editor 1.0.45 → 1.0.48

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.45 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.48 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -66,7 +66,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 +123,13 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-ESM dist\index.mjs     119.17 KB
-ESM dist\index.mjs.map 232.29 KB
-ESM ⚡️ Build success in 1010ms
-CJS dist\index.js     120.97 KB
-CJS dist\index.js.map 232.60 KB
-CJS ⚡️ Build success in 1012ms
-DTS ⚡️ Build success in 2343ms
+DTS Build start
+ESM dist\index.mjs     115.85 KB
+ESM dist\index.mjs.map 225.42 KB
+ESM ⚡️ Build success in 914ms
+CJS dist\index.js     117.63 KB
+CJS dist\index.js.map 225.71 KB
+CJS ⚡️ Build success in 915ms
+DTS ⚡️ Build success in 1983ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/README.md

@@ -1 +1 @@
-# `@versa_ai/vmml-editor`
+# `@versa_ai/vmml-editor`

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 }; }
 
@@ -1345,6 +1344,8 @@ var EditorCanvas = react.forwardRef(
       window.dispatchEvent(event);
     };
     const createTextObjs = async ({ strokeW, stColor, fontAssetUrl = null, letterSpace, bgColor, textContent, textBasicInfo, textColor }) => {
+      const { width, height } = vmml.template.dimension;
+      const fontSize = vmmlUtils.getFontSize(width, height);
       let fontFamily = "sansMedium";
       if (fontAssetUrl) {
         const base64 = await loadFont(fontAssetUrl);
@@ -1355,7 +1356,9 @@ var EditorCanvas = react.forwardRef(
       }
       const lines = textContent.split("\n").filter((item) => item);
       const lineHeight = 22 + strokeW;
-      const paddingX = 7;
+      const paddingX = 60 * 22 / fontSize;
+      const paddingY = 50 * 22 / fontSize;
+      const round = 40 * 22 / fontSize;
       const groupWidth = Math.max(...lines.map((l) => {
         let options = { fontSize: 22, fontFamily, strokeWidth: strokeW ?? 0 };
         if (letterSpace) options.charSpacing = letterSpace;
@@ -1407,13 +1410,13 @@ var EditorCanvas = react.forwardRef(
       });
       const bgRect = new fabric.fabric.Rect({
         width: groupWidth,
-        height: groupHeight + 13,
+        height: groupHeight + paddingY * 2,
         // padddingY: 6.5
         fill: bgColor,
         originX: "left",
         originY: "center",
-        rx: 5,
-        ry: 5
+        rx: round,
+        ry: round
       });
       return {
         objects: [bgRect, ...textObjs],
@@ -1500,25 +1503,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)) {
@@ -1541,117 +1525,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 }) => {
@@ -2859,7 +2776,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);