Skip to content

Commit

Permalink
Optimize saving performances and design papercut
Browse files Browse the repository at this point in the history 
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
  • Loading branch information
@skjnldsv
skjnldsv committed Sep 21, 2022
1 parent aa718de commit 9a94cdd
Showing 1 changed file with 73 additions and 50 deletions.
123 changes: 73 additions & 50 deletions src/components/ImageEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<script>
import { basename, dirname, extname, join } from 'path'
import { emit } from '@nextcloud/event-bus'
import { showError, showSuccess } from '@nextcloud/dialogs'
import axios from '@nextcloud/axios'
import FilerobotImageEditor from 'filerobot-image-editor'
Expand Down Expand Up @@ -143,39 +144,38 @@ export default {
this.$emit('close')
},
async onSave(imageData) {
/**
* User saved the image
*
* @see https://github.com/scaleflex/filerobot-image-editor#onsave
* @param {object} props destructuring object
* @param {string} props.fullName the file name
* @param {HTMLCanvasElement} props.imageCanvas the image canvas
* @param {string} props.mimeType the image mime type
* @param {number} props.quality the image saving quality
*/
async onSave({ fullName, imageCanvas, mimeType, quality }) {
const { origin, pathname } = new URL(this.src)
const putUrl = origin + join(dirname(pathname), imageData.fullName)
logger.debug('Saving image...', { putUrl, src: this.src, fullName: imageData.fullName })
const putUrl = origin + join(dirname(pathname), fullName)
logger.debug('Saving image...', { putUrl, src: this.src, fullName })
try {
const file = this.dataURLtoFile(imageData.imageBase64, imageData.fullName)
const response = await axios.put(putUrl, file)
const blob = await new Promise(resolve => imageCanvas.toBlob(resolve, mimeType, quality))
const response = await axios.put(putUrl, new File([blob], fullName))
logger.info('Edited image saved!', { response })
showSuccess(t('viewer', 'Image saved'))
if (putUrl !== this.src) {
emit('files:file:created', { fileid: parseInt(response?.headers?.['oc-fileid']?.split('oc')[0]) || null })
} else {
emit('files:file:updated', { fileid: this.fileid })
}
} catch (error) {
logger.error('Error saving image', { error })
showError(t('viewer', 'Error saving image'))
}
},
dataURLtoFile(dataurl, filename) {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n) {
u8arr[n - 1] = bstr.charCodeAt(n - 1)
n -= 1
}
return new File([u8arr], filename, { type: mime })
},
/**
* Show warning if unsaved changes
*/
Expand Down Expand Up @@ -240,14 +240,15 @@ export default {
<style lang="scss" scoped>
// Take full screen size ()
.viewer__image-editor {
width: 100%;
height: 100vh;
position: absolute;
z-index: 10100;
top: calc(var(--header-height) * -1);
bottom: calc(var(--header-height) * -1);
left: 0;
position: absolute;
z-index: 10100;
width: 100%;
height: 100vh;
}
</style>
<style lang="scss">
Expand Down Expand Up @@ -279,12 +280,12 @@ export default {
// Fix button ratio and center content
button {
padding: 6px 12px;
min-width: 44px;
min-height: 44px;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 6px 12px;
}
}
Expand All @@ -304,21 +305,21 @@ export default {
// Global buttons
.SfxButton-root {
margin: 0 !important;
min-height: 44px !important;
margin: 0 !important;
border: transparent !important;
&[color='error'] {
background-color: var(--color-error) !important;
color: white !important;
background-color: var(--color-error) !important;
&:hover,
&:focus {
border-color: white !important;
background-color: var(--color-error-hover) !important;
}
}
&[color='primary'] {
background-color: var(--color-primary-element) !important;
color: var(--color-primary-text) !important;
background-color: var(--color-primary-element) !important;
&:hover,
&:focus {
background-color: var(--color-primary-element-hover) !important;
Expand All @@ -332,11 +333,11 @@ export default {
padding-left: 8px !important;
// Center the menu entry icon and fix width
> div {
cursor: pointer;
margin-right: 0;
padding: 14px;
// Minus the parent padding-left
padding: calc(14px - 8px);
cursor: pointer;
}
// Disable jpeg saving (jpg is already here)
Expand All @@ -347,8 +348,8 @@ export default {
// Modal
.SfxModal-Container {
padding: 22px;
min-height: 300px;
padding: 22px;
// Fill height
.SfxModal-root,
Expand All @@ -358,14 +359,15 @@ export default {
color: var(--color-main-text);
}
.SfxModalTitle-Icon {
background: none !important;
margin-bottom: 22px !important;
background: none !important;
// Fit EmptyContent styling
svg {
width: 64px;
height: 64px;
opacity: .4;
// Override all coloured icons
--color-primary: var(--color-main-text);
--color-error: var(--color-main-text);
}
Expand All @@ -392,9 +394,9 @@ export default {
}
.FIE_tab {
padding: 8px;
width: 80px !important;
height: 80px !important;
padding: 8px;
border-radius: var(--border-radius-large) !important;
svg {
width: 16px;
Expand Down Expand Up @@ -425,24 +427,24 @@ export default {
// Matching buttons tools
& > div[class$='-tool-button'],
& > div[class$='-tool'] {
height: 44px;
min-width: 44px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius-pill);
justify-content: center;
min-width: 44px;
height: 44px;
padding: 6px 16px;
border-radius: var(--border-radius-pill);
}
}
// Crop preset select button
.FIE_crop-presets-opener-button {
background-color: transparent !important;
border: none !important;
// override default button width
min-width: 0 !important;
padding: 5px !important;
padding-left: 10px !important;
// override default button width
min-width: 0px !important;
border: none !important;
background-color: transparent !important;
}
// Force icon-only style
Expand Down Expand Up @@ -478,18 +480,37 @@ export default {
// Save button fixes
.FIE_topbar-save-button {
background-color: var(--color-primary-element) !important;
color: var(--color-primary-text) !important;
border: none !important;
background-color: var(--color-primary-element) !important;
&:hover,
&:focus {
background-color: var(--color-primary-element-hover) !important;
}
}
// Save Modal fixes
.FIE_resize-tool-options {
.FIE_resize-width-option,
.FIE_resize-height-option {
flex: 1 1;
min-width: 0;
}
}
// Resize lock
.FIE_resize-ratio-locker {
margin-right: 8px !important;
// Icon is very thin
svg {
width: 20px;
height: 20px;
path {
stroke-width: 1;
stroke: var(--color-main-text);
fill: var(--color-main-text);
}
}
}
// Close editor button fixes
Expand Down Expand Up @@ -517,22 +538,24 @@ export default {
}
.FIE_spinner::before {
z-index: 2;
content: '';
height: 28px;
width: 28px;
margin: -16px 0 0 -16px;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
border-radius: 100%;
-webkit-animation: rotate .8s infinite linear;
animation: rotate .8s infinite linear;
width: 28px;
height: 28px;
margin: -16px 0 0 -16px;
content: '';
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-animation: rotate .8s infinite linear;
animation: rotate .8s infinite linear;
border: 2px solid var(--color-loading-light);
border-top-color: var(--color-loading-dark);
border-radius: 100%;
filter: var(--background-invert-if-dark);
}
</style>

0 comments on commit 9a94cdd

Please sign in to comment.