fengyuanchen / cropperjs

JavaScript image cropper.
https://fengyuanchen.github.io/cropperjs/
MIT License
13.15k stars 2.42k forks source link

feat(cropper-selection): uses `getAdjustedSizesKeepArea()` for aspectRatio calculation #1164

Closed NamesMT closed 4 months ago

NamesMT commented 7 months ago

Reopen of #1162

Previously we grow the width/height to fit with the new aspect-ratio.

This PR changes the calculation: now we changes both the width and height while keeping the original area, which in theory would fit a better UX, especially when take in account of (#1163 aspect-ratio reactivity)

Without this PR, #1163 would behave as follow: the selection area being grown out of view when input changes, especially for dynamic user inputted usage.

Summary

What kind of change does this PR introduce? (check at least one)

If changing the UI of the default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one) There is a behavior change, is breaking.

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

You have tested in the following browsers: (Providing a detailed version will be better.)

If adding a new feature, the PR's description includes:

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

NamesMT commented 7 months ago

If #1163 is accepted do note that there would be now a code line different in this PR that needs to be resolved.

For the tests, please help me work on it, Currently something is incompatible on my local machine and I get error when running test: Gotta go now can't investigate on this.

> cropperjs@2.0.0-beta.5 test
> jest

Error: Cannot find module './lib/stringify'
Require stack:
- /home/oss/cropperjs/node_modules/braces/index.js
- /home/oss/cropperjs/node_modules/micromatch/index.js
- /home/oss/cropperjs/node_modules/jest-haste-map/build/watchers/common.js
- /home/oss/cropperjs/node_modules/jest-haste-map/build/watchers/NodeWatcher.js
- /home/oss/cropperjs/node_modules/jest-haste-map/build/index.js
- /home/oss/cropperjs/node_modules/jest-runtime/build/index.js
- /home/oss/cropperjs/node_modules/@jest/core/build/cli/index.js
- /home/oss/cropperjs/node_modules/@jest/core/build/index.js
- /home/oss/cropperjs/node_modules/jest-cli/build/run.js
- /home/oss/cropperjs/node_modules/jest-cli/build/index.js
- /home/oss/cropperjs/node_modules/jest-cli/bin/jest.js
- /home/oss/cropperjs/node_modules/jest/bin/jest.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/oss/cropperjs/node_modules/braces/index.js:3:19)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)