react-native-photo-video-editor 0.1.1 → 0.2.0

package/android/src/main/java/com/photovideoeditor/photo/ui/CropOverlayView.kt

@@ -7,194 +7,152 @@ import android.graphics.Paint
 import android.graphics.RectF
 import android.view.MotionEvent
 import android.view.View
+import com.photovideoeditor.photo.render.CropGeometry
+import com.photovideoeditor.photo.render.PhotoTransformState
 import kotlin.math.abs
+import kotlin.math.hypot
 
-/**
- * Draws a draggable/resizable crop rectangle over [imageBounds] (the on-screen
- * rect of the preview image, in this view's own coordinate space) and reports
- * the crop edges back normalized to that rect via [onCropChanged].
- */
+/** Crop handles own resize gestures; interior drags/pinches move the media behind a fixed box. */
 class CropOverlayView(context: Context) : View(context) {
   private var imageBounds = RectF()
+  private var fittedBounds = RectF()
   private var cropRect = RectF()
   private var aspectRatio: Float? = null
-  var onCropChanged: ((left: Float, top: Float, right: Float, bottom: Float) -> Unit)? = null
+  var onCropChanged: ((Float, Float, Float, Float) -> Unit)? = null
+  var onMediaBoundsChanged: ((RectF) -> Unit)? = null
+  var onViewportChanged: ((Float, Float, Float) -> Unit)? = null
+  private val density = resources.displayMetrics.density
+  private val dimPaint = Paint().apply { color = Color.argb(165, 0, 0, 0) }
+  private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = density }
+  private val gridPaint = Paint().apply { color = Color.argb(85, 255, 255, 255); strokeWidth = density * .5f }
+  private val handlePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = Color.WHITE; strokeWidth = 3 * density; strokeCap = Paint.Cap.ROUND; style = Paint.Style.STROKE }
+  private var activeHandle: CropGeometry.Handle? = null
+  private var lastX = 0f; private var lastY = 0f; private var lastDistance = 0f
+  private var movingMedia = false
 
-  private val dimPaint = Paint().apply { color = Color.argb(153, 0, 0, 0) }
-  private val borderPaint = Paint().apply { color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = 3f }
-  private val gridPaint = Paint().apply { color = Color.argb(120, 255, 255, 255); style = Paint.Style.STROKE; strokeWidth = 1f }
-  private val handlePaint = Paint().apply { color = Color.WHITE; style = Paint.Style.FILL }
-
-  private val handleTouchRadius = 56f
-  private val minSizePx = 96f
-  private var activeHandle = Handle.NONE
-  private var lastX = 0f
-  private var lastY = 0f
-
-  private enum class Handle { NONE, MOVE, TOP, RIGHT, BOTTOM, LEFT, TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT }
+  fun restore(bounds: RectF, state: PhotoTransformState) {
+    if (bounds.width() <= 0 || bounds.height() <= 0) return
+    fittedBounds = RectF(bounds)
+    val zoom = state.zoom.coerceIn(1f, 8f)
+    val cx = bounds.centerX() + state.panX * bounds.width()
+    val cy = bounds.centerY() + state.panY * bounds.height()
+    imageBounds = RectF(cx - bounds.width() * zoom / 2, cy - bounds.height() * zoom / 2,
+      cx + bounds.width() * zoom / 2, cy + bounds.height() * zoom / 2)
+    aspectRatio = state.aspectRatio
+    setCrop(state.cropLeft, state.cropTop, state.cropRight, state.cropBottom)
+    onMediaBoundsChanged?.invoke(RectF(imageBounds))
+    invalidate()
+  }
 
-  /** Sets the on-screen image rect this overlay crops against. Resets the crop to full-frame when [resetCrop] is true. */
   fun setImageBounds(bounds: RectF, resetCrop: Boolean) {
-    imageBounds = RectF(bounds)
-    if (resetCrop || cropRect.width() <= 0f || cropRect.height() <= 0f) {
-      cropRect = RectF(imageBounds)
-      reportCrop()
-    }
+    val old = normalized()
+    imageBounds = RectF(bounds); fittedBounds = RectF(bounds)
+    if (resetCrop || cropRect.isEmpty) cropRect = RectF(bounds) else setCrop(old[0], old[1], old[2], old[3])
     invalidate()
   }
 
