From 39a281b8d929c247d5a316113dce427f7d402af9 Mon Sep 17 00:00:00 2001
From: IanSymplectic <ian@symplectic.co.uk>
Date: Thu, 28 Nov 2024 05:16:08 +0000
Subject: [PATCH] Updated keyboard control to allow for holding the shift key
 for finer control when using the arrow keys, and prevented scrolling when
 using arrow keys to move the crop area. (#575)

---
 src/Cropper.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Cropper.tsx b/src/Cropper.tsx
index 93d2660..5205652 100644
--- a/src/Cropper.tsx
+++ b/src/Cropper.tsx
@@ -732,24 +732,33 @@ class Cropper extends React.Component<CropperProps, State> {
 
   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const { crop, onCropChange, keyboardStep, zoom, rotation } = this.props
-    const step = keyboardStep
+    let step = keyboardStep
 
     if (!this.state.cropSize) return
 
+    // if the shift key is pressed, reduce the step to allow finer control
+    if (event.shiftKey) {
+      step *= 0.2
+    }
+
     let newCrop = { ...crop }
 
     switch (event.key) {
       case 'ArrowUp':
         newCrop.y -= step
+        event.preventDefault()
         break
       case 'ArrowDown':
         newCrop.y += step
+        event.preventDefault()
         break
       case 'ArrowLeft':
         newCrop.x -= step
+        event.preventDefault()
         break
       case 'ArrowRight':
         newCrop.x += step
+        event.preventDefault()
         break
       default:
         return