@versa_ai/vmml-editor 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -16,7 +16,7 @@
     "remotion": "4.0.166",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
-    "@versa_ai/vmml-player": "1.1.20",
+    "@versa_ai/vmml-player": "1.1.21",
     "@versa_ai/vmml-utils": "1.0.15"
   },
   "devDependencies": {

package/src/components/EditorCanvas.tsx

@@ -9,16 +9,17 @@ import { toSvg } from 'dom-to-image'
 
 const EditorCanvas = forwardRef(
 	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter }: 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);
-		const widthScaleRef = useRef<number>(1);
-
-		const initCanvas = () => {
+	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);
+	const widthScaleRef = useRef<number>(1);
+	const fontCacheRef = useRef<Map<string, Promise<string | null>>>(new Map());
+
+	const initCanvas = () => {
 			const canvas = new fabric.Canvas("canvas", {
 				width: canvasSize.width,
 				height: canvasSize.height,
@@ -58,9 +59,9 @@ const EditorCanvas = forwardRef(
 				const objects = fc.getObjects();
 				objects.forEach((item: any) => {
 					if (item?.clipData?.type === "文字") {
-						item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
+						item.set("visible", item.clipData.duration >0 && ns >= item.clipData.inPoint && ns < item.clipData.inPoint + (item.clipData.duration || vmml.template.duration));
 					} else {
-						item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + item.clipData?.fileUrl?.duration);
+						item.set("visible", item.clipData.duration >0 && ns >= item.clipData.inPoint && ns < item.clipData.inPoint + item.clipData?.fileUrl?.duration);
 					}
 				});
 				fc.discardActiveObject();
@@ -225,7 +226,7 @@ const EditorCanvas = forwardRef(
 				return createImageFromClip(clip);
 			}
 			if (clip.textClip && !clip.audioClip) {
-				return createTextFromClip(clip);
+				return createTextFromClipCanvas(clip);
 			}
 		});
 		const res = await Promise.allSettled(promises);
@@ -235,6 +236,7 @@ const EditorCanvas = forwardRef(
 				objects.push(item.value);
 			}
 		});