-  /** Restores a normalized crop rectangle, used when reopening or cancelling crop mode. */
   fun setCrop(left: Float, top: Float, right: Float, bottom: Float) {
-    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return
-    cropRect = RectF(
-      imageBounds.left + left * imageBounds.width(),
-      imageBounds.top + top * imageBounds.height(),
-      imageBounds.left + right * imageBounds.width(),
-      imageBounds.top + bottom * imageBounds.height()
-    )
-    clampToImageBounds(); invalidate()
+    cropRect = RectF(imageBounds.left + left * imageBounds.width(), imageBounds.top + top * imageBounds.height(),
+      imageBounds.left + right * imageBounds.width(), imageBounds.top + bottom * imageBounds.height())
+    invalidate()
   }
 
   fun setAspectRatio(ratio: Float?) {
     aspectRatio = ratio
-    if (ratio != null && imageBounds.width() > 0 && imageBounds.height() > 0) {
-      val centerX = cropRect.centerX()
-      val centerY = cropRect.centerY()
-      var width = cropRect.width()
-      var height = width / ratio
-      if (height > imageBounds.height()) {
-        height = cropRect.height()
-        width = height * ratio
-      }
-      cropRect = RectF(centerX - width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2)
-      clampToImageBounds()
-      invalidate()
-    }
-    reportCrop()
+    // A new preset starts with the largest centered rectangle in the visible media.
+    val available = RectF(imageBounds)
+    available.intersect(0f, 0f, width.toFloat(), height.toFloat())
+    cropRect = CropGeometry.fit(available.geometry(), ratio).native()
+    reportCrop(); invalidate()
   }
 
   override fun onDraw(canvas: Canvas) {
-    super.onDraw(canvas)
-    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return
-    canvas.drawRect(imageBounds.left, imageBounds.top, imageBounds.right, cropRect.top, dimPaint)
-    canvas.drawRect(imageBounds.left, cropRect.bottom, imageBounds.right, imageBounds.bottom, dimPaint)
-    canvas.drawRect(imageBounds.left, cropRect.top, cropRect.left, cropRect.bottom, dimPaint)
-    canvas.drawRect(cropRect.right, cropRect.top, imageBounds.right, cropRect.bottom, dimPaint)
+    if (cropRect.isEmpty) return
+    canvas.drawRect(0f, 0f, width.toFloat(), cropRect.top, dimPaint)
+    canvas.drawRect(0f, cropRect.bottom, width.toFloat(), height.toFloat(), dimPaint)
+    canvas.drawRect(0f, cropRect.top, cropRect.left, cropRect.bottom, dimPaint)
+    canvas.drawRect(cropRect.right, cropRect.top, width.toFloat(), cropRect.bottom, dimPaint)
     canvas.drawRect(cropRect, borderPaint)
-    val thirdWidth = cropRect.width() / 3
-    val thirdHeight = cropRect.height() / 3
     for (i in 1..2) {
-      canvas.drawLine(cropRect.left + thirdWidth * i, cropRect.top, cropRect.left + thirdWidth * i, cropRect.bottom, gridPaint)
-      canvas.drawLine(cropRect.left, cropRect.top + thirdHeight * i, cropRect.right, cropRect.top + thirdHeight * i, gridPaint)
+      val x = cropRect.left + cropRect.width() * i / 3; val y = cropRect.top + cropRect.height() * i / 3
+      canvas.drawLine(x, cropRect.top, x, cropRect.bottom, gridPaint)
+      canvas.drawLine(cropRect.left, y, cropRect.right, y, gridPaint)
+    }
+    val corner = 14 * density
+    for ((x, y) in listOf(cropRect.left to cropRect.top, cropRect.right to cropRect.top, cropRect.left to cropRect.bottom, cropRect.right to cropRect.bottom)) {
+      canvas.drawLine(x, y, x + if (x == cropRect.left) corner else -corner, y, handlePaint)
+      canvas.drawLine(x, y, x, y + if (y == cropRect.top) corner else -corner, handlePaint)
     }
-    listOf(
-      cropRect.left to cropRect.top,
-      cropRect.centerX() to cropRect.top,
-      cropRect.right to cropRect.top,
-      cropRect.right to cropRect.centerY(),
-      cropRect.right to cropRect.bottom,
-      cropRect.centerX() to cropRect.bottom,
-      cropRect.left to cropRect.bottom,
-      cropRect.left to cropRect.centerY()
-    ).forEach { (x, y) -> canvas.drawCircle(x, y, 8f, handlePaint) }
+    val edge = 8 * density
+    for (y in listOf(cropRect.top, cropRect.bottom)) canvas.drawLine(cropRect.centerX() - edge, y, cropRect.centerX() + edge, y, handlePaint)
+    for (x in listOf(cropRect.left, cropRect.right)) canvas.drawLine(x, cropRect.centerY() - edge, x, cropRect.centerY() + edge, handlePaint)
   }
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (imageBounds.isEmpty) return false
     when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
