fix group mask image

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

@@ -53,23 +53,44 @@ const ObjectRenderer = ({
     useEffect(() => {
         if (!groupRef.current || !shouldApplyMask) return;
 
-        // Use requestAnimationFrame to ensure shapes are rendered before caching
-        const rafId = requestAnimationFrame(() => {
-            if (!groupRef.current) return;
-            
-            // Clear cache first
-            groupRef.current.clearCache();
-            
-            // Apply cache - Konva will automatically calculate bounds
-            groupRef.current.cache();
-            groupRef.current.getLayer()?.batchDraw();
+        // Use double requestAnimationFrame to ensure all changes (including stroke) are rendered before caching
+        let rafId1: number;
+        const rafId2 = requestAnimationFrame(() => {
+            rafId1 = requestAnimationFrame(() => {
+                if (!groupRef.current) return;
+                
+                // Clear cache first
+                groupRef.current.clearCache();
+                
+                // Apply cache - Konva will automatically calculate bounds
+                groupRef.current.cache();
+                groupRef.current.getLayer()?.batchDraw();
+            });
         });
 
         return () => {
-            cancelAnimationFrame(rafId);
+            cancelAnimationFrame(rafId2);
+            if (rafId1) cancelAnimationFrame(rafId1);
             groupRef.current?.clearCache();
         };
-    }, [shouldApplyMask, maskShape?.x, maskShape?.y, maskShape?.width, maskShape?.height, maskShape?.rotation, obj.x, obj.y, obj.width, obj.height, obj.rotation]);
+    }, [shouldApplyMask, isSelected, maskShape?.x, maskShape?.y, maskShape?.width, maskShape?.height, maskShape?.rotation, obj.x, obj.y, obj.width, obj.height, obj.rotation, obj.maskInvert]);
+
+    // Refresh cache after transformer is attached (when isSelected changes)
+    useEffect(() => {
+        if (!groupRef.current || !shouldApplyMask || !isSelected) return;
+
+        // Wait for transformer to attach, then refresh cache
+        const timeoutId = setTimeout(() => {
+            if (!groupRef.current) return;
+            groupRef.current.clearCache();
+            groupRef.current.cache();
+            groupRef.current.getLayer()?.batchDraw();
+        }, 150);
+
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [shouldApplyMask, isSelected, transformerRef]);
 
     if (obj.visible === false) {
         return null;