react-native-photo-video-editor 0.1.0

package/ios/Photo/Rendering/PhotoFilterPresets.swift

@@ -0,0 +1,45 @@
+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`.
+struct PhotoFilterRecipe {
+  let scale: Double
+  let redOffset: Double
+  let greenOffset: Double
+  let blueOffset: Double
+  let saturation: Double
+}
+
+enum PhotoFilterPresets {
+  static let presetIDs = ["mono", "noir", "fade", "chrome", "warmth"]
+
+  static func label(for id: String) -> String {
+    switch id {
+    case "mono": return "Mono"
+    case "noir": return "Noir"
+    case "fade": return "Fade"
+    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
+    }
+  }
+}

package/ios/Photo/Rendering/PhotoLayer.swift

@@ -0,0 +1,59 @@
+import UIKit
+
+enum LayerType {
+  case text, sticker, overlay
+}
+
+/// A single non-destructive overlay layer (text, sticker, or a user-uploaded
+/// overlay image). One flat model covers every type for simplicity — a
+/// documented simplification versus a per-type hierarchy. Mirrors
+/// `PhotoLayer.kt`.
+///
+/// `x`/`y` are the layer's center, normalized 0..1 against the image.
+struct PhotoLayer {
+  let id: String
+  var type: LayerType
+  var x: CGFloat = 0.5
+  var y: CGFloat = 0.5
+  var scale: CGFloat = 1
+  var rotationDegrees: CGFloat = 0
+  var opacity: CGFloat = 1
+  var locked = false
+  var visible = true
+  // Text
+  var text: String = ""
+  var textColor: UIColor = .white
+  var fontSize: CGFloat = 48
+  var fontFamily: String?
+  // Sticker
+  var stickerId: String?
+  var stickerUri: String?
+  // Overlay (user-uploaded image, placed as a fully generic movable/resizable/rotatable layer)
+  var overlayUri: String?
+  var overlayAspectRatio: CGFloat?
+  // Timing (video overlays only; ignored for photo layers). endMs <= 0 means "to end of video".
+  var startMs: Int64 = 0
+  var endMs: Int64 = 0
+
+  init(id: String = UUID().uuidString, type: LayerType) {
+    self.id = id
+    self.type = type
+  }
+
+  /// 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
+  }
+
+  func isActive(atMs positionMs: Int64, durationMs: Int64) -> Bool {
+    guard visible, durationMs >= 0 else { return false }
+    let clamped = max(positionMs, 0)
+    guard clamped >= max(startMs, 0) else { return false }
+    // No explicit end (or one at/past the video's end) means "visible through the real last
+    // frame" — don't compare against `durationMs`, which is a separately-computed estimate
+    // that can be a few ms shy of the true final frame's timestamp due to frame-rate rounding,
+    // which would otherwise hide the overlay early.
+    if endMs <= 0 || endMs >= durationMs { return true }
+    return clamped <= endMs
+  }
+}

package/ios/Photo/Rendering/PhotoLayerRenderer.swift

@@ -0,0 +1,94 @@
+import UIKit
+
+/// Burns the layer stack onto a `UIImage`. Used identically by the live
+/// preview and the exporter (different image resolutions, same code and
+/// normalized coordinates) so what you see matches what gets exported.
+/// Mirrors `PhotoLayerRenderer.kt`.
+enum PhotoLayerRenderer {
+  private static let builtinStickers: [String: String] = [
+    "smile": "😀", "heart": "❤️", "star": "⭐", "fire": "🔥",
+    "thumbsUp": "👍", "sun": "☀️", "clap": "👏", "sparkles": "✨",
+  ]
+
+  static func builtinStickerIDs() -> [String] { Array(builtinStickers.keys).sorted() }
+  static func glyph(for stickerID: String) -> String { builtinStickers[stickerID] ?? "★" }
+
+  static func render(_ base: UIImage, layers: [PhotoLayer], imageResolver: (String) -> UIImage? = { _ in nil }) -> UIImage {
+    guard !layers.isEmpty else { return base }
+    let renderer = PhotoEditSession.pixelRenderer(size: base.size)
+    return renderer.image { context in
+      base.draw(in: CGRect(origin: .zero, size: base.size))
+      for layer in layers where layer.visible {
+        let geometry = OverlayGeometry.map(layer, frameSize: base.size)
+        let ctx = context.cgContext
+        ctx.saveGState()
+        ctx.translateBy(x: geometry.center.x, y: geometry.center.y)
+        ctx.rotate(by: geometry.rotationDegrees * .pi / 180)
+        ctx.scaleBy(x: geometry.scale, y: geometry.scale)
+        switch layer.type {
+        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)
+        }
+        ctx.restoreGState()
+      }
+    }
+  }
+
+  private static func drawText(_ layer: PhotoLayer, shortSide: CGFloat) {
+    let fontSize = layer.fontSize / 48 * (shortSide * 0.06)
+    let font: UIFont = layer.fontFamily.flatMap { UIFont(name: $0, size: fontSize) } ?? .systemFont(ofSize: fontSize)
+    let paragraph = NSMutableParagraphStyle()
+    paragraph.alignment = .center
+    let attributes: [NSAttributedString.Key: Any] = [
+      .font: font,
+      .foregroundColor: layer.textColor.withAlphaComponent(layer.opacity),
+      .paragraphStyle: paragraph,
+    ]
+    let text = layer.text.isEmpty ? " " : layer.text
+    let attributed = NSAttributedString(string: text, attributes: attributes)
+    let size = attributed.size()
+    attributed.draw(at: CGPoint(x: -size.width / 2, y: -size.height / 2))
+  }
+
+  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) {
+      image.draw(in: rect, blendMode: .normal, alpha: layer.opacity)
+      return
+    }
+    let glyph = layer.stickerId.map { PhotoLayerRenderer.glyph(for: $0) } ?? "★"
+    let attributes: [NSAttributedString.Key: Any] = [
+      .font: UIFont.systemFont(ofSize: size),
+    ]
+    let attributed = NSAttributedString(string: glyph, attributes: attributes)
+    let textSize = attributed.size()
+    attributed.draw(at: CGPoint(x: -textSize.width / 2, y: -size / 2), withAlpha: layer.opacity)
+  }
+
+  /// Draws a user-uploaded overlay image scaled to fit a box whose width equals the full canvas
+  /// width and whose height is derived from `overlayAspectRatio` — the layer's own `scale` (already
+  /// applied to the drawing context by `render`) then shrinks/grows it from there. Unlike stickers,
+  /// there is no glyph fallback: if the resolver can't produce an image, nothing is drawn.
+  private static func drawOverlay(_ layer: PhotoLayer, canvasWidth: CGFloat, resolver: (String) -> UIImage?) {
+    guard let uri = layer.overlayUri, let image = resolver(uri) else { return }
+    let aspectRatio = layer.overlayAspectRatio.flatMap { $0 > 0 ? $0 : nil } ?? (image.size.width / max(image.size.height, 1))
+    let width = canvasWidth
+    let height = width / max(aspectRatio, 0.0001)
+    let rect = CGRect(x: -width / 2, y: -height / 2, width: width, height: height)
+    image.draw(in: rect, blendMode: .normal, alpha: layer.opacity)
+  }
+
+}
+
+private extension NSAttributedString {
+  /// `draw(at:)` ignores `withAlpha` unless applied via the graphics context; this composites the whole glyph at `alpha`.
+  func draw(at point: CGPoint, withAlpha alpha: CGFloat) {
+    guard let ctx = UIGraphicsGetCurrentContext() else { draw(at: point); return }
+    ctx.saveGState()
+    ctx.setAlpha(alpha)
+    draw(at: point)
+    ctx.restoreGState()
+  }
+}

package/ios/Photo/Rendering/PhotoLayerStack.swift

@@ -0,0 +1,60 @@
+import Foundation
+
+/// Ordered layer stack with snapshot-based undo/redo. One entry is pushed per
+/// *committed* operation (add/delete/duplicate/reorder, or a drag/slider
+/// gesture's final value) — never per intermediate touch-move frame — so a
+/// continuous drag does not flood the history. Mirrors `PhotoLayerStack.kt`.
+final class PhotoLayerStack {
+  private(set) var layers: [PhotoLayer] = []
+  private(set) var revision: UInt64 = 0
+  private var undoStack: [[PhotoLayer]] = []
+  private var redoStack: [[PhotoLayer]] = []
+  private let historyLimit: Int
+
+  init(historyLimit: Int = 50) {
+    self.historyLimit = historyLimit
+  }
+
+  var canUndo: Bool { !undoStack.isEmpty }
+  var canRedo: Bool { !redoStack.isEmpty }
+
+  /// Applies `mutation` as a single committed, undoable operation.
+  func commit(_ mutation: ([PhotoLayer]) -> [PhotoLayer]) {
+    pushUndo(layers)
+    redoStack.removeAll()
+    layers = mutation(layers)
+    revision &+= 1
+  }
+
+  /// Updates the live layer list without creating a history entry — for in-progress drags.
+  func updateLive(_ mutation: ([PhotoLayer]) -> [PhotoLayer]) {
+    layers = mutation(layers)
+    revision &+= 1
+  }
+
+  /// Records `previousLayers` (captured before a live-updated gesture began) as one undo step.
+  func commitSnapshot(_ previousLayers: [PhotoLayer]) {
+    pushUndo(previousLayers)
+    redoStack.removeAll()
+    revision &+= 1
+  }
+
+  func undo() {
+    guard let previous = undoStack.popLast() else { return }
+    redoStack.append(layers)
+    layers = previous
+    revision &+= 1
+  }
+
+  func redo() {
+    guard let next = redoStack.popLast() else { return }
+    undoStack.append(layers)
+    layers = next
+    revision &+= 1
+  }
+
+  private func pushUndo(_ snapshot: [PhotoLayer]) {
+    undoStack.append(snapshot)
+    if undoStack.count > historyLimit { undoStack.removeFirst() }
+  }
+}

package/ios/Photo/Rendering/PhotoTransformState.swift

@@ -0,0 +1,49 @@
+import CoreGraphics
+
+/// Non-destructive photo edit state. The crop rectangle is normalized (0...1)
+/// against the *transformed* (rotated/straightened) image, matching
+/// what the user sees in the crop overlay — the original source file is never
+/// modified, only read again at export time.
+struct PhotoTransformState: Equatable {
+  var cropLeft: CGFloat = 0
+  var cropTop: CGFloat = 0
+  var cropRight: CGFloat = 1
+  var cropBottom: CGFloat = 1
+  var rotationDegrees: Int = 0
+  var straightenDegrees: CGFloat = 0
+  var aspectRatio: CGFloat?
+
+  var isIdentity: Bool {
+    cropLeft == 0 && cropTop == 0 && cropRight == 1 && cropBottom == 1 &&
+      rotationDegrees == 0 && straightenDegrees == 0
+  }
+
+  /// Rotating changes which pixels a normalized crop rect refers to, so the crop resets to full-frame.
+  mutating func rotateRight() {
+    rotationDegrees = (rotationDegrees + 90) % 360
+    cropLeft = 0
+    cropTop = 0
+    cropRight = 1
+    cropBottom = 1
+  }
+
+  mutating func setStraighten(_ degrees: CGFloat) {
+    straightenDegrees = max(-45, min(45, degrees))
+  }
+
+  mutating func setCrop(left: CGFloat, top: CGFloat, right: CGFloat, bottom: CGFloat) {
+    cropLeft = max(0, min(1, left))
+    cropTop = max(0, min(1, top))
+    cropRight = max(0, min(1, right))
+    cropBottom = max(0, min(1, bottom))
+  }
+
+  mutating func reset() {
+    self = PhotoTransformState()
+  }
+
+  /// Combined rotate + straighten radians, applied around the image's own center by the caller.
+  var totalRotationRadians: CGFloat {
+    (CGFloat(rotationDegrees) + straightenDegrees) * .pi / 180
+  }
+}

package/ios/Photo/Rendering/PixelBuffer.swift

@@ -0,0 +1,68 @@
+import CoreGraphics
+import UIKit
+
+/// Raw RGBA8 pixel access for a `UIImage`, used by adjustment/effect passes
+/// that need direct per-pixel math (tone curve, sharpen, box blur).
+///
+/// Important: a bitmap `CGContext` created via `CGContext(data:...)` has its
+/// origin at the bottom-left with Y increasing upward (Quartz-native), which
+/// is the OPPOSITE of the top-down row order `CGImage`/`UIImage` assume.
+/// Drawing into it without first flipping the CTM produces a vertically
+/// flipped image once the raw bytes are wrapped back into a `CGImage`. Both
+/// `init` and `makeImage()` apply that flip so round-tripping through this
+/// buffer preserves the image's orientation.
+struct PixelBuffer {
+  private(set) var data: [UInt8]
+  let width: Int
+  let height: Int
+  private static let bytesPerPixel = 4
+  private static let bitmapInfo = CGImageAlphaInfo.premultipliedLast.rawValue
+
+  init?(image: UIImage) {
+    guard let cgImage = image.cgImage, cgImage.width > 0, cgImage.height > 0 else { return nil }
+    width = cgImage.width
+    height = cgImage.height
+    var buffer = [UInt8](repeating: 0, count: width * height * Self.bytesPerPixel)
+    guard let context = CGContext(
+      data: &buffer,
+      width: width,
+      height: height,
+      bitsPerComponent: 8,
+      bytesPerRow: width * Self.bytesPerPixel,
+      space: CGColorSpaceCreateDeviceRGB(),
+      bitmapInfo: Self.bitmapInfo
+    ) else { return nil }
+    context.translateBy(x: 0, y: CGFloat(height))
+    context.scaleBy(x: 1, y: -1)
+    context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
+    data = buffer
+  }
+
+  func makeImage() -> UIImage? {
+    var buffer = data
+    guard let context = CGContext(
+      data: &buffer,
+      width: width,
+      height: height,
+      bitsPerComponent: 8,
+      bytesPerRow: width * Self.bytesPerPixel,
+      space: CGColorSpaceCreateDeviceRGB(),
+      bitmapInfo: Self.bitmapInfo
+    ), let cgImage = context.makeImage() else { return nil }
+    return UIImage(cgImage: cgImage)
+  }
+
+  subscript(x: Int, y: Int) -> (r: UInt8, g: UInt8, b: UInt8, a: UInt8) {
+    get {
+      let offset = (y * width + x) * Self.bytesPerPixel
+      return (data[offset], data[offset + 1], data[offset + 2], data[offset + 3])
+    }
+    set {
+      let offset = (y * width + x) * Self.bytesPerPixel
+      data[offset] = newValue.r
+      data[offset + 1] = newValue.g
+      data[offset + 2] = newValue.b
+      data[offset + 3] = newValue.a
+    }
+  }
+}

package/ios/Photo/UI/CropOverlayView.swift

@@ -0,0 +1,161 @@
+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`.
+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
+  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
+
+  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)
+  }
+
+  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 setImageBounds(_ bounds: CGRect, resetCrop: Bool) {
+    imageBounds = bounds
+    if resetCrop || cropRect.width <= 0 || cropRect.height <= 0 {
+      cropRect = bounds
+      reportCrop()
+    }
+    setNeedsLayout()
+  }
+
+  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()
+  }
+
+  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))
+    }
+    borderLayer.path = borderPath.cgPath
+  }
+
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+    guard let point = touches.first?.location(in: self) else { return }
+    activeHandle = hitTest(point)
+    lastPoint = point
+  }
+
+  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
+    }
+    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
+  }
+
+  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()
+  }
+
+  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 }
+  }
+
+  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)
+  }
+}