From d7ebb00c3bf9f107ecb4a2b2424ec70030e0f23b Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sun, 14 Mar 2021 08:59:29 +1100
Subject: [PATCH 1/3] Couple of tweaks

---
 web/src/components/IdeConsole/IdeConsole.js   |  1 -
 .../components/IdeToolbarNew/IdeToolbarNew.js |  1 -
 web/src/components/IdeViewer/IdeViewer.js     | 32 ++++++++++++++++---
 web/src/helpers/hooks/useIdeState.js          | 23 +++++++++----
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/web/src/components/IdeConsole/IdeConsole.js b/web/src/components/IdeConsole/IdeConsole.js
index 159800e..6483e23 100644
--- a/web/src/components/IdeConsole/IdeConsole.js
+++ b/web/src/components/IdeConsole/IdeConsole.js
@@ -5,7 +5,6 @@ const IdeConsole = () => {
   const { state } = useContext(IdeContext)
   return (
     <div className="p-8 border-2 m-2 overflow-y-auto">
-      <div className="pb-4">hi I'm console</div>
       <div>
         {state.consoleMessages?.map(({ type, message }, index) => (
           <div
diff --git a/web/src/components/IdeToolbarNew/IdeToolbarNew.js b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
index b945460..fa0f7d6 100644
--- a/web/src/components/IdeToolbarNew/IdeToolbarNew.js
+++ b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
@@ -16,7 +16,6 @@ const IdeToolbarNew = () => {
   return (
     <IdeContext.Provider value={{ state, dispatch }}>
       <div className="p-8 border-2">
-        <div>hi I'm the toolbar</div>
         <nav className="flex">
           <button
             onClick={() => setIdeType('openCascade')}
diff --git a/web/src/components/IdeViewer/IdeViewer.js b/web/src/components/IdeViewer/IdeViewer.js
index ea71afb..93a6000 100644
--- a/web/src/components/IdeViewer/IdeViewer.js
+++ b/web/src/components/IdeViewer/IdeViewer.js
@@ -15,6 +15,7 @@ function Controls({ onCameraChange, onDragStart }) {
     camera.position.x = 200
     camera.position.y = 140
     camera.position.z = 20
+    camera.far = 10000
     camera.fov = 22.5 // matches default openscad fov
 
     // Order matters with Euler rotations
@@ -105,6 +106,15 @@ function Box(props) {
     </mesh>
   )
 }
+function Sphere(props) {
+  const mesh = useRef()
+  return (
+    <mesh {...props} ref={mesh} scale={[1, 1, 1]}>
+      <sphereBufferGeometry args={[2, 30, 30]} />
+      <meshStandardMaterial color={props.color} />
+    </mesh>
+  )
+}
 let currentCode // I have no idea why this works and using state.code is the dispatch doesn't but it was always stale
 const IdeViewer = () => {
   const { state, dispatch } = useContext(IdeContext)
@@ -120,9 +130,22 @@ const IdeViewer = () => {
     setIsDragging(false)
   }, [state.objectData])
   currentCode = state.code
+
+  const openSCADDeepOceanThemeBackground = '#323232'
+  // the following are tailwind colors in hex, can't use these classes to color three.js meshes.
+  const pink400 = '#F472B6'
+  const indigo300 = '#A5B4FC'
+  const indigo900 = '#312E81'
   return (
     <div className="p-8 border-2 m-2">
-      <div className="relative" style={{ height: '500px', width: '500px' }}>
+      <div
+        className="relative"
+        style={{
+          height: '500px',
+          width: '500px',
+          backgroundColor: openSCADDeepOceanThemeBackground,
+        }}
+      >
         {state.isLoading && (
           <div className="inset-0 absolute flex items-center justify-center">
             <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
@@ -158,9 +181,10 @@ const IdeViewer = () => {
             />
             <ambientLight />
             <pointLight position={[15, 5, 10]} />
-            <Box position={[0, 49.5, 0]} size={[1, 100, 1]} color="cyan" />
-            <Box position={[0, 0, -50.5]} size={[1, 1, 100]} color="orange" />
-            <Box position={[50.5, 0, 0]} size={[100, 1, 1]} color="hotpink" />
+            <Sphere position={[0, 0, 0]} color={pink400} />
+            <Box position={[0, 50, 0]} size={[1, 100, 1]} color={indigo900} />
+            <Box position={[0, 0, -50]} size={[1, 1, 100]} color={indigo300} />
+            <Box position={[50, 0, 0]} size={[100, 1, 1]} color={pink400} />
           </Canvas>
         </div>
       </div>
diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js
index 90c4464..15723f1 100644
--- a/web/src/helpers/hooks/useIdeState.js
+++ b/web/src/helpers/hooks/useIdeState.js
@@ -1,17 +1,26 @@
 import { useReducer } from 'react'
 import { cadPackages } from 'src/helpers/cadPackages'
 
+const donutInitCode = `
+color(c="DarkGoldenrod")rotate_extrude()translate([20,0])circle(d=30);
+donut();
+module donut() {
+    for(i=[1:360]){
+        rotate(i*13.751)stick(20,i*1.351);
+    }
+}
+module stick(basewid, angl){
+    translate([basewid,0,0])rotate([angl,angl,angl*2])color(c="hotpink")hull(){
+        sphere(7);
+        translate([0,0,10])sphere(9);
+    }
+}`
+
 export const useIdeState = () => {
   const initialState = {
     ideType: 'openScad',
     consoleMessages: [{ type: 'message', message: 'Initialising OpenSCAD' }],
-    code: `difference(){
-  union(){
-    cube(60);
-    sphere(25);
-  }
-  translate([30,30,30])cylinder(r=25,h=100);
-}`,
+    code: donutInitCode,
     objectData: {
       type: 'stl',
       data: 'some binary',

From 44c8192d8146673646984fd75d3a478ae0d06ab0 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sun, 14 Mar 2021 09:38:22 +1100
Subject: [PATCH 2/3] Add ctrl|meta + s for generating new preview

---
 web/src/components/IdeEditor/IdeEditor.js     | 27 +++++++++++++++----
 .../components/IdeToolbarNew/IdeToolbarNew.js |  8 +++++-
 web/src/components/IdeViewer/IdeViewer.js     | 10 +++----
 web/src/helpers/hooks/useIdeState.js          |  7 +++++
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/web/src/components/IdeEditor/IdeEditor.js b/web/src/components/IdeEditor/IdeEditor.js
index 914562a..cd56f34 100644
--- a/web/src/components/IdeEditor/IdeEditor.js
+++ b/web/src/components/IdeEditor/IdeEditor.js
@@ -8,13 +8,30 @@ const IdeEditor = () => {
   function handleCodeChange(value, _event) {
     dispatch({ type: 'updateCode', payload: value })
   }
+  function handleSaveHotkey(event) {
+    //ctrl|meta + s is very intuitive for most devs
+    const { key, ctrlKey, metaKey } = event
+    if (key === 's' && (ctrlKey || metaKey)) {
+      event.preventDefault()
+      dispatch({
+        type: 'render',
+        payload: {
+          code: state.code,
+          camera: state.settings.camera,
+        },
+      })
+    }
+  }
 
   return (
-    <Editor
-      defaultValue={state.code}
-      defaultLanguage="javascript"
-      onChange={handleCodeChange}
-    />
+    <div className="h-full" onKeyDown={handleSaveHotkey}>
+      <Editor
+        defaultValue={state.code}
+        // TODO #247 cpp seems better than js for the time being
+        defaultLanguage="cpp"
+        onChange={handleCodeChange}
+      />
+    </div>
   )
 }
 
diff --git a/web/src/components/IdeToolbarNew/IdeToolbarNew.js b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
index fa0f7d6..9b5ba42 100644
--- a/web/src/components/IdeToolbarNew/IdeToolbarNew.js
+++ b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
@@ -10,7 +10,13 @@ const IdeToolbarNew = () => {
     dispatch({ type: 'setIdeType', payload: { message: ide } })
   }
   function handleRender() {
-    dispatch({ type: 'render', payload: { code: state.code } })
+    dispatch({
+      type: 'render',
+      payload: {
+        code: state.code,
+        camera: state.settings.camera,
+      },
+    })
   }
 
   return (
diff --git a/web/src/components/IdeViewer/IdeViewer.js b/web/src/components/IdeViewer/IdeViewer.js
index 93a6000..d8a27e5 100644
--- a/web/src/components/IdeViewer/IdeViewer.js
+++ b/web/src/components/IdeViewer/IdeViewer.js
@@ -146,11 +146,6 @@ const IdeViewer = () => {
           backgroundColor: openSCADDeepOceanThemeBackground,
         }}
       >
-        {state.isLoading && (
-          <div className="inset-0 absolute flex items-center justify-center">
-            <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-          </div>
-        )}
         {image && (
           <div
             className={`absolute inset-0 transition-opacity duration-500 ${
@@ -160,6 +155,11 @@ const IdeViewer = () => {
             <img src={image} className="" />
           </div>
         )}
+        {state.isLoading && (
+          <div className="inset-0 absolute flex items-center justify-center">
+            <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+          </div>
+        )}
         <div
           className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
             isDragging ? 'opacity-100' : 'hover:opacity-50'
diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js
index 15723f1..e786987 100644
--- a/web/src/helpers/hooks/useIdeState.js
+++ b/web/src/helpers/hooks/useIdeState.js
@@ -21,6 +21,7 @@ export const useIdeState = () => {
     ideType: 'openScad',
     consoleMessages: [{ type: 'message', message: 'Initialising OpenSCAD' }],
     code: donutInitCode,
+    settings: {},
     objectData: {
       type: 'stl',
       data: 'some binary',
@@ -76,6 +77,11 @@ export const useIdeState = () => {
           ...state,
           isLoading: true,
         }
+      case 'setSettings':
+        return {
+          ...state,
+          settings: payload,
+        }
       default:
         return state
     }
@@ -103,6 +109,7 @@ export const useIdeState = () => {
                 })
               }
             })
+          dispatch({ type: 'setSettings', payload: { camera: payload.camera } })
           dispatch({ type: 'setLoading' })
           break
 

From a2454a3f80a68cc11007796b2eecaec7a4a4774a Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sun, 14 Mar 2021 09:49:58 +1100
Subject: [PATCH 3/3] Remove openscad specific state from ideState

---
 web/src/components/IdeEditor/IdeEditor.js         | 8 +-------
 web/src/components/IdeToolbarNew/IdeToolbarNew.js | 8 +-------
 web/src/helpers/cadPackages/openScadController.js | 7 ++++++-
 web/src/helpers/hooks/useIdeState.js              | 7 -------
 4 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/web/src/components/IdeEditor/IdeEditor.js b/web/src/components/IdeEditor/IdeEditor.js
index cd56f34..eda29b4 100644
--- a/web/src/components/IdeEditor/IdeEditor.js
+++ b/web/src/components/IdeEditor/IdeEditor.js
@@ -13,13 +13,7 @@ const IdeEditor = () => {
     const { key, ctrlKey, metaKey } = event
     if (key === 's' && (ctrlKey || metaKey)) {
       event.preventDefault()
-      dispatch({
-        type: 'render',
-        payload: {
-          code: state.code,
-          camera: state.settings.camera,
-        },
-      })
+      dispatch({ type: 'render', payload: { code: state.code } })
     }
   }
 
diff --git a/web/src/components/IdeToolbarNew/IdeToolbarNew.js b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
index 9b5ba42..fa0f7d6 100644
--- a/web/src/components/IdeToolbarNew/IdeToolbarNew.js
+++ b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
@@ -10,13 +10,7 @@ const IdeToolbarNew = () => {
     dispatch({ type: 'setIdeType', payload: { message: ide } })
   }
   function handleRender() {
-    dispatch({
-      type: 'render',
-      payload: {
-        code: state.code,
-        camera: state.settings.camera,
-      },
-    })
+    dispatch({ type: 'render', payload: { code: state.code } })
   }
 
   return (
diff --git a/web/src/helpers/cadPackages/openScadController.js b/web/src/helpers/cadPackages/openScadController.js
index d363cf0..f808c81 100644
--- a/web/src/helpers/cadPackages/openScadController.js
+++ b/web/src/helpers/cadPackages/openScadController.js
@@ -2,6 +2,8 @@ let openScadBaseURL =
   process.env.OPENSCAD_BASE_URL ||
   'https://x2wvhihk56.execute-api.us-east-1.amazonaws.com/dev'
 
+let lastCameraSettings
+
 export const render = async ({ code, settings }) => {
   const body = JSON.stringify({
     settings: {
@@ -9,10 +11,13 @@ export const render = async ({ code, settings }) => {
         x: 500,
         y: 500,
       },
-      camera: settings.camera,
+      camera: settings.camera || lastCameraSettings,
     },
     file: code,
   })
+  if (settings.camera) {
+    lastCameraSettings = settings.camera
+  }
   try {
     const response = await fetch(openScadBaseURL + '/render', {
       method: 'POST',
diff --git a/web/src/helpers/hooks/useIdeState.js b/web/src/helpers/hooks/useIdeState.js
index e786987..15723f1 100644
--- a/web/src/helpers/hooks/useIdeState.js
+++ b/web/src/helpers/hooks/useIdeState.js
@@ -21,7 +21,6 @@ export const useIdeState = () => {
     ideType: 'openScad',
     consoleMessages: [{ type: 'message', message: 'Initialising OpenSCAD' }],
     code: donutInitCode,
-    settings: {},
     objectData: {
       type: 'stl',
       data: 'some binary',
@@ -77,11 +76,6 @@ export const useIdeState = () => {
           ...state,
           isLoading: true,
         }
-      case 'setSettings':
-        return {
-          ...state,
-          settings: payload,
-        }
       default:
         return state
     }
@@ -109,7 +103,6 @@ export const useIdeState = () => {
                 })
               }
             })
-          dispatch({ type: 'setSettings', payload: { camera: payload.camera } })
           dispatch({ type: 'setLoading' })
           break