@versa_ai/vmml-editor 1.0.16 → 1.0.18

package/dist/index.mjs

@@ -575,8 +575,9 @@ var VmmlConverter = class {
   }
   //更新位置
   setPosParam(fObj) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const {
-      clipData: { type },
+      clipData: { type, originClip },
       centerPoint,
       scaleX,
       scaleY,
@@ -584,24 +585,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
     };
   }
   /**
@@ -1195,15 +1207,6 @@ var EditorCanvas = forwardRef(
       }
     };
     const createEditObjes = async (canvas, time) => {
-      const allObjects = canvas.getObjects();
-      const toRemove = [];
-      allObjects.forEach((obj) => {
-        var _a;
-        if ((_a = obj == null ? void 0 : obj.clipData) == null ? void 0 : _a.originClip) {
-          toRemove.push(obj);
-        }
-      });
-      toRemove.forEach((obj) => canvas.remove(obj));
       const promises = editClips.map((clip) => {
         if (clip.videoClip) {
           return createImageFromClip(clip);
@@ -1315,12 +1318,14 @@ var EditorCanvas = forwardRef(
         }
         const { width, height } = vmml.template.dimension;
         const fontSize = 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 ? argbToRgba(backgroundColor) : "transparent";
+        const stColor = strokeColor ? argbToRgba(strokeColor) : "transparent";
         const isAiError = textContent === "\u8BF7\u8F93\u5165\u6587\u6848" && textColor === "#00000000";
         const textFill = argbToRgba(isAiError ? "#ffffffff" : textColor || "#ffffffff");
         const textBasicInfo = {
@@ -1329,7 +1334,7 @@ var EditorCanvas = 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 {
@@ -1417,7 +1422,7 @@ var EditorCanvas = 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";
@@ -1433,6 +1438,9 @@ var EditorCanvas = 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);
       });
@@ -1579,6 +1587,9 @@ var EditorCanvas = forwardRef(
         }
       }
     }, [fc]);
+    const getCanvasCtx = () => {
+      return fc;
+    };
     useImperativeHandle(ref, () => ({
       createImage,
       createText,
@@ -1592,8 +1603,9 @@ var EditorCanvas = forwardRef(
       checkObjectInPoint,
       createImageFromClip,
       createTextFromClip,
-      changeObjectVisible
-    }));
+      changeObjectVisible,
+      getCanvasCtx
+    }), [fc]);
     const getActions = () => {
       if (history) {
         return history.getActionType();
@@ -2417,10 +2429,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) {
@@ -2430,7 +2444,7 @@ var EditorFn = ({
         }
       }
     }
-    setShowCanvas(false);
+    setShowCanvas(show);
     setLoading(false);
   };
   const onClickMain = () => {
@@ -2571,9 +2585,11 @@ var EditorFn = ({
     setFrame(e.detail.frame);
   };
   const onPlay = () => {
+    setShowCanvas(false);
     setIsPlaying(true);
   };
   const onPause = () => {
+    setShowCanvas(true);
     setIsPlaying(false);
   };
   const onWaiting = () => {
@@ -2711,13 +2727,14 @@ var EditorFn = ({
     }
   }, [dragState]);
   const updateVmml = (v) => {
-    var _a2;
+    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 convertedVmml = convertVmmlTextScaleByForbidden(v);
     setVmmlState(convertedVmml);
-    setDurationInFrames(getFrames(((_a2 = v == null ? void 0 : v.template) == null ? void 0 : _a2.duration) || 1, fps));
+    setDurationInFrames(getFrames(((_c = v == null ? void 0 : v.template) == null ? void 0 : _c.duration) || 1, fps));
     playerCurrent.setVmml(convertedVmml, pauseFrame);
     setRefreshEdit(Date.now());
     if (canvasCurrent) {