@versa_ai/vmml-editor 1.0.2

package/src/components/EditorCanvas.tsx

@@ -0,0 +1,566 @@
+import { fabric } from "fabric";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { getFrames, argbToRgba, urlToBlob, getFontSize } from "@versa_ai/vmml-utils"
+import { v4 as uuidv4 } from "uuid";
+import HistoryClass from "../utils/HistoryClass";
+import VmmlConverter from "../utils/VmmlConverter";
+import { usePeekControl } from "../utils/usePeekControl";
+import { toSvg } from 'dom-to-image'
+
+const EditorCanvas = forwardRef(
+	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange }: any, ref: any) => {
+		const [fc, setFc] = useState<any>(null);
+		const [history, setHistory] = useState<any>(null);
+		const waitFcTasks = useRef<any>([]);
+		const vmmlConverterRef = useRef<any>(null);
+		const heightScaleRef = useRef<number>(1);
+		const widthScaleRef = useRef<number>(1);
+
+		const initCanvas = () => {
+			const canvas = new fabric.Canvas("canvas", {
+				width: canvasSize.width,
+				height: canvasSize.height,
+				selection: false, // 画布框选
+			});
+			heightScaleRef.current = vmml.template.dimension.height / canvasSize.height;
+			widthScaleRef.current = vmml.template.dimension.width / canvasSize.width;
+
+			if (initFcObjs.length) {
+				createFcObjs(canvas);
+			}
+			setFc(canvas);
+			initCanvasEvent(canvas);
+			usePeekControl(canvas);
+		};
+
+		const createFcObjs = (canvas: any) => {
+			const ns = Math.floor((frame / 30) * 1000000);
+			fabric.util.enlivenObjects(initFcObjs, (objects: any) => {
+				objects.forEach((item: any) => {
+					item.on('modified', () => {
+						const fObj = convertToJSON(item)
+						vmmlConverterRef.current.updateClip(fObj);
+					});
+					item.set("visible", ns >= item.clipData.inPoint);
+					canvas.add(item);
+				})
+				canvas.renderAll();
+			}, "")
+		}
+
+		// 检查已有元素的inpoint时间
+		const checkObjectInPoint = (f?: number) => {
+			if (fc) {
+				const ns = Math.floor(((f ?? frame) / 30) * 1000000);
+				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));
+					} else {
+						item.set("visible", ns >= item.clipData.inPoint && ns < item.clipData.inPoint + item.clipData?.fileUrl?.duration);
+					}
+				});
+				fc.discardActiveObject();
+				fc.renderAll();
+			}
+		};
+
+		const initCanvasEvent = (canvas: any) => {
+			canvas.on("mouse:down", (e: any) => {
+				const active = canvas.getActiveObject();
+				if (active) {
+					if (active.isSelected !== null && active.clipData.type === "文字") {
+						//文字内容双击
+						imitateDBclick(active, canvas);
+					}
+				} else {
+						enterPreview(canvas);
+				}
+			});
+			canvas.on('object:removed', (e: any) => {
+				if (e.target.clipData && !e.target.clipData.originClip) {
+					onVideoChange(e.target.clipData);
+				}
+				const { clipData } = e.target.toJSON(['clipData']);
+				vmmlConverterRef.current.deleteClip(clipData);
+			});
+
+			canvas.on('object:muteChange', (e: any) => {
+				const { clipData } = e.target.toJSON(['clipData'])
+				vmmlConverterRef.current.changeMute(clipData);
+			});
+
+			canvas.on('object:textEdit', (e: any) => {
+				const active = canvas.getActiveObject();
+				handleIntoTextMenu(active, canvas)
+			})
+		};
+		//模拟双击
+		const imitateDBclick = (active: any, canvas: any) => {
+			active.isSelected++;
+			//设定一个计时器，1秒内没操作重新计数
+			const timer = setTimeout(() => {
+				active.isSelected = 0;
+			}, 500);
+			if (active.isSelected === 2) {
+				active.isSelected = 0;
+				clearTimeout(timer);
+				//从画布直接跳到文字编辑
+				handleIntoTextMenu(active, canvas);
+			}
+		};
+		const handleIntoTextMenu = (active: any, canvas: any) => {
+			//从画布的Text实例里取到需要的属性，回传给文字编辑
+			const {
+				left,
+				top,
+				angle,
+				scaleX,
+				scaleY,
+				zoomX,
+				zoomY,
+				clipData: { textBasicInfo, textColor, text, bgColor, fontFamily, id, fontAssetUrl },
+			} = active;
+			const textInfo = {
+				id,
+				text,
+				textColor,
+				bgColor,
+				left,
+				top,
+				angle,
+				scaleX,
+				scaleY,
+				zoomX,
+				zoomY,
+				textBasicInfo,
+				fontFamily,
+				fontAssetUrl
+				// width,
+				// height
+			};
+			active.set('visible', false);
+			canvas.renderAll();
+			intoTextEdit(textInfo);
+		};
+
+		const convertToJSON = (data: any) => {
+			const centerPoint = data.getCenterPoint();
+			return { ...data.toJSON(["clipData", "type"]), centerPoint };
+		};
+
+		// 创建图片
+		const createImage = (file: any, emojiId: string) => {
+			const url = file.resourcesType === "image" ? file.visibleUrl : "";
+			return new Promise((resolve, reject) => {
+				try {
+					fabric.Image.fromURL(
+						url,
+						(img: any) => {
+							const scaleX = canvasSize.width / 2 / file.width;
+							img.set({
+								width: file.width,
+								height: file.height,
+								scaleX,
+								scaleY: scaleX,
+								left: canvasSize.width / 2,
+								top: canvasSize.height / 2,
+								originX: 'center',
+								originY: 'center',
+								clipData: {
+									id: uuidv4(),
+									isMute: file.hasAudio === "true" ? false : null,
+									inPoint: Math.floor((frame / 30) * 1000000),
+									inFrame: frame,
+									type: "表情包",
+									once: false,
+									emojiId,
+									fileUrl: file
+								},
+							});
+							img.on('modified', () => {
+								const fObj = convertToJSON(img);
+								fObj.src = "";
+								vmmlConverterRef.current.updateClip(fObj);
+							});
+							fc.add(img);
+							onVideoChange(img.clipData);
+							const fObj = convertToJSON(img);
+							resolve(fObj);
+						},
+						{
+							padding: 3
+						}
+					);
+				} catch (err) {
+					reject(err + "添加表情包失败");
+				}
+			});
+		};
+
+		//更新表情包图片
+		const updateImage = (id: string, base64: string, fc2: any) => {
+			const canvas = fc || fc2;
+			if (canvas) {
+				const imgs = canvas.getObjects().filter((item: any) => item?.clipData?.type === "表情包");
+				const target = imgs.find((item: any) => item.clipData.id === id);
+				if (target) {
+					target.setSrc(base64, (img: any) => {
+						img.setCoords();
+						canvas.renderAll();
+					});
+				}
+			} else {
+				waitFcTasks.current.push(updateImage.bind(this, id, base64));
+			}
+		};
+
+		// 创建可编辑的videoClip
+		const createImageFromClip = (clip: any, fc2: any) => {
+			const canvas = fc || fc2;
+			if (canvas && canvasSize.width) {
+				const url = /video/g.test(clip.videoClip.mimeType) ? "" : clip.videoClip.sourceUrl;
+				fabric.Image.fromURL(url, (img: any) => {
+					const { dimension, posParam } = clip.videoClip;
+					const scaleX = posParam.scaleX / heightScaleRef.current;
+					const scaleY = posParam.scaleY / widthScaleRef.current;
+					const left = canvasSize.width * posParam.centerX;
+					const top = canvasSize.height * posParam.centerY;
+					const inFrame = getFrames(clip.inPoint, 30);
+					const durationFrame = getFrames(clip.duration, 30);
+					img.set({
+						width: dimension.width,
+						height: dimension.height,
+						scaleX,
+						scaleY,
+						left,
+						top,
+						angle: posParam.rotationZ,
+						originX: 'center',
+        		originY: 'center',
+						clipData: {
+							id: clip.id,
+							isMute: null,
+							inPoint: clip.inPoint,
+							inFrame,
+							type: "表情包",
+							once: false,
+							fileUrl: {
+								duration: clip.duration
+							},
+							originClip: clip
+						},
+						visible: frame >= inFrame && frame < inFrame + durationFrame
+					});
+					canvas.add(img);
+					img.on('modified', () => {
+						const fObj = convertToJSON(img);
+						fObj.src = "";
+						vmmlConverterRef.current.updateClip(fObj);
+					});
+				});
+			} else {
+				waitFcTasks.current.push(createImageFromClip.bind(this, clip));
+			}
+		}
+
+		const handleRedo = () => {
+			history.redo();
+		};
+		const handleUndo = () => {
+			history.undo();
+		};
+
+		// 创建可编辑的textclip
+		const createTextFromClip = async (clip: any, fc2: any) => {
+			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));
+			}
+		}
+		
+		const embedFontInSVG = async (svgString: string, url: string) => {
+			if (url) {
+				const res = await urlToBlob({ url });
+				const fontFace = `
+					@font-face {
+						font-family: 'font-${url}';
+						src: url(${res});
+					}
+				`;
+				const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
+				return svgString.replace('</svg>', `${styleElement}</svg>`);
+			}
+			return svgString
+		}
+
+		//文字转图片
+		const createTextImg = async ({ textContent, bgColor, textColor, fontAssetUrl = null, textBasicInfo }: any) => {
+			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';
+			const lines = textContent.split('\n');
+			lines.forEach((line: string) => {
+				const p = document.createElement('p');
+				p.style.color = textColor;
+				p.style.fontSize = '22px'
+				p.style.lineHeight = '22px'
+				const font = fontAssetUrl ? `font-${fontAssetUrl}` : 'sansMedium';
+				p.style.fontFamily = font
+				p.style.whiteSpace = "nowrap"
+				// p.style.backgroundColor = bgColor;
+				p.style.padding = '0';
+				p.textContent = line || " "
+				container.appendChild(p);
+			})
+			container.style.padding = '6.5px 7px 6.5px 7px'
+			// container.style.padding = '7.5px 7px 5.8px 7px'
+			container.style.borderRadius = '5px'
+			document.body.appendChild(container)
+			const { width, height } = container?.getBoundingClientRect() as any;
+			const dataurl = await toSvg(container);
+			document.body.removeChild(container);
+			const base64Image = await embedFontInSVG(dataurl, fontAssetUrl);
+    	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,
+					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 });
+			fc.renderAll();
+		}
+
+		const getfObjectNums = (type: string) => {
+			if (fc) {
+				const objects = fc.getObjects();
+				return objects.filter((item: any) => item.clipData.type === type && !item.clipData.originClip).length;
+			}
+		};
+
+		const getfcObject = () => {
+			if (fc) {
+				return fc.getObjects();
+			}
+		}
+
+		const styles: any = useMemo(() => {
+			return {
+				position: "absolute",
+				top: canvasSize.top,
+				display: showCanvas ? "block" : "none",
+			}
+		}, [showCanvas])
+
+		useEffect(() => {
+			if (!fc && canvasSize.width) {
+				initCanvas();
+			}
+			return () => {
+				if (fc) {
+					fc.dispose();
+					setFc(null);
+				}
+			};
+		}, [canvasSize.width]);
+
+		useEffect(() => {
+			if (!previewState && fc) {
+				fc.discardActiveObject();
+				checkObjectInPoint();
+			}
+		}, [previewState]);
+
+		useEffect(() => {
+			if (fc) {
+				if (dragState === 1) {
+					fc.discardActiveObject();
+				}
+			}
+		}, [fc, dragState])
+
+		useEffect(() => {
+			if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current) {
+				vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+			}
+		}, [canvasSize, vmml]);
+
+		useEffect(() => {
+			if (fc) {
+				const historyClass = new HistoryClass(fc);
+				setHistory(historyClass);
+				if (waitFcTasks.current.length) {
+					waitFcTasks.current.forEach((item: any) => item(fc));
+					waitFcTasks.current = [];
+				}
+			}
+		}, [fc]);
+
+		useImperativeHandle(ref, () => ({
+			createImage,
+			createText,
+			updateText,
+			handleRedo,
+			handleUndo,
+			getActions,
+			getfObjectNums,
+			updateImage,
+			getfcObject,
+			checkObjectInPoint,
+			createImageFromClip,
+			createTextFromClip,
+			changeObjectVisible
+		}));
+
+		const getActions = () => {
+			if (history) {
+				return history.getActionType();
+			}
+			return []
+		};
+
+		return (
+			<div style={styles} >
+				<canvas id="canvas" />
+			</div>
+		);
+	},
+);
+
+export default EditorCanvas;

package/src/components/Loading.tsx

@@ -0,0 +1,16 @@
+import "../assets/css/loading.scss"
+
+const Loaidng = ({ show }: any) => {
+
+  const styles = {
+    display: show ? "flex" : "none"
+  }
+
+  return (
+    <div style={styles} className="page-loader">
+      <div className="light"></div>
+    </div>
+  )
+}
+
+export default Loaidng

package/src/components/MaxTextLayer.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import "../assets/css/maxTextLayer.scss";
+const MaxTextLayer = ({
+	show = false,
+	textLayerHide,
+	text,
+}: { show: boolean; textLayerHide: () => void; text: string }) => {
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			textLayerHide();
+		}, 2000);
+		return () => {
+			clearTimeout(timer);
+		};
+	});
+	return (
+		show && (
+			<>
+				<div className="container" onClick={textLayerHide}>
+					<span className="main_text">{text}</span>
+				</div>
+			</>
+		)
+	);
+};
+
+export default MaxTextLayer;