@versa_ai/vmml-editor 1.0.14 → 1.0.16

package/package.json

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

package/src/assets/css/index.scss

@@ -308,7 +308,7 @@
         }
       }
       .player-controls-time {
-        width: 6vw !important;
+        width: 60px !important;
       }
     }
   }

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,45 @@ const EditorCanvas = forwardRef(
 			}
 		};
 
-		// 创建可编辑的videoClip
-		const createImageFromClip = (clip: any, fc2: any) => {
+	const createEditObjes = async (canvas: any, time: number) => {
+		// 先删除所有旧的可编辑对象
+		const allObjects = canvas.getObjects();
+		const toRemove: any[] = [];
+		allObjects.forEach((obj: any) => {
+			if (obj?.clipData?.originClip) {
+				toRemove.push(obj);
+			}
+		});
+		toRemove.forEach(obj => canvas.remove(obj));
+		
+		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,100 +291,131 @@ 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) => {
+		if (!canvas) return;
+		const textObjects = canvas.getObjects().filter((item: any) => item?.clipData?.type === "文字");
+		const { left, top, scaleX, scaleY, angle } = fObj;
+		
+		// 批量更新每个文字对象的位置
+		textObjects.forEach((textObj: any) => {
+			textObj.set({
+				left,
+				top,
+				scaleX,
+				scaleY,
+				angle
+			});
+			textObj.setCoords();
+			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;
-					});
-					imgData.on('modified', () => {
-						const fObj = convertToJSON(imgData);
-						if (fObj.clipData.isAiError) {
-							fObj.clipData.textColor = 'rgba(0, 0, 0, 0)';
-						}
-						vmmlConverterRef.current.updateClip(fObj);
-					});
-					canvas.add(imgData).renderAll();
-				})
-			} else {
-				waitFcTasks.current.push(createTextFromClip.bind(this, clip));
+			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) {
+						fObj.clipData.textColor = 'rgba(0, 0, 0, 0)';
+					}
+					if (isBatchModify) {
+						onBatchModify(fObj, canvas)
+					} else {
+						vmmlConverterRef.current.updateClip(fObj);
+					}
+				});
+				resolve(imgData);
+			});
+		});
+	}
 
 		// 生成简短的字体名称
 		const getFontFamilyName = (url: string) => {
@@ -538,11 +607,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) {

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 {
-						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,23 @@ 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;
+		
+		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 +446,10 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 			getVmml,
 			getPlayer,
 			texteditClose,
-			textFinish
+			textFinish,
+			updateVmml
 		}),
-		[vmml, player]
+		[vmmlState, player]
 	)
 	const texteditClose = ()=>{
 		if (textMenuRef) {
@@ -455,7 +482,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 +494,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}

package/src/utils/VmmlConverter.ts

@@ -27,7 +27,6 @@ class VmmlConverter {
 
 	//更新位置
 	private setPosParam(fObj: any): object {
-		console.log("setPosParam fObj",fObj)
 		const {
 			clipData: { type },
 			centerPoint,