-        activeHandle = hitTest(event.x, event.y)
-        lastX = event.x
-        lastY = event.y
-        return activeHandle != Handle.NONE
+        activeHandle = hitTest(event.x, event.y); movingMedia = activeHandle == null
+        lastX = event.x; lastY = event.y; lastDistance = 0f
+        parent?.requestDisallowInterceptTouchEvent(true)
+      }
+      MotionEvent.ACTION_POINTER_DOWN -> {
+        activeHandle = null; movingMedia = true
+        lastX = (event.getX(0) + event.getX(1)) / 2; lastY = (event.getY(0) + event.getY(1)) / 2
+        lastDistance = hypot(event.getX(0) - event.getX(1), event.getY(0) - event.getY(1))
       }
       MotionEvent.ACTION_MOVE -> {
-        if (activeHandle == Handle.NONE) return false
-        val dx = event.x - lastX
-        val dy = event.y - lastY
-        lastX = event.x
-        lastY = event.y
-        applyDrag(activeHandle, dx, dy)
-        invalidate()
-        reportCrop()
-        return true
+        val multi = event.pointerCount > 1
+        val x = if (multi) (event.getX(0) + event.getX(1)) / 2 else event.x
+        val y = if (multi) (event.getY(0) + event.getY(1)) / 2 else event.y
+        val distance = if (multi) hypot(event.getX(0) - event.getX(1), event.getY(0) - event.getY(1)) else 0f
+        val handle = activeHandle
+        if (handle != null) {
+          val valid = RectF(imageBounds).apply { intersect(0f, 0f, width.toFloat(), height.toFloat()) }
+          cropRect = CropGeometry.resize(cropRect.geometry(), valid.geometry(), handle, x - lastX, y - lastY, aspectRatio, 48 * density).native()
+        } else if (movingMedia) {
+          moveMedia(x - lastX, y - lastY, if (lastDistance > 0 && distance > 0) distance / lastDistance else 1f, x, y)
+        }
+        lastX = x; lastY = y; lastDistance = distance
+        reportCrop(); invalidate()
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
-        val handled = activeHandle != Handle.NONE
-        activeHandle = Handle.NONE
-        return handled
+      MotionEvent.ACTION_POINTER_UP -> {
+        val index = if (event.actionIndex == 0) 1 else 0
+        lastX = event.getX(index); lastY = event.getY(index); lastDistance = 0f
       }
-    }
-    return super.onTouchEvent(event)
-  }
-
-  private fun hitTest(x: Float, y: Float): Handle {
-    fun near(px: Float, py: Float) = abs(x - px) < handleTouchRadius && abs(y - py) < handleTouchRadius
-    return when {
-      near(cropRect.left, cropRect.top) -> Handle.TOP_LEFT
-      near(cropRect.right, cropRect.top) -> Handle.TOP_RIGHT
-      near(cropRect.left, cropRect.bottom) -> Handle.BOTTOM_LEFT
-      near(cropRect.right, cropRect.bottom) -> Handle.BOTTOM_RIGHT
-      near(cropRect.centerX(), cropRect.top) -> Handle.TOP
-      near(cropRect.right, cropRect.centerY()) -> Handle.RIGHT
-      near(cropRect.centerX(), cropRect.bottom) -> Handle.BOTTOM
-      near(cropRect.left, cropRect.centerY()) -> Handle.LEFT
-      cropRect.contains(x, y) -> Handle.MOVE
-      else -> Handle.NONE
-    }
-  }
-
-  private fun applyDrag(handle: Handle, dx: Float, dy: Float) {
-    val proposed = RectF(cropRect)
-    when (handle) {
-      Handle.MOVE -> proposed.offset(dx, dy)
-      Handle.TOP_LEFT -> { proposed.left += dx; proposed.top += dy }
-      Handle.TOP_RIGHT -> { proposed.right += dx; proposed.top += dy }
-      Handle.BOTTOM_LEFT -> { proposed.left += dx; proposed.bottom += dy }
-      Handle.BOTTOM_RIGHT -> { proposed.right += dx; proposed.bottom += dy }
-      Handle.TOP -> proposed.top += dy
-      Handle.RIGHT -> proposed.right += dx
-      Handle.BOTTOM -> proposed.bottom += dy
-      Handle.LEFT -> proposed.left += dx
-      Handle.NONE -> return
-    }
-    if (proposed.width() < minSizePx || proposed.height() < minSizePx) return
-    aspectRatio?.let { ratio ->
-      when (handle) {
-        Handle.TOP_LEFT, Handle.BOTTOM_RIGHT -> proposed.bottom = proposed.top + proposed.width() / ratio
-        Handle.TOP_RIGHT -> proposed.top = proposed.bottom - proposed.width() / ratio
-        Handle.BOTTOM_LEFT -> proposed.bottom = proposed.top + proposed.width() / ratio
-        Handle.LEFT, Handle.RIGHT -> {
-          val centerY = cropRect.centerY(); val height = proposed.width() / ratio
-          proposed.top = centerY - height / 2; proposed.bottom = centerY + height / 2
-        }
-        Handle.TOP, Handle.BOTTOM -> {
-          val centerX = cropRect.centerX(); val width = proposed.height() * ratio
-          proposed.left = centerX - width / 2; proposed.right = centerX + width / 2
-        }
-        else -> {}
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        activeHandle = null; movingMedia = false; lastDistance = 0f
+        parent?.requestDisallowInterceptTouchEvent(false)
       }
     }
-    cropRect = proposed
-    clampToImageBounds()
+    return true
   }
 
