Change cropper movement from accept/reject to clamping.

lama_cleaner/app/src/components/Croper/Croper.tsx

@@ -33,6 +33,39 @@ interface Props {
   minWidth: number
 }
 
+const clamp = (
+  newPos: number,
+  newLength: number,
+  oldPos: number,
+  oldLength: number,
+  minLength: number,
+  maxLength: number
+) => {
+  if (newPos !== oldPos && newLength === oldLength) {
+    if (newPos < 0) {
+      return [0, oldLength]
+    }
+    if (newPos + newLength > maxLength) {
+      return [maxLength - oldLength, oldLength]
+    }
+  } else {
+    if (newLength < minLength) {
+      if (newPos === oldPos) {
+        return [newPos, minLength]
+      }
+      return [newPos + newLength - minLength, minLength]
+    }
+    if (newPos < 0) {
+      return [0, newPos + newLength]
+    }
+    if (newPos + newLength > maxLength) {
+      return [newPos, maxLength - newPos]
+    }
+  }
+
+  return [newPos, newLength]
+}
+
 const Croper = (props: Props) => {
   const { minHeight, minWidth, maxHeight, maxWidth, scale } = props
   const [x, setX] = useRecoilState(croperX)
@@ -63,18 +96,12 @@ const Croper = (props: Props) => {
     console.log('focus')
   }
 
-  const checkTopBottomLimit = (newY: number, newHeight: number) => {
-    if (newY > 0 && newHeight > minHeight && newY + newHeight <= maxHeight) {
-      return true
-    }
-    return false
+  const clampLeftRight = (newX: number, newWidth: number) => {
+    return clamp(newX, newWidth, x, width, minWidth, maxWidth)
   }
 
-  const checkLeftRightLimit = (newX: number, newWidth: number) => {
-    if (newX > 0 && newWidth > minWidth && newX + newWidth <= maxWidth) {
-      return true
-    }
-    return false
+  const clampTopBottom = (newY: number, newHeight: number) => {
+    return clamp(newY, newHeight, y, height, minHeight, maxHeight)
   }
 
   const onPointerMove = (e: PointerEvent) => {
@@ -90,33 +117,31 @@ const Croper = (props: Props) => {
     const moveTop = () => {
       const newHeight = evData.initHeight - offsetY
       const newY = evData.initY + offsetY
-      if (checkTopBottomLimit(newY, newHeight)) {
-        setHeight(newHeight)
-        setY(newY)
-      }
+      const [clampedY, clampedHeight] = clampTopBottom(newY, newHeight)
+      setHeight(clampedHeight)
+      setY(clampedY)
     }
 
     const moveBottom = () => {
       const newHeight = evData.initHeight + offsetY
-      if (checkTopBottomLimit(evData.initY, newHeight)) {
-        setHeight(newHeight)
-      }
+      const [clampedY, clampedHeight] = clampTopBottom(evData.initY, newHeight)
+      setHeight(clampedHeight)
+      setY(clampedY)
     }
 
     const moveLeft = () => {
       const newWidth = evData.initWidth - offsetX
       const newX = evData.initX + offsetX
-      if (checkLeftRightLimit(newX, newWidth)) {
-        setWidth(newWidth)
-        setX(newX)
-      }
+      const [clampedX, clampedWidth] = clampLeftRight(newX, newWidth)
+      setWidth(clampedWidth)
+      setX(clampedX)
     }
 
     const moveRight = () => {
       const newWidth = evData.initWidth + offsetX
-      if (checkLeftRightLimit(evData.initX, newWidth)) {
-        setWidth(newWidth)
-      }
+      const [clampedX, clampedWidth] = clampLeftRight(evData.initX, newWidth)
+      setWidth(clampedWidth)
+      setX(clampedX)
     }
 
     if (isResizing) {
@@ -166,13 +191,12 @@ const Croper = (props: Props) => {
     if (isMoving) {
       const newX = evData.initX + offsetX
       const newY = evData.initY + offsetY
-      if (
-        checkLeftRightLimit(newX, evData.initWidth) &&
-        checkTopBottomLimit(newY, evData.initHeight)
-      ) {
-        setX(newX)
-        setY(newY)
-      }
+      const [clampedX, clampedWidth] = clampLeftRight(newX, evData.initWidth)
+      const [clampedY, clampedHeight] = clampTopBottom(newY, evData.initHeight)
+      setWidth(clampedWidth)
+      setHeight(clampedHeight)
+      setX(clampedX)
+      setY(clampedY)
     }
   }