+		console.log(editRenderTime.current === time, 'editRenderTime.current === time')
 		if (editRenderTime.current === time) {
 			canvas.add(...objects).renderAll();
 			checkObjectInPoint()
@@ -327,6 +329,151 @@ const EditorCanvas = forwardRef(
 	}
 
 	// 创建可编辑的textclip
+	const createTextFromClipCanvas = async (clip: any, fc2?: fabric.Canvas) => {
+		return new Promise<fabric.Group>(async (resolve) => {
+			const canvas = fc || fc2;
+			if (!canvas) return null;
+
+			const { width, height } = vmml.template.dimension;
+			const fontSize = getFontSize(width, height);
+
+			const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth, letterSpacing } = 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 stColor = strokeColor ? argbToRgba(strokeColor) : 'transparent';
+			const textFill = argbToRgba(textColor || '#ffffffff');
+			const strokeW = strokeColor&& strokeWidth ? strokeWidth * 26 * 1.5 / fontSize : 0;
+			const letterSpace = letterSpacing * 22 / fontSize;
+
+			// 加载字体
+			let fontFamily = 'sansMedium';
+			if (fontAssetUrl) {
+				const base64 = await loadFont(fontAssetUrl);
+				if (base64) {
+					fontFamily = getFontFamilyName(fontAssetUrl);
+					await document.fonts.ready;
+				}
+			}
+			const lines = textContent.split('\n').filter((item: string) => item);
+			const lineHeight = 22 + strokeW; // 行高
+			const textHeight = lines.length * lineHeight;
+			const groupWidth = Math.max(...lines.map((l: any) => {
+				const temp = new fabric.Text(l || ' ', { fontSize: 22, fontFamily, charSpacing: (letterSpace || 0) * 50, strokeWidth: strokeW ?? 0});
+				return temp?.width ?? 0;
+			})) + 14;
+			const groupHeight = textHeight + 13; // padding
+
+			// 创建双层文字
+			const textObjs: fabric.Object[] = [];
+			lines.forEach((line: string, idx: number) => {
+				const y = (groupHeight - textHeight) / 2 + idx * lineHeight + lineHeight / 2 + 1;
+
+				// 描边文字
+				const strokeText = new fabric.Text(line || ' ', {
+					fontFamily,
+					fontSize: 22,
+					fill: 'transparent',
+					stroke: stColor,
+					strokeWidth: strokeW,
+					originX: 'center',
+					originY: 'center',
+					left: groupWidth / 2, // 水平居中
+					top: y,
+					charSpacing: (letterSpace || 0) * 50,
+					textAlign: alignType === 1 ? 'center' : alignType === 2 ? 'right' : 'left',
+					objectCaching: false,
+				});
+
+				// 填充文字
+				const fillText = new fabric.Text(line || ' ', {
+					fontFamily,
+					fontSize: 22,
+					fill: textFill,
+					stroke: 'transparent',
+					originX: 'center',
+					originY: 'center',
+					strokeWidth: 0,
+					left: groupWidth / 2, // 水平居中
+					top: y,
+					charSpacing: (letterSpace || 0) * 50,
+					textAlign: alignType === 1 ? 'center' : alignType === 2 ? 'right' : 'left',
+					objectCaching: false,
+				});
+
+				textObjs.push(strokeText, fillText);
+			});
+
+			// 背景矩形
+			const bgRect = new fabric.Rect({
+				width: groupWidth,
+				height: groupHeight,
+				fill: bgColor,
+				originX: 'left',
+				originY: 'top',
+				rx: 5,
+				ry: 5,
+				left: 0,
+				top: 0,
+			});
+
+			const textBasicInfo = {
+				isBack: backgroundColor ? true : false,
+				colorValue: textFill,
+				colorName: 'custom',
+				textAlign: alignType === 1 ? 'center' : (alignType === 2 ? 'right' : 'left')
+			}
+			// 组合 group
+			const group = new fabric.Group([bgRect, ...textObjs], {
+				left,
+				top,
+				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,
+					duration: clip.duration
+				},
+				objectCaching: false,
+			});
+
+			// 事件
+			group.on("selected", (options: any) => {
+				options.target.isSelected = -1;
+			});
+			group.on("moving", (options: any) => {
+				options.transform.target.isSelected = 0;
+			});
+			group.on('modified', () => {
+				const fObj = convertToJSON(group);
+				if (fObj.clipData.isAiError) {
+					fObj.clipData.textColor = 'rgba(0, 0, 0, 0)';
+				}
+				if (isBatchModify) {
+					onBatchModify(fObj, canvas)
+				} else {
+					vmmlConverterRef.current.updateClip(fObj);
+				}
+			});
+
+		resolve(group);
+	});
+	};
 	const createTextFromClip = async (clip: any, fc2?: any) => {
 		return new Promise(async (resolve) => {
 			const canvas = fc || fc2;
@@ -407,6 +554,7 @@ const EditorCanvas = forwardRef(
 						vmmlConverterRef.current.updateClip(fObj);
 					}
 				});
+				console.log('fabricjs>>>end>>>>>>>>>>>>')
 				resolve(imgData);
 			});
 		});
