From da5be3851d2680d5dceb23be2634655083d30ca2 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Fri, 24 Apr 2026 18:10:22 +0200
Subject: [PATCH] feat: world-axis selector, 8-point circle, annotated
 measurement tool
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Datum editor (step 3):
- Add world-axis role to rectangles (isAxisReference) and lines
  (axisRole: "x"|"y"). Exclusive via a new store action that clears
  any other axis flag on write. The solver's pickPrimary now honors an
  explicit user flag ahead of the type-priority fallback; line-primary
  correspondences target world +x or +y depending on the flag.
- Panel UI: checkbox on rect cards, three-way button row on line cards,
  and an axis badge in each card header.
- Ellipse datum switches to 8 user-placed points on the circle contour.
  New src/lib/ellipse-fit.ts does an algebraic LSQ conic fit (data-
  normalised, 5x5 Gaussian solve, f=-1 constraint) and returns the
  geometric center + perpendicular conjugate semi-axes, which we cache
  on the datum for the solver and renderer. Dragging any handle
  refits; an extra center handle translates all 8 points together.
  datum-cache migrates legacy 3-handle storage by synthesising 8
  samples from the old parametric form.
- ResultViewer auto-scale now floors to an int to match the integer-
  only scale input (step=1).

Measurement tool (step 4) — CorrectedImageViewer.vue:
- Three measurement tools: line (length), ellipse (semi-axes + area),
  angle (0-180 degrees between two rays).
- Persistent, multi-measurement state. Each has id, colorIndex, and
  type-specific geometry; colors cycle via the existing getDatumColor
  palette with a monotonic counter so deletion doesn't recolor.
- Selection model with hit-testing on handles, geometry, and labels.
  Selected draws on top in white; others render dashed with 0.8/0.5
  alpha so the active measurement pops.
- Dragging geometry or label moves the whole measurement; dragging a
  handle reshapes just that handle. 3px mouse threshold distinguishes
  click from drag.
- Side panel lists measurements with color chip, type, value, and a
  delete button; clicking selects on canvas. Delete/Backspace deletes
  the selected measurement. Escape cancels in-progress placement.
- Live placement preview + inline hint strip describes what the next
  click does. Pinch-zoom and single-finger pan still work.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/CorrectedImageViewer.vue | 1403 +++++++++++++++++++----
 src/components/DatumCanvas.vue          |   30 +-
 src/components/DatumPanel.vue           |   76 ++
 src/components/ResultViewer.vue         |   29 +-
 src/lib/datum-cache.ts                  |   30 +-
 src/lib/datums.ts                       |   11 +
 src/lib/ellipse-fit.ts                  |  193 ++++
 src/lib/solver.ts                       |   34 +-
 src/stores/app.ts                       |   72 +-
 src/types/index.ts                      |   20 +-
 10 files changed, 1658 insertions(+), 240 deletions(-)
 create mode 100644 src/lib/ellipse-fit.ts

diff --git a/src/components/CorrectedImageViewer.vue b/src/components/CorrectedImageViewer.vue
index 20114f8..9a52c95 100644
--- a/src/components/CorrectedImageViewer.vue
+++ b/src/components/CorrectedImageViewer.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from "vue"
+import { nanoid } from "nanoid"
 import type { Point } from "@/types"
+import { getDatumColor } from "@/lib/datums"
 
 const props = defineProps<{
     imageUrl: string
@@ -20,27 +22,72 @@ const viewOffsetX = ref(0)
 const viewOffsetY = ref(0)
 
 // Tool state
-const activeTool = ref<"none" | "measure">("none")
+type ToolMode = "none" | "line" | "ellipse" | "angle"
+const activeTool = ref<ToolMode>("none")
 const showGrid = ref(false)
 const gridSpacingMm = ref(10)
 
-// Measurement state
-const measurePoints = ref<Point[]>([])
-const measureHistory = ref<{ a: Point; b: Point; distMm: number }[]>([])
+// Measurement types. Geometry lives in image space so it is invariant under
+// pan/zoom and survives redraws without reprojection.
+interface BaseMeasurement {
+    id: string
+    colorIndex: number
+}
+interface LineMeasurement extends BaseMeasurement {
+    type: "line"
+    a: Point
+    b: Point
+}
+interface EllipseMeasurement extends BaseMeasurement {
+    type: "ellipse"
+    center: Point
+    axisEndA: Point
+    axisEndB: Point
+}
+interface AngleMeasurement extends BaseMeasurement {
+    type: "angle"
+    vertex: Point
+    armA: Point
+    armB: Point
+}
+type Measurement = LineMeasurement | EllipseMeasurement | AngleMeasurement
+
+const measurements = ref<Measurement[]>([])
+const selectedId = ref<string | null>(null)
+// Monotonically increasing counter so deleting a measurement doesn't recolor
+// the remaining ones. Each new measurement claims the next palette slot.
+let colorCounter = 0
+
+// In-progress placement points (image space) while a placement tool is active.
+const placementPoints = ref<Point[]>([])
+// Cursor position in image space for the live preview of an in-progress
+// placement. Null when the pointer is off-canvas.
+const placementCursor = ref<Point | null>(null)
 
 // Touch/pan state
 let isPanning = false
 let panStart = { x: 0, y: 0 }
 let lastPinchDist = 0
 
-const measureDistMm = computed(() => {
-    if (measurePoints.value.length < 2) return null
-    const [a, b] = measurePoints.value as [Point, Point]
-    const dxPx = b.x - a.x
-    const dyPx = b.y - a.y
-    const distPx = Math.hypot(dxPx, dyPx)
-    return distPx / props.scalePxPerMm
-})
+// Drag state for moving/reshaping committed measurements.
+type DragMode = "none" | "move" | "handle"
+interface DragState {
+    mode: DragMode
+    measurementId: string
+    // For "handle" drag: which handle of the measurement we grabbed.
+    handleKey: string | null
+    // Image-space coord where the drag started (cursor position).
+    startImg: Point
+    // Snapshot of the measurement at drag start, for delta-based updates.
+    startSnapshot: Measurement
+    // Did this pointer down actually move? Used to distinguish click vs drag.
+    moved: boolean
+}
+let dragState: DragState | null = null
+// Pixel threshold in screen space before a press becomes a drag. Small enough
+// that intentional drags feel responsive; large enough that a shaky click
+// still registers as a click.
+const DRAG_THRESHOLD_PX = 3
 
 function loadImg() {
     const image = new Image()
@@ -106,25 +153,23 @@ function drawOverlay() {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     ctx.save()
 
-    // Grid
     if (showGrid.value) {
         drawGrid(ctx, image)
     }
 
-    // Measurement history
-    for (const m of measureHistory.value) {
-        drawMeasureLine(ctx, m.a, m.b, m.distMm, "rgba(100,180,255,0.5)")
+    // Draw unselected first (faint) so the selected measurement always sits
+    // on top with full opacity and its handles aren't occluded.
+    for (const m of measurements.value) {
+        if (m.id === selectedId.value) continue
+        drawMeasurement(ctx, m, false)
     }
+    const selected = measurements.value.find((m) => m.id === selectedId.value)
+    if (selected) drawMeasurement(ctx, selected, true)
 
-    // Active measurement
-    if (measurePoints.value.length >= 2) {
-        const [a, b] = measurePoints.value as [Point, Point]
-        drawMeasureLine(ctx, a, b, measureDistMm.value ?? 0, "#3b82f6")
-    }
-
-    // Measurement points
-    for (const pt of measurePoints.value) {
-        drawPoint(ctx, pt, "#3b82f6")
+    // Placement preview overlaying everything, in the active tool's color
+    // slot (= next palette slot the new measurement will claim).
+    if (activeTool.value !== "none" && placementPoints.value.length > 0) {
+        drawPlacementPreview(ctx)
     }
 
     ctx.restore()
@@ -147,14 +192,12 @@ function drawGrid(
     ctx.strokeStyle = "rgba(255, 255, 255, 0.15)"
     ctx.lineWidth = 1 / viewScale.value
 
-    // Vertical lines
     for (let x = 0; x <= w; x += spacingPx) {
         ctx.beginPath()
         ctx.moveTo(x, 0)
         ctx.lineTo(x, h)
         ctx.stroke()
     }
-    // Horizontal lines
     for (let y = 0; y <= h; y += spacingPx) {
         ctx.beginPath()
         ctx.moveTo(0, y)
@@ -162,7 +205,6 @@ function drawGrid(
         ctx.stroke()
     }
 
-    // Major lines every 5 intervals
     ctx.strokeStyle = "rgba(255, 255, 255, 0.35)"
     ctx.lineWidth = 1.5 / viewScale.value
     const major = spacingPx * 5
@@ -179,7 +221,6 @@ function drawGrid(
         ctx.stroke()
     }
 
-    // Labels on major lines
     ctx.fillStyle = "rgba(255, 255, 255, 0.6)"
     const fontSize = Math.max(10, 12 / viewScale.value)
     ctx.font = `${String(fontSize)}px monospace`
@@ -202,64 +243,6 @@ function imgToScreen(pt: Point): Point {
     }
 }
 
-function drawMeasureLine(
-    ctx: CanvasRenderingContext2D,
-    a: Point,
-    b: Point,
-    distMm: number,
-    color: string,
-) {
-    const sa = imgToScreen(a)
-    const sb = imgToScreen(b)
-
-    ctx.beginPath()
-    ctx.moveTo(sa.x, sa.y)
-    ctx.lineTo(sb.x, sb.y)
-    ctx.strokeStyle = color
-    ctx.lineWidth = 2
-    ctx.setLineDash([6, 3])
-    ctx.stroke()
-    ctx.setLineDash([])
-
-    // Label
-    const mx = (sa.x + sb.x) / 2
-    const my = (sa.y + sb.y) / 2
-    const label = distMm >= 10
-        ? `${distMm.toFixed(1)} mm`
-        : `${distMm.toFixed(2)} mm`
-
-    ctx.font = "bold 13px monospace"
-    const metrics = ctx.measureText(label)
-    const pad = 4
-    const tw = metrics.width + pad * 2
-    const th = 18
-
-    ctx.fillStyle = "rgba(0, 0, 0, 0.75)"
-    ctx.fillRect(mx - tw / 2, my - th / 2 - 10, tw, th)
-    ctx.fillStyle = "#fff"
-    ctx.textAlign = "center"
-    ctx.textBaseline = "middle"
-    ctx.fillText(label, mx, my - 10)
-    ctx.textAlign = "start"
-    ctx.textBaseline = "alphabetic"
-}
-
-function drawPoint(
-    ctx: CanvasRenderingContext2D,
-    pt: Point,
-    color: string,
-) {
-    const s = imgToScreen(pt)
-    ctx.beginPath()
-    ctx.arc(s.x, s.y, 5, 0, Math.PI * 2)
-    ctx.fillStyle = color
-    ctx.fill()
-    ctx.strokeStyle = "#fff"
-    ctx.lineWidth = 1.5
-    ctx.stroke()
-}
-
-// Convert screen coords to image coords
 function screenToImg(sx: number, sy: number): Point {
     return {
         x: (sx - viewOffsetX.value) / viewScale.value,
@@ -267,33 +250,850 @@ function screenToImg(sx: number, sy: number): Point {
     }
 }
 
+// Per-measurement dimensions, all in millimetres.
+function lineLengthMm(m: LineMeasurement): number {
+    const dx = m.b.x - m.a.x
+    const dy = m.b.y - m.a.y
+    return Math.hypot(dx, dy) / props.scalePxPerMm
+}
+
+function ellipseAxesMm(m: EllipseMeasurement): { semiMajor: number; semiMinor: number } {
+    // Using |vA| and |vB| as semi-axes directly. This assumes the user drew
+    // roughly perpendicular conjugate axes, which is the common case on a
+    // deskewed image. A full Q = (M M^T)^{-1} eigendecomposition would be
+    // more accurate for skewed inputs but is overkill here.
+    const lenA = Math.hypot(m.axisEndA.x - m.center.x, m.axisEndA.y - m.center.y) / props.scalePxPerMm
+    const lenB = Math.hypot(m.axisEndB.x - m.center.x, m.axisEndB.y - m.center.y) / props.scalePxPerMm
+    return {
+        semiMajor: Math.max(lenA, lenB),
+        semiMinor: Math.min(lenA, lenB),
+    }
+}
+
+function angleDegrees(m: AngleMeasurement): number {
+    const ax = m.armA.x - m.vertex.x
+    const ay = m.armA.y - m.vertex.y
+    const bx = m.armB.x - m.vertex.x
+    const by = m.armB.y - m.vertex.y
+    const dot = ax * bx + ay * by
+    const cross = ax * by - ay * bx
+    // atan2 gives signed angle; we report the unsigned magnitude because
+    // "angle between two rays" is orientation-agnostic.
+    const rad = Math.atan2(Math.abs(cross), dot)
+    return (rad * 180) / Math.PI
+}
+
+function formatMm(v: number): string {
+    return v >= 10 ? v.toFixed(1) : v.toFixed(2)
+}
+
+function formatArea(v: number): string {
+    if (v >= 1000) return v.toFixed(0)
+    if (v >= 100) return v.toFixed(1)
+    return v.toFixed(2)
+}
+
+function measurementLabel(m: Measurement): string {
+    if (m.type === "line") {
+        return `${formatMm(lineLengthMm(m))} mm`
+    }
+    if (m.type === "ellipse") {
+        const { semiMajor, semiMinor } = ellipseAxesMm(m)
+        const area = Math.PI * semiMajor * semiMinor
+        return `${formatMm(semiMajor)}×${formatMm(semiMinor)} mm · ${formatArea(area)} mm²`
+    }
+    return `${angleDegrees(m).toFixed(1)}°`
+}
+
+function measurementTypeLabel(m: Measurement): string {
+    if (m.type === "line") return "Line"
+    if (m.type === "ellipse") return "Ellipse"
+    return "Angle"
+}
+
+// Anchor point in image space where we place the label/delete button. Chosen
+// per type so the label sits in a predictable, non-occluding position.
+function labelAnchor(m: Measurement): Point {
+    if (m.type === "line") {
+        return { x: (m.a.x + m.b.x) / 2, y: (m.a.y + m.b.y) / 2 }
+    }
+    if (m.type === "ellipse") {
+        return m.center
+    }
+    return m.vertex
+}
+
+// Label rectangle in screen space. Width depends on text so we measure with
+// the same ctx we are about to render with. Height is fixed for uniformity.
+function labelRect(
+    ctx: CanvasRenderingContext2D,
+    m: Measurement,
+): { x: number; y: number; w: number; h: number; textX: number; textY: number } {
+    const anchor = imgToScreen(labelAnchor(m))
+    const text = measurementLabel(m)
+    ctx.save()
+    ctx.font = "bold 13px monospace"
+    const tw = ctx.measureText(text).width
+    ctx.restore()
+    const pad = 6
+    const h = 20
+    const w = tw + pad * 2
+    // Offset the label above the anchor so it doesn't sit on top of a handle.
+    const offsetY = m.type === "angle" ? 22 : 14
+    const x = anchor.x - w / 2
+    const y = anchor.y - h / 2 - offsetY
+    return { x, y, w, h, textX: anchor.x, textY: anchor.y - offsetY }
+}
+
+// Delete button sits immediately to the right of the label. Same screen-space
+// rect is used for hit testing and for drawing.
+function deleteButtonRect(
+    ctx: CanvasRenderingContext2D,
+    m: Measurement,
+): { x: number; y: number; size: number } {
+    const rect = labelRect(ctx, m)
+    const size = 18
+    return {
+        x: rect.x + rect.w + 4,
+        y: rect.y + (rect.h - size) / 2,
+        size,
+    }
+}
+
+function drawMeasurement(
+    ctx: CanvasRenderingContext2D,
+    m: Measurement,
+    isSelected: boolean,
+) {
+    const baseColor = getDatumColor(m.colorIndex)
+    const color = isSelected ? "#ffffff" : baseColor
+    const lineAlpha = isSelected ? 1.0 : 0.8
+    const lineWidth = isSelected ? 3 : 2
+
+    ctx.save()
+    ctx.globalAlpha = lineAlpha
+
+    if (m.type === "line") {
+        drawLineGeometry(ctx, m, color, lineWidth, isSelected)
+    } else if (m.type === "ellipse") {
+        drawEllipseGeometry(ctx, m, color, lineWidth, isSelected)
+    } else {
+        drawAngleGeometry(ctx, m, color, lineWidth, isSelected)
+    }
+
+    ctx.globalAlpha = 1.0
+    drawLabel(ctx, m, baseColor, isSelected)
+    ctx.restore()
+}
+
+function drawLineGeometry(
+    ctx: CanvasRenderingContext2D,
+    m: LineMeasurement,
+    color: string,
+    lineWidth: number,
+    isSelected: boolean,
+) {
+    const sa = imgToScreen(m.a)
+    const sb = imgToScreen(m.b)
+    ctx.beginPath()
+    ctx.moveTo(sa.x, sa.y)
+    ctx.lineTo(sb.x, sb.y)
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth
+    ctx.setLineDash(isSelected ? [] : [6, 3])
+    ctx.stroke()
+    ctx.setLineDash([])
+    drawHandle(ctx, sa, color, isSelected)
+    drawHandle(ctx, sb, color, isSelected)
+}
+
+function drawEllipseGeometry(
+    ctx: CanvasRenderingContext2D,
+    m: EllipseMeasurement,
+    color: string,
+    lineWidth: number,
+    isSelected: boolean,
+) {
+    // Parametric draw using the two conjugate axis vectors; handles the
+    // general (non-perpendicular) case the datum editor also uses.
+    const c = imgToScreen(m.center)
+    const a = imgToScreen(m.axisEndA)
+    const b = imgToScreen(m.axisEndB)
+    const vAx = a.x - c.x
+    const vAy = a.y - c.y
+    const vBx = b.x - c.x
+    const vBy = b.y - c.y
+
+    ctx.beginPath()
+    const N = 72
+    for (let i = 0; i <= N; i++) {
+        const t = (2 * Math.PI * i) / N
+        const cs = Math.cos(t)
+        const sn = Math.sin(t)
+        const x = c.x + vAx * cs + vBx * sn
+        const y = c.y + vAy * cs + vBy * sn
+        if (i === 0) ctx.moveTo(x, y)
+        else ctx.lineTo(x, y)
+    }
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth
+    ctx.setLineDash(isSelected ? [] : [6, 3])
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    // Axis guides
+    ctx.save()
+    ctx.globalAlpha *= 0.5
+    ctx.beginPath()
+    ctx.moveTo(c.x, c.y)
+    ctx.lineTo(a.x, a.y)
+    ctx.moveTo(c.x, c.y)
+    ctx.lineTo(b.x, b.y)
+    ctx.strokeStyle = color
+    ctx.lineWidth = 1
+    ctx.stroke()
+    ctx.restore()
+
+    drawHandle(ctx, c, color, isSelected, true)
+    drawHandle(ctx, a, color, isSelected)
+    drawHandle(ctx, b, color, isSelected)
+}
+
+function drawAngleGeometry(
+    ctx: CanvasRenderingContext2D,
+    m: AngleMeasurement,
+    color: string,
+    lineWidth: number,
+    isSelected: boolean,
+) {
+    const v = imgToScreen(m.vertex)
+    const a = imgToScreen(m.armA)
+    const b = imgToScreen(m.armB)
+
+    ctx.beginPath()
+    ctx.moveTo(a.x, a.y)
+    ctx.lineTo(v.x, v.y)
+    ctx.lineTo(b.x, b.y)
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth
+    ctx.setLineDash(isSelected ? [] : [6, 3])
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    // Arc sweep between the two arms to make the angle visually obvious.
+    const lenA = Math.hypot(a.x - v.x, a.y - v.y)
+    const lenB = Math.hypot(b.x - v.x, b.y - v.y)
+    const arcR = Math.max(16, Math.min(lenA, lenB) * 0.3)
+    if (lenA > 2 && lenB > 2) {
+        const thetaA = Math.atan2(a.y - v.y, a.x - v.x)
+        const thetaB = Math.atan2(b.y - v.y, b.x - v.x)
+        // Always sweep the short way around so the arc visualises the angle
+        // the number reports (0–180°).
+        let delta = thetaB - thetaA
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        ctx.save()
+        ctx.globalAlpha *= 0.6
+        ctx.beginPath()
+        ctx.arc(v.x, v.y, arcR, thetaA, thetaA + delta, delta < 0)
+        ctx.strokeStyle = color
+        ctx.lineWidth = 1.5
+        ctx.stroke()
+        ctx.restore()
+    }
+
+    drawHandle(ctx, v, color, isSelected, true)
+    drawHandle(ctx, a, color, isSelected)
+    drawHandle(ctx, b, color, isSelected)
+}
+
+function drawHandle(
+    ctx: CanvasRenderingContext2D,
+    s: Point,
+    color: string,
+    isSelected: boolean,
+    primary = false,
+) {
+    const r = primary ? 6 : 5
+    ctx.beginPath()
+    ctx.arc(s.x, s.y, r, 0, Math.PI * 2)
+    ctx.fillStyle = color
+    ctx.fill()
+    ctx.strokeStyle = isSelected ? "#0b0b0b" : "#ffffff"
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+}
+
+function drawLabel(
+    ctx: CanvasRenderingContext2D,
+    m: Measurement,
+    baseColor: string,
+    isSelected: boolean,
+) {
+    const rect = labelRect(ctx, m)
+    const labelAlpha = isSelected ? 1.0 : 0.5
+    ctx.save()
+    ctx.globalAlpha = labelAlpha
+    ctx.fillStyle = isSelected ? baseColor : "rgba(0, 0, 0, 0.75)"
+    roundRect(ctx, rect.x, rect.y, rect.w, rect.h, 4)
+    ctx.fill()
+    if (isSelected) {
+        ctx.strokeStyle = "#ffffff"
+        ctx.lineWidth = 1
+        ctx.stroke()
+    }
+    ctx.font = "bold 13px monospace"
+    ctx.fillStyle = "#ffffff"
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+    ctx.fillText(measurementLabel(m), rect.textX, rect.textY)
+    ctx.textAlign = "start"
+    ctx.textBaseline = "alphabetic"
+    ctx.restore()
+
+    if (isSelected) {
+        const btn = deleteButtonRect(ctx, m)
+        ctx.save()
+        ctx.fillStyle = "#ef4444"
+        roundRect(ctx, btn.x, btn.y, btn.size, btn.size, 4)
+        ctx.fill()
+        ctx.strokeStyle = "#ffffff"
+        ctx.lineWidth = 1
+        ctx.stroke()
+        ctx.strokeStyle = "#ffffff"
+        ctx.lineWidth = 1.75
+        ctx.beginPath()
+        const pad = 5
+        ctx.moveTo(btn.x + pad, btn.y + pad)
+        ctx.lineTo(btn.x + btn.size - pad, btn.y + btn.size - pad)
+        ctx.moveTo(btn.x + btn.size - pad, btn.y + pad)
+        ctx.lineTo(btn.x + pad, btn.y + btn.size - pad)
+        ctx.stroke()
+        ctx.restore()
+    }
+}
+
+function roundRect(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    r: number,
+) {
+    const rr = Math.min(r, w / 2, h / 2)
+    ctx.beginPath()
+    ctx.moveTo(x + rr, y)
+    ctx.lineTo(x + w - rr, y)
+    ctx.arcTo(x + w, y, x + w, y + rr, rr)
+    ctx.lineTo(x + w, y + h - rr)
+    ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr)
+    ctx.lineTo(x + rr, y + h)
+    ctx.arcTo(x, y + h, x, y + h - rr, rr)
+    ctx.lineTo(x, y + rr)
+    ctx.arcTo(x, y, x + rr, y, rr)
+    ctx.closePath()
+}
+
+function drawPlacementPreview(ctx: CanvasRenderingContext2D) {
+    const color = getDatumColor(colorCounter)
+    const pts = placementPoints.value
+    const cursor = placementCursor.value
+
+    ctx.save()
+    ctx.globalAlpha = 0.9
+    ctx.strokeStyle = color
+    ctx.fillStyle = color
+    ctx.lineWidth = 2
+    ctx.setLineDash([4, 3])
+
+    const sPts = pts.map(imgToScreen)
+    const sCursor = cursor ? imgToScreen(cursor) : null
+
+    if (activeTool.value === "line" && sPts.length >= 1 && sPts[0] && sCursor) {
+        ctx.beginPath()
+        ctx.moveTo(sPts[0].x, sPts[0].y)
+        ctx.lineTo(sCursor.x, sCursor.y)
+        ctx.stroke()
+    } else if (activeTool.value === "ellipse" && sPts.length >= 1 && sPts[0]) {
+        const center = sPts[0]
+        const endA = sPts[1] ?? sCursor
+        if (endA) {
+            ctx.beginPath()
+            ctx.moveTo(center.x, center.y)
+            ctx.lineTo(endA.x, endA.y)
+            ctx.stroke()
+        }
+        if (sPts.length >= 2 && sPts[1] && sCursor) {
+            const a = sPts[1]
+            const b = sCursor
+            ctx.beginPath()
+            ctx.moveTo(center.x, center.y)
+            ctx.lineTo(b.x, b.y)
+            ctx.stroke()
+            const vAx = a.x - center.x
+            const vAy = a.y - center.y
+            const vBx = b.x - center.x
+            const vBy = b.y - center.y
+            ctx.beginPath()
+            const N = 72
+            for (let i = 0; i <= N; i++) {
+                const t = (2 * Math.PI * i) / N
+                const cs = Math.cos(t)
+                const sn = Math.sin(t)
+                const x = center.x + vAx * cs + vBx * sn
+                const y = center.y + vAy * cs + vBy * sn
+                if (i === 0) ctx.moveTo(x, y)
+                else ctx.lineTo(x, y)
+            }
+            ctx.stroke()
+        }
+    } else if (activeTool.value === "angle" && sPts.length >= 1 && sPts[0]) {
+        const v = sPts[0]
+        const a = sPts[1] ?? sCursor
+        if (a) {
+            ctx.beginPath()
+            ctx.moveTo(a.x, a.y)
+            ctx.lineTo(v.x, v.y)
+            ctx.stroke()
+        }
+        if (sPts.length >= 2 && sPts[1] && sCursor) {
+            ctx.beginPath()
+            ctx.moveTo(v.x, v.y)
+            ctx.lineTo(sCursor.x, sCursor.y)
+            ctx.stroke()
+        }
+    }
+    ctx.setLineDash([])
+    for (const sp of sPts) {
+        ctx.beginPath()
+        ctx.arc(sp.x, sp.y, 5, 0, Math.PI * 2)
+        ctx.fill()
+    }
+    ctx.restore()
+}
+
 function getCanvasXY(e: MouseEvent | Touch): { x: number; y: number } {
     const rect = overlayRef.value?.getBoundingClientRect()
     if (!rect) return { x: 0, y: 0 }
     return { x: e.clientX - rect.left, y: e.clientY - rect.top }
 }
 
-function onCanvasClick(e: MouseEvent) {
-    if (activeTool.value !== "measure") return
+// Hit-testing helpers. All thresholds are in screen pixels so they feel
+// consistent to the user regardless of zoom level.
+const HANDLE_HIT_PX = 10
+const LINE_HIT_PX = 6
+const ELLIPSE_HIT_PX = 7
 
-    const { x, y } = getCanvasXY(e)
-    const imgPt = screenToImg(x, y)
+function pointToSegmentDistance(
+    p: Point,
+    a: Point,
+    b: Point,
+): number {
+    const abx = b.x - a.x
+    const aby = b.y - a.y
+    const len2 = abx * abx + aby * aby
+    if (len2 === 0) return Math.hypot(p.x - a.x, p.y - a.y)
+    let t = ((p.x - a.x) * abx + (p.y - a.y) * aby) / len2
+    t = Math.max(0, Math.min(1, t))
+    const qx = a.x + t * abx
+    const qy = a.y + t * aby
+    return Math.hypot(p.x - qx, p.y - qy)
+}
 
-    if (measurePoints.value.length < 2) {
-        measurePoints.value.push(imgPt)
-    } else {
-        // Save previous measurement and start new
-        const [a, b] = measurePoints.value as [Point, Point]
-        measureHistory.value.push({
+// Returns the min screen-space distance from cursor to the ellipse curve.
+// Sampled parametrically; 96 samples is overkill for hit-testing but cheap.
+function ellipseCurveDistance(
+    cursor: Point,
+    m: EllipseMeasurement,
+): number {
+    const c = imgToScreen(m.center)
+    const a = imgToScreen(m.axisEndA)
+    const b = imgToScreen(m.axisEndB)
+    const vAx = a.x - c.x
+    const vAy = a.y - c.y
+    const vBx = b.x - c.x
+    const vBy = b.y - c.y
+    let best = Infinity
+    const N = 96
+    for (let i = 0; i < N; i++) {
+        const t = (2 * Math.PI * i) / N
+        const cs = Math.cos(t)
+        const sn = Math.sin(t)
+        const x = c.x + vAx * cs + vBx * sn
+        const y = c.y + vAy * cs + vBy * sn
+        const d = Math.hypot(cursor.x - x, cursor.y - y)
+        if (d < best) best = d
+    }
+    return best
+}
+
+interface HitResult {
+    measurementId: string
+    // "handle" means the user grabbed a specific control point.
+    // "geometry" means they grabbed the line/curve/arms — whole-measurement drag.
+    // "label" means they clicked the label — selection only (drag moves whole).
+    // "delete" means they clicked the delete X button.
+    kind: "handle" | "geometry" | "label" | "delete"
+    handleKey: string | null
+}
+
+function getHandlePositions(m: Measurement): { key: string; pt: Point }[] {
+    if (m.type === "line") {
+        return [
+            { key: "a", pt: m.a },
+            { key: "b", pt: m.b },
+        ]
+    }
+    if (m.type === "ellipse") {
+        return [
+            { key: "center", pt: m.center },
+            { key: "axisEndA", pt: m.axisEndA },
+            { key: "axisEndB", pt: m.axisEndB },
+        ]
+    }
+    return [
+        { key: "vertex", pt: m.vertex },
+        { key: "armA", pt: m.armA },
+        { key: "armB", pt: m.armB },
+    ]
+}
+
+function hitTest(cursorScreen: Point): HitResult | null {
+    const ctx = overlayRef.value?.getContext("2d")
+    if (!ctx) return null
+
+    // Check the selected measurement first — its label/delete button is
+    // visually on top, so its hit region should win ties.
+    const ordered: Measurement[] = []
+    const sel = measurements.value.find((m) => m.id === selectedId.value)
+    if (sel) ordered.push(sel)
+    for (const m of measurements.value) {
+        if (m.id !== selectedId.value) ordered.push(m)
+    }
+
+    // Priority 1: delete button on the selected measurement.
+    if (sel) {
+        const btn = deleteButtonRect(ctx, sel)
+        if (
+            cursorScreen.x >= btn.x &&
+            cursorScreen.x <= btn.x + btn.size &&
+            cursorScreen.y >= btn.y &&
+            cursorScreen.y <= btn.y + btn.size
+        ) {
+            return { measurementId: sel.id, kind: "delete", handleKey: null }
+        }
+    }
+
+    // Priority 2: handles (selected first, so you can always grab the active
+    // measurement's handle even if it overlaps another).
+    for (const m of ordered) {
+        for (const h of getHandlePositions(m)) {
+            const s = imgToScreen(h.pt)
+            if (Math.hypot(cursorScreen.x - s.x, cursorScreen.y - s.y) <= HANDLE_HIT_PX) {
+                return { measurementId: m.id, kind: "handle", handleKey: h.key }
+            }
+        }
+    }
+
+    // Priority 3: labels.
+    for (const m of ordered) {
+        const rect = labelRect(ctx, m)
+        if (
+            cursorScreen.x >= rect.x &&
+            cursorScreen.x <= rect.x + rect.w &&
+            cursorScreen.y >= rect.y &&
+            cursorScreen.y <= rect.y + rect.h
+        ) {
+            return { measurementId: m.id, kind: "label", handleKey: null }
+        }
+    }
+
+    // Priority 4: geometry bodies.
+    for (const m of ordered) {
+        if (m.type === "line") {
+            const sa = imgToScreen(m.a)
+            const sb = imgToScreen(m.b)
+            if (pointToSegmentDistance(cursorScreen, sa, sb) <= LINE_HIT_PX) {
+                return { measurementId: m.id, kind: "geometry", handleKey: null }
+            }
+        } else if (m.type === "ellipse") {
+            if (ellipseCurveDistance(cursorScreen, m) <= ELLIPSE_HIT_PX) {
+                return { measurementId: m.id, kind: "geometry", handleKey: null }
+            }
+        } else {
+            const v = imgToScreen(m.vertex)
+            const a = imgToScreen(m.armA)
+            const b = imgToScreen(m.armB)
+            if (
+                pointToSegmentDistance(cursorScreen, v, a) <= LINE_HIT_PX ||
+                pointToSegmentDistance(cursorScreen, v, b) <= LINE_HIT_PX
+            ) {
+                return { measurementId: m.id, kind: "geometry", handleKey: null }
+            }
+        }
+    }
+
+    return null
+}
+
+function commitPlacement() {
+    const pts = placementPoints.value
+    if (activeTool.value === "line" && pts.length === 2) {
+        const [a, b] = pts as [Point, Point]
+        const id = nanoid()
+        measurements.value.push({
+            id,
+            type: "line",
+            colorIndex: colorCounter,
             a,
             b,
-            distMm: measureDistMm.value ?? 0,
         })
-        measurePoints.value = [imgPt]
+        colorCounter += 1
+        selectedId.value = id
+        placementPoints.value = []
+    } else if (activeTool.value === "ellipse" && pts.length === 3) {
+        const [center, axisEndA, axisEndB] = pts as [Point, Point, Point]
+        const id = nanoid()
+        measurements.value.push({
+            id,
+            type: "ellipse",
+            colorIndex: colorCounter,
+            center,
+            axisEndA,
+            axisEndB,
+        })
+        colorCounter += 1
+        selectedId.value = id
+        placementPoints.value = []
+    } else if (activeTool.value === "angle" && pts.length === 3) {
+        const [vertex, armA, armB] = pts as [Point, Point, Point]
+        const id = nanoid()
+        measurements.value.push({
+            id,
+            type: "angle",
+            colorIndex: colorCounter,
+            vertex,
+            armA,
+            armB,
+        })
+        colorCounter += 1
+        selectedId.value = id
+        placementPoints.value = []
+    }
+}
+
+function handlePlacementClick(imgPt: Point) {
+    if (activeTool.value === "none") return
+    placementPoints.value.push(imgPt)
+    const needed = activeTool.value === "line" ? 2 : 3
+    if (placementPoints.value.length >= needed) {
+        commitPlacement()
+    }
+}
+
+function cancelPlacement() {
+    placementPoints.value = []
+    drawOverlay()
+}
+
+function setTool(tool: ToolMode) {
+    if (activeTool.value === tool) {
+        activeTool.value = "none"
+        placementPoints.value = []
+    } else {
+        activeTool.value = tool
+        placementPoints.value = []
+        selectedId.value = null
     }
     drawOverlay()
 }
 
+function deleteMeasurement(id: string) {
+    measurements.value = measurements.value.filter((m) => m.id !== id)
+    if (selectedId.value === id) selectedId.value = null
+    drawOverlay()
+}
+
+function selectMeasurement(id: string | null) {
+    selectedId.value = id
+    drawOverlay()
+}
+
+function clearMeasurements() {
+    measurements.value = []
+    selectedId.value = null
+    placementPoints.value = []
+    drawOverlay()
+}
+
+// Clones a measurement so we can capture a drag-start snapshot. Plain spread
+// wouldn't deep-copy the nested Point objects, which we mutate per frame.
+function cloneMeasurement(m: Measurement): Measurement {
+    if (m.type === "line") {
+        return { ...m, a: { ...m.a }, b: { ...m.b } }
+    }
+    if (m.type === "ellipse") {
+        return {
+            ...m,
+            center: { ...m.center },
+            axisEndA: { ...m.axisEndA },
+            axisEndB: { ...m.axisEndB },
+        }
+    }
+    return {
+        ...m,
+        vertex: { ...m.vertex },
+        armA: { ...m.armA },
+        armB: { ...m.armB },
+    }
+}
+
+function applyDrag(
+    original: Measurement,
+    mode: DragMode,
+    handleKey: string | null,
+    dx: number,
+    dy: number,
+): Measurement {
+    if (mode === "move") {
+        if (original.type === "line") {
+            return {
+                ...original,
+                a: { x: original.a.x + dx, y: original.a.y + dy },
+                b: { x: original.b.x + dx, y: original.b.y + dy },
+            }
+        }
+        if (original.type === "ellipse") {
+            return {
+                ...original,
+                center: { x: original.center.x + dx, y: original.center.y + dy },
+                axisEndA: { x: original.axisEndA.x + dx, y: original.axisEndA.y + dy },
+                axisEndB: { x: original.axisEndB.x + dx, y: original.axisEndB.y + dy },
+            }
+        }
+        return {
+            ...original,
+            vertex: { x: original.vertex.x + dx, y: original.vertex.y + dy },
+            armA: { x: original.armA.x + dx, y: original.armA.y + dy },
+            armB: { x: original.armB.x + dx, y: original.armB.y + dy },
+        }
+    }
+    if (mode === "handle" && handleKey) {
+        if (original.type === "line") {
+            if (handleKey === "a") return { ...original, a: { x: original.a.x + dx, y: original.a.y + dy } }
+            if (handleKey === "b") return { ...original, b: { x: original.b.x + dx, y: original.b.y + dy } }
+        } else if (original.type === "ellipse") {
+            if (handleKey === "center") {
+                // Dragging the ellipse center translates the whole ellipse so
+                // the axis endpoints keep their conjugate relationship.
+                return {
+                    ...original,
+                    center: { x: original.center.x + dx, y: original.center.y + dy },
+                    axisEndA: { x: original.axisEndA.x + dx, y: original.axisEndA.y + dy },
+                    axisEndB: { x: original.axisEndB.x + dx, y: original.axisEndB.y + dy },
+                }
+            }
+            if (handleKey === "axisEndA") {
+                return { ...original, axisEndA: { x: original.axisEndA.x + dx, y: original.axisEndA.y + dy } }
+            }
+            if (handleKey === "axisEndB") {
+                return { ...original, axisEndB: { x: original.axisEndB.x + dx, y: original.axisEndB.y + dy } }
+            }
+        } else {
+            if (handleKey === "vertex") {
+                // Like ellipse center: dragging vertex carries the arms so the
+                // angle shape is preserved.
+                return {
+                    ...original,
+                    vertex: { x: original.vertex.x + dx, y: original.vertex.y + dy },
+                    armA: { x: original.armA.x + dx, y: original.armA.y + dy },
+                    armB: { x: original.armB.x + dx, y: original.armB.y + dy },
+                }
+            }
+            if (handleKey === "armA") {
+                return { ...original, armA: { x: original.armA.x + dx, y: original.armA.y + dy } }
+            }
+            if (handleKey === "armB") {
+                return { ...original, armB: { x: original.armB.x + dx, y: original.armB.y + dy } }
+            }
+        }
+    }
+    return original
+}
+
+function updateMeasurement(id: string, next: Measurement) {
+    const idx = measurements.value.findIndex((m) => m.id === id)
+    if (idx === -1) return
+    measurements.value[idx] = next
+}
+
+function pointerDown(screenX: number, screenY: number): "measurement" | "pan" {
+    const cursor = { x: screenX, y: screenY }
+    const hit = hitTest(cursor)
+    if (!hit) {
+        // Empty-space click: deselect, fall through to pan behavior.
+        if (selectedId.value !== null) {
+            selectedId.value = null
+            drawOverlay()
+        }
+        return "pan"
+    }
+
+    if (hit.kind === "delete") {
+        deleteMeasurement(hit.measurementId)
+        return "measurement"
+    }
+
+    selectedId.value = hit.measurementId
+    const target = measurements.value.find((m) => m.id === hit.measurementId)
+    if (!target) {
+        drawOverlay()
+        return "measurement"
+    }
+
+    const mode: DragMode = hit.kind === "handle" ? "handle" : "move"
+    dragState = {
+        mode,
+        measurementId: target.id,
+        handleKey: hit.handleKey,
+        startImg: screenToImg(screenX, screenY),
+        startSnapshot: cloneMeasurement(target),
+        moved: false,
+    }
+    drawOverlay()
+    return "measurement"
+}
+
+function pointerMove(screenX: number, screenY: number): boolean {
+    if (!dragState) return false
+    const nowImg = screenToImg(screenX, screenY)
+    const dxImg = nowImg.x - dragState.startImg.x
+    const dyImg = nowImg.y - dragState.startImg.y
+    if (!dragState.moved) {
+        // Convert image-space delta back to screen-space via viewScale; easier
+        // than tracking the original screen cursor separately.
+        const screenDx = dxImg * viewScale.value
+        const screenDy = dyImg * viewScale.value
+        if (Math.hypot(screenDx, screenDy) < DRAG_THRESHOLD_PX) return true
+        dragState.moved = true
+    }
+    const next = applyDrag(
+        dragState.startSnapshot,
+        dragState.mode,
+        dragState.handleKey,
+        dxImg,
+        dyImg,
+    )
+    updateMeasurement(dragState.measurementId, next)
+    drawOverlay()
+    return true
+}
+
+function pointerUp() {
+    dragState = null
+}
+
 function onWheel(e: WheelEvent) {
     e.preventDefault()
     const scaleBy = 1.08
@@ -313,12 +1113,31 @@ function onWheel(e: WheelEvent) {
 }
 
 function onMouseDown(e: MouseEvent) {
-    if (activeTool.value === "measure") return
-    isPanning = true
-    panStart = { x: e.clientX - viewOffsetX.value, y: e.clientY - viewOffsetY.value }
+    const { x, y } = getCanvasXY(e)
+    if (activeTool.value !== "none") {
+        // Placement tools ignore mousedown; they commit on click so a user
+        // can drag-scroll accidentally without placing a spurious point.
+        return
+    }
+    const outcome = pointerDown(x, y)
+    if (outcome === "pan") {
+        isPanning = true
+        panStart = { x: e.clientX - viewOffsetX.value, y: e.clientY - viewOffsetY.value }
+    }
 }
 
 function onMouseMove(e: MouseEvent) {
+    if (dragState) {
+        const { x, y } = getCanvasXY(e)
+        pointerMove(x, y)
+        return
+    }
+    if (activeTool.value !== "none") {
+        const { x, y } = getCanvasXY(e)
+        placementCursor.value = screenToImg(x, y)
+        drawOverlay()
+        return
+    }
     if (!isPanning) return
     viewOffsetX.value = e.clientX - panStart.x
     viewOffsetY.value = e.clientY - panStart.y
@@ -326,9 +1145,28 @@ function onMouseMove(e: MouseEvent) {
 }
 
 function onMouseUp() {
+    pointerUp()
     isPanning = false
 }
 
+function onMouseLeave() {
+    pointerUp()
+    isPanning = false
+    placementCursor.value = null
+    drawOverlay()
+}
+
+function onClick(e: MouseEvent) {
+    if (activeTool.value === "none") return
+    // Guard against the click event that always follows a mousedown: if the
+    // user panned or dragged, that wasn't a placement click. Here we have no
+    // dragState at click-time because placements don't start one.
+    const { x, y } = getCanvasXY(e)
+    const imgPt = screenToImg(x, y)
+    handlePlacementClick(imgPt)
+    drawOverlay()
+}
+
 function onTouchStart(e: TouchEvent) {
     const t0 = e.touches[0]
     const t1 = e.touches[1]
@@ -338,11 +1176,23 @@ function onTouchStart(e: TouchEvent) {
             t1.clientX - t0.clientX,
             t1.clientY - t0.clientY,
         )
-    } else if (e.touches.length === 1 && t0 && activeTool.value !== "measure") {
-        isPanning = true
-        panStart = {
-            x: t0.clientX - viewOffsetX.value,
-            y: t0.clientY - viewOffsetY.value,
+        // Cancel any in-progress drag when a second finger lands; pinch takes
+        // priority.
+        pointerUp()
+        isPanning = false
+    } else if (e.touches.length === 1 && t0) {
+        const { x, y } = getCanvasXY(t0)
+        if (activeTool.value !== "none") {
+            placementCursor.value = screenToImg(x, y)
+            return
+        }
+        const outcome = pointerDown(x, y)
+        if (outcome === "pan") {
+            isPanning = true
+            panStart = {
+                x: t0.clientX - viewOffsetX.value,
+                y: t0.clientY - viewOffsetY.value,
+            }
         }
     }
 }
@@ -372,35 +1222,92 @@ function onTouchMove(e: TouchEvent) {
 
         lastPinchDist = dist
         redraw()
-    } else if (e.touches.length === 1 && t0 && isPanning) {
-        viewOffsetX.value = t0.clientX - panStart.x
-        viewOffsetY.value = t0.clientY - panStart.y
-        redraw()
+    } else if (e.touches.length === 1 && t0) {
+        const { x, y } = getCanvasXY(t0)
+        if (dragState) {
+            e.preventDefault()
+            pointerMove(x, y)
+            return
+        }
+        if (activeTool.value !== "none") {
+            placementCursor.value = screenToImg(x, y)
+            drawOverlay()
+            return
+        }
+        if (isPanning) {
+            viewOffsetX.value = t0.clientX - panStart.x
+            viewOffsetY.value = t0.clientY - panStart.y
+            redraw()
+        }
     }
 }
 
 function onTouchEnd() {
+    // Placement on touch relies on the browser-synthesized click that fires
+    // after a tap with no preventDefault — same as the original file did.
+    pointerUp()
     isPanning = false
     lastPinchDist = 0
+    drawOverlay()
 }
 
-function toggleMeasure() {
-    if (activeTool.value === "measure") {
-        activeTool.value = "none"
-    } else {
-        activeTool.value = "measure"
-        measurePoints.value = []
+function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+        if (activeTool.value !== "none" && placementPoints.value.length > 0) {
+            cancelPlacement()
+            return
+        }
+        if (activeTool.value !== "none") {
+            activeTool.value = "none"
+            drawOverlay()
+            return
+        }
+        if (selectedId.value !== null) {
+            selectedId.value = null
+            drawOverlay()
+        }
+        return
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && selectedId.value) {
+        // Only handle when the overlay is the active context; text inputs
+        // inside the toolbar need Backspace for editing.
+        const target = e.target as HTMLElement | null
+        if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) return
+        e.preventDefault()
+        deleteMeasurement(selectedId.value)
     }
-    drawOverlay()
 }
 
-function clearMeasurements() {
-    measurePoints.value = []
-    measureHistory.value = []
-    drawOverlay()
-}
+const placementHint = computed<string | null>(() => {
+    if (activeTool.value === "none") return null
+    const n = placementPoints.value.length
+    if (activeTool.value === "line") {
+        if (n === 0) return "Click the first endpoint."
+        return "Click the second endpoint."
+    }
+    if (activeTool.value === "ellipse") {
+        if (n === 0) return "Click the ellipse center."
+        if (n === 1) return "Click the first semi-axis endpoint."
+        return "Click the second semi-axis endpoint."
+    }
+    if (n === 0) return "Click the angle vertex."
+    if (n === 1) return "Click the first arm endpoint."
+    return "Click the second arm endpoint."
+})
 
-// Scale bar export
+const measurementSummaries = computed(() => {
+    return measurements.value.map((m) => ({
+        id: m.id,
+        type: m.type,
+        typeLabel: measurementTypeLabel(m),
+        label: measurementLabel(m),
+        color: getDatumColor(m.colorIndex),
+        selected: m.id === selectedId.value,
+    }))
+})
+
+// Scale bar export — unchanged from the previous version, preserved verbatim
+// so downstream callers (ResultViewer) keep working if they ever wire it up.
 function exportWithScaleBar(): Promise<Blob> {
     return new Promise((resolve, reject) => {
         const image = img.value
@@ -414,7 +1321,6 @@ function exportWithScaleBar(): Promise<Blob> {
         const ih = image.naturalHeight
         console.log(`[scale-bar] image ${String(iw)}×${String(ih)}, scale=${String(props.scalePxPerMm)} px/mm`)
 
-        // Scale font/bar sizes relative to image width
         const unit = Math.max(iw / 100, 8)
         const barHeightPx = Math.round(unit * 5)
         const canvas = document.createElement("canvas")
@@ -427,14 +1333,11 @@ function exportWithScaleBar(): Promise<Blob> {
             return
         }
 
-        // Draw image
         ctx.drawImage(image, 0, 0)
 
-        // Draw bar background
         ctx.fillStyle = "#000"
         ctx.fillRect(0, ih, iw, barHeightPx)
 
-        // Determine a nice scale bar length (~20% of image width)
         const imgWidthMm = iw / props.scalePxPerMm
         const niceSteps = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]
         const targetMm = imgWidthMm * 0.2
@@ -453,15 +1356,12 @@ function exportWithScaleBar(): Promise<Blob> {
 
         console.log(`[scale-bar] barMm=${String(barMm)}, barWidthPx=${barWidthPx.toFixed(0)}, barHeight=${String(barHeightPx)}, unit=${unit.toFixed(1)}`)
 
-        // Draw bar
         ctx.fillStyle = "#fff"
         ctx.fillRect(barX, barY - barThick / 2, barWidthPx, barThick)
 
-        // End ticks
         ctx.fillRect(barX, barY - tickH / 2, Math.max(2, unit * 0.15), tickH)
         ctx.fillRect(barX + barWidthPx - Math.max(2, unit * 0.15), barY - tickH / 2, Math.max(2, unit * 0.15), tickH)
 
-        // Label above bar
         const fontSize = Math.round(unit * 1.4)
         const label = `${String(barMm)} mm`
         ctx.font = `bold ${String(fontSize)}px monospace`
@@ -470,7 +1370,6 @@ function exportWithScaleBar(): Promise<Blob> {
         ctx.textBaseline = "bottom"
         ctx.fillText(label, barX + barWidthPx / 2, barY - tickH / 2 - Math.round(unit * 0.3))
 
-        // Scale info on the right
         const smallFont = Math.round(unit * 1)
         ctx.textAlign = "right"
         ctx.textBaseline = "middle"
@@ -505,56 +1404,108 @@ onMounted(() => {
         })
         resizeObs.observe(containerRef.value)
     }
+    window.addEventListener("keydown", onKeyDown)
 })
 
 onUnmounted(() => {
     resizeObs?.disconnect()
+    window.removeEventListener("keydown", onKeyDown)
 })
 
 watch(() => props.imageUrl, loadImg)
 watch(showGrid, () => { drawOverlay() })
 watch(gridSpacingMm, () => { drawOverlay() })
+watch(() => props.scalePxPerMm, () => { drawOverlay() })
 </script>
 
 <template>
     <div class="space-y-3">
         <!-- Toolbar -->
         <div class="flex flex-wrap items-center gap-2 text-sm">
-            <button
-                class="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors"
-                :class="
-                    activeTool === 'measure'
-                        ? 'border-primary bg-primary/10 text-primary'
-                        : 'border-border text-muted-foreground hover:text-foreground'
-                "
-                @click="toggleMeasure"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+            <div class="inline-flex rounded-md border border-border p-0.5">
+                <button
+                    class="inline-flex items-center gap-1.5 rounded px-2.5 py-1.5 text-xs font-medium transition-colors"
+                    :class="
+                        activeTool === 'line'
+                            ? 'bg-primary/10 text-primary'
+                            : 'text-muted-foreground hover:text-foreground'
+                    "
+                    @click="setTool('line')"
                 >
-                    <path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z" />
-                    <path d="m14.5 12.5 2-2" />
-                    <path d="m11.5 9.5 2-2" />
-                    <path d="m8.5 6.5 2-2" />
-                    <path d="m17.5 15.5 2-2" />
-                </svg>
-                Measure
-            </button>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <line x1="4" y1="20" x2="20" y2="4" />
+                        <circle cx="4" cy="20" r="1.5" />
+                        <circle cx="20" cy="4" r="1.5" />
+                    </svg>
+                    Line
+                </button>
+                <button
+                    class="inline-flex items-center gap-1.5 rounded px-2.5 py-1.5 text-xs font-medium transition-colors"
+                    :class="
+                        activeTool === 'ellipse'
+                            ? 'bg-primary/10 text-primary'
+                            : 'text-muted-foreground hover:text-foreground'
+                    "
+                    @click="setTool('ellipse')"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <ellipse cx="12" cy="12" rx="9" ry="6" />
+                    </svg>
+                    Ellipse
+                </button>
+                <button
+                    class="inline-flex items-center gap-1.5 rounded px-2.5 py-1.5 text-xs font-medium transition-colors"
+                    :class="
+                        activeTool === 'angle'
+                            ? 'bg-primary/10 text-primary'
+                            : 'text-muted-foreground hover:text-foreground'
+                    "
+                    @click="setTool('angle')"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M4 20 L20 20 L4 6 Z" fill="none" />
+                        <path d="M10 20 a6 6 0 0 0 -3.5 -8.5" />
+                    </svg>
+                    Angle
+                </button>
+            </div>
 
             <button
-                v-if="measureHistory.length > 0 || measurePoints.length > 0"
+                v-if="measurements.length > 0 || placementPoints.length > 0"
                 class="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:text-destructive"
                 @click="clearMeasurements"
             >
-                Clear
+                Clear all
             </button>
 
             <div class="mx-1 h-4 w-px bg-border" />
@@ -585,54 +1536,98 @@ watch(gridSpacingMm, () => { drawOverlay() })
             >
         </div>
 
-        <!-- Measurement readout -->
+        <!-- Placement hint -->
         <div
-            v-if="activeTool === 'measure'"
+            v-if="placementHint"
             class="rounded-md border border-primary/30 bg-primary/5 px-3 py-2 text-sm"
         >
-            <template v-if="measurePoints.length === 0">
-                Click two points on the image to measure distance.
-            </template>
-            <template v-else-if="measurePoints.length === 1">
-                Click a second point.
-            </template>
-            <template v-else-if="measureDistMm != null">
-                Distance:
-                <span class="font-mono font-semibold">
-                    {{ measureDistMm >= 10
-                        ? measureDistMm.toFixed(1)
-                        : measureDistMm.toFixed(2)
-                    }} mm
-                </span>
-                <span class="ml-2 text-muted-foreground">
-                    (click to start a new measurement)
-                </span>
-            </template>
+            {{ placementHint }}
+            <span class="ml-2 text-xs text-muted-foreground">
+                Press Escape to cancel.
+            </span>
         </div>
 
-        <!-- Canvas area -->
-        <div
-            ref="containerRef"
-            class="relative h-[500px] overflow-hidden rounded-lg border border-border bg-muted"
-            :class="activeTool === 'measure' ? 'cursor-crosshair' : 'cursor-grab'"
-        >
-            <canvas
-                ref="canvasRef"
-                class="absolute inset-0"
-            />
-            <canvas
-                ref="overlayRef"
-                class="absolute inset-0"
-                @click="onCanvasClick"
-                @wheel.prevent="onWheel"
-                @mousedown="onMouseDown"
-                @mousemove="onMouseMove"
-                @mouseup="onMouseUp"
-                @mouseleave="onMouseUp"
-                @touchstart="onTouchStart"
-                @touchmove="onTouchMove"
-                @touchend="onTouchEnd"
-            />
+        <!-- Canvas + side list -->
+        <div class="grid gap-3 md:grid-cols-[1fr_220px]">
+            <div
+                ref="containerRef"
+                class="relative h-[500px] overflow-hidden rounded-lg border border-border bg-muted"
+                :class="activeTool !== 'none' ? 'cursor-crosshair' : 'cursor-grab'"
+            >
+                <canvas
+                    ref="canvasRef"
+                    class="absolute inset-0"
+                />
+                <canvas
+                    ref="overlayRef"
+                    class="absolute inset-0 touch-none"
+                    @click="onClick"
+                    @wheel.prevent="onWheel"
+                    @mousedown="onMouseDown"
+                    @mousemove="onMouseMove"
+                    @mouseup="onMouseUp"
+                    @mouseleave="onMouseLeave"
+                    @touchstart="onTouchStart"
+                    @touchmove="onTouchMove"
+                    @touchend="onTouchEnd"
+                    @touchcancel="onTouchEnd"
+                />
+            </div>
+
+            <!-- Measurement list -->
+            <div
+                class="flex max-h-[500px] flex-col gap-1 overflow-y-auto rounded-lg border border-border bg-muted/30 p-2"
+            >
+                <div
+                    v-if="measurementSummaries.length === 0"
+                    class="px-2 py-3 text-xs text-muted-foreground"
+                >
+                    No measurements yet. Pick a tool above and click on the image.
+                </div>
+                <button
+                    v-for="m in measurementSummaries"
+                    :key="m.id"
+                    class="group flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors"
+                    :class="
+                        m.selected
+                            ? 'border-primary bg-primary/10'
+                            : 'border-transparent hover:border-border hover:bg-muted'
+                    "
+                    @click="selectMeasurement(m.id)"
+                >
+                    <span
+                        class="inline-block h-3 w-3 shrink-0 rounded-full border border-border"
+                        :style="{ backgroundColor: m.color }"
+                    />
+                    <span class="shrink-0 font-medium text-foreground">
+                        {{ m.typeLabel }}
+                    </span>
+                    <span class="truncate font-mono text-muted-foreground">
+                        {{ m.label }}
+                    </span>
+                    <button
+                        class="ml-auto shrink-0 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive"
+                        :class="m.selected ? 'opacity-100' : ''"
+                        title="Delete measurement"
+                        @click.stop="deleteMeasurement(m.id)"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="12"
+                            height="12"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <path d="M18 6 6 18" />
+                            <path d="m6 6 12 12" />
+                        </svg>
+                    </button>
+                </button>
+            </div>
         </div>
     </div>
 </template>
diff --git a/src/components/DatumCanvas.vue b/src/components/DatumCanvas.vue
index 51937c5..d8fcb36 100644
--- a/src/components/DatumCanvas.vue
+++ b/src/components/DatumCanvas.vue
@@ -53,7 +53,9 @@ function datumIndex(datum: Datum): number {
 function datumPoints(datum: Datum): Point[] {
     if (datum.type === "rectangle") return datum.corners as unknown as Point[]
     if (datum.type === "line") return datum.endpoints as unknown as Point[]
-    return [datum.center, datum.axisEndA, datum.axisEndB]
+    // Index 0 is the center (translate all); 1..N are the on-curve points
+    // the user drags to reshape the fitted ellipse.
+    return [datum.center, ...datum.points]
 }
 
 function getPointConfigs(datum: Datum, dIdx: number) {
@@ -230,24 +232,20 @@ function onPointDragMove(e: {
         newEndpoints[_pointIndex] = newPos
         store.updateDatum(_datumId, { endpoints: newEndpoints })
     } else if (_pointIndex === 0) {
-        // Ellipse center — translate all three handles together
+        // Ellipse center — translate all on-curve points by the same delta
+        // and let the store refit.
         const dx = newPos.x - datum.center.x
         const dy = newPos.y - datum.center.y
-        store.updateDatum(_datumId, {
-            center: newPos,
-            axisEndA: {
-                x: datum.axisEndA.x + dx,
-                y: datum.axisEndA.y + dy,
-            },
-            axisEndB: {
-                x: datum.axisEndB.x + dx,
-                y: datum.axisEndB.y + dy,
-            },
-        })
-    } else if (_pointIndex === 1) {
-        store.updateDatum(_datumId, { axisEndA: newPos })
+        const translated = datum.points.map((p) => ({
+            x: p.x + dx,
+            y: p.y + dy,
+        }))
+        store.updateEllipsePoints(_datumId, translated)
     } else {
-        store.updateDatum(_datumId, { axisEndB: newPos })
+        const newPoints = datum.points.map((p, i) =>
+            i === _pointIndex - 1 ? newPos : p,
+        )
+        store.updateEllipsePoints(_datumId, newPoints)
     }
 }
 
diff --git a/src/components/DatumPanel.vue b/src/components/DatumPanel.vue
index 1b89cbd..0778e47 100644
--- a/src/components/DatumPanel.vue
+++ b/src/components/DatumPanel.vue
@@ -91,6 +91,13 @@ function typeBadge(datum: Datum): string {
     if (datum.type === "line") return "Line"
     return "Circle"
 }
+
+function axisBadge(datum: Datum): string | null {
+    if (datum.type === "rectangle" && datum.isAxisReference) return "axis"
+    if (datum.type === "line" && datum.axisRole === "x") return "+x"
+    if (datum.type === "line" && datum.axisRole === "y") return "+y"
+    return null
+}
 </script>
 
 <template>
@@ -191,6 +198,13 @@ function typeBadge(datum: Datum): string {
                             <Badge variant="outline" class="text-xs">
                                 {{ typeBadge(datum) }}
                             </Badge>
+                            <Badge
+                                v-if="axisBadge(datum)"
+                                variant="default"
+                                class="text-xs"
+                            >
+                                {{ axisBadge(datum) }}
+                            </Badge>
                             <span class="text-xs text-muted-foreground">{{
                                 formatDimensions(datum)
                             }}</span>
@@ -332,6 +346,68 @@ function typeBadge(datum: Datum): string {
                         />
                     </div>
 
+                    <!-- World-axis role -->
+                    <div
+                        v-if="datum.type === 'rectangle'"
+                        class="flex items-center justify-between"
+                    >
+                        <Label class="text-xs">World axis reference</Label>
+                        <label
+                            class="flex cursor-pointer items-center gap-1.5"
+                            @click.stop
+                        >
+                            <input
+                                type="checkbox"
+                                class="accent-primary"
+                                :checked="datum.isAxisReference ?? false"
+                                @change="
+                                    (e) =>
+                                        store.setAxisRole(
+                                            datum.id,
+                                            (e.target as HTMLInputElement)
+                                                .checked
+                                                ? 'rect'
+                                                : null,
+                                        )
+                                "
+                            />
+                            <span class="text-xs text-muted-foreground"
+                                >Use</span
+                            >
+                        </label>
+                    </div>
+                    <div v-else-if="datum.type === 'line'">
+                        <Label class="text-xs">World axis</Label>
+                        <div class="mt-1 grid grid-cols-3 gap-1">
+                            <button
+                                v-for="opt in [
+                                    { value: null, label: 'None' },
+                                    { value: 'x', label: 'X' },
+                                    { value: 'y', label: 'Y' },
+                                ]"
+                                :key="String(opt.value)"
+                                type="button"
+                                class="h-7 rounded-md border text-xs font-medium transition-colors"
+                                :class="
+                                    (datum.axisRole ?? null) === opt.value
+                                        ? 'border-primary bg-primary/10 text-primary'
+                                        : 'border-border text-muted-foreground hover:bg-accent'
+                                "
+                                @click.stop="
+                                    store.setAxisRole(
+                                        datum.id,
+                                        opt.value as
+                                            | 'x'
+                                            | 'y'
+                                            | null,
+                                    )
+                                "
+                            >
+                                {{ opt.label }}
+                            </button>
+                        </div>
+                    </div>
+
                     <!-- Confidence -->
                     <div>
                         <div class="flex items-center justify-between">
diff --git a/src/components/ResultViewer.vue b/src/components/ResultViewer.vue
index 64f44b7..b3125d9 100644
--- a/src/components/ResultViewer.vue
+++ b/src/components/ResultViewer.vue
@@ -63,13 +63,24 @@ const MAX_AUTO_SCALE_DIM = 8192
  *  best datum by type priority (rect > line > ellipse) and then confidence.
  *  Returns null if no datum gives a usable scale. */
 function pickScaleRef(): { srcPxPerMm: number } | null {
-    const best = [...store.datums].sort((a, b) => {
-        const rank = (d: Datum) =>
-            d.type === "rectangle" ? 0 : d.type === "ellipse" ? 1 : 2
-        const r = rank(a) - rank(b)
-        if (r !== 0) return r
-        return b.confidence - a.confidence
-    })[0]
+    const axisFlagged = store.datums.find(
+        (d) =>
+            (d.type === "rectangle" && d.isAxisReference) ||
+            (d.type === "line" && d.axisRole),
+    )
+    const best =
+        axisFlagged ??
+        [...store.datums].sort((a, b) => {
+            const rank = (d: Datum) =>
+                d.type === "rectangle"
+                    ? 0
+                    : d.type === "ellipse"
+                      ? 1
+                      : 2
+            const r = rank(a) - rank(b)
+            if (r !== 0) return r
+            return b.confidence - a.confidence
+        })[0]
     if (!best) return null
     if (best.type === "rectangle") {
         if (best.widthMm <= 0 || best.heightMm <= 0) return null
@@ -120,7 +131,8 @@ function computeAutoScale(): number {
         autoScale *= MAX_AUTO_SCALE_DIM / estMax
     }
 
-    return Math.max(1, Math.round(autoScale * 10) / 10)
+    // The scale input is integer-only; floor so the shown value round-trips.
+    return Math.max(1, Math.floor(autoScale))
 }
 
 onMounted(() => {
@@ -383,6 +395,7 @@ async function download() {
                         :model-value="scaleInput"
                         type="number"
                         min="1"
+                        step="1"
                         class="w-28 font-mono"
                         :class="
                             scaleValid
diff --git a/src/lib/datum-cache.ts b/src/lib/datum-cache.ts
index 2694604..f5d1269 100644
--- a/src/lib/datum-cache.ts
+++ b/src/lib/datum-cache.ts
@@ -1,4 +1,4 @@
-import type { Datum } from "@/types"
+import type { Datum, EllipseDatum, Point } from "@/types"
 
 const KEY_PREFIX = "skwik-datums-"
 
@@ -17,12 +17,38 @@ export function loadDatums(hash: string): Datum[] | null {
     try {
         const raw = localStorage.getItem(KEY_PREFIX + hash)
         if (!raw) return null
-        return JSON.parse(raw) as Datum[]
+        const parsed = JSON.parse(raw) as Datum[]
+        return parsed.map(migrateDatum)
     } catch {
         return null
     }
 }
 
+/** Legacy ellipse datums stored only center+axisEndA+axisEndB (pre 8-point
+ *  fit). On load, synthesize 8 sample points from those axes so the new
+ *  fit-based pipeline has something to work with. */
+function migrateDatum(d: Datum): Datum {
+    if (d.type !== "ellipse") return d
+    const e = d as EllipseDatum
+    if (Array.isArray(e.points) && e.points.length >= 5) return e
+    const vAx = e.axisEndA.x - e.center.x
+    const vAy = e.axisEndA.y - e.center.y
+    const vBx = e.axisEndB.x - e.center.x
+    const vBy = e.axisEndB.y - e.center.y
+    const N = 8
+    const points: Point[] = []
+    for (let i = 0; i < N; i++) {
+        const t = (2 * Math.PI * i) / N
+        const cs = Math.cos(t)
+        const sn = Math.sin(t)
+        points.push({
+            x: e.center.x + vAx * cs + vBx * sn,
+            y: e.center.y + vAy * cs + vBy * sn,
+        })
+    }
+    return { ...e, points }
+}
+
 export function clearCache(): void {
     const toRemove: string[] = []
     for (let i = 0; i < localStorage.length; i++) {
diff --git a/src/lib/datums.ts b/src/lib/datums.ts
index 7115c05..f410d4a 100644
--- a/src/lib/datums.ts
+++ b/src/lib/datums.ts
@@ -89,15 +89,26 @@ export function createLineDatum(center: Point, index: number): LineDatum {
     }
 }
 
+const DEFAULT_ELLIPSE_POINT_COUNT = 8
+
 export function createEllipseDatum(
     center: Point,
     index: number,
     preset?: CirclePreset,
 ): EllipseDatum {
     const spread = 80
+    const points: Point[] = []
+    for (let i = 0; i < DEFAULT_ELLIPSE_POINT_COUNT; i++) {
+        const t = (2 * Math.PI * i) / DEFAULT_ELLIPSE_POINT_COUNT
+        points.push({
+            x: center.x + spread * Math.cos(t),
+            y: center.y + spread * Math.sin(t),
+        })
+    }
     return {
         id: nanoid(),
         type: "ellipse",
+        points,
         center: { x: center.x, y: center.y },
         axisEndA: { x: center.x + spread, y: center.y },
         axisEndB: { x: center.x, y: center.y + spread },
diff --git a/src/lib/ellipse-fit.ts b/src/lib/ellipse-fit.ts
new file mode 100644
index 0000000..7d30990
--- /dev/null
+++ b/src/lib/ellipse-fit.ts
@@ -0,0 +1,193 @@
+/**
+ * ellipse-fit.ts — algebraic least-squares ellipse fit from N≥5 points.
+ *
+ * Solves the conic `a·x² + b·xy + c·y² + d·x + e·y + f = 0` by fixing
+ * `f = −1` (i.e. solving `a·x² + b·xy + c·y² + d·x + e·y = 1`) after
+ * data-normalising points to centroid = 0 / RMS distance = 1. This is
+ * numerically well-behaved for the 5–20-point user-placed case we need,
+ * and does not require SVD. Fit can silently degenerate to a hyperbola
+ * if the user's points don't look like an ellipse — we detect that and
+ * return null.
+ */
+
+import type { Point } from "@/types"
+
+interface EllipseFit {
+    center: Point
+    /** Offset vector from center to the semi-major axis endpoint. */
+    semiMajor: Point
+    /** Offset vector from center to the semi-minor axis endpoint
+     *  (perpendicular to semiMajor). */
+    semiMinor: Point
+}
+
+export function fitEllipse(points: Point[]): EllipseFit | null {
+    if (points.length < 5) return null
+
+    // ── Data normalisation: centroid to origin, mean distance to 1. ─────
+    let sx = 0
+    let sy = 0
+    for (const p of points) {
+        sx += p.x
+        sy += p.y
+    }
+    const cx = sx / points.length
+    const cy = sy / points.length
+    let meanDist = 0
+    for (const p of points) {
+        meanDist += Math.hypot(p.x - cx, p.y - cy)
+    }
+    meanDist /= points.length
+    if (meanDist < 1e-9) return null
+    const s = 1 / meanDist
+
+    // ── 5×5 normal equations: Σ rᵢ·rᵢᵀ · p = Σ rᵢ, where rᵢ is the
+    //    row [x², xy, y², x, y] in normalised coords and the RHS is 1
+    //    (the −f term we fixed). ──────────────────────────────────────
+    const M: number[][] = [
+        [0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0],
+    ]
+    const v: number[] = [0, 0, 0, 0, 0]
+    for (const p of points) {
+        const nx = (p.x - cx) * s
+        const ny = (p.y - cy) * s
+        const r = [nx * nx, nx * ny, ny * ny, nx, ny]
+        for (let i = 0; i < 5; i++) {
+            v[i] = (v[i] ?? 0) + (r[i] ?? 0)
+            for (let j = 0; j < 5; j++) {
+                const row = M[i] as number[]
+                row[j] = (row[j] ?? 0) + (r[i] ?? 0) * (r[j] ?? 0)
+            }
+        }
+    }
+
+    const sol = solve5(M, v)
+    if (!sol) return null
+    const aN = sol[0] ?? 0
+    const bN = sol[1] ?? 0
+    const cN = sol[2] ?? 0
+    const dN = sol[3] ?? 0
+    const eN = sol[4] ?? 0
+
+    // ── Un-normalise back to original image coords. ─────────────────────
+    // x' = (x − cx)·s ; y' = (y − cy)·s ; the conic
+    //   aN·x'² + bN·x'y' + cN·y'² + dN·x' + eN·y' − 1 = 0
+    // expands to `a x² + b xy + c y² + d x + e y + f = 0` with
+    const s2 = s * s
+    const a = aN * s2
+    const b = bN * s2
+    const c = cN * s2
+    const d = dN * s - 2 * aN * s2 * cx - bN * s2 * cy
+    const e = eN * s - bN * s2 * cx - 2 * cN * s2 * cy
+    const f =
+        aN * s2 * cx * cx +
+        bN * s2 * cx * cy +
+        cN * s2 * cy * cy -
+        dN * s * cx -
+        eN * s * cy -
+        1
+
+    // ── Geometric extraction. ───────────────────────────────────────────
+    // Quadratic-form matrix is [[a, b/2], [b/2, c]] because the xy coef
+    // is split symmetrically; det = ac − b²/4. An ellipse needs det > 0.
+    const det = a * c - (b * b) / 4
+    if (det <= 0) return null
+
+    // Center from ∇F = 0:
+    //   2a·x₀ + b·y₀ + d = 0
+    //   b·x₀ + 2c·y₀ + e = 0
+    const denom = 4 * a * c - b * b
+    if (Math.abs(denom) < 1e-20) return null
+    const x0 = (b * e - 2 * c * d) / denom
+    const y0 = (b * d - 2 * a * e) / denom
+
+    // Constant after centering: F(x₀, y₀) = f − (a·x₀² + b·x₀·y₀ + c·y₀²),
+    // so the centered form is a·u² + b·uv + c·v² = K where K = -F(x₀, y₀).
+    const K = a * x0 * x0 + b * x0 * y0 + c * y0 * y0 - f
+    if (K <= 0) return null
+
+    // Eigen-decompose the quadratic-form matrix to get semi-axis directions.
+    // λ₁ ≥ λ₂ ≥ 0 ; semi-axis length = √(K / λ). Smaller λ → semi-major.
+    const trace = a + c
+    const diff = a - c
+    const disc = Math.sqrt(diff * diff + b * b)
+    const lMax = (trace + disc) / 2
+    const lMin = (trace - disc) / 2
+    if (lMin <= 0) return null
+    const rMajor = Math.sqrt(K / lMin)
+    const rMinor = Math.sqrt(K / lMax)
+
+    // Eigenvector for lMin (semi-major axis direction):
+    //   (a − lMin) vₓ + (b/2) v_y = 0   ⇒   v = (b/2, lMin − a)
+    // If b is ≈ 0 the matrix is already diagonal, so axes are aligned.
+    let ux = 0
+    let uy = 0
+    if (Math.abs(b) > 1e-12) {
+        ux = b / 2
+        uy = lMin - a
+    } else if (a <= c) {
+        ux = 1
+        uy = 0
+    } else {
+        ux = 0
+        uy = 1
+    }
+    const n = Math.hypot(ux, uy)
+    if (n < 1e-12) return null
+    ux /= n
+    uy /= n
+
+    return {
+        center: { x: x0, y: y0 },
+        semiMajor: { x: ux * rMajor, y: uy * rMajor },
+        // 90° rotation gives the perpendicular (semi-minor) direction.
+        semiMinor: { x: -uy * rMinor, y: ux * rMinor },
+    }
+}
+
+/** 5×5 linear solve via Gauss-Jordan elimination with partial pivoting.
+ *  Returns null if the matrix is (near-)singular. */
+function solve5(M: number[][], v: number[]): number[] | null {
+    const n = 5
+    const aug: number[][] = []
+    for (let i = 0; i < n; i++) {
+        const row = M[i] as number[]
+        aug.push([row[0] ?? 0, row[1] ?? 0, row[2] ?? 0, row[3] ?? 0, row[4] ?? 0, v[i] ?? 0])
+    }
+    for (let col = 0; col < n; col++) {
+        let pivot = col
+        let pivotAbs = Math.abs((aug[col] as number[])[col] ?? 0)
+        for (let r = col + 1; r < n; r++) {
+            const vv = Math.abs((aug[r] as number[])[col] ?? 0)
+            if (vv > pivotAbs) {
+                pivotAbs = vv
+                pivot = r
+            }
+        }
+        if (pivotAbs < 1e-12) return null
+        if (pivot !== col) {
+            const tmp = aug[col]
+            aug[col] = aug[pivot] as number[]
+            aug[pivot] = tmp as number[]
+        }
+        const pivRow = aug[col] as number[]
+        const pv = pivRow[col] as number
+        for (let c2 = col; c2 <= n; c2++) {
+            pivRow[c2] = (pivRow[c2] as number) / pv
+        }
+        for (let r = 0; r < n; r++) {
+            if (r === col) continue
+            const rr = aug[r] as number[]
+            const factor = rr[col] as number
+            if (factor === 0) continue
+            for (let c2 = col; c2 <= n; c2++) {
+                rr[c2] = (rr[c2] as number) - factor * (pivRow[c2] as number)
+            }
+        }
+    }
+    return aug.map((row) => (row as number[])[n] as number)
+}
diff --git a/src/lib/solver.ts b/src/lib/solver.ts
index 0cce662..a2353a4 100644
--- a/src/lib/solver.ts
+++ b/src/lib/solver.ts
@@ -237,6 +237,17 @@ type Primary =
 
 function pickPrimary(datums: Datum[]): Primary {
     if (datums.length === 0) throw new Error("No datums provided.")
+
+    // User-flagged world-axis reference wins regardless of type priority.
+    for (const d of datums) {
+        if (d.type === "rectangle" && d.isAxisReference) {
+            return { kind: "rect", datum: d }
+        }
+        if (d.type === "line" && d.axisRole) {
+            return { kind: "line", datum: d }
+        }
+    }
+
     const typeRank = (d: Datum): number =>
         d.type === "rectangle" ? 0 : d.type === "ellipse" ? 1 : 2
     const sizeKey = (d: Datum): number => {
@@ -314,12 +325,23 @@ function primaryLineCorrespondences(
     const p2: Point = { x: p0.x - dy, y: p0.y + dx }
     const p3: Point = { x: p1.x - dy, y: p1.y + dx }
     const srcPts: [Point, Point, Point, Point] = [p0, p1, p2, p3]
-    const targets: [Point, Point, Point, Point] = [
-        { x: 0, y: 0 },
-        { x: L, y: 0 },
-        { x: 0, y: L },
-        { x: L, y: L },
-    ]
+
+    // Default: line defines world +x. With axisRole === "y", endpoints land
+    // along world +y and the synthetic perpendicular lands along +x.
+    const targets: [Point, Point, Point, Point] =
+        line.axisRole === "y"
+            ? [
+                  { x: 0, y: 0 },
+                  { x: 0, y: L },
+                  { x: L, y: 0 },
+                  { x: L, y: L },
+              ]
+            : [
+                  { x: 0, y: 0 },
+                  { x: L, y: 0 },
+                  { x: 0, y: L },
+                  { x: L, y: L },
+              ]
     const weight = Math.max(
         1,
         Math.round(line.confidence * PRIMARY_GAUGE_BOOST),
diff --git a/src/stores/app.ts b/src/stores/app.ts
index e5f77f3..325cd3e 100644
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@@ -1,8 +1,9 @@
 import { defineStore } from "pinia"
 import { ref, computed } from "vue"
-import type { AppStep, Datum, DeskewResult, ExifData } from "@/types"
+import type { AppStep, Datum, DeskewResult, ExifData, Point } from "@/types"
 import { DEFAULT_SCALE_PX_PER_MM } from "@/types"
 import { loadSettings } from "@/lib/settings-cache"
+import { fitEllipse } from "@/lib/ellipse-fit"
 
 export const useAppStore = defineStore("app", () => {
     const cached = loadSettings()
@@ -66,6 +67,73 @@ export const useAppStore = defineStore("app", () => {
         }
     }
 
+    /** Update an ellipse datum's points and refresh the cached best-fit
+     *  ellipse (`center`/`axisEndA`/`axisEndB`). If the fit degenerates
+     *  (fewer than 5 usable points, collinear, or the system is singular),
+     *  we keep the previous cached axes so downstream consumers never see
+     *  a garbage fit. */
+    function updateEllipsePoints(id: string, points: Point[]) {
+        const idx = datums.value.findIndex((d) => d.id === id)
+        const existing = datums.value[idx]
+        if (!existing || existing.type !== "ellipse") return
+        const fit = fitEllipse(points)
+        if (!fit) {
+            datums.value[idx] = { ...existing, points }
+            return
+        }
+        datums.value[idx] = {
+            ...existing,
+            points,
+            center: fit.center,
+            axisEndA: {
+                x: fit.center.x + fit.semiMajor.x,
+                y: fit.center.y + fit.semiMajor.y,
+            },
+            axisEndB: {
+                x: fit.center.x + fit.semiMinor.x,
+                y: fit.center.y + fit.semiMinor.y,
+            },
+        }
+    }
+
+    /** Set (or clear) the world-axis role on a datum, enforcing that at
+     *  most one datum holds the role at a time.
+     *  `role`: "rect"  → rectangle.isAxisReference = true
+     *          "x"/"y" → line.axisRole = "x"|"y"
+     *          null    → clear the role on `id` (no-op if it wasn't set). */
+    function setAxisRole(
+        id: string,
+        role: "rect" | "x" | "y" | null,
+    ) {
+        // Clear any existing flag on other datums.
+        for (let i = 0; i < datums.value.length; i++) {
+            const d = datums.value[i]
+            if (!d || d.id === id) continue
+            if (d.type === "rectangle" && d.isAxisReference) {
+                datums.value[i] = { ...d, isAxisReference: false }
+            } else if (d.type === "line" && d.axisRole) {
+                datums.value[i] = { ...d, axisRole: null }
+            }
+        }
+        const idx = datums.value.findIndex((d) => d.id === id)
+        if (idx === -1) return
+        const target = datums.value[idx]
+        if (!target) return
+        if (role === null) {
+            if (target.type === "rectangle") {
+                datums.value[idx] = { ...target, isAxisReference: false }
+            } else if (target.type === "line") {
+                datums.value[idx] = { ...target, axisRole: null }
+            }
+            return
+        }
+        if (role === "rect" && target.type === "rectangle") {
+            datums.value[idx] = { ...target, isAxisReference: true }
+        } else if ((role === "x" || role === "y") && target.type === "line") {
+            datums.value[idx] = { ...target, axisRole: role }
+        }
+    }
+
     function removeDatum(id: string) {
         datums.value = datums.value.filter((d) => d.id !== id)
         if (selectedDatumId.value === id) {
@@ -119,6 +187,8 @@ export const useAppStore = defineStore("app", () => {
         goToStep,
         addDatum,
         updateDatum,
+        updateEllipsePoints,
+        setAxisRole,
         removeDatum,
         setResult,
         setFileHash,
diff --git a/src/types/index.ts b/src/types/index.ts
index 5aed621..4e53d76 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -11,8 +11,13 @@ export interface RectDatum {
     heightMm: number
     confidence: 1 | 2 | 3 | 4 | 5
     label: string
+    /** When true, this rectangle defines the world axes: TL→TR is +x,
+     *  TL→BL is +y. At most one datum in the set may hold the axis role. */
+    isAxisReference?: boolean
 }
 
+export type LineAxisRole = "x" | "y" | null
+
 export interface LineDatum {
     id: string
     type: "line"
@@ -20,16 +25,25 @@ export interface LineDatum {
     lengthMm: number
     confidence: 1 | 2 | 3 | 4 | 5
     label: string
+    /** Marks this line as the world axis reference. "x" maps endpoint[0]
+     *  to origin and endpoint[1] to (+L, 0); "y" maps to (0, +L). At most
+     *  one datum in the set may hold the axis role. */
+    axisRole?: LineAxisRole
 }
 
 export interface EllipseDatum {
     id: string
     type: "ellipse"
-    /** Image-space ellipse as 3 free points: center + two conjugate
-     * semi-axis endpoints. axisEndA/axisEndB don't need to be perpendicular;
-     * together with center they give a full 5-DoF ellipse matrix. */
+    /** User-placed points on the circle contour (≥5, default 8). The
+     *  best-fit ellipse is refitted each time this array changes; the
+     *  `center`/`axisEndA`/`axisEndB` fields below are that fit cached
+     *  on the datum for use by renderers and the solver. */
+    points: Point[]
     center: Point
+    /** Offset endpoint of the fitted semi-major axis from `center`. */
     axisEndA: Point
+    /** Offset endpoint of the fitted semi-minor axis from `center`
+     *  (perpendicular to axisEndA). */
     axisEndB: Point
     /** Known real-world diameter of the circle being drawn. */
     diameterMm: number