@versa_ai/vmml-editor 1.0.24 → 1.0.26

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.24 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.26 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,7 +9,6 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-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
 
 
 
-CJS dist\index.js     115.04 KB
-CJS dist\index.js.map 218.17 KB
-CJS ⚡️ Build success in 3145ms
-ESM dist\index.mjs     113.40 KB
-ESM dist\index.mjs.map 217.88 KB
-ESM ⚡️ Build success in 3146ms
-DTS ⚡️ Build success in 2306ms
+DTS Build start
+CJS dist\index.js     115.30 KB
+CJS dist\index.js.map 218.69 KB
+CJS ⚡️ Build success in 705ms
+ESM dist\index.mjs     113.66 KB
+ESM dist\index.mjs.map 218.39 KB
+ESM ⚡️ Build success in 706ms
+DTS ⚡️ Build success in 1858ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1321,12 +1321,13 @@ var EditorCanvas = react.forwardRef(
         }
         const { width, height } = vmml.template.dimension;
         const fontSize = vmmlUtils.getFontSize(width, height);
-        const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth } = clip.textClip;
+        const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth, letterSpacing } = clip.textClip;
         const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
         const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
         const strokeW = strokeWidth * 26 * 1.5 / fontSize;
+        const letterSpace = letterSpacing * 22 / fontSize;
         const left = canvasSize.width * posParam.centerX;
-        const top = canvasSize.height * posParam.centerY;
+        const top = canvasSize.height * posParam.centerY - 2;
         const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
         const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
         const isAiError = textContent === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor === "#00000000";
@@ -1337,7 +1338,7 @@ var EditorCanvas = react.forwardRef(
           colorName: "custom",
           textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left"
         };
-        const textImgData = await createTextImg({ textContent, bgColor, stColor, strokeW, textColor: textFill, fontAssetUrl, textBasicInfo });
+        const textImgData = await createTextImg({ textContent, bgColor, stColor, strokeW, textColor: textFill, fontAssetUrl, textBasicInfo, letterSpacing: letterSpace });
         const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
         let fontMap = {};
         try {
@@ -1441,7 +1442,7 @@ var EditorCanvas = react.forwardRef(
         return null;
       }
     };
-    const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo }) => {
+    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;
@@ -1459,6 +1460,7 @@ var EditorCanvas = react.forwardRef(
         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 || " ";
@@ -2760,19 +2762,20 @@ var EditorFn = ({
       setPreviewState(false);
     }
   }, [dragState]);
-  const updateVmml = (v) => {
+  const updateVmml = (v, checkFrame) => {
     var _a2, _b, _c;
     const { current: playerCurrent } = vmmlPlayerRef;
     const { current: canvasCurrent } = canvasRef;
     if (!playerCurrent) return;
     (_b = (_a2 = canvasCurrent == null ? void 0 : canvasCurrent.getCanvasCtx()) == null ? void 0 : _a2.clear) == null ? void 0 : _b.call(_a2);
+    const currentFrame = checkFrame ?? pauseFrame;
     const convertedVmml = vmmlUtils.convertVmmlTextScaleByForbidden(v);
     setVmmlState(convertedVmml);
     setDurationInFrames(vmmlUtils.getFrames(((_c = v == null ? void 0 : v.template) == null ? void 0 : _c.duration) || 1, fps));
-    playerCurrent.setVmml(convertedVmml, pauseFrame);
+    playerCurrent.setVmml(convertedVmml, currentFrame);
     setRefreshEdit(Date.now());
     if (canvasCurrent) {
-      canvasCurrent.checkObjectInPoint(pauseFrame);
+      canvasCurrent.checkObjectInPoint(currentFrame);
     }
   };
   react.useImperativeHandle(