Load default texture into UV editor and auto-scale to fit canvas

src/components/UVEditor.tsx

@@ -47,15 +47,44 @@ export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObje
 
   useEffect(() => {
     const saved = targetObject?.materialProps?.uvLayers;
-    if (!saved?.length) return;
+    if (saved?.length) {
-    let n = 0;
+      let n = 0;
-    const init: Layer[] = saved.map((l: any) => ({ ...l }));
+      const init: Layer[] = saved.map((l: any) => ({ ...l }));
-    init.forEach(layer => {
+      init.forEach(layer => {
+        const img = new Image();
+        img.onload = () => { layer.img = img; n++; if (n === init.length) setLayers([...init]); };
+        img.src = layer.url;
+      });
+    } else if (targetObject?.materialProps?.map) {
+      // If no saved layers but there's a base map texture, load it as the initial layer
+      const url = targetObject.materialProps.map;
       const img = new Image();
-      img.onload = () => { layer.img = img; n++; if (n === init.length) setLayers([...init]); };
+      img.onload = () => {
-      img.src = layer.url;
+        // Automatically scale the image so it fits the 1024x1024 canvas exactly
-    });
+        const scaleX = CANVAS_SIZE / img.width;
-  }, []);
+        const scaleY = CANVAS_SIZE / img.height;
+
+        const layer: Layer = {
+          id: `l-base`,
+          url,
+          img,
+          x: CANVAS_SIZE / 2,
+          y: CANVAS_SIZE / 2,
+          scaleX,
+          scaleY,
+          rotation: 0,
+          cropL: 0,
+          cropT: 0,
+          cropR: 0,
+          cropB: 0,
+          visible: true
+        };
+        setLayers([layer]);
+        setSelectedId(layer.id);
+      };
+      img.src = url;
+    }
+  }, [targetObject]);
 
   const renderCanvas = useCallback((lrs: Layer[], transparent: boolean, bg: string): string => {
     const c = document.createElement('canvas');