@versa_ai/vmml-editor 1.0.57 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "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.28",
+    "@versa_ai/vmml-player": "1.1.29",
     "@versa_ai/vmml-utils": "1.0.16"
   },
   "devDependencies": {

package/src/components/EditorCanvas.tsx

@@ -18,6 +18,7 @@ const EditorCanvas = forwardRef(
 		const widthScaleRef = useRef<number>(1);
 		const fontCacheRef = useRef<Map<string, Promise<string | null>>>(new Map());
 		const lockInBoundsRef = useRef(lockInBounds);
+		const lastValidScaleRef = useRef<{ scaleX: number; scaleY: number; left: number; top: number } | null>(null);
 
 		const initCanvas = () => {
 			const canvas = new fabric.Canvas("canvas", {
@@ -96,35 +97,68 @@ const EditorCanvas = forwardRef(
 			});
 
 			canvas.on('object:textEdit', (e: any) => {
-				console.log('1111111111')
 				const active = canvas.getActiveObject();
 				handleIntoTextMenu(active, canvas)
 			});
 
 			canvas.on('object:moving', (e: any) => {
-			if (!lockInBoundsRef.current) return;
-
-			const obj = e.target;
-			const canvasWidth = canvas.getWidth();
-			const canvasHeight = canvas.getHeight();
-
-			let left = obj.left;
-			let top = obj.top;
-			let w = obj.width;
-			let h = obj.height;
-			const paddingX = 15
-			const paddingY = 10
-			// 左边界
-			if (left <= (w / 2 - paddingX)) left = w / 2 - paddingX;
-			// 右边界
-			if (left >= (canvasWidth - (w / 2 - paddingX - 2.5))) left = canvasWidth - (w / 2 - paddingX - 2.5);
-			// 上边界
-			if (top <= (h - paddingY) / 2) top = (h - paddingY) / 2;
-			// 下边界
-			if (top >= (canvasHeight - (h - paddingY) / 2)) top = canvasHeight - (h - paddingY) / 2;
-
-			obj.set({ left, top }).setCoords();
-		});
+				if (!lockInBoundsRef.current) return;
+
+				const obj = e.target;
+
+				const canvasWidth = canvas.getWidth();
+				const canvasHeight = canvas.getHeight();
+				const scaleX = obj.scaleX ?? 1;
+				const scaleY = obj.scaleY ?? 1;
+
+				const width = obj.width * scaleX;
+				const height = obj.height * scaleY;
+
+				let left = obj.left ?? 0;
+				let top = obj.top ?? 0;
+
+				const halfW = width / 2;
+				const halfH = height / 2;
+				
+				// 左边界
+				if (left - halfW < 0) left = halfW;
+				// 右边界
+				if (left + halfW > canvasWidth) left = canvasWidth - halfW;
+				// 上边界
+				if (top - halfH < 0) top = halfH;
+				// 下边界
+				if (top + halfH > canvasHeight) top = canvasHeight - halfH;
+
+				obj.set({ left, top });
+			});
+			canvas.on('object:scaling', (e: any) => {
+				if (!lockInBoundsRef.current) return;
+
+				const obj = e.target;
+				obj.setCoords();
+				const bounds = obj.getBoundingRect();
+				const canvasWidth = canvas.getWidth();
+				const canvasHeight = canvas.getHeight();
+
+				const outOfBounds =
+					bounds.left < 0 ||
+					bounds.top < 0 ||
+					bounds.left + bounds.width > canvasWidth ||
+					bounds.top + bounds.height > canvasHeight;
+
+				if (outOfBounds) {
+					if (lastValidScaleRef.current) {
+						obj.set(lastValidScaleRef.current).setCoords();
+					}
+				} else {
+					lastValidScaleRef.current = {
+						scaleX: obj.scaleX,
+						scaleY: obj.scaleY,
+						left: obj.left,
+						top: obj.top,
+					};
+				}
+			})
 		};
 		//模拟双击
 		const imitateDBclick = (active: any, canvas: any) => {
@@ -180,7 +214,6 @@ const EditorCanvas = forwardRef(
 			return { ...data.toJSON(["clipData", "type"]), centerPoint };
 		};
 
-
 		// 创建图片
 		const createImage = (file: any, emojiId: string) => {
 			const url = file.resourcesType === "image" ? file.visibleUrl : "";
@@ -357,6 +390,11 @@ const EditorCanvas = forwardRef(
 			window.dispatchEvent(event);
 		}
 
+		const isVisibleColor = (color?: string) =>
+				!!color &&
+				color !== 'transparent' &&
+				!/rgba\([^)]*,\s*0\s*\)$/.test(color);
+
 		const createTextObjs = async ({ strokeW, stColor, fontAssetUrl = null, letterSpace, bgColor, textContent, textBasicInfo, textColor }: any) => {
 			const { width, height } = vmml.template.dimension;
 			const fontSize = getFontSize(width, height);
@@ -443,8 +481,12 @@ const EditorCanvas = forwardRef(
 				rx: round,
 				ry: round,
 			});
+			
+			let list = []
+			if (bgColor && isVisibleColor(bgColor)) list = [bgRect, ...textObjs]
+			else list = [...textObjs]
 			return {
-				objects: [bgRect, ...textObjs],
+				objects: list,
 				fontFamily,
 			}
 		}