@versa_ai/vmml-editor 1.0.17 → 1.0.18

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.17 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.18 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
 
 
 
-ESM dist\index.mjs     110.95 KB
-ESM dist\index.mjs.map 213.03 KB
-ESM ⚡️ Build success in 1002ms
-CJS dist\index.js     112.57 KB
-CJS dist\index.js.map 213.32 KB
-CJS ⚡️ Build success in 1002ms
-DTS ⚡️ Build success in 2326ms
+CJS dist\index.js     113.85 KB
+CJS dist\index.js.map 215.74 KB
+CJS ⚡️ Build success in 812ms
+ESM dist\index.mjs     112.22 KB
+ESM dist\index.mjs.map 215.45 KB
+ESM ⚡️ Build success in 813ms
+DTS ⚡️ Build success in 2001ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -577,8 +577,9 @@ var VmmlConverter = class {
   }
   //更新位置
   setPosParam(fObj) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const {
-      clipData: { type },
+      clipData: { type, originClip },
       centerPoint,
       scaleX,
       scaleY,
@@ -586,24 +587,35 @@ var VmmlConverter = class {
       width,
       height
     } = fObj;
-    let _scaleX, _scaleY, _centerX, _centerY;
+    let _scaleX, _scaleY, _centerX, _centerY, _scaleZ, _centerZ, _rotationX, _rotationY;
+    let key = "";
     if (type === "\u6587\u5B57") {
       _scaleX = 22 * scaleX * this.widthScale / this.fontSize;
       _scaleY = 22 * scaleY * this.heightScale / this.fontSize;
       _centerX = centerPoint.x / this.canvasSize.width;
       _centerY = centerPoint.y / this.canvasSize.height;
+      key = "textClip";
     } else if (type === "\u8868\u60C5\u5305") {
       _scaleX = width * scaleX * this.widthScale / width;
       _scaleY = height * scaleY * this.heightScale / height;
       _centerX = centerPoint.x / this.canvasSize.width;
       _centerY = centerPoint.y / this.canvasSize.height;
+      key = "videoClip";
     }
+    _scaleZ = ((_b = (_a = originClip == null ? void 0 : originClip[key]) == null ? void 0 : _a.posParam) == null ? void 0 : _b.scaleZ) ?? 1;
+    _centerZ = ((_d = (_c = originClip == null ? void 0 : originClip[key]) == null ? void 0 : _c.posParam) == null ? void 0 : _d.centerZ) ?? 0.5;
+    _rotationX = ((_f = (_e = originClip == null ? void 0 : originClip[key]) == null ? void 0 : _e.posParam) == null ? void 0 : _f.rotationX) ?? 0;
+    _rotationY = ((_h = (_g = originClip == null ? void 0 : originClip[key]) == null ? void 0 : _g.posParam) == null ? void 0 : _h.rotationY) ?? 0;
     return {
       scaleX: _scaleX,
       scaleY: _scaleY,
+      scaleZ: _scaleZ,
       centerX: _centerX,
       centerY: _centerY,
-      rotationZ: angle
+      centerZ: _centerZ,
+      rotationZ: angle,
+      rotationX: _rotationX,
+      rotationY: _rotationY
     };
   }
   /**
@@ -1308,12 +1320,14 @@ var EditorCanvas = react.forwardRef(
         }
         const { width, height } = vmml.template.dimension;
         const fontSize = vmmlUtils.getFontSize(width, height);
-        const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
+        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 left = canvasSize.width * posParam.centerX;
         const top = canvasSize.height * posParam.centerY;
         const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
+        const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
         const isAiError = textContent === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor === "#00000000";
         const textFill = vmmlUtils.argbToRgba(isAiError ? "#ffffffff" : textColor || "#ffffffff");
         const textBasicInfo = {
@@ -1322,7 +1336,7 @@ var EditorCanvas = react.forwardRef(
           colorName: "custom",
           textAlign: alignType === 1 ? "center" : alignType === 2 ? "right" : "left"
         };
-        const textImgData = await createTextImg({ textContent, bgColor, textColor: textFill, fontAssetUrl, textBasicInfo });
+        const textImgData = await createTextImg({ textContent, bgColor, stColor, strokeW, textColor: textFill, fontAssetUrl, textBasicInfo });
         const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
         let fontMap = {};
         try {
@@ -1410,7 +1424,7 @@ var EditorCanvas = react.forwardRef(
       }
       return svgString;
     };
-    const createTextImg = async ({ textContent, bgColor, textColor, fontAssetUrl = null, textBasicInfo }) => {
+    const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo }) => {
       const container = document.createElement("div");
       container.style.backgroundColor = bgColor;
       container.style.boxSizing = "content-box";
@@ -1426,6 +1440,9 @@ var EditorCanvas = react.forwardRef(
         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 || " ";
         container.appendChild(p);
       });
@@ -2414,10 +2431,12 @@ var EditorFn = ({
   const onPlayerReady = () => {
     const { current } = vmmlPlayerRef;
     vmmlFlag.current = false;
+    let show = false;
     if (current && current.playerRef) {
       setPlayer(current.playerRef);
       current.unmute();
       if (!once.current) {
+        show = true;
         once.current = true;
       } else {
         if (needPlay.current) {
@@ -2427,7 +2446,7 @@ var EditorFn = ({
         }
       }
     }
-    setShowCanvas(false);
+    setShowCanvas(show);
     setLoading(false);
   };
   const onClickMain = () => {
@@ -2568,9 +2587,11 @@ var EditorFn = ({
     setFrame(e.detail.frame);
   };
   const onPlay = () => {
+    setShowCanvas(false);
     setIsPlaying(true);
   };
   const onPause = () => {
+    setShowCanvas(true);
     setIsPlaying(false);
   };
   const onWaiting = () => {