Gui scafolding toolbar, log console, axis for sketching

src/App.tsx

@@ -15,6 +15,10 @@ import {
 } from './editor/highlightextension'
 import { useStore } from './useStore'
 import { isOverlapping } from './lib/utils'
+import { Toolbar } from './Toolbar'
+import { BasePlanes } from './components/BasePlanes'
+import { SketchPlane } from './components/SketchPlane'
+import { Logs } from './components/Logs'
 
 const _code = `sketch mySketch {
   path myPath = lineTo(0,1)
@@ -29,15 +33,25 @@ const OrrthographicCamera = OrthographicCamera as any
 function App() {
   const cam = useRef()
   const [code, setCode] = useState(_code)
-  const { editorView, setEditorView, setSelectionRange, selectionRange } =
-    useStore(
-      ({ editorView, setEditorView, setSelectionRange, selectionRange }) => ({
-        editorView,
-        setEditorView,
-        setSelectionRange,
-        selectionRange,
-      })
-    )
+  const {
+    editorView,
+    setEditorView,
+    setSelectionRange,
+    selectionRange,
+    guiMode,
+    setGuiMode,
+    removeError,
+    addLog,
+  } = useStore((s) => ({
+    editorView: s.editorView,
+    setEditorView: s.setEditorView,
+    setSelectionRange: s.setSelectionRange,
+    selectionRange: s.selectionRange,
+    guiMode: s.guiMode,
+    setGuiMode: s.setGuiMode,
+    removeError: s.removeError,
+    addLog: s.addLog,
+  }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
     setCode(value)
@@ -60,9 +74,21 @@ function App() {
   >([])
   useEffect(() => {
     try {
+      if (!code) {
+        setGeoArray([])
+        removeError()
+        return
+      }
       const tokens = lexer(code)
       const ast = abstractSyntaxTree(tokens)
-      const programMemory = executor(ast)
+      const programMemory = executor(ast, {
+        root: {
+          log: (a: any) => {
+            addLog(a)
+          },
+        },
+        _sketch: [],
+      })
       const geos: { geo: BufferGeometry; sourceRange: [number, number] }[] =
         programMemory.root.mySketch
           .map(
@@ -76,14 +102,18 @@ function App() {
           )
           .filter((a: any) => !!a.geo)
       setGeoArray(geos)
+      removeError()
       console.log(programMemory)
-    } catch (e) {
+    } catch (e: any) {
+      setGuiMode({ mode: 'codeError' })
       console.log(e)
+      addLog(e)
     }
   }, [code])
   return (
     <div className="h-screen">
       <Allotment>
+        <Logs />
         <div className="bg-red h-full">
           <CodeMirror
             value={_code}
@@ -96,36 +126,44 @@ function App() {
         </div>
         <div className="h-full">
           viewer
-          <div className="border h-full border-gray-300">
-            <Canvas>
-              <OrbitControls
-                enableDamping={false}
-                enablePan
-                enableRotate
-                enableZoom
-                reverseOrbit={false}
-              />
-              <OrrthographicCamera
-                ref={cam}
-                makeDefault
-                position={[0, 0, 10]}
-                zoom={40}
-                rotation={[0, 0, 0]}
-              />
-              <ambientLight />
-              <pointLight position={[10, 10, 10]} />
-              {geoArray.map(
-                (
-                  {
-                    geo,
-                    sourceRange,
-                  }: { geo: BufferGeometry; sourceRange: [number, number] },
-                  index
-                ) => (
-                  <Line key={index} geo={geo} sourceRange={sourceRange} />
-                )
-              )}
-            </Canvas>
+          <Toolbar />
+          <div className="border h-full border-gray-300 relative">
+            <div className="absolute inset-0">
+              <Canvas>
+                <OrbitControls
+                  enableDamping={false}
+                  enablePan
+                  enableRotate
+                  enableZoom
+                  reverseOrbit={false}
+                />
+                <OrrthographicCamera
+                  ref={cam}
+                  makeDefault
+                  position={[0, 0, 10]}
+                  zoom={40}
+                  rotation={[0, 0, 0]}
+                />
+                <ambientLight />
+                <pointLight position={[10, 10, 10]} />
+                {geoArray.map(
+                  (
+                    {
+                      geo,
+                      sourceRange,
+                    }: { geo: BufferGeometry; sourceRange: [number, number] },
+                    index
+                  ) => (
+                    <Line key={index} geo={geo} sourceRange={sourceRange} />
+                  )
+                )}
+                <BasePlanes />
+                <SketchPlane />
+              </Canvas>
+            </div>
+            {guiMode.mode === 'codeError' && (
+              <div className="absolute inset-0 bg-gray-700/20">yo</div>
+            )}
           </div>
         </div>
       </Allotment>