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

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

@@ -7,162 +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_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()
+  }
+
+  fun setCrop(left: Float, top: Float, right: Float, bottom: Float) {
+    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.right to cropRect.top,
-      cropRect.left to cropRect.bottom,
-      cropRect.right to cropRect.bottom
-    ).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
-      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.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
-        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/DrawOverlayView.kt

@@ -0,0 +1,66 @@
+package com.photovideoeditor.photo.ui
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+
+data class DrawStroke(val points: MutableList<Pair<Float, Float>>, val color: Int, val widthPx: Float)
+
+/** Captures freehand strokes over the visible image while Draw mode is active. */
+class DrawOverlayView(context: Context) : View(context) {
+  private var imageBounds = RectF()
+  var strokeColor: Int = Color.RED
+  var strokeWidthPx: Float = 12f
+  private val strokes = mutableListOf<DrawStroke>()
+  private var current: DrawStroke? = null
+  var onStrokesChanged: ((List<DrawStroke>) -> Unit)? = null
+  private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.STROKE
+    strokeCap = Paint.Cap.ROUND
+    strokeJoin = Paint.Join.ROUND
+  }
+
+  fun setImageBounds(bounds: RectF) { imageBounds = RectF(bounds) }
+  fun clearStrokes() { strokes.clear(); current = null; invalidate(); onStrokesChanged?.invoke(strokes) }
+  fun undoLastStroke() { if (strokes.isNotEmpty()) strokes.removeAt(strokes.lastIndex); invalidate(); onStrokesChanged?.invoke(strokes) }
+  val hasStrokes: Boolean get() = strokes.isNotEmpty()
+
+  fun normalizedStrokes(): List<Pair<List<Pair<Float, Float>>, DrawStroke>> {
+    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return emptyList()
+    return strokes.map { stroke ->
+      stroke.points.map { (x, y) ->
+        (x - imageBounds.left) / imageBounds.width() to (y - imageBounds.top) / imageBounds.height()
+      } to stroke
+    }
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    strokes.forEach { stroke ->
+      if (stroke.points.size < 2) return@forEach
+      paint.color = stroke.color; paint.strokeWidth = stroke.widthPx
+      val path = Path()
+      stroke.points.forEachIndexed { index, point -> if (index == 0) path.moveTo(point.first, point.second) else path.lineTo(point.first, point.second) }
+      canvas.drawPath(path, paint)
+    }
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (!imageBounds.contains(event.x, event.y) && event.actionMasked == MotionEvent.ACTION_DOWN) return false
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        current = DrawStroke(mutableListOf(event.x to event.y), strokeColor, strokeWidthPx).also(strokes::add)
+        parent?.requestDisallowInterceptTouchEvent(true); invalidate(); return true
+      }
+      MotionEvent.ACTION_MOVE -> { current?.points?.add(event.x to event.y); invalidate(); return true }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        current = null; parent?.requestDisallowInterceptTouchEvent(false); onStrokesChanged?.invoke(strokes); return true
+      }
+    }
+    return false
+  }
+}

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,7 +28,9 @@ 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
   var onLayerTransformEnded: ((id: String) -> Unit)? = null
 
@@ -40,17 +43,17 @@ class LayerOverlayView(context: Context) : View(context) {
   private var startAngle = 0f
   private var startMidX = 0f
   private var startMidY = 0f
+  private var movedDuringGesture = false
+  private var lastTapTimeMs = 0L
+  private var lastTapLayerId: String? = null
   private val density = resources.displayMetrics.density
   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() }
 
@@ -63,22 +66,42 @@ 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)
         if (hit == null || hit.locked) { resetGesture(); return false }
         gestureId = hit.id
+        movedDuringGesture = false
         startLayer = hit.copy()
         startPointX = event.x; startPointY = event.y
         if (handleHit != null) {
@@ -97,12 +120,14 @@ 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
         }
       }
       MotionEvent.ACTION_MOVE -> {
         val initial = startLayer ?: return false
+        if (hypot(event.x - startPointX, event.y - startPointY) > handleRadius) movedDuringGesture = true
         when (gesture) {
           Gesture.DRAG -> {
             val x = (initial.x + (event.x - startPointX) / imageBounds.width()).coerceIn(0f, 1f)
@@ -127,8 +152,27 @@ class LayerOverlayView(context: Context) : View(context) {
         }
         return true
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { finishGesture(); return true }
-      MotionEvent.ACTION_POINTER_UP -> return true
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        val tappedId = gestureId
+        if (event.actionMasked == MotionEvent.ACTION_UP && !movedDuringGesture && tappedId != null) {
+          val now = android.os.SystemClock.uptimeMillis()
+          if (lastTapLayerId == tappedId && now - lastTapTimeMs <= 350L) {
+            onLayerDoubleTapped?.invoke(tappedId); lastTapLayerId = null; lastTapTimeMs = 0L
+          } else { lastTapLayerId = tappedId; lastTapTimeMs = now }
+        }
+        finishGesture(); 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
   }
@@ -158,16 +202,21 @@ 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
         val baseSize = shortSide * 0.6f
         if (aspect >= 1f) Pair(baseSize / 2f, (baseSize / aspect) / 2f) else Pair((baseSize * aspect) / 2f, baseSize / 2f)
       }
+      LayerType.DRAWING -> {
+        val maxX = layer.drawPoints.maxOfOrNull { kotlin.math.abs(it.first) } ?: 0.08f
+        val maxY = layer.drawPoints.maxOfOrNull { kotlin.math.abs(it.second) } ?: 0.08f
+        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())