feat: allow to import libraries, fonts and additional files from proj…

…ects

README.md

@@ -3,8 +3,17 @@
 This project uses [`openscad-wasm`](https://github.com/openscad/openscad-wasm) under the hood to
 build an editor for OpenSCAD that is capable of loading `.scad` files from other servers.
 
-It is capable of rendering and exporting your creations. There is also a naive implementation of a
-visual customizer.
+## Features
+
+- It is capable of rendering OpenSCAD scripts
+- You can import scripts by URL
+- There are adapters for Printables and Thingiverse. Those platform do not expose the
+  links to their files in a way the user can copy the URL to the files. Instead this
+  application imports it from the model URL (i.e. https://www.thingiverse.com/thing:1234
+  or https://www.printables.com/model/123456-model-name)
+- You can import your own libraries or chose from a list of common libraries
+- You can add your own fonts or choose from a list of common fonts
+- You can export your customized model to STL, OFF, AMF, CSG, DXF and SVG
 
 # Dev
 

package.json

@@ -39,10 +39,13 @@
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@mui/x-tree-view": "^6.17.0",
+    "@zip.js/zip.js": "^2.7.33",
     "mui-chips-input": "^2.1.3",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-stl-viewer": "^2.5.0"
   }
 }

src/App.tsx

@@ -1,9 +1,11 @@
-import { Box, CircularProgress, Paper, styled } from '@mui/material';
+import { styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import React from 'react';
 
-import Editor from './components/Editor';
 import ErrorBox from './components/ErrorBox';
-import ImportFileSelector from './components/ImportFileSelector';
+import { useFileSystemProvider } from './components/FileSystemProvider';
+import Workspace from './components/Workspace';
 import useImport from './hooks/useImport';
 
 const MyBox = styled(Box)(({ theme }) => ({
@@ -19,9 +21,8 @@ const MyBox = styled(Box)(({ theme }) => ({
 export default function App() {
   const importUrl = getImportUrl();
 
-  const { error, files, isLoading } = useImport(importUrl);
-  const [selectedIndex, setSelectedIndex] = React.useState<number>();
-  let file: string | undefined;
+  const { error, isLoading } = useImport(importUrl);
+  const { files } = useFileSystemProvider();
 
   // Show a loading indicator during the import.
   if (isLoading) {
@@ -49,27 +50,7 @@ export default function App() {
     );
   }
 
-  // If there are multiple files, let the user select the one to import.
-  if (files.length > 1 && selectedIndex === undefined) {
-    return (
-      <MyBox>
-        <Paper sx={{ p: 1 }}>
-          <ImportFileSelector files={files} onSelect={setSelectedIndex} />
-        </Paper>
-      </MyBox>
-    );
-  }
-
-  // If there is only one file, we can directly import it.
-  if (files.length === 1) {
-    file = files[0].url;
-
-    // If the user has selected a file, we can import it.
-  } else if (selectedIndex !== undefined && files.length > selectedIndex) {
-    file = files[selectedIndex].url;
-  }
-
-  return <Editor url={file} initialMode={file ? 'customizer' : undefined} />;
+  return <Workspace />;
 }
 
 function getImportUrl(): string | undefined {