diff --git a/package.json b/package.json index ce7c8ef..5f934b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-image-crop", - "version": "10.0.6", + "version": "10.0.7", "description": "A responsive image cropping tool for React", "repository": "https://github.com/DominicTobias/react-image-crop", "main": "dist/ReactCrop.min.js", @@ -27,22 +27,22 @@ ], "license": "ISC", "devDependencies": { - "@types/react": "^18.0.15", + "@types/react": "^18.0.18", "@types/react-dom": "^18.0.6", "babel-eslint": "^10.1.0", "css-loader": "^6.7.1", - "eslint": "^8.20.0", + "eslint": "^8.23.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", - "eslint-plugin-react": "^7.30.1", + "eslint-plugin-react": "^7.31.7", "mini-css-extract-plugin": "^2.6.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "sass": "^1.54.0", + "sass": "^1.54.9", "sass-loader": "^13.0.2", "style-loader": "^3.3.1", "ts-loader": "^9.3.1", - "typescript": "^4.7.4", + "typescript": "^4.8.3", "webpack": "^5.74.0", "webpack-cli": "^4.10.0" }, diff --git a/src/utils.ts b/src/utils.ts index 6cfdbfd..63e7b48 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -22,6 +22,18 @@ export function areCropsEqual(cropA: Partial, cropB: Partial) { ) } +export function makeAspectCrop( + crop: Pick & Partial>, + aspect: number, + containerWidth: number, + containerHeight: number +): PercentCrop +export function makeAspectCrop( + crop: Pick & Partial>, + aspect: number, + containerWidth: number, + containerHeight: number +): PixelCrop export function makeAspectCrop(crop: Partial, aspect: number, containerWidth: number, containerHeight: number) { const pixelCrop = convertToPixelCrop(crop, containerWidth, containerHeight) @@ -50,6 +62,16 @@ export function makeAspectCrop(crop: Partial, aspect: number, containerWid return pixelCrop } +export function centerCrop( + crop: Pick & Partial>, + containerWidth: number, + containerHeight: number +): PercentCrop +export function centerCrop( + crop: Pick & Partial>, + containerWidth: number, + containerHeight: number +): PixelCrop export function centerCrop(crop: Partial, containerWidth: number, containerHeight: number) { const pixelCrop = convertToPixelCrop(crop, containerWidth, containerHeight) @@ -99,6 +121,7 @@ export function convertToPixelCrop(crop: Partial, containerWidth: number, } } +// Sorry. export function containCrop( pixelCrop: PixelCrop, aspect: number, @@ -111,19 +134,21 @@ export function containCrop( maxHeight = containerHeight ) { const containedCrop = { ...pixelCrop } - let _minWidth = minWidth - let _minHeight = minHeight - let _maxWidth = maxWidth - let _maxHeight = maxHeight + let _minWidth = Math.min(minWidth, containerWidth) + let _minHeight = Math.min(minHeight, containerHeight) + let _maxWidth = Math.min(maxWidth, containerWidth) + let _maxHeight = Math.min(maxHeight, containerHeight) if (aspect) { if (aspect > 1) { // Landscape - increase width min + max. - _minWidth = minHeight * aspect + _minWidth = minHeight ? minHeight * aspect : _minWidth + _minHeight = _minWidth / aspect _maxWidth = maxWidth * aspect } else { // Portrait - increase height min + max. - _minHeight = minWidth / aspect + _minHeight = minWidth ? minWidth / aspect : _minHeight + _minWidth = _minHeight * aspect _maxHeight = maxHeight / aspect } } @@ -195,7 +220,7 @@ export function containCrop( const currAspect = containedCrop.width / containedCrop.height if (currAspect < aspect) { // Crop is shrunk on the width so adjust the height. - const newHeight = containedCrop.width / aspect + const newHeight = Math.max(containedCrop.width / aspect, _minHeight) if (ord === 'nw' || ord == 'ne') { // Stops box moving when min is hit. @@ -205,7 +230,7 @@ export function containCrop( containedCrop.height = newHeight } else if (currAspect > aspect) { // Crop is shrunk on the height so adjust the width. - const newWidth = containedCrop.height * aspect + const newWidth = Math.max(containedCrop.height * aspect, _minWidth) if (ord === 'sw' || ord == 'nw') { // Stops box moving when max is hit. diff --git a/test/index.tsx b/test/index.tsx index 5709a7d..ee93359 100644 --- a/test/index.tsx +++ b/test/index.tsx @@ -93,9 +93,10 @@ function App() { {Boolean(imgSrc) && ( setCrop(percentCrop)} onComplete={c => setCompletedCrop(c)} - aspect={16 / 9} > Crop me=3.0.0 <4.0.0" immutable "^4.0.0" @@ -2366,6 +2515,11 @@ side-channel@^1.0.4: get-intrinsic "^1.0.2" object-inspect "^1.9.0" +slash@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" + integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== + "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" @@ -2586,10 +2740,10 @@ type-fest@^0.20.2: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ== -typescript@^4.7.4: - version "4.7.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" - integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== +typescript@^4.8.3: + version "4.8.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88" + integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig== unbox-primitive@^1.0.1: version "1.0.1" @@ -2623,11 +2777,6 @@ util-deprecate@^1.0.2: resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= -v8-compile-cache@^2.0.3: - version "2.2.0" - resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132" - integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q== - watchpack@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"