h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

added initial capture popup UI, added ability to download capture

Browse Source
This commit is contained in:
Frank Noirot
2021-02-25 04:04:35 -05:00
parent 6e6425735f
commit 2ea8d5c2b5
5 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
checkmark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3438 19.6875C15.7803 19.6875 20.1875 15.2803 20.1875 9.84375C20.1875 4.4072 15.7803 0 10.3438 0C4.9072 0 0.5 4.4072 0.5 9.84375C0.5 15.2803 4.9072 19.6875 10.3438 19.6875ZM15.3321 6.5547C15.6384 6.09517 15.5142 5.4743 15.0547 5.16795C14.5952 4.8616 13.9743 4.98577 13.6679 5.4453L9.34457 11.9304L7.20711 9.79289C6.81658 9.40237 6.18342 9.40237 5.79289 9.79289C5.40237 10.1834 5.40237 10.8166 5.79289 11.2071L8.79289 14.2071C9.00474 14.419 9.3004 14.5247 9.59854 14.4951C9.89667 14.4656 10.1659 14.304 10.3321 14.0547L15.3321 6.5547Z" fill="#434190"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

27
web/src/components/IdeCascadeStudio/IdeCascadeStudio.js
View File

@@ -75,14 +75,29 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => {
onCapture={ async () => {
// Get the canvas image as a Data URL
const imgBlob = await CascadeController.capture(threejsViewport.environment)
const imgURL = window.URL.createObjectURL(imgBlob)
// TODO: Upload the image to Cloudinary
// uploadToCloudinary(imgBlob)
// // 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
// onSave(part?.id, { ...input, mainImage: cloudinaryPublicId })
// // 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)
// }
return imgBlob
}}
/>
</div>

37
web/src/components/IdeToolbar/IdeToolbar.js
View File

@@ -31,6 +31,7 @@ const IdeToolbar = ({
const { isAuthenticated, currentUser } = useAuth()
const showForkButton = !(canEdit || isDraft)
const [title, setTitle] = useState('untitled-part')
const [captureState, setCaptureState] = useState(false)
const { user } = useUser()
useKeyPress((e) => {
const rx = /INPUT|SELECT|TEXTAREA/i
@@ -106,7 +107,18 @@ const IdeToolbar = ({
}
const captureScreenshot = async () => {
console.log({ forkPart, onCapture: onCapture() })
setCaptureState(await onCapture())
// console.log({ onCapture: onCapture() })
}
const handleDownload = (imgBlob) => {
const aTag = document.createElement('a')
document.body.appendChild(aTag)
const url = URL.createObjectURL(imgBlob)
aTag.href= url
aTag.style.display = 'none'
aTag.download = `CodeCad_${ Date.now() }.jpg`
aTag.click()
}
const anchorOrigin = {
@@ -227,9 +239,9 @@ const IdeToolbar = ({
{/* Capture Screenshot link. Should only appear if part has been saved and is editable. */}
{ !isDraft && canEdit && <div>
<button
onClick={(event) => {
captureScreenshot()
onClick={async event => {
handleClick({ event, whichPopup: 'capture' })
setCaptureState(await onCapture())
}}
className="text-indigo-300 flex items-center pr-6"
>
@@ -245,7 +257,24 @@ const IdeToolbar = ({
className="material-ui-overrides transform translate-y-4"
>
<div className="text-sm p-2 text-gray-500">
Saving...
{ !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>
<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"
shouldAnimateHover
onClick={() => handleDownload(captureState)}>
Download
</Button>
</div>
</div>
}
</div>
</Popover>
</div> }

11
web/src/components/Svg/Svg.js
View File

@@ -53,6 +53,17 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
stroke-linecap="round"/>
</svg>
),
'checkmark': (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 21 20"
fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.3438 19.6875C15.7803 19.6875 20.1875 15.2803 20.1875 9.84375C20.1875 4.4072 15.7803 0 10.3438 0C4.9072 0 0.5 4.4072 0.5 9.84375C0.5 15.2803 4.9072 19.6875 10.3438 19.6875ZM15.3321 6.5547C15.6384 6.09517 15.5142 5.4743 15.0547 5.16795C14.5952 4.8616 13.9743 4.98577 13.6679 5.4453L9.34457 11.9304L7.20711 9.79289C6.81658 9.40237 6.18342 9.40237 5.79289 9.79289C5.40237 10.1834 5.40237 10.8166 5.79289 11.2071L8.79289 14.2071C9.00474 14.419 9.3004 14.5247 9.59854 14.4951C9.89667 14.4656 10.1659 14.304 10.3321 14.0547L15.3321 6.5547Z"
fill="currentColor"/>
</svg>),
'chevron-down': (
<svg
xmlns="http://www.w3.org/2000/svg"

26
web/src/helpers/cloudinary.js
View File

@@ -5,19 +5,17 @@ const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
export async function uploadToCloudinary(imgBlob) {
// const imageData = new FormData()
// imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
// imageData.append('file', croppedFile)
// let upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
const imageData = new FormData()
imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
imageData.append('file', imgBlob)
let upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
// try {
// const { data } = await upload
// if (data && data.public_id !== '') {
// onImageUpload({ cloudinaryPublicId: data.public_id })
// setCloudinaryId(data.public_id)
// setIsModalOpen(false)
// }
// } catch (e) {
// console.error('ERROR', e)
// }
try {
const { data } = await upload
if (data && data.public_id !== '') {
return data
}
} catch (e) {
console.error('ERROR', e)
}
}