@versa_ai/vmml-editor 1.0.16 → 1.0.18

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.16 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
@@ -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.
 
@@ -67,6 +66,7 @@ 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 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-ESM dist\index.mjs     111.04 KB
-ESM dist\index.mjs.map 213.31 KB
-ESM ⚡️ Build success in 1139ms
-CJS dist\index.js     112.66 KB
-CJS dist\index.js.map 213.61 KB
-CJS ⚡️ Build success in 1141ms
-DTS ⚡️ Build success in 2678ms
+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
     };
   }
   /**
@@ -1197,15 +1209,6 @@ var EditorCanvas = react.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);
@@ -1317,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 = {
@@ -1331,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 {
@@ -1419,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";
@@ -1435,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);
       });
@@ -1581,6 +1589,9 @@ var EditorCanvas = react.forwardRef(
         }
       }
     }, [fc]);
+    const getCanvasCtx = () => {
+      return fc;
+    };
     react.useImperativeHandle(ref, () => ({
       createImage,
       createText,
@@ -1594,8 +1605,9 @@ var EditorCanvas = react.forwardRef(
       checkObjectInPoint,
       createImageFromClip,
       createTextFromClip,
-      changeObjectVisible
-    }));
+      changeObjectVisible,
+      getCanvasCtx
+    }), [fc]);
     const getActions = () => {
       if (history) {
         return history.getActionType();
@@ -2419,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) {
@@ -2432,7 +2446,7 @@ var EditorFn = ({
         }
       }
     }
-    setShowCanvas(false);
+    setShowCanvas(show);
     setLoading(false);
   };
   const onClickMain = () => {
@@ -2573,9 +2587,11 @@ var EditorFn = ({
     setFrame(e.detail.frame);
   };
   const onPlay = () => {
+    setShowCanvas(false);
     setIsPlaying(true);
   };
   const onPause = () => {
+    setShowCanvas(true);
     setIsPlaying(false);
   };
   const onWaiting = () => {
@@ -2713,13 +2729,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 = vmmlUtils.convertVmmlTextScaleByForbidden(v);
     setVmmlState(convertedVmml);
-    setDurationInFrames(vmmlUtils.getFrames(((_a2 = v == null ? void 0 : v.template) == null ? void 0 : _a2.duration) || 1, fps));
+    setDurationInFrames(vmmlUtils.getFrames(((_c = v == null ? void 0 : v.template) == null ? void 0 : _c.duration) || 1, fps));
     playerCurrent.setVmml(convertedVmml, pauseFrame);
     setRefreshEdit(Date.now());
     if (canvasCurrent) {