@versa_ai/vmml-editor 1.0.2

package/src/index.tsx

@@ -0,0 +1,551 @@
+import { VmmlPlayer } from "@versa_ai/vmml-player";
+import { type MutableRefObject, forwardRef, useEffect, useRef, useState, useImperativeHandle, useMemo } from "react";
+import type { AnyZodObject } from "zod";
+import { getFrames, takeScreenshot, convertVmmlTextScaleByForbidden } from "@versa_ai/vmml-utils";
+import "./assets/css/index.scss";
+import Controls from "./components/Controls";
+import EditorCanvas from "./components/EditorCanvas";
+import Loaidng from "./components/Loading";
+import MaxTextLayer from "./components/MaxTextLayer";
+import TextMenu from "./components/TextMenu";
+import VideoMenu from "./components/VideoMenu";
+import HistoryClass from "./utils/HistoryClass";
+import VmmlConverter from "./utils/VmmlConverter";
+import { emotionIcon, wordIcon } from "./utils/const";
+
+const historyClass = new HistoryClass();
+const EditorFn = <Schema extends AnyZodObject, Props>(
+	{
+		vmml,
+		pauseFrame = 0,
+		maxText = 10,
+		maxVideo = 5,
+		videoMenus = [],
+		onMenuChange,
+		showTextButtons = false,
+		editableArray = [],
+		templateId,
+		strategyId,
+		pauseWhenBuffering = false,
+	}: any,
+	ref: any,
+) => {
+	vmml = convertVmmlTextScaleByForbidden(vmml);
+	const textMenuRef = useRef<any>(null);
+	const vmmlPlayerRef = useRef();
+	const canvasRef = useRef();
+	const fps = 30;
+	const once = useRef(false);
+	const [player, setPlayer] = useState<any>();
+	const [loading, setLoading] = useState<boolean>(true);
+	const [frame, setFrame] = useState<number>(pauseFrame);
+	const [isPlaying, setIsPlaying] = useState<boolean>(false);
+	const [showCanvas, setShowCanvas] = useState(false);
+	const [durationInFrames, setDurationInFrames] = useState(getFrames(vmml?.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 }); // 画布尺寸
+	const [textInfo, setTextInfo] = useState({});
+	const [isShowMaxTextLayer, setIsShowMaxTextLayer] = useState(false);
+	const [buffering, setBuffering] = useState(false);
+	const videoList = useRef<any>([]);
+	const [signList, setSignList] = useState<any>([]);
+	const [tips, setTips] = useState("");
+	const [dragState, setDragState] = useState(0);
+	const vmmlConverterRef = useRef<any>(null);
+	const [initFcObjs, setInitFcObjs] = useState([]);
+	const vmmlFlag = useRef(false);
+	const needPlay = useRef(true);
+
+	const setVmml = () => {
+		const { current }: any = vmmlPlayerRef;
+		if (!current) return;
+		if (!once.current) {
+			current.setVmml(vmml, pauseFrame);
+		} else {
+			current.setVmml(vmml, Math.max(0, frame - 3));
+		}
+	};
+
+	const hideLoading = () => {
+		const { current }: any = vmmlPlayerRef;
+		vmmlFlag.current = false;
+		if (current && current.playerRef) {
+			setPlayer(current.playerRef);
+			current.unmute();
+			if (!once.current) {
+				once.current = true;
+			} else {
+				if (needPlay.current) {
+					current.play();
+				} else {
+					needPlay.current = true;
+				}
+			}
+		}
+		setShowCanvas(false);
+		setLoading(false);
+	};
+
+	const onClickMain = () => {
+		if (buffering) return
+		const { current }: any = vmmlPlayerRef;
+		if (current) {
+			if (isPlaying) {
+				intoEdit();
+			} else {
+				current.unmute();
+				current.play();
+			}
+		}
+	};
+
+	// 回到预览态
+	const enterPreview = (canvas: any, hiddenMenu: boolean = false) => {
+		if (hiddenMenu) {
+			setMenuState("");
+		} else {
+			setMenuState("");
+			setPreviewState(true);
+			historyClass.onCanvasRoute(canvas);
+		}
+	};
+
+	const onControlsClick = () => {
+		if (previewState) {
+			const { current }: any = vmmlPlayerRef;
+			current.unmute();
+			current.play();
+		} else {
+			setMenuState("");
+			setPreviewState(true);
+		}
+	}
+
+	// 点击底部菜单
+	const onClickMenu = (type: string) => {
+		if (type === "text" && checkTextNum()) return;
+		if (type === "video" && checkVideoNum()) return;
+		if (previewState) {
+			intoEdit();
+		}
+		setTextInfo({});
+		setMenuState(type);
+	};
+
+	const checkTextNum = () => {
+		const { current }: any = canvasRef;
+		if (current) {
+			const textNums = current.getfObjectNums("文字");
+			if (textNums >= maxText) {
+				setTips(`最多添加${maxText}个文字`);
+				setIsShowMaxTextLayer(true);
+				return true;
+			}
+		}
+		return false;
+	};
+	// 检查表情包数量
+	const checkVideoNum = () => {
+		const { current }: any = canvasRef;
+		if (current) {
+			const videoNum = current.getfObjectNums("表情包");
+			if (videoNum >= maxVideo) {
+				setTips(`最多添加${maxVideo}个表情包`);
+				setIsShowMaxTextLayer(true);
+				return true;
+			}
+		}
+		return false;
+	};
+
+	// 获取画板素材实例
+	const getfcObject = () => {
+		const { current }: any = canvasRef;
+		if (current) {
+			return current.getfcObject();
+		}
+		return []
+	}
+
+	// 暂停进入编辑
+	const intoEdit = (frame?: number) => {
+		const { current }: any = vmmlPlayerRef;
+		if (current) {
+			frame && current.seekTo(frame);
+			current.pause();
+			if (canvasRef.current) {
+				const { current: canvasC }: any = canvasRef;
+				canvasC.checkObjectInPoint(frame);
+			}
+			getAllVideoFrames();
+			setShowCanvas(true);
+			setPreviewState(false);
+		}
+	};
+
+	// 获取表情包当前帧截图
+	const getAllVideoFrames = () => {
+		const { current }: any = canvasRef;
+		const doms = document.querySelectorAll("[data-clipid][data-cliptype=video][data-editorType],[data-editclip='true'][data-cliptype=video]");
+		for (const item of Array.from(doms)) {
+			const id = item.getAttribute("data-clipid");
+			const video = item.querySelector("video");
+			const base64 = takeScreenshot(video);
+			current.updateImage(id, base64);
+		}
+		switchClipDisplay("none");
+	}
+
+	// 隐藏新增的clip
+	const switchClipDisplay = (display: string) => {
+		const clips = document.querySelectorAll("[data-editorType],[data-editclip='true']");
+		clips.forEach((clip: any) => {
+			clip.style.display = display;
+		})
+	};
+
+	// 新增表情包
+	const createImage = async (file: any, emojiId: string) => {
+		const { current }: any = canvasRef;
+		if (current && !checkVideoNum()) {
+			const fObj = await current.createImage(file, emojiId);
+			vmmlConverterRef.current.addVideoClip(fObj);
+			setMenuState("");
+			setPreviewState(true);
+		}
+	};
+
+	const createText = async (data: any) => {
+		const { current }: any = canvasRef;
+		if (current) {
+			const server = data.id ? 'updateText' : 'createText';
+			await current[server](data);
+			setMenuState("");
+		}
+	};
+
+	const onVideoChange = (clipData: any) => {
+		const index = videoList.current.findIndex((item: any) => item.id === clipData.id);
+		if (index > -1) {
+			videoList.current.splice(index, 1);
+		} else {
+			videoList.current.push(clipData);
+		}
+		setSignList([...videoList.current]);
+	}
+
+	const handleUndo = () => {
+		const { current }: any = canvasRef;
+		if (current) {
+			current.handleUndo();
+		}
+	};
+	const handleRedo = () => {
+		const { current }: any = canvasRef;
+		if (current) {
+			current.handleRedo();
+		}
+	};
+
+	const getActions = () => {
+		const { current }: any = canvasRef;
+		return current.getActions().length
+	}
+	const textClose = (id: string) => {
+		const { current }: any = canvasRef;
+		id && current.changeObjectVisible(id);
+		setMenuState("");
+	};
+
+	const intoTextEdit = (textInfo: any) => {
+		setMenuState("text");
+		setTextInfo(textInfo);
+	};
+
+	const onFrameUpdate = (e: any) => {
+		setFrame(e.detail.frame)
+	};
+	const onPlay = () => {
+		setIsPlaying(true);
+	};
+	const onPause = () => {
+		setIsPlaying(false);
+	};
+	const onWaiting = () => {
+		setShowCanvas(false);
+		setPreviewState(true);
+		setBuffering(true);
+	}
+
+	const onResume = () => {
+		setBuffering(false);
+	}
+
+	// 初始化可编辑的clip
+	const initCanEditClips = (tracks: any = []) => {
+		if (editableArray.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);
+					}
+				})
+			}
+		}
+	};
+
+	const findEditClips = (tracks: any = []) => {
+		const list: any = [];
+		tracks.forEach((track: any) => {
+			track.clips.forEach((clip: any) => {
+				if (editableArray.includes(clip.id)) {
+					clip.edit = true;
+					list.push(clip);
+				}
+			})
+		});
+		return list
+	}
+
+	// 返序列化fc对象
+	const initFcObjects = (tracks: any = []) => {
+		const fcTracks = tracks.filter((item: any) => item.editorType);
+		if (fcTracks.length) {
+			const clips = fcTracks.map((item: any) => item.clips).flat().filter((item: any) => Reflect.has(item, "fObj"));
+			const fObjs = clips.map((item: any) => item.fObj);
+			setInitFcObjs(fObjs);
+			// 表情包标记
+			fObjs.forEach((item: any) => {
+				onVideoChange(item.clipData);
+			});
+		}
+	}
+
+	// 获取更新后的vmml
+	const getVmml = () => {
+		try {
+			const tracks = vmml.template.tracks.filter((item: any) => item.editorType === "文字");
+			tracks.forEach((track: any) => {
+				track.clips.forEach((clip: any) => {
+					clip.fObj.src = '';
+				})
+			})
+		} catch {
+			console.log("出错了")
+		}
+		return vmml
+	};
+
+	const getPlayer = () => {
+		return player
+	}
+
+	useEffect(() => {
+		if (onMenuChange && typeof onMenuChange === "function") {
+			onMenuChange(menuState);
+		}
+	}, [menuState]);
+
+	useEffect(() => {
+		if (previewState && !vmmlFlag.current) {
+			vmmlFlag.current = true;
+			setVmml();
+		}
+	}, [previewState]);
+
+	useEffect(() => {
+		if (canvasSize.width && canvasSize.height && !vmmlConverterRef.current && vmml) {
+			vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+		}
+		if (canvasSize.width) {
+			initCanEditClips(vmml.template.tracks);
+		}
+	}, [canvasSize, vmml]);
+
+	useEffect(() => {
+		if (vmml) {
+			initFcObjects(vmml.template.tracks);
+		}
+	}, [vmml]);
+
+	useEffect(() => {
+		if (!showCanvas) {
+			switchClipDisplay("block");
+		}
+	}, [showCanvas])
+
+	useEffect(() => {
+		if (player) {
+			const parent = player.getContainerNode();
+			if (!canvasSize.width) {
+				const playerElement = parent?.children[0];
+				const { width, height } = playerElement?.getBoundingClientRect() || {};
+				setCanvasSize({ width, height, top: playerElement.offsetTop });
+			}
+			player.addEventListener("play", onPlay);
+			player.addEventListener("pause", onPause);
+			player.addEventListener("frameupdate", onFrameUpdate);
+			player.addEventListener("waiting", onWaiting);
+			player.addEventListener("resume", onResume);
+			return () => {
+				player.removeEventListener("play", onPlay);
+				player.removeEventListener("pause", onPause);
+				player.removeEventListener("frameupdate", onFrameUpdate);
+				player.removeEventListener("waiting", onWaiting);
+				player.removeEventListener("resume", onResume);
+			}
+		}
+	}, [player]);
+	
+
+	useEffect(() => {
+		if (dragState === 2) {
+			needPlay.current = false;
+			const { current }: any = vmmlPlayerRef;
+			current.setVmml(vmml, frame, false);
+			setShowCanvas(false);
+		}
+		if (dragState === 3 || dragState === 4) {
+			setShowCanvas(true);
+			setPreviewState(false);
+		}
+	}, [dragState]);
+
+	useImperativeHandle(ref,
+		() => ({
+			getActions,
+			getfcObject,
+			getVmml,
+			getPlayer,
+			texteditClose,
+			textFinish
+		}),
+		[vmml, player]
+	)
+	const texteditClose = ()=>{
+		if (textMenuRef) {
+			textMenuRef.current.close();
+		}
+	}
+	const textFinish = () =>{
+		if (textMenuRef) {
+			textMenuRef.current.handleSubmit();
+		}
+	}
+
+	const menuStyles: any = useMemo(() => {
+		if (loading) {
+			return {
+				opacity: 0.4,
+				pointerEvents: 'none'
+			}
+		}
+		return {}
+	}, [loading])
+
+	return (
+		<>
+			<div className="editor">
+				<div className="editor-vessel" onClick={() => {
+					setMenuState("")
+				}}>
+					<section className={`main ${menuState === 'text' ? 'text-style' : ''}`}>
+						<div className="vessel" onClick={onClickMain}>
+							<VmmlPlayer
+								ref={vmmlPlayerRef}
+								vmml={vmml}
+								existenceBorderRadio
+								moveToBeginningWhenEnded
+								isEditorState
+								muted={true}
+								fps={fps}
+								hideLoading={hideLoading}
+								editableArray={editableArray}
+								premountFor={40}
+								pauseWhenBuffering={pauseWhenBuffering}
+							/>
+						</div>
+						<EditorCanvas
+							ref={canvasRef}
+							previewState={previewState}
+							showCanvas={showCanvas}
+							canvasSize={canvasSize}
+							enterPreview={enterPreview}
+							intoTextEdit={intoTextEdit}
+							frame={frame}
+							vmml={vmml}
+							dragState={dragState}
+							initFcObjs={initFcObjs}
+							onVideoChange={onVideoChange}
+							// textInfoReset={textInfoReset}
+						/>
+						<div className="controls-box">
+							<Controls
+								player={player}
+								vmmlRef={vmmlPlayerRef}
+								fps={fps}
+								durationInFrames={durationInFrames}
+								intoEdit={intoEdit}
+								frame={frame}
+								isPlaying={isPlaying}
+								setDragState={setDragState}
+								onControlsClick={onControlsClick}
+								signList={signList}
+							/>
+						</div>
+						<Loaidng show={loading} />
+					</section>
+				</div>
+				<div className="padding-box"></div>
+						<section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
+							{
+								maxText > 0 && (
+									<div
+										onClick={() => onClickMenu("text")}
+										data-aspm-click="c375146.d480849"
+										data-aspm-expo
+										data-aspm-param={`Template_Id=${templateId}^Strategy_Id=${strategyId}`}
+										>
+										<img src={wordIcon} alt="word" />
+										<p>文字</p>
+									</div>
+								)
+							}
+							{
+								maxVideo > 0 && (
+									<div
+										onClick={() => onClickMenu("video")}
+										data-aspm-click="c375146.d480850"
+										data-aspm-expo
+										data-aspm-param={`Template_Id=${templateId}^Strategy_Id=${strategyId}`}
+										>
+										<img src={emotionIcon} alt="emotion" />
+										<p>表情包</p>
+									</div>
+								)
+							}
+						</section>
+						{
+							maxVideo > 0 && (
+								<VideoMenu menuState={menuState} createImage={createImage} videoMenus={videoMenus} />
+							)
+						}
+					{menuState === "text" && (
+						<TextMenu ref={textMenuRef} createText={createText} textClose={textClose} textInfo={textInfo} showTextButtons={showTextButtons} />
+					)}
+				</div>
+			<MaxTextLayer textLayerHide={() => setIsShowMaxTextLayer(false)} show={isShowMaxTextLayer} text={tips} />
+		</>
+	);
+};
+
+const forward = forwardRef as <T, P = { [propName: string]: any }>(
+	render: (props: P, PlayerRef: React.MutableRefObject<T>) => React.ReactElement | null,
+) => (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+export const Editor = forward(EditorFn);

package/src/utils/HistoryClass.ts

@@ -0,0 +1,131 @@
+import type { fabric } from "fabric";
+
+//重写Canvas类的方法
+export default class HistoryClass {
+	historyUndo: any[];
+	historyRedo: any[];
+	cacheAction: any[];
+	canvas: fabric.Canvas | any;
+	historyProcessing: boolean;
+	editorInstance: any[];
+	actionTypeList: any[];
+	constructor(canvas?: fabric.Canvas) {
+		console.log("history init");
+		this.canvas = canvas;
+		this.historyUndo = [];
+		this.historyRedo = [];
+		this.cacheAction = [];
+		this.editorInstance = [];
+		this.actionTypeList = [];
+		this.historyProcessing = false;
+		this.initHistory();
+	}
+
+	initHistory() {
+		this.historyUndo = [];
+		this.historyRedo = [];
+		this.cacheAction = [];
+		this.canvas && this.canvas.on(this._historyEvents());
+	}
+	_historyNext() {
+		const keys = [
+			"id",
+			"gradientAngle",
+			"selectable",
+			"hasControls",
+			"linkData",
+			"editable",
+			"extensionType",
+			"extension",
+			"clipData",
+		];
+		const getJson = this.canvas && this.canvas.toJSON(keys);
+		return getJson;
+	}
+
+	_historyEvents() {
+		return {
+			"object:added": (e: any) => this._historySaveAction(e, "object:added"),
+			"object:removed": (e: any) => this._historySaveAction(e, "object:removed"),
+			"object:modified": (e: any) => this._historySaveAction(e, "object:modified"),
+			"object:skewing": (e: any) => this._historySaveAction(e, "object:skewing"),
+			"object:muteChange": (e: any) => this._historySaveAction(e, "object:muteChange"),
+		};
+	}
+	_historySaveAction(e: any, type: string) {
+		if (this.historyProcessing) return;
+		this.actionTypeList.length < 1 && this.actionTypeList.push({ type });
+		if (!e || (e.target && !e.target.excludeFromExport)) {
+			const json = this._historyNext();
+			this.cacheAction.push(json);
+			if (this.cacheAction.length > 1) {
+				const cacheItem = this.cacheAction.shift();
+				//this.historyUndo.push(cacheItem);
+			}
+			this.historyRedo = [];			
+			// console.log("_historySaveAction", this.historyUndo);
+			this.canvas.fire("history:appnd", { json: json });
+		}
+	}
+
+	undo(callback?: any) {
+		// undo进程会渲染新的对象的状态
+		// 因此，object:added和object:modified事件将再次触发
+		// 设置一个flag用来忽略这些事件
+		this.historyProcessing = true;
+		const history = this.historyUndo.pop();
+		if (history) {
+			// this.historyRedo.push(this._historyNext());
+			this._loadHistory(history, "history:undo", callback);
+		} else {
+			this.historyProcessing = false;
+		}
+	}
+	redo(callback?: any) {
+		// undo进程会渲染新的对象的状态
+		// 因此，object:added和object:modified事件将再次触发
+		// 设置一个flag用来忽略这些事件
+		this.historyProcessing = true;
+		const history = this.historyRedo.pop();
+		if (history) {
+			//每一个redo action实际上是一个新的action到undo中
+			this.historyUndo.push(this._historyNext());
+			this._loadHistory(history, "history:redo", callback);
+		} else {
+			this.historyProcessing = false;
+		}
+	}
+	_loadHistory(history: string | Record<string, any>, event: string, callback: () => void) {
+		this.canvas &&
+			this.canvas.loadFromJSON(history, () => {
+				this.canvas.renderAll();
+				this.canvas.fire(event);
+				this.historyProcessing = false;
+
+				if (callback && typeof callback === "function") callback();
+			});
+	}
+	_historyDispose() {
+		this.canvas.off(this._historyEvents());
+	}
+	clearHistory() {
+		this.historyUndo = [];
+		this.historyRedo = [];
+		this.cacheAction = [];
+		this.canvas.fire("history:clear");
+	}
+	canUndo() {
+		return this.historyUndo.length > 0;
+	}
+
+	canRedo() {
+		return this.historyRedo.length > 0;
+	}
+	//离开画布保存上一次编辑的状态
+	onCanvasRoute(canvas: fabric.Canvas) {
+		this.editorInstance.push(canvas);
+	}
+	getActionType() {
+		return this.actionTypeList;
+	}
+}