-  private fun clampToImageBounds() {
-    if (cropRect.left < imageBounds.left) cropRect.offset(imageBounds.left - cropRect.left, 0f)
-    if (cropRect.top < imageBounds.top) cropRect.offset(0f, imageBounds.top - cropRect.top)
-    if (cropRect.right > imageBounds.right) cropRect.offset(imageBounds.right - cropRect.right, 0f)
-    if (cropRect.bottom > imageBounds.bottom) cropRect.offset(0f, imageBounds.bottom - cropRect.bottom)
-    cropRect.left = cropRect.left.coerceAtLeast(imageBounds.left)
-    cropRect.top = cropRect.top.coerceAtLeast(imageBounds.top)
-    cropRect.right = cropRect.right.coerceAtMost(imageBounds.right)
-    cropRect.bottom = cropRect.bottom.coerceAtMost(imageBounds.bottom)
+  private fun moveMedia(dx: Float, dy: Float, factor: Float, focusX: Float, focusY: Float) {
+    val minimumZoom = maxOf(1f, cropRect.width() / fittedBounds.width(), cropRect.height() / fittedBounds.height())
+    val zoom = imageBounds.width() / fittedBounds.width()
+    val scale = (zoom * factor).coerceIn(minimumZoom, maxOf(8f, minimumZoom)) / zoom
+    val w = imageBounds.width() * scale; val h = imageBounds.height() * scale
+    val left = (focusX + (imageBounds.left - focusX) * scale + dx).coerceIn(cropRect.right - w, cropRect.left)
+    val top = (focusY + (imageBounds.top - focusY) * scale + dy).coerceIn(cropRect.bottom - h, cropRect.top)
+    imageBounds = RectF(left, top, left + w, top + h)
+    onMediaBoundsChanged?.invoke(RectF(imageBounds))
+    onViewportChanged?.invoke(w / fittedBounds.width(), (imageBounds.centerX() - fittedBounds.centerX()) / fittedBounds.width(), (imageBounds.centerY() - fittedBounds.centerY()) / fittedBounds.height())
   }
 
-  private fun reportCrop() {
-    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return
-    val left = (cropRect.left - imageBounds.left) / imageBounds.width()
-    val top = (cropRect.top - imageBounds.top) / imageBounds.height()
-    val right = (cropRect.right - imageBounds.left) / imageBounds.width()
-    val bottom = (cropRect.bottom - imageBounds.top) / imageBounds.height()
-    onCropChanged?.invoke(left, top, right, bottom)
+  private fun hitTest(x: Float, y: Float): CropGeometry.Handle? {
+    val points = listOf(
+      Triple(cropRect.left, cropRect.top, CropGeometry.Handle.TOP_LEFT), Triple(cropRect.right, cropRect.top, CropGeometry.Handle.TOP_RIGHT),
+      Triple(cropRect.left, cropRect.bottom, CropGeometry.Handle.BOTTOM_LEFT), Triple(cropRect.right, cropRect.bottom, CropGeometry.Handle.BOTTOM_RIGHT),
+      Triple(cropRect.centerX(), cropRect.top, CropGeometry.Handle.TOP), Triple(cropRect.right, cropRect.centerY(), CropGeometry.Handle.RIGHT),
+      Triple(cropRect.centerX(), cropRect.bottom, CropGeometry.Handle.BOTTOM), Triple(cropRect.left, cropRect.centerY(), CropGeometry.Handle.LEFT))
+    val nearest = points.minByOrNull { hypot(x - it.first, y - it.second) } ?: return null
+    return nearest.third.takeIf { hypot(x - nearest.first, y - nearest.second) <= 24 * density }
   }
+  private fun normalized(): FloatArray = if (imageBounds.isEmpty) floatArrayOf(0f, 0f, 1f, 1f) else floatArrayOf(
+    (cropRect.left - imageBounds.left) / imageBounds.width(), (cropRect.top - imageBounds.top) / imageBounds.height(),
+    (cropRect.right - imageBounds.left) / imageBounds.width(), (cropRect.bottom - imageBounds.top) / imageBounds.height())
+  private fun reportCrop() { val r = normalized(); onCropChanged?.invoke(r[0].coerceIn(0f, 1f), r[1].coerceIn(0f, 1f), r[2].coerceIn(0f, 1f), r[3].coerceIn(0f, 1f)) }
+  private fun RectF.geometry() = CropGeometry.Rect(left, top, right, bottom)
+  private fun CropGeometry.Rect.native() = RectF(left, top, right, bottom)
 }

package/android/src/main/java/com/photovideoeditor/photo/ui/LayerOverlayView.kt

@@ -3,12 +3,13 @@ package com.photovideoeditor.photo.ui
 import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color
-import android.graphics.DashPathEffect
 import android.graphics.Paint
 import android.graphics.RectF
 import android.view.MotionEvent
 import android.view.View
 import android.text.TextPaint
+import com.photovideoeditor.R
+import com.photovideoeditor.photo.render.OverlayGeometry
 import com.photovideoeditor.photo.render.PhotoLayer
 import com.photovideoeditor.photo.render.LayerType
 import kotlin.math.atan2
@@ -27,6 +28,7 @@ class LayerOverlayView(context: Context) : View(context) {
     set(value) { field = value; invalidate() }
   var selectedLayerId: String? = null
     set(value) { field = value; invalidate() }
+  var onLayerDelete: ((String) -> Unit)? = null
   var onLayerTapped: ((String?) -> Unit)? = null
   var onLayerDoubleTapped: ((String) -> Unit)? = null
   var onLayerTransformChanged: ((id: String, x: Float, y: Float, scale: Float, rotationDegrees: Float) -> Unit)? = null
@@ -48,13 +50,10 @@ class LayerOverlayView(context: Context) : View(context) {
   private val handleRadius = 11f * density
   private val handleTouchRadius = 30f * density
   private val selectionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-    color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = 2f * density
-    pathEffect = DashPathEffect(floatArrayOf(8f * density, 5f * density), 0f)
+    color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = 1f * density
   }
   private val handlePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = Color.WHITE }
-  private val handleGlyphPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-    color = Color.rgb(87, 55, 245); style = Paint.Style.STROKE; strokeWidth = 2f * density
-  }
+
 
   fun setImageBounds(bounds: RectF) { imageBounds = RectF(bounds); invalidate() }
 
