@versa_ai/vmml-editor 1.0.42 → 1.0.44

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.42 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.44 build D:\code\work\vmml-player\packages\editor
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -66,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.
 
@@ -123,13 +124,12 @@ More info and automated migrator: https://sass-lang.com/d/slash-div [35
 
 
 
-DTS Build start
-ESM dist\index.mjs     119.77 KB
-ESM dist\index.mjs.map 233.03 KB
-ESM ⚡️ Build success in 786ms
-CJS dist\index.js     121.41 KB
-CJS dist\index.js.map 233.32 KB
-CJS ⚡️ Build success in 787ms
-DTS ⚡️ Build success in 2403ms
+CJS dist\index.js     121.53 KB
+CJS dist\index.js.map 233.39 KB
+CJS ⚡️ Build success in 1082ms
+ESM dist\index.mjs     119.73 KB
+ESM dist\index.mjs.map 233.08 KB
+ESM ⚡️ Build success in 1083ms
+DTS ⚡️ Build success in 2236ms
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var vmmlPlayer = require('@versa_ai/vmml-player');
+var cloneDeep = require('lodash.clonedeep');
 var react = require('react');
 var vmmlUtils = require('@versa_ai/vmml-utils');
 var remotion = require('remotion');
@@ -9,6 +10,10 @@ var fabric = require('fabric');
 var uuid = require('uuid');
 var domToImage = require('dom-to-image');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cloneDeep__default = /*#__PURE__*/_interopDefault(cloneDeep);
+
 // src/index.tsx
 
 // src/assets/css/index.scss
@@ -638,7 +643,6 @@ var VmmlConverter = class {
   addTextClip(fObj) {
     console.log("addTextClip fObj", fObj);
     const posParam = this.setPosParam(fObj);
-    console.log(fObj, "fObj>>>>");
     const { clipData: { id, inPoint, text, textColor, bgColor } } = fObj;
     const { template: { duration } } = this.vmml;
     const clips = [];
@@ -784,13 +788,8 @@ var VmmlConverter = class {
    */
   deleteClip({ id, type, originClip }) {
     if (originClip) {
-      for (const track of this.tracks) {
-        const clip = (track.clips || []).find((c) => c.id === originClip.id);
-        if (clip) {
-          clip.duration = 0;
-          break;
-        }
-      }
+      const [existClip] = this.findClip(id);
+      existClip.duration = 0;
     } else {
       const editorTrack = this.tracks.find((track) => track.editorType === type);
       const index = editorTrack.clips.findIndex((item) => item.id === id);
@@ -1368,20 +1367,20 @@ var EditorCanvas = react.forwardRef(
       const lineHeight = 22 + strokeW;
       const paddingX = 7;
       const groupWidth = Math.max(...lines.map((l) => {
-        const temp = new fabric.fabric.Text(l || " ", { fontSize: 22, fontFamily, charSpacing: letterSpace, strokeWidth: strokeW ?? 0 });
+        let options = { fontSize: 22, fontFamily, strokeWidth: strokeW ?? 0 };
+        if (letterSpace) options.charSpacing = letterSpace;
+        let temp = new fabric.fabric.Text(l, options);
         return (temp == null ? void 0 : temp.width) ?? 0;
       })) + paddingX * 2;
       const groupHeight = lines.length * lineHeight;
       const textObjs = [];
       lines.forEach((line, idx) => {
         const y = -groupHeight / 2 + lineHeight / 2 + idx * lineHeight;
-        let originX = "left";
+        let originX = textBasicInfo.textAlign;
         let left = paddingX;
-        if (textBasicInfo.textAlign === "center") {
-          originX = "center";
-          left = 0;
-        } else if (textBasicInfo.textAlign === "right") {
-          originX = "right";
+        if (originX === "center") {
+          left = groupWidth / 2;
+        } else if (originX === "right") {
           left = groupWidth - paddingX;
         }
         const strokeText = new fabric.fabric.Text(line || " ", {
@@ -1394,7 +1393,6 @@ var EditorCanvas = react.forwardRef(
           originY: "center",
           left,
           top: y,
-          charSpacing: letterSpace,
           textAlign: "left",
           objectCaching: false
         });
@@ -1408,10 +1406,13 @@ var EditorCanvas = react.forwardRef(
           strokeWidth: 0,
           left,
           top: y,
-          charSpacing: letterSpace,
           textAlign: "left",
           objectCaching: false
         });
+        if (letterSpace) {
+          fillText.set({ charSpacing: letterSpace });
+          strokeText.set({ charSpacing: letterSpace });
+        }
         textObjs.push(strokeText, fillText);
       });
       const bgRect = new fabric.fabric.Rect({
@@ -1419,7 +1420,7 @@ var EditorCanvas = react.forwardRef(
         height: groupHeight + 13,
         // padddingY: 6.5
         fill: bgColor,
-        originX: "center",
+        originX: "left",
         originY: "center",
         rx: 5,
         ry: 5
@@ -1435,7 +1436,7 @@ var EditorCanvas = react.forwardRef(
         if (!canvas) return null;
         const { width, height } = vmml.template.dimension;
         const fontSize = vmmlUtils.getFontSize(width, height);
-        let { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth, letterSpacing } = 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 left = canvasSize.width * posParam.centerX;
@@ -1443,7 +1444,7 @@ var EditorCanvas = react.forwardRef(
         const bgColor = backgroundColor ? vmmlUtils.argbToRgba(backgroundColor) : "transparent";
         const strokeW = strokeColor && strokeWidth ? strokeWidth * 30 * 1.5 / fontSize : 0;
         const stColor = strokeColor ? vmmlUtils.argbToRgba(strokeColor) : "transparent";
-        const letterSpace = letterSpacing * 22 / fontSize * 45;
+        const letterSpace = letterSpacing ? letterSpacing * 22 / fontSize * 45 : 0;
         const textFill = vmmlUtils.argbToRgba(textColor || "#ffffffff");
         const textBasicInfo = {
           isBack: backgroundColor ? true : false,
@@ -2927,11 +2928,12 @@ var EditorFn = ({
     setFrame(currentFrame);
     const convertedVmml = v;
     const isSame = JSON.stringify(convertedVmml) == JSON.stringify(vmmlState);
-    console.log(isSame, "VMML\u662F\u5426\u76F8\u540C", convertedVmml, vmmlState);
+    console.log(isSame, "isSamew>>>");
     if (!isSame) {
+      const currentV = cloneDeep__default.default(convertedVmml);
       (_e = (_d = canvasCurrent == null ? void 0 : canvasCurrent.getCanvasCtx()) == null ? void 0 : _d.clear) == null ? void 0 : _e.call(_d);
-      setVmmlState(convertedVmml);
-      setDurationInFrames(vmmlUtils.getFrames(((_f = convertedVmml == null ? void 0 : convertedVmml.template) == null ? void 0 : _f.duration) || 1, fps));
+      setVmmlState(currentV);
+      setDurationInFrames(vmmlUtils.getFrames(((_f = currentV == null ? void 0 : currentV.template) == null ? void 0 : _f.duration) || 1, fps));
     }
     playerCurrent.setVmml(convertedVmml, currentFrame);
     if (isSame) (_g = canvasCurrent == null ? void 0 : canvasCurrent.checkObjectInPoint) == null ? void 0 : _g.call(canvasCurrent, currentFrame);