@@ -451,18 +599,30 @@ const EditorCanvas = forwardRef(
 
 	const loadFont = async (url: any) => {
 		if (!url) return null
-		try {
-			const base64 = await urlToBlob({ url });
-			const fontFamilyName = getFontFamilyName(url);
-			const format = detectFontFormat(url);
-			
-			const fontFace = new FontFace(fontFamilyName, `url(${base64})${format ? ` format('${format}')` : ''}`);
-			await fontFace.load();
-			(document.fonts as any).add(fontFace);
-			return base64
-		} catch (e) {
-			return null
+		
+		// 检查缓存
+		if (fontCacheRef.current.has(url)) {
+			return fontCacheRef.current.get(url)!;
 		}
+		
+		const loadPromise = (async () => {
+			try {
+				const base64 = await urlToBlob({ url });
+				const fontFamilyName = getFontFamilyName(url);
+				const format = detectFontFormat(url);
+				
+				const fontFace = new FontFace(fontFamilyName, `url(${base64})${format ? ` format('${format}')` : ''}`)
+				await fontFace.load();
+				(document.fonts as any).add(fontFace);
+				return base64
+			} catch (e) {
+				console.error('Font load failed:', url, e);
+				return null
+			}
+		})();
+		
+		fontCacheRef.current.set(url, loadPromise as any);
+		return loadPromise;
 	}
 
 	const setTextAlign = (p: any, stroke: any, direction: 'left' | 'center' | 'right') => {
@@ -487,11 +647,9 @@ const EditorCanvas = forwardRef(
 
 	//文字转图片
 	const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo, letterSpacing }: any) => {
-		const fontBase64 = await loadFont(fontAssetUrl)
+		const fontBase64 = await loadFont(fontAssetUrl);
 		const container = document.createElement('div');
 		container.style.backgroundColor = bgColor
-		// container.style.width = `fit-content`
-		// container.style.height = `fit-content`
 		container.style.boxSizing = 'content-box'
 		container.style.display = 'inline-block'
 		container.style.textAlign = textBasicInfo.textAlign || 'left';
@@ -553,72 +711,72 @@ const EditorCanvas = forwardRef(
 		const base64Image = await embedFontInSVG(dataurl, fontAssetUrl, fontBase64);
 		return { base64Image, height, width };
 	}
-		const createText = async ({ textContent, bgColor, textColor, position, textBasicInfo, id }: any, fc2: any) => {
-			const canvas = fc || fc2;
-			const { left, top, angle, scaleX, scaleY, zoomX, zoomY } = position;
-			const textImgData = await createTextImg({ textContent, bgColor, textColor, textBasicInfo });
-			return new Promise((resolve, reject) => {
-				fabric.Image.fromURL(textImgData.base64Image, (imgData: any) => {
-					imgData.set({
-						left, 
-						top,
-						angle,
-						width: textImgData.width,
-						height: textImgData.height,
-						scaleX,
-						scaleY,
-						clipData: {
-							id: uuidv4(),
-							inPoint: Math.floor((frame / 30) * 1000000),
-							inFrame: frame,
-							type: "文字",
-							textBasicInfo,
-							textColor: textColor,
-							text: textContent,
-							bgColor: bgColor
-						},
-					})
-					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)
-						vmmlConverterRef.current.updateClip(fObj);
-					});
-					canvas.centerObject(imgData);
-					canvas.add(imgData)
-					setTimeout(()=>{
-						canvas.renderAll();	
-					})
-					onVideoChange(imgData.clipData);
-					vmmlConverterRef.current.addTextClip(convertToJSON(imgData));
-					resolve(true);
-				})
-			}) 
-		};
-		const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }: any) => {
-			const textImgData = await createTextImg({ textContent, bgColor, textColor, fontAssetUrl, textBasicInfo });
-			const target = fc.getObjects().find((item: any) => item.clipData.id === id);
-			target.setSrc(textImgData.base64Image, (img: any) => {
-				img.set({
-					visible: true,
+	const createText = async ({ textContent, bgColor, textColor, position, textBasicInfo, id }: any, fc2: any) => {
+		const canvas = fc || fc2;
+		const { left, top, angle, scaleX, scaleY, zoomX, zoomY } = position;
+		const textImgData = await createTextImg({ textContent, bgColor, textColor, textBasicInfo });
+		return new Promise((resolve, reject) => {
+			fabric.Image.fromURL(textImgData.base64Image, (imgData: any) => {
+				imgData.set({
+					left, 
+					top,
+					angle,
+					width: textImgData.width,
+					height: textImgData.height,
+					scaleX,
+					scaleY,
 					clipData: {
-						...img.clipData,
+						id: uuidv4(),
+						inPoint: Math.floor((frame / 30) * 1000000),
+						inFrame: frame,
+						type: "文字",
 						textBasicInfo,
 						textColor: textColor,
 						text: textContent,
-						bgColor: bgColor,
-						isAiError: false
-					}
+						bgColor: bgColor
+					},
 				})
-				img.setCoords();
-				fc.renderAll();
-				vmmlConverterRef.current.updateClip(convertToJSON(img));
-			});
-		}
+				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)
+					vmmlConverterRef.current.updateClip(fObj);
+				});
+				canvas.centerObject(imgData);
+				canvas.add(imgData)
+				setTimeout(()=>{
+					canvas.renderAll();	
+				})
+				onVideoChange(imgData.clipData);
+				vmmlConverterRef.current.addTextClip(convertToJSON(imgData));
+				resolve(true);
+			})
+		}) 
+	};
+	const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }: any) => {
+		const textImgData = await createTextImg({ textContent, bgColor, textColor, fontAssetUrl, textBasicInfo });
+		const target = fc.getObjects().find((item: any) => item.clipData.id === id);
+		target.setSrc(textImgData.base64Image, (img: any) => {
+			img.set({
+				visible: true,
+				clipData: {
+					...img.clipData,
+					textBasicInfo,
+					textColor: textColor,
+					text: textContent,
+					bgColor: bgColor,
+					isAiError: false
+				}
+			})
+			img.setCoords();
+			fc.renderAll();
+			vmmlConverterRef.current.updateClip(convertToJSON(img));
+		});
+	}
 		const changeObjectVisible = (id: string, visible: boolean = true) => {
 			const target = fc.getObjects().find((item: any) => item.clipData.id === id);
 			target.set({ visible });
@@ -673,8 +831,12 @@ const EditorCanvas = forwardRef(
 		}, [fc, dragState])
 
 	useEffect(() => {
-		if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
-			vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+		if (canvasSize.width && canvasSize.height) {
+			if (vmmlConverterRef.current) {
+
+			} else {
+				vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+			}
 		}
 	}, [canvasSize, vmml]);
 

