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

package/ios/Photo/UI/LayerOverlayView.swift

@@ -8,7 +8,9 @@ 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)?
   var onLayerTransformEnded: ((String) -> Void)?
 
@@ -41,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 {
@@ -70,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)
@@ -107,13 +119,22 @@ final class LayerOverlayView: UIView {
     }
   }
 
-  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { endTouches(touches) }
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+    if let touch = touches.first, touch.tapCount >= 2, let id = gestureID { onLayerDoubleTapped?(id) }
+    endTouches(touches)
+  }
   override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { endTouches(touches) }
 
   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)
@@ -141,13 +162,17 @@ 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
       base = CGSize(width: imageBounds.width / 2, height: imageBounds.width / (2 * aspectRatio))
+    case .drawing:
+      let maxX = layer.drawPoints.map { abs($0.0) }.max() ?? 0.08
+      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() {