fix: custom trees

Author: dudewheresmycode

src/dialogs/TreeImportDialog.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -28,6 +28,12 @@ export default function TreeImportDialog(props) {
   const [labelCache, setLabelCache] = useState('');
   const [availablePlants, setAvailablePlants] = useState();
   const [downloadPending, setDownloadPending] = useState();
+  const [selectedCategory, setSelectedCategory] = useState('trees');
+  
+  const filteredPlants = useMemo(() => {
+    return availablePlants?.[selectedCategory] || [];
+  }, [availablePlants, selectedCategory]);
+
   const handleClose = (event, reason) => {
     // if (reason === 'backdropClick') {
       event.preventDefault();
@@ -76,23 +82,26 @@ export default function TreeImportDialog(props) {
         <Grid container spacing={2}>
           <Grid size={2}>
             <List>
-              <ListItemButton selected={true}>
+              <ListItemButton selected={selectedCategory === 'trees'} onClick={(e) => setSelectedCategory('trees')}>
                 <ListItemText primary="Trees" />
               </ListItemButton>
-              <ListItemButton>
+              <ListItemButton selected={selectedCategory === 'grasses'} onClick={(e) => setSelectedCategory('grasses')}>
                 <ListItemText primary="Grasses" />
               </ListItemButton>
-              <ListItemButton>
+              <ListItemButton selected={selectedCategory === 'rocks'} onClick={(e) => setSelectedCategory('rocks')}>
                 <ListItemText primary="Rocks" />
               </ListItemButton>
-              <ListItemButton>
-                <ListItemText primary="Houses" />
+              <ListItemButton selected={selectedCategory === 'buildings'} onClick={(e) => setSelectedCategory('buildings')}>
+                <ListItemText primary="Buildings" />
+              </ListItemButton>
+              <ListItemButton selected={selectedCategory === 'custom'} onClick={(e) => setSelectedCategory('custom')}>
+                <ListItemText primary="Custom" />
               </ListItemButton>
             </List>
           </Grid>
           <Grid size={10}>
             <Grid container spacing={3}>
-              {availablePlants?.trees?.map(tree => {
+              {filteredPlants.map(tree => {
                 return (
                   <Grid size={3} key={tree.title}>
                     <Card variant="outlined">

src/lib/cache/plants.js

@@ -84,6 +84,16 @@ export function getAvailablePlants(tree) {
   const plantCache = getPlantCache();
   console.log('Found cached plants', plantCache);
   return {
+    custom: Object.values(plantCache).filter(p => p.type === 'custom').map(p => {
+      return {
+        ...p,
+        thumbnail: `${RESOURCES_FILE_PROTOCOL}://plant-cache/${path.basename(p.thumbnail)}`,
+        _cache: {
+          ...p,
+          _fileExists: true
+        }
+      }
+    }),
     trees: TREES.map(plant => {
       const cache = plantCache?.[plant.id];
       let url;

src/trees/main.js

@@ -5,6 +5,8 @@ import { randomUUID } from 'crypto';
 import { TREE_MAKER_FILE_PROTOCOL } from '../constants';
 import { pathToFileURL } from 'url';
 import { exportTreePackage } from '../lib/workers/index';
+import { PLANT_CACHE } from '../lib/cache/plants';
+import { cachePlant } from '../lib/app';
 
 let treeMakerScope = new Map();
 export let treeWindow;
@@ -57,26 +59,34 @@ export function createTreeMakerWindow() {
   treeWindow.show();
 }
 
-ipcMain.handle('treeMaker.export', async (event, thumbnailUri) => {
+ipcMain.handle('treeMaker.export', async (event, thumbnailUri, plantOptions = {}) => {
   const thumbnailRaw = thumbnailUri.split('base64,')?.[1];
   if (!thumbnailRaw?.length) {
     throw new Error('Missing thumbnail data');
   }
 
-  const result = await dialog.showSaveDialog({
-    defaultPath: 'TreePack'
-    // filters: [{ extensions: ['.glb'] }]
-  });
-  if (result.canceled || !result.filePath?.length) {
-    return;
-  }
-  const outputFile = result.filePath;
+  // const result = await dialog.showSaveDialog({
+  //   defaultPath: 'TreePack'
+  //   // filters: [{ extensions: ['.glb'] }]
+  // });
+  // if (result.canceled || !result.filePath?.length) {
+  //   return;
+  // }
+
+  const treeId = randomUUID();
+  const filename = `custom-${treeId}.glb`;
+  const filenamePNG = `custom-${treeId}.png`;
+  const outputFileGLB = path.join(PLANT_CACHE, filename);
+  const outputFilePNG = path.join(PLANT_CACHE, filenamePNG);
+
+
   const inputFiles = [...treeMakerScope.values()]
     .sort((a, b) => a.lod < b.lod ? -1 : 1)
     .map(tree => tree.path);
 
-  const outputFileGLB = `${outputFile}.glb`;
-  const outputFilePNG = `${outputFile}.png`;
+  // const outputFile = filePath;
+  // const outputFileGLB = `${outputFile}.glb`;
+  // const outputFilePNG = `${outputFile}.png`;
   console.log('inputFiles', inputFiles);
   console.log('outputFileGLB', outputFileGLB);
   console.log('outputFilePNG', outputFilePNG);
@@ -86,7 +96,17 @@ ipcMain.handle('treeMaker.export', async (event, thumbnailUri) => {
   // can take a while for compressing textures...
   await exportTreePackage(inputFiles, outputFileGLB);
 
-  shell.showItemInFolder(outputFileGLB);
+  cachePlant({
+    id: treeId,
+    key: treeId,
+    type: 'custom',
+    title: plantOptions.title ?? 'Custom Plant',
+    addedAt: new Date(),
+    thumbnail: outputFilePNG,
+    filePath: outputFileGLB,
+  });
+
+  // shell.showItemInFolder(outputFileGLB);
 
 });