@versa_ai/vmml-editor 1.0.47 → 1.0.49

package/package.json

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

package/src/assets/css/index.scss

@@ -72,7 +72,7 @@
     position: relative;
     display: flex;
     justify-content: center;
-    border-radius: 3.2vw;
+    // border-radius: 3.2vw;
     overflow: hidden;
     .vessel {
       width: 100%;

package/src/components/Controls.tsx

@@ -2,7 +2,7 @@ import { formatTime } from "@versa_ai/vmml-utils"
 import { pauseIcon, playIcon } from "../utils/const"
 import SeekBar from "./SeekBar"
 
-const Controls = ({ player, vmmlRef, frame, fps, durationInFrames, intoEdit, isPlaying, setDragState, onControlsClick, signList }: any) => {
+const Controls = ({ player, vmmlRef, frame, fps, durationInFrames, intoEdit, isPlaying, setDragState, onControlsClick, signList, backgroundColor }: any) => {
   const onClickToggle = (e: any) => {
     if (isPlaying) {
       intoEdit();
@@ -12,7 +12,7 @@ const Controls = ({ player, vmmlRef, frame, fps, durationInFrames, intoEdit, isP
   }
   
   return (
-    <div className="player-controls">
+    <div className="player-controls" style={{ backgroundColor }}>
       <div className="player-controls-toggle mr-16 opacity-06" onClick={onClickToggle}>
         { isPlaying ? <img src={pauseIcon} alt="暂停" /> : <img src={playIcon} alt="播放" /> }
       </div>

package/src/components/EditorCanvas.tsx

@@ -220,6 +220,7 @@ const EditorCanvas = forwardRef(
 		};
 
 		const createEditObjes = async (canvas: any, time: number) => {
+			setCanvasScale(vmml)
 			const promises = editClips.map((clip: any) => {
 				if (clip.videoClip) {
 					return createImageFromClip(clip);
@@ -327,7 +328,8 @@ const EditorCanvas = forwardRef(
 		}
 
 		const createTextObjs = async ({ strokeW, stColor, fontAssetUrl = null, letterSpace, bgColor, textContent, textBasicInfo, textColor }: any) => {
-
+			const { width, height } = vmml.template.dimension;
+			const fontSize = getFontSize(width, height);
 			// 加载字体
 			let fontFamily = 'sansMedium';
 			if (fontAssetUrl) {
@@ -340,7 +342,12 @@ const EditorCanvas = forwardRef(
 			const lines = textContent.split('\n').filter((item: string) => item);
 
 			const lineHeight = 22 + strokeW; // 行高
-			const paddingX = 7; // 左右内边距
+			// const paddingX = 7; // 左右内边距
+			// const paddingY = 7; // 上下内边距
+			// const round = 4; // 圆角
+			const paddingX = 60 * 22 / fontSize // 基于player做的修改
+			const paddingY = 50 * 22 / fontSize // 基于player做的修改
+			const round = 40 * 22 / fontSize // 基于player做的修改
 			const groupWidth = Math.max(...lines.map((l: any) => {
 				let options: any = { fontSize: 22, fontFamily, strokeWidth: strokeW ?? 0 }
 				if (letterSpace) options.charSpacing = letterSpace
@@ -354,12 +361,11 @@ const EditorCanvas = forwardRef(
 				const y = -groupHeight / 2 + lineHeight / 2 + idx * lineHeight
 				// 设置文字对齐方式
 				let originX: 'left' | 'center' | 'right' = textBasicInfo.textAlign;
-				let left = paddingX;
-
+				let left = -groupWidth / 2 + paddingX;
 				if (originX === 'center') {
-					left = groupWidth / 2; // group 中心
+					left = 0; // group 中心
 				} else if (originX === 'right') {
-					left = groupWidth - paddingX;
+					left = groupWidth / 2 - paddingX;
 				}
 
 				// 描边文字
@@ -373,7 +379,6 @@ const EditorCanvas = forwardRef(
 					originY: 'center',
 					left,
 					top: y,
-					textAlign: 'left',
 					objectCaching: false,
 				});
 
@@ -388,7 +393,6 @@ const EditorCanvas = forwardRef(
 					strokeWidth: 0,
 					left,
 					top: y,
-					textAlign: 'left',
 					objectCaching: false,
 				});
 
@@ -402,18 +406,31 @@ const EditorCanvas = forwardRef(
 			// 背景矩形
 			const bgRect = new fabric.Rect({
 				width: groupWidth,
-				height: groupHeight + 13, // padddingY: 6.5
+				height: groupHeight + paddingY * 2, // padddingY: 6.5
 				fill: bgColor,
-				originX: 'left',
+				originX: 'center',
 				originY: 'center',
-				rx: 5,
-				ry: 5,
+				rx: round,
+				ry: round,
 			});
 			return {
 				objects: [bgRect, ...textObjs],
 				fontFamily,
 			}
 		}
+		
+		const getOrigin = (posParam: any, fontSize: number): any => {
+			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
+			return { scaleX, scaleY, top, left }
+		}
+
+		const setCanvasScale = (vmml: any) => {
+			heightScaleRef.current = vmml.template.dimension.height / canvasSize.	height;
+			widthScaleRef.current = vmml.template.dimension.width / canvasSize.width;
+		}
 
 		// 创建可编辑的textclip
 		const createTextFromClipCanvas = async (clip: any, fc2?: fabric.Canvas) => {
@@ -423,13 +440,10 @@ const EditorCanvas = forwardRef(
 
 				const { width, height } = vmml.template.dimension;
 				const fontSize = getFontSize(width, height);
-
+				
 				const { textContent, backgroundColor, textColor, posParam, fontAssetUrl, alignType, strokeColor, strokeWidth, letterSpacing } = clip.textClip;
-				// textContent = 'ฉันคือไมโครเวฟที่ครบทุกฟังก์\nชัน\nใครเห็นก็ต้องว้าว\n这是修改的啊啊啊啊'
-				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 { left, top, scaleX, scaleY } = getOrigin(posParam, fontSize)
 				const bgColor = backgroundColor ? argbToRgba(backgroundColor) : 'transparent';
 				const strokeW = strokeColor && strokeWidth ? strokeWidth * 30 * 1.5 / fontSize : 0;
 				const stColor = strokeColor ? argbToRgba(strokeColor) : 'transparent';
@@ -587,42 +601,71 @@ const EditorCanvas = forwardRef(
 			
 		}
 		// 修改文字
-		const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }: any) => {
-			// 1. 找到目标对象
+		const updateText = async ({ id, textContent, bgColor, textColor, strokeColor, letterSpacing, strokeWidth, textBasicInfo, fontAssetUrl, posParam = null, alignType }: any) => {
+			const { width, height } = vmml.template.dimension;
+			const fontSize = getFontSize(width, height);
+
 			const target = fc.getObjects().find((item: any) => item.clipData?.id === id);
-			const center = target.getCenterPoint();
-			const originClip = target.clipData?.originClip;
+			const originClip = target?.clipData?.originClip ?? null;
 			if (originClip && target?.type === 'group') {
+				const center = target.getCenterPoint();
 				const objects = target.getObjects();
-				const strokeText = objects[1]; // 描边
+				const strokeText = objects[1]
 				// 清空
   			target._objects.length = 0;
 
-				const { objects: textObjects } = await createTextObjs({ strokeW: strokeText.strokeWidth, stColor: '', fontAssetUrl, letterSpace: strokeText.charSpacing, bgColor, textContent, textBasicInfo, textColor })
+				const stColor = strokeColor ?? ''
+				const strokeW = strokeColor && strokeWidth ? strokeWidth * 30 * 1.5 / fontSize : strokeText.strokeWidth;
+				const letterSpace = letterSpacing ? (letterSpacing * 22 / fontSize) * 45 : strokeText.charSpacing;
+
+				const { objects: textObjects, fontFamily } = await createTextObjs({ strokeW: strokeW ?? 0, stColor, fontAssetUrl, letterSpace: letterSpace ?? 0, bgColor, textContent, textBasicInfo, textColor })
+				// 位置计算
+				let top = target.top
+				let left = target.left
+				let scaleX = target.scaleX
+				let scaleY = target.scaleY
+				if (posParam) {
+					const obj = getOrigin(posParam, fontSize);
+					({ left, top, scaleX, scaleY } = obj);
+				}
 				// 添加
 				textObjects.forEach((obj: any) => {
 					target.addWithUpdate(obj);
 				});
+				const inFrame = getFrames(originClip.inPoint, 30);
+				const durationFrame = getFrames(originClip.duration, 30);
 				target.set({
-					visible: true,
+					visible: frame >= inFrame && frame < inFrame + durationFrame,
 					clipData: {
 						...target.clipData,
 						textBasicInfo,
 						textColor,
 						text: textContent,
 						bgColor,
+						fontAssetUrl,
+						fontFamily,
 						isAiError: false
 					}
 				})
-				target._calcBounds();
-				target._updateObjectsCoords();
 				target.setPositionByOrigin(center, 'center', 'center');
+				target.set({
+					visible: frame >= inFrame && frame < inFrame + durationFrame,
+					top,
+					left,
+					scaleY,
+					scaleX
+				})
 				originClip.textClip = {
 					...originClip.textClip,
 					textContent,
+					letterSpacing: letterSpacing ?? 0,
+					strokeWidth: strokeWidth ?? 0,
+					alignType: alignType ?? originClip?.alignType ?? 0,
+					posParam: posParam ?? originClip.posParam,
 					backgroundColor: bgColor,
-					textColor,
-					strokeColor: ''
+					textColor: textColor,
+					fontAssetUrl,
+					strokeColor: stColor
 				}
 				target.setCoords();
 				fc?.requestRenderAll();

package/src/index.tsx

@@ -2,7 +2,7 @@ import { VmmlPlayer } from "@versa_ai/vmml-player";
 import cloneDeep from "lodash.clonedeep";
 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 { getFrames, takeScreenshot, convertVmmlTextScaleByForbidden, argbToRgba } from "@versa_ai/vmml-utils";
 import "./assets/css/index.scss";
 import Controls from "./components/Controls";
 import EditorCanvas from "./components/EditorCanvas";
@@ -31,6 +31,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		pauseWhenBuffering = false,
 		isBatchModify = false,
 		textWarapCenter = false,
+		backgroundColor = '#000',
+		existenceBorderRadio = true,
 		hideConfig = { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false } // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 	}: any,
 	ref: any,
@@ -61,9 +63,9 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	const vmmlConverterRef = useRef<any>(null);
 	const [initFcObjs, setInitFcObjs] = useState([]);
 	const [editClips, setEditClips] = useState<any[]>([]); // 可编辑的 clips
-	const [refreshEdit, setRefreshEdit] = useState(0); // 触发画布刷新
 	const vmmlFlag = useRef(false);
 	const needPlay = useRef(true);
+	const needFreshEdit = useRef<boolean>(true)
 
 	const setVmml = () => {
 		const { current }: any = vmmlPlayerRef;
@@ -373,7 +375,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	}, [canvasSize, vmmlState]);
 
 	useEffect(() => {
-		if (editableArray.length && vmmlState?.template) {
+		if (editableArray.length && vmmlState?.template && needFreshEdit.current) {
 			initCanEditClips(vmmlState.template.tracks);
 		}
 	}, [editableArray, vmmlState]);
@@ -442,10 +444,10 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 
 		const convertedVmml = v;
 		const isSame = JSON.stringify(convertedVmml) == JSON.stringify(vmmlState);
-		// console.log(isSame, 'isSamew>>>')
 		if (!isSame) {
 			const currentV = cloneDeep(convertedVmml)
 			canvasCurrent?.getCanvasCtx()?.clear?.()
+			needFreshEdit.current = true
 			setVmmlState(currentV);
 			setDurationInFrames(getFrames(currentV?.template?.duration || 1, fps));
 		}
@@ -454,6 +456,55 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		if (isSame) canvasCurrent?.checkObjectInPoint?.(currentFrame);
 	}
 
+	const updateEditorTextClips = (v: any, checkFrame?: number) => { // 相同id批量更新文字editor
+		const { current: playerCurrent }: any = vmmlPlayerRef;
+		const { current: canvasCurrent }: any = canvasRef;
+		if (!playerCurrent) return;
+
+		const playing = playerCurrent?.playerRef?.isPlaying?.() ?? false
+		if (!playing) needPlay.current = false // 暂停状态 不用自动播放
+
+		const currentFrame = checkFrame ?? (player?.getCurrentFrame?.() ?? frame ?? pauseFrame);
+		setFrame(currentFrame) // 设置当前frame
+
+		const convertedVmml = v;
+		const currentV = cloneDeep(convertedVmml)
+		needFreshEdit.current = false
+		setVmmlState(currentV);
+		const tracks = currentV?.template?.tracks?.filter((track: any) => track.type === 2)
+		tracks?.forEach((track: any) => {
+			track?.clips?.forEach((clip: any) => {
+				const { textClip = null } = clip
+				if (textClip) {
+					const { textContent, backgroundColor, textColor, fontAssetUrl, alignType, letterSpacing, strokeWidth, strokeColor, posParam } = textClip
+					const textFill = argbToRgba(textColor || '#ffffffff');
+					const textBasicInfo = {
+						isBack: backgroundColor ? true : false,
+						colorValue: textFill,
+						colorName: 'custom',
+						textAlign: alignType === 1 ? 'center' : (alignType === 2 ? 'right' : 'left')
+					}
+					canvasCurrent?.updateText({
+						id: clip.id,
+						textContent,
+						letterSpacing,
+						strokeWidth,
+						strokeColor: argbToRgba(strokeColor),
+						bgColor: argbToRgba(backgroundColor),
+						textColor: argbToRgba(textColor),
+						fontAssetUrl,
+						textBasicInfo,
+						posParam
+					})
+				}
+			})
+		})
+
+		playerCurrent.setVmml(convertedVmml, currentFrame);
+		canvasCurrent?.checkObjectInPoint?.(currentFrame);
+	}
+
+
 	const getCurrentFrame = () => { // 获取当前帧
 		if (!player) return 0
 		return player.getCurrentFrame()
@@ -478,7 +529,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 			texteditClose,
 			textFinish, // 完成按钮事件
 			editorSeekTo, // editor的seek事件 入参：frame 
-			updateEditor // 更新editor 入参：vmml, frame
+			updateEditor, // 更新editor 入参：vmml, frame
+			updateEditorTextClips // 更新editor 入参：vmml, frame
 		}),
 		[vmmlState, player]
 	)
@@ -513,9 +565,10 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 						<div className="vessel" onClick={onClickMain}>
 							{/* 编辑器 */}
 							<VmmlPlayer
+								backgroundColor={backgroundColor}
 								ref={vmmlPlayerRef}
 								vmml={vmmlState}
-								existenceBorderRadio
+								existenceBorderRadio={existenceBorderRadio}
 								moveToBeginningWhenEnded
 								muted={true}
 								fps={fps}
@@ -553,6 +606,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 				{/* 控制器 */}
 				<div className="controls-box">
 					<Controls
+					 	backgroundColor={backgroundColor}
 						player={player}
 						vmmlRef={vmmlPlayerRef}
 						fps={fps}
@@ -632,5 +686,7 @@ export const Editor = forward(EditorFn);
 * @param isBatchModify 是否批量更新 默认：false.
 * @param hideConfig 编辑框四个角的显示配置 默认：{ hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 * @param textWarapCenter 文字是否居中 默认：false
+* @param backgroundColor 背景色，默认#000.
+* @param existenceBorderRadio player是否圆角，圆角0.16rem.
 */