Skip to content

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

Merged
merged 7 commits into from
Jul 7, 2025
Merged

feat: image rotation #383

merged 7 commits into from
Jul 7, 2025

Conversation

pirhoo
Copy link
Member

@pirhoo pirhoo commented Jul 4, 2025

This PR adds control buttons to rotate an image:

Screencast.from.2025-07-04.13-41-16.webm

Notes

  • New level of abstraction for image manipulation by moving functions to a useImage composable
  • Image rotation are persisted through a new documentView store
  • The existing player store should be merged into the documentView store

@pirhoo pirhoo requested a review from a team July 4, 2025 11:46
Copy link
Contributor

@caro3801 caro3801 left a 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"
Copy link
Contributor

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

Copy link
Member Author

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"
Copy link
Contributor

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'
Copy link
Contributor

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(
Copy link
Contributor

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?

Copy link
Member Author

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.

@pirhoo pirhoo requested a review from caro3801 July 4, 2025 16:48
@pirhoo pirhoo merged commit cc63697 into main Jul 7, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants