@uppy/image-editor: respect cropperOptions.initialAspectRatio
#4805
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Murderlon
reviewed
Nov 27, 2023
| @@ -140,7 +140,11 @@ export default class Editor extends Component { | |||
| className="uppy-u-reset uppy-c-btn" | |||
| onClick={() => { | |||
| this.cropper.reset() | |||
| this.cropper.setAspectRatio(0) | |||
| if (opts.cropperOptions.initialAspectRatio) { | |||
There was a problem hiding this comment.
Instead of doing this conditionally here, probably better to set a default in the constructor and then we can just pass the option.
uppy/packages/@uppy/image-editor/src/ImageEditor.jsx
Lines 19 to 27 in a0657db
There was a problem hiding this comment.
You are right! I also think that setting default values in the constructor and then passing options to override these default values may be a clearer and more maintainable approach.
There was a problem hiding this comment.
Agreed, let's do
const defaultCropperOptions = {
//...current stuff,
initialAspectRatio: 0
}and then do
this.cropper.reset()
this.cropper.setAspectRatio(opts.cropperOptions.initialAspectRatio)Agreed with the change otherwise!
There was a problem hiding this comment.
Thank you for accepting my suggestion!
Murderlon
changed the title
cropperOptions.initialAspectRatio
lakesare
suggested changes
Nov 27, 2023
| @@ -140,7 +140,11 @@ export default class Editor extends Component { | |||
| className="uppy-u-reset uppy-c-btn" | |||
| onClick={() => { | |||
| this.cropper.reset() | |||
| this.cropper.setAspectRatio(0) | |||
| if (opts.cropperOptions.initialAspectRatio) { | |||
There was a problem hiding this comment.
Agreed, let's do
const defaultCropperOptions = {
//...current stuff,
initialAspectRatio: 0
}and then do
this.cropper.reset()
this.cropper.setAspectRatio(opts.cropperOptions.initialAspectRatio)Agreed with the change otherwise!
lakesare
reviewed
Nov 27, 2023
| } else { | ||
| this.cropper.setAspectRatio(0); | ||
| } | ||
| this.cropper.setAspectRatio(opts.cropperOptions.initialAspectRatio); |
There was a problem hiding this comment.
Does it go through the linter fine? I think it should compain about ;
There was a problem hiding this comment.
I'm sorry, it was my oversight.
There was a problem hiding this comment.
Can I pass the review now?
added 6 commits
November 27, 2023 18:59
Murderlon
approved these changes
Nov 27, 2023
Murderlon
added a commit
that referenced
this pull request
Dec 5, 2023
Merged
github-actions bot
added a commit
that referenced
this pull request
Dec 12, 2023
| Package | Version | Package | Version | | ---------------------- | ------- | ---------------------- | ------- | | @uppy/aws-s3 | 3.6.0 | @uppy/instagram | 3.2.0 | | @uppy/aws-s3-multipart | 3.10.0 | @uppy/onedrive | 3.2.0 | | @uppy/box | 2.2.0 | @uppy/provider-views | 3.8.0 | | @uppy/companion | 4.12.0 | @uppy/store-default | 3.2.0 | | @uppy/companion-client | 3.7.0 | @uppy/tus | 3.5.0 | | @uppy/core | 3.8.0 | @uppy/url | 3.5.0 | | @uppy/dropbox | 3.2.0 | @uppy/utils | 5.7.0 | | @uppy/facebook | 3.2.0 | @uppy/xhr-upload | 3.6.0 | | @uppy/google-drive | 3.4.0 | @uppy/zoom | 2.2.0 | | @uppy/image-editor | 2.4.0 | uppy | 3.21.0 | - @uppy/provider-views: fix uploadRemoteFile undefined (Mikael Finstad / #4814) - @uppy/companion: fix double tus uploads (Mikael Finstad / #4816) - @uppy/companion: fix accelerated endpoints for presigned POST (Mikael Finstad / #4817) - @uppy/companion: fix `authProvider` property inconsistency (Mikael Finstad / #4672) - @uppy/companion: send certain onedrive errors to the user (Mikael Finstad / #4671) - meta: fix typo in `lockfile_check.yml` name (Antoine du Hamel) - @uppy/aws-s3: change Companion URL in tests (Antoine du Hamel) - @uppy/set-state: fix types (Antoine du Hamel) - @uppy/companion: Provider user sessions (Mikael Finstad / #4619) - meta: fix `js2ts` script on Node.js 20+ (Merlijn Vos / #4802) - @uppy/companion-client: avoid unnecessary preflight requests (Antoine du Hamel / #4462) - meta: Migrate to AWS-SDK V3 syntax (Artur Paikin / #4810) - @uppy/utils: fix import in test files (Antoine du Hamel / #4806) - @uppy/core: Fix onBeforeFileAdded with Golden Retriever (Merlijn Vos / #4799) - @uppy/image-editor: respect `cropperOptions.initialAspectRatio` (Lucklj521 / #4805)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem Description:
When using the "reset" to reset the image, we believe that setAspectRatio should be set to the initialAspectRatio of cropperOptions, instead of 0. The rationality of this behavior is questionable.
Use Case:
In the scenario of uploading a profile picture using Uppy's imageEditor, the initial aspect ratio of Uppy is set to 1/1. Within this setting, we only retained the three buttons: "reset", "zoomIn", and "zoomOut". However, after clicking the "revert" button on the image, the aspect ratio becomes ineffective.
Suggested Improvement:
To maintain the stability of the aspect ratio after the "reset" operation, we suggest setting setAspectRatio to the initialAspectRatio of cropperOptions, so as to maintain the aspect ratio in its initial state instead of setting it to 0. This way, the image can maintain its original aspect ratio after the "revert" operation, which aligns better with user expectations.