@versa_ai/vmml-editor 1.0.19 → 1.0.22

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.19 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.22 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     112.22 KB
-ESM dist\index.mjs.map 215.45 KB
-ESM ⚡️ Build success in 913ms
-CJS dist\index.js     113.85 KB
-CJS dist\index.js.map 215.74 KB
-CJS ⚡️ Build success in 915ms
-DTS ⚡️ Build success in 2049ms
+DTS Build start
+CJS dist\index.js     114.41 KB
+CJS dist\index.js.map 216.82 KB
+CJS ⚡️ Build success in 685ms
+ESM dist\index.mjs     112.78 KB
+ESM dist\index.mjs.map 216.53 KB
+ESM ⚡️ Build success in 685ms
+DTS ⚡️ Build success in 2259ms
 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,
@@ -1434,16 +1435,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";