Fixed issue with image background removal and drag and drop. (#689)

Co-authored-by: CrossPr0duct <alicextensor@gmail.com>

frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts

@@ -614,34 +614,21 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   },
   
   // Add method for URL-based images
-  createImageFromUrl: (x: number, y: number, url: string, width?: number, height?: number) => {
-    // Similar to createImageFromFile but handles URL
-    const img = new Image();
-    img.crossOrigin = "Anonymous"; // Handle CORS if necessary
-    img.onload = () => {
-      const aspectRatio = img.width / img.height;
-      const newWidth = width || (height ? height * aspectRatio : 200); // Default width or calculate from height
-      const newHeight = height || (width ? width / aspectRatio : newWidth / aspectRatio); // Default height or calculate from width
+  createImageFromUrl: async (x: number, y: number, url: string, width?: number, height?: number) => {
+    try {
+      // Fetch the image and convert to blob
+      const response = await fetch(url);
+      const blob = await response.blob();
       
-      const node = new Node({
-        id: generateId(),
-        type: 'image',
-        x,
-        y,
-        width: newWidth,
-        height: newHeight,
-        fill: 'transparent',
-        imageElement: img, // Use the loaded image object
-        draggable: true,
-        imageUrl: url // Store the URL as the source
-      });
-      get().addNode(node);
-    };
-    img.onerror = () => {
-      console.error("Error loading image from URL:", url);
-      // Optionally handle the error, e.g., by creating a placeholder or notifying the user
-    };
-    img.src = url;
+      // Create a File from the blob
+      const filename = url.split('/').pop() || 'image.png';
+      const file = new File([blob], filename, { type: blob.type });
+      
+      // Use existing createImage function
+      get().createImage(x, y, file, width, height);
+    } catch (error) {
+      console.error("Error loading image from URL:", url, error);
+    }
   },
   
   // Update the createImage method to handle both URLs and Files

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -80,7 +80,7 @@ import { useTabStore } from "../Stores/TabState";
 export const PageEditor = () => {
   useSignals();
   const [isLoginModalOpen, setIsLoginModalOpen] = useState<boolean>(false);
-
+  
   const { status } = authentication;
   useEffect(() => {
     if (status.value !== AUTH_STATUS.LOGGED_OUT) {
@@ -92,13 +92,7 @@ export const PageEditor = () => {
   const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
   };
-
-  // TODO: For 3d Promptbox to accept this later on
-  // const { selectedModels } = useModelSelectorStore();
-  // const selectedModel =
-  // selectedModels[ModelCategory.Editor3D] ||
-  // videoGenerationModels[0]?.label;
-
+  
   useEffect(() => {
     timelineHeight.value = 0; //timelineHeight.value = 208;
     sidePanelWidth.value = 340;
@@ -416,12 +410,9 @@ export const PageEditor = () => {
   }, [tabStore.activeTabId, editorEngine]);
 
 
-
-
   return (
     <div className="w-screen">
       <TopBar loginSignUpPressed={()=> {
-        console.log("PRESSED")
         setIsLoginModalOpen(true)
       }} pageName="Edit Scene" />
       {isLoginModalOpen && (

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -1,15 +0,0 @@
-import { useSignals } from "@preact/signals-react/runtime";
-import { PageEditor } from "~/pages/PageEnigma/PageEditor";
-
-// TODO: Remove these file
-import { currentPage } from "~/signals";
-import { Pages } from "~/pages/PageEnigma/constants/page";
-
-export const PageEnigmaComponent = () => {
-  useSignals();
-  return (
-    <>
-      <PageEditor />
-    </>
-  );
-};