@@ -67,17 +66,36 @@ class LayerOverlayView(context: Context) : View(context) {
     canvas.translate(center.first, center.second)
     canvas.rotate(selected.rotationDegrees)
     canvas.drawRect(-half.first, -half.second, half.first, half.second, selectionPaint)
-    canvas.drawCircle(half.first, half.second, handleRadius, handlePaint)
-    val glyph = handleRadius * 0.52f
-    canvas.drawLine(half.first - glyph, half.second + glyph, half.first + glyph, half.second - glyph, handleGlyphPaint)
+    for ((x, y) in listOf(Pair(-half.first, -half.second), Pair(half.first, -half.second), Pair(-half.first, half.second), Pair(half.first, half.second))) {
+      canvas.drawCircle(x, y, 4f * density, handlePaint)
+    }
+    drawControl(canvas, -half.first, -half.second, R.drawable.ic_close, Color.rgb(255, 100, 115))
+    drawControl(canvas, half.first, half.second, R.drawable.ic_fullscreen, Color.rgb(167, 139, 250))
     canvas.restore()
   }
 
+  private fun drawControl(canvas: Canvas, x: Float, y: Float, icon: Int, tint: Int) {
+    canvas.drawCircle(x, y, handleRadius, handlePaint)
+    context.getDrawable(icon)?.mutate()?.let { drawable ->
+      drawable.setTint(tint)
+      val size = (handleRadius * 0.7f).toInt()
+      drawable.setBounds(x.toInt() - size, y.toInt() - size, x.toInt() + size, y.toInt() + size)
+      drawable.draw(canvas)
+    }
+  }
+
   override fun onTouchEvent(event: MotionEvent): Boolean {
     if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return false
     when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
         val selected = selectedLayer()
+        if (selected != null && !selected.locked) {
+          val handle = handlePoint(selected)
+          val center = centerOf(selected)
+          if (hypot(event.x - (2 * center.first - handle.first), event.y - (2 * center.second - handle.second)) <= handleTouchRadius) {
+            onLayerDelete?.invoke(selected.id); resetGesture(); return true
+          }
+        }
         val handleHit = selected?.takeIf { !it.locked && isHandleHit(it, event.x, event.y) }
         val hit = handleHit ?: hitTest(event.x, event.y)
         onLayerTapped?.invoke(hit?.id)
@@ -102,6 +120,7 @@ class LayerOverlayView(context: Context) : View(context) {
           val metrics = multiMetrics(event)
           startDistance = metrics.distance.coerceAtLeast(1f); startAngle = metrics.angle
           startMidX = metrics.midX; startMidY = metrics.midY
+          movedDuringGesture = true
           gesture = Gesture.MULTI
           return true
         }
@@ -143,7 +162,17 @@ class LayerOverlayView(context: Context) : View(context) {
         }
         finishGesture(); return true
       }
