feat(notes): make the canvas resizable, add pinch/double click gestures, make sure the notes don't cut off

This commit is contained in:
2025-12-10 14:55:40 +01:00
parent b7624eae6c
commit 17f4329ff2
2 changed files with 97 additions and 10 deletions

View File

@@ -25,6 +25,11 @@ struct HandwritingCanvasView: UIViewRepresentable {
// Store canvas in coordinator for later access
context.coordinator.canvasView = canvasView
// Restore saved tool if available
if let savedTool = Coordinator.savedTool {
canvasView.tool = savedTool
}
return canvasView
}
@@ -45,6 +50,8 @@ struct HandwritingCanvasView: UIViewRepresentable {
}
class Coordinator: NSObject, PKCanvasViewDelegate {
static var savedTool: PKTool?
var drawing: Binding<PKDrawing>
var onDrawingChanged: ((PKDrawing) -> Void)?
var canvasView: PKCanvasView?
@@ -78,6 +85,9 @@ struct HandwritingCanvasView: UIViewRepresentable {
func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
drawing.wrappedValue = canvasView.drawing
onDrawingChanged?(canvasView.drawing)
// Save the current tool for persistence
Coordinator.savedTool = canvasView.tool
}
}
}

View File

@@ -30,21 +30,47 @@ struct ScrollableCanvasView: UIViewRepresentable {
// Allow finger touches to pass through for scrolling
canvasView.allowsFingerDrawing = false
// Set initial canvas size - will be updated in updateUIView with proper bounds
let canvasWidth: CGFloat = 800 // Placeholder width
let canvasHeight: CGFloat = 3000 // Start with a large canvas
// Set initial canvas size based on drawing bounds
let drawingBounds = drawing.bounds
let canvasWidth: CGFloat
let canvasHeight: CGFloat
if drawingBounds.isEmpty {
canvasWidth = 2000
canvasHeight = 3000
} else {
canvasWidth = max(drawingBounds.maxX + 500, 2000)
canvasHeight = max(drawingBounds.maxY + 500, 3000)
}
canvasView.frame = CGRect(x: 0, y: 0, width: canvasWidth, height: canvasHeight)
scrollView.addSubview(canvasView)
scrollView.contentSize = canvasView.frame.size
// Allow scrolling beyond content
// Allow scrolling beyond content in both directions
scrollView.alwaysBounceVertical = true
scrollView.alwaysBounceHorizontal = true
// Enable zooming
scrollView.minimumZoomScale = 0.25 // Zoom out to 25% (see full canvas)
scrollView.maximumZoomScale = 2.0 // Zoom in to 200%
scrollView.delegate = context.coordinator
// Store references in coordinator
context.coordinator.canvasView = canvasView
context.coordinator.scrollView = scrollView
// Add double-tap gesture for zoom toggle
let doubleTapGesture = UITapGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handleDoubleTap(_:)))
doubleTapGesture.numberOfTapsRequired = 2
scrollView.addGestureRecognizer(doubleTapGesture)
// Restore saved tool if available
if let savedTool = Coordinator.savedTool {
canvasView.tool = savedTool
}
return scrollView
}
@@ -56,23 +82,24 @@ struct ScrollableCanvasView: UIViewRepresentable {
}
canvasView.isUserInteractionEnabled = isEditable
// Update canvas width to match scroll view bounds (once they're valid)
let canvasWidth = scrollView.bounds.width > 0 ? scrollView.bounds.width : 800
// Expand canvas if drawing extends beyond current bounds
let drawingBounds = drawing.bounds
let currentWidth = canvasView.frame.width
let currentHeight = canvasView.frame.height
let requiredWidth: CGFloat
let requiredHeight: CGFloat
if drawingBounds.isEmpty {
requiredWidth = 2000
requiredHeight = 3000
} else {
requiredWidth = max(drawingBounds.maxX + 500, 2000) // Add padding to the right
requiredHeight = max(drawingBounds.maxY + 500, 3000) // Add padding below
}
// Update canvas size if needed
if requiredHeight > currentHeight || abs(canvasView.frame.width - canvasWidth) > 1 {
canvasView.frame = CGRect(x: 0, y: 0, width: canvasWidth, height: requiredHeight)
if requiredWidth > currentWidth || requiredHeight > currentHeight {
canvasView.frame = CGRect(x: 0, y: 0, width: requiredWidth, height: requiredHeight)
scrollView.contentSize = canvasView.frame.size
}
@@ -86,7 +113,9 @@ struct ScrollableCanvasView: UIViewRepresentable {
Coordinator(drawing: $drawing, onDrawingChanged: onDrawingChanged)
}
class Coordinator: NSObject, PKCanvasViewDelegate {
class Coordinator: NSObject, PKCanvasViewDelegate, UIScrollViewDelegate {
static var savedTool: PKTool?
var drawing: Binding<PKDrawing>
var onDrawingChanged: ((PKDrawing) -> Void)?
var canvasView: PKCanvasView?
@@ -121,6 +150,54 @@ struct ScrollableCanvasView: UIViewRepresentable {
func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
drawing.wrappedValue = canvasView.drawing
onDrawingChanged?(canvasView.drawing)
// Save the current tool for persistence
Coordinator.savedTool = canvasView.tool
}
// MARK: - UIScrollViewDelegate for zooming
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return canvasView
}
func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
// Snap back to normal zoom (1.0) if close enough
if scale > 0.9 && scale < 1.1 {
UIView.animate(withDuration: 0.2) {
scrollView.setZoomScale(1.0, animated: false)
}
}
}
@objc func handleDoubleTap(_ gesture: UITapGestureRecognizer) {
guard let scrollView = scrollView else { return }
let currentScale = scrollView.zoomScale
if abs(currentScale - 1.0) < 0.01 {
// Currently at 100%, zoom in to 1.5x
let location = gesture.location(in: canvasView)
let zoomRect = zoomRect(for: 1.5, center: location)
scrollView.zoom(to: zoomRect, animated: true)
} else {
// Not at 100%, zoom back to 100%
scrollView.setZoomScale(1.0, animated: true)
}
}
private func zoomRect(for scale: CGFloat, center: CGPoint) -> CGRect {
guard let scrollView = scrollView else { return .zero }
var zoomRect = CGRect.zero
zoomRect.size.width = scrollView.frame.size.width / scale
zoomRect.size.height = scrollView.frame.size.height / scale
// Center on the tap location
zoomRect.origin.x = center.x - (zoomRect.size.width / 2.0)
zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0)
return zoomRect
}
}
}