Compose attachment section

This commit is contained in:
Shadowfacts 2024-11-20 00:32:27 -05:00
parent 2fb76e322a
commit b9e3d8ec5e
4 changed files with 450 additions and 2 deletions

View File

@ -12,14 +12,27 @@ import Photos
struct AttachmentThumbnailView: View {
let attachment: DraftAttachment
let contentMode: ContentMode = .fit
var contentMode: ContentMode = .fit
var body: some View {
AttachmentThumbnailViewContent(attachment: attachment, contentMode: contentMode)
.id(attachment.id)
}
}
private struct AttachmentThumbnailViewContent: View {
var attachment: DraftAttachment
var contentMode: ContentMode = .fit
@State private var mode: Mode = .empty
@EnvironmentObject private var composeController: ComposeController
var body: some View {
switch mode {
case .empty:
Image(systemName: "photo")
.imageScale(.large)
.foregroundStyle(.gray)
.task {
await loadThumbnail()
}

View File

@ -0,0 +1,152 @@
//
// AttachmentCollectionViewCell.swift
// ComposeUI
//
// Created by Shadowfacts on 11/20/24.
//
import UIKit
import SwiftUI
final class AttachmentCollectionViewCell: UICollectionViewCell {
let attachmentView: UIView & UIContentView
override init(frame: CGRect) {
attachmentView = UIHostingConfiguration(content: {
AttachmentCollectionViewCellView(attachment: nil)
}).makeContentView()
super.init(frame: frame)
attachmentView.frame = bounds
addSubview(attachmentView)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func updateUI(attachment: DraftAttachment) {
attachmentView.configuration = UIHostingConfiguration(content: {
AttachmentCollectionViewCellView(attachment: attachment)
}).margins(.all, .zero)
}
}
private struct AttachmentCollectionViewCellView: View {
let attachment: DraftAttachment?
var body: some View {
if let attachment {
AttachmentThumbnailView(attachment: attachment, contentMode: .fill)
.squareFrame()
.background {
RoundedSquare(cornerRadius: 5)
.fill(.quaternary)
}
.overlay(alignment: .bottom) {
AttachmentDescriptionLabel(attachment: attachment)
}
.overlay(alignment: .topTrailing) {
AttachmentRemoveButton(attachment: attachment)
}
.clipShape(RoundedSquare(cornerRadius: 5))
}
}
}
private struct AttachmentRemoveButton: View {
let attachment: DraftAttachment
var body: some View {
Button("Remove", systemImage: "xmark.circle.fill") {
let draft = attachment.draft
let attachments = draft.attachments.mutableCopy() as! NSMutableOrderedSet
attachments.remove(attachment)
draft.attachments = attachments
DraftsPersistentContainer.shared.viewContext.delete(attachment)
}
.labelStyle(.iconOnly)
.imageScale(.large)
.foregroundStyle(.white)
.shadow(radius: 2)
.padding([.top, .trailing], 2)
}
}
private struct AttachmentDescriptionLabel: View {
let attachment: DraftAttachment
var body: some View {
ZStack(alignment: .bottomLeading) {
LinearGradient(
stops: [.init(color: .clear, location: 0), .init(color: .clear, location: 0.6), .init(color: .black.opacity(0.5), location: 1)],
startPoint: .top,
endPoint: .bottom
)
label
.lineLimit(1)
.font(.callout)
.foregroundStyle(.white)
.shadow(radius: 1)
.padding([.horizontal, .bottom], 4)
}
}
@ViewBuilder
private var label: some View {
if attachment.attachmentDescription.isEmpty {
Label("Add alt", systemImage: "pencil")
.labelStyle(NarrowSpacingLabelStyle())
} else {
Text(attachment.attachmentDescription)
}
}
}
private struct NarrowSpacingLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 4) {
configuration.icon
configuration.title
}
}
}
private struct RoundedSquare: Shape {
let cornerRadius: CGFloat
nonisolated func path(in rect: CGRect) -> Path {
let minDimension = min(rect.width, rect.height)
let square = CGRect(x: rect.minX - (rect.width - minDimension) / 2, y: rect.minY - (rect.height - minDimension), width: minDimension, height: minDimension)
return RoundedRectangle(cornerRadius: cornerRadius).path(in: square)
}
}
private struct SquareFrame: Layout {
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
precondition(subviews.count == 1)
let size = proposal.replacingUnspecifiedDimensions(by: subviews[0].sizeThatFits(proposal))
let minDimension = min(size.width, size.height)
return CGSize(width: minDimension, height: minDimension)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
precondition(subviews.count == 1)
let subviewSize = subviews[0].sizeThatFits(proposal)
let minDimension = min(bounds.width, bounds.height)
let origin = CGPoint(x: bounds.minX - (subviewSize.width - minDimension) / 2, y: bounds.minY - (subviewSize.height - minDimension) / 2)
subviews[0].place(at: origin, proposal: ProposedViewSize(subviewSize))
}
}
private extension View {
func squareFrame() -> some View {
SquareFrame {
self
}
}
}

View File

@ -0,0 +1,281 @@
//
// AttachmentsSection.swift
// ComposeUI
//
// Created by Shadowfacts on 11/17/24.
//
import SwiftUI
import PhotosUI
import PencilKit
struct AttachmentsSection: View {
@ObservedObject var draft: Draft
var body: some View {
WrappedCollectionView(
draft: draft,
spacing: 8,
minItemSize: 100
)
// Impose a minimum height, because otherwise it defaults to zero which prevents the collection
// view from laying out, and leaving the intrinsic content size at zero too.
.frame(minHeight: 100)
}
}
private struct WrappedCollectionView: UIViewRepresentable {
@ObservedObject var draft: Draft
let spacing: CGFloat
let minItemSize: CGFloat
func makeUIView(context: Context) -> some UIView {
let layout = UICollectionViewCompositionalLayout { section, environment in
let (itemSize, itemsPerRow) = itemSize(width: environment.container.contentSize.width)
let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .absolute(itemSize), heightDimension: .absolute(itemSize)))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(itemSize)), repeatingSubitem: item, count: itemsPerRow)
group.interItemSpacing = .fixed(spacing)
let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = spacing
return section
}
let view = IntrinsicContentSizeCollectionView(frame: .zero, collectionViewLayout: layout)
let dataSource = UICollectionViewDiffableDataSource<Section, Item>(collectionView: view) { collectionView, indexPath, itemIdentifier in
context.coordinator.makeCell(collectionView: collectionView, indexPath: indexPath, item: itemIdentifier)
}
dataSource.reorderingHandlers.canReorderItem = { item in
switch item {
case .attachment(_):
true
case .addButton:
false
}
}
dataSource.reorderingHandlers.didReorder = { transaction in
let attachmentChanges = transaction.difference.map {
switch $0 {
case .insert(let offset, let element, let associatedWith):
guard case .attachment(let attachment) = element else { fatalError() }
return CollectionDifference<DraftAttachment>.Change.insert(offset: offset, element: attachment, associatedWith: associatedWith)
case .remove(let offset, let element, let associatedWith):
guard case .attachment(let attachment) = element else { fatalError() }
return CollectionDifference<DraftAttachment>.Change.remove(offset: offset, element: attachment, associatedWith: associatedWith)
}
}
let attachmentsDiff = CollectionDifference(attachmentChanges)!
let array = draft.draftAttachments.applying(attachmentsDiff)!
draft.attachments = NSMutableOrderedSet(array: array)
}
context.coordinator.dataSource = dataSource
view.isScrollEnabled = false
view.clipsToBounds = false
view.delegate = context.coordinator
let longPressRecognizer = UILongPressGestureRecognizer(target: context.coordinator, action: #selector(WrappedCollectionViewCoordinator.reorderingLongPressRecognized))
longPressRecognizer.delegate = context.coordinator
view.addGestureRecognizer(longPressRecognizer)
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) {
var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
snapshot.appendSections([.all])
snapshot.appendItems(draft.draftAttachments.map { .attachment($0) })
snapshot.appendItems([.addButton])
context.coordinator.dataSource.apply(snapshot)
context.coordinator.addAttachment = {
DraftsPersistentContainer.shared.viewContext.insert($0)
$0.draft = draft
draft.attachments.add($0)
}
context.coordinator.draft = draft
}
func makeCoordinator() -> WrappedCollectionViewCoordinator {
WrappedCollectionViewCoordinator()
}
private func itemSize(width: CGFloat) -> (CGFloat, Int) {
// The maximum item size is 2*minItemSize + spacing - 1,
// in the case where one item fits in the row but we are one pt short of
// adding a second item.
var itemSize = minItemSize
var fittingCount = floor((width + spacing) / (itemSize + spacing))
var usedSpaceForFittingCount = fittingCount * itemSize + (fittingCount - 1) * spacing
var remainingSpace = width - usedSpaceForFittingCount
if fittingCount == 1 && remainingSpace > minItemSize / 2 {
// If there's only one item that would fit at min size, and giving
// it the rest of the space would increase it by at least 50%,
// add a second item anywyas.
itemSize = (width - spacing) / 2
fittingCount = 2
usedSpaceForFittingCount = fittingCount * itemSize + (fittingCount - 1) * spacing
remainingSpace = width - usedSpaceForFittingCount
}
itemSize = itemSize + remainingSpace / fittingCount
return (itemSize, Int(fittingCount))
}
enum Section {
case all
}
enum Item: Hashable {
case attachment(DraftAttachment)
case addButton
}
}
private class WrappedCollectionViewCoordinator: NSObject {
var draft: Draft!
var dataSource: UICollectionViewDiffableDataSource<WrappedCollectionView.Section, WrappedCollectionView.Item>!
var currentInteractiveMoveStartOffsetInCell: CGPoint?
var currentInteractiveMoveCell: AttachmentCollectionViewCell?
var addAttachment: ((DraftAttachment) -> Void)? = nil
private let attachmentCell = UICollectionView.CellRegistration<AttachmentCollectionViewCell, DraftAttachment> { cell, indexPath, attachment in
cell.updateUI(attachment: attachment)
}
private let addButtonCell = UICollectionView.CellRegistration<UICollectionViewCell, (WrappedCollectionViewCoordinator, Bool)> { cell, indexPath, item in
let (coordinator, enabled) = item
cell.contentConfiguration = UIHostingConfiguration(content: {
AddAttachmentButton(coordinator: coordinator, enabled: enabled)
}).margins(.all, .zero)
}
func makeCell(collectionView: UICollectionView, indexPath: IndexPath, item: WrappedCollectionView.Item) -> UICollectionViewCell {
switch item {
case .attachment(let attachment):
return collectionView.dequeueConfiguredReusableCell(using: attachmentCell, for: indexPath, item: attachment)
case .addButton:
return collectionView.dequeueConfiguredReusableCell(using: addButtonCell, for: indexPath, item: (self, true))
}
}
@objc func reorderingLongPressRecognized(_ recognizer: UILongPressGestureRecognizer) {
let collectionView = recognizer.view as! UICollectionView
switch recognizer.state {
case .began:
break
case .changed:
var pos = recognizer.location(in: collectionView)
if let currentInteractiveMoveStartOffsetInCell {
pos.x -= currentInteractiveMoveStartOffsetInCell.x
pos.y -= currentInteractiveMoveStartOffsetInCell.y
}
collectionView.updateInteractiveMovementTargetPosition(pos)
case .ended:
collectionView.endInteractiveMovement()
UIView.animate(withDuration: 0.2) {
self.currentInteractiveMoveCell?.attachmentView.transform = .identity
}
currentInteractiveMoveCell = nil
currentInteractiveMoveStartOffsetInCell = nil
case .cancelled:
collectionView.cancelInteractiveMovement()
UIView.animate(withDuration: 0.2) {
self.currentInteractiveMoveCell?.attachmentView.transform = .identity
}
currentInteractiveMoveCell = nil
currentInteractiveMoveStartOffsetInCell = nil
default:
break
}
}
}
extension WrappedCollectionViewCoordinator: UIGestureRecognizerDelegate {
func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
let collectionView = gestureRecognizer.view as! UICollectionView
let location = gestureRecognizer.location(in: collectionView)
guard let indexPath = collectionView.indexPathForItem(at: location),
let cell = collectionView.cellForItem(at: indexPath) as? AttachmentCollectionViewCell else {
return false
}
UIView.animate(withDuration: 0.2) {
cell.attachmentView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}
currentInteractiveMoveCell = cell
currentInteractiveMoveStartOffsetInCell = gestureRecognizer.location(in: cell)
currentInteractiveMoveStartOffsetInCell!.x -= cell.bounds.midX
currentInteractiveMoveStartOffsetInCell!.y -= cell.bounds.midY
return collectionView.beginInteractiveMovementForItem(at: indexPath)
}
}
extension WrappedCollectionViewCoordinator: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, targetIndexPathForMoveOfItemFromOriginalIndexPath originalIndexPath: IndexPath, atCurrentIndexPath currentIndexPath: IndexPath, toProposedIndexPath proposedIndexPath: IndexPath) -> IndexPath {
let snapshot = dataSource.snapshot()
let items = snapshot.itemIdentifiers(inSection: .all).count
if proposedIndexPath.row == items - 1 {
return IndexPath(item: items - 2, section: proposedIndexPath.section)
} else {
return proposedIndexPath
}
}
}
private final class IntrinsicContentSizeCollectionView: UICollectionView {
private var _intrinsicContentSize = CGSize.zero
override var intrinsicContentSize: CGSize {
_intrinsicContentSize
}
override func layoutSubviews() {
super.layoutSubviews()
if contentSize != _intrinsicContentSize {
_intrinsicContentSize = contentSize
invalidateIntrinsicContentSize()
}
}
}
private struct AddAttachmentButton: View {
let coordinator: WrappedCollectionViewCoordinator
let enabled: Bool
@Environment(\.composeUIConfig.presentAssetPicker) private var presentAssetPicker
@Environment(\.composeUIConfig.presentDrawing) private var presentDrawing
var body: some View {
Menu {
if let presentAssetPicker {
Button("Add photo or video", systemImage: "photo") {
presentAssetPicker {
let draft = coordinator.draft!
AttachmentsListSection.insertAttachments(in: draft, at: draft.attachments.count, itemProviders: $0.map(\.itemProvider))
}
}
}
if let presentDrawing {
Button("Draw something", systemImage: "hand.draw") {
presentDrawing(PKDrawing()) { drawing in
let draft = coordinator.draft!
let attachment = DraftAttachment(context: DraftsPersistentContainer.shared.viewContext)
attachment.id = UUID()
attachment.drawing = drawing
attachment.draft = draft
draft.attachments.add(attachment)
}
}
}
} label: {
Image(systemName: "photo.badge.plus")
.imageScale(.large)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background {
RoundedRectangle(cornerRadius: 5)
.foregroundStyle(.tint.opacity(0.1))
RoundedRectangle(cornerRadius: 5)
.stroke(.tint, style: StrokeStyle(lineWidth: 2, dash: [5]))
}
}
.disabled(!enabled)
}
}

View File

@ -34,6 +34,8 @@ struct ComposeDraftView: View {
ContentWarningTextField(draft: draft, focusedField: $focusedField)
DraftContentEditor(draft: draft, focusedField: $focusedField)
AttachmentsSection(draft: draft)
}
}
}