introduce typescript

move threejs initialising useEffect logic to hook, useEffect was unnecessary create functional settings pane restyled editor to be less of a coloring book simplified commands by removing arguments when equal to previous completely rewrote slicing edges to shapes algorithm - introduces multiple shapes on one layer - sets correct winding direction for internal shapes - joins open paths - ... adds some json encoded 3D models to test with
Sam-Apostel · Aug 14, 2022 · 41e8a14 · 41e8a14 · vercel · Aug 14, 2022
1 parent e0ad64b
commit 41e8a14
Show file tree

Hide file tree

Showing 45 changed files with 21,997 additions and 28,345 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # scripting based Bring Your Own Code slicer for polar printers
-Currently this repo only holds a barebones Gcode toolpath viewer for testing purposes.
+
 
 This project was created in function of a 3d motion platform that uses polar coordinates.
 
-## supported Gcode 
+## supported G-code
 
 ### G0 rapid move (implemented in polar coordinate system)
 ex:
@@ -34,4 +34,4 @@ ex:
 ## limitations
 - each slice needs to be 1 continuous path
 - the ui colors are defined in the lch color space to train myself in it. lch is currently only supported in Safari
-- ui doesn't allow for changing settings, input geometry or present gcode
+- ui doesn't allow for changing settings, input geometry or present G-code
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,17 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3003 react-scripts start",
     "build": "CI=FALSE react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-graph-vis": "^1.0.7",
+    "react-scripts": "^5.0.1",
+    "three": "^0.143.0",
+    "typescript": "^4.7.4"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.2",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/three": "^0.143.0",
+    "react-use": "^17.3.1"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -25,18 +38,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3",
-    "three": "^0.135.0",
-    "web-vitals": "^1.0.1"
-  },
-  "devDependencies": {
-    "react-use": "^17.3.1"
   }
 }
diff --git a/planned.md b/planned.md
@@ -1,5 +1,6 @@
 # editor
 - [ ] grouping commands
+  - [ ] group layers
 - [ ] visual representation of groups
 - [ ] editing commands
 - [ ] autocomplete/suggest
@@ -8,9 +9,11 @@
 - [ ] variables
 - [ ] functional blocks
 - [ ] select line represented in output
+- [ ] select layer represented in output
 
 # viewer
 - [x] display shell object
+- [ ] visualize layers
 - [ ] display printed example
 - [ ] display build area
 - [ ] simulate machine movements
@@ -23,14 +26,15 @@
 - [ ] G17 G18 G19 (plane selection) applies to G2 and G3 arc moves
 - [ ] G68 ( rotate coordinate system ) usefull for G0 from center
 - [ ] showing a range of layers
+- [ ] visualize extrusion amount
 
 # advanced toolpaths
 - [ ] 6 DOF
 - [ ] view different machine operations (temperature, feedrate, ...)
 
 # slicer
 - [x] convert geometry into slices
-- [x] convert slices into gcode
+- [x] convert slices into G-code
 - [ ] infill patterns
   - [ ] dynamic infill density
 - [x] multiple walls
@@ -41,7 +45,10 @@
 - [ ] extrusion speeds
 - [ ] don't pass over the same point twice when closing a shape
 
+
 # settings
 - [ ] import/export settings 
 - [x] layer height
+- [ ] variable layer height
+- [ ] variable line thickness
 - [ ] infill
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A web based slicer with native support for polar machines"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Polar slicer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
@@ -3,9 +3,14 @@
 	height:100vh;
 	display: grid;
 	grid-template:
-        'editor viewer' 5fr
-        'settings viewer' max-content
-		/ max-content 3fr;
+		'editor viewer' auto
+		'settings viewer' max-content
+		/ max-content auto;
+
+	--graph-template:
+		'viewer viewer' calc(100vh - 20rem)
+		'settings graph' 20rem
+		/ max-content auto;
 }
 .App > * {
 	height: 100%;
@@ -14,3 +19,7 @@
 * {
 	box-sizing: border-box;
 }
+
+.graph {
+	grid-area: graph;
+}
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,39 @@
+import './App.css';
+import React from 'react';
+import GCodeEditor from './components/GCodeEditor';
+import GCodeViewer from './components/GCodeViewer';
+import PrintSettings from './components/PrintSettings';
+import useGCodeGenerator from './hooks/useGCodeGenerator';
+
+
+const App = () => {
+	const {
+		gCode,
+		setGCode,
+		geometry,
+		setGeometry,
+		settings,
+		setSettings,
+		// graphs
+	} = useGCodeGenerator();
+	// const [graphLayer, setGraphLayer] = useState(0);
+
+	return (
+		<div className="App">
+			<GCodeEditor gCode={gCode} onChange={setGCode} />
+			{gCode && <GCodeViewer gCode={gCode} shell={geometry} />}
+			<PrintSettings
+				value={settings}
+				onChange={setSettings}
+				geometry={geometry}
+				setGeometry={setGeometry}
+				// setGraphLayer={setGraphLayer}
+				// gaphLayer={graphLayer}
+				// graphLayers={graphs?.length ?? 0}
+			/>
+			{/*<Graph graph={graphs?.[graphLayer]} />*/}
+		</div>
+	);
+};
+
+export default App;