Moved EditorMenu/helpers.ts file to src/helpers. Reused STL download helper on a new button in the project profile page

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

@@ -1,86 +0,0 @@
-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, State } from 'src/helpers/hooks/useIdeState'
-import { toast } from '@redwoodjs/web/toast'
-
-export const PullTitleFromFirstLine = (code = '') => {
-  const firstLine = code.split('\n').filter(identity)[0] || ''
-  if (!(firstLine.startsWith('//') || firstLine.startsWith('#'))) {
-    return 'object.stl'
-  }
-  return (
-    (firstLine.replace(/^(\/\/|#)\s*(.+)/, (_, __, titleWithSpaces) =>
-      titleWithSpaces.replaceAll(/\s/g, '-')
-    ) || 'object') + '.stl'
-  )
-}
-
-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,
-    quality,
-    ideType,
-  }: makeStlDownloadHandlerArgs) =>
-  () => {
-    const makeStlBlobFromMesh = flow(
-      (...meshes) => new Scene().add(...meshes),
-      (scene) => new STLExporter().parse(scene),
-      (stl) =>
-        new Blob([stl], {
-          type: 'text/plain',
-        })
-    )
-    const makeStlBlobFromGeo = flow(
-      (geo) => new Mesh(geo, new MeshBasicMaterial()),
-      (mesh) => makeStlBlobFromMesh(mesh)
-    )
-    const saveFile = (blob) => {
-      fileSave(blob, {
-        fileName,
-        extensions: ['.stl'],
-      })
-    }
-    toast(
-      "CadHub is a work in process and We're still working out kinks with the STL download."
-    )
-    if (geometry) {
-      if (
-        type === 'geometry' &&
-        (quality === 'high' || ideType === 'openscad')
-      ) {
-        saveFile(makeStlBlobFromGeo(geometry))
-      } else if (ideType == 'jscad') {
-        const clonedGeometry = geometry.map((mesh) => mesh.clone())
-        saveFile(makeStlBlobFromMesh(...clonedGeometry))
-      } else {
-        thunkDispatch((dispatch, getState) => {
-          const state = getState()
-          const specialCadProcess =
-            (ideType === 'openscad' || ideType === 'curv') && 'stl'
-          dispatch({ type: 'setLoading' })
-          requestRender({
-            state,
-            dispatch,
-            quality: 'high',
-            specialCadProcess,
-          }).then(
-            (result) => result && saveFile(makeStlBlobFromGeo(result.data))
-          )
-        })
-      }
-    }
-  }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRender } from 'src/components/IdeWrapper/useRender'
-import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
+import { makeStlDownloadHandler, PullTitleFromFirstLine } from 'src/helpers/download_stl'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import { DropdownItem } from './Dropdowns'
 import { useShortcutsModalContext } from './AllShortcutsModal'

app/web/src/components/ProjectCell/ProjectCell.tsx

@@ -2,6 +2,7 @@ import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
+import { makeStlDownloadHandler } from 'src/helpers/download_stl'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import { IdeContext } from 'src/helpers/hooks/useIdeContext'
 import { CREATE_PROJECT_MUTATION } from 'src/components/NavPlusButton/NavPlusButton'
@@ -192,6 +193,15 @@ export const Success = ({ userProject, refetch }) => {
       },
     })
 
+  const onStlDownload = makeStlDownloadHandler({
+      type: state.objectData?.type,
+      ideType: state.ideType,
+      geometry: state.objectData?.data,
+      quality: state.objectData?.quality,
+      fileName: `${userProject.title }.stl`,
+      thunkDispatch,
+    })
+
   return (
     <IdeContext.Provider
       value={{
@@ -213,6 +223,7 @@ export const Success = ({ userProject, refetch }) => {
         onDelete={onDelete}
         onReaction={onReaction}
         onComment={onComment}
+        onStlDownload={onStlDownload}
       />
     </IdeContext.Provider>
   )

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -25,6 +25,7 @@ const ProjectProfile = ({
   onDelete,
   onReaction,
   onComment,
+  onStlDownload,
 }) => {
   const [comment, setComment] = useState('')
   const [isEditing, setIsEditing] = useState(false)
@@ -97,6 +98,17 @@ const ProjectProfile = ({
                     cadPackage={project?.cadPackage}
                     className="px-3 py-2 rounded"
                   />
+                  <Button
+                    className={getActiveClasses(
+                      'mr-auto bg-red-500 ml-5 text-ch-gray-300',
+                      { 'bg-indigo-200': currentUser }
+                    )}
+                    shouldAnimateHover
+                    iconName={'document-download'}
+                    onClick={onStlDownload}
+                  >
+                    Download STL
+                  </Button>
                 </div>
                 {(project?.description || hasPermissionToEdit) && (
                   <KeyValue

app/web/src/components/Svg/Svg.tsx

@@ -139,6 +139,21 @@ const Svg = ({
         />
       </svg>
     ),
+    'document-download': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+        />
+      </svg>
+    ),
     'dots-vertical': (
       <svg
         xmlns="http://www.w3.org/2000/svg"