package/src/utils/VmmlConverter.ts

@@ -176,26 +176,30 @@ class VmmlConverter {
 	 * @param fObj - 画布fObj
 	 */
 	public updateClip(fObj: any) {
-		console.log("updateClip fObj", fObj);
+		console.log("updateClip fObj", fObj, this.tracks);
 		const posParam = this.setPosParam(fObj);
 		const {
-			// clipData: { id, type, lineSpacing },
 			clipData: { id, type, lineSpacing, originClip },
 		} = fObj;
-		let existClip = null;
-		// 模板内可编辑的clip
-		if (originClip) {
-			existClip = originClip;
-		} else {
-			const editorTrack = this.tracks.find((track: any) => track.editorType === type);
-			existClip = (editorTrack?.clips || []).find((clip: any) => clip.id === id);
+	let existClip = null;
+	if (originClip) {
+		for (const track of this.tracks) {
+			const clip = (track.clips || []).find((c: any) => c.id === originClip.id);
+			if (clip) {
+				existClip = clip;
+				break;
+			}
 		}
+	} else {
+		const editorTrack = this.tracks.find((track: any) => track.editorType === type);
+		existClip = (editorTrack?.clips || []).find((clip: any) => clip.id === id);
+	}
 		
 		if (existClip) {
 			//修改现有clip的代码
 			!originClip && (existClip.fObj = fObj);
 			if (type === "表情包") {
-				existClip.videoClip.posParam = posParam;
+					existClip.videoClip.posParam = posParam;
 			} else if (type === "文字") {
 				const { clipData: { text, textColor, bgColor}} = fObj;
 				const scale = this.fontSize / 22;
@@ -213,7 +217,7 @@ class VmmlConverter {
 			}
 		}
 
-		console.log("updateClip 最终vmml", this.vmml);
+		// console.log("updateClip 最终vmml", this.vmml);
 	}
 
 	/**
@@ -222,13 +226,18 @@ class VmmlConverter {
 	 * @param type - 实例 类型
 	 */
 	public deleteClip({ id, type, originClip }: { id: string; type: string, originClip: any }): void {
-		// 模板内的可编辑clip
 		if (originClip) {
-			originClip.duration = 0;
+			for (const track of this.tracks) {
+				const clip = (track.clips || []).find((c: any) => c.id === originClip.id);
+				if (clip) {
+					clip.duration = 0;
+					break;
+				}
+			}
 		} else {
 			const editorTrack = this.tracks.find((track: any) => track.editorType === type);
 			const index = editorTrack.clips.findIndex((item: any) => item.id === id);
-	
+			
 			if (index !== -1) {
 				if (editorTrack.clips[index + 1] && editorTrack.clips[index + 1].audioClip) {
 					editorTrack.clips.splice(index, 2); // 删除当前元素及下一个 audio 元素
@@ -244,8 +253,10 @@ class VmmlConverter {
 				}
 			}
 		}
+	}
 
-		console.log("deleteClip 最终Vmml", this.vmml);
+	changeVmml (newVmml: any) {
+		this.vmml = newVmml;
 	}
 
 	//切换静音 视频/音频