Add stl download for OpenSCAD and CadQuery IDEs

Resolves #330.

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

@@ -1,4 +1,9 @@
-import { lambdaBaseURL } from './common'
+import {
+  lambdaBaseURL,
+  stlToGeometry,
+  createHealthyResponse,
+  createUnhealthyResponse,
+} from './common'
 
 export const render = async ({ code }) => {
   const body = JSON.stringify({
@@ -14,47 +19,26 @@ export const render = async ({ code }) => {
       body,
     })
     if (response.status === 400) {
-      // TODO add proper error messages for CadQuery
       const { error } = await response.json()
-      const cleanedErrorMessage = error.replace(
-        /["|']\/tmp\/.+\/main.scad["|']/g,
-        "'main.scad'"
-      )
       return {
         status: 'error',
         message: {
           type: 'error',
-          message: cleanedErrorMessage,
+          message: error,
           time: new Date(),
         },
       }
     }
     const data = await response.json()
-    return {
-      status: 'healthy',
-      objectData: {
-        type: 'stl',
-        data: data.url,
-      },
-      message: {
-        type: 'message',
-        message: data.consoleMessage || 'Successful Render',
-        time: new Date(),
-      },
-    }
+    const geometry = await stlToGeometry(data.url)
+    return createHealthyResponse({
+      type: 'geometry',
+      data: geometry,
+      consoleMessage: data.consoleMessage,
+      date: new Date(),
+    })
   } catch (e) {
-    // TODO handle errors better
-    // I think we should display something overlayed on the viewer window something like "network issue try again"
-    // and in future I think we need timeouts differently as they maybe from a user trying to render something too complex
-    // or something with minkowski in it :/ either way something like "render timed out, try again or here are tips to reduce part complexity" with a link talking about $fn and minkowski etc
-    return {
-      status: 'error',
-      message: {
-        type: 'error',
-        message: 'network issue',
-        time: new Date(),
-      },
-    }
+    return createUnhealthyResponse(new Date())
   }
 }
 

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

@@ -1,3 +1,40 @@
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+
 export const lambdaBaseURL =
   process.env.CAD_LAMBDA_BASE_URL ||
   'https://2inlbple1b.execute-api.us-east-1.amazonaws.com/prod2'
+
+export const stlToGeometry = (url) =>
+  new Promise((resolve, reject) => {
+    new STLLoader().load(url, resolve, null, reject)
+  })
+
+export function createHealthyResponse({ date, data, consoleMessage, type }) {
+  return {
+    status: 'healthy',
+    objectData: {
+      type,
+      data: data,
+    },
+    message: {
+      type: 'message',
+      message: consoleMessage,
+      time: date,
+    },
+  }
+}
+
+export function createUnhealthyResponse(date, message = 'network issue') {
+  // TODO handle errors better
+  // I think we should display something overlayed on the viewer window something like "network issue try again"
+  // and in future I think we need timeouts differently as they maybe from a user trying to render something too complex
+  // or something with minkowski in it :/ either way something like "render timed out, try again or here are tips to reduce part complexity" with a link talking about $fn and minkowski etc
+  return {
+    status: 'error',
+    message: {
+      type: 'error',
+      message,
+      time: date,
+    },
+  }
+}

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

@@ -1,4 +1,9 @@
-import { lambdaBaseURL } from './common'
+import {
+  lambdaBaseURL,
+  stlToGeometry,
+  createHealthyResponse,
+  createUnhealthyResponse,
+} from './common'
 
 export const render = async ({ code, settings }) => {
   const pixelRatio = window.devicePixelRatio || 1
@@ -41,51 +46,61 @@ export const render = async ({ code, settings }) => {
     })
     if (response.status === 400) {
       const { error } = await response.json()
-      const cleanedErrorMessage = error.replace(
-        /["|']\/tmp\/.+\/main.scad["|']/g,
-        "'main.scad'"
-      )
-      return {
-        status: 'error',
-        message: {
-          type: 'error',
-          message: cleanedErrorMessage,
-          time: new Date(),
-        },
-      }
+      const cleanedErrorMessage = cleanError(error)
+      return createUnhealthyResponse(new Date(), cleanedErrorMessage)
     }
     const data = await response.json()
-    return {
-      status: 'healthy',
-      objectData: {
-        type: 'png',
-        data: data.url,
-      },
-      message: {
-        type: 'message',
-        message: data.consoleMessage,
-        time: new Date(),
-      },
-    }
+    const type = data.type !== 'stl' ? 'png' : 'geometry'
+    const newData = data.type !== 'stl' ? data.url : stlToGeometry(data.url)
+    return createHealthyResponse({
+      type,
+      data: await newData,
+      consoleMessage: data.consoleMessage,
+      date: new Date(),
+    })
   } catch (e) {
-    // TODO handle errors better
-    // I think we should display something overlayed on the viewer window something like "network issue try again"
-    // and in future I think we need timeouts differently as they maybe from a user trying to render something too complex
-    // or something with minkowski in it :/ either way something like "render timed out, try again or here are tips to reduce part complexity" with a link talking about $fn and minkowski etc
-    return {
-      status: 'error',
-      message: {
-        type: 'error',
-        message: 'network issue',
-        time: new Date(),
+    return createUnhealthyResponse(new Date())
+  }
+}
+
+export const stl = async ({ code, settings }) => {
+  const body = JSON.stringify({
+    settings: {},
+    file: code,
+  })
+  try {
+    const response = await fetch(lambdaBaseURL + '/openscad/stl', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
+      body,
+    })
+    if (response.status === 400) {
+      const { error } = await response.json()
+      const cleanedErrorMessage = cleanError(error)
+      return createUnhealthyResponse(new Date(), cleanedErrorMessage)
     }
+    const data = await response.json()
+    const geometry = await stlToGeometry(data.url)
+    return createHealthyResponse({
+      type: 'geometry',
+      data: geometry,
+      consoleMessage: data.consoleMessage,
+      date: new Date(),
+    })
+  } catch (e) {
+    return createUnhealthyResponse(new Date())
   }
 }
 
 const openScad = {
   render,
-  // more functions to come
+  stl,
 }
 
 export default openScad
+
+function cleanError(error) {
+  return error.replace(/["|']\/tmp\/.+\/main.scad["|']/g, "'main.scad'")
+}

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

@@ -9,7 +9,10 @@ function withThunk(dispatch, getState) {
 }
 
 const initCodeMap = {
-  openScad: `
+  openScad: `// involute donut
+
+// ^ first comment is used for download title (i.e "involute-donut.stl")
+
 color(c="DarkGoldenrod")rotate_extrude()translate([20,0])circle(d=30);
 donut();
 module donut() {
@@ -23,7 +26,11 @@ module stick(basewid, angl){
         translate([0,0,10])sphere(9);
     }
 }`,
-  cadQuery: `import cadquery as cq
+  cadQuery: `# demo shaft coupler
+
+# ^ first comment is used for download title (i.e. "demo-shaft-coupler.stl")
+
+import cadquery as cq
 from cadquery import exporters
 
 diam = 5.0
@@ -49,7 +56,7 @@ export const useIdeState = () => {
     ],
     code,
     objectData: {
-      type: 'stl',
+      type: 'INIT',
       data: null,
     },
     layout: {
@@ -138,17 +145,22 @@ export const requestRender = ({
   code,
   camera,
   viewerSize,
+  specialCadProcess = null,
 }) => {
-  state.ideType !== 'INIT' &&
-    !state.isLoading &&
-    cadPackages[state.ideType]
-      .render({
-        code,
-        settings: {
-          camera,
-          viewerSize,
-        },
-      })
+  if (
+    state.ideType !== 'INIT' &&
+    (!state.isLoading || state.objectData?.type === 'INIT')
+  ) {
+    const renderFn = specialCadProcess
+      ? cadPackages[state.ideType][specialCadProcess]
+      : cadPackages[state.ideType].render
+    return renderFn({
+      code,
+      settings: {
+        camera,
+        viewerSize,
+      },
+    })
       .then(({ objectData, message, status }) => {
         if (status === 'error') {
           dispatch({
@@ -160,7 +172,9 @@ export const requestRender = ({
             type: 'healthyRender',
             payload: { objectData, message, lastRunCode: code },
           })
+          return objectData
         }
       })
       .catch(() => dispatch({ type: 'resetLoading' })) // TODO should probably display something to the user here
+  }
 }