Compose attachment section
This commit is contained in:
parent
2fb76e322a
commit
b9e3d8ec5e
|
@ -12,7 +12,18 @@ 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
|
||||
|
||||
|
@ -20,6 +31,8 @@ struct AttachmentThumbnailView: View {
|
|||
switch mode {
|
||||
case .empty:
|
||||
Image(systemName: "photo")
|
||||
.imageScale(.large)
|
||||
.foregroundStyle(.gray)
|
||||
.task {
|
||||
await loadThumbnail()
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -34,6 +34,8 @@ struct ComposeDraftView: View {
|
|||
ContentWarningTextField(draft: draft, focusedField: $focusedField)
|
||||
|
||||
DraftContentEditor(draft: draft, focusedField: $focusedField)
|
||||
|
||||
AttachmentsSection(draft: draft)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue