Added ability to update part image using captured screenshot

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -76,28 +76,27 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => {
             // Get the canvas image as a Data URL
             const imgBlob = await CascadeController.capture(threejsViewport.environment)
 
-            // // Upload the image to Cloudinary
-            // const cloudinaryImg = await uploadToCloudinary(imgBlob)
+            async function uploadAndUpdateImage(){
+              // Upload the image to Cloudinary
+              const cloudinaryImg = await uploadToCloudinary(imgBlob)
 
-            // // TODO: Save the screenshot as the mainImage if none has been set
-            // // If it has been set, pass along the Blob without uploading
-            // if (!part.mainImage) {
-            //   saveCode({
-            //     input: {
-            //       code,
-            //       title: part?.title,
-            //       userId: currentUser?.sub,
-            //       description: part?.description,
-            //       mainImage: cloudinaryImg.public_id,
-            //     },
-            //     id: part.id,
-            //     isFork: !canEdit,
-            //   })
-            // } else {
-            //   console.log('not saving, passing back into IDE', cloudinaryImg)
-            // }
+              // Save the screenshot as the mainImage
+              saveCode({
+                input: {
+                  code,
+                  title: part?.title,
+                  userId: currentUser?.sub,
+                  description: part?.description,
+                  mainImage: cloudinaryImg.public_id,
+                },
+                id: part.id,
+                isFork: !canEdit,
+              })
 
-            return imgBlob
+              return cloudinaryImg
+            }
+
+            return { image: imgBlob, mainImage: part.mainImage, callback: uploadAndUpdateImage}
           }}
         />
       </div>

web/src/components/IdeToolbar/IdeToolbar.js

@@ -106,11 +106,6 @@ const IdeToolbar = ({
     setIsLoginModalOpen(true)
   }
 
-  const captureScreenshot = async () => {
-    setCaptureState(await onCapture())
-    // console.log({ onCapture: onCapture() })
-  }
-
   const handleDownload = (imgBlob) => {
     const aTag = document.createElement('a')
     document.body.appendChild(aTag)
@@ -260,16 +255,27 @@ const IdeToolbar = ({
               { !captureState
                 ? 'Loading...'
                 : <div className="grid grid-cols-2">
-                  <img src={ window.URL.createObjectURL(captureState) } className="w-32" />
-                  <div className="p-2">
-                    <div className="flex justify-center mb-4">
-                      <Svg name="checkmark" className="mr-2 w-6"/> Part Image Set
-                    </div>
+                  <div className="rounded m-auto" style={{width: 'fit-content', overflow: 'hidden'}}>
+                    <img src={ window.URL.createObjectURL(captureState.image) } className="w-32" />
+                  </div>
+                  <div className="p-2 text-indigo-800">
+                    { (captureState.mainImage && !captureState.updated)
+                      ? <button className="flex m-auto mb-4"
+                          onClick={ async () => {
+                            const cloudinaryImg = await captureState.callback()
+                            setCaptureState({...captureState, mainImage: cloudinaryImg.public_id, updated: true })
+                          }}>
+                          <Svg name="refresh" className="mr-2 w-4 text-indigo-600"/> Set Part Image
+                        </button>
+                      : <div className="flex m-auto mb-4">
+                          <Svg name="checkmark" className="mr-2 w-6 text-indigo-600"/> Part Image Set
+                        </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 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-100"
                       shouldAnimateHover
-                      onClick={() => handleDownload(captureState)}>
+                      onClick={() => handleDownload(captureState.image)}>
                       Download
                     </Button>
                   </div>

web/src/components/Svg/Svg.js

@@ -311,6 +311,18 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    refresh: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 14 17"
+        fill="none">
+        <path
+          d="M13 9.9271C13 13.189 10.3137 15.8333 7 15.8333C3.68629 15.8333 1 13.189 1 9.9271C1 6.66517 3.68629 4.02085 7 4.02085C9 4.02085 10.986 4.99917 12 5.77084M12 5.77084L8.33333 7.08334M12 5.77084L10.6667 1.83334"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"/>
+      </svg>
+    ),
     save: (
       <svg
         xmlns="http://www.w3.org/2000/svg"