-
Notifications
You must be signed in to change notification settings - Fork 16
feat: image rotation #383
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: image rotation #383
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Only i18n key are missing, else it's very useful and well implemented feature, thanks
<div class="image-viewer__wrapper__controls justify-content-center d-flex gap-1 p-1"> | ||
<button-row-action | ||
class="image-viewer__wrapper__controls__button" | ||
label="Rotate 90° to the left" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i18n: It will need to be translated, it should be replaced with i18n key interpolation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yes, I forgot about those, thank you!
/> | ||
<button-row-action | ||
class="image-viewer__wrapper__controls__button" | ||
label="Rotate 90° to the right" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i18n: same as above
img.onload = () => resolve(img) | ||
img.onerror = () => reject(new Error('Unable to fetch the thumbnail')) | ||
// This is necessary to avoid CORS issues | ||
img.crossOrigin = 'Anonymous' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good to know, thanks for the comment
import { set } from 'lodash' | ||
import { defineStore } from 'pinia' | ||
|
||
export const useDocumentViewStore = defineStore( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
question: could it become a performance issue at some point to store this kind of map?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think so, except if the user rotate million of images, which is very unlikely. Also most web browsers limits the local storage 5 MB.
This PR adds control buttons to rotate an image:
Screencast.from.2025-07-04.13-41-16.webm
Notes
useImage
composabledocumentView
storeplayer
store should be merged into thedocumentView
store