@versa_ai/vmml-editor 1.0.20 → 1.0.22

package/dist/index.mjs

@@ -1321,7 +1321,7 @@ var EditorCanvas = 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 ? argbToRgba(backgroundColor) : "transparent";
@@ -1354,6 +1354,7 @@ var EditorCanvas = forwardRef(
             angle: posParam.rotationZ,
             originX: "center",
             originY: "center",
+            objectCaching: false,
             clipData: {
               id: clip.id,
               inPoint: clip.inPoint,
@@ -1432,16 +1433,30 @@ var EditorCanvas = 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";