Reverted to screenshot confirmation flow, fixed layout bug, updated language to Save

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -72,22 +72,39 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => {
             image: part?.user?.image,
           }}
           onCapture={ async () => {
+            const config = {
+              currImage: part?.mainImage,
+              callback: uploadAndUpdateImage,
+              cloudinaryImgURL: '',
+              updated: false,
+            }
             // Get the canvas image as a Data URL
-            const imgBlob = await CascadeController.capture(threejsViewport.environment)
+            config.image = await CascadeController.capture(threejsViewport.environment)
+            config.imageObjectURL = window.URL.createObjectURL(config.image)
 
-            // Upload the image to Cloudinary
-            const cloudinaryImg = await uploadToCloudinary(imgBlob)
+            async function uploadAndUpdateImage(){
+              // Upload the image to Cloudinary
+              const cloudinaryImgURL = await uploadToCloudinary(config.image)
 
-            // Save the screenshot as the mainImage
-            saveCode({
-              input: {
-                mainImage: cloudinaryImg.public_id,
-              },
-              id: part?.id,
-              isFork: !canEdit,
-            })
+              // Save the screenshot as the mainImage
+              saveCode({
+                input: {
+                  mainImage: cloudinaryImgURL.public_id,
+                },
+                id: part?.id,
+                isFork: !canEdit,
+              })
 
-            return { imgBlob, cloudinaryImg }
+              return cloudinaryImgURL
+            }
+
+            // if there isn't a screenshot saved yet, just go ahead and save right away
+            if (!part || !part.mainImage) {
+              config.cloudinaryImgURL = await uploadAndUpdateImage().public_id
+              config.updated = true
+            }
+
+            return config
           }}
         />
       </div>

web/src/components/IdePartCell/IdePartCell.js

@@ -50,7 +50,7 @@ export const Success = ({ part, refetch }) => {
   const { user } = useUser()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: () => {
-      addMessage('Part updated.', { classes: 'rw-flash-success' })
+      addMessage('Part updated.', { classes: 'rw-flash-success fixed w-screen z-10' })
     },
   })
   const [forkPart] = useMutation(FORK_PART_MUTATION, {

web/src/components/IdeToolbar/IdeToolbar.js

@@ -106,10 +106,9 @@ const IdeToolbar = ({
     setIsLoginModalOpen(true)
   }
 
-  const handleDownload = (imgBlob) => {
+  const handleDownload = (url) => {
     const aTag = document.createElement('a')
     document.body.appendChild(aTag)
-    const url = URL.createObjectURL(imgBlob)
     aTag.href= url
     aTag.style.display = 'none'
     aTag.download = `CadHub_${ Date.now() }.jpg`
@@ -241,7 +240,7 @@ const IdeToolbar = ({
             }}
             className="text-indigo-300 flex items-center pr-6"
           >
-            Set Part Image <Svg name="camera" className="pl-2 w-8" />
+            Save Part Image <Svg name="camera" className="pl-2 w-8" />
           </button>
           <Popover
             id={id}
@@ -257,17 +256,26 @@ const IdeToolbar = ({
                 ? 'Loading...'
                 : <div className="grid grid-cols-2">
                   <div className="rounded m-auto" style={{width: 'fit-content', overflow: 'hidden'}}>
-                    <img src={ window.URL.createObjectURL(captureState.imgBlob) } className="w-32" />
+                    <img src={ captureState.imageObjectURL } className="w-32" />
                   </div>
                   <div className="p-2 text-indigo-800">
-                    <div className="flex justify-center mb-4">
-                      <Svg name="checkmark" className="mr-2 w-6 text-indigo-600"/> Part Image Set
-                    </div>
+                    { (captureState.currImage && !captureState.updated)
+                      ? <button className="flex justify-center mb-4"
+                          onClick={ async () => {
+                            const cloudinaryImg = await captureState.callback()
+                            setCaptureState({...captureState, currImage: cloudinaryImg.public_id, updated: true })
+                          }}>
+                          <Svg name="refresh" className="mr-2 w-4 text-indigo-600"/> Update Part Image
+                        </button>
+                      : <div className="flex justify-center mb-4">
+                          <Svg name="checkmark" className="mr-2 w-6 text-indigo-600"/> Part Image Updated
+                        </div>
+                    }
                     <Button
                       iconName="save"
-                      className="shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-100 text-opacity-100 bg-opacity-100"
+                      className="shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-100 text-opacity-100 bg-opacity-80"
                       shouldAnimateHover
-                      onClick={() => handleDownload(captureState.imgBlob)}>
+                      onClick={() => handleDownload(captureState.imageObjectURL)}>
                       Download
                     </Button>
                   </div>

web/src/helpers/cascadeController.js

@@ -24,8 +24,7 @@ class CascadeController {
     onInit()
   }
 
-  capture(environment) {
-    let width = 512, height = 384; // These can be adjusted to the best size for the Part Profile.
+  capture(environment, width = 512, height = 384) {
     environment.camera.aspect = width / height;
     environment.camera.updateProjectionMatrix();
     environment.renderer.setSize(width, height);