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

package/ios/Photo/Rendering/PhotoFilterPresets.swift

@@ -1,9 +1,11 @@
 import Foundation
 
-/// A small set of original, neutrally named preset filters (no third-party
-/// looks or names copied). Each recipe is applied by the renderer as:
-/// 1) set saturation, 2) scale RGB, 3) add the per-channel offset —
-/// mirroring the matrices in `PhotoFilterPresets.kt`.
+/// Original, neutrally named preset filters (no third-party looks or names copied).
+///
+/// Every preset is expressed as the same four knobs the renderer already supports, so a preset can
+/// never be a button that does nothing: 1) set saturation, 2) scale RGB, 3) add the per-channel
+/// offset. `PhotoFilterPresets.kt` mirrors this table field-for-field — add presets to both or
+/// neither, or the two platforms will render different looks for the same id.
 struct PhotoFilterRecipe {
   let scale: Double
   let redOffset: Double
@@ -13,33 +15,61 @@ struct PhotoFilterRecipe {
 }
 
 enum PhotoFilterPresets {
-  static let presetIDs = ["mono", "noir", "fade", "chrome", "warmth"]
+  /// Display order in the carousel. "Original" (no preset) is prepended by the UI, not listed here.
+  static let presetIDs = [
+    "vivid", "vividWarm", "vividCool",
+    "warmth", "cool",
+    "natural", "soft", "fade",
+    "mono", "noir", "silvertone",
+    "vintage", "sepia", "retro",
+    "dramatic", "dramaticWarm", "dramaticCool",
+  ]
+
+  private static let recipes: [String: PhotoFilterRecipe] = [
+    "vivid": PhotoFilterRecipe(scale: 1.05, redOffset: 0, greenOffset: 0, blueOffset: 0, saturation: 1.45),
+    "vividWarm": PhotoFilterRecipe(scale: 1.05, redOffset: 12, greenOffset: 4, blueOffset: -10, saturation: 1.45),
+    "vividCool": PhotoFilterRecipe(scale: 1.05, redOffset: -8, greenOffset: 0, blueOffset: 14, saturation: 1.45),
+    "warmth": PhotoFilterRecipe(scale: 1, redOffset: 18, greenOffset: 6, blueOffset: -12, saturation: 1.05),
+    "cool": PhotoFilterRecipe(scale: 1, redOffset: -12, greenOffset: 0, blueOffset: 18, saturation: 1.05),
+    "natural": PhotoFilterRecipe(scale: 1.02, redOffset: 2, greenOffset: 2, blueOffset: 0, saturation: 1.15),
+    "soft": PhotoFilterRecipe(scale: 0.96, redOffset: 14, greenOffset: 12, blueOffset: 12, saturation: 0.9),
+    "fade": PhotoFilterRecipe(scale: 0.9, redOffset: 25, greenOffset: 25, blueOffset: 25, saturation: 1),
+    "mono": PhotoFilterRecipe(scale: 1, redOffset: 0, greenOffset: 0, blueOffset: 0, saturation: 0),
+    "noir": PhotoFilterRecipe(scale: 1.3, redOffset: -40, greenOffset: -40, blueOffset: -40, saturation: 0),
+    "silvertone": PhotoFilterRecipe(scale: 1.1, redOffset: -6, greenOffset: -2, blueOffset: 10, saturation: 0),
+    "vintage": PhotoFilterRecipe(scale: 0.95, redOffset: 24, greenOffset: 12, blueOffset: -6, saturation: 0.6),
+    "sepia": PhotoFilterRecipe(scale: 1, redOffset: 38, greenOffset: 20, blueOffset: -14, saturation: 0),
+    "retro": PhotoFilterRecipe(scale: 0.92, redOffset: 20, greenOffset: 6, blueOffset: 14, saturation: 0.75),
+    "dramatic": PhotoFilterRecipe(scale: 1.25, redOffset: -28, greenOffset: -28, blueOffset: -28, saturation: 1.2),
+    "dramaticWarm": PhotoFilterRecipe(scale: 1.25, redOffset: -14, greenOffset: -26, blueOffset: -38, saturation: 1.2),
+    "dramaticCool": PhotoFilterRecipe(scale: 1.25, redOffset: -38, greenOffset: -28, blueOffset: -12, saturation: 1.2),
+    // Retained so photos saved with an earlier preset id still render; not offered in the carousel.
+    "chrome": PhotoFilterRecipe(scale: 1.1, redOffset: 0, greenOffset: 0, blueOffset: 0, saturation: 1.4),
+  ]
 
   static func label(for id: String) -> String {
     switch id {
+    case "vivid": return "Vivid"
+    case "vividWarm": return "Vivid Warm"
+    case "vividCool": return "Vivid Cool"
+    case "warmth": return "Warm"
+    case "cool": return "Cool"
+    case "natural": return "Natural"
+    case "soft": return "Soft"
+    case "fade": return "Fade"
     case "mono": return "Mono"
     case "noir": return "Noir"
-    case "fade": return "Fade"
+    case "silvertone": return "Silvertone"
+    case "vintage": return "Vintage"
+    case "sepia": return "Sepia"
+    case "retro": return "Retro"
+    case "dramatic": return "Dramatic"
+    case "dramaticWarm": return "Dramatic Warm"
+    case "dramaticCool": return "Dramatic Cool"
     case "chrome": return "Chrome"
-    case "warmth": return "Warmth"
     default: return id
     }
   }
 
-  static func recipe(for id: String) -> PhotoFilterRecipe? {
-    switch id {
-    case "mono":
-      return PhotoFilterRecipe(scale: 1, redOffset: 0, greenOffset: 0, blueOffset: 0, saturation: 0)
-    case "noir":
-      return PhotoFilterRecipe(scale: 1.3, redOffset: -40, greenOffset: -40, blueOffset: -40, saturation: 0)
-    case "fade":
-      return PhotoFilterRecipe(scale: 0.9, redOffset: 25, greenOffset: 25, blueOffset: 25, saturation: 1)
-    case "chrome":
-      return PhotoFilterRecipe(scale: 1.1, redOffset: 0, greenOffset: 0, blueOffset: 0, saturation: 1.4)
-    case "warmth":
-      return PhotoFilterRecipe(scale: 1, redOffset: 18, greenOffset: 6, blueOffset: -12, saturation: 1)
-    default:
-      return nil
-    }
-  }
+  static func recipe(for id: String) -> PhotoFilterRecipe? { recipes[id] }
 }

package/ios/Photo/Rendering/PhotoLayer.swift

@@ -11,7 +11,7 @@ enum LayerType {
 ///
 /// `x`/`y` are the layer's center, normalized 0..1 against the image.
 struct PhotoLayer {
-  let id: String
+  var id: String
   var type: LayerType
   var x: CGFloat = 0.5
   var y: CGFloat = 0.5
@@ -44,6 +44,14 @@ struct PhotoLayer {
     self.type = type
   }
 
+  func duplicated() -> PhotoLayer {
+    var copy = self
+    copy.id = UUID().uuidString
+    copy.x = min(max(x + 0.04, 0), 1)
+    copy.y = min(max(y + 0.04, 0), 1)
+    return copy
+  }
+
   /// True if this layer should be visible at `positionMs` against a video of `durationMs`. Always true for photo layers.
   func effectiveEndMs(durationMs: Int64) -> Int64 {
     (endMs > 0 && endMs <= durationMs) ? endMs : durationMs

package/ios/Photo/Rendering/PhotoLayerRenderer.swift

@@ -54,8 +54,9 @@ enum PhotoLayerRenderer {
 
   private static func drawSticker(_ layer: PhotoLayer, shortSide: CGFloat, resolver: (String) -> UIImage?) {
     let size = shortSide * 0.18
-    let rect = CGRect(x: -size / 2, y: -size / 2, width: size, height: size)
     if let uri = layer.stickerUri, let image = resolver(uri) {
+      let aspect = layer.overlayAspectRatio.flatMap { $0 > 0 ? $0 : nil } ?? (image.size.width / max(image.size.height, 1))
+      let rect = CGRect(x: -size / 2, y: -size / (2 * aspect), width: size, height: size / aspect)
       image.draw(in: rect, blendMode: .normal, alpha: layer.opacity)
       return
     }

package/ios/Photo/Rendering/PhotoTransformState.swift

@@ -12,6 +12,11 @@ struct PhotoTransformState: Equatable {
   var rotationDegrees: Int = 0
   var straightenDegrees: CGFloat = 0
   var aspectRatio: CGFloat?
+  var aspectPreset = "Free"
+  // Zoom/pan are viewport metadata; normalized crop coordinates already encode them for export.
+  var zoom: CGFloat = 1
+  var panX: CGFloat = 0
+  var panY: CGFloat = 0
 
   var isIdentity: Bool {
     cropLeft == 0 && cropTop == 0 && cropRight == 1 && cropBottom == 1 &&

package/ios/Photo/UI/CropOverlayView.swift

@@ -1,198 +1,125 @@
 import UIKit
 
-/// 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`.
+/// Handle gestures resize the box; interior gestures pan/pinch the media, keeping the box fixed.
 final class CropOverlayView: UIView {
-  var onCropChanged: ((_ left: CGFloat, _ top: CGFloat, _ right: CGFloat, _ bottom: CGFloat) -> Void)?
-
-  private var imageBounds: CGRect = .zero
-  private var cropRect: CGRect = .zero
+  var onCropChanged: ((CGFloat, CGFloat, CGFloat, CGFloat) -> Void)?
+  var onMediaBoundsChanged: ((CGRect) -> Void)?
+  var onViewportChanged: ((CGFloat, CGFloat, CGFloat) -> Void)?
+  private var imageBounds = CGRect.zero, fittedBounds = CGRect.zero, cropRect = CGRect.zero
   private var aspectRatio: CGFloat?
-
-  private let dimLayer = CAShapeLayer()
-  private let borderLayer = CAShapeLayer()
-  private let handlesLayer = CAShapeLayer()
-  private let handleRadius: CGFloat = 32
-  private let minSize: CGFloat = 60
-
-  private enum Handle { case move, top, right, bottom, left, topLeft, topRight, bottomLeft, bottomRight }
-  private var activeHandle: Handle?
-  private var lastPoint: CGPoint = .zero
+  private var activeHandle: CropGeometry.Handle?
+  private var primary: UITouch?, secondary: UITouch?
+  private var lastPoint = CGPoint.zero
+  private var lastDistance: CGFloat = 0
 
   override init(frame: CGRect) {
-    super.init(frame: frame)
-    backgroundColor = .clear
-    dimLayer.fillRule = .evenOdd
-    dimLayer.fillColor = UIColor.black.withAlphaComponent(0.6).cgColor
-    layer.addSublayer(dimLayer)
-    borderLayer.strokeColor = UIColor.white.cgColor
-    borderLayer.fillColor = UIColor.clear.cgColor
-    borderLayer.lineWidth = 2
-    layer.addSublayer(borderLayer)
-    handlesLayer.fillColor = UIColor.white.cgColor
-    layer.addSublayer(handlesLayer)
+    super.init(frame: frame); backgroundColor = .clear; isOpaque = false; isMultipleTouchEnabled = true
   }
-
   required init?(coder: NSCoder) { nil }
 
-  /// Sets the on-screen image rect this overlay crops against. Resets the crop to full-frame when `resetCrop` is true.
+  func restore(bounds: CGRect, state: PhotoTransformState) {
+    guard bounds.width > 0, bounds.height > 0 else { return }
+    fittedBounds = bounds
+    let zoom = max(1, min(8, state.zoom))
+    let cx = bounds.midX + state.panX*bounds.width, cy = bounds.midY + state.panY*bounds.height
+    imageBounds = CGRect(x: cx-bounds.width*zoom/2, y: cy-bounds.height*zoom/2, width: bounds.width*zoom, height: bounds.height*zoom)
+    aspectRatio = state.aspectRatio
+    setCrop(left: state.cropLeft, top: state.cropTop, right: state.cropRight, bottom: state.cropBottom)
+    onMediaBoundsChanged?(imageBounds)
+  }
   func setImageBounds(_ bounds: CGRect, resetCrop: Bool) {
-    imageBounds = bounds
-    if resetCrop || cropRect.width <= 0 || cropRect.height <= 0 {
-      cropRect = bounds
-      reportCrop()
-    }
-    setNeedsLayout()
+    let old = normalized()
+    imageBounds = bounds; fittedBounds = bounds
+    if resetCrop || cropRect.isEmpty { cropRect = bounds }
+    else { setCrop(left: old.minX, top: old.minY, right: old.maxX, bottom: old.maxY) }
+    setNeedsDisplay()
   }
-
-  /// Restores a normalized crop rectangle, used when reopening or cancelling crop mode.
   func setCrop(left: CGFloat, top: CGFloat, right: CGFloat, bottom: CGFloat) {
-    guard imageBounds.width > 0, imageBounds.height > 0 else { return }
-    cropRect = CGRect(
-      x: imageBounds.minX + left * imageBounds.width,
-      y: imageBounds.minY + top * imageBounds.height,
-      width: (right - left) * imageBounds.width,
-      height: (bottom - top) * imageBounds.height
-    )
-    clampToImageBounds(); setNeedsLayout()
+    cropRect = CGRect(x: imageBounds.minX+left*imageBounds.width, y: imageBounds.minY+top*imageBounds.height,
+      width: (right-left)*imageBounds.width, height: (bottom-top)*imageBounds.height)
+    setNeedsDisplay()
   }
-
   func setAspectRatio(_ ratio: CGFloat?) {
     aspectRatio = ratio
-    if let ratio, imageBounds.width > 0, imageBounds.height > 0 {
-      let center = CGPoint(x: cropRect.midX, y: cropRect.midY)
-      var width = cropRect.width
-      var height = width / ratio
-      if height > imageBounds.height {
-        height = cropRect.height
-        width = height * ratio
-      }
-      cropRect = CGRect(x: center.x - width / 2, y: center.y - height / 2, width: width, height: height)
-      clampToImageBounds()
-      setNeedsLayout()
-    }
-    reportCrop()
+    cropRect = CropGeometry.fit(imageBounds.intersection(bounds), ratio: ratio)
+    reportCrop(); setNeedsDisplay()
   }
 
-  override func layoutSublayers(of layer: CALayer) {
-    super.layoutSublayers(of: layer)
-    guard imageBounds.width > 0, imageBounds.height > 0 else { return }
-    let outerPath = UIBezierPath(rect: imageBounds)
-    outerPath.append(UIBezierPath(rect: cropRect).reversing())
-    dimLayer.path = outerPath.cgPath
-
-    let borderPath = UIBezierPath(rect: cropRect)
-    let thirdWidth = cropRect.width / 3
-    let thirdHeight = cropRect.height / 3
-    for index in 1...2 {
-      let x = cropRect.minX + thirdWidth * CGFloat(index)
-      borderPath.move(to: CGPoint(x: x, y: cropRect.minY))
-      borderPath.addLine(to: CGPoint(x: x, y: cropRect.maxY))
-      let y = cropRect.minY + thirdHeight * CGFloat(index)
-      borderPath.move(to: CGPoint(x: cropRect.minX, y: y))
-      borderPath.addLine(to: CGPoint(x: cropRect.maxX, y: y))
+  override func draw(_ rect: CGRect) {
+    guard !cropRect.isEmpty, let context = UIGraphicsGetCurrentContext() else { return }
+    let shade = UIBezierPath(rect: bounds); shade.append(UIBezierPath(rect: cropRect)); shade.usesEvenOddFillRule = true
+    UIColor.black.withAlphaComponent(0.65).setFill(); shade.fill()
+    context.setStrokeColor(UIColor.white.cgColor); context.setLineWidth(1); context.stroke(cropRect)
+    context.setStrokeColor(UIColor.white.withAlphaComponent(0.33).cgColor); context.setLineWidth(0.5)
+    for i in 1...2 {
+      let x = cropRect.minX+cropRect.width*CGFloat(i)/3, y = cropRect.minY+cropRect.height*CGFloat(i)/3
+      context.move(to: CGPoint(x:x,y:cropRect.minY)); context.addLine(to:CGPoint(x:x,y:cropRect.maxY))
+      context.move(to: CGPoint(x:cropRect.minX,y:y)); context.addLine(to:CGPoint(x:cropRect.maxX,y:y))
     }
-    borderLayer.path = borderPath.cgPath
-
-    let handlesPath = UIBezierPath()
-    let points = [
-      CGPoint(x: cropRect.minX, y: cropRect.minY), CGPoint(x: cropRect.midX, y: cropRect.minY),
-      CGPoint(x: cropRect.maxX, y: cropRect.minY), CGPoint(x: cropRect.maxX, y: cropRect.midY),
-      CGPoint(x: cropRect.maxX, y: cropRect.maxY), CGPoint(x: cropRect.midX, y: cropRect.maxY),
-      CGPoint(x: cropRect.minX, y: cropRect.maxY), CGPoint(x: cropRect.minX, y: cropRect.midY),
-    ]
-    points.forEach { point in handlesPath.append(UIBezierPath(ovalIn: CGRect(x: point.x - 4, y: point.y - 4, width: 8, height: 8))) }
-    handlesLayer.path = handlesPath.cgPath
+    context.strokePath(); context.setStrokeColor(UIColor.white.cgColor); context.setLineWidth(3); context.setLineCap(.round)
+    for x in [cropRect.minX,cropRect.maxX] {
+      for y in [cropRect.minY,cropRect.maxY] {
+        context.move(to: CGPoint(x:x+(x == cropRect.minX ? 14 : -14),y:y)); context.addLine(to:CGPoint(x:x,y:y))
+        context.addLine(to: CGPoint(x:x,y:y+(y == cropRect.minY ? 14 : -14)))
+      }
+    }
+    for y in [cropRect.minY,cropRect.maxY] { context.move(to:CGPoint(x:cropRect.midX-8,y:y)); context.addLine(to:CGPoint(x:cropRect.midX+8,y:y)) }
+    for x in [cropRect.minX,cropRect.maxX] { context.move(to:CGPoint(x:x,y:cropRect.midY-8)); context.addLine(to:CGPoint(x:x,y:cropRect.midY+8)) }
+    context.strokePath()
   }
 
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
-    guard let point = touches.first?.location(in: self) else { return }
-    activeHandle = hitTest(point)
-    lastPoint = point
+    for touch in touches { if primary == nil { primary = touch } else if secondary == nil { secondary = touch } }
+    guard let primary else { return }
+    if secondary != nil { activeHandle = nil } else { activeHandle = hitHandle(primary.location(in:self)) }
+    let metrics = touchMetrics(); lastPoint = metrics.0; lastDistance = metrics.1
   }
-
   override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
-    guard let handle = activeHandle, let point = touches.first?.location(in: self) else { return }
-    let dx = point.x - lastPoint.x
-    let dy = point.y - lastPoint.y
-    lastPoint = point
-    applyDrag(handle, dx: dx, dy: dy)
-    setNeedsLayout()
-    reportCrop()
-  }
-
-  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { activeHandle = nil }
-  override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { activeHandle = nil }
-
-  private func hitTest(_ point: CGPoint) -> Handle? {
-    func near(_ target: CGPoint) -> Bool {
-      abs(point.x - target.x) < handleRadius && abs(point.y - target.y) < handleRadius
+    guard primary != nil, imageBounds.width > 0 else { return }
+    let (point,distance) = touchMetrics(), dx = point.x-lastPoint.x, dy = point.y-lastPoint.y
+    if let activeHandle {
+      cropRect = CropGeometry.resize(cropRect, bounds: imageBounds.intersection(bounds), handle: activeHandle, dx: dx, dy: dy, ratio: aspectRatio, minimum: 48)
+    } else {
+      moveMedia(dx:dx,dy:dy,factor:lastDistance > 0 && distance > 0 ? distance/lastDistance : 1,focus:point)
     }
-    if near(CGPoint(x: cropRect.minX, y: cropRect.minY)) { return .topLeft }
-    if near(CGPoint(x: cropRect.maxX, y: cropRect.minY)) { return .topRight }
-    if near(CGPoint(x: cropRect.minX, y: cropRect.maxY)) { return .bottomLeft }
-    if near(CGPoint(x: cropRect.maxX, y: cropRect.maxY)) { return .bottomRight }
-    if near(CGPoint(x: cropRect.midX, y: cropRect.minY)) { return .top }
-    if near(CGPoint(x: cropRect.maxX, y: cropRect.midY)) { return .right }
-    if near(CGPoint(x: cropRect.midX, y: cropRect.maxY)) { return .bottom }
-    if near(CGPoint(x: cropRect.minX, y: cropRect.midY)) { return .left }
-    if cropRect.contains(point) { return .move }
-    return nil
+    lastPoint = point; lastDistance = distance; reportCrop(); setNeedsDisplay()
   }
-
-  private func applyDrag(_ handle: Handle, dx: CGFloat, dy: CGFloat) {
-    var rect = cropRect
-    switch handle {
-    case .move:
-      rect = rect.offsetBy(dx: dx, dy: dy)
-    case .topLeft:
-      rect = CGRect(x: rect.minX + dx, y: rect.minY + dy, width: rect.width - dx, height: rect.height - dy)
-    case .topRight:
-      rect = CGRect(x: rect.minX, y: rect.minY + dy, width: rect.width + dx, height: rect.height - dy)
-    case .bottomLeft:
-      rect = CGRect(x: rect.minX + dx, y: rect.minY, width: rect.width - dx, height: rect.height + dy)
-    case .bottomRight:
-      rect = CGRect(x: rect.minX, y: rect.minY, width: rect.width + dx, height: rect.height + dy)
-    case .top: rect = CGRect(x: rect.minX, y: rect.minY + dy, width: rect.width, height: rect.height - dy)
-    case .right: rect.size.width += dx
-    case .bottom: rect.size.height += dy
-    case .left: rect = CGRect(x: rect.minX + dx, y: rect.minY, width: rect.width - dx, height: rect.height)
-    }
-    guard rect.width >= minSize, rect.height >= minSize else { return }
-    if let ratio = aspectRatio {
-      switch handle {
-      case .topLeft, .bottomLeft, .bottomRight:
-        rect.size.height = rect.width / ratio
-      case .topRight:
-        let newHeight = rect.width / ratio
-        rect.origin.y = cropRect.maxY - newHeight
-        rect.size.height = newHeight
-      case .move:
-        break
-      case .left, .right:
-        let centerY = cropRect.midY; rect.size.height = rect.width / ratio; rect.origin.y = centerY - rect.height / 2
-      case .top, .bottom:
-        let centerX = cropRect.midX; rect.size.width = rect.height * ratio; rect.origin.x = centerX - rect.width / 2
-      }
-    }
-    cropRect = rect
-    clampToImageBounds()
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+    if let secondary, touches.contains(secondary) { self.secondary = nil }
+    if let primary, touches.contains(primary) { self.primary = secondary; secondary = nil }
+    let metrics = touchMetrics(); lastPoint = metrics.0; lastDistance = metrics.1
+    if primary == nil { activeHandle = nil }
   }
-
-  private func clampToImageBounds() {
-    if cropRect.minX < imageBounds.minX { cropRect.origin.x = imageBounds.minX }
-    if cropRect.minY < imageBounds.minY { cropRect.origin.y = imageBounds.minY }
-    if cropRect.maxX > imageBounds.maxX { cropRect.origin.x = imageBounds.maxX - cropRect.width }
-    if cropRect.maxY > imageBounds.maxY { cropRect.origin.y = imageBounds.maxY - cropRect.height }
+  override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { primary = nil; secondary = nil; activeHandle = nil }
+
+  private func moveMedia(dx:CGFloat,dy:CGFloat,factor:CGFloat,focus:CGPoint) {
+    let minimum = max(1,max(cropRect.width/fittedBounds.width,cropRect.height/fittedBounds.height))
+    let zoom = imageBounds.width/fittedBounds.width
+    let scale = max(minimum,min(max(8,minimum),zoom*factor))/zoom
+    let w = imageBounds.width*scale, h = imageBounds.height*scale
+    let x = max(cropRect.maxX-w,min(cropRect.minX,focus.x+(imageBounds.minX-focus.x)*scale+dx))
+    let y = max(cropRect.maxY-h,min(cropRect.minY,focus.y+(imageBounds.minY-focus.y)*scale+dy))
+    imageBounds = CGRect(x:x,y:y,width:w,height:h)
+    onMediaBoundsChanged?(imageBounds)
+    onViewportChanged?(w/fittedBounds.width,(imageBounds.midX-fittedBounds.midX)/fittedBounds.width,(imageBounds.midY-fittedBounds.midY)/fittedBounds.height)
   }
-
-  private func reportCrop() {
-    guard imageBounds.width > 0, imageBounds.height > 0 else { return }
-    let left = (cropRect.minX - imageBounds.minX) / imageBounds.width
-    let top = (cropRect.minY - imageBounds.minY) / imageBounds.height
-    let right = (cropRect.maxX - imageBounds.minX) / imageBounds.width
-    let bottom = (cropRect.maxY - imageBounds.minY) / imageBounds.height
-    onCropChanged?(left, top, right, bottom)
+  private func touchMetrics() -> (CGPoint,CGFloat) {
+    guard let a = primary?.location(in:self) else { return (.zero,0) }
+    guard let b = secondary?.location(in:self) else { return (a,0) }
+    return (CGPoint(x:(a.x+b.x)/2,y:(a.y+b.y)/2),hypot(a.x-b.x,a.y-b.y))
+  }
+  private func hitHandle(_ p:CGPoint) -> CropGeometry.Handle? {
+    let points: [(CGPoint,CropGeometry.Handle)] = [
+      (CGPoint(x:cropRect.minX,y:cropRect.minY),.topLeft),(CGPoint(x:cropRect.maxX,y:cropRect.minY),.topRight),
+      (CGPoint(x:cropRect.minX,y:cropRect.maxY),.bottomLeft),(CGPoint(x:cropRect.maxX,y:cropRect.maxY),.bottomRight),
+      (CGPoint(x:cropRect.midX,y:cropRect.minY),.top),(CGPoint(x:cropRect.maxX,y:cropRect.midY),.right),
+      (CGPoint(x:cropRect.midX,y:cropRect.maxY),.bottom),(CGPoint(x:cropRect.minX,y:cropRect.midY),.left)]
+    guard let nearest = points.min(by: { hypot(p.x-$0.0.x,p.y-$0.0.y) < hypot(p.x-$1.0.x,p.y-$1.0.y) }), hypot(p.x-nearest.0.x,p.y-nearest.0.y) <= 24 else { return nil }
+    return nearest.1
+  }
+  private func normalized() -> CGRect {
+    guard imageBounds.width > 0,imageBounds.height > 0 else { return CGRect(x:0,y:0,width:1,height:1) }
+    return CGRect(x:(cropRect.minX-imageBounds.minX)/imageBounds.width,y:(cropRect.minY-imageBounds.minY)/imageBounds.height,width:cropRect.width/imageBounds.width,height:cropRect.height/imageBounds.height)
   }
+  private func reportCrop() { let r = normalized(); onCropChanged?(max(0,r.minX),max(0,r.minY),min(1,r.maxX),min(1,r.maxY)) }
 }

package/ios/Photo/UI/FilterThumbnailLoader.swift

@@ -0,0 +1,62 @@
+import UIKit
+
+/// Loads filter-carousel previews off the main thread, mirroring `FilterThumbnailLoader.kt`.
+///
+/// The carousel offers a preset per look, so rendering each one from the full-resolution photo would
+/// stall the panel every time it opens. Each preset is instead applied to one small square scaled
+/// from the source, and the result is cached by preset id for the life of the editor.
+final class FilterThumbnailLoader {
+  private let queue = DispatchQueue(label: "filter-thumbnail-loader", qos: .userInitiated)
+  private let cache = NSCache<NSString, UIImage>()
+  private var scaledSource: UIImage?
+  private var scaledSourceSize: CGFloat = 0
+
+  func load(source: UIImage?, presetID: String, size: CGFloat, deliver: @escaping (UIImage?) -> Void) {
+    guard let source else {
+      deliver(nil)
+      return
+    }
+    if let cached = cache.object(forKey: presetID as NSString) {
+      deliver(cached)
+      return
+    }
+    // Scale once and reuse for every preset rather than per thumbnail.
+    let square = squareSource(from: source, size: size)
+    queue.async { [weak self] in
+      let rendered = PhotoAdjustmentRenderer.apply(
+        square,
+        adjustments: PhotoAdjustments(filterPreset: presetID, filterStrength: 100)
+      )
+      self?.cache.setObject(rendered, forKey: presetID as NSString)
+      DispatchQueue.main.async { deliver(rendered) }
+    }
+  }
+
+  private func squareSource(from source: UIImage, size: CGFloat) -> UIImage {
+    if let scaledSource, scaledSourceSize == size { return scaledSource }
+    let scale = UIScreen.main.scale
+    let pixelSize = CGSize(width: size * scale, height: size * scale)
+    let renderer = PhotoEditSession.pixelRenderer(size: pixelSize)
+    // Aspect-fill into a square so each thumbnail frames the photo the same way.
+    let fitted = renderer.image { _ in
+      let sourceSize = source.size
+      let ratio = max(pixelSize.width / max(sourceSize.width, 1), pixelSize.height / max(sourceSize.height, 1))
+      let drawSize = CGSize(width: sourceSize.width * ratio, height: sourceSize.height * ratio)
+      source.draw(in: CGRect(
+        x: (pixelSize.width - drawSize.width) / 2,
+        y: (pixelSize.height - drawSize.height) / 2,
+        width: drawSize.width,
+        height: drawSize.height
+      ))
+    }
+    scaledSource = fitted
+    scaledSourceSize = size
+    return fitted
+  }
+
+  func invalidate() {
+    cache.removeAllObjects()
+    scaledSource = nil
+    scaledSourceSize = 0
+  }
+}

package/ios/Photo/UI/LayerOverlayView.swift

@@ -8,6 +8,7 @@ final class LayerOverlayView: UIView {
   var maxScale: CGFloat = 8
   var layers: [PhotoLayer] = [] { didSet { setNeedsDisplay() } }
   var selectedLayerID: String? { didSet { setNeedsDisplay() } }
+  var onLayerDelete: ((String) -> Void)?
   var onLayerTapped: ((String?) -> Void)?
   var onLayerDoubleTapped: ((String) -> Void)?
   var onLayerTransformChanged: ((_ id: String, _ x: CGFloat, _ y: CGFloat, _ scale: CGFloat, _ rotationDegrees: CGFloat) -> Void)?
@@ -42,19 +43,24 @@ final class LayerOverlayView: UIView {
     context.translateBy(x: center.x, y: center.y)
     context.rotate(by: layer.rotationDegrees * .pi / 180)
     context.setStrokeColor(UIColor.white.cgColor)
-    context.setLineWidth(2)
-    context.setLineDash(phase: 0, lengths: [8, 5])
+    context.setLineWidth(1)
     context.stroke(CGRect(x: -half.width, y: -half.height, width: half.width * 2, height: half.height * 2))
     context.setLineDash(phase: 0, lengths: [])
     context.setFillColor(UIColor.white.cgColor)
-    context.fillEllipse(in: CGRect(x: half.width - handleRadius, y: half.height - handleRadius, width: handleRadius * 2, height: handleRadius * 2))
-    context.setStrokeColor(UIColor(red: 87/255, green: 55/255, blue: 245/255, alpha: 1).cgColor)
-    context.setLineWidth(2)
-    let glyph = handleRadius * 0.52
-    context.move(to: CGPoint(x: half.width - glyph, y: half.height + glyph)); context.addLine(to: CGPoint(x: half.width + glyph, y: half.height - glyph)); context.strokePath()
+    for point in [CGPoint(x: -half.width, y: -half.height), CGPoint(x: half.width, y: -half.height), CGPoint(x: -half.width, y: half.height), CGPoint(x: half.width, y: half.height)] {
+      context.fillEllipse(in: CGRect(x: point.x - 4, y: point.y - 4, width: 8, height: 8))
+    }
+    drawControl(context, point: CGPoint(x: -half.width, y: -half.height), symbol: "xmark", tint: .systemRed)
+    drawControl(context, point: CGPoint(x: half.width, y: half.height), symbol: "arrow.up.left.and.arrow.down.right", tint: DesignTokens.primary)
     context.restoreGState()
   }
 
+  private func drawControl(_ context: CGContext, point: CGPoint, symbol: String, tint: UIColor) {
+    context.setFillColor(UIColor.white.cgColor)
+    context.fillEllipse(in: CGRect(x: point.x - handleRadius, y: point.y - handleRadius, width: handleRadius * 2, height: handleRadius * 2))
+    UIImage(systemName: symbol)?.withTintColor(tint, renderingMode: .alwaysOriginal).draw(in: CGRect(x: point.x - 7, y: point.y - 7, width: 14, height: 14))
+  }
+
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
     guard imageBounds.width > 0 else { return }
     for touch in touches {
@@ -71,6 +77,11 @@ final class LayerOverlayView: UIView {
       return
     }
     let selected = selectedLayer()
+    if let selected, !selected.locked {
+      let center = center(of: selected); let handle = handlePoint(selected)
+      let deletePoint = CGPoint(x: center.x * 2 - handle.x, y: center.y * 2 - handle.y)
+      if distance(deletePoint, point) <= handleTouchRadius { onLayerDelete?(selected.id); resetGesture(); return }
+    }
     let handleHit = selected.flatMap { !$0.locked && isHandleHit($0, point) ? $0 : nil }
     let hit = handleHit ?? hitTest(point)
     onLayerTapped?(hit?.id)
@@ -117,7 +128,13 @@ final class LayerOverlayView: UIView {
   private func endTouches(_ touches: Set<UITouch>) {
     let endedPrimary = primaryTouch.map { touches.contains($0) } ?? false
     let endedSecondary = secondaryTouch.map { touches.contains($0) } ?? false
-    if endedPrimary || endedSecondary { finishGesture() }
+    if endedPrimary || endedSecondary {
+      let remaining = endedPrimary ? secondaryTouch : primaryTouch
+      if let remaining, !touches.contains(remaining), let layer = currentGestureLayer() {
+        primaryTouch = remaining; secondaryTouch = nil
+        startLayer = layer; startPoint = remaining.location(in: self); gesture = .drag
+      } else { finishGesture() }
+    }
   }
   private func emit(_ layer: PhotoLayer, x: CGFloat, y: CGFloat, scale: CGFloat, rotation: CGFloat) {
     onLayerTransformChanged?(layer.id, x, y, scale, rotation)
@@ -145,7 +162,7 @@ final class LayerOverlayView: UIView {
     case .sticker:
       // Mirrors `PhotoLayerRenderer.drawSticker`'s `shortSide * 0.18` box (half-extent = 0.09).
       let half = shortSide * 0.09
-      base = CGSize(width: half, height: half)
+      base = CGSize(width: half + 4, height: half / max(layer.overlayAspectRatio ?? 1, 0.001) + 4)
     case .overlay:
       // Mirrors `PhotoLayerRenderer.drawOverlay`'s box: full canvas width, height from aspect ratio.
       let aspectRatio = layer.overlayAspectRatio.flatMap { $0 > 0 ? $0 : nil } ?? 1
@@ -155,7 +172,7 @@ final class LayerOverlayView: UIView {
       let maxY = layer.drawPoints.map { abs($0.1) }.max() ?? 0.08
       base = CGSize(width: maxX * imageBounds.width + handleRadius, height: maxY * imageBounds.height + handleRadius)
     }
-    return CGSize(width: max(handleRadius, base.width * layer.scale), height: max(handleRadius, base.height * layer.scale))
+    return CGSize(width: max(24, base.width * layer.scale), height: max(24, base.height * layer.scale))
   }
   private func handlePoint(_ layer: PhotoLayer) -> CGPoint {
     let center = center(of: layer); let half = selectionHalfExtents(layer); let radians = layer.rotationDegrees * .pi / 180

package/ios/Photo/UI/ZoomableImageView.swift

@@ -1,4 +1,5 @@
 import UIKit
+import AVFoundation
 
 /// UIImageView supporting pinch-to-zoom and single-finger pan for the photo
 /// preview, reporting the current on-screen image rect via `onBoundsChanged`
@@ -14,6 +15,7 @@ final class ZoomableImageView: UIImageView {
 
   private let pinchRecognizer = UIPinchGestureRecognizer()
   private let panRecognizer = UIPanGestureRecognizer()
+  private var lastLayoutSize: CGSize = .zero
   private var minScale: CGFloat = 1
   private var maxScale: CGFloat = 4
 
@@ -37,12 +39,28 @@ final class ZoomableImageView: UIImageView {
     reportBounds()
   }
 
+  func setRenderedBounds(_ target: CGRect) {
+    guard let image, bounds.width > 0, bounds.height > 0 else { return }
+    let fitted = AVMakeRect(aspectRatio: image.size, insideRect: bounds)
+    let scale = target.width / max(fitted.width, 0.001)
+    transform = CGAffineTransform(translationX: target.midX - center.x, y: target.midY - center.y).scaledBy(x: scale, y: scale)
+  }
+
   func currentImageBounds() -> CGRect {
     guard let image = image, bounds.width > 0, bounds.height > 0, image.size.width > 0, image.size.height > 0 else { return bounds }
     let scale = min(bounds.width / image.size.width, bounds.height / image.size.height)
     let fittedSize = CGSize(width: image.size.width * scale, height: image.size.height * scale)
     let origin = CGPoint(x: (bounds.width - fittedSize.width) / 2, y: (bounds.height - fittedSize.height) / 2)
-    return CGRect(origin: origin, size: fittedSize).applying(transform)
+    let rect = CGRect(origin: origin, size: fittedSize)
+    return superview.map { convert(rect, to: $0) } ?? rect
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    if bounds.size != lastLayoutSize {
+      lastLayoutSize = bounds.size
+      resetToFit()
+    }
   }
 
   private func reportBounds() {