How to toggle a PKCanvasView's editability - swift

Question

I am using PencilKit to allow the user to draw to a custom canvas and among the various functionalities, I want to allow the user to decide if the canvas is editable or not. If it's editable then the drawing tool is visible and the canvas accepts both finger and pencil gestures, otherwise it accepts only gestures from the pencil and finger gestures are used for other things.
This is the canvas view that I have created:
struct CanvasView {
#Binding var canvasView: PKCanvasView
#State var toolPicker: PKToolPicker = PKToolPicker()
#Binding var editable: Bool
}
// MARK: - UIViewRepresentable
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
canvasView.tool = PKInkingTool(.pen, color: .gray, width: 10)
canvasView.backgroundColor = .clear
canvasView.isOpaque = false
canvasView.drawingPolicy = editable ? .anyInput : .pencilOnly
canvasView.isUserInteractionEnabled = editable
toolPicker.setVisible(editable, forFirstResponder: canvasView)
toolPicker.addObserver(canvasView)
canvasView.becomeFirstResponder()
return canvasView
}
func updateUIView(_ uiView: UIViewType, context: Context) {}
}
And this is my content view:
struct ContentView: View {
#State private var canvasView = PKCanvasView()
#State private var isDrawing = true
...
var body: some View {
NavigationView {
ZStack {
...
CanvasView(canvasView: $canvasView, editable: self.$isDrawing)
.allowsHitTesting(false)
.navigationBarTitle(Text("Drawing Demo"), displayMode: .inline)
.navigationBarItems(leading: HStack{}, trailing: HStack {
...
Button(action: toggleIsDrawing) {
Image(systemName: "pencil.tip.crop.circle")
}
})
}
}.navigationViewStyle(StackNavigationViewStyle())
}
}
...
// MARK: - Actions
private extension ContentView {
...
func toggleIsDrawing() {
self.isDrawing = !self.isDrawing
}
So in short: in order to toggle my canvas view's editability I have a #State var (isDrawing), which is toggled every time that the user clicks on a pencil icon in the navigation bar. This is bound with a #Binding property with the canvas view's editable property. But the problem is that nothing triggers my canvas view's makeUIView(context:) method again, so in practive nothing changes. I was expecting a change on my #State var (isDrawing) to cause the whole view hierarchy to be redrawn and thus every property recalculated, and also the makeUIView() method recalled but apparently that's not the case.How would you solve this problem?

Answer 1

That scenario is what the updateUIView function is for -- it allows you to modify your view when your #State or properties change.
Also, you probably want to remove .allowsHitTesting(false), as it seems to render the PencilKit view unusable.
extension CanvasView: UIViewRepresentable {
func makeUIView(context: Context) -> some UIView {
canvasView.tool = PKInkingTool(.pen, color: .gray, width: 10)
canvasView.backgroundColor = .clear
canvasView.isOpaque = false
canvasView.becomeFirstResponder()
return canvasView
}
func updateUIView(_ uiView: UIViewType, context: Context) {
canvasView.drawingPolicy = editable ? .anyInput : .pencilOnly
canvasView.isUserInteractionEnabled = editable
toolPicker.setVisible(editable, forFirstResponder: canvasView)
toolPicker.addObserver(canvasView)
}
}
CanvasView(canvasView: $canvasView, editable: self.$isDrawing)
//.allowsHitTesting(false)