@versa_ai/vmml-editor 1.0.31 → 1.0.33

package/package.json

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

package/src/components/EditorCanvas.tsx

@@ -465,6 +465,26 @@ const EditorCanvas = forwardRef(
 		}
 	}
 
+	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)
@@ -477,6 +497,7 @@ const EditorCanvas = forwardRef(
 		container.style.textAlign = textBasicInfo.textAlign || 'left';
 		const lines = textContent.split('\n');
 		const fontFamily = fontAssetUrl ? getFontFamilyName(fontAssetUrl) : 'sansMedium';
+		// const textCenter = textWarapCenter && textBasicInfo.textAlign === 'center'
 		lines.forEach((line: string) => {
 			const p = document.createElement('p');
 			p.style.position = 'relative';
@@ -489,7 +510,7 @@ const EditorCanvas = forwardRef(
 			p.style.padding = '0';
 			if (letterSpacing) p.style.letterSpacing = `${letterSpacing}px`;
 			p.style.zIndex = '2'
-			if (textWarapCenter) p.style.justifyContent = 'center' 
+			// if (textCenter) p.style.justifyContent = 'center' 
 
 			const fill = document.createElement('span');
 			fill.textContent = line || ' ';
@@ -504,15 +525,19 @@ const EditorCanvas = forwardRef(
 			stroke.style.color = 'transparent';
 			stroke.style.webkitTextStrokeWidth = `${strokeW}px`;
 			stroke.style.webkitTextStrokeColor = stColor;
-			if (textWarapCenter) {
-				stroke.style.left = "50%";
-				stroke.style.top = "50%";
-				stroke.style.transform = 'translate(-50%, -50%)';
-			} else {
-				stroke.style.left = '0';
-				stroke.style.top = '0';
-			}
-			stroke.style.zIndex = '-1'
+
+			let dr = textBasicInfo.textAlign || 'left'
+			if (textWarapCenter) dr = 'center'
+			setTextAlign(p, stroke, dr)
+			// if (textCenter) {
+			// 	stroke.style.left = "50%";
+			// 	stroke.style.top = "50%";
+			// 	stroke.style.transform = 'translate(-50%, -50%)';
+			// } else {
+			// 	stroke.style.left = '0';
+			// 	stroke.style.top = '0';
+			// }
+			// stroke.style.zIndex = '-1'
 
 			p.appendChild(fill);
 			p.appendChild(stroke);

package/src/index.tsx

@@ -386,10 +386,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		if (player) {
 			const parent = player.getContainerNode();
 			if (!canvasSize.width) {
-				console.log(parent, 'parent>>>>')
 				const playerElement = parent?.children[0];
 				const { width, height } = playerElement?.getBoundingClientRect() || {};
-				console.log(height)
 				setCanvasSize({ width, height, top: playerElement.offsetTop });
 			}
 			player.addEventListener("play", onPlay);
@@ -438,6 +436,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		console.log(v, vmmlState, isSame, '判断vmml是否相同')
 
 		needPlay.current = false
+		once.current = false
 
 		const convertedVmml = convertVmmlTextScaleByForbidden(v);
 		if (!isSame) { // vmml改变再重新刷新canvas