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 cd544d498..404e407be 100644 --- a/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts +++ b/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts @@ -614,34 +614,21 @@ export const useSceneStore = create((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 diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx index c917fb4f4..bc6c393f8 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx +++ b/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(false); - + const { status } = authentication; useEffect(() => { if (status.value !== AUTH_STATUS.LOGGED_OUT) { @@ -92,13 +92,7 @@ export const PageEditor = () => { const handleOverlayClick = (event: React.MouseEvent) => { 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 (
{ - console.log("PRESSED") setIsLoginModalOpen(true) }} pageName="Edit Scene" /> {isLoginModalOpen && ( diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigmaComponent.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigmaComponent.tsx deleted file mode 100644 index bf731ef3c..000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigmaComponent.tsx +++ /dev/null @@ -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 ( - <> - - - ); -};