diff --git a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx index 9a4ec2301b..6f23f12215 100644 --- a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx @@ -70,62 +70,17 @@ const PageDraw = () => { }); useCanvasBgRemovedEvent(async (event) => { - console.log(">>>>>>>>>>>>>>> Canvas bg removed event received:", event); - console.log(">>>>>>>>>>>>>>> Canvas bg removed event received:", event); - //store.removeNode(event.media_token); - - /* - async ( - success: boolean, - image_base64: string, - message: string, - ) => { - if (!success) { - console.error(message); - return { success: false }; - } - try { - // ... - // Call API, on success, return a File object parsed from base64. - // ... - - const response = await EnqueueImageBgRemoval({ - base64_image: image_base64, - }); - - - const response = await FalBackgroundRemoval({ - base64_image: image_base64, - }); - if ( - response.status !== "success" || - !("payload" in response) - ) { - console.error("Failed to remove background", response); - return { success: false }; - } - - const base64String = response.payload - ?.base64_bytes as string; - const binaryString = atob(base64String); - const bytes = Uint8Array.from(binaryString, (c) => - c.charCodeAt(0), - ); - const blob = new Blob([bytes], { type: "image/png" }); - const file = new File([blob], "generated_image.png", { - type: blob.type, - }); - return { success: true, file }; - return {} - } catch (error) { - console.error("Failed to remove background", error); - return { success: false }; - } - }, - - */ - - store.finishRemoveBackground(event.maybe_frontend_subscriber_id!, event.media_token, event.image_cdn_url); + console.log("Canvas bg removed event received:", event); + const nodeId = event.maybe_frontend_subscriber_id; + if (!nodeId) { + console.error("No node ID received from background removal"); + return; + } + store.finishRemoveBackground( + nodeId, + event.media_token, + event.image_cdn_url + ); }); // Listen for gallery drag and drop events @@ -432,9 +387,7 @@ const PageDraw = () => { store.toggleLock(store.selectedNodeIds); break; case "REMOVE_BACKGROUND": - await store.beginRemoveBackground( - store.selectedNodeIds, - ); + await store.beginRemoveBackground(store.selectedNodeIds); break; case "BRING_TO_FRONT": store.bringToFront(store.selectedNodeIds); diff --git a/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts b/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts index f2085ee867..95b3de0f87 100644 --- a/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts +++ b/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts @@ -232,22 +232,18 @@ interface SceneState { sendToBack: (nodeIds: string[]) => void; bringForward: (nodeIds: string[]) => void; sendBackward: (nodeIds: string[]) => void; + + // Start background removal (enqueues task with Tauri) beginRemoveBackground: ( nodeIds: string[], ) => Promise; + + // Finish background removal (handoff back from a Tauri-sent event) finishRemoveBackground: ( nodeId: string, mediaToken: string, imageCdnUrl: string, ) => Promise; - removeBackground: ( - nodeIds: string[], - operation: ( - success: boolean, - base64_image: string, - message: string, - ) => Promise<{ success: boolean; file?: File }>, - ) => Promise; // Add new lock action toggleLock: (nodeIds: string[]) => void; @@ -1459,38 +1455,15 @@ export const useSceneStore = create((set, get) => ({ } try { const base64Image = await convertFileToBase64(firstNode.imageFile); - const response = await EnqueueImageBgRemoval({ + // NB: This handler is async, so we subscribe (externally) and + // wait for the bg removal to complete. + const _response = await EnqueueImageBgRemoval({ base64_image: base64Image, frontend_caller: "canvas", frontend_subscriber_id: firstNode.id, }); - //const { success, file } = await operation( - // true, - // base64Image, - // "Removing Background.", - //); - //if (success && file) { - // // Create a new node instance - // const updatedNode = new Node({ - // ...firstNode, - // imageFile: file, - // }); - // // Load the new image - // await updatedNode.setImageFromFile(file); - - // // Update the store with the fully loaded node - // set((state: SceneState) => ({ - // nodes: state.nodes.map((node: Node) => { - // if (node.id === firstNode.id) { - // return updatedNode; - // } - // return node; - // }), - // })); - // get().saveState(); - //} } catch (error) { - console.error("Error updating image:", error); + console.error("Error starting background removal:", error); } }, finishRemoveBackground: async ( @@ -1507,79 +1480,28 @@ export const useSceneStore = create((set, get) => ({ if (!firstNode || !firstNode.imageFile) { return; } - // Create a new node instance - const updatedNode = new Node({ - ...firstNode, - imageUrl: imageCdnUrl, - }); - // Load the new image - await updatedNode.setImageFromUrl(imageCdnUrl); - // Update the store with the fully loaded node - set((state: SceneState) => ({ - nodes: state.nodes.map((node: Node) => { - if (node.id === firstNode.id) { - return updatedNode; - } - return node; - }), - })); - get().saveState(); - }, - removeBackground: async ( - nodeIds: string[], - operation: ( - success: boolean, - base64_image: string, - message: string, - ) => Promise<{ success: boolean; file?: File }>, - ) => { - const hasImageNodes = nodeIds.some((id) => { - const node = get().nodes.find((n) => n.id === id); - return node ? node.type === "image" : false; - }); - - if (hasImageNodes) { - const firstNode = get().nodes.find( - (node) => nodeIds.includes(node.id) && node.type === "image", - ); - if (firstNode && firstNode.imageFile) { - try { - const base64Image = await convertFileToBase64(firstNode.imageFile); - const { success, file } = await operation( - true, - base64Image, - "Removing Background.", - ); - - if (success && file) { - // Create a new node instance - const updatedNode = new Node({ - ...firstNode, - imageFile: file, - }); - - // Load the new image - await updatedNode.setImageFromFile(file); - - // Update the store with the fully loaded node - set((state: SceneState) => ({ - nodes: state.nodes.map((node: Node) => { - if (node.id === firstNode.id) { - return updatedNode; - } - return node; - }), - })); - - get().saveState(); + try { + // Create a new node instance from the old node + const updatedNode = new Node({ + ...firstNode, + imageUrl: imageCdnUrl, + }); + // Load the new image + await updatedNode.setImageFromUrl(imageCdnUrl); + // Update the store with the fully loaded node + set((state: SceneState) => ({ + nodes: state.nodes.map((node: Node) => { + if (node.id === firstNode.id) { + return updatedNode; } - } catch (error) { - console.error("Error updating image:", error); - } - } + return node; + }), + })); + get().saveState(); + } catch (error) { + console.error("Error completing background removal:", error); } }, - // Add toggleLock action toggleLock: (nodeIds: string[]) => { set((state) => {