-      MotionEvent.ACTION_POINTER_UP -> return true
+      MotionEvent.ACTION_POINTER_UP -> {
+        // Rebase to the remaining finger so lifting a pinch finger does not jump/freeze the layer.
+        val remaining = if (event.actionIndex == 0) 1 else 0
+        if (remaining < event.pointerCount) {
+          startLayer = currentGestureLayer()?.copy()
+          startPointX = event.getX(remaining); startPointY = event.getY(remaining)
+          gesture = Gesture.DRAG
+        }
+        movedDuringGesture = true
+        return true
+      }
     }
     return false
   }
@@ -173,8 +202,8 @@ class LayerOverlayView(context: Context) : View(context) {
         Pair((lines.maxOfOrNull { paint.measureText(it) } ?: paint.textSize) / 2f + 8f * density, paint.fontSpacing * lines.size / 2f + 6f * density)
       }
       LayerType.STICKER -> {
-        val size = shortSide * 0.18f
-        Pair(size / 2f, size / 2f)
+        val (width, height) = OverlayGeometry.stickerSize(shortSide, layer.overlayAspectRatio ?: 1f)
+        Pair(width / 2f + 4f * density, height / 2f + 4f * density)
       }
       LayerType.OVERLAY -> {
         val aspect = layer.overlayAspectRatio ?: 1f
@@ -187,7 +216,7 @@ class LayerOverlayView(context: Context) : View(context) {
         Pair(maxX * imageBounds.width() + handleRadius, maxY * imageBounds.height() + handleRadius)
       }
     }
