@versa_ai/vmml-editor 1.0.51 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",

package/src/components/EditorCanvas.tsx

@@ -7,7 +7,7 @@ import VmmlConverter from "../utils/VmmlConverter";
 import { usePeekControl } from "../utils/usePeekControl";
 
 const EditorCanvas = forwardRef(
-	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter }: any, ref: any) => {
+	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter, updateVmml }: any, ref: any) => {
 		const [fc, setFc] = useState<any>(null);
 		const [history, setHistory] = useState<any>(null);
 		const [canvasReady, setCanvasReady] = useState(false);
@@ -44,6 +44,7 @@ const EditorCanvas = forwardRef(
 					item.on('modified', () => {
 						const fObj = convertToJSON(item)
 						vmmlConverterRef.current.updateClip(fObj);
+						updateVmml(vmmlConverterRef.current.vmml)
 					});
 					item.set("visible", ns >= item.clipData.inPoint);
 					canvas.add(item);
@@ -288,6 +289,7 @@ const EditorCanvas = forwardRef(
 						const fObj = convertToJSON(img);
 						fObj.src = "";
 						vmmlConverterRef.current.updateClip(fObj);
+						updateVmml(vmmlConverterRef.current.vmml)
 					});
 					resolve(img);
 				});
@@ -320,6 +322,7 @@ const EditorCanvas = forwardRef(
 				vmmlConverterRef.current.updateClip(updatedFObj);
 			});
 			canvas.renderAll();
+			updateVmml(vmmlConverterRef.current?.vmml)
 			const event = new CustomEvent('editor-vmml-batch-change', {
 				detail: {
 					vmml: vmmlConverterRef.current?.vmml ?? null
@@ -501,6 +504,7 @@ const EditorCanvas = forwardRef(
 						onBatchModify(fObj, canvas)
 					} else {
 						vmmlConverterRef.current.updateClip(fObj);
+						updateVmml(vmmlConverterRef.current?.vmml)
 					}
 				});
 
@@ -589,6 +593,7 @@ const EditorCanvas = forwardRef(
 				group.on('modified', () => {
 					const fObj = convertToJSON(group)
 					vmmlConverterRef.current.updateClip(fObj);
+					updateVmml(vmmlConverterRef.current?.vmml)
 				});
 				canvas.centerObject(group);
 				canvas.add(group)
@@ -671,6 +676,7 @@ const EditorCanvas = forwardRef(
 				target.setCoords();
 				fc?.requestRenderAll();
 				vmmlConverterRef.current.updateClip(convertToJSON(target));
+				updateVmml(vmmlConverterRef.current?.vmml)
 			}
 		}
 		const changeObjectVisible = (id: string, visible: boolean = true) => {

package/src/index.tsx

@@ -125,14 +125,19 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	};
 
 	const onControlsClick = () => {
+		const { current }: any = vmmlPlayerRef;
+		current.unmute();
+		current.play();
 		setPreviewState(true);
-		if (previewState) {
-			const { current }: any = vmmlPlayerRef;
-			current.unmute();
-			current.play();
-		} else {
-			setMenuState("");
-		}
+		setMenuState("");
+		// if (previewState) {
+		// 	const { current }: any = vmmlPlayerRef;
+		// 	current.unmute();
+		// 	current.play();
+		// } else {
+		// 	setPreviewState(true);
+		// 	setMenuState("");
+		// }
 	}
 
 	// 点击底部菜单
@@ -357,12 +362,18 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		}
 	}, [menuState]);
 
+	// useEffect(() => {
+	// 	if (previewState && !vmmlFlag.current) {
+	// 		vmmlFlag.current = true;
+	// 		setVmml();
+	// 	}
+	// }, [previewState]);
+
 	useEffect(() => {
-		if (previewState && !vmmlFlag.current) {
-			vmmlFlag.current = true;
+		if (!vmmlFlag.current) {
 			setVmml();
 		}
-	}, [previewState]);
+	}, []);
 
 	useEffect(() => {
 		if (canvasSize.width && canvasSize.height && vmmlState) {
@@ -555,6 +566,14 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		return {}
 	}, [loading])
 
+	const updateVmml = (vmml: any) => {
+		const { current }: any = vmmlPlayerRef;
+		if (!current) return;
+		const playing = current?.playerRef?.isPlaying?.() ?? false
+		if (!playing) needPlay.current = false
+		current.setVmml(vmml, frame, false);
+	}
+
 	return (
 		<>
 			<div className="editor"  style={{ height }}>
@@ -597,7 +616,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 							isBatchModify={isBatchModify}
 							hideConfig={hideConfig}
 							textWarapCenter={textWarapCenter}
-							// textInfoReset={textInfoReset}
+							updateVmml={updateVmml}
 						/>
 						
 						<Loaidng show={loading} />

package/src/utils/VmmlConverter.ts

@@ -13,7 +13,7 @@ class VmmlConverter {
 	 * @param vmml - VMML 模板数据
 	 * @param canvasSize - 画布尺寸
 	 */
-	constructor({ vmml, canvasSize }: { vmml: any; canvasSize: any }) {
+	constructor({ vmml, canvasSize }: { vmml: any; canvasSize: any}) {
 		const { width, height } = vmml.template.dimension;
 		this.vmml = vmml;
 		this.canvasSize = canvasSize;
@@ -141,6 +141,7 @@ class VmmlConverter {
 			editorTrack.clips.push(tClipData);
 		}
 
+		this.updateVmml(this.vmml)
 		// console.log("addTextClip 最终vmml", this.vmml);
 	}
 
@@ -220,32 +221,6 @@ class VmmlConverter {
 
 		// console.log("updateClip 最终vmml", this.vmml);
 	}
-	public updateTextClip(fObj: any, duration: number) {
-		// console.log("updateClip fObj", fObj, this.tracks);
-		const posParam = this.setPosParam(fObj);
-		const {
-			clipData: { id },
-		} = fObj;
-		const [existClip] = this.findClip(id);
-		
-		if (existClip) {
-			const { clipData: { text, textColor, bgColor }} = fObj;
-			const scale = this.fontSize / 22;
-			existClip.duration = duration
-			existClip.textClip = {
-				...existClip.textClip,
-				posParam,
-				backgroundColor: this.toARGB(bgColor),
-				textContent: text,
-				textColor: this.toARGB(textColor),
-				dimension: {
-					width: Math.floor(fObj.width * scale),
-					height: Math.floor(fObj.height * scale),
-				}
-			};
-		}
-		// console.log(this.vmml, 'updateText>>>')
-	}
 
 	/**
 	 * 删除 Clip