Blur: Make bounding box snap to nearest MCU properly show what region gets blurred (#6943)

* blur bounding box snap to nearest MCU properly show what region gets blurred

* Make bounding box not grow when moved, only snap its position to nearest MCU borderline

* Refetch image properties on applying blur, crop

* Add strings for toasts

Author: rovertrack

app/src/main/java/fr/free/nrw/commons/edit/BlurOverlayView.kt

@@ -14,9 +14,13 @@ import android.view.ScaleGestureDetector
 import android.view.View
 import android.widget.ImageView
 import fr.free.nrw.commons.ajpegtran.blur.BlurRegion
+import kotlin.math.ceil
+import kotlin.math.floor
 import kotlin.math.max
 import kotlin.math.min
+import kotlin.math.round
 import androidx.core.graphics.withMatrix
+import fr.free.nrw.commons.ajpegtran.Properties
 
 /**
  * Custom overlay view to allow users to draw and select multiple rectangular
@@ -61,13 +65,15 @@ class BlurOverlayView @JvmOverloads constructor(
     private val edgeHandleRadiusDp = 2f
     private val cornerTouchSlopDp = 24f
     private val edgeTouchSlopDp = 20f
-    private val minRegionSizeDp = 20f
+    private val borderStrokeWidth = 1.5f
+    private val minRegionSizeDp = 10f
     private lateinit var handlePaint: Paint
     private lateinit var activeHandlePaint: Paint
     private lateinit var handleBorderPaint: Paint
     private var moveRegionIndex = -1
     private var lastTouchX = 0f
     private var lastTouchY = 0f
+    private var imageProperties: Properties? = null
 
     private enum class Handle {
         TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
@@ -96,7 +102,7 @@ class BlurOverlayView @JvmOverloads constructor(
         borderPaint = Paint().apply {
             color = Color.CYAN
             style = Paint.Style.STROKE
-            strokeWidth = 4.0f
+            strokeWidth = borderStrokeWidth
             isAntiAlias = true
         }
 
@@ -460,8 +466,10 @@ class BlurOverlayView @JvmOverloads constructor(
 
             MotionEvent.ACTION_UP -> {
                 // Rectangle movement.
-                if (moveRegionIndex != -1)
+                if (moveRegionIndex != -1) {
+                    snapRectToMCU(regions[moveRegionIndex])
                     moveRegionIndex = -1
+                }
                 // Delete marker tap.
                 if (deleteBoxIndex != -1) {
                     if (deleteBoxIndex < regions.size) {
@@ -474,6 +482,7 @@ class BlurOverlayView @JvmOverloads constructor(
 
                 // End resize.
                 if (resizeRegionIndex != -1) {
+                    snapRectToMCU(regions[resizeRegionIndex])
                     parent?.requestDisallowInterceptTouchEvent(false)
                     resizeRegionIndex = -1
                     resizeHandle = null
@@ -484,6 +493,7 @@ class BlurOverlayView @JvmOverloads constructor(
                 // End drawing.
                 currentActiveBox?.let { activeBox ->
                     if (activeBox.width() > 15 && activeBox.height() > 15) {
+                        snapRectToMCU(activeBox)
                         regions.add(activeBox)
                     }
                     currentActiveBox = null
@@ -617,6 +627,73 @@ class BlurOverlayView @JvmOverloads constructor(
         }
     }
 
+    /**
+     * Initializes the [imageProperties] with current image properties.
+     * */
+    fun setImageProperties(properties: Properties) {
+        imageProperties = properties
+    }
+
+    /**
+     * Snaps [rect] to MCU boundaries in drawable-pixel space.
+     * If the rect's dimensions are already MCU-aligned, snaps position to the nearest MCU grid line,
+     * While preserving size.
+     * Otherwise, expands outward to cover full MCU blocks.
+     */
+    private fun snapRectToMCU(rect: RectF) {
+
+        // Pre-check.
+        val props = imageProperties ?: return
+        val drawable = imageView?.drawable ?: return
+        if (props.MCU_Width <= 0 || props.MCU_Height <= 0) return
+
+        // MCU size in drawable-pixel space.
+        val mcuW = props.MCU_Width.toFloat() * drawable.intrinsicWidth / props.width
+        val mcuH = props.MCU_Height.toFloat() * drawable.intrinsicHeight / props.height
+        val maxW = drawable.intrinsicWidth.toFloat()
+        val maxH = drawable.intrinsicHeight.toFloat()
+
+        val widthRemainder = rect.width() % mcuW
+        val widthAligned = widthRemainder < 0.01f || widthRemainder > (mcuW - 0.01f)
+        val heightRemainder = rect.height() % mcuH
+        val heightAligned = heightRemainder < 0.01f || heightRemainder > (mcuH - 0.01f)
+
+        // Already MCU-sized, Snap to nearest border position only, preserve size.
+        if (widthAligned && heightAligned) {
+            val w = rect.width()
+            val h = rect.height()
+            rect.left = round(rect.left / mcuW) * mcuW
+            rect.top = round(rect.top / mcuH) * mcuH
+            rect.right = rect.left + w
+            rect.bottom = rect.top + h
+
+            // Shift back if pushed past total image size.
+            if (rect.right > maxW) {
+                rect.offset(maxW - rect.right, 0f)
+            }
+            if (rect.bottom > maxH) {
+                rect.offset(0f, maxH - rect.bottom)
+            }
+            if (rect.left < 0f) {
+                rect.offset(-rect.left, 0f)
+            }
+            if (rect.top < 0f) {
+                rect.offset(0f, -rect.top)
+            }
+        } else {
+            // Not aligned, Expand outward to full MCU blocks.
+            rect.left = floor(rect.left.toDouble() / mcuW).toFloat() * mcuW
+            rect.top = floor(rect.top.toDouble() / mcuH).toFloat() * mcuH
+            rect.right = ceil(rect.right.toDouble() / mcuW).toFloat() * mcuW
+            rect.bottom = ceil(rect.bottom.toDouble() / mcuH).toFloat() * mcuH
+
+            // Clamp to drawable bounds.
+            rect.left = max(0f, rect.left)
+            rect.top = max(0f, rect.top)
+            rect.right = min(maxW, rect.right)
+            rect.bottom = min(maxH, rect.bottom)
+        }
+    }
 
     fun resetZoom() {
         val iv = imageView ?: return

app/src/main/java/fr/free/nrw/commons/edit/EditActivity.kt

@@ -18,6 +18,8 @@ import androidx.core.net.toUri
 import androidx.core.view.WindowInsetsCompat
 import androidx.exifinterface.media.ExifInterface
 import androidx.lifecycle.ViewModelProvider
+import fr.free.nrw.commons.R
+import fr.free.nrw.commons.ajpegtran.Properties
 import fr.free.nrw.commons.databinding.ActivityEditBinding
 import fr.free.nrw.commons.theme.BaseActivity
 import fr.free.nrw.commons.utils.applyEdgeToEdgeBottomInsets
@@ -49,6 +51,7 @@ class EditActivity : BaseActivity() {
     private var originalBitmapWidth = 0
     private var originalBitmapHeight = 0
     private var maxAvailableHeight = 0f
+    private var properties: Properties? = null
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -59,7 +62,7 @@ class EditActivity : BaseActivity() {
         imageUri = intent.getStringExtra("image") ?: ""
         vm = ViewModelProvider(this)[EditViewModel::class.java]
         vm.initJpegtran(applicationContext, imageUri)
-
+        fetchAndUpdateImageProperties()
         val sourceExif = try {
             ExifInterface(imageUri)
         } catch (e: Exception) {
@@ -141,6 +144,23 @@ class EditActivity : BaseActivity() {
         }
     }
 
+    /**
+     * Gets the current image properties and update those properties in [BlurOverlayView].
+     * */
+    private fun fetchAndUpdateImageProperties() {
+        try {
+            properties = vm.getProperties(File(imageUri).toUri())
+            binding.blurOverlay.setImageProperties(properties!!)
+        } catch (e: Exception) {
+            Timber.e(e, "Error getting image properties: ${e.localizedMessage}")
+            Toast.makeText(
+                this@EditActivity,
+                getString(R.string.error_getting_image_properties),
+                Toast.LENGTH_LONG
+            ).show()
+        }
+    }
+
     /**
      * Toggles between the main toolbar (Rotate/Crop/Save) and the edit toolbar (Apply/Cancel).
      *
@@ -270,8 +290,8 @@ class EditActivity : BaseActivity() {
 
         if (regions.isEmpty()) {
             Toast.makeText(
-                this,
-                "Please draw at least one rectangle on the photo",
+                this@EditActivity,
+                getString(R.string.error_blur_no_rectangle),
                 Toast.LENGTH_SHORT
             ).show()
             return
@@ -289,11 +309,12 @@ class EditActivity : BaseActivity() {
             applyPendingRotation()
             // Reload the image displaying the applied blur.
             updateImagePreview()
+            fetchAndUpdateImageProperties()
         } catch (e: Exception) {
-            Timber.e(e, "Failed to apply blur")
+            Timber.e(e, "Failed to apply blur ${e.localizedMessage}")
             Toast.makeText(
                 this@EditActivity,
-                "Error applying blur: ${e.localizedMessage}",
+                getString(R.string.error_applying_blur),
                 Toast.LENGTH_LONG
             ).show()
         }
@@ -308,9 +329,8 @@ class EditActivity : BaseActivity() {
             // Apply pending rotation if any.
             applyPendingRotation()
 
-            val properties = vm.getProperties(File(imageUri).toUri())
-            val actualWidth = properties.width
-            val actualHeight = properties.height
+            val actualWidth = properties!!.width
+            val actualHeight = properties!!.height
             val cropRect = binding.cropOverlay.getCropRect()
             val cropCoords = convertViewCropToImageCrop(cropRect, actualWidth, actualHeight)
 
@@ -325,12 +345,13 @@ class EditActivity : BaseActivity() {
                 imageUri = croppedFile.absolutePath
                 // Update the image preview.
                 updateImagePreview()
+                fetchAndUpdateImageProperties()
             }
         } catch (e: Exception) {
-            Timber.e(e, "applyCrop: Failed to apply crop")
+            Timber.e(e, "applyCrop: Failed to apply crop ${e.localizedMessage}")
             Toast.makeText(
-                this,
-                "Failed to apply crop: ${e.localizedMessage}",
+                this@EditActivity,
+                getString(R.string.failed_to_apply_crop),
                 Toast.LENGTH_LONG
             ).show()
         }
@@ -430,10 +451,13 @@ class EditActivity : BaseActivity() {
             setResult(RESULT_OK, resultIntent)
             finish()
         } catch (e: Exception) {
-            Timber.e(e, "saveEditedImage: Exception occurred during save process")
+            Timber.e(
+                e,
+                "saveEditedImage: Exception occurred during save process ${e.localizedMessage}"
+            )
             Toast.makeText(
                 this@EditActivity,
-                "Failed to save image: ${e.localizedMessage}",
+                getString(R.string.failed_to_save_image),
                 Toast.LENGTH_LONG
             ).show()
         }

app/src/main/res/values/strings.xml

@@ -906,4 +906,10 @@ Upload your first media by tapping on the add button.</string>
   <string name="license_cc0_long_description">This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, with no conditions.</string>
   <string name="license_cc_by_long_description">This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes, as long as attribution is given to the creator.</string>
   <string name="license_cc_by_sa_long_description">This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes, as long as attribution is given to the creator and the new work is licensed under identical terms.</string>
+
+  <string name="error_getting_image_properties">Error getting image properties:</string>
+  <string name="error_blur_no_rectangle">Please draw at least one rectangle on the photo</string>
+  <string name="error_applying_blur">Error applying blur</string>
+  <string name="failed_to_apply_crop">Failed to apply crop</string>
+  <string name="failed_to_save_image">Failed to save image</string>
 </resources>