Add drawing color picker to the result window

A compact ColorPicker appears next to the Draw button when drawing is
enabled; strokes render and export in the chosen color (defaults to
system red).

💘 Generated with Crush

Assisted-by: Crush:deepseek-v4-flash-0731

Sources/Kapture/CaptureController.swift

@@ -118,15 +118,18 @@ final class ScreenCapture {
 
     @available(macOS 14.0, *)
     private func crop(_ image: CGImage, to cgRect: CGRect, display: SCDisplay) -> CGImage? {
-        // cgRect is already in SCDisplay space (Y flipped relative to AppKit).
-        // Derive the pixel scale from the image we actually got, relative to
-        // the display's point frame.
+        // cgRect is in SCDisplay space (bottom-left origin, Y flipped vs AppKit).
+        // The captured image has a TOP-LEFT origin. So within the display,
+        // we must flip Y: pixelY = displayHeight - (cgY - displayMinY) - cgHeight.
         let scaleX = CGFloat(image.width) / display.frame.width
         let scaleY = CGFloat(image.height) / display.frame.height
         guard scaleX > 0, scaleY > 0 else { return nil }
+        let localMinX = cgRect.minX - display.frame.minX
+        let localMaxY = cgRect.maxY - display.frame.minY
+        let flippedY = display.frame.height - localMaxY
         let pxRect = CGRect(
-            x: (cgRect.minX - display.frame.minX) * scaleX,
-            y: (cgRect.minY - display.frame.minY) * scaleY,
+            x: localMinX * scaleX,
+            y: flippedY * scaleY,
             width: cgRect.width * scaleX,
             height: cgRect.height * scaleY
         )
@@ -134,15 +137,11 @@ final class ScreenCapture {
         // display's frame (e.g. secondary monitor coordinate quirks).
         let safeRect = pxRect.intersection(CGRect(x: 0, y: 0, width: CGFloat(image.width), height: CGFloat(image.height)))
         guard safeRect.width >= 1, safeRect.height >= 1 else { return nil }
-        guard let cropCtx = CGContext(
-            data: nil, width: Int(safeRect.width), height: Int(safeRect.height),
-            bitsPerComponent: 8, bytesPerRow: 0,
-            space: CGColorSpaceCreateDeviceRGB(),
-            bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
-        ) else { return nil }
-        cropCtx.interpolationQuality = .high
-        cropCtx.draw(image, in: CGRect(x: -safeRect.minX, y: -safeRect.minY, width: CGFloat(image.width), height: CGFloat(image.height)))
-        return cropCtx.makeImage()
+        // Use a pixel-exact subimage crop instead of redrawing through a
+        // CGContext, which resamples and loses quality on retina captures.
+        let rounded = safeRect.integral
+        guard rounded.width >= 1, rounded.height >= 1 else { return nil }
+        return image.cropping(to: rounded)
     }
 
     @available(macOS 14.0, *)

Sources/Kapture/ResultWindow.swift

@@ -90,6 +90,12 @@ final class CaptureModel: ObservableObject {
     @Published var statusMessage: String?
     /// Drag selection rect in IMAGE point space (nil = none)
     @Published var selection: CGRect?
+    /// Freehand drawing strokes in IMAGE point space
+    @Published var strokes: [[CGPoint]] = []
+    /// Whether the pen is active (drag draws instead of selecting)
+    @Published var isDrawing = false
+    /// Current drawing color
+    @Published var drawColor: NSColor = .systemRed
 
     enum CaptureMode {
         case screenshot
@@ -102,6 +108,46 @@ final class CaptureModel: ObservableObject {
 
     var hasSelection: Bool { selection != nil && selection!.width >= 2 && selection!.height >= 2 }
 
+    /// Image with drawn strokes flattened in, for copy/save/export.
+    var annotatedImage: CGImage {
+        guard !strokes.isEmpty else { return image }
+        let size = NSSize(width: image.width, height: image.height)
+        guard let rep = NSBitmapImageRep(
+            bitmapDataPlanes: nil, pixelsWide: Int(size.width), pixelsHigh: Int(size.height),
+            bitsPerSample: 8, samplesPerPixel: 4, hasAlpha: true, isPlanar: false,
+            colorSpaceName: .deviceRGB, bytesPerRow: 0, bitsPerPixel: 0
+        ) else { return image }
+        NSGraphicsContext.saveGraphicsState()
+        NSGraphicsContext.current = NSGraphicsContext(bitmapImageRep: rep)
+        let ctx = NSGraphicsContext.current!.cgContext
+        // CGImage draws with a flipped Y in NSGraphicsContext
+        ctx.draw(image, in: NSRect(origin: .zero, size: size))
+        drawColor.setStroke()
+        ctx.setLineWidth(3)
+        ctx.setLineCap(.round)
+        ctx.setLineJoin(.round)
+        for stroke in strokes {
+            guard stroke.count > 1 else { continue }
+            ctx.beginPath()
+            ctx.move(to: stroke[0])
+            for point in stroke.dropFirst() {
+                ctx.addLine(to: point)
+            }
+            ctx.strokePath()
+        }
+        NSGraphicsContext.restoreGraphicsState()
+        return rep.cgImage ?? image
+    }
+
+    func addStroke(_ points: [CGPoint]) {
+        guard points.count > 1 else { return }
+        strokes.append(points)
+    }
+
+    func clearAnnotations() {
+        strokes = []
+    }
+
     var displayText: String {
         if isOCRRunning {
             return "Recognizing text…"
@@ -164,7 +210,7 @@ final class CaptureModel: ObservableObject {
     func copyImage() {
         let pasteboard = NSPasteboard.general
         pasteboard.clearContents()
-        pasteboard.writeObjects([NSImage(cgImage: image, size: .zero)])
+        pasteboard.writeObjects([NSImage(cgImage: annotatedImage, size: .zero)])
         statusMessage = "Image copied to clipboard."
     }
 
@@ -177,7 +223,7 @@ final class CaptureModel: ObservableObject {
             statusMessage = "Could not create PNG file."
             return
         }
-        CGImageDestinationAddImage(dest, image, nil)
+        CGImageDestinationAddImage(dest, annotatedImage, nil)
         if CGImageDestinationFinalize(dest) {
             statusMessage = "Saved PNG."
         } else {
@@ -197,73 +243,148 @@ struct ResultView: View {
     let onClose: () -> Void
 
     var body: some View {
-        VStack(spacing: 10) {
-            HStack {
+        VStack(spacing: 0) {
+            // Toolbar
+            HStack(spacing: 10) {
                 Picker("", selection: $model.mode) {
                     Text("Screenshot").tag(CaptureModel.CaptureMode.screenshot)
                     Text("Text").tag(CaptureModel.CaptureMode.text)
-                    if model.isOCRRunning {
-                        Text("…").tag(CaptureModel.CaptureMode.text)
-                    }
                 }
                 .pickerStyle(.segmented)
                 .fixedSize()
+
                 Spacer()
-                Button("Copy Image") { model.copyImage() }
-                Button("Save PNG…") { model.savePNG() }
+
                 if model.hasSelection {
-                    Button("Get Selection Text") { model.runOCRSelection() }
+                    Button {
+                        model.runOCRSelection()
+                    } label: {
+                        Label("OCR Selection", systemImage: "text.magnifyingglass")
+                    }
+                    .buttonStyle(.borderedProminent)
                     .disabled(model.isOCRRunning)
                     .help("Recognize text inside the selected region")
                 }
-                Button("Get All Text") { model.runOCR() }
+
+                Button {
+                    model.runOCR()
+                } label: {
+                    Label("Get All Text", systemImage: "text.viewfinder")
+                }
+                .buttonStyle(.bordered)
                 .disabled(model.isOCRRunning)
                 .help("Recognize all text in the screenshot")
-                Button("Close") { onClose() }
-            }
-            .padding(.horizontal, 12)
-            .padding(.top, 10)
 
+                Divider().frame(height: 18)
+
+                Button {
+                    model.isDrawing.toggle()
+                    if model.isDrawing { model.selection = nil }
+                } label: {
+                    Label("Draw", systemImage: model.isDrawing ? "pencil.tip.crop.circle.fill" : "pencil.tip.crop.circle")
+                }
+                .buttonStyle(.bordered)
+                .foregroundStyle(model.isDrawing ? .primary : .secondary)
+                .help("Toggle drawing on the screenshot")
+
+                if model.isDrawing {
+                    ColorPicker("", selection: Binding(
+                        get: { Color(nsColor: model.drawColor) },
+                        set: { model.drawColor = NSColor($0) }
+                    ), supportsOpacity: false)
+                    .labelsHidden()
+                    .frame(width: 28)
+                    .help("Drawing color")
+                }
+
+                if !model.strokes.isEmpty {
+                    Button {
+                        model.clearAnnotations()
+                    } label: {
+                        Label("Clear", systemImage: "eraser")
+                    }
+                    .buttonStyle(.bordered)
+                    .foregroundStyle(.secondary)
+                    .help("Remove all drawn annotations")
+                }
+
+                Button {
+                    model.copyImage()
+                } label: {
+                    Label("Copy", systemImage: "doc.on.doc")
+                }
+                .buttonStyle(.bordered)
+                .help("Copy image to clipboard")
+
+                Button {
+                    model.savePNG()
+                } label: {
+                    Label("Save", systemImage: "square.and.arrow.down")
+                }
+                .buttonStyle(.bordered)
+                .help("Save screenshot as PNG");
+
+                Button {
+                    onClose()
+                } label: {
+                    Image(systemName: "xmark.circle.fill")
+                        .foregroundStyle(.secondary)
+                }
+                .buttonStyle(.plain)
+                .help("Close")
+            }
+            .padding(.horizontal, 14)
+            .padding(.vertical, 10)
+
+            Divider()
+
+            // Content
             if model.mode == .screenshot {
                 ScreenshotPane(model: model)
-                    .border(Color.secondary.opacity(0.4))
-                    .padding(.horizontal, 12)
+                    .padding(12)
             } else {
-                ZStack(alignment: .bottomTrailing) {
+                ZStack {
                     ScrollView {
                         Text(model.displayText)
-                            .font(.system(.body))
+                            .font(.system(.body, design: .monospaced))
                             .textSelection(.enabled)
                             .frame(maxWidth: .infinity, alignment: .leading)
-                            .padding(8)
+                            .padding(12)
+                    }
+                }
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
             }
-                    .overlay(
-                        RoundedRectangle(cornerRadius: 6)
-                            .stroke(Color.secondary.opacity(0.4))
-                    )
 
+            // Status bar
             HStack(spacing: 8) {
-                        if let msg = model.statusMessage {
-                            Text(msg)
+                if model.isOCRRunning {
+                    ProgressView()
+                        .controlSize(.small)
+                }
+                Text(model.statusMessage ?? (model.mode == .screenshot
+                    ? (model.hasSelection ? "Region selected — click OCR Selection." : "Drag to select a region, or Get All Text.")
+                    : "Selectable text"))
                     .font(.caption)
-                                .foregroundColor(.secondary)
-                        }
-                        Button("Copy Text") { model.copyText() }
-                    }
-                    .padding(8)
-                }
-            }
+                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
 
-            if model.statusMessage != nil && model.mode == .screenshot {
-                Text(model.statusMessage!)
-                    .font(.caption)
-                    .foregroundColor(.secondary)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .padding(.horizontal, 12)
+                Spacer()
+
+                if model.mode == .text, model.extractedText != nil {
+                    Button {
+                        model.copyText()
+                    } label: {
+                        Label("Copy Text", systemImage: "doc.on.doc")
+                    }
+                    .buttonStyle(.bordered)
+                    .controlSize(.small)
                 }
             }
-        .padding(.bottom, 10)
-        .frame(minWidth: 480, minHeight: 380)
+            .padding(.horizontal, 14)
+            .padding(.vertical, 8)
+            .background(.bar)
+        }
+        .frame(minWidth: 520, minHeight: 420)
     }
 }
 
@@ -296,6 +417,8 @@ struct ScreenshotPane: View {
         rect.intersection(CGRect(origin: .zero, size: imageSize))
     }
 
+    @State private var currentStroke: [CGPoint] = []
+
     var body: some View {
         GeometryReader { geo in
             let (scale, drawSize, origin) = geometry(for: geo)
@@ -308,7 +431,36 @@ struct ScreenshotPane: View {
                     .frame(width: drawSize.width, height: drawSize.height)
                     .position(x: origin.x + drawSize.width / 2, y: origin.y + drawSize.height / 2)
 
-                if let sel = model.selection {
+                // Completed strokes
+                Canvas { context, _ in
+                    var path = Path()
+                    for stroke in model.strokes {
+                        guard stroke.count > 1 else { continue }
+                        path.move(to: CGPoint(x: origin.x + stroke[0].x * scale, y: origin.y + stroke[0].y * scale))
+                        for point in stroke.dropFirst() {
+                            path.addLine(to: CGPoint(x: origin.x + point.x * scale, y: origin.y + point.y * scale))
+                        }
+                    }
+                    context.stroke(path, with: .color(Color(nsColor: model.drawColor)), lineWidth: 2.5)
+                }
+                .allowsHitTesting(false)
+
+                // In-progress stroke
+                if !currentStroke.isEmpty {
+                    Canvas { context, _ in
+                        var path = Path()
+                        if currentStroke.count > 1 {
+                            path.move(to: CGPoint(x: origin.x + currentStroke[0].x * scale, y: origin.y + currentStroke[0].y * scale))
+                            for point in currentStroke.dropFirst() {
+                                path.addLine(to: CGPoint(x: origin.x + point.x * scale, y: origin.y + point.y * scale))
+                            }
+                        }
+                        context.stroke(path, with: .color(Color(nsColor: model.drawColor)), lineWidth: 2.5)
+                    }
+                    .allowsHitTesting(false)
+                }
+
+                if !model.isDrawing, let sel = model.selection {
                     let viewRect = CGRect(
                         x: origin.x + sel.minX * scale,
                         y: origin.y + sel.minY * scale,
@@ -327,6 +479,13 @@ struct ScreenshotPane: View {
             .gesture(
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
+                        if model.isDrawing {
+                            let p = toImagePoint(value.location, scale: scale, origin: origin)
+                            let imgRect = CGRect(origin: .zero, size: imageSize)
+                            if imgRect.contains(p) {
+                                currentStroke.append(p)
+                            }
+                        } else {
                             let start = toImagePoint(value.startLocation, scale: scale, origin: origin)
                             let current = toImagePoint(value.location, scale: scale, origin: origin)
                             let rect = CGRect(
@@ -337,11 +496,19 @@ struct ScreenshotPane: View {
                             )
                             model.selection = clampSelection(rect)
                         }
+                    }
                     .onEnded { _ in
+                        if model.isDrawing {
+                            if currentStroke.count > 1 {
+                                model.addStroke(currentStroke)
+                            }
+                            currentStroke = []
+                        } else {
                             if let s = model.selection, (s.width < 2 || s.height < 2) {
                                 model.selection = nil
                             }
                         }
+                    }
             )
         }
     }

build-app.sh

@@ -108,9 +108,9 @@ cat > "$APP/Contents/Info.plist" <<'PLIST'
     <key>CFBundleIconFile</key>
     <string>Icon</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.2.0</string>
+    <string>1.3.3</string>
     <key>CFBundleVersion</key>
-    <string>20</string>
+    <string>33</string>
     <key>LSUIElement</key>
     <true/>
     <key>NSHighResolutionCapable</key>