From 794ff480fd61f55e05229d1c6837bf8f2c76474f Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sat, 27 Feb 2021 13:24:48 +1100 Subject: [PATCH] capture image on initial save similar to #111 --- api/src/services/parts/parts.js | 3 +- .../IdeCascadeStudio/IdeCascadeStudio.js | 35 +++-- web/src/components/IdeToolbar/IdeToolbar.js | 132 +++++++++++------- web/src/helpers/cloudinary.js | 13 +- 4 files changed, 117 insertions(+), 66 deletions(-) diff --git a/api/src/services/parts/parts.js b/api/src/services/parts/parts.js index 67385e2..0dcc19e 100644 --- a/api/src/services/parts/parts.js +++ b/api/src/services/parts/parts.js @@ -51,7 +51,7 @@ export const createPart = async ({ input }) => { } export const forkPart = async ({ input }) => { - // Only difference between create nda clone part is that clone part will generate a unique title + // Only difference between create and fork part is that fork part will generate a unique title // (for the user) if there is a conflict const isUniqueCallback = async (seed) => db.part.findOne({ @@ -83,6 +83,7 @@ export const updatePart = async ({ id, input }) => { where: { id }, }) if (imageToDestroy) { + console.log(`image destroyed, publicId: ${imageToDestroy}, partId: ${id}`) // destroy after the db has been updated destroyImage({ publicId: imageToDestroy }) } diff --git a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js b/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js index 42c75d1..fd0114d 100644 --- a/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js +++ b/web/src/components/IdeCascadeStudio/IdeCascadeStudio.js @@ -3,7 +3,10 @@ import CascadeController from 'src/helpers/cascadeController' import IdeToolbar from 'src/components/IdeToolbar' import { useEffect, useState } from 'react' import { threejsViewport } from 'src/cascade/js/MainPage/CascadeState' -import { uploadToCloudinary } from 'src/helpers/cloudinary' +import { + uploadToCloudinary, + captureAndSaveViewport, +} from 'src/helpers/cloudinary' const defaultExampleCode = `// Welcome to Cascade Studio! Here are some useful functions: // Translate(), Rotate(), Scale(), Union(), Difference(), Intersection() @@ -53,16 +56,22 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => { isChanges={isChanges && !loading} isDraft={isDraft} code={code} - onSave={() => { + onSave={async () => { + const input = { + code, + title: part?.title, + userId: currentUser?.sub, + description: part?.description, + } + const isFork = !canEdit + if (isFork) { + const { publicId } = await captureAndSaveViewport() + input.mainImage = publicId + } saveCode({ - input: { - code, - title: part?.title, - userId: currentUser?.sub, - description: part?.description, - }, + input, id: part.id, - isFork: !canEdit, + isFork, }) }} onExport={(type) => threejsViewport[`saveShape${type}`]()} @@ -71,7 +80,7 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => { partTitle: part?.title, image: part?.user?.image, }} - onCapture={ async () => { + onCapture={async () => { const config = { currImage: part?.mainImage, callback: uploadAndUpdateImage, @@ -79,10 +88,12 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => { updated: false, } // Get the canvas image as a Data URL - config.image = await CascadeController.capture(threejsViewport.environment) + config.image = await CascadeController.capture( + threejsViewport.environment + ) config.imageObjectURL = window.URL.createObjectURL(config.image) - async function uploadAndUpdateImage(){ + async function uploadAndUpdateImage() { // Upload the image to Cloudinary const cloudinaryImgURL = await uploadToCloudinary(config.image) diff --git a/web/src/components/IdeToolbar/IdeToolbar.js b/web/src/components/IdeToolbar/IdeToolbar.js index 337b863..a7a9bb2 100644 --- a/web/src/components/IdeToolbar/IdeToolbar.js +++ b/web/src/components/IdeToolbar/IdeToolbar.js @@ -14,6 +14,7 @@ import { FORK_PART_MUTATION } from 'src/components/IdePartCell' import { QUERY as UsersPartsQuery } from 'src/components/PartsOfUserCell' import useUser from 'src/helpers/hooks/useUser' import useKeyPress from 'src/helpers/hooks/useKeyPress' +import { captureAndSaveViewport } from 'src/helpers/cloudinary' const IdeToolbar = ({ canEdit, @@ -62,16 +63,19 @@ const IdeToolbar = ({ setWhichPopup(null) } - const saveFork = () => - forkPart({ + const saveFork = async () => { + const { publicId } = await captureAndSaveViewport() + return forkPart({ variables: { input: { userId: currentUser.sub, title, code, + mainImage: publicId, }, }, }) + } const handleSave = async () => { if (isDraft && isAuthenticated) { @@ -109,9 +113,9 @@ const IdeToolbar = ({ const handleDownload = (url) => { const aTag = document.createElement('a') document.body.appendChild(aTag) - aTag.href= url + aTag.href = url aTag.style.display = 'none' - aTag.download = `CadHub_${ Date.now() }.jpg` + aTag.download = `CadHub_${Date.now()}.jpg` aTag.click() document.body.removeChild(aTag) } @@ -232,58 +236,82 @@ const IdeToolbar = ({
{/* Capture Screenshot link. Should only appear if part has been saved and is editable. */} - { !isDraft && canEdit &&
- - -
- { !captureState - ? 'Loading...' - :
-
- -
-
- { (captureState.currImage && !captureState.updated) - ? + +
+ {!captureState ? ( + 'Loading...' + ) : ( +
+
+ +
+
+ {captureState.currImage && !captureState.updated ? ( + - :
- Part Image Updated + ) : ( +
+ {' '} + Part Image Updated
- } - + )} + +
-
- } -
- -
} + )} +
+ +
+ )}