mask

src/pages/editor/components/tools/ImageObject.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Image as KonvaImage } from "react-konva";
 import Konva from "konva";
 import useImage from "use-image";
@@ -13,11 +13,18 @@ const ImageObject = ({
     draggable,
     stageWidth,
     stageHeight,
+    onImageReady,
 }: ShapeProps) => {
-    const [image] = useImage(obj.imageUrl || "");
+    const [image, status] = useImage(obj.imageUrl || "");
     const shapeRef = useRef<Konva.Image>(null);
 
-    // Transformer is managed in EditorCanvas for multi-select support
+    // Notify parent (ObjectRenderer) as soon as the image is decoded and ready.
+    // This lets the masked group re-cache itself after the image content appears.
+    useEffect(() => {
+        if (status === "loaded" && onImageReady) {
+            onImageReady();
+        }
+    }, [status, onImageReady]);
 
     if (!image) return null;