fix up axis

src/App.tsx

@@ -20,6 +20,7 @@ import { Toolbar } from './Toolbar'
 import { BasePlanes } from './components/BasePlanes'
 import { SketchPlane } from './components/SketchPlane'
 import { Logs } from './components/Logs'
+import { AxisIndicator } from './components/AxisIndicator'
 
 const OrrthographicCamera = OrthographicCamera as any
 
@@ -181,6 +182,7 @@ function App() {
                 )}
                 <BasePlanes />
                 <SketchPlane />
+                <AxisIndicator />
               </Canvas>
             </div>
             {guiMode.mode === 'codeError' && (

src/components/AxisIndicator.tsx

@@ -0,0 +1,16 @@
+export const AxisIndicator = () => (
+  <>
+    <mesh position={[0.5, 0, 0]}>
+      <boxBufferGeometry args={[1, 0.05, 0.05]} />
+      <meshStandardMaterial color="red" />
+    </mesh>
+    <mesh position={[0, 0.5, 0]}>
+      <boxBufferGeometry args={[0.05, 1, 0.05]} />
+      <meshStandardMaterial color="blue" />
+    </mesh>
+    <mesh position={[0, 0, 0.5]}>
+      <boxBufferGeometry args={[0.05, 0.05, 1]} />
+      <meshStandardMaterial color="green" />
+    </mesh>
+  </>
+)

src/components/BasePlanes.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { DoubleSide } from 'three'
 import { useStore } from '../useStore'
 import { Intersection } from '@react-three/fiber'
+import { Text } from '@react-three/drei'
 import { addSketchTo, Program } from '../lang/abstractSyntaxTree'
 
 const opacity = 0.1
@@ -51,11 +52,12 @@ export const BasePlanes = () => {
           body: [],
         }
     const { modifiedAst, id } = addSketchTo(_ast)
+    const axis = axisIndex === 0 ? 'xy' : axisIndex === 1 ? 'xz' : 'yz'
 
     setGuiMode({
       mode: 'sketch',
       sketchMode: 'points',
-      axis: axisIndex === 0 ? 'yz' : axisIndex === 1 ? 'xy' : 'xz',
+      axis,
       id,
     })
 
@@ -86,6 +88,12 @@ export const BasePlanes = () => {
             transparent
             opacity={opacity + (axisIndex === index ? 0.3 : 0)}
           />
+          <Text fontSize={1} color="#555" position={[1, 1, 0.01]}>
+            {index === 0 ? 'xy' : index === 1 ? 'xz' : 'yz'}
+          </Text>
+          <Text fontSize={1} color="#555" position={[1, 1, -0.01]}>
+            {index === 0 ? 'xy' : index === 1 ? 'xz' : 'yz'}
+          </Text>
         </mesh>
       ))}
     </>

src/components/SketchPlane.tsx

@@ -23,11 +23,11 @@ export const SketchPlane = () => {
   const ninety = Math.PI / 2
   const gridRotation: [number, number, number] = [0, 0, 0]
   const clickDetectPlaneRotation: [number, number, number] = [0, 0, 0]
-  if (guiMode.axis === 'yz') {
+  if (guiMode.axis === 'xy') {
     gridRotation[0] = ninety
-  } else if (guiMode.axis === 'xy') {
-    clickDetectPlaneRotation[0] = ninety
   } else if (guiMode.axis === 'xz') {
+    clickDetectPlaneRotation[0] = ninety
+  } else if (guiMode.axis === 'yz') {
     gridRotation[2] = ninety
     clickDetectPlaneRotation[1] = ninety
   }
@@ -50,10 +50,13 @@ export const SketchPlane = () => {
                 end: 0,
                 body: [],
               }
-          const { modifiedAst, id } = addLine(_ast, guiMode.id, [
-            point.x,
-            point.y,
-          ])
+          let addLinePoint: [number, number] = [point.x, point.y]
+          if (guiMode.axis === 'xz') {
+            addLinePoint = [point.x, point.z]
+          } else if (guiMode.axis === 'yz') {
+            addLinePoint = [point.z, point.y]
+          }
+          const { modifiedAst, id } = addLine(_ast, guiMode.id, addLinePoint)
           updateAst(modifiedAst)
         }}
       >