@versa_ai/vmml-editor 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -17,7 +17,7 @@
     "remotion": "4.0.166",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
-    "@versa_ai/vmml-player": "1.1.22",
+    "@versa_ai/vmml-player": "1.1.24",
     "@versa_ai/vmml-utils": "1.0.15"
   },
   "devDependencies": {

package/src/components/EditorCanvas.tsx

@@ -5,7 +5,6 @@ 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, editClips = [], onVideoChange, isBatchModify, hideConfig, textWarapCenter }: any, ref: any) => {
@@ -511,26 +510,6 @@ const EditorCanvas = forwardRef(
 			return null;
 		};
 
-		const embedFontInSVG = async (svgString: string, url: string, fontBase64?: any) => {
-			if (url) {
-				let res = fontBase64;
-				if (!res) await urlToBlob({ url });
-				const format = detectFontFormat(url);
-				const fontFamilyName = getFontFamilyName(url);
-				const srcValue = format ? `url('${res}') format('${format}')` : `url('${res}')`;
-				const fontFace = `
-        @font-face {
-          font-family: '${fontFamilyName}';
-          src: ${srcValue};
-        }
-      `;
-				const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
-				const result = svgString.replace('</svg>', `${styleElement}</svg>`);
-				return result;
-			}
-			return svgString
-		}
-
 		const loadFont = async (url: any) => {
 			if (!url) return null
 
@@ -558,128 +537,56 @@ const EditorCanvas = forwardRef(
 			fontCacheRef.current.set(url, loadPromise as any);
 			return loadPromise;
 		}
-
-		const setTextAlign = (p: any, stroke: any, direction: 'left' | 'center' | 'right') => {
-			if (direction === 'center') {
-				p.style.justifyContent = 'center'
-				stroke.style.left = "50%";
-				stroke.style.top = "50%";
-				stroke.style.transform = 'translate(-50%, -50%)';
-			}
-			if (direction === 'left') {
-				stroke.style.left = "0";
-				stroke.style.top = "0";
-				stroke.style.transform = 'none';
-			}
-			if (direction === 'right') {
-				p.style.justifyContent = 'flex-end'
-				stroke.style.right = "0";
-				stroke.style.top = "50%";
-				stroke.style.transform = 'translateY(-50%)';
-			}
-		}
-
-		//文字转图片
-		const createTextImg = async ({ textContent, bgColor, textColor, stColor, strokeW, fontAssetUrl = null, textBasicInfo, letterSpacing }: any) => {
-			const fontBase64 = await loadFont(fontAssetUrl);
-			const container = document.createElement('div');
-			container.style.backgroundColor = bgColor
-			container.style.boxSizing = 'content-box'
-			container.style.display = 'inline-block'
-			container.style.textAlign = textBasicInfo.textAlign || 'left';
-			const lines = textContent.split('\n');
-			const fontFamily = fontAssetUrl ? getFontFamilyName(fontAssetUrl) : 'sansMedium';
-			lines.forEach((line: string) => {
-				const p = document.createElement('p');
-				p.style.position = 'relative';
-				p.style.display = 'flex';
-				p.style.fontSize = '22px';
-				p.style.lineHeight = '22px';
-				p.style.fontFamily = fontFamily;
-				p.style.whiteSpace = 'nowrap';
-				p.style.margin = '0';
-				p.style.padding = '0';
-				if (letterSpacing) p.style.letterSpacing = `${letterSpacing}px`;
-				p.style.zIndex = '2'
-
-				const fill = document.createElement('span');
-				fill.textContent = line || ' ';
-				fill.style.color = textColor;
-				fill.style.position = 'relative';
-				fill.style.zIndex = '1'
-
-				const stroke = document.createElement('span');
-				stroke.textContent = line || ' ';
-				stroke.style.position = 'absolute';
-
-				stroke.style.color = 'transparent';
-				stroke.style.webkitTextStrokeWidth = `${strokeW}px`;
-				stroke.style.webkitTextStrokeColor = stColor;
-
-				let dr = textBasicInfo.textAlign || 'left'
-				if (textWarapCenter) dr = 'center'
-				setTextAlign(p, stroke, dr)
-
-				p.appendChild(fill);
-				p.appendChild(stroke);
-				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, fontBase64);
-			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 });
+			const { objects } = await createTextObjs({ strokeW: 0, stColor: '', fontAssetUrl: null, letterSpace: 0, bgColor, textContent, textBasicInfo, textColor});
+
 			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 group = new fabric.Group([...objects], {
+					left,
+					top,
+					scaleX,
+					scaleY,
+					angle,
+					originX: 'center',
+					originY: 'center',
+					clipData: {
+		       duration: vmmlConverterRef.current.vmml.template.duration,
+						id: uuidv4(),
+						inPoint: Math.floor((frame / 30) * 1000000),
+						inFrame: frame,
+						type: "文字",
+						textBasicInfo,
+						textColor: textColor,
+						text: textContent,
+						bgColor: bgColor,
+		       visible: true
+					},
+				});
+				group.on("selected", (options: any) => {
+					options.target.isSelected = -1;
+				});
+				group.on("moving", (options: any) => {
+					options.transform.target.isSelected = 0;
+				});
+				group.on('modified', () => {
+					const fObj = convertToJSON(group)
+					vmmlConverterRef.current.updateClip(fObj);
+				});
+				canvas.centerObject(group);
+				canvas.add(group)
+				setTimeout(() => {
+					canvas.renderAll();
 				})
+				onVideoChange(group?.clipData??null);
+				vmmlConverterRef.current.addTextClip(convertToJSON(group));
+				resolve(true);
 			})
-		};
+			
+		}
+		// 修改文字
 		const updateText = async ({ id, textContent, bgColor, textColor, textBasicInfo, fontAssetUrl }: any) => {
 			// 1. 找到目标对象
 			const target = fc.getObjects().find((item: any) => item.clipData?.id === id);

package/src/index.tsx

@@ -376,7 +376,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		if (editableArray.length && vmmlState?.template) {
 			initCanEditClips(vmmlState.template.tracks);
 		}
-	}, [editableArray, refreshEdit, vmmlState]);
+	}, [editableArray, vmmlState]);
 
 	useEffect(() => {
 		if (vmmlState) {