Add s3 integration

Doing so has a number of benefits
- Overcome the 10Mb limit of the API gateway the lambdas have to go
through
- By storing the key as the hash of the code we can return previous
generated assets, i.e. caching
- cost, transfering assets into the bucket within the AWS ecosystem
is faster than return, and there fore the lambdas execute for less time
- Sets us up for the future as when generating artifacts for repos when
there is a change to master etc we want to store these assets somewhere
and s3 is an obvious choice
- Solved a weird CORS issue where I couldn't get CORS working with
binaryMediaTypes enabled, don't need binary types when dumping in s3

Resolves #316

app/web/src/components/IdeViewer/IdeViewer.js

@@ -14,19 +14,27 @@ import { requestRender } from 'src/helpers/hooks/useIdeState'
 
 extend({ OrbitControls })
 
-function Asset({ stlData }) {
+function Asset({ url, resetLoading, setLoading }) {
   const [loadedGeometry, setLoadedGeometry] = useState()
   const mesh = useRef()
   const ref = useUpdate((geometry) => {
     geometry.attributes = loadedGeometry.attributes
   })
   useEffect(() => {
-    if (stlData) {
-      const decoded = atob(stlData)
+    if (url) {
       const loader = new STLLoader()
-      setLoadedGeometry(loader.parse(decoded))
+      setLoading()
+      loader.load(
+        url,
+        (geometry) => {
+          setLoadedGeometry(geometry)
+          resetLoading()
+        },
+        null,
+        resetLoading
+      )
     }
-  }, [stlData])
+  }, [url])
   if (!loadedGeometry) return null
   return (
     <mesh ref={mesh} scale={[1, 1, 1]}>
@@ -150,11 +158,11 @@ const IdeViewer = () => {
   const [isDragging, setIsDragging] = useState(false)
   const [image, setImage] = useState()
 
+  const resetLoading = () => thunkDispatch({ type: 'resetLoading' })
+  const setLoading = () => thunkDispatch({ type: 'setLoading' })
+
   useEffect(() => {
-    setImage(
-      state.objectData?.type === 'png' &&
-        'data:image/png;base64,' + state.objectData?.data
-    )
+    setImage(state.objectData?.type === 'png' && state.objectData?.data)
     setIsDragging(false)
   }, [state.objectData?.type, state.objectData?.data])
 
@@ -229,9 +237,9 @@ const IdeViewer = () => {
           )}
           {state.ideType === 'cadQuery' && (
             <Asset
-              stlData={
-                state.objectData?.type === 'stl' && state.objectData?.data
-              }
+              url={state.objectData?.type === 'stl' && state.objectData?.data}
+              resetLoading={resetLoading}
+              setLoading={setLoading}
             />
           )}
         </Canvas>

app/web/src/helpers/cadPackages/cadQueryController.js

@@ -34,11 +34,11 @@ export const render = async ({ code }) => {
       status: 'healthy',
       objectData: {
         type: 'stl',
-        data: data.imageBase64,
+        data: data.url,
       },
       message: {
         type: 'message',
-        message: data.result || 'Successful Render',
+        message: data.consoleMessage || 'Successful Render',
         time: new Date(),
       },
     }

app/web/src/helpers/cadPackages/common.js

@@ -1,3 +1,3 @@
 export const lambdaBaseURL =
   process.env.CAD_LAMBDA_BASE_URL ||
-  'https://wzab9s632b.execute-api.us-east-1.amazonaws.com/prod'
+  'https://2inlbple1b.execute-api.us-east-1.amazonaws.com/prod2'

app/web/src/helpers/cadPackages/openScadController.js

@@ -6,10 +6,25 @@ export const render = async ({ code, settings }) => {
     x: Math.round(settings.viewerSize?.width * pixelRatio),
     y: Math.round(settings.viewerSize?.height * pixelRatio),
   }
+  const round1dec = (number) => Math.round((number + Number.EPSILON) * 10) / 10
   const body = JSON.stringify({
     settings: {
       size,
-      camera: settings.camera,
+      camera: {
+        // rounding to give our caching a chance to sometimes work
+        ...settings.camera,
+        dist: round1dec(settings.camera.dist),
+        position: {
+          x: round1dec(settings.camera.position.x),
+          y: round1dec(settings.camera.position.y),
+          z: round1dec(settings.camera.position.z),
+        },
+        rotation: {
+          x: round1dec(settings.camera.rotation.x),
+          y: round1dec(settings.camera.rotation.y),
+          z: round1dec(settings.camera.rotation.z),
+        },
+      },
     },
     file: code,
   })
@@ -44,11 +59,11 @@ export const render = async ({ code, settings }) => {
       status: 'healthy',
       objectData: {
         type: 'png',
-        data: data.imageBase64,
+        data: data.url,
       },
       message: {
         type: 'message',
-        message: data.result,
+        message: data.consoleMessage,
         time: new Date(),
       },
     }

app/web/src/helpers/hooks/useIdeState.js

@@ -33,8 +33,6 @@ result = (cq.Workplane().circle(diam).extrude(20.0)
           .faces("<Z").workplane(invert=True).circle(0.8).cutBlind(12.0)
           .edges("%CIRCLE").chamfer(0.15))
 
-# exporters.export(coupler, "/home/jwright/Downloads/coupler.stl", exporters.ExportTypes.STL)
-
 show_object(result)
 `,
 }