@versa_ai/vmml-editor 1.0.20 → 1.0.23

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.20 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.23 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     113.85 KB
-CJS dist\index.js.map 215.74 KB
-CJS ⚡️ Build success in 1007ms
-ESM dist\index.mjs     112.22 KB
-ESM dist\index.mjs.map 215.45 KB
-ESM ⚡️ Build success in 1007ms
-DTS ⚡️ Build success in 2220ms
+ESM dist\index.mjs     113.36 KB
+ESM dist\index.mjs.map 217.80 KB
+ESM ⚡️ Build success in 820ms
+CJS dist\index.js     115.00 KB
+CJS dist\index.js.map 218.10 KB
+CJS ⚡️ Build success in 821ms
+DTS ⚡️ Build success in 2291ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1323,7 +1323,7 @@ var EditorCanvas = react.forwardRef(
         const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth } = clip.textClip;
         const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
         const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
-        const strokeW = strokeWidth ? strokeWidth * 22 / fontSize : 0;
+        const strokeW = strokeWidth * 26 * 1.5 / fontSize;
         const left = canvasSize.width * posParam.centerX;
         const top = canvasSize.height * posParam.centerY;
         const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
@@ -1356,6 +1356,7 @@ var EditorCanvas = react.forwardRef(
             angle: posParam.rotationZ,
             originX: "center",
             originY: "center",
+            objectCaching: false,
             clipData: {
               id: clip.id,
               inPoint: clip.inPoint,
@@ -1406,9 +1407,10 @@ var EditorCanvas = react.forwardRef(
       if (lower.includes(".ttf")) return "truetype";
       return null;
     };
-    const embedFontInSVG = async (svgString, url) => {
+    const embedFontInSVG = async (svgString, url, fontBase64) => {
       if (url) {
-        const res = await vmmlUtils.urlToBlob({ 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}')`;
@@ -1424,7 +1426,22 @@ var EditorCanvas = react.forwardRef(
       }
       return svgString;
     };
+    const loadFont = async (url) => {
+      if (!url) return null;
+      try {
+        const base64 = await vmmlUtils.urlToBlob({ url });
+        const fontFamilyName = getFontFamilyName(url);
+        const format = detectFontFormat(url);
+        const fontFace = new FontFace(fontFamilyName, `url(${base64})${format ? ` format('${format}')` : ""}`);
+        await fontFace.load();
+        document.fonts.add(fontFace);
+        return base64;
+      } catch (e) {
+        return null;
+      }
+    };
     const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo }) => {
+      const fontBase64 = await loadFont(fontAssetUrl);
       const container = document.createElement("div");
       container.style.backgroundColor = bgColor;
       container.style.boxSizing = "content-box";
@@ -1434,16 +1451,30 @@ var EditorCanvas = react.forwardRef(
       const fontFamily = fontAssetUrl ? getFontFamilyName(fontAssetUrl) : "sansMedium";
       lines.forEach((line) => {
         const p = document.createElement("p");
-        p.style.color = textColor;
+        p.style.position = "relative";
         p.style.fontSize = "22px";
         p.style.lineHeight = "22px";
         p.style.fontFamily = fontFamily;
         p.style.whiteSpace = "nowrap";
-        p.style.padding = "0";
         p.style.margin = "0";
-        p.style.webkitTextStrokeWidth = `${strokeW ?? 0}px`;
-        p.style.webkitTextStrokeColor = stColor;
-        p.textContent = line || " ";
+        p.style.padding = "0";
+        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.left = "0";
+        stroke.style.top = "0";
+        stroke.style.color = "transparent";
+        stroke.style.webkitTextStrokeWidth = `${strokeW}px`;
+        stroke.style.webkitTextStrokeColor = stColor;
+        stroke.style.zIndex = "-1";
+        p.appendChild(fill);
+        p.appendChild(stroke);
         container.appendChild(p);
       });
       container.style.padding = "6.5px 7px 6.5px 7px";
@@ -1452,7 +1483,7 @@ var EditorCanvas = react.forwardRef(
       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);
+      const base64Image = await embedFontInSVG(dataurl, fontAssetUrl, fontBase64);
       return { base64Image, height, width };
     };
     const createText = async ({ textContent, bgColor, textColor, position, textBasicInfo, id }, fc2) => {