PaperKit Canvas Framework

import UIKit
import PaperKit

class ComicEditorViewController: UIViewController {

    private var paperVC: PaperMarkupViewController!

    // Sample panel frames in canvas coordinates
    private let panelFrames: [CGRect] = [
        CGRect(x: 20, y: 20, width: 340, height: 220),
        CGRect(x: 20, y: 260, width: 160, height: 180),
        CGRect(x: 200, y: 260, width: 160, height: 180)
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1. Create the markup view controller
        paperVC = PaperMarkupViewController()
        paperVC.delegate = self
        addChild(paperVC)
        view.addSubview(paperVC.view)
        paperVC.view.frame = view.bounds
        paperVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        paperVC.didMove(toParent: self)

        setupTemplateMarkup()
    }

    private func setupTemplateMarkup() {
        // 2. Read existing markup and add shape elements for each panel
        var markup = paperVC.markup

        let panelElements: [any Markup] = panelFrames.map { frame in
            var shape = RectangleMarkup()
            shape.frame = frame
            shape.strokeColor = UIColor.systemIndigo
            shape.fillColor = UIColor.systemIndigo.withAlphaComponent(0.1)
            // 3. Lock panels so users cannot move, delete, or restyle them
            shape.allowedInteractions = .readOnly
            return shape
        }

        // 4. Insert panels as subelements
        var elements = markup.subelements
        for panel in panelElements {
            elements.append(panel)
        }
        markup.subelements = elements
        paperVC.markup = markup

        // 5. Add adornments — interactive overlays anchored to canvas coords
        //    They are NOT saved with the document
        let adornments: [MarkupAdornment] = panelFrames.map { frame in
            var adornment = MarkupAdornment()
            adornment.id = UUID().uuidString
            adornment.anchorPoint = CGPoint(
                x: frame.midX,
                y: frame.midY
            )
            adornment.imageConfiguration = UIImage.SymbolConfiguration(pointSize: 28)
                .applying(UIImage.SymbolConfiguration(paletteColors: [.white]))
            adornment.image = UIImage(systemName: "plus.circle.fill",
                                      withConfiguration: adornment.imageConfiguration)
            return adornment
        }
        paperVC.adornments = adornments
    }
}

// MARK: - PaperMarkupViewControllerDelegate
extension ComicEditorViewController: PaperMarkupViewControllerDelegate {

    func paperMarkupViewController(
        _ controller: PaperMarkupViewController,
        didTapAdornmentWithID id: String
    ) {
        // Respond to taps on the floating panel buttons
        print("Adornment tapped: \(id) — present image picker or AI generator here")
    }
}