|
| 1 | +import UIKit |
| 2 | +import AVFoundation |
| 3 | +import PencilKit |
| 4 | + |
| 5 | +@available(iOS 13.0, *) |
| 6 | +protocol MediaEditorAnnotationViewUndoObserver: NSObject { |
| 7 | + func mediaEditorAnnotationView(_ annotationView: MediaEditorAnnotationView, isHidingUndoControls: Bool) |
| 8 | + func mediaEditorAnnotationViewUndoStatusDidChange(_ view: MediaEditorAnnotationView) |
| 9 | +} |
| 10 | + |
| 11 | +/// Wrapper view that contains an image view and a PencilKit canvas to allow |
| 12 | +/// drawing on top of the image. |
| 13 | +/// |
| 14 | +@available(iOS 13.0, *) |
| 15 | +class MediaEditorAnnotationView: UIView { |
| 16 | + |
| 17 | + private let imageView = UIImageView() |
| 18 | + private let canvasView = PKCanvasView() |
| 19 | + |
| 20 | + private var bottomConstraint: NSLayoutConstraint! |
| 21 | + |
| 22 | + weak var undoObserver: MediaEditorAnnotationViewUndoObserver? |
| 23 | + |
| 24 | + var canUndo: Bool { |
| 25 | + return canvasView.undoManager?.canUndo ?? false |
| 26 | + } |
| 27 | + |
| 28 | + var canRedo: Bool { |
| 29 | + return canvasView.undoManager?.canRedo ?? false |
| 30 | + } |
| 31 | + |
| 32 | + var image: UIImage? { |
| 33 | + set { |
| 34 | + imageView.image = newValue |
| 35 | + } |
| 36 | + get { |
| 37 | + return renderedImage |
| 38 | + } |
| 39 | + } |
| 40 | + |
| 41 | + // Primarily for testing purposes |
| 42 | + var drawingData: Data { |
| 43 | + set { |
| 44 | + do { |
| 45 | + canvasView.drawing = try PKDrawing(data: newValue) |
| 46 | + } catch { |
| 47 | + print("Error setting annotation view drawing data.") |
| 48 | + } |
| 49 | + } |
| 50 | + get { |
| 51 | + return canvasView.drawing.dataRepresentation() |
| 52 | + } |
| 53 | + } |
| 54 | + |
| 55 | + // MARK: - Initialization |
| 56 | + |
| 57 | + override init(frame: CGRect) { |
| 58 | + super.init(frame: frame) |
| 59 | + commonInit() |
| 60 | + } |
| 61 | + |
| 62 | + required init?(coder: NSCoder) { |
| 63 | + super.init(coder: coder) |
| 64 | + commonInit() |
| 65 | + } |
| 66 | + |
| 67 | + deinit { |
| 68 | + undoObserver = nil |
| 69 | + |
| 70 | + NotificationCenter.default.removeObserver(self, |
| 71 | + name: NSNotification.Name.NSUndoManagerCheckpoint, |
| 72 | + object: canvasView.undoManager) |
| 73 | + } |
| 74 | + |
| 75 | + private func commonInit() { |
| 76 | + configureImageView() |
| 77 | + configureCanvasView() |
| 78 | + } |
| 79 | + |
| 80 | + private func configureImageView() { |
| 81 | + addSubview(imageView) |
| 82 | + imageView.translatesAutoresizingMaskIntoConstraints = false |
| 83 | + |
| 84 | + imageView.contentMode = .scaleAspectFit |
| 85 | + |
| 86 | + bottomConstraint = imageView.bottomAnchor.constraint(equalTo: bottomAnchor) |
| 87 | + |
| 88 | + NSLayoutConstraint.activate([ |
| 89 | + imageView.leadingAnchor.constraint(equalTo: leadingAnchor), |
| 90 | + imageView.trailingAnchor.constraint(equalTo: trailingAnchor), |
| 91 | + imageView.topAnchor.constraint(equalTo: topAnchor), |
| 92 | + bottomConstraint |
| 93 | + ]) |
| 94 | + } |
| 95 | + |
| 96 | + private func configureCanvasView() { |
| 97 | + addSubview(canvasView) |
| 98 | + |
| 99 | + canvasView.backgroundColor = .clear |
| 100 | + canvasView.isOpaque = false |
| 101 | + |
| 102 | + // Ensure ink remains the same color regardless of light / dark mode |
| 103 | + canvasView.overrideUserInterfaceStyle = .light |
| 104 | + |
| 105 | + NotificationCenter.default.addObserver(forName: NSNotification.Name.NSUndoManagerCheckpoint, object: canvasView.undoManager, queue: nil) { [weak self] _ in |
| 106 | + self?.notifyUndoObserver() |
| 107 | + } |
| 108 | + } |
| 109 | + |
| 110 | + fileprivate func notifyUndoObserver() { |
| 111 | + undoObserver?.mediaEditorAnnotationViewUndoStatusDidChange(self) |
| 112 | + } |
| 113 | + |
| 114 | + // MARK: - View Layout |
| 115 | + |
| 116 | + override func layoutSubviews() { |
| 117 | + super.layoutSubviews() |
| 118 | + |
| 119 | + let currentFrame = canvasView.frame |
| 120 | + let newFrame = calculateCanvasFrame() |
| 121 | + canvasView.frame = newFrame |
| 122 | + |
| 123 | + // If the canvas has changed size (e.g. due to device rotation) apply a transform |
| 124 | + // to the drawing so that it still fits the scaled imageview |
| 125 | + let transform = CGAffineTransform(scaleX: newFrame.width / currentFrame.width, y: newFrame.height / currentFrame.height) |
| 126 | + self.canvasView.drawing.transform(using: transform) |
| 127 | + } |
| 128 | + |
| 129 | + private func calculateCanvasFrame() -> CGRect { |
| 130 | + guard let image = imageView.image, |
| 131 | + imageView.contentMode == .scaleAspectFit, |
| 132 | + image.size.width > 0 && image.size.height > 0 else { |
| 133 | + return imageView.bounds |
| 134 | + } |
| 135 | + |
| 136 | + let size = AVMakeRect(aspectRatio: image.size, insideRect: imageView.bounds) |
| 137 | + |
| 138 | + let x = (imageView.bounds.width - size.width) * 0.5 |
| 139 | + let y = (imageView.bounds.height - size.height) * 0.5 |
| 140 | + |
| 141 | + return CGRect(x: x, y: y, width: size.width, height: size.height) |
| 142 | + } |
| 143 | + |
| 144 | + // MARK: - Public methods |
| 145 | + |
| 146 | + /// Displays the system tool picker in the specified window |
| 147 | + /// |
| 148 | + func showTools(in window: UIWindow) { |
| 149 | + if let toolPicker = PKToolPicker.shared(for: window) { |
| 150 | + toolPicker.setVisible(true, forFirstResponder: canvasView) |
| 151 | + toolPicker.addObserver(canvasView) |
| 152 | + toolPicker.addObserver(self) |
| 153 | + |
| 154 | + canvasView.becomeFirstResponder() |
| 155 | + updateLayout(for: toolPicker) |
| 156 | + } |
| 157 | + } |
| 158 | + |
| 159 | + /// Renders the initial image with the canvas's image overlaid on top |
| 160 | + /// into a single UIImage instance. |
| 161 | + /// |
| 162 | + private var renderedImage: UIImage? { |
| 163 | + guard let imageViewImage = imageView.image else { |
| 164 | + return nil |
| 165 | + } |
| 166 | + |
| 167 | + guard canvasView.bounds != .zero else { |
| 168 | + return imageViewImage |
| 169 | + } |
| 170 | + |
| 171 | + // Check we actually have some changes |
| 172 | + if let undoManager = canvasView.undoManager, |
| 173 | + undoManager.canUndo == false { |
| 174 | + return imageViewImage |
| 175 | + } |
| 176 | + |
| 177 | + let targetSize = imageViewImage.size |
| 178 | + |
| 179 | + let canvasViewImage = canvasView.drawing.image(from: canvasView.bounds, scale: UIScreen.main.scale) |
| 180 | + |
| 181 | + let renderer = UIGraphicsImageRenderer(size: targetSize, format: .default()) |
| 182 | + let renderedImage = renderer.image { context in |
| 183 | + imageViewImage.draw(at: .zero) |
| 184 | + canvasViewImage.draw(in: CGRect(origin: .zero, size: targetSize)) |
| 185 | + } |
| 186 | + |
| 187 | + return renderedImage |
| 188 | + } |
| 189 | +} |
| 190 | + |
| 191 | +// Note: Code in this extension reused from WWDC 2019 PencilKit example |
| 192 | +// |
| 193 | +@available(iOS 13.0, *) |
| 194 | +extension MediaEditorAnnotationView: PKToolPickerObserver { |
| 195 | + // MARK: Tool Picker Observer |
| 196 | + |
| 197 | + /// Delegate method: Note that the tool picker has changed which part of the canvas view |
| 198 | + /// it obscures, if any. |
| 199 | + internal func toolPickerFramesObscuredDidChange(_ toolPicker: PKToolPicker) { |
| 200 | + updateLayout(for: toolPicker) |
| 201 | + } |
| 202 | + |
| 203 | + /// Delegate method: Note that the tool picker has become visible or hidden. |
| 204 | + internal func toolPickerVisibilityDidChange(_ toolPicker: PKToolPicker) { |
| 205 | + updateLayout(for: toolPicker) |
| 206 | + } |
| 207 | + |
| 208 | + /// Helper method to adjust the canvas view size when the tool picker changes which part |
| 209 | + /// of the canvas view it obscures, if any. |
| 210 | + /// |
| 211 | + /// Note that the tool picker floats over the canvas in regular size classes, but docks to |
| 212 | + /// the canvas in compact size classes, occupying a part of the screen that the canvas |
| 213 | + /// could otherwise use. |
| 214 | + fileprivate func updateLayout(for toolPicker: PKToolPicker) { |
| 215 | + let obscuredFrame = toolPicker.frameObscured(in: self) |
| 216 | + |
| 217 | + if obscuredFrame.isNull { |
| 218 | + bottomConstraint.constant = 0 |
| 219 | + undoObserver?.mediaEditorAnnotationView(self, isHidingUndoControls: false) |
| 220 | + } else { |
| 221 | + bottomConstraint.constant = -obscuredFrame.height |
| 222 | + undoObserver?.mediaEditorAnnotationView(self, isHidingUndoControls: true) |
| 223 | + } |
| 224 | + |
| 225 | + setNeedsLayout() |
| 226 | + layoutIfNeeded() |
| 227 | + |
| 228 | + canvasView.scrollIndicatorInsets = canvasView.contentInset |
| 229 | + } |
| 230 | +} |
0 commit comments