react-native-photo-video-editor 0.1.0 → 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

@@ -1,7 +1,7 @@
 import UIKit
 
 enum LayerType {
-  case text, sticker, overlay
+  case text, sticker, overlay, drawing
 }
 
 /// A single non-destructive overlay layer (text, sticker, or a user-uploaded
@@ -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
@@ -31,6 +31,10 @@ struct PhotoLayer {
   // Overlay (user-uploaded image, placed as a fully generic movable/resizable/rotatable layer)
   var overlayUri: String?
   var overlayAspectRatio: CGFloat?
+  // Drawing (points are normalized offsets from x/y)
+  var drawColor: UIColor = .red
+  var drawStrokeWidth: CGFloat = 0.012
+  var drawPoints: [(CGFloat, CGFloat)] = []
   // Timing (video overlays only; ignored for photo layers). endMs <= 0 means "to end of video".
   var startMs: Int64 = 0
   var endMs: Int64 = 0
@@ -40,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

@@ -29,6 +29,7 @@ enum PhotoLayerRenderer {
         case .text: drawText(layer, shortSide: geometry.shortSide)
         case .sticker: drawSticker(layer, shortSide: geometry.shortSide, resolver: imageResolver)
         case .overlay: drawOverlay(layer, canvasWidth: base.size.width, resolver: imageResolver)
+        case .drawing: drawStroke(ctx, layer, width: base.size.width, height: base.size.height, shortSide: geometry.shortSide)
         }
         ctx.restoreGState()
       }
@@ -53,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
     }
@@ -80,6 +82,19 @@ enum PhotoLayerRenderer {
     image.draw(in: rect, blendMode: .normal, alpha: layer.opacity)
   }
 
+  private static func drawStroke(_ ctx: CGContext, _ layer: PhotoLayer, width: CGFloat, height: CGFloat, shortSide: CGFloat) {
+    guard layer.drawPoints.count >= 2 else { return }
+    ctx.setAlpha(layer.opacity)
+    ctx.setStrokeColor(layer.drawColor.cgColor)
+    ctx.setLineWidth(layer.drawStrokeWidth * shortSide)
+    ctx.setLineCap(.round)
+    ctx.setLineJoin(.round)
+    let points = layer.drawPoints.map { CGPoint(x: $0.0 * width, y: $0.1 * height) }
+    ctx.move(to: points[0])
+    points.dropFirst().forEach { ctx.addLine(to: $0) }
+    ctx.strokePath()
+  }
+
 }
 
 private extension NSAttributedString {

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,161 +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 handleRadius: CGFloat = 32
-  private let minSize: CGFloat = 60
-
-  private enum Handle { case move, 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)
+    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()
+  }
+  func setCrop(left: CGFloat, top: CGFloat, right: CGFloat, bottom: CGFloat) {
+    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))
+    }
+    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)))
+      }
     }
-    borderLayer.path = borderPath.cgPath
+    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 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)
-    }
-    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
-      }
-    }
-    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/DrawOverlayView.swift

@@ -0,0 +1,48 @@
+import UIKit
+
+struct DrawStroke {
+  var points: [CGPoint]
+  let color: UIColor
+  let widthPx: CGFloat
+}
+
+/** Captures freehand strokes over the visible image while Draw mode is active. */
+final class DrawOverlayView: UIView {
+  private var imageBounds: CGRect = .zero
+  var strokeColor: UIColor = .red
+  var strokeWidthPx: CGFloat = 12
+  private var strokes: [DrawStroke] = []
+  private var currentIndex: Int?
+
+  override init(frame: CGRect) { super.init(frame: frame); backgroundColor = .clear; isOpaque = false }
+  required init?(coder: NSCoder) { nil }
+  func setImageBounds(_ bounds: CGRect) { imageBounds = bounds }
+  func clearStrokes() { strokes.removeAll(); currentIndex = nil; setNeedsDisplay() }
+  func undoLastStroke() { if !strokes.isEmpty { strokes.removeLast() }; setNeedsDisplay() }
+  var hasStrokes: Bool { !strokes.isEmpty }
+  func normalizedStrokes() -> [(points: [(CGFloat, CGFloat)], stroke: DrawStroke)] {
+    guard imageBounds.width > 0, imageBounds.height > 0 else { return [] }
+    return strokes.map { stroke in
+      (stroke.points.map { (($0.x - imageBounds.minX) / imageBounds.width, ($0.y - imageBounds.minY) / imageBounds.height) }, stroke)
+    }
+  }
+
+  override func draw(_ rect: CGRect) {
+    guard let ctx = UIGraphicsGetCurrentContext() else { return }
+    ctx.setLineCap(.round); ctx.setLineJoin(.round)
+    for stroke in strokes where stroke.points.count >= 2 {
+      ctx.setStrokeColor(stroke.color.cgColor); ctx.setLineWidth(stroke.widthPx)
+      ctx.move(to: stroke.points[0]); stroke.points.dropFirst().forEach { ctx.addLine(to: $0) }; ctx.strokePath()
+    }
+  }
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+    guard let point = touches.first?.location(in: self), imageBounds.contains(point) else { return }
+    strokes.append(DrawStroke(points: [point], color: strokeColor, widthPx: strokeWidthPx)); currentIndex = strokes.count - 1; setNeedsDisplay()
+  }
+  override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
+    guard let index = currentIndex, let point = touches.first?.location(in: self) else { return }
+    strokes[index].points.append(point); setNeedsDisplay()
+  }
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { currentIndex = nil }
+  override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { currentIndex = nil }
+}

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
+  }
+}