Improved crop box resizing

Resolve #222
fengyuanchen · Sep 10, 2017 · b15aa83 · b15aa83
1 parent bde0d35
commit b15aa83
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 ## next
 
 - Added 4 new options to `getCroppedCanvas` method:  `minWidth`, `minHeight`, `maxWidth` and `maxHeight`.
+- Improved crop box resizing (#222).
 
 
 ## 1.0.0 (Sep 3, 2017)

diff --git a/src/js/change.js b/src/js/change.js
@@ -85,6 +85,39 @@ export default {
       x: pointer.endX - pointer.startX,
       y: pointer.endY - pointer.startY,
     };
+    const check = (side) => {
+      switch (side) {
+        case ACTION_EAST:
+          if (right + range.x > maxWidth) {
+            range.x = maxWidth - right;
+          }
+
+          break;
+
+        case ACTION_WEST:
+          if (left + range.x < minLeft) {
+            range.x = minLeft - left;
+          }
+
+          break;
+
+        case ACTION_NORTH:
+          if (top + range.y < minTop) {
+            range.y = minTop - top;
+          }
+
+          break;
+
+        case ACTION_SOUTH:
+          if (bottom + range.y > maxHeight) {
+            range.y = maxHeight - bottom;
+          }
+
+          break;
+
+        default:
+      }
+    };
 
     switch (action) {
       // Move crop box
@@ -101,10 +134,7 @@ export default {
           break;
         }
 
-        if (right + range.x > maxWidth) {
-          range.x = maxWidth - right;
-        }
-
+        check(ACTION_EAST);
         width += range.x;
 
         if (aspectRatio) {
@@ -126,10 +156,7 @@ export default {
           break;
         }
 
-        if (top + range.y < minTop) {
-          range.y = minTop - top;
-        }
-
+        check(ACTION_NORTH);
         height -= range.y;
         top += range.y;
 
@@ -152,10 +179,7 @@ export default {
           break;
         }
 
-        if (left + range.x < minLeft) {
-          range.x = minLeft - left;
-        }
-
+        check(ACTION_WEST);
         width -= range.x;
         left += range.x;
 
@@ -178,10 +202,7 @@ export default {
           break;
         }
 
-        if (bottom + range.y > maxHeight) {
-          range.y = maxHeight - bottom;
-        }
-
+        check(ACTION_SOUTH);
         height += range.y;
 
         if (aspectRatio) {
@@ -203,10 +224,14 @@ export default {
             break;
           }
 
+          check(ACTION_NORTH);
           height -= range.y;
           top += range.y;
           width = height * aspectRatio;
         } else {
+          check(ACTION_NORTH);
+          check(ACTION_EAST);
+
           if (range.x >= 0) {
             if (right < maxWidth) {
               width += range.x;
@@ -249,11 +274,15 @@ export default {
             break;
           }
 
+          check(ACTION_NORTH);
           height -= range.y;
           top += range.y;
           width = height * aspectRatio;
           left += range.y * aspectRatio;
         } else {
+          check(ACTION_NORTH);
+          check(ACTION_WEST);
+
           if (range.x <= 0) {
             if (left > minLeft) {
               width -= range.x;
@@ -298,10 +327,14 @@ export default {
             break;
           }
 
+          check(ACTION_WEST);
           width -= range.x;
           left += range.x;
           height = width / aspectRatio;
         } else {
+          check(ACTION_SOUTH);
+          check(ACTION_WEST);
+
           if (range.x <= 0) {
             if (left > minLeft) {
               width -= range.x;
@@ -344,9 +377,13 @@ export default {
             break;
           }
 
+          check(ACTION_EAST);
           width += range.x;
           height = width / aspectRatio;
         } else {
+          check(ACTION_SOUTH);
+          check(ACTION_EAST);
+
           if (range.x >= 0) {
             if (right < maxWidth) {
               width += range.x;