image section

src/pages/editor/components/EditorCanvas.tsx

@@ -85,6 +85,38 @@ const EditorCanvas = () => {
     setEditingCell(null);
   };
 
+  // Attach transformer to selected object when it changes
+  useEffect(() => {
+    if (!transformerRef.current || !selectedObjectId || !layerRef.current) return;
+
+    const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
+    if (!selectedObject) return;
+
+    // For grid objects, handle separately
+    if (selectedObject.type === "grid") {
+      const tableNode = layerRef.current.findOne(`#${selectedObjectId}`);
+      if (tableNode && transformerRef.current) {
+        transformerRef.current.nodes([tableNode]);
+        transformerRef.current.getLayer()?.batchDraw();
+      }
+      return;
+    }
+
+    // For other objects (like images), find the node by id and attach transformer
+    // Use a small delay to ensure the node is mounted (especially for images that need to load)
+    const timeoutId = setTimeout(() => {
+      if (!layerRef.current || !transformerRef.current) return;
+      
+      const node = layerRef.current.findOne(`#${selectedObjectId}`);
+      if (node && transformerRef.current) {
+        transformerRef.current.nodes([node]);
+        transformerRef.current.getLayer()?.batchDraw();
+      }
+    }, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [selectedObjectId, objects, transformerRef, layerRef]);
+
   useEffect(() => {
     if (!transformerRef.current || !selectedObjectId) return;