@versa_ai/vmml-editor 1.0.15 → 1.0.16

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @versa_ai/vmml-editor@1.0.15 build D:\code\work\vmml-player\packages\editor
+> @versa_ai/vmml-editor@1.0.16 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
 
 
 
-CJS dist\index.js     109.97 KB
-CJS dist\index.js.map 208.26 KB
-CJS ⚡️ Build success in 2606ms
-ESM dist\index.mjs     108.43 KB
-ESM dist\index.mjs.map 207.98 KB
-ESM ⚡️ Build success in 2609ms
-DTS ⚡️ Build success in 2078ms
+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
 DTS dist\index.d.ts  158.00 B
 DTS dist\index.d.mts 158.00 B

package/dist/index.js

@@ -1000,9 +1000,11 @@ function usePeekControl(canvas, hideConfig) {
   return canvas;
 }
 var EditorCanvas = react.forwardRef(
-  ({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange, isBatchModify, hideConfig }, ref) => {
+  ({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig }, ref) => {
     const [fc, setFc] = react.useState(null);
     const [history, setHistory] = react.useState(null);
+    const [canvasReady, setCanvasReady] = react.useState(false);
+    const editRenderTime = react.useRef(0);
     const waitFcTasks = react.useRef([]);
     const vmmlConverterRef = react.useRef(null);
     const heightScaleRef = react.useRef(1);
@@ -1022,6 +1024,7 @@ var EditorCanvas = react.forwardRef(
       setFc(canvas);
       initCanvasEvent(canvas);
       usePeekControl(canvas, hideConfig);
+      setCanvasReady(true);
     };
     const createFcObjs = (canvas) => {
       const ns = Math.floor(frame / 30 * 1e6);
@@ -1193,9 +1196,42 @@ var EditorCanvas = react.forwardRef(
         waitFcTasks.current.push(updateImage.bind(void 0, id, base64));
       }
     };
+    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);
+        }
+        if (clip.textClip && !clip.audioClip) {
+          return createTextFromClip(clip);
+        }
+      });
+      const res = await Promise.allSettled(promises);
+      const objects = [];
+      res.forEach((item) => {
+        if (item.status === "fulfilled" && item.value) {
+          objects.push(item.value);
+        }
+      });
+      if (editRenderTime.current === time) {
+        canvas.add(...objects).renderAll();
+      }
+    };
     const createImageFromClip = (clip, fc2) => {
-      const canvas = fc || fc2;
-      if (canvas && canvasSize.width) {
+      return new Promise((resolve) => {
+        const canvas = fc || fc2;
+        if (!canvas || !canvasSize.width) {
+          resolve(null);
+          return;
+        }
         const url = /video/g.test(clip.videoClip.mimeType) ? "" : clip.videoClip.sourceUrl;
         fabric.fabric.Image.fromURL(url, (img) => {
           const { dimension, posParam } = clip.videoClip;
@@ -1229,16 +1265,14 @@ var EditorCanvas = react.forwardRef(
             },
             visible: frame >= inFrame && frame < inFrame + durationFrame
           });
-          canvas.add(img);
           img.on("modified", () => {
             const fObj = convertToJSON(img);
             fObj.src = "";
             vmmlConverterRef.current.updateClip(fObj);
           });
+          resolve(img);
         });
-      } else {
-        waitFcTasks.current.push(createImageFromClip.bind(void 0, clip));
-      }
+      });
     };
     const handleRedo = () => {
       history.redo();
@@ -1247,11 +1281,11 @@ var EditorCanvas = react.forwardRef(
       history.undo();
     };
     const onBatchModify = (fObj, canvas) => {
-      console.log("onBatchModify>>>>>>>>>>>>>>>>>>>>>>>>");
+      var _a;
       if (!canvas) return;
       const textObjects = canvas.getObjects().filter((item) => {
-        var _a;
-        return ((_a = item == null ? void 0 : item.clipData) == null ? void 0 : _a.type) === "\u6587\u5B57";
+        var _a2;
+        return ((_a2 = item == null ? void 0 : item.clipData) == null ? void 0 : _a2.type) === "\u6587\u5B57";
       });
       const { left, top, scaleX, scaleY, angle } = fObj;
       textObjects.forEach((textObj) => {
@@ -1267,10 +1301,20 @@ var EditorCanvas = react.forwardRef(
         vmmlConverterRef.current.updateClip(updatedFObj);
       });
       canvas.renderAll();
+      const event = new CustomEvent("editor-vmml-batch-change", {
+        detail: {
+          vmml: ((_a = vmmlConverterRef.current) == null ? void 0 : _a.vmml) ?? null
+        }
+      });
+      window.dispatchEvent(event);
     };
     const createTextFromClip = async (clip, fc2) => {
-      const canvas = fc || fc2;
-      if (canvas) {
+      return new Promise(async (resolve) => {
+        const canvas = fc || fc2;
+        if (!canvas) {
+          resolve(null);
+          return;
+        }
         const { width, height } = vmml.template.dimension;
         const fontSize = vmmlUtils.getFontSize(width, height);
         const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
@@ -1308,7 +1352,7 @@ var EditorCanvas = react.forwardRef(
             originX: "center",
             originY: "center",
             clipData: {
-              id: uuid.v4(),
+              id: clip.id,
               inPoint: clip.inPoint,
               inFrame: vmmlUtils.getFrames(clip.inPoint, 30),
               type: "\u6587\u5B57",
@@ -1340,11 +1384,9 @@ var EditorCanvas = react.forwardRef(
               vmmlConverterRef.current.updateClip(fObj);
             }
           });
-          canvas.add(imgData).renderAll();
+          resolve(imgData);
         });
-      } else {
-        waitFcTasks.current.push(createTextFromClip.bind(void 0, clip));
-      }
+      });
     };
     const getFontFamilyName = (url) => {
       const filename = url.split("/").pop() || "";
@@ -1523,6 +1565,12 @@ var EditorCanvas = react.forwardRef(
         vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
       }
     }, [canvasSize, vmml]);
+    react.useEffect(() => {
+      if (editClips.length && canvasReady && fc) {
+        editRenderTime.current = Date.now();
+        createEditObjes(fc, editRenderTime.current);
+      }
+    }, [editClips, canvasReady]);
     react.useEffect(() => {
       if (fc) {
         const historyClass2 = new HistoryClass(fc);
@@ -2313,7 +2361,7 @@ var VideoMenu = ({ createImage, videoMenus, menuState }) => {
 var VideoMenu_default = VideoMenu;
 var historyClass = new HistoryClass();
 var EditorFn = ({
-  vmml,
+  vmml: propVmml,
   pauseFrame = 0,
   maxText = 10,
   maxVideo = 5,
@@ -2330,7 +2378,7 @@ var EditorFn = ({
   // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 }, ref) => {
   var _a;
-  vmml = vmmlUtils.convertVmmlTextScaleByForbidden(vmml);
+  const [vmmlState, setVmmlState] = react.useState(() => vmmlUtils.convertVmmlTextScaleByForbidden(propVmml));
   const textMenuRef = react.useRef(null);
   const vmmlPlayerRef = react.useRef();
   const canvasRef = react.useRef();
@@ -2342,7 +2390,7 @@ var EditorFn = ({
   const [isPlaying, setIsPlaying] = react.useState(false);
   const [showCanvas, setShowCanvas] = react.useState(false);
   const [filterIds, setFilterIds] = react.useState([]);
-  const [durationInFrames, setDurationInFrames] = react.useState(vmmlUtils.getFrames(((_a = vmml == null ? void 0 : vmml.template) == null ? void 0 : _a.duration) || 1, fps));
+  const [durationInFrames, setDurationInFrames] = react.useState(vmmlUtils.getFrames(((_a = vmmlState == null ? void 0 : vmmlState.template) == null ? void 0 : _a.duration) || 1, fps));
   const [previewState, setPreviewState] = react.useState(true);
   const [menuState, setMenuState] = react.useState("");
   const [canvasSize, setCanvasSize] = react.useState({ width: 0, height: 0, top: 0 });
@@ -2355,15 +2403,17 @@ var EditorFn = ({
   const [dragState, setDragState] = react.useState(0);
   const vmmlConverterRef = react.useRef(null);
   const [initFcObjs, setInitFcObjs] = react.useState([]);
+  const [editClips, setEditClips] = react.useState([]);
+  const [refreshEdit, setRefreshEdit] = react.useState(0);
   const vmmlFlag = react.useRef(false);
   const needPlay = react.useRef(true);
   const setVmml = () => {
     const { current } = vmmlPlayerRef;
     if (!current) return;
     if (!once.current) {
-      current.setVmml(vmml, pauseFrame);
+      current.setVmml(vmmlState, pauseFrame);
     } else {
-      current.setVmml(vmml, frame);
+      current.setVmml(vmmlState, frame);
     }
   };
   const onPlayerReady = () => {
@@ -2537,18 +2587,9 @@ var EditorFn = ({
     setBuffering(false);
   };
   const initCanEditClips = (tracks = []) => {
-    if (editableArray.length) {
+    if (editableArray.length && tracks.length) {
       const list = findEditClips(tracks);
-      if (list.length) {
-        const { current } = canvasRef;
-        list.forEach((clip) => {
-          if (clip.videoClip) {
-            current.createImageFromClip(clip);
-          } else {
-            if (!clip.audioClip) current.createTextFromClip(clip);
-          }
-        });
-      }
+      setEditClips(list);
     }
   };
   const findEditClips = (tracks = []) => {
@@ -2576,7 +2617,7 @@ var EditorFn = ({
   };
   const getVmml = () => {
     try {
-      const tracks = vmml.template.tracks.filter((item) => item.editorType === "\u6587\u5B57");
+      const tracks = vmmlState.template.tracks.filter((item) => item.editorType === "\u6587\u5B57");
       tracks.forEach((track) => {
         track.clips.forEach((clip) => {
           clip.fObj.src = "";
@@ -2585,7 +2626,7 @@ var EditorFn = ({
     } catch {
       console.log("\u51FA\u9519\u4E86");
     }
-    return vmml;
+    return vmmlState;
   };
   const getPlayer = () => {
     return player;
@@ -2602,18 +2643,33 @@ var EditorFn = ({
     }
   }, [previewState]);
   react.useEffect(() => {
-    if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current && vmml) {
-      vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
+    if (canvasSize.width && canvasSize.height && vmmlState) {
+      if (!vmmlConverterRef.current) {
+        vmmlConverterRef.current = new VmmlConverter_default({ vmml: vmmlState, canvasSize });
+      } else {
+        vmmlConverterRef.current.vmml = vmmlState;
+      }
     }
-    if (canvasSize.width) {
-      initCanEditClips(vmml.template.tracks);
+  }, [canvasSize, vmmlState]);
+  react.useEffect(() => {
+    if (editableArray.length && (vmmlState == null ? void 0 : vmmlState.template)) {
+      initCanEditClips(vmmlState.template.tracks);
     }
-  }, [canvasSize, vmml]);
+  }, [editableArray, refreshEdit]);
+  react.useEffect(() => {
+    var _a2;
+    if (propVmml) {
+      const convertedVmml = vmmlUtils.convertVmmlTextScaleByForbidden(propVmml);
+      setVmmlState(convertedVmml);
+      setDurationInFrames(vmmlUtils.getFrames(((_a2 = propVmml == null ? void 0 : propVmml.template) == null ? void 0 : _a2.duration) || 1, fps));
+      setRefreshEdit(Date.now());
+    }
+  }, [propVmml]);
   react.useEffect(() => {
-    if (vmml) {
-      initFcObjects(vmml.template.tracks);
+    if (vmmlState) {
+      initFcObjects(vmmlState.template.tracks);
     }
-  }, [vmml]);
+  }, [vmmlState]);
   react.useEffect(() => {
     if (player) {
       const parent = player.getContainerNode();
@@ -2648,7 +2704,7 @@ var EditorFn = ({
     if (dragState === 2) {
       needPlay.current = false;
       const { current } = vmmlPlayerRef;
-      current.setVmml(vmml, frame, false);
+      current.setVmml(vmmlState, frame, false);
       setShowCanvas(false);
     }
     if (dragState === 3 || dragState === 4) {
@@ -2656,6 +2712,20 @@ var EditorFn = ({
       setPreviewState(false);
     }
   }, [dragState]);
+  const updateVmml = (v) => {
+    var _a2;
+    const { current: playerCurrent } = vmmlPlayerRef;
+    const { current: canvasCurrent } = canvasRef;
+    if (!playerCurrent) return;
+    const convertedVmml = vmmlUtils.convertVmmlTextScaleByForbidden(v);
+    setVmmlState(convertedVmml);
+    setDurationInFrames(vmmlUtils.getFrames(((_a2 = v == null ? void 0 : v.template) == null ? void 0 : _a2.duration) || 1, fps));
+    playerCurrent.setVmml(convertedVmml, pauseFrame);
+    setRefreshEdit(Date.now());
+    if (canvasCurrent) {
+      canvasCurrent.checkObjectInPoint(pauseFrame);
+    }
+  };
   react.useImperativeHandle(
     ref,
     () => ({
@@ -2664,9 +2734,10 @@ var EditorFn = ({
       getVmml,
       getPlayer,
       texteditClose,
-      textFinish
+      textFinish,
+      updateVmml
     }),
-    [vmml, player]
+    [vmmlState, player]
   );
   const texteditClose = () => {
     if (textMenuRef) {
@@ -2696,7 +2767,7 @@ var EditorFn = ({
           vmmlPlayer.VmmlPlayer,
           {
             ref: vmmlPlayerRef,
-            vmml,
+            vmml: vmmlState,
             existenceBorderRadio: true,
             moveToBeginningWhenEnded: true,
             muted: true,
@@ -2717,9 +2788,10 @@ var EditorFn = ({
             enterPreview,
             intoTextEdit,
             frame,
-            vmml,
+            vmml: vmmlState,
             dragState,
             initFcObjs,
+            editClips,
             onVideoChange,
             isBatchModify,
             hideConfig