@versa_ai/vmml-editor 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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.15",
+    "@versa_ai/vmml-player": "1.1.16",
     "@versa_ai/vmml-utils": "1.0.15"
   },
   "devDependencies": {

package/src/components/EditorCanvas.tsx

@@ -220,16 +220,6 @@ const EditorCanvas = forwardRef(
 		};
 
 	const createEditObjes = async (canvas: any, time: number) => {
-		// 先删除所有旧的可编辑对象
-		const allObjects = canvas.getObjects();
-		const toRemove: any[] = [];
-		allObjects.forEach((obj: any) => {
-			if (obj?.clipData?.originClip) {
-				toRemove.push(obj);
-			}
-		});
-		toRemove.forEach(obj => canvas.remove(obj));
-		
 		const promises = editClips.map((clip: any) => {
 			if (clip.videoClip) {
 				return createImageFromClip(clip);
@@ -345,12 +335,14 @@ const EditorCanvas = forwardRef(
 			}
 			const { width, height } = vmml.template.dimension;
 			const fontSize = getFontSize(width, height);
-			const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType } = clip.textClip;
+			const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth } = clip.textClip;
 			const scaleX = posParam.scaleX * fontSize / 22 / widthScaleRef.current;
 			const scaleY = posParam.scaleY * fontSize / 22 / heightScaleRef.current;
+			const strokeW = strokeWidth ? (strokeWidth * 22 / fontSize) : 0;
 			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 isAiError = textContent === '请输入文案' && textColor === '#00000000';
 			const textFill = argbToRgba(isAiError ? '#ffffffff' : (textColor || '#ffffffff'));
 			const textBasicInfo = {
@@ -359,7 +351,7 @@ const EditorCanvas = forwardRef(
 				colorName: 'custom',
 				textAlign: alignType === 1 ? 'center' : (alignType === 2 ? 'right' : 'left')
 			}
-			const textImgData = await createTextImg({ textContent, bgColor, textColor: textFill, fontAssetUrl, textBasicInfo });
+			const textImgData = await createTextImg({ textContent, bgColor, stColor, strokeW, textColor: textFill, fontAssetUrl, textBasicInfo });
 			const fontJSON = localStorage.getItem("VMML_PLAYER_FONTSMAP");
 			let fontMap: any = {};
 			try {
@@ -417,23 +409,22 @@ const EditorCanvas = forwardRef(
 		});
 	}
 
-		// 生成简短的字体名称
-		const getFontFamilyName = (url: string) => {
-			// 从URL中提取文件名作为字体名称
-			const filename = url.split('/').pop() || '';
-			const name = filename.replace(/\.(ttf|otf|woff2?|eot)$/i, '');
-			return `CustomFont_${name.substring(0, 20)}`; // 限制长度
-		};
+	// 生成简短的字体名称
+	const getFontFamilyName = (url: string) => {
+		const filename = url.split('/').pop() || '';
+		const name = filename.replace(/\.(ttf|otf|woff2?|eot)$/i, '');
+		return `CustomFont_${name.substring(0, 20)}`; // 限制长度
+	};
 
-		// 检测字体格式
-		const detectFontFormat = (url: string) => {
-			const lower = url.toLowerCase();
-			if (lower.includes('.woff2')) return 'woff2';
-			if (lower.includes('.woff')) return 'woff';
-			if (lower.includes('.otf')) return 'opentype';
-			if (lower.includes('.ttf')) return 'truetype';
-			return null;
-		};
+	// 检测字体格式
+	const detectFontFormat = (url: string) => {
+		const lower = url.toLowerCase();
+		if (lower.includes('.woff2')) return 'woff2';
+		if (lower.includes('.woff')) return 'woff';
+		if (lower.includes('.otf')) return 'opentype';
+		if (lower.includes('.ttf')) return 'truetype';
+		return null;
+	};
 		
 		const embedFontInSVG = async (svgString: string, url: string) => {
     if (url) {
@@ -455,7 +446,7 @@ const EditorCanvas = forwardRef(
   }
 
 		//文字转图片
-		const createTextImg = async ({ textContent, bgColor, textColor, fontAssetUrl = null, textBasicInfo }: any) => {
+		const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo }: any) => {
 			const container = document.createElement('div');
 			container.style.backgroundColor = bgColor
 			// container.style.width = `fit-content`
@@ -472,8 +463,12 @@ const EditorCanvas = forwardRef(
 				p.style.lineHeight = '22px'
 				p.style.fontFamily = fontFamily;
 				p.style.whiteSpace = "nowrap"
-				// p.style.backgroundColor = bgColor;
 				p.style.padding = '0';
+				p.style.margin = '0';
+			
+				p.style.webkitTextStrokeWidth = `${strokeW ?? 0}px`;
+				p.style.webkitTextStrokeColor = stColor;
+			
 				p.textContent = line || " "
 				container.appendChild(p);
 			})
@@ -571,7 +566,6 @@ const EditorCanvas = forwardRef(
 				return fc.getObjects();
 			}
 		}
-
 		const styles: any = useMemo(() => {
 			return {
 				position: "absolute",
@@ -632,6 +626,10 @@ const EditorCanvas = forwardRef(
 			}
 		}, [fc]);
 
+		const getCanvasCtx = () => {
+			return fc
+		}
+
 		useImperativeHandle(ref, () => ({
 			createImage,
 			createText,
@@ -645,8 +643,9 @@ const EditorCanvas = forwardRef(
 			checkObjectInPoint,
 			createImageFromClip,
 			createTextFromClip,
-			changeObjectVisible
-		}));
+			changeObjectVisible,
+			getCanvasCtx
+		}), [fc]);
 
 		const getActions = () => {
 			if (history) {

package/src/index.tsx

@@ -55,7 +55,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	const videoList = useRef<any>([]);
 	const [signList, setSignList] = useState<any>([]);
 	const [tips, setTips] = useState("");
-	const [dragState, setDragState] = useState(0);
+	const [dragState, setDragState] = useState(0); // 1: onPointerDown 2: onPointerMove 3: onPointerUp 4: onClickSign
 	const vmmlConverterRef = useRef<any>(null);
 	const [initFcObjs, setInitFcObjs] = useState([]);
 	const [editClips, setEditClips] = useState<any[]>([]); // 可编辑的 clips
@@ -76,10 +76,12 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	const onPlayerReady = () => {
 		const { current }: any = vmmlPlayerRef;
 		vmmlFlag.current = false;
+		let show = false
 		if (current && current.playerRef) {
 			setPlayer(current.playerRef);
 			current.unmute();
 			if (!once.current) {
+				show = true
 				once.current = true;
 			} else {
 				if (needPlay.current) {
@@ -89,7 +91,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 				}
 			}
 		}
-		setShowCanvas(false);
+		setShowCanvas(show);
 		setLoading(false);
 	};
 
@@ -264,9 +266,11 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		setFrame(e.detail.frame)
 	};
 	const onPlay = () => {
+		setShowCanvas(false)
 		setIsPlaying(true);
 	};
 	const onPause = () => {
+		setShowCanvas(true)
 		setIsPlaying(false);
 	};
 	const onWaiting = () => {
@@ -426,7 +430,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		const { current: playerCurrent }: any = vmmlPlayerRef;
 		const { current: canvasCurrent }: any = canvasRef;
 		if (!playerCurrent) return;
-		
+		canvasCurrent?.getCanvasCtx()?.clear?.()
+
 		const convertedVmml = convertVmmlTextScaleByForbidden(v);
 		setVmmlState(convertedVmml);
 		setDurationInFrames(getFrames(v?.template?.duration || 1, fps));

package/src/utils/VmmlConverter.ts

@@ -28,7 +28,7 @@ class VmmlConverter {
 	//更新位置
 	private setPosParam(fObj: any): object {
 		const {
-			clipData: { type },
+			clipData: { type, originClip },
 			centerPoint,
 			scaleX,
 			scaleY,
@@ -36,28 +36,41 @@ class VmmlConverter {
 			width,
 			height,
 		} = fObj;
-		let _scaleX, _scaleY, _centerX, _centerY;
-	
+		let _scaleX, _scaleY, _centerX, _centerY, _scaleZ, _centerZ, _rotationX, _rotationY;
+		let key = '';
 		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;
+			
+			key = 'textClip'
 			// 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;
+		
+			key = 'videoClip'
 		}
 
+		_scaleZ = originClip?.[key]?.posParam?.scaleZ ?? 1;
+		_centerZ = originClip?.[key]?.posParam?.centerZ ?? 0.5;
+		_rotationX = originClip?.[key]?.posParam?.rotationX ?? 0;
+		_rotationY = originClip?.[key]?.posParam?.rotationY ?? 0;
+
 		return {
 			scaleX: _scaleX,
 			scaleY: _scaleY,
+			scaleZ: _scaleZ,
 			centerX: _centerX,
 			centerY: _centerY,
+			centerZ: _centerZ,
 			rotationZ: angle,
+			rotationX: _rotationX,
+			rotationY: _rotationY,
 		};
 	}