Infer out type in centerCrop and makeAspectCrop #507

sekoyo · Sep 8, 2022 · 47a623f · 47a623f
1 parent d2e9fe7
commit 47a623f
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 67 deletions.
diff --git 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
@@ -22,6 +22,18 @@ export function areCropsEqual(cropA: Partial<Crop>, cropB: Partial<Crop>) {
   )
 }
 
+export function makeAspectCrop(
+  crop: Pick<PercentCrop, 'unit'> & Partial<Omit<PercentCrop, 'unit'>>,
+  aspect: number,
+  containerWidth: number,
+  containerHeight: number
+): PercentCrop
+export function makeAspectCrop(
+  crop: Pick<PixelCrop, 'unit'> & Partial<Omit<PixelCrop, 'unit'>>,
+  aspect: number,
+  containerWidth: number,
+  containerHeight: number
+): PixelCrop
 export function makeAspectCrop(crop: Partial<Crop>, aspect: number, containerWidth: number, containerHeight: number) {
   const pixelCrop = convertToPixelCrop(crop, containerWidth, containerHeight)
 
@@ -50,6 +62,16 @@ export function makeAspectCrop(crop: Partial<Crop>, aspect: number, containerWid
   return pixelCrop
 }
 
+export function centerCrop(
+  crop: Pick<PercentCrop, 'unit'> & Partial<Omit<PercentCrop, 'unit'>>,
+  containerWidth: number,
+  containerHeight: number
+): PercentCrop
+export function centerCrop(
+  crop: Pick<PixelCrop, 'unit'> & Partial<Omit<PixelCrop, 'unit'>>,
+  containerWidth: number,
+  containerHeight: number
+): PixelCrop
 export function centerCrop(crop: Partial<Crop>, containerWidth: number, containerHeight: number) {
   const pixelCrop = convertToPixelCrop(crop, containerWidth, containerHeight)
 
@@ -99,6 +121,7 @@ export function convertToPixelCrop(crop: Partial<Crop>, 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
@@ -93,9 +93,10 @@ function App() {
       {Boolean(imgSrc) && (
         <ReactCrop
           crop={crop}
+          aspect={16 / 9}
+          minHeight={200}
           onChange={(_, percentCrop) => setCrop(percentCrop)}
           onComplete={c => setCompletedCrop(c)}
-          aspect={16 / 9}
         >
           <img
             alt="Crop me"