From d3708039f30c33121ae163b1669355a02f9bdb07 Mon Sep 17 00:00:00 2001
From: Michael Chung <michaelchung@mac.home>
Date: Fri, 6 Jun 2025 18:32:16 -0400
Subject: [PATCH] Fix Safari issue

---
 .../app/src/pages/PageDraw/PageDraw.tsx       | 30 ++++++++++++++++++-
 .../src/pages/PageDraw/stores/SceneState.ts   | 10 +++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
index 8f988c7323..9bd85a2397 100644
--- a/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx
@@ -47,12 +47,21 @@ const PageDraw = () => {
     const centerX = 512; // leftPanelWidth / 2
     const centerY = 512; // leftPanelHeight / 2
 
+    console.log('Image upload started with files:', files);
+    console.log('Center coordinates:', { centerX, centerY });
+
     files.forEach((file, index) => {
+      console.log(`Processing file ${index}:`, file.name);
+      
       store.createImageFromFile(
         centerX + index * 60, // Offset each image
         centerY + index * 60,
         file,
       );
+      console.log(`Created image at position:`, { 
+        x: centerX + index * 60, 
+        y: centerY + index * 60 
+      });
     });
   };
 
@@ -155,23 +164,42 @@ const PageDraw = () => {
         }}
         onUploadImage={(): void => {
           // Create input element dynamically like in PromptEditor
+          console.log("Upload image activated");
           const input = document.createElement("input");
           input.type = "file";
           input.accept = "image/*";
-          input.multiple = true; // Allow multiple file selection
+          input.multiple = true;
+          input.style.display = "none"; // Hide the input
+
+          // Attach to DOM
+          document.body.appendChild(input);
+
           input.onchange = (e: Event) => {
+            console.log("File change event triggered");
             const target = e.target as HTMLInputElement;
             if (target.files) {
               const files = Array.from(target.files);
+              console.log("Selected files:", files);
               const imageFiles = files.filter((file) =>
                 file.type.startsWith("image/"),
               );
+              console.log("Filtered image files:", imageFiles);
 
               if (imageFiles.length > 0) {
+                console.log("Uploading images:", imageFiles);
                 handleImageUpload(imageFiles);
+              } else {
+                console.log("No valid image files selected");
               }
+            } else {
+              console.log("No files selected");
             }
+            // Clean up: remove input from DOM after use
+            document.body.removeChild(input);
           };
+
+          // Reset value before click (for same file selection)
+          input.value = "";
           input.click();
         }}
         onDelete={(): void => {
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 9a21d2bdf6..af5a6c15f6 100644
--- a/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts
+++ b/frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts
@@ -515,7 +515,12 @@ export const useSceneStore = create<SceneState>((set, get) => ({
           const aspectRatio = img.naturalWidth / img.naturalHeight;
           const finalWidth = width || Math.min(img.naturalWidth, 300);
           const finalHeight = height || finalWidth / aspectRatio;
-          
+          console.log('Image loaded with dimensions:', {
+            naturalWidth: img.naturalWidth,
+            naturalHeight: img.naturalHeight,
+            finalWidth: finalWidth,
+            finalHeight: finalHeight
+          });
           get().createImage(x, y, file, finalWidth, finalHeight);
         };
         img.src = dataUrl;
@@ -576,8 +581,9 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     // Load the image asynchronously
     node.setImage(source).then(() => {
       // Update the node in the store after image loads
+      console.log('Image loaded for node:', node.id);
       get().updateNode(node.id, node, false);
-    }).catch(console.error);
+    }).catch((error)=>console.error('Error loading image:', error));
     
     get().addNode(node);
   },