-    return Pair((base.first * layer.scale).coerceAtLeast(handleRadius), (base.second * layer.scale).coerceAtLeast(handleRadius))
+    return Pair((base.first * layer.scale).coerceAtLeast(24f * density), (base.second * layer.scale).coerceAtLeast(24f * density))
   }
 
   private fun handlePoint(layer: PhotoLayer): Pair<Float, Float> {

package/android/src/main/java/com/photovideoeditor/photo/ui/ZoomableImageView.kt

@@ -59,6 +59,16 @@ class ZoomableImageView(context: Context) : ImageView(context) {
     onBoundsChanged?.invoke(currentImageBounds())
   }
 
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    if (w != oldw || h != oldh) resetToFit()
+  }
+
+  fun setRenderedBounds(bounds: RectF) {
+    val image = drawable ?: return
+    imageMatrix = Matrix().apply { setRectToRect(RectF(0f, 0f, image.intrinsicWidth.toFloat(), image.intrinsicHeight.toFloat()), bounds, Matrix.ScaleToFit.FILL) }
+  }
+
   fun currentImageBounds(): RectF {
     val bitmapDrawable = drawable ?: return RectF(0f, 0f, width.toFloat(), height.toFloat())
     val rect = RectF(0f, 0f, bitmapDrawable.intrinsicWidth.toFloat(), bitmapDrawable.intrinsicHeight.toFloat())

package/android/src/main/java/com/photovideoeditor/ui/components/CropPanel.kt

@@ -0,0 +1,122 @@
+package com.photovideoeditor.ui.components
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.widget.*
+import com.photovideoeditor.R
+import com.photovideoeditor.photo.render.PhotoTransformState
+import com.photovideoeditor.ui.DesignTokens
+import kotlin.math.roundToInt
+
+/** Shared photo/video crop surface. Only UI state lives here; the controller owns the draft. */
+class CropPanel(
+  context: Context,
+  private val accent: Int,
+  surface: Int,
+  textColor: Int,
+  originalRatio: () -> Float,
+  onReset: () -> Unit,
+  onDone: () -> Unit,
+  onCancel: () -> Unit,
+  onStraighten: (Float) -> Unit,
+  onRotate: () -> Unit,
+  onRatio: (String, Float?) -> Unit
+) : LinearLayout(context) {
+  private fun dp(value: Int) = dpToPx(value, context)
+  private val valueLabel = TextView(context)
+  private val slider: SeekBar
+  private val presets = mutableMapOf<String, LinearLayout>()
+  private var syncing = false
+
+  init {
+    orientation = VERTICAL
+    setPadding(dp(12), dp(8), dp(12), dp(8))
+    background = GradientDrawable().apply {
+      setColor(surface); cornerRadii = floatArrayOf(dp(20).toFloat(), dp(20).toFloat(), dp(20).toFloat(), dp(20).toFloat(), 0f, 0f, 0f, 0f)
+    }
+    fun icon(resource: Int, label: String, action: () -> Unit) = ImageButton(context).apply {
+      setImageResource(resource); setColorFilter(textColor); contentDescription = label
+      background = roundedDrawable(Color.TRANSPARENT, 12, context)
+      setOnClickListener { action() }; applyPressScale()
+    }
+    val header = LinearLayout(context).apply { gravity = Gravity.CENTER_VERTICAL }
+    val reset = LinearLayout(context).apply {
+      gravity = Gravity.CENTER_VERTICAL; isClickable = true; contentDescription = "Reset crop"
+      addView(ImageView(context).apply { setImageResource(R.drawable.ic_undo); setColorFilter(textColor) }, LayoutParams(dp(20), dp(20)))
+      addView(TextView(context).apply { text = "Reset"; textSize = 13f; setTextColor(textColor); setPadding(dp(6), 0, 0, 0) })
+      setOnClickListener { onReset() }; applyPressScale()
+    }
+    header.addView(reset, LayoutParams(dp(88), dp(48)))
+    header.addView(TextView(context).apply { text = "Crop"; textSize = 17f; gravity = Gravity.CENTER; setTextColor(textColor); setTypeface(typeface, 1) }, LayoutParams(0, dp(48), 1f))
+    header.addView(icon(R.drawable.ic_close, "Cancel crop", onCancel), LayoutParams(dp(44), dp(48)))
+    header.addView(icon(R.drawable.ic_check, "Apply crop", onDone).apply { setColorFilter(accent) }, LayoutParams(dp(44), dp(48)))
+    addView(header)
+    val labels = LinearLayout(context).apply { gravity = Gravity.CENTER_VERTICAL }
+    labels.addView(TextView(context).apply { text = "Straighten"; textSize = 13f; setTextColor(textColor) }, LayoutParams(0, dp(44), 1f))
+    valueLabel.setTextColor(accent); valueLabel.textSize = 13f; valueLabel.gravity = Gravity.CENTER
+    labels.addView(valueLabel, LayoutParams(dp(56), dp(44)))
+    labels.addView(icon(R.drawable.ic_undo, "Reset straighten") { onStraighten(0f) }, LayoutParams(dp(44), dp(44)))
+    labels.addView(icon(R.drawable.ic_rotate_right, "Rotate 90 degrees", onRotate), LayoutParams(dp(44), dp(44)))
+    addView(labels)
+    slider = object : SeekBar(context) {
+      private val tick = Paint(Paint.ANTI_ALIAS_FLAG).apply { strokeWidth = resources.displayMetrics.density; color = DesignTokens.outline }
+      override fun onDraw(canvas: Canvas) {
+        val start = paddingLeft.toFloat(); val end = width - paddingRight.toFloat()
+        for (i in 0..90) {
+          val x = start + (end - start) * i / 90
+          tick.alpha = if (i % 5 == 0) 160 else 65
+          canvas.drawLine(x, 6f, x, if (i % 5 == 0) dp(12).toFloat() else dp(7).toFloat(), tick)
+        }
+        super.onDraw(canvas)
+      }
+    }.apply {
+      max = 900; progress = 450; contentDescription = "Straighten, minus 45 to plus 45 degrees"
+      progressTintList = android.content.res.ColorStateList.valueOf(accent); thumbTintList = progressTintList
+      setPadding(dp(12), dp(12), dp(12), 0)
+      setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
+        override fun onProgressChanged(bar: SeekBar?, progress: Int, fromUser: Boolean) { if (fromUser && !syncing) onStraighten((progress - 450) / 10f) }
+        override fun onStartTrackingTouch(bar: SeekBar?) {}
+        override fun onStopTrackingTouch(bar: SeekBar?) {}
+      })
+    }
+    addView(slider, LayoutParams(LayoutParams.MATCH_PARENT, dp(48)))
+    val rail = LinearLayout(context).apply { gravity = Gravity.CENTER_VERTICAL }
+    val ratios = listOf("Free" to null, "Original" to null, "1:1" to 1f, "9:16" to 9f / 16, "16:9" to 16f / 9, "10:16" to 10f / 16, "16:10" to 16f / 10, "4:5" to 4f / 5, "5:4" to 5f / 4, "3:4" to 3f / 4, "4:3" to 4f / 3)
+    ratios.forEach { (name, ratio) ->
+      val tile = LinearLayout(context).apply {
+        orientation = VERTICAL; gravity = Gravity.CENTER; isClickable = true; isFocusable = true; contentDescription = "$name crop ratio"
+        addView(object : android.view.View(context) {
+          val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.STROKE; strokeWidth = dp(1).toFloat(); color = textColor }
+          override fun onDraw(canvas: Canvas) {
+            paint.color = if (this@apply.isSelected) accent else textColor
+            val aspect = if (name == "Original") originalRatio() else ratio ?: 1.25f
+            val w = minOf(dp(24).toFloat(), dp(24) * aspect); val h = w / aspect
+            canvas.drawRoundRect((width-w)/2, (height-h)/2, (width+w)/2, (height+h)/2, dp(2).toFloat(), dp(2).toFloat(), paint)
+          }
+        }, LayoutParams(dp(40), dp(38)))
+        addView(TextView(context).apply { text = name; textSize = 11f; gravity = Gravity.CENTER; setTextColor(textColor) })
+        setOnClickListener { onRatio(name, if (name == "Original") originalRatio() else ratio) }; applyPressScale()
+      }
+      presets[name] = tile
+      rail.addView(tile, LayoutParams(dp(64), dp(68)))
+    }
+    addView(HorizontalScrollView(context).apply { isHorizontalScrollBarEnabled = false; addView(rail) }, LayoutParams(LayoutParams.MATCH_PARENT, dp(72)))
+  }
+
+  fun sync(state: PhotoTransformState) {
+    syncing = true
+    slider.progress = (state.straightenDegrees * 10 + 450).roundToInt()
+    valueLabel.text = String.format(java.util.Locale.US, "%.1f°", state.straightenDegrees)
+    presets.forEach { (name, tile) ->
+      tile.isSelected = name == state.aspectPreset
+      tile.background = roundedDrawable(if (tile.isSelected) (accent and 0x00FFFFFF) or 0x22000000 else Color.TRANSPARENT, 12, context)
+      (tile.getChildAt(1) as TextView).setTextColor(if (tile.isSelected) accent else DesignTokens.textSecondary)
+      tile.getChildAt(0).invalidate()
+    }
+    syncing = false
+  }
+}