@versa_ai/vmml-editor 1.0.39 → 1.0.41

package/package.json

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

package/src/components/EditorCanvas.tsx

@@ -57,12 +57,11 @@ const EditorCanvas = forwardRef(
 			if (fc) {
 				const ns = Math.floor(((f ?? frame) / 30) * 1000000);
 				const objects = fc.getObjects();
-				console.log(objects, 'fc>>>>>>>>>>>>>>>>', frame)
 				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();
@@ -359,8 +358,7 @@ const EditorCanvas = forwardRef(
 					await document.fonts.ready;
 				}
 			}
-
-			const lines = textContent.split('\n');
+			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) => {
@@ -833,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) {
+				vmmlConverterRef.current.changeVmml(vmml)
+			} else {
+				vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+			}
 		}
 	}, [canvasSize, vmml]);
 

package/src/utils/VmmlConverter.ts

@@ -74,6 +74,21 @@ class VmmlConverter {
 		};
 	}
 
+	findClip (id: string | Array<string>) {
+		const tracks = this.vmml.template.tracks || [];
+		const isString = typeof id === 'string'
+		const ids = isString ? [id] : id;
+		const list: any = [];
+		tracks.forEach((track: any) => {
+			track.clips.forEach((clip: any) => {
+				if (ids?.includes(clip.id)) {
+					list.push(clip);
+				}
+			})
+		});
+		return list
+	}
+
 	/**
 	 * 转换 TextClip
 	 * @param fObj - 画布fObj
@@ -176,26 +191,18 @@ 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);
-		}
+		const [existClip] = this.findClip(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 +220,7 @@ class VmmlConverter {
 			}
 		}
 
-		console.log("updateClip 最终vmml", this.vmml);
+		// console.log("updateClip 最终vmml", this.vmml);
 	}
 
 	/**
@@ -222,13 +229,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 +256,10 @@ class VmmlConverter {
 				}
 			}
 		}
+	}
 
-		console.log("deleteClip 最终Vmml", this.vmml);
+	changeVmml (newVmml: any) {
+		this.vmml = newVmml;
 	}
 
 	//切换静音 视频/音频