@versa_ai/vmml-editor 1.0.15 → 1.0.17

package/package.json

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

package/src/components/EditorCanvas.tsx

@@ -8,9 +8,11 @@ import { usePeekControl } from "../utils/usePeekControl";
 import { toSvg } from 'dom-to-image'
 
 const EditorCanvas = forwardRef(
-	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange, isBatchModify, hideConfig }: any, ref: any) => {
+	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig }: any, ref: any) => {
 		const [fc, setFc] = useState<any>(null);
 		const [history, setHistory] = useState<any>(null);
+		const [canvasReady, setCanvasReady] = useState(false);
+		const editRenderTime = useRef(0);
 		const waitFcTasks = useRef<any>([]);
 		const vmmlConverterRef = useRef<any>(null);
 		const heightScaleRef = useRef<number>(1);
@@ -31,7 +33,8 @@ const EditorCanvas = forwardRef(
 			setFc(canvas);
 			initCanvasEvent(canvas);
 			usePeekControl(canvas, hideConfig);
-		};
+			setCanvasReady(true);
+	};
 
 		const createFcObjs = (canvas: any) => {
 			const ns = Math.floor((frame / 30) * 1000000);
@@ -216,10 +219,35 @@ const EditorCanvas = forwardRef(
 			}
 		};
 
-		// 创建可编辑的videoClip
-		const createImageFromClip = (clip: any, fc2: any) => {
+	const createEditObjes = async (canvas: any, time: number) => {
+		const promises = editClips.map((clip: any) => {
+			if (clip.videoClip) {
+				return createImageFromClip(clip);
+			}
+			if (clip.textClip && !clip.audioClip) {
+				return createTextFromClip(clip);
+			}
+		});
+		const res = await Promise.allSettled(promises);
+		const objects: any = [];
+		res.forEach((item: any) => {
+			if (item.status === 'fulfilled' && item.value) {
+				objects.push(item.value);
+			}
+		});
+		if (editRenderTime.current === time) {
+			canvas.add(...objects).renderAll();
+		}
+	};
+
+	// 创建可编辑的videoClip
+	const createImageFromClip = (clip: any, fc2?: any) => {
+		return new Promise((resolve) => {
 			const canvas = fc || fc2;
-			if (canvas && canvasSize.width) {
+			if (!canvas || !canvasSize.width) {
+				resolve(null);
+				return;
+			}
 				const url = /video/g.test(clip.videoClip.mimeType) ? "" : clip.videoClip.sourceUrl;
 				fabric.Image.fromURL(url, (img: any) => {
 					const { dimension, posParam } = clip.videoClip;
@@ -253,27 +281,24 @@ const EditorCanvas = forwardRef(
 						},
 						visible: frame >= inFrame && frame < inFrame + durationFrame
 					});
-					canvas.add(img);
-					img.on('modified', () => {
-						const fObj = convertToJSON(img);
-						fObj.src = "";
-						vmmlConverterRef.current.updateClip(fObj);
-					});
+				img.on('modified', () => {
+					const fObj = convertToJSON(img);
+					fObj.src = "";
+					vmmlConverterRef.current.updateClip(fObj);
 				});
-			} else {
-				waitFcTasks.current.push(createImageFromClip.bind(this, clip));
-			}
-		}
+				resolve(img);
+			});
+		});
+	}
 
-		const handleRedo = () => {
-			history.redo();
-		};
-		const handleUndo = () => {
-			history.undo();
-		};
+	const handleRedo = () => {
+		history.redo();
+	};
+	const handleUndo = () => {
+		history.undo();
+	};
 
 	const onBatchModify = (fObj: any, canvas: any) => {
-		console.log('onBatchModify>>>>>>>>>>>>>>>>>>>>>>>>')
 		if (!canvas) return;
 		const textObjects = canvas.getObjects().filter((item: any) => item?.clipData?.type === "文字");
 		const { left, top, scaleX, scaleY, angle } = fObj;
@@ -291,72 +316,81 @@ const EditorCanvas = forwardRef(
 			const updatedFObj = convertToJSON(textObj);
 			vmmlConverterRef.current.updateClip(updatedFObj);
 		});
-		
 		canvas.renderAll();
+		const event = new CustomEvent('editor-vmml-batch-change', {
+			detail: {
+				vmml: vmmlConverterRef.current?.vmml ?? null
+			}
+		});
+		window.dispatchEvent(event);
 	}
 
-		// 创建可编辑的textclip
-		const createTextFromClip = async (clip: any, fc2: any) => {
+	// 创建可编辑的textclip
+	const createTextFromClip = async (clip: any, fc2?: any) => {
+		return new Promise(async (resolve) => {
 			const canvas = fc || fc2;
-			if (canvas) {
-				const { width, height } = vmml.template.dimension;
-				const fontSize = getFontSize(width, height);
-				const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
-				const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
-				const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
-				const left = canvasSize.width * posParam.centerX;
-				const top = canvasSize.height * posParam.centerY;
-				const bgColor = backgroundColor ? argbToRgba(backgroundColor) : 'transparent';
-				const isAiError = textContent === '请输入文案' && textColor === '#00000000';
-				const textFill = argbToRgba(isAiError ? '#ffffffff' : (textColor || '#ffffffff'));
-				const textBasicInfo = {
-					isBack: backgroundColor ? true : false,
-					colorValue: textFill,
-					colorName: 'custom',
-					textAlign: alignType === 1 ? 'center' : (alignType === 2 ? 'right' : 'left')
-				}
-				const textImgData = await createTextImg({ textContent, bgColor, textColor: textFill, fontAssetUrl, textBasicInfo });
-				const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
-				let fontMap: any = {};
-				try {
-					fontMap = fontJSON ? JSON.parse(fontJSON) : {};
-				} catch {
-					fontMap = {};
-				}
-				const fontFamily = fontMap[fontAssetUrl] || '';
-				fabric.Image.fromURL(textImgData.base64Image, (imgData: any) => {
-					imgData.set({
-						left, 
-						top,
-						width: textImgData.width,
-						height: textImgData.height,
-						scaleX,
-						scaleY,
-						angle: posParam.rotationZ,
-						originX: 'center',
-        		originY: 'center',
-						clipData: {
-							id: uuidv4(),
-							inPoint: clip.inPoint,
-							inFrame: getFrames(clip.inPoint, 30),
-							type: "文字",
-							textColor: textFill,
-							text: textContent,
-							bgColor,
-							originClip: clip,
-							fontAssetUrl,
-							fontFamily,
-							textBasicInfo,
-							isAiError,
-							duration: clip.duration
-						},
-					})
-					imgData.on("selected", (options: any) => {
-						options.target.isSelected = -1;
-					});
-					imgData.on("moving", (options: any) => {
-						options.transform.target.isSelected = 0;
-					});
+			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;
+			const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
+			const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
+			const left = canvasSize.width * posParam.centerX;
+			const top = canvasSize.height * posParam.centerY;
+			const bgColor = backgroundColor ? argbToRgba(backgroundColor) : 'transparent';
+			const isAiError = textContent === '请输入文案' && textColor === '#00000000';
+			const textFill = argbToRgba(isAiError ? '#ffffffff' : (textColor || '#ffffffff'));
+			const textBasicInfo = {
+				isBack: backgroundColor ? true : false,
+				colorValue: textFill,
+				colorName: 'custom',
+				textAlign: alignType === 1 ? 'center' : (alignType === 2 ? 'right' : 'left')
+			}
+			const textImgData = await createTextImg({ textContent, bgColor, textColor: textFill, fontAssetUrl, textBasicInfo });
+			const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
+			let fontMap: any = {};
+			try {
+				fontMap = fontJSON ? JSON.parse(fontJSON) : {};
+			} catch {
+				fontMap = {};
+			}
+			const fontFamily = fontMap[fontAssetUrl] || '';
+			fabric.Image.fromURL(textImgData.base64Image, (imgData: any) => {
+				imgData.set({
+					left, 
+					top,
+					width: textImgData.width,
+					height: textImgData.height,
+					scaleX,
+					scaleY,
+					angle: posParam.rotationZ,
+					originX: 'center',
+					originY: 'center',
+					clipData: {
+						id: clip.id,
+						inPoint: clip.inPoint,
+						inFrame: getFrames(clip.inPoint, 30),
+						type: "文字",
+						textColor: textFill,
+						text: textContent,
+						bgColor,
+						originClip: clip,
+						fontAssetUrl,
+						fontFamily,
+						textBasicInfo,
+						isAiError,
+						duration: clip.duration
+					},
+				})
+				imgData.on("selected", (options: any) => {
+					options.target.isSelected = -1;
+				});
+				imgData.on("moving", (options: any) => {
+					options.transform.target.isSelected = 0;
+				});
 				imgData.on('modified', () => {
 					const fObj = convertToJSON(imgData);
 					if (fObj.clipData.isAiError) {
@@ -368,12 +402,10 @@ const EditorCanvas = forwardRef(
 						vmmlConverterRef.current.updateClip(fObj);
 					}
 				});
-					canvas.add(imgData).renderAll();
-				})
-			} else {
-				waitFcTasks.current.push(createTextFromClip.bind(this, clip));
-			}
-		}
+				resolve(imgData);
+			});
+		});
+	}
 
 		// 生成简短的字体名称
 		const getFontFamilyName = (url: string) => {
@@ -529,7 +561,6 @@ const EditorCanvas = forwardRef(
 				return fc.getObjects();
 			}
 		}
-
 		const styles: any = useMemo(() => {
 			return {
 				position: "absolute",
@@ -565,11 +596,19 @@ const EditorCanvas = forwardRef(
 			}
 		}, [fc, dragState])
 
-		useEffect(() => {
-			if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
-				vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
-			}
-		}, [canvasSize, vmml]);
+	useEffect(() => {
+		if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
+			vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+		}
+	}, [canvasSize, vmml]);
+
+	// 监听 editClips 变化，自动重新渲染（参考 timeline）
+	useEffect(() => {
+		if (editClips.length && canvasReady && fc) {
+			editRenderTime.current = Date.now();
+			createEditObjes(fc, editRenderTime.current);
+		}
+	}, [editClips, canvasReady]);
 
 		useEffect(() => {
 			if (fc) {
@@ -582,6 +621,10 @@ const EditorCanvas = forwardRef(
 			}
 		}, [fc]);
 
+		const getCanvasCtx = () => {
+			return fc
+		}
+
 		useImperativeHandle(ref, () => ({
 			createImage,
 			createText,
@@ -595,8 +638,9 @@ const EditorCanvas = forwardRef(
 			checkObjectInPoint,
 			createImageFromClip,
 			createTextFromClip,
-			changeObjectVisible
-		}));
+			changeObjectVisible,
+			getCanvasCtx
+		}), [fc]);
 
 		const getActions = () => {
 			if (history) {

package/src/index.tsx

@@ -16,7 +16,7 @@ import { emotionIcon, wordIcon } from "./utils/const";
 const historyClass = new HistoryClass();
 const EditorFn = <Schema extends AnyZodObject, Props>(
 	{
-		vmml,
+		vmml: propVmml,
 		pauseFrame = 0,
 		maxText = 10,
 		maxVideo = 5,
@@ -33,7 +33,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	}: any,
 	ref: any,
 ) => {
-	vmml = convertVmmlTextScaleByForbidden(vmml);
+	const [vmmlState, setVmmlState] = useState<any>(() => convertVmmlTextScaleByForbidden(propVmml));
 	const textMenuRef = useRef<any>(null);
 	const vmmlPlayerRef = useRef();
 	const canvasRef = useRef();
@@ -45,7 +45,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	const [isPlaying, setIsPlaying] = useState<boolean>(false);
 	const [showCanvas, setShowCanvas] = useState(false);
   const [filterIds, setFilterIds] = useState<string[]>([]);
-	const [durationInFrames, setDurationInFrames] = useState(getFrames(vmml?.template?.duration || 1, fps));
+	const [durationInFrames, setDurationInFrames] = useState(getFrames(vmmlState?.template?.duration || 1, fps));
 	const [previewState, setPreviewState] = useState<boolean>(true); // true预览态 false编辑态
 	const [menuState, setMenuState] = useState<string>(""); // text 文字菜单 video 表情包菜单 空不显示
 	const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0, top: 0 }); // 画布尺寸
@@ -58,6 +58,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	const [dragState, setDragState] = useState(0);
 	const vmmlConverterRef = useRef<any>(null);
 	const [initFcObjs, setInitFcObjs] = useState([]);
+	const [editClips, setEditClips] = useState<any[]>([]); // 可编辑的 clips
+	const [refreshEdit, setRefreshEdit] = useState(0); // 触发画布刷新
 	const vmmlFlag = useRef(false);
 	const needPlay = useRef(true);
 
@@ -65,9 +67,9 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		const { current }: any = vmmlPlayerRef;
 		if (!current) return;
 		if (!once.current) {
-			current.setVmml(vmml, pauseFrame);
+			current.setVmml(vmmlState, pauseFrame);
 		} else {
-			current.setVmml(vmml, frame);
+			current.setVmml(vmmlState, frame);
 		}
 	};
 
@@ -279,18 +281,9 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 
 	// 初始化可编辑的clip
 	const initCanEditClips = (tracks: any = []) => {
-		if (editableArray.length) {
+		if (editableArray.length && tracks.length) {
 			const list = findEditClips(tracks);
-			if (list.length) {
-				const { current }: any = canvasRef;
-				list.forEach((clip: any) => {
-					if (clip.videoClip) {
-						current.createImageFromClip(clip);
-					} else {
-						if (!clip.audioClip) current.createTextFromClip(clip);
-					}
-				})
-			}
+			setEditClips(list); // 直接更新 state，让 Canvas 组件自动处理
 		}
 	};
 
@@ -324,7 +317,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	// 获取更新后的vmml
 	const getVmml = () => {
 		try {
-			const tracks = vmml.template.tracks.filter((item: any) => item.editorType === "文字");
+			const tracks = vmmlState.template.tracks.filter((item: any) => item.editorType === "文字");
 			tracks.forEach((track: any) => {
 				track.clips.forEach((clip: any) => {
 					clip.fObj.src = '';
@@ -333,7 +326,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		} catch {
 			console.log("出错了")
 		}
-		return vmml
+		return vmmlState
 	};
 
 	const getPlayer = () => {
@@ -354,19 +347,35 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	}, [previewState]);
 
 	useEffect(() => {
-		if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current && vmml) {
-			vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+		if (canvasSize.width && canvasSize.height && vmmlState) {
+			if (!vmmlConverterRef.current) {
+				vmmlConverterRef.current = new VmmlConverter({ vmml: vmmlState, canvasSize });
+			} else {
+				vmmlConverterRef.current.vmml = vmmlState;
+			}
+		}
+	}, [canvasSize, vmmlState]);
+
+	useEffect(() => {
+		if (editableArray.length && vmmlState?.template) {
+			initCanEditClips(vmmlState.template.tracks);
 		}
-		if (canvasSize.width) {
-			initCanEditClips(vmml.template.tracks);
+	}, [editableArray, refreshEdit]);
+
+	useEffect(() => {
+		if (propVmml) {
+			const convertedVmml = convertVmmlTextScaleByForbidden(propVmml);
+			setVmmlState(convertedVmml);
+			setDurationInFrames(getFrames(propVmml?.template?.duration || 1, fps));
+			setRefreshEdit(Date.now());
 		}
-	}, [canvasSize, vmml]);
+	}, [propVmml]);
 
 	useEffect(() => {
-		if (vmml) {
-			initFcObjects(vmml.template.tracks);
+		if (vmmlState) {
+			initFcObjects(vmmlState.template.tracks);
 		}
-	}, [vmml]);
+	}, [vmmlState]);
 
 	useEffect(() => {
 		if (player) {
@@ -404,7 +413,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		if (dragState === 2) {
 			needPlay.current = false;
 			const { current }: any = vmmlPlayerRef;
-			current.setVmml(vmml, frame, false);
+			current.setVmml(vmmlState, frame, false);
 			setShowCanvas(false);
 		}
 		if (dragState === 3 || dragState === 4) {
@@ -412,6 +421,24 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 			setPreviewState(false);
 		}
 	}, [dragState]);
+	
+	const updateVmml = (v: any) => {
+		const { current: playerCurrent }: any = vmmlPlayerRef;
+		const { current: canvasCurrent }: any = canvasRef;
+		if (!playerCurrent) return;
+		canvasCurrent?.getCanvasCtx()?.clear?.()
+
+		const convertedVmml = convertVmmlTextScaleByForbidden(v);
+		setVmmlState(convertedVmml);
+		setDurationInFrames(getFrames(v?.template?.duration || 1, fps));
+		playerCurrent.setVmml(convertedVmml, pauseFrame);
+		
+		setRefreshEdit(Date.now());
+		
+		if (canvasCurrent) {
+			canvasCurrent.checkObjectInPoint(pauseFrame);
+		}
+	}
 
 	useImperativeHandle(ref,
 		() => ({
@@ -420,9 +447,10 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 			getVmml,
 			getPlayer,
 			texteditClose,
-			textFinish
+			textFinish,
+			updateVmml
 		}),
-		[vmml, player]
+		[vmmlState, player]
 	)
 	const texteditClose = ()=>{
 		if (textMenuRef) {
@@ -455,7 +483,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 						<div className="vessel" onClick={onClickMain}>
 							<VmmlPlayer
 								ref={vmmlPlayerRef}
-								vmml={vmml}
+								vmml={vmmlState}
 								existenceBorderRadio
 								moveToBeginningWhenEnded
 								muted={true}
@@ -467,22 +495,23 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 								filterIds={filterIds}
 							/>
 						</div>
-						<EditorCanvas
-							ref={canvasRef}
-							previewState={previewState}
-							showCanvas={showCanvas}
-							canvasSize={canvasSize}
-							enterPreview={enterPreview}
-							intoTextEdit={intoTextEdit}
-							frame={frame}
-							vmml={vmml}
-							dragState={dragState}
-							initFcObjs={initFcObjs}
-							onVideoChange={onVideoChange}
-							isBatchModify={isBatchModify}
-							hideConfig={hideConfig}
-							// textInfoReset={textInfoReset}
-						/>
+					<EditorCanvas
+						ref={canvasRef}
+						previewState={previewState}
+						showCanvas={showCanvas}
+						canvasSize={canvasSize}
+						enterPreview={enterPreview}
+						intoTextEdit={intoTextEdit}
+						frame={frame}
+						vmml={vmmlState}
+						dragState={dragState}
+						initFcObjs={initFcObjs}
+						editClips={editClips}
+						onVideoChange={onVideoChange}
+						isBatchModify={isBatchModify}
+						hideConfig={hideConfig}
+						// textInfoReset={textInfoReset}
+					/>
 						<div className="controls-box">
 							<Controls
 								player={player}