Use high quality render for CadQuery download

README.md

@@ -37,6 +37,8 @@ yarn rw prisma migrate dev
 yarn rw prisma db seed
 ```
 
+p.s. `yarn rw prisma studio` spins up an app to inspect the db
+
 ### Fire up dev
 ```terminal
 yarn rw dev

app/.env.defaults

@@ -22,7 +22,7 @@ CLOUDINARY_API_KEY=476712943135152
 # EMAIL_PASSWORD=abc123
 
 
-CAD_LAMBDA_BASE_URL="http://localhost:8080"
+# CAD_LAMBDA_BASE_URL="http://localhost:8080"
 
 # sentry
 GITHUB_ASSIST_APP_ID=23342

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -10,7 +10,9 @@ const EditorMenu = () => {
   const { state, thunkDispatch } = useIdeContext()
   const handleStlDownload = makeStlDownloadHandler({
     type: state.objectData?.type,
+    ideType: state.ideType,
     geometry: state.objectData?.data,
+    quality: state.objectData?.quality,
     fileName: PullTitleFromFirstLine(state.code || ''),
     thunkDispatch,
   })

app/web/src/components/EditorMenu/helpers.ts

@@ -2,7 +2,7 @@ import { flow, identity } from 'lodash/fp'
 import { fileSave } from 'browser-fs-access'
 import { MeshBasicMaterial, Mesh, Scene } from 'three'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter'
-import { requestRender } from 'src/helpers/hooks/useIdeState'
+import { requestRender, State } from 'src/helpers/hooks/useIdeState'
 
 export const PullTitleFromFirstLine = (code = '') => {
   const firstLine = code.split('\n').filter(identity)[0] || ''
@@ -16,8 +16,24 @@ export const PullTitleFromFirstLine = (code = '') => {
   )
 }
 
+interface makeStlDownloadHandlerArgs {
+  geometry: any
+  fileName: string
+  type: State['objectData']['type']
+  ideType: State['ideType']
+  thunkDispatch: (a: any) => any
+  quality: State['objectData']['quality']
+}
+
 export const makeStlDownloadHandler =
-  ({ geometry, fileName, type, thunkDispatch }) =>
+  ({
+    geometry,
+    fileName,
+    type,
+    thunkDispatch,
+    quality,
+    ideType,
+  }: makeStlDownloadHandlerArgs) =>
   () => {
     const makeStlBlobFromGeo = flow(
       (geo) => new Mesh(geo, new MeshBasicMaterial()),
@@ -36,12 +52,15 @@ export const makeStlDownloadHandler =
       })
     }
     if (geometry) {
-      if (type === 'geometry') {
+      if (
+        type === 'geometry' &&
+        (quality === 'high' || ideType === 'openScad')
+      ) {
         saveFile(geometry)
       } else {
         thunkDispatch((dispatch, getState) => {
           const state = getState()
-          if (state.ideType === 'openScad') {
+          const specialCadProcess = ideType === 'openScad' && 'stl'
           dispatch({ type: 'setLoading' })
           requestRender({
             state,
@@ -49,9 +68,9 @@ export const makeStlDownloadHandler =
             code: state.code,
             viewerSize: state.viewerSize,
             camera: state.camera,
-              specialCadProcess: 'stl',
+            quality: 'high',
+            specialCadProcess,
           }).then((result) => result && saveFile(result.data))
-          }
         })
       }
     }

app/web/src/components/IdeEditor/IdeEditor.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
-import { requestRender } from 'src/helpers/hooks/useIdeState'
+import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../tailwind.config'
 

app/web/src/components/IdeWrapper/useRender.ts

@@ -1,5 +1,4 @@
-import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
-import { requestRender } from 'src/helpers/hooks/useIdeState'
+import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 
 export const useRender = () => {

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

@@ -4,12 +4,16 @@ import {
   createHealthyResponse,
   createUnhealthyResponse,
   timeoutErrorMessage,
+  RenderArgs,
 } from './common'
 
-export const render = async ({ code }) => {
+export const render = async ({
+  code,
+  settings: { quality = 'low' },
+}: RenderArgs) => {
   const body = JSON.stringify({
     settings: {
-      deflection: 0.15,
+      deflection: quality === 'low' ? 0.35 : 0.11,
     },
     file: code,
   })

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

@@ -1,14 +1,24 @@
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+import { State } from 'src/helpers/hooks/useIdeState'
 
 export const lambdaBaseURL =
-  // process.env.CAD_LAMBDA_BASE_URL ||
-  'https://oxt2p7ddgj.execute-api.us-east-1.amazonaws.com/prod'
+  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 interface RenderArgs {
+  code: State['code']
+  settings: {
+    camera: State['camera']
+    viewerSize: State['viewerSize']
+    quality: State['objectData']['quality']
+  }
+}
+
 export function createHealthyResponse({ date, data, consoleMessage, type }) {
   return {
     status: 'healthy',

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

@@ -4,9 +4,10 @@ import {
   createHealthyResponse,
   createUnhealthyResponse,
   timeoutErrorMessage,
+  RenderArgs,
 } from './common'
 
-export const render = async ({ code, settings }) => {
+export const render = async ({ code, settings }: RenderArgs) => {
   const pixelRatio = window.devicePixelRatio || 1
   const size = {
     x: Math.round(settings.viewerSize?.width * pixelRatio),
@@ -67,7 +68,7 @@ export const render = async ({ code, settings }) => {
   }
 }
 
-export const stl = async ({ code, settings }) => {
+export const stl = async ({ code, settings }: RenderArgs) => {
   const body = JSON.stringify({
     settings: {},
     file: code,

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

@@ -43,11 +43,35 @@ show_object(result)
 
 const codeStorageKey = 'Last-editor-code'
 export const makeCodeStoreKey = (ideType) => `${codeStorageKey}-${ideType}`
-let mutableState = null
+let mutableState: State = null
 
-export const useIdeState = () => {
-  const code = ''
-  const initialLayout = {
+interface XYZ {
+  x: number
+  y: number
+  z: number
+}
+
+export interface State {
+  ideType: 'INIT' | 'openScad' | 'cadQuery'
+  consoleMessages: { type: 'message' | 'error'; message: string; time: Date }[]
+  code: string
+  objectData: {
+    type: 'INIT' | 'stl' | 'png' | 'geometry'
+    data: any
+    quality: 'low' | 'high'
+  }
+  layout: any
+  camera: {
+    dist?: number
+    position?: XYZ
+    rotation?: XYZ
+  }
+  viewerSize: { width: number; height: number }
+  isLoading: boolean
+}
+
+const code = ''
+const initialLayout = {
   direction: 'row',
   first: 'Editor',
   second: {
@@ -56,8 +80,9 @@ export const useIdeState = () => {
     second: 'Console',
     splitPercentage: 70,
   },
-  }
-  const initialState = {
+}
+
+export const initialState: State = {
   ideType: 'INIT',
   consoleMessages: [
     { type: 'message', message: 'Initialising', time: new Date() },
@@ -66,13 +91,16 @@ export const useIdeState = () => {
   objectData: {
     type: 'INIT',
     data: null,
+    quality: 'low',
   },
   layout: initialLayout,
   camera: {},
   viewerSize: { width: 0, height: 0 },
   isLoading: false,
-  }
-  const reducer = (state, { type, payload }) => {
+}
+
+export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
+  const reducer = (state: State, { type, payload }): State => {
     switch (type) {
       case 'initIde':
         return {
@@ -89,6 +117,7 @@ export const useIdeState = () => {
         return {
           ...state,
           objectData: {
+            ...state.objectData,
             type: payload.objectData?.type,
             data: payload.objectData?.data,
           },
@@ -142,8 +171,19 @@ export const useIdeState = () => {
 
   const [state, dispatch] = useReducer(reducer, initialState)
   mutableState = state
-  const getState = () => mutableState
-  return [state, withThunk(dispatch, getState)]
+  const getState = (): State => mutableState
+  const thunkDispatch = withThunk(dispatch, getState)
+  return [state, thunkDispatch]
+}
+
+interface RequestRenderArgs {
+  state: State
+  dispatch: any
+  code: State['code']
+  camera: State['camera']
+  viewerSize: State['viewerSize']
+  quality: State['objectData']['quality']
+  specialCadProcess?: string
 }
 
 export const requestRender = ({
@@ -152,8 +192,9 @@ export const requestRender = ({
   code,
   camera,
   viewerSize,
+  quality,
   specialCadProcess = null,
-}) => {
+}: RequestRenderArgs) => {
   if (
     state.ideType !== 'INIT' &&
     (!state.isLoading || state.objectData?.type === 'INIT')
@@ -166,6 +207,7 @@ export const requestRender = ({
       settings: {
         camera,
         viewerSize,
+        quality,
       },
     })
       .then(({ objectData, message, status }) => {

app/web/src/pages/DevIdePage/DevIdePage.tsx

@@ -1,10 +1,18 @@
 import { createContext } from 'react'
 import Seo from 'src/components/Seo/Seo'
-import IdeWrapper from 'src/components/IdeWrapper'
+import IdeWrapper from 'src/components/IdeWrapper/IdeWrapper'
 import { Toaster } from '@redwoodjs/web/toast'
-import { useIdeState } from 'src/helpers/hooks/useIdeState'
+import { useIdeState, State, initialState } from 'src/helpers/hooks/useIdeState'
 
-export const IdeContext = createContext()
+interface IdeContextType {
+  state: State
+  thunkDispatch: (actionOrThunk: any) => any
+}
+
+export const IdeContext = createContext<IdeContextType>({
+  state: initialState,
+  thunkDispatch: () => {},
+})
 const DevIdePage = ({ cadPackage }) => {
   const [state, thunkDispatch] = useIdeState()
   return (