diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx index ea63731316..d3d02d4504 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx +++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx @@ -36,7 +36,7 @@ interface Props { const appTabs: TabItem[] = [ { id: "2D", label: "2D" }, { id: "3D", label: "3D" }, - { id: "VIDEO", label: "Video" }, + // { id: "VIDEO", label: "Video" }, ]; export const TopBar = ({ @@ -71,6 +71,20 @@ export const TopBar = ({ } }, [currentAppTabId, engine3D, is3DInit]); + const handleAddToScene = async (url: string) => { + console.log("add to scene", url); + if (currentAppTabId === "2D") { + console.log("Adding to 2D scene"); + } else if (currentAppTabId === "3D") { + console.log("Adding to 3D scene"); + engine3D?.activeScene.loadObjectFromUrl(url); + } else if (currentAppTabId === "VIDEO") { + console.log("Adding to Video scene"); + } else { + console.warn(`Unknown tab type: ${currentAppTabId}`); + } + }; + return ( <>
@@ -149,39 +163,7 @@ export const TopBar = ({ activeTab={activeLibraryTab} onTabChange={setActiveLibraryTab} onDownloadClicked={downloadFileFromUrl} - onAddToSceneClicked={async (url) => { - console.log("add to scene", url); - // Download the image from the URL and convert to File - const downloadImage = async (url: string): Promise => { - try { - // Fetch the image - const response = await fetch(url); - if (!response.ok) { - throw new Error(`Failed to fetch image: ${response.status}`); - } - - // Get the blob data - const blob = await response.blob(); - - // Extract filename from URL or use a default name - const filename = url.split("/").pop() || "image.png"; - - // Create a File object from the blob - const file = new File([blob], filename, { type: blob.type }); - - return file; - } catch (error) { - console.error("Error downloading image:", error); - return null; - } - }; - const file = await downloadImage(url); - if (file) { - console.log("file", file); - } else { - console.error("Failed to download image"); - } - }} + onAddToSceneClicked={handleAddToScene} /> ); diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts b/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts index f2da3118bd..e5f23428a3 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts @@ -2,8 +2,6 @@ import * as THREE from "three"; import { GLTFLoader, GLTF } from "three/addons/loaders/GLTFLoader.js"; import { MMDLoader } from "three/addons/loaders/MMDLoader.js"; -import environmentVariables from "~/Classes/EnvironmentVariables"; - import { Font } from "three/examples/jsm/loaders/FontLoader.js"; import { generateUUID } from "three/src/math/MathUtils.js"; import { LoadingPlaceHolderManager } from "./placeholder_manager"; @@ -13,7 +11,6 @@ import { ChromaKeyMaterial } from "./chromakey"; import { TimeLine } from "./timeline"; import { ClipGroup, ClipType } from "~/enums"; import { ClipUI } from "../clips/clip_ui"; -import { GetCdnOrigin } from "~/api/GetCdnOrigin"; import { GetFrontendEnvironment } from "~/Classes/GetFrontendEnvironment"; import { gridVisibility } from "../signals/engine"; import { InfiniteGridHelper } from "./InfiniteGridHelper"; @@ -432,7 +429,7 @@ class Scene { // TODO: REPLACE async getMediaURL(media_id: string) { const response = await this.mediaFilesApi.GetMediaFileByToken({ - mediaFileToken: media_id + mediaFileToken: media_id, }); return response.data!.media_links.cdn_url; } @@ -539,6 +536,21 @@ class Scene { return mmd; } + async loadObjectFromUrl( + url: string, + position: THREE.Vector3 = new THREE.Vector3(-0.5, 1.5, 0), + ): Promise { + console.log("loadObjectFromUrl!!!!!!!!", url); + if ( + url.includes(".png") || + url.includes(".jpg") || + url.includes(".jpeg") || + url.includes(".mp4") + ) { + return await this.instantiate("Image::" + url); + } + } + async loadObject( media_id: string, name: string, diff --git a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx index 046d75f64e..a688c62144 100644 --- a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx +++ b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx @@ -337,6 +337,7 @@ export const GalleryModal = React.memo( imageUrl && handleImageError(imageUrl)} diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx index 138ca70e42..eec078aff1 100644 --- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx +++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx @@ -8,6 +8,7 @@ import { faDownToLine } from "@fortawesome/pro-solid-svg-icons"; interface LightboxModalProps { isOpen: boolean; onClose: () => void; + onCloseGallery: () => void; imageUrl?: string | null; imageAlt?: string; onImageError?: () => void; @@ -22,6 +23,7 @@ interface LightboxModalProps { export function LightboxModal({ isOpen, onClose, + onCloseGallery, imageUrl, imageAlt = "", onImageError, @@ -114,6 +116,8 @@ export function LightboxModal({ onClick={async (e) => { e.stopPropagation(); await onAddToSceneClicked(downloadUrl); + onClose(); // close the lightbox + onCloseGallery(); // close the gallery }} > Add to Current Scene