fix(cropper-selection): improve selection movement logic for better user experience

Author: fengyuanchen

packages/element-selection/src/index.ts

@@ -409,9 +409,9 @@ export default class CropperSelection extends CropperElement {
       return;
     }
 
-    const moveX = detail.endX - detail.startX;
-    const moveY = detail.endY - detail.startY;
     const { width, height } = this;
+    let moveX = detail.endX - detail.startX;
+    let moveY = detail.endY - detail.startY;
     let { aspectRatio } = this;
 
     // Locking aspect ratio by holding shift key
@@ -421,7 +421,14 @@ export default class CropperSelection extends CropperElement {
 
     switch (action) {
       case ACTION_SELECT:
-        if (moveX !== 0 && moveY !== 0) {
+        if (moveX !== 0 || moveY !== 0) {
+          // Force to create a square selection for better user experience
+          if (moveX === 0) {
+            moveX = moveY;
+          } else if (moveY === 0) {
+            moveY = moveX;
+          }
+
           const { $canvas } = this;
           const offset = getOffset(currentTarget as Element);