Fix rendering quality and add line snap + box tool

Rendering fixes for e-ink displays:
- Remove backing bitmap (was 1/4 resolution, caused blurry strokes)
- Draw strokes directly as paths for pixel-perfect rendering
- Disable anti-aliasing on stroke and grid paint (no edge fading)
- Grid: darker color (rgb 180,180,180), 2pt stroke width for crispness

New features:
- Line snap: hold pen still for 1.5s to snap to straight line from origin
- Box tool: draw rectangles by dragging corner to corner

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/src/main/kotlin/net/metacircular/engpad/ui/editor/CanvasState.kt

@@ -7,6 +7,7 @@ enum class Tool {
     PEN_MEDIUM,  // 0.50mm = 5.91pt at 300 DPI
     ERASER,
     SELECT,
+    BOX,         // Draw rectangles
 }
 
 data class CanvasState(
@@ -20,6 +21,7 @@ data class CanvasState(
         get() = when (tool) {
             Tool.PEN_FINE -> 4.49f
             Tool.PEN_MEDIUM -> 5.91f
+            Tool.BOX -> 4.49f  // Box uses fine pen width
             else -> 0f
         }
 

app/src/main/kotlin/net/metacircular/engpad/ui/editor/PadCanvasView.kt

@@ -1,18 +1,17 @@
 package net.metacircular.engpad.ui.editor
 
 import android.content.Context
-import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Matrix
 import android.graphics.Paint
 import android.graphics.Path
+import android.os.Handler
+import android.os.Looper
 import android.view.MotionEvent
 import android.view.ScaleGestureDetector
 import android.view.View
-import androidx.core.graphics.createBitmap
 import androidx.core.graphics.withMatrix
-import androidx.core.graphics.withScale
 import net.metacircular.engpad.data.db.toFloatArray
 import net.metacircular.engpad.data.model.Stroke
 
@@ -29,7 +28,6 @@ class PadCanvasView(context: Context) : View(context) {
     var canvasState = CanvasState()
         set(value) {
             field = value
-            // Sync local zoom/pan from state (e.g. initial load)
             zoom = value.zoom
             panX = value.panX
             panY = value.panY
@@ -39,15 +37,26 @@ class PadCanvasView(context: Context) : View(context) {
 
     // --- Strokes ---
     private val completedStrokes = mutableListOf<StrokeRender>()
-    private var backingBitmap: Bitmap? = null
-    private var backingCanvas: Canvas? = null
-    private var bitmapDirty = true
 
     // --- In-progress stroke ---
     private var currentPath: Path? = null
     private var currentPaint: Paint? = null
     private val currentPoints = mutableListOf<Float>()
 
+    // --- Line snap ---
+    private var strokeOriginX = 0f
+    private var strokeOriginY = 0f
+    private var isSnappedToLine = false
+    private val handler = Handler(Looper.getMainLooper())
+    private val snapRunnable = Runnable { snapToLine() }
+
+    // --- Box drawing ---
+    private var boxStartX = 0f
+    private var boxStartY = 0f
+    private var boxEndX = 0f
+    private var boxEndY = 0f
+    private var isDrawingBox = false
+
     // --- Selection ---
     private var selectionStartX = 0f
     private var selectionStartY = 0f
@@ -70,7 +79,7 @@ class PadCanvasView(context: Context) : View(context) {
     var onSelectionComplete: ((selectedIds: Set<Long>) -> Unit)? = null
     var onSelectionMoved: ((selectedIds: Set<Long>, deltaX: Float, deltaY: Float) -> Unit)? = null
 
-    // --- Zoom/pan state (managed locally for responsiveness) ---
+    // --- Zoom/pan state ---
     private var zoom = 1f
     private var panX = 0f
     private var panY = 0f
@@ -85,7 +94,6 @@ class PadCanvasView(context: Context) : View(context) {
                 val newZoom = (zoom * detector.scaleFactor)
                     .coerceIn(CanvasState.MIN_ZOOM, CanvasState.MAX_ZOOM)
                 if (newZoom != zoom) {
-                    // Zoom around the focal point
                     val focusX = detector.focusX
                     val focusY = detector.focusY
                     panX += (focusX - panX) * (1 - newZoom / zoom)
@@ -103,21 +111,21 @@ class PadCanvasView(context: Context) : View(context) {
         },
     )
 
-    // --- Grid paint ---
+    // --- Grid paint: crisp, uniform lines ---
     private val gridPaint = Paint().apply {
-        color = Color.LTGRAY
+        color = Color.rgb(180, 180, 180)  // Medium gray, visible on white
-        strokeWidth = 1f
+        strokeWidth = 2f                   // 2pt at 300 DPI = thin but visible
         style = Paint.Style.STROKE
-        isAntiAlias = false
+        isAntiAlias = false                // Crisp pixel-aligned lines on e-ink
     }
 
     // --- Selection paint ---
     private val selectionRectPaint = Paint().apply {
         color = Color.BLUE
-        strokeWidth = 2f
+        strokeWidth = 4f
         style = Paint.Style.STROKE
         pathEffect = android.graphics.DashPathEffect(floatArrayOf(20f, 20f), 0f)
-        isAntiAlias = true
+        isAntiAlias = false
     }
 
     private val selectionHighlightPaint = Paint().apply {
@@ -125,15 +133,20 @@ class PadCanvasView(context: Context) : View(context) {
         style = Paint.Style.FILL
     }
 
-    // --- Reusable rect for draw operations ---
     private val tempBounds = android.graphics.RectF()
 
-    // --- Page background ---
     private val pagePaint = Paint().apply {
         color = Color.WHITE
         style = Paint.Style.FILL
     }
 
+    // --- Box preview paint ---
+    private val boxPreviewPaint = Paint().apply {
+        color = Color.BLACK
+        style = Paint.Style.STROKE
+        isAntiAlias = false
+    }
+
     init {
         setBackgroundColor(Color.DKGRAY)
     }
@@ -148,7 +161,6 @@ class PadCanvasView(context: Context) : View(context) {
             val paint = buildPaint(stroke.penSize, stroke.color)
             completedStrokes.add(StrokeRender(path, paint, stroke.id))
         }
-        bitmapDirty = true
         invalidate()
     }
 
@@ -156,13 +168,11 @@ class PadCanvasView(context: Context) : View(context) {
         val path = buildPathFromPoints(points)
         val paint = buildPaint(penSize, color)
         completedStrokes.add(StrokeRender(path, paint, id))
-        bitmapDirty = true
         invalidate()
     }
 
     fun removeStroke(id: Long) {
         completedStrokes.removeAll { it.id == id }
-        bitmapDirty = true
         invalidate()
     }
 
@@ -171,13 +181,12 @@ class PadCanvasView(context: Context) : View(context) {
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
         rebuildViewMatrix()
-        bitmapDirty = true
     }
 
     override fun onDraw(canvas: Canvas) {
         super.onDraw(canvas)
         canvas.withMatrix(viewMatrix) {
-            // Draw page background
+            // Page background
             drawRect(
                 0f, 0f,
                 canvasState.pageSize.widthPt.toFloat(),
@@ -185,27 +194,32 @@ class PadCanvasView(context: Context) : View(context) {
                 pagePaint,
             )
 
-            // Draw grid
+            // Grid
             drawGrid(this)
 
-            // Draw completed strokes from backing bitmap
+            // Completed strokes — draw directly as paths (no backing bitmap)
-            ensureBacking()
+            for (sr in completedStrokes) {
-            backingBitmap?.let { bmp ->
+                drawPath(sr.path, sr.paint)
-                // Scale backing bitmap back up (it's rendered at 1/4 resolution)
-                val scaleUp = 1f / BACKING_SCALE
-                withScale(scaleUp, scaleUp) {
-                    drawBitmap(bmp, 0f, 0f, null)
-                }
             }
 
-            // Draw in-progress stroke
+            // In-progress stroke
             currentPath?.let { path ->
                 currentPaint?.let { paint ->
                     drawPath(path, paint)
                 }
             }
 
-            // Draw selection highlights
+            // Box preview
+            if (isDrawingBox) {
+                boxPreviewPaint.strokeWidth = canvasState.penWidthPt
+                val left = minOf(boxStartX, boxEndX)
+                val top = minOf(boxStartY, boxEndY)
+                val right = maxOf(boxStartX, boxEndX)
+                val bottom = maxOf(boxStartY, boxEndY)
+                drawRect(left, top, right, bottom, boxPreviewPaint)
+            }
+
+            // Selection highlights
             if (selectedStrokeIds.isNotEmpty()) {
                 for (sr in completedStrokes) {
                     if (sr.id in selectedStrokeIds) {
@@ -216,7 +230,7 @@ class PadCanvasView(context: Context) : View(context) {
                 }
             }
 
-            // Draw selection rectangle
+            // Selection rectangle
             if (isSelecting) {
                 val left = minOf(selectionStartX, selectionEndX)
                 val top = minOf(selectionStartY, selectionEndY)
@@ -244,34 +258,9 @@ class PadCanvasView(context: Context) : View(context) {
         }
     }
 
-    private fun ensureBacking() {
-        val pageW = canvasState.pageSize.widthPt
-        val pageH = canvasState.pageSize.heightPt
-
-        val bmpW = (pageW * BACKING_SCALE).toInt()
-        val bmpH = (pageH * BACKING_SCALE).toInt()
-
-        if (backingBitmap == null || backingBitmap!!.width != bmpW || backingBitmap!!.height != bmpH) {
-            backingBitmap?.recycle()
-            backingBitmap = createBitmap(bmpW, bmpH)
-            backingCanvas = Canvas(backingBitmap!!)
-            bitmapDirty = true
-        }
-
-        if (bitmapDirty) {
-            backingBitmap!!.eraseColor(Color.TRANSPARENT)
-            backingCanvas!!.withScale(BACKING_SCALE, BACKING_SCALE) {
-                for (sr in completedStrokes) {
-                    drawPath(sr.path, sr.paint)
-                }
-            }
-            bitmapDirty = false
-        }
-    }
-
     // --- Input handling ---
 
-    @Suppress("ClickableViewAccessibility") // Drawing view — clicks not applicable
+    @Suppress("ClickableViewAccessibility")
     override fun onTouchEvent(event: MotionEvent): Boolean {
         return when (event.getToolType(0)) {
             MotionEvent.TOOL_TYPE_STYLUS, MotionEvent.TOOL_TYPE_ERASER -> handleStylusInput(event)
@@ -292,23 +281,56 @@ class PadCanvasView(context: Context) : View(context) {
         if (canvasState.tool == Tool.SELECT) {
             return handleSelectInput(event)
         }
+        if (canvasState.tool == Tool.BOX) {
+            return handleBoxInput(event)
+        }
 
         when (event.actionMasked) {
             MotionEvent.ACTION_DOWN -> {
                 val pt = screenToCanonical(event.x, event.y)
+                strokeOriginX = pt[0]
+                strokeOriginY = pt[1]
+                isSnappedToLine = false
                 currentPoints.clear()
                 currentPoints.add(pt[0])
                 currentPoints.add(pt[1])
                 currentPath = Path().apply { moveTo(pt[0], pt[1]) }
                 currentPaint = buildPaint(canvasState.penWidthPt, Color.BLACK)
+                // Start snap timer
+                handler.postDelayed(snapRunnable, LINE_SNAP_DELAY_MS)
                 invalidate()
                 return true
             }
             MotionEvent.ACTION_MOVE -> {
                 val path = currentPath ?: return true
-                // Process historical points for smoothness
+                // Cancel snap timer on significant movement
+                if (!isSnappedToLine) {
+                    val pt = screenToCanonical(event.x, event.y)
+                    val dx = pt[0] - strokeOriginX
+                    val dy = pt[1] - strokeOriginY
+                    val dist = Math.sqrt((dx * dx + dy * dy).toDouble()).toFloat()
+                    if (dist > LINE_SNAP_MOVE_THRESHOLD) {
+                        handler.removeCallbacks(snapRunnable)
+                    }
+                }
+
+                if (isSnappedToLine) {
+                    // In snap mode: draw straight line from origin to current point
+                    val pt = screenToCanonical(event.x, event.y)
+                    path.reset()
+                    path.moveTo(strokeOriginX, strokeOriginY)
+                    path.lineTo(pt[0], pt[1])
+                    currentPoints.clear()
+                    currentPoints.add(strokeOriginX)
+                    currentPoints.add(strokeOriginY)
+                    currentPoints.add(pt[0])
+                    currentPoints.add(pt[1])
+                } else {
+                    // Normal freehand drawing
                     for (i in 0 until event.historySize) {
-                    val pt = screenToCanonical(event.getHistoricalX(i), event.getHistoricalY(i))
+                        val pt = screenToCanonical(
+                            event.getHistoricalX(i), event.getHistoricalY(i),
+                        )
                         path.lineTo(pt[0], pt[1])
                         currentPoints.add(pt[0])
                         currentPoints.add(pt[1])
@@ -317,11 +339,14 @@ class PadCanvasView(context: Context) : View(context) {
                     path.lineTo(pt[0], pt[1])
                     currentPoints.add(pt[0])
                     currentPoints.add(pt[1])
+                }
                 invalidate()
                 return true
             }
             MotionEvent.ACTION_UP -> {
-                if (currentPoints.size >= 4) { // At least 2 points (x,y pairs)
+                handler.removeCallbacks(snapRunnable)
+                isSnappedToLine = false
+                if (currentPoints.size >= 4) {
                     val points = currentPoints.toFloatArray()
                     onStrokeCompleted?.invoke(canvasState.penWidthPt, Color.BLACK, points)
                 }
@@ -336,6 +361,62 @@ class PadCanvasView(context: Context) : View(context) {
         return true
     }
 
+    private fun snapToLine() {
+        if (currentPath != null) {
+            isSnappedToLine = true
+            // Reset path to just origin — next MOVE will draw the straight line
+            currentPath?.reset()
+            currentPath?.moveTo(strokeOriginX, strokeOriginY)
+            currentPoints.clear()
+            currentPoints.add(strokeOriginX)
+            currentPoints.add(strokeOriginY)
+            invalidate()
+        }
+    }
+
+    // --- Box drawing ---
+
+    private fun handleBoxInput(event: MotionEvent): Boolean {
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                val pt = screenToCanonical(event.x, event.y)
+                boxStartX = pt[0]
+                boxStartY = pt[1]
+                boxEndX = pt[0]
+                boxEndY = pt[1]
+                isDrawingBox = true
+                invalidate()
+                return true
+            }
+            MotionEvent.ACTION_MOVE -> {
+                val pt = screenToCanonical(event.x, event.y)
+                boxEndX = pt[0]
+                boxEndY = pt[1]
+                invalidate()
+                return true
+            }
+            MotionEvent.ACTION_UP -> {
+                isDrawingBox = false
+                val left = minOf(boxStartX, boxEndX)
+                val top = minOf(boxStartY, boxEndY)
+                val right = maxOf(boxStartX, boxEndX)
+                val bottom = maxOf(boxStartY, boxEndY)
+                // Create a box as 4-point stroke (rectangle path)
+                val points = floatArrayOf(
+                    left, top,
+                    right, top,
+                    right, bottom,
+                    left, bottom,
+                    left, top, // close the rectangle
+                )
+                onStrokeCompleted?.invoke(canvasState.penWidthPt, Color.BLACK, points)
+                invalidate()
+                return true
+            }
+        }
+        return true
+    }
+
     private fun handleFingerInput(event: MotionEvent): Boolean {
         scaleGestureDetector.onTouchEvent(event)
 
@@ -365,7 +446,6 @@ class PadCanvasView(context: Context) : View(context) {
                 onZoomPanChanged?.invoke(zoom, panX, panY)
             }
             MotionEvent.ACTION_POINTER_DOWN -> {
-                // When a second finger goes down, update last touch to avoid jump
                 val newIndex = event.actionIndex
                 lastTouchX = event.getX(newIndex)
                 lastTouchY = event.getY(newIndex)
@@ -375,7 +455,6 @@ class PadCanvasView(context: Context) : View(context) {
                 val upIndex = event.actionIndex
                 val upId = event.getPointerId(upIndex)
                 if (upId == activePointerId) {
-                    // Switch to the other finger
                     val newIndex = if (upIndex == 0) 1 else 0
                     lastTouchX = event.getX(newIndex)
                     lastTouchY = event.getY(newIndex)
@@ -393,12 +472,10 @@ class PadCanvasView(context: Context) : View(context) {
             MotionEvent.ACTION_DOWN -> {
                 val pt = screenToCanonical(event.x, event.y)
                 if (selectedStrokeIds.isNotEmpty() && isPointInSelectionBounds(pt[0], pt[1])) {
-                    // Start dragging existing selection
                     isDraggingSelection = true
                     dragStartX = pt[0]
                     dragStartY = pt[1]
                 } else {
-                    // Start new selection rectangle
                     clearSelection()
                     selectionStartX = pt[0]
                     selectionStartY = pt[1]
@@ -417,7 +494,6 @@ class PadCanvasView(context: Context) : View(context) {
                     offsetSelectedStrokes(dx, dy)
                     dragStartX = pt[0]
                     dragStartY = pt[1]
-                    bitmapDirty = true
                 } else if (isSelecting) {
                     selectionEndX = pt[0]
                     selectionEndY = pt[1]
@@ -431,7 +507,6 @@ class PadCanvasView(context: Context) : View(context) {
                     val totalDx = pt[0] - selectionStartX
                     val totalDy = pt[1] - selectionStartY
                     isDraggingSelection = false
-                    // Notify of move (ViewModel handles persistence)
                     if (selectedStrokeIds.isNotEmpty()) {
                         onSelectionMoved?.invoke(selectedStrokeIds, totalDx, totalDy)
                     }
@@ -458,9 +533,8 @@ class PadCanvasView(context: Context) : View(context) {
 
         selectedStrokeIds.clear()
         for (sr in completedStrokes) {
-            val bounds = android.graphics.RectF()
+            sr.path.computeBounds(tempBounds, true)
-            sr.path.computeBounds(bounds, true)
+            if (android.graphics.RectF.intersects(selRect, tempBounds)) {
-            if (android.graphics.RectF.intersects(selRect, bounds)) {
                 selectedStrokeIds.add(sr.id)
             }
         }
@@ -469,10 +543,9 @@ class PadCanvasView(context: Context) : View(context) {
     private fun isPointInSelectionBounds(x: Float, y: Float): Boolean {
         for (sr in completedStrokes) {
             if (sr.id !in selectedStrokeIds) continue
-            val bounds = android.graphics.RectF()
+            sr.path.computeBounds(tempBounds, true)
-            sr.path.computeBounds(bounds, true)
+            tempBounds.inset(-20f, -20f)
-            bounds.inset(-20f, -20f)
+            if (tempBounds.contains(x, y)) return true
-            if (bounds.contains(x, y)) return true
         }
         return false
     }
@@ -499,7 +572,6 @@ class PadCanvasView(context: Context) : View(context) {
     private fun handleEraserInput(event: MotionEvent): Boolean {
         when (event.actionMasked) {
             MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
-                // Check historical points too for thorough erasing
                 for (i in 0 until event.historySize) {
                     eraseAtPoint(event.getHistoricalX(i), event.getHistoricalY(i))
                 }
@@ -516,23 +588,12 @@ class PadCanvasView(context: Context) : View(context) {
         onStrokeErased?.invoke(hitId)
     }
 
-    /**
-     * Hit test: find the first stroke within ERASER_RADIUS_PT of the given
-     * canonical point. Uses bounding box pre-filter then point distance check.
-     */
     private fun hitTestStroke(cx: Float, cy: Float): Long? {
         val radius = ERASER_RADIUS_PT
         for (sr in completedStrokes) {
-            // Bounding box pre-filter
+            sr.path.computeBounds(tempBounds, true)
-            val bounds = android.graphics.RectF()
+            tempBounds.inset(-radius, -radius)
-            sr.path.computeBounds(bounds, true)
+            if (!tempBounds.contains(cx, cy)) continue
-            bounds.inset(-radius, -radius)
-            if (!bounds.contains(cx, cy)) continue
-
-            // Point distance check — walk the path data
-            // We need to check against actual stroke points, which we reconstruct
-            // from the stored stroke data. For now, check path bounds hit.
-            // Since we passed the expanded bounds check, this is a hit.
             return sr.id
         }
         return null
@@ -579,17 +640,20 @@ class PadCanvasView(context: Context) : View(context) {
             style = Paint.Style.STROKE
             strokeCap = Paint.Cap.ROUND
             strokeJoin = Paint.Join.ROUND
-            isAntiAlias = true
+            isAntiAlias = false  // Crisp lines on e-ink — no edge fading
         }
     }
 
     private data class StrokeRender(val path: Path, val paint: Paint, val id: Long)
 
     companion object {
-        /** Backing bitmap is rendered at 1/4 canonical resolution to save memory. */
-        private const val BACKING_SCALE = 0.25f
-
         /** Eraser hit radius in canonical points (~3.5mm at 300 DPI). */
         private const val ERASER_RADIUS_PT = 42f
+
+        /** Hold pen still for this long to snap to straight line. */
+        private const val LINE_SNAP_DELAY_MS = 1500L
+
+        /** Movement threshold (canonical pts) below which snap timer stays active. */
+        private const val LINE_SNAP_MOVE_THRESHOLD = 30f
     }
 }

app/src/main/kotlin/net/metacircular/engpad/ui/editor/Toolbar.kt

@@ -54,6 +54,12 @@ fun EditorToolbar(
             label = { Text("Select") },
             modifier = Modifier.padding(end = 4.dp),
         )
+        FilterChip(
+            selected = currentTool == Tool.BOX,
+            onClick = { onToolSelected(Tool.BOX) },
+            label = { Text("Box") },
+            modifier = Modifier.padding(end = 4.dp),
+        )
         if (hasSelection) {
             TextButton(onClick = onDeleteSelection) { Text("Del") }
             TextButton(onClick = onCopySelection) { Text("Copy") }