diff --git a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js b/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js index 63ffdcc..42c75d1 100644 --- a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js +++ b/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 }} /> diff --git a/web/src/components/IdePartCell/IdePartCell.js b/web/src/components/IdePartCell/IdePartCell.js index 581a032..7a2975d 100644 --- a/web/src/components/IdePartCell/IdePartCell.js +++ b/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, { diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js index deb9313..337b863 100644 --- a/web/src/components/IdeToolbar/IdeToolbar.js +++ b/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 + Save Part Image
- +
-
- Part Image Set -
+ { (captureState.currImage && !captureState.updated) + ? + :
+ Part Image Updated +
+ }
diff --git a/web/src/helpers/cascadeController.js b/web/src/helpers/cascadeController.js index e5ba11a..669c374 100644 --- a/web/src/helpers/cascadeController.js +++ b/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);