enable double-sided image plane and signal removal

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts

@@ -206,6 +206,7 @@ class Scene {
           color: 0xffffff,
           map: texture,
           transparent: true,
+          side: THREE.DoubleSide,
         });
         obj = new THREE.Mesh(geometry, image_material);
         obj.userData["media_id"] = name;

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

@@ -54,13 +54,11 @@ import {
   topNavMediaId,
   topNavMediaUrl,
 } from "~/components/signaled/TopBar/TopBar";
-import { setOnImageDrop } from "../../../../../../libs/components/gallery-modal/src/lib/galleryDnd";
 import { uploadPlaneFromMediaToken } from "~/components/reusable/UploadModalMedia/uploadPlane";
 import { addObject } from "./signals/objectGroup/addObject";
 import { AssetType } from "~/enums";
 import { v4 as uuidv4 } from "uuid";
 import { MediaItem } from "~/pages/PageEnigma/models";
-import { GalleryItem } from "../../../../../../libs/components/gallery-modal/src/lib/gallery-modal";
 import { UploaderState } from "~/models";
 import * as THREE from "three";
 
@@ -247,59 +245,30 @@ export const PageEditor = () => {
 
   // Image drop from gallery/library modal
   useEffect(() => {
-    setOnImageDrop(
-      async (item: GalleryItem, _position: { x: number; y: number }) => {
-        console.log("Drop debug:", {
-          editorEngine,
-          camera: editorEngine?.camera,
-          renderer: editorEngine?.renderer,
-          _position,
-        });
-        // Diagnostic log for received drop position and canvas rect
-        if (editorEngine?.renderer) {
-          const rect = editorEngine.renderer.domElement.getBoundingClientRect();
-          const canvasX = _position.x - rect.left;
-          const canvasY = _position.y - rect.top;
-          console.log(
-            "[Drop Debug] Received:",
-            _position,
-            "Canvas rect:",
-            rect,
-            "canvasX:",
-            canvasX,
-            "canvasY:",
-            canvasY,
-          );
-        }
-        // Calculate world position from cursor immediately on drop
-        let worldPosition = undefined;
-        if (editorEngine?.camera && editorEngine?.renderer && _position) {
-          const rect = editorEngine.renderer.domElement.getBoundingClientRect();
-          // Convert client coordinates to canvas coordinates
-          const canvasX = _position.x - rect.left;
-          const canvasY = _position.y - rect.top;
-          const ndcX = (canvasX / rect.width) * 2 - 1;
-          const ndcY = -(canvasY / rect.height) * 2 + 1;
-          const vector = new THREE.Vector3(ndcX, ndcY, 0.5);
-          vector.unproject(editorEngine.camera);
-          worldPosition = vector;
-          // Diagnostic logging
-          console.log({
-            dropPosition: _position,
-            rect: {
-              left: rect.left,
-              top: rect.top,
-              width: rect.width,
-              height: rect.height,
-            },
-            canvasX,
-            canvasY,
-            ndcX,
-            ndcY,
-            worldPosition,
-          });
-        }
+    function handleGalleryImageDrop(e: CustomEvent) {
+      const { item, position } = e.detail;
+      console.log("Drop debug (event):", {
+        editorEngine,
+        camera: editorEngine?.camera,
+        renderer: editorEngine?.renderer,
+        position,
+      });
 
+      // Calculate world position from cursor immediately on drop
+      let worldPosition = undefined;
+      if (editorEngine?.camera && editorEngine?.renderer && position) {
+        const rect = editorEngine.renderer.domElement.getBoundingClientRect();
+        // Convert client coordinates to canvas coordinates
+        const canvasX = position.x - rect.left;
+        const canvasY = position.y - rect.top;
+        const ndcX = (canvasX / rect.width) * 2 - 1;
+        const ndcY = -(canvasY / rect.height) * 2 + 1;
+        const vector = new THREE.Vector3(ndcX, ndcY, 0.5);
+        vector.unproject(editorEngine.camera);
+        worldPosition = vector;
+      }
+
+      (async () => {
         try {
           // Place the object immediately to avoid upload delay affecting placement
           const mediaItem: MediaItem = {
@@ -324,12 +293,21 @@ export const PageEditor = () => {
               if (state.status) console.log("Upload status:", state.status);
             },
           });
-          console.log("Upload complete");
         } catch (err) {
-          console.error("Failed to upload and add image plane:", err);
+          console.error("Failed to add image plane:", err);
         }
-      },
+      })();
+    }
+    window.addEventListener(
+      "gallery-image-drop",
+      handleGalleryImageDrop as EventListener,
     );
+    return () => {
+      window.removeEventListener(
+        "gallery-image-drop",
+        handleGalleryImageDrop as EventListener,
+      );
+    };
   }, []);
 
   const display3d = appTabId.value === "3D" ? "block" : "none";

frontend/libs/components/gallery-modal/src/lib/galleryDnd.ts

@@ -24,13 +24,6 @@ const dragState: DragState = {
 
 const dragThreshold = 5;
 
-export let onImageDrop:
-  | ((item: GalleryItem, position: { x: number; y: number }) => void)
-  | null = null;
-export function setOnImageDrop(cb: typeof onImageDrop) {
-  onImageDrop = cb;
-}
-
 function onPointerDown(event: React.PointerEvent, item: GalleryItem) {
   if (event.button !== 0) return;
   dragState.item = item;
@@ -65,9 +58,14 @@ function onPointerUp(event: PointerEvent) {
     dragState.isDragging &&
     dragState.item.mediaClass === "image"
   ) {
-    if (onImageDrop) {
-      onImageDrop(dragState.item, { x: event.pageX, y: event.pageY });
-    }
+    window.dispatchEvent(
+      new CustomEvent("gallery-image-drop", {
+        detail: {
+          item: dragState.item,
+          position: { x: event.pageX, y: event.pageY },
+        },
+      })
+    );
   }
   dragState.item = null;
   dragState.isDragging = false;