@versa_ai/vmml-editor 1.0.2

package/src/utils/VmmlConverter.ts

@@ -0,0 +1,339 @@
+import { v4 as uuidv4 } from "uuid";
+import { hexToArgb, rgbaToArgb, getFontSize } from "@versa_ai/vmml-utils";
+class VmmlConverter {
+	private vmml: any;
+	private canvasSize: any;
+	private tracks: any;
+	private heightScale: any;
+	private widthScale: any;
+	private fontSize: number;
+
+	/**
+	 * VmmlConverter 构造函数
+	 * @param vmml - VMML 模板数据
+	 * @param canvasSize - 画布尺寸
+	 */
+	constructor({ vmml, canvasSize }: { vmml: any; canvasSize: any }) {
+		const { width, height } = vmml.template.dimension;
+		this.vmml = vmml;
+		this.canvasSize = canvasSize;
+		this.tracks = vmml.template.tracks;
+		this.fontSize = getFontSize(width, height);
+
+		// 计算宽高比
+		this.heightScale = height / canvasSize.height;
+		this.widthScale = width / canvasSize.width;
+	}
+
+	//更新位置
+	private setPosParam(fObj: any): object {
+		console.log("setPosParam fObj",fObj)
+		const {
+			clipData: { type },
+			centerPoint,
+			scaleX,
+			scaleY,
+			angle,
+			width,
+			height,
+		} = fObj;
+		let _scaleX, _scaleY, _centerX, _centerY;
+	
+		if (type === "文字") {
+	  	// const [rect, textbox] = fObj.objects;
+			_scaleX = (22 * scaleX * this.widthScale) / this.fontSize;
+			_scaleY = (22 * scaleY * this.heightScale) / this.fontSize;
+			_centerX = centerPoint.x / this.canvasSize.width; 
+			_centerY = centerPoint.y / this.canvasSize.height;
+			// fObj.clipData.lineSpacing = 22 * textbox.lineHeight * scaleY * this.heightScale;
+		} else if (type === "表情包") {
+			_scaleX = (width * scaleX * this.widthScale) / width;
+			_scaleY = (height * scaleY * this.heightScale) / height;
+			_centerX = centerPoint.x / this.canvasSize.width;
+			_centerY = centerPoint.y / this.canvasSize.height;
+		}
+
+		return {
+			scaleX: _scaleX,
+			scaleY: _scaleY,
+			centerX: _centerX,
+			centerY: _centerY,
+			rotationZ: angle,
+		};
+	}
+
+	/**
+	 * 转换 TextClip
+	 * @param fObj - 画布fObj
+	 */
+	public addTextClip(fObj: any): void {
+		console.log("addTextClip fObj", fObj);
+		const posParam = this.setPosParam(fObj);
+
+		// const [rect, textbox] = fObj.objects;
+		// const { clipData: { id, inPoint, lineSpacing }} = fObj;
+		const { clipData: { id, inPoint, text, textColor, bgColor}} = fObj;
+		const {template:{duration}} = this.vmml;
+		const clips = [];
+		const editorTrack = this.tracks.find((track: any) => track.editorType === "文字");
+
+		const tClipData = {
+			duration,
+			originDuration: duration,
+			start: 0,
+			end: duration,
+			inPoint,
+			id,
+			type: 202,
+			fObj,
+			textClip: {
+				lineSpacing: 0,
+				alignType: 0,
+				fontCode: '',
+				bold: false,
+				dimension: {
+					height: 282,
+					width: 825,
+				},
+				posParam,
+				backgroundColor: this.toARGB(bgColor),
+				textContent: text,
+				textColor: this.toARGB(textColor),
+				// fontFamily:'unset'
+			},
+		};
+		if (!editorTrack) {
+			clips.push(tClipData);
+			this.tracks.push({
+				clips,
+				description: "editorText",
+				id: uuidv4(),
+				type: 2,
+				editorType: "文字",
+			});
+		} else {
+			editorTrack.clips.push(tClipData);
+		}
+
+		console.log("addTextClip 最终vmml", this.vmml);
+	}
+
+	/**
+	 * 转换 VideoClip
+	 * @param fObj - 画布fObj
+	 */
+	public addVideoClip(fObj: any): void {
+		console.log("addVideoClip fObj", fObj);
+		const clips = [];
+		const editorTrack = this.tracks.find((track: any) => track.editorType === "表情包");
+		const clipData = this.loadClipData(fObj);
+
+		if (!editorTrack) {
+			const index = this.tracks.findIndex((track: any) => track.editorType === "文字");
+			for (const item of clipData) {
+				if (item !== null) {
+					clips.push(item);
+				}
+			}
+
+			const data = {
+				clips,
+				description: "editorEmoji",
+				id: uuidv4(),
+				type: 1,
+				editorType: "表情包",
+			};
+			if (index !== -1) {
+				this.tracks.splice(index, 0, data);
+			} else {
+				this.tracks.push(data);
+			}
+		} else {
+			for (const item of clipData) {
+				if (item !== null) {
+					editorTrack.clips.push(item);
+				}
+			}
+		}
+
+		console.log("addVideoClip 最终vmml", this.vmml);
+	}
+
+	/**
+	 * 更新 clip
+	 * @param fObj - 画布fObj
+	 */
+	public updateClip(fObj: any) {
+		console.log("updateClip fObj", fObj);
+		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);
+		}
+		
+		if (existClip) {
+			//修改现有clip的代码
+			!originClip && (existClip.fObj = fObj);
+			if (type === "表情包") {
+				existClip.videoClip.posParam = posParam;
+			} else if (type === "文字") {
+				const { clipData: { text, textColor, bgColor}} = fObj;
+				const scale = this.fontSize / 22;
+				existClip.textClip = {
+					...existClip.textClip,
+					posParam,
+					backgroundColor: this.toARGB(bgColor),
+					textContent: text,
+					textColor: this.toARGB(textColor),
+					dimension: {
+						width: Math.floor(fObj.width * scale),
+						height: Math.floor(fObj.height * scale),
+					}
+				};
+			}
+		}
+
+		console.log("updateClip 最终vmml", this.vmml);
+	}
+
+	/**
+	 * 删除 Clip
+	 * @param id - 实例 id
+	 * @param type - 实例 类型
+	 */
+	public deleteClip({ id, type, originClip }: { id: string; type: string, originClip: any }): void {
+		// 模板内的可编辑clip
+		if (originClip) {
+			originClip.duration = 0;
+		} 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 元素
+				} else {
+					editorTrack.clips.splice(index, 1); // 只删除当前元素
+				}
+			}
+	
+			if (editorTrack.clips.length === 0) {
+				const trackIndex = this.tracks.indexOf(editorTrack);
+				if (trackIndex !== -1) {
+					this.tracks.splice(trackIndex, 1);
+				}
+			}
+		}
+
+		console.log("deleteClip 最终Vmml", this.vmml);
+	}
+
+	//切换静音 视频/音频
+	public changeMute({ id, isMute }: { id: string; isMute: boolean }): void {
+		const editorTrack = this.tracks.find((track: any) => track.editorType === "表情包");
+		const index = editorTrack.clips.findIndex((item: any) => item.id === id);
+		if (index !== -1) {
+			const volume = isMute ? 0 : 1;
+
+			// 设置当前元素的 volume 为 0
+			editorTrack.clips[index].videoClip.volume = volume;
+			// 检查下一个元素是否存在且类型为 audio
+			if (editorTrack.clips[index + 1] && editorTrack.clips[index + 1].audioClip) {
+				editorTrack.clips[index + 1].audioClip.volume = volume;
+			}
+		}
+
+		console.log("changeMute 最终Vmml", this.vmml);
+	}
+
+	//加载clip数据
+	private loadClipData(fObj: any): any {
+		const posParam = this.setPosParam(fObj);
+		const {
+			clipData: { id, inPoint, fileUrl },
+			width,
+			height,
+		} = fObj;
+		let aClipData = null;
+
+		// 计算表情包可用的最大时长
+		const availableDuration = this.vmml.template.duration - inPoint;
+		const _duration = fileUrl.duration > availableDuration ? availableDuration : fileUrl.duration;
+		
+		const vClipData = {
+			duration: _duration,
+			originDuration: fileUrl.duration,
+			start: 0,
+			end: _duration,
+			inPoint,
+			type: 102,
+			id,
+			fObj,
+			videoClip: {
+				grayMaskUrl: fileUrl.grayMaskUrl,
+				webmUrl: fileUrl.webmUrl,
+				movUrl: fileUrl.movUrl,
+				gifUrl: fileUrl.visibleUrl,
+				dimension: {
+					height,
+					width,
+				},
+				posParam,
+				constantSpeed: 1,
+				volume: 1,
+				sourceUrl: fileUrl.visibleUrl,
+				thumbnailSourceUrl: fileUrl.thumbnailUrl,
+				sourceCode: "",
+				mimeType: fileUrl.visiableMimeType,
+			},
+		};
+		//png/mp4 + mp3音频
+		if (fileUrl.hasAudio === "true") {
+			aClipData = {
+				duration: _duration,
+				originDuration: fileUrl.duration,
+				start: 0,
+				end: _duration,
+				inPoint,
+				type: 304,
+				id: uuidv4(),
+				audioClip: {
+					sourceUrl: fileUrl.soundUrl,
+					volume: 1,
+					constantSpeed: 1,
+				},
+			};
+		}
+
+		return [vClipData, aClipData];
+	}
+
+	/**
+	 * 将颜色转换为 ARGB 格式
+	 * @param color - 颜色字符串
+	 * @returns ARGB 颜色字符串
+	 */
+	private toARGB(color: string) {
+		if (color === "transparent") {
+			return "#00000000";
+		}
+
+		if (color.includes("rgb")) {
+			return rgbaToArgb(color);
+		}
+
+		if (color.includes("#")) {
+			return hexToArgb(color);
+		}
+	}
+}
+
+export default VmmlConverter;

package/src/utils/const.ts

@@ -0,0 +1,10 @@
+export const backIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9f7e2aae-06a3-4f46-8601-a53dd2b70b7b.png";
+export const closeIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/c5dc68e4-2db5-4ea6-ada6-191bb9128a4c.png";
+export const nextIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/ba4e4ece-ec5e-43a2-9a21-08a9a648a5f2.png";
+export const wordIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/6ba37577-5fef-4722-9a61-f7ab5e5790ad.png";
+export const emotionIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/a6bb2684-4f26-481a-81dd-90500c1f7544.png";
+export const playIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9c6d947f-071a-4875-9546-fd0dce371928.png";
+export const pauseIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/65076da8-c1e4-42a9-90af-839a2e42ace7.png";
+export const iconText2 =  "https://mass.alipay.com/finmedia_versaassets/uri/file/as/f50a1be1-512b-49f5-8be5-61b85c7cbb66.png";
+export const iconText1 =  "https://mass.alipay.com/finmedia_versaassets/uri/file/as/f9071de5-48d0-42ca-8b9a-13ae19ed48e3.png";
+export const signIcon = "https://mass.alipay.com/finmedia_versaassets/uri/file/as/bcbd9a71-ec40-4c4d-ba03-29c2bec2bf89.png";

package/src/utils/keyBoardUtils.ts

@@ -0,0 +1,199 @@
+import { isIOS } from "@versa_ai/vmml-utils";
+const defaultBottom = "20px";
+//判断安卓版本
+export const checkIfAndroidAndVersion = () => {
+	const userAgent = navigator.userAgent;
+	const androidPattern = /Android\s([0-9\.]*)/;
+
+	const match = userAgent.match(androidPattern);
+
+	if (match) {
+		const version = match[1];
+		console.log(`This is an Android device with version ${version}`);
+		return version;
+	}
+};
+const checkIPhoneSeries = () => {
+	const screenWidth = window.screen.width;
+	const screenHeight = window.screen.height;
+	// console.info('screen size',`screenWidth:${screenWidth},screenHeight:${screenHeight}`)
+	if (screenWidth === 320 && screenHeight === 480) {
+		return "iPhone 4 or 4S";
+	} else if (screenWidth === 375 && screenHeight === 667) {
+		return "iPhone 6/7/8";
+	} else if (screenWidth === 414 && screenHeight === 736) {
+		return "iPhone 6/7/8 Plus";
+	} else if (screenWidth === 375 && screenHeight === 812) {
+		return "iPhone X/XS";
+	} else if (screenWidth === 414 && screenHeight === 896) {
+		return "iPhone XR/11";
+	} else if (screenWidth === 414 && screenHeight === 844) {
+		return "iPhone 12 mini";
+	} else if (screenWidth === 414 && screenHeight === 915) {
+		return "iPhone 13 Pro Max/12 Pro Max";
+	} else if (screenWidth === 390 && screenHeight === 844) {
+		return "iPhone 13 mini";
+	} else {
+		return "Unknown iPhone model";
+	}
+};
+export const getIOSVersion = () => {
+  if (isIOS()) {
+    const match = navigator.userAgent.match(/OS (\d+)_(\d+)_?(\d+)?/);
+    if (match) {
+      const version = `${match[1]}.${match[2]}`;
+      return version;
+    }
+  }
+  return null;
+};
+const iPhoneAdapter = (series: string) => {
+	const seriesArr = ["iPhone 6/7/8 Plus", "iPhone 6/7/8"];
+	return seriesArr.includes(series);
+};
+//判断当前版本是否需要做适配
+export const canAdapter = () => {
+	const versionArr = ["12"];
+	const version = checkIfAndroidAndVersion();
+	if (version !== undefined) {
+		return versionArr.includes(version);
+	}
+};
+// ios和Android键盘兼容
+// 目前测试设备中键盘唤起不会触发resize事件，所以需要监听focusin事件，所以watchKeyBoard不存在系统区分
+export const watchKeyBoard = (callback: (isShow: boolean) => void) => {
+	const focusInHandler = (e: FocusEvent) => {
+		callback(true);
+		stopMove();
+	};
+
+	const focusOutHandler = (e: FocusEvent) => {
+		callback(false);
+	};
+
+	document.body.addEventListener("focusin", focusInHandler);
+	document.body.addEventListener("focusout", focusOutHandler);
+
+	// 返回一个函数，用于移除事件监听器
+	return () => {
+		document.body.removeEventListener("focusin", focusInHandler);
+		document.body.removeEventListener("focusout", focusOutHandler);
+	};
+};
+export const stopMove = () => {
+	const dom = document.getElementsByClassName("overlay")[0];
+	const element = document.querySelector(".mappingarea") as HTMLElement;
+
+	const stopScroll = (e: any) => {
+		const lastTouchPositionX = 0;
+		const lastTouchPositionY = 0;
+		// 排除可以滚动的区域
+		const currentTouchPositionX = e.touches[0].clientX;
+		const currentTouchPositionY = e.touches[0].clientY;
+
+		const deltaX = currentTouchPositionX - lastTouchPositionX;
+		const deltaY = currentTouchPositionY - lastTouchPositionY;
+		if (["text-header", "overlay", "text_bg_change"].includes(e.target?.className)) {
+			e.preventDefault(); // 阻止纵向滚动
+			// if (Math.abs(deltaY) > Math.abs(deltaX)) {
+			//     e.preventDefault(); // 阻止纵向滚动
+			// }
+		}
+		if (element) {
+			const willOverflow = element.scrollHeight > element.clientHeight;
+			if (willOverflow) {
+				return;
+			} else if (e.target?.className.split(" ").includes("color-item") || e.target?.className === "text_color_change") {
+				if (deltaX < 0 || deltaX > 0) {
+					// 允许横向滚动
+					return;
+				} else {
+					e.preventDefault(); // 阻止非横向滚动
+				}
+			} else {
+				if (Math.abs(deltaY) > Math.abs(deltaX)) {
+					e.preventDefault(); // 阻止其他元素的纵向滚动
+				}
+			}
+		}
+		e.preventDefault();
+	};
+	if (dom) {
+		dom.addEventListener("touchmove", stopScroll);
+	}
+};
+export const scrollToTop = () => {
+	window.scrollTo(0, 0);
+};
+
+export const onKeyBoardAction = (
+	status: boolean,
+	headerRef: HTMLDivElement | null,
+	textareaRef: HTMLTextAreaElement | null,
+	coverRef: HTMLDivElement | null,
+	mappingareaRef: HTMLDivElement | null,
+	aimTop?: number,
+) => {
+	//IOS适配
+	if (isIOS()) {
+		forIos(status, headerRef, textareaRef, coverRef, mappingareaRef);
+	}
+	//Android适配
+	else {
+		// forAndroid(currentScrollY, status, headerRef, textareaRef, coverRef, mappingareaRef);
+	}
+};
+
+//方案一
+const forIos =  (
+	status: boolean,
+	headerRef: HTMLDivElement | null,
+	textareaRef: HTMLTextAreaElement | null,
+	coverRef: HTMLDivElement | null,
+	mappingareaRef: HTMLDivElement | null,
+) => {
+	const series = checkIPhoneSeries();
+	const isIPhoneAdapt = iPhoneAdapter(series);
+	//键盘展开
+	if (status) {
+		const totalHeight = document.documentElement.clientHeight || document.body.clientHeight;
+		//ios键盘高度约为屏幕的25%
+		const keyBoardHeight = totalHeight * 0.25;
+		if (coverRef && textareaRef) {
+			const textareaRefPos =  textareaRef.getBoundingClientRect()
+			const { height } = textareaRefPos
+			if (isIPhoneAdapt) {
+				coverRef.style.bottom = `${keyBoardHeight + 50}px`
+			} else {
+				coverRef.style.transform = `translateY(${-(height + 10)}px)`
+			}
+		}
+	} else {
+		if (coverRef) {
+			if (isIPhoneAdapt) {
+				coverRef.style.bottom = `8vw`
+			} else {
+				coverRef.style.transform = `translateY(0px)`
+			}
+
+		}
+	}
+};
+const forAndroid = (
+	currentScrollY: number,
+	status: boolean,
+	headerRef: HTMLDivElement | null,
+	textareaRef: HTMLTextAreaElement | null,
+	coverRef: HTMLDivElement | null,
+	mappingareaRef: HTMLDivElement | null,
+) => {
+	const updatePosition = () => {
+		if (mappingareaRef && textareaRef) {
+			const rect = textareaRef.getBoundingClientRect();
+			mappingareaRef.style.top = `${rect.top}px`;
+			mappingareaRef.style.left = `${rect.left}px`;
+		}
+	}
+	window.addEventListener('scroll', updatePosition);
+	window.addEventListener('resize', updatePosition);
+};