Add ctrl|meta + s for generating new preview

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>
   )
 }
 

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 (

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'

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