Initial work to support curv (#578)

* Initial work to support curv

* Correct the initial code file location

* Preview and stl mvp working

* Prepare changes for review and preview build

* Run curv inside of /tmp

When exporting an stl it writes temporary files which is not allowed
when deployed to aws unless it's in temp.

* Lock in specific curv commit for reproducible builds

see: https://discord.com/channels/412182089279209474/886321278821216277/912507472441401385

* Add curv to backend schema

* Frontend changes to accommodate curv deploy

* Use vcount instead of vsize, as it's independant of geometry size,

This is good for CadHub usecase where we don't know anything about the
user's project

* Final tweaks for deploy

virtual screen size does matter,and curv is a little more memory hungry
than the other functions

* Format project

Co-authored-by: lf94 <inbox@leefallat.ca>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

app/web/src/components/CadPackage/CadPackage.tsx

@@ -1,4 +1,4 @@
-export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'INIT'
+export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'curv' | 'INIT'
 
 interface CadPackageConfig {
   label: string
@@ -23,6 +23,11 @@ export const cadPackageConfigs: { [key in CadPackageType]: CadPackageConfig } =
       buttonClasses: 'bg-ch-purple-500',
       dotClasses: 'bg-yellow-300',
     },
+    curv: {
+      label: 'Curv',
+      buttonClasses: 'bg-blue-600',
+      dotClasses: 'bg-green-500',
+    },
     INIT: {
       label: '',
       buttonClasses: '',
@@ -49,7 +54,7 @@ const CadPackage = ({
     <ButtonOrDiv
       onClick={onClick}
       className={
-        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 
+        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30
          ${cadPackageConfig?.buttonClasses} ` + className
       }
     >

app/web/src/components/CaptureButton/CaptureButton.tsx

@@ -25,6 +25,7 @@ const CaptureButtonViewer = ({
   const threeInstance = React.useRef(null)
   const [dataType, dataTypeSetter] = useState(state?.objectData?.type)
   const [artifact, artifactSetter] = useState(state?.objectData?.data)
+  const [ideType] = useState(state?.ideType)
   const [isLoading, isLoadingSetter] = useState(false)
   const [camera, cameraSetter] = useState<State['camera'] | null>(null)
   const getThreeInstance = (_threeInstance) => {
@@ -33,7 +34,7 @@ const CaptureButtonViewer = ({
   }
   const onCameraChange = (camera, isFirstCameraChange) => {
     const renderPromise =
-      state.ideType === 'openscad' &&
+      (state.ideType === 'openscad' || state.ideType === 'curv') &&
       requestRenderStateless({
         state,
         camera,
@@ -70,6 +71,7 @@ const CaptureButtonViewer = ({
       isLoading={isLoading}
       camera={camera}
       isMinimal
+      ideType={ideType}
     />
   )
 }

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

@@ -69,7 +69,8 @@ export const makeStlDownloadHandler =
       } else {
         thunkDispatch((dispatch, getState) => {
           const state = getState()
-          const specialCadProcess = ideType === 'openscad' && 'stl'
+          const specialCadProcess =
+            (ideType === 'openscad' || ideType === 'curv') && 'stl'
           dispatch({ type: 'setLoading' })
           requestRender({
             state,

app/web/src/components/Hero/Hero.tsx

@@ -348,6 +348,10 @@ function ChooseYourCharacter() {
             cadPackage: 'jscad',
             desc: 'A JavaScript Code-CAD library that will feel familiar to web developers, based on the same tech as OpenSCAD.',
           },
+          {
+            cadPackage: 'curv',
+            desc: "Curv is a programming language for creating art using mathematics. It's a 2D and 3D geometric modelling tool.",
+          },
         ].map(
           ({
             cadPackage,

app/web/src/components/IdeEditor/IdeEditor.tsx

@@ -18,6 +18,7 @@ const IdeEditor = ({ Loading }) => {
     cadquery: 'python',
     openscad: 'cpp',
     jscad: 'javascript',
+    curv: 'python',
     INIT: '',
   }
   const monaco = useMonaco()

app/web/src/components/IdeProjectCell/IdeProjectCell.tsx

@@ -35,7 +35,7 @@ export interface Project {
   code: string
   mainImage: string
   createdAt: string
-  cadPackage: 'openscad' | 'cadquery'
+  cadPackage: 'openscad' | 'cadquery' | 'jscad' | 'curv'
   user: {
     id: string
     userName: string

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -10,6 +10,7 @@ const IdeViewer = ({
   const { state, thunkDispatch } = useIdeContext()
   const dataType = state.objectData?.type
   const artifact = state.objectData?.data
+  const ideType = state.ideType
 
   const onInit = (threeInstance) => {
     thunkDispatch({ type: 'setThreeInstance', payload: threeInstance })
@@ -24,7 +25,12 @@ const IdeViewer = ({
     })
     thunkDispatch((dispatch, getState) => {
       const state = getState()
-      if (['png', 'INIT'].includes(state?.objectData?.type)) {
+      if (
+        ['png', 'INIT'].includes(state?.objectData?.type) &&
+        (ideType === 'openscad' ||
+          state?.objectData?.type === 'INIT' ||
+          !state?.objectData?.type)
+      ) {
         dispatch({ type: 'setLoading' })
         requestRender({
           state,
@@ -44,6 +50,7 @@ const IdeViewer = ({
       onCameraChange={onCameraChange}
       isLoading={state.isLoading}
       camera={state?.camera}
+      ideType={ideType}
     />
   )
 }

app/web/src/components/IdeViewer/PureIdeViewer.tsx

@@ -169,6 +169,7 @@ export function PureIdeViewer({
   isMinimal = false,
   scadRatio = 1,
   camera,
+  ideType,
 }: {
   dataType: 'INIT' | ArtifactTypes
   artifact: any
@@ -178,6 +179,7 @@ export function PureIdeViewer({
   isMinimal?: boolean
   scadRatio?: number
   camera?: State['camera']
+  ideType?: State['ideType']
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [image, setImage] = useState()
@@ -216,7 +218,9 @@ export function PureIdeViewer({
       )}
       <div // eslint-disable-line jsx-a11y/no-static-element-interactions
         className={`opacity-0 absolute inset-0 transition-opacity duration-500 ${
-          !(isDragging || dataType !== 'png')
+          ideType === 'curv' && dataType === 'png' // TODO hide axes while curve doesn't have a controllable camera
+            ? 'opacity-0'
+            : !(isDragging || dataType !== 'png')
             ? 'hover:opacity-50'
             : 'opacity-100'
         }`}
@@ -226,7 +230,10 @@ export function PureIdeViewer({
           <Controls
             onDragStart={() => setIsDragging(true)}
             onInit={onInit}
-            onCameraChange={onCameraChange}
+            onCameraChange={(...args) => {
+              onCameraChange(...args)
+              setIsDragging(false)
+            }}
             controlsRef={controlsRef}
             camera={camera}
           />

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -95,6 +95,13 @@ const menuOptions: {
     dotClasses: 'bg-yellow-300',
     ideType: 'jscad',
   },
+  {
+    name: 'Curv',
+    sub: 'alpha ',
+    bgClasses: 'bg-blue-600',
+    dotClasses: 'bg-green-500',
+    ideType: 'curv',
+  },
 ]
 
 const NavPlusButton: React.FC = () => {