@versa_ai/vmml-editor 1.0.15 → 1.0.17

package/dist/index.mjs

@@ -998,9 +998,11 @@ function usePeekControl(canvas, hideConfig) {
   return canvas;
 }
 var EditorCanvas = 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] = useState(null);
     const [history, setHistory] = useState(null);
+    const [canvasReady, setCanvasReady] = useState(false);
+    const editRenderTime = useRef(0);
     const waitFcTasks = useRef([]);
     const vmmlConverterRef = useRef(null);
     const heightScaleRef = useRef(1);
@@ -1020,6 +1022,7 @@ var EditorCanvas = forwardRef(
       setFc(canvas);
       initCanvasEvent(canvas);
       usePeekControl(canvas, hideConfig);
+      setCanvasReady(true);
     };
     const createFcObjs = (canvas) => {
       const ns = Math.floor(frame / 30 * 1e6);
@@ -1191,9 +1194,33 @@ var EditorCanvas = forwardRef(
         waitFcTasks.current.push(updateImage.bind(void 0, id, base64));
       }
     };
+    const createEditObjes = async (canvas, time) => {
+      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.Image.fromURL(url, (img) => {
           const { dimension, posParam } = clip.videoClip;
@@ -1227,16 +1254,14 @@ var EditorCanvas = 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();
@@ -1245,11 +1270,11 @@ var EditorCanvas = 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) => {
@@ -1265,10 +1290,20 @@ var EditorCanvas = 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 = getFontSize(width, height);
         const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
@@ -1306,7 +1341,7 @@ var EditorCanvas = forwardRef(
             originX: "center",
             originY: "center",
             clipData: {
-              id: v4(),
+              id: clip.id,
               inPoint: clip.inPoint,
               inFrame: getFrames(clip.inPoint, 30),
               type: "\u6587\u5B57",
@@ -1338,11 +1373,9 @@ var EditorCanvas = 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() || "";
@@ -1521,6 +1554,12 @@ var EditorCanvas = forwardRef(
         vmmlConverterRef.current = new VmmlConverter_default({ vmml, canvasSize });
       }
     }, [canvasSize, vmml]);
+    useEffect(() => {
+      if (editClips.length && canvasReady && fc) {
+        editRenderTime.current = Date.now();
+        createEditObjes(fc, editRenderTime.current);
+      }
+    }, [editClips, canvasReady]);
     useEffect(() => {
       if (fc) {
         const historyClass2 = new HistoryClass(fc);
@@ -1531,6 +1570,9 @@ var EditorCanvas = forwardRef(
         }
       }
     }, [fc]);
+    const getCanvasCtx = () => {
+      return fc;
+    };
     useImperativeHandle(ref, () => ({
       createImage,
       createText,
@@ -1544,8 +1586,9 @@ var EditorCanvas = forwardRef(
       checkObjectInPoint,
       createImageFromClip,
       createTextFromClip,
-      changeObjectVisible
-    }));
+      changeObjectVisible,
+      getCanvasCtx
+    }), [fc]);
     const getActions = () => {
       if (history) {
         return history.getActionType();
@@ -2311,7 +2354,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,
@@ -2328,7 +2371,7 @@ var EditorFn = ({
   // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 }, ref) => {
   var _a;
-  vmml = convertVmmlTextScaleByForbidden(vmml);
+  const [vmmlState, setVmmlState] = useState(() => convertVmmlTextScaleByForbidden(propVmml));
   const textMenuRef = useRef(null);
   const vmmlPlayerRef = useRef();
   const canvasRef = useRef();
@@ -2340,7 +2383,7 @@ var EditorFn = ({
   const [isPlaying, setIsPlaying] = useState(false);
   const [showCanvas, setShowCanvas] = useState(false);
   const [filterIds, setFilterIds] = useState([]);
-  const [durationInFrames, setDurationInFrames] = useState(getFrames(((_a = vmml == null ? void 0 : vmml.template) == null ? void 0 : _a.duration) || 1, fps));
+  const [durationInFrames, setDurationInFrames] = useState(getFrames(((_a = vmmlState == null ? void 0 : vmmlState.template) == null ? void 0 : _a.duration) || 1, fps));
   const [previewState, setPreviewState] = useState(true);
   const [menuState, setMenuState] = useState("");
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0, top: 0 });
@@ -2353,15 +2396,17 @@ var EditorFn = ({
   const [dragState, setDragState] = useState(0);
   const vmmlConverterRef = useRef(null);
   const [initFcObjs, setInitFcObjs] = useState([]);
+  const [editClips, setEditClips] = useState([]);
+  const [refreshEdit, setRefreshEdit] = useState(0);
   const vmmlFlag = useRef(false);
   const needPlay = 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 = () => {
@@ -2535,18 +2580,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 = []) => {
@@ -2574,7 +2610,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 = "";
@@ -2583,7 +2619,7 @@ var EditorFn = ({
     } catch {
       console.log("\u51FA\u9519\u4E86");
     }
-    return vmml;
+    return vmmlState;
   };
   const getPlayer = () => {
     return player;
@@ -2600,18 +2636,33 @@ var EditorFn = ({
     }
   }, [previewState]);
   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]);
+  useEffect(() => {
+    if (editableArray.length && (vmmlState == null ? void 0 : vmmlState.template)) {
+      initCanEditClips(vmmlState.template.tracks);
     }
-  }, [canvasSize, vmml]);
+  }, [editableArray, refreshEdit]);
+  useEffect(() => {
+    var _a2;
+    if (propVmml) {
+      const convertedVmml = convertVmmlTextScaleByForbidden(propVmml);
+      setVmmlState(convertedVmml);
+      setDurationInFrames(getFrames(((_a2 = propVmml == null ? void 0 : propVmml.template) == null ? void 0 : _a2.duration) || 1, fps));
+      setRefreshEdit(Date.now());
+    }
+  }, [propVmml]);
   useEffect(() => {
-    if (vmml) {
-      initFcObjects(vmml.template.tracks);
+    if (vmmlState) {
+      initFcObjects(vmmlState.template.tracks);
     }
-  }, [vmml]);
+  }, [vmmlState]);
   useEffect(() => {
     if (player) {
       const parent = player.getContainerNode();
@@ -2646,7 +2697,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) {
@@ -2654,6 +2705,21 @@ var EditorFn = ({
       setPreviewState(false);
     }
   }, [dragState]);
+  const updateVmml = (v) => {
+    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(((_c = v == null ? void 0 : v.template) == null ? void 0 : _c.duration) || 1, fps));
+    playerCurrent.setVmml(convertedVmml, pauseFrame);
+    setRefreshEdit(Date.now());
+    if (canvasCurrent) {
+      canvasCurrent.checkObjectInPoint(pauseFrame);
+    }
+  };
   useImperativeHandle(
     ref,
     () => ({
@@ -2662,9 +2728,10 @@ var EditorFn = ({
       getVmml,
       getPlayer,
       texteditClose,
-      textFinish
+      textFinish,
+      updateVmml
     }),
-    [vmml, player]
+    [vmmlState, player]
   );
   const texteditClose = () => {
     if (textMenuRef) {
@@ -2694,7 +2761,7 @@ var EditorFn = ({
           VmmlPlayer,
           {
             ref: vmmlPlayerRef,
-            vmml,
+            vmml: vmmlState,
             existenceBorderRadio: true,
             moveToBeginningWhenEnded: true,
             muted: true,
@@ -2715,9 +2782,10 @@ var EditorFn = ({
             enterPreview,
             intoTextEdit,
             frame,
-            vmml,
+            vmml: vmmlState,
             dragState,
             initFcObjs,
+            editClips,
             onVideoChange,
             isBatchModify,
             hideConfig