mask v2

src/pages/editor/components/canvas/ObjectRenderer.tsx

@@ -273,21 +273,55 @@ const ObjectRenderer = ({
     };
 
     const handleGroupTransformEnd = () => {
-        if (!groupRef.current) return;
+        if (!groupRef.current || !maskShape) return;
         const node = groupRef.current;
         const scaleX = node.scaleX();
         const scaleY = node.scaleY();
 
+        // محاسبه موقعیت نسبی mask نسبت به object (قبل از resize)
+        // این موقعیت نسبی در داخل Group استفاده می‌شود
+        const relativeX = (maskShape.x || 0) - (obj.x || 0);
+        const relativeY = (maskShape.y || 0) - (obj.y || 0);
+
+        // reset scale و offset
         node.scaleX(1);
         node.scaleY(1);
+        node.offsetX(0);
+        node.offsetY(0);
 
+        // محاسبه موقعیت جدید object
+        const newX = node.x();
+        const newY = node.y();
+        const newWidth = Math.max(5, (obj.width || 100) * scaleX);
+        const newHeight = Math.max(5, (obj.height || 100) * scaleY);
+
+        // به‌روزرسانی object
         onUpdate(obj.id, {
-            x: node.x(),
-            y: node.y(),
+            x: newX,
+            y: newY,
             rotation: node.rotation(),
-            width: Math.max(5, (obj.width || 100) * scaleX),
-            height: Math.max(5, (obj.height || 100) * scaleY),
+            width: newWidth,
+            height: newHeight,
         });
+
+        // اگر mask و object در یک گروه هستند، mask را هم scale کن
+        if (obj.groupId && maskShape.groupId === obj.groupId) {
+            // محاسبه موقعیت جدید mask
+            // موقعیت نسبی را scale می‌کنم و به موقعیت جدید object اضافه می‌کنم
+            // این باعث می‌شود که موقعیت نسبی mask نسبت به object حفظ شود
+            const newMaskX = newX + (relativeX * scaleX);
+            const newMaskY = newY + (relativeY * scaleY);
+            const newMaskWidth = (maskShape.width || 100) * scaleX;
+            const newMaskHeight = (maskShape.height || 100) * scaleY;
+
+            // به‌روزرسانی mask
+            onUpdate(maskShape.id, {
+                x: newMaskX,
+                y: newMaskY,
+                width: newMaskWidth,
+                height: newMaskHeight,
+            });
+        }
     };
     
     return (