Custom Annotation Inspector with SwiftUI for iOS

1
//
2
//  Copyright © 2021-2025 PSPDFKit GmbH. All rights reserved.
3
//
4
//  The Nutrient sample applications are licensed with a modified BSD license.
5
//  Please see License for details. This notice may not be removed from this file.
6
//
7

8
import PSPDFKit
9
import PSPDFKitUI
10
import SwiftUI
11

12
/// This example demonstrates a way to load parts of a document on demand in SwiftUI.
13
class SwiftUICustomInspectorExample: Example {
14

15
    override init() {
16
        super.init()
17

18
        title = "SwiftUI Custom Annotation Inspector Example"
19
        contentDescription = "Presents a custom SwiftUI-based Inspector written in SwiftUI."
20
        category = .swiftUI
21
        priority = 21
22
    }
23

24
    override func invoke(with delegate: ExampleRunnerDelegate) -> UIViewController? {
25
        let document = AssetLoader.writableDocument(for: .welcome, overrideIfExists: false)
26
        let swiftUIView = SwiftUICustomInspectorExampleView(document: document)
27
        return UIHostingController(rootView: swiftUIView, largeTitleDisplayMode: .never)
28
    }
29
}
30

31
// Coordinator that handles custom inspector presentation.
32
@MainActor private class CustomInspectorPresentationManager: ObservableObject {
33
    weak var pdfController: PDFViewController?
34

35
    func presentInspector(from rect: CGRect, animated: Bool) {
36
        guard let pdfController else { return }
37

38
        // Build SwiftUI custom Inspector and pass on selected annotations.
39
        let inspector = CustomInspectorView(annotations: pdfController.selectedAnnotations)
40

41
        // Prepare UIKit hosting container
42
        let inspectorController = UIHostingController(rootView: inspector, largeTitleDisplayMode: .never)
43
        inspectorController.modalPresentationStyle = .popover
44
        inspectorController.popoverPresentationController?.sourceRect = rect
45
        inspectorController.popoverPresentationController?.sourceView = pdfController.view
46

47
        // Manually set preferredContentSize for the popover
48
        let popoverMaxSize = CGSize(width: 250, height: 500)
49
        inspectorController.preferredContentSize = inspectorController.sizeThatFits(in: popoverMaxSize)
50

51
        // Finally, present it
52
        pdfController.present(inspectorController, animated: animated)
53
    }
54
}
55

56
private struct SwiftUICustomInspectorExampleView: View {
57
    let document: Document
58
    @StateObject var inspectorPresentationManager = CustomInspectorPresentationManager()
59
    @PDFView.Scope private var scope
60

61
    var body: some View {
62
        PDFView(document: document)
63
            .scrollDirection(.vertical)
64
            .pageTransition(.scrollContinuous)
65
            .pageMode(.single)
66
            .spreadFitting(.adaptive)
67
            .userInterfaceViewMode(.always)
68
            .updateControllerConfiguration { pdfController in
69
                // We need a reference of the PDFController in our custom presentation manager
70
                inspectorPresentationManager.pdfController = pdfController
71
            }
72
            .onShouldShowController { controller, options, animated in
73
                // If the SDK is about to present the annotation style view controller; present manually.
74
                guard controller is AnnotationStyleViewController,
75
                      let sourceRect = options?[PresentationOption.sourceRect.rawValue] as? CGRect else { return true }
76

77
                // Call logic to present custom inspector and indicate that custom logic takes over (via returning false)
78
                inspectorPresentationManager.presentInspector(from: sourceRect, animated: animated)
79
                return false
80
            }
81
            .showDocumentTitle()
82
            .toolbar {
83
                DefaultToolbarButtons()
84
            }
85
            .pdfViewScope(scope)
86
    }
87
}
88

89
private struct CustomInspectorView: View {
90
    var annotations: [Annotation]
91

92
    // Helper to modify annotations color
93
    private func changeAnnotationsColor(to color: UIColor) {
94
        annotations.forEach { annotation in
95
            annotation.color = color
96

97
            // Important: If we change annotation properties, post a change notification to update UI.
98
            // https://www.nutrient.io/guides/ios/annotations/the-annotation-object-model/
99
            NotificationCenter.default.post(name: .PSPDFAnnotationChanged,
100
                                            object: annotation,
101
                                            userInfo: [PSPDFAnnotationChangedNotificationKeyPathKey: ["color"]])
102
        }
103
    }
104

105
    var body: some View {
106
        NavigationView {
107
            Form {
108
                Button("Make Yellow") { changeAnnotationsColor(to: .yellow) }
109
                Button("Make Green") { changeAnnotationsColor(to: .green) }
110
                Button("Make Blue") { changeAnnotationsColor(to: .blue) }
111
            }
112
            .navigationBarTitle("Inspector", displayMode: .inline)
113
        }
114
        .frame(width: 300, height: 300, alignment: .topTrailing)
115
    }
116
}