Build the line editor: from measure to confirm

W = geometry.image.width; H = geometry.image.height
Dw, Dh = displayed EXIF-oriented photo dimensions in CSS pixels
sx = Dw / W; sy = Dh / H
photo point on screen: (left + sx*x, top + sy*y)
pointer back to engine: ((screenX - left)/sx, (screenY - top)/sy)

H = [a b c; d e f; g j k]
den = g*x + j*y + k
imageX = (a*x + b*y + c) / den
imageY = (d*x + e*y + f) / den

vertical left/right:   x = intercept + slope*y; t = y
horizontal top/bottom: y = intercept + slope*x; t = x
at(line,t) = intercept + slope*t

Move endpoint at station t, holding opposite station pivot fixed:
slope′ = slope + delta / (t − pivot)
intercept′ = at(line,pivot) − slope′*pivot
Reject t == pivot. The endpoint moves across the axis at fixed t.

Turn around station pivot by degrees:
slope′ = tan(atan(slope) + degrees*π/180)
intercept′ = at(line,pivot) − slope′*pivot

Intersection of vertical v and horizontal h:
den = 1 − v.slope*h.slope
x = (v.intercept + v.slope*h.intercept) / den
y = at(h,x)
Reject abs(den) < 1e-6.

// correctedCorners is a separate draft in engine image pixels.
validateCorners(correctedCorners, measurement.data.geometry.image);
const form = new FormData();
form.set("image", uploadedPhoto); // Same image bytes as the preceding measure.
form.set("face", measurement.data.face);
form.set("card_size", measurement.data.card_size);
form.set("corners", JSON.stringify(correctedCorners));
// Send form to POST /v1/centering/measure through your application server.
// corners is a JSON string of exactly four {x,y} objects in this multipart body.
// Replace measurement with the response; discard old line edits and review again.

const body = {
  face: measurement.data.face,
  card_size: measurement.data.card_size,
  geometry: reviewedGeometry(editableGeometry),
  confirmed_by: "person"
};
// Submit this body only inside the explicit acceptance handler.

// Framework-free ES module. Import from /examples/centering-editor.js.
// Coordinates stay in engine pixels until the last display scaling step.
const sides = ['left', 'right', 'top', 'bottom'];
export const at = (line, t) => line.intercept + line.slope * t;
export const verticalSide = (side) => side === 'left' || side === 'right';

function solve(a, b) {
  const m = a.map((row, i) => [...row, b[i]]), n = b.length;
  for (let k = 0; k < n; k++) {
    let p = k;
    for (let i = k + 1; i < n; i++)
      if (Math.abs(m[i][k]) > Math.abs(m[p][k])) p = i;
    [m[k], m[p]] = [m[p], m[k]];
    const d = m[k][k];
    if (Math.abs(d) < 1e-12) throw new Error('degenerate');
    for (let j = k; j <= n; j++) m[k][j] /= d;
    for (let i = 0; i < n; i++) if (i !== k) {
      const f = m[i][k];
      for (let j = k; j <= n; j++) m[i][j] -= f * m[k][j];
    }
  }
  return m.map((row) => row[n]);
}

function multiply(a, b) {
  const c = new Array(9).fill(0);
  for (let i = 0; i < 3; i++)
    for (let j = 0; j < 3; j++)
      for (let k = 0; k < 3; k++) c[i * 3 + j] += a[i * 3 + k] * b[k * 3 + j];
  return c;
}

export function inverse(h) {
  const [a, b, c, d, e, f, g, i, j] = h;
  const m = [e*j-f*i, c*i-b*j, b*f-c*e, f*g-d*j, a*j-c*g,
    c*d-a*f, d*i-e*g, b*g-a*i, a*e-b*d];
  const det = a * m[0] + b * m[3] + c * m[6];
  if (Math.abs(det) < 1e-12) throw new Error('degenerate');
  return m.map((value) => value / det);
}

export function project(h, p) {
  const d = h[6] * p.x + h[7] * p.y + h[8];
  if (Math.abs(d) < 1e-12) throw new Error('point at infinity');
  return { x: (h[0]*p.x + h[1]*p.y + h[2]) / d,
    y: (h[3]*p.x + h[4]*p.y + h[5]) / d };
}

function normalize(q) {
  const x = q.reduce((sum, p) => sum + p.x, 0) / 4;
  const y = q.reduce((sum, p) => sum + p.y, 0) / 4;
  const f = Math.SQRT2 / (q.reduce((sum, p) => sum + Math.hypot(p.x-x, p.y-y), 0) / 4);
  const t = [f, 0, -f*x, 0, f, -f*y, 0, 0, 1];
  return { q: q.map((p) => project(t, p)), t };
}

// Normalized four-point DLT, with h33 fixed in normalized coordinates.
export function homography(from, to) {
  const a = normalize(from), b = normalize(to), rows = [], rhs = [];
  a.q.forEach((p, i) => {
    const u = b.q[i].x, v = b.q[i].y;
    rows.push([p.x,p.y,1,0,0,0,-u*p.x,-u*p.y],
      [0,0,0,p.x,p.y,1,-v*p.x,-v*p.y]);
    rhs.push(u, v);
  });
  const h = multiply(inverse(b.t), multiply([...solve(rows, rhs), 1], a.t));
  return h.map((value) => value / h[8]);
}

// Returns canonical corner identities after clockwise pixel rotations.
// Do not sort these points back into screen TL/TR/BR/BL order.
export function rectifiedTarget(rectified, card_size) {
  if (!['standard', 'small'].includes(card_size)) throw new Error('card_size');
  const h = Math.round(1000 * (card_size === 'small' ? 86 / 59 : 1.4));
  const my = Math.round(h * 0.05);
  let width = 1100, height = h + 2 * my;
  let q = [{ x: 50, y: my }, { x: 1050, y: my },
    { x: 1050, y: my+h }, { x: 50, y: my+h }];
  const rotations = rectified.rotations ?? 0;
  if (!Number.isInteger(rotations) || rotations < 0 || rotations > 3)
    throw new Error('rotations');
  for (let r = 0; r < rotations; r++) {
    q = q.map((p) => ({ x: height - 1 - p.y, y: p.x }));
    [width, height] = [height, width];
  }
  if (rectified.width !== width || rectified.height !== height)
    throw new Error('rectified dimensions');
  return q;
}

export function rectifiedToImage(geometry) {
  const offset = geometry.rectified.corner_offset ?? 0;
  const corners = geometry.corners.map((_, i) => geometry.corners[(i + offset) % 4]);
  return homography(rectifiedTarget(geometry.rectified, geometry.card_size), corners);
}

// Full padded span, inclusive pixel endpoints: y for vertical, x for horizontal.
export function linePoints(line, side, geometry, samples = 2) {
  if (!sides.includes(side) || !Number.isInteger(samples) || samples < 2)
    throw new Error('side or samples');
  const vertical = verticalSide(side);
  const span = (vertical ? geometry.rectified.height : geometry.rectified.width) - 1;
  const map = rectifiedToImage(geometry);
  return Array.from({ length: samples }, (_, i) => {
    const t = span * i / (samples - 1);
    return project(map, vertical ? { x: at(line, t), y: t } : { x: t, y: at(line, t) });
  });
}

const displayScale = (scale) => typeof scale === 'number' ? { x: scale, y: scale } : scale;

// ctx uses CSS pixels (set its DPR transform separately). scale maps engine
// image pixels to the displayed, EXIF-oriented photo, without crop or letterbox.
// Caller clears the transparent canvas before repainting.
export function drawOverlay(ctx, geometry, scale) {
  const s = displayScale(scale);
  const circle = (p, radius) => {
    ctx.beginPath(); ctx.arc(p.x*s.x, p.y*s.y, radius, 0, 2*Math.PI); ctx.stroke();
  };
  ctx.save();
  ctx.lineWidth = 2;
  for (const [group, color] of [['cut', '#00cfe8'], ['print', '#ffd84d']]) {
    ctx.strokeStyle = color;
    for (const side of sides) {
      const points = linePoints(geometry.lines[group][side], side, geometry, 2);
      ctx.beginPath();
      points.forEach((p, i) => {
        if (i === 0) ctx.moveTo(p.x*s.x, p.y*s.y);
        else ctx.lineTo(p.x*s.x, p.y*s.y);
      });
      ctx.stroke();
      points.forEach((p) => circle(p, 4)); // Endpoint drag handles.
    }
  }
  ctx.strokeStyle = '#ff5169';
  geometry.corners.forEach((p) => circle(p, 6));
  ctx.restore();
}

export function shiftLine(line, delta) {
  return { intercept: line.intercept + delta, slope: line.slope };
}

export function moveEndpoint(line, t, pivot, delta) {
  if (Math.abs(t - pivot) < 1e-12) throw new Error('endpoint equals pivot');
  const slope = line.slope + delta / (t - pivot);
  return { slope, intercept: at(line, pivot) - slope * pivot };
}

// For vertical sides this turns the x(y) slope, not a screen-space angle.
export function turnLine(line, degrees, pivot) {
  const slope = Math.tan(Math.atan(line.slope) + degrees * Math.PI / 180);
  return { slope, intercept: at(line, pivot) - slope * pivot };
}

export function intersection(v, h) {
  const den = 1 - v.slope * h.slope;
  if (Math.abs(den) < 1e-6) throw new Error('degenerate');
  const x = (v.intercept + v.slope * h.intercept) / den;
  return { x, y: at(h, x) };
}

// Preserve all geometry metadata; discard UI/detector keys on each strict line.
export function reviewedGeometry(geometry) {
  const copy = structuredClone(geometry);
  for (const group of ['cut', 'print'])
    for (const side of sides) {
      const { intercept, slope } = copy.lines[group][side];
      copy.lines[group][side] = { intercept, slope };
    }
  return copy;
}

// A payload builder only. Call from the person's explicit acceptance handler.
export function confirmBody(measurement, reviewed) {
  const { face, card_size } = measurement.data;
  if (reviewed.card_size !== card_size) throw new Error('card_size mismatch');
  return { face, card_size, geometry: reviewedGeometry(reviewed), confirmed_by: 'person' };
}

// Throws on invalid input; true on success. Same geometric rules as the server.
export function validateCorners(q, image) {
  if (!Array.isArray(q) || q.length !== 4 || q.some((p) => !p ||
    Object.keys(p).some((key) => key !== 'x' && key !== 'y') ||
    !Number.isFinite(p.x) || !Number.isFinite(p.y) ||
    p.x < -2 || p.y < -2 || p.x > image.width + 1 || p.y > image.height + 1))
    throw new Error('Four {x,y} points within the engine image (2 px edge tolerance) required');
  const crosses = q.map((p, i) => {
    const b = q[(i+1)%4], c = q[(i+2)%4];
    return (b.x-p.x)*(c.y-b.y) - (b.y-p.y)*(c.x-b.x);
  });
  const area = Math.abs(q.reduce((sum, p, i) => {
    const b = q[(i+1)%4];
    return sum + p.x*b.y - p.y*b.x;
  }, 0)) / 2;
  if (!crosses.every((v) => v !== 0 && Math.sign(v) === Math.sign(crosses[0])) ||
    area < Math.max(100, image.width * image.height * 0.001) ||
    q.some((p, i) => Math.hypot(p.x-q[(i+1)%4].x, p.y-q[(i+1)%4].y) < 10))
    throw new Error('Convex quadrilateral, sufficient area and edges of at least 10 px required');
  if (crosses.some((v) => v <= 0) ||
    q[0].x + q[3].x >= q[1].x + q[2].x || q[0].y + q[1].y >= q[2].y + q[3].y)
    throw new Error('Order must be TL, TR, BR, BL clockwise in image coordinates');
  return true;
}

// Minimal endpoint drag hookup on the photo overlay. Mutates only geometry.lines.
// Keep canvas borderless, aligned to the uncropped photo, with touch-action:none.
// onChange repaints; onError displays failures. Rebind after resize/new measure.
export function attachEndpointDrag(canvas, geometry, scale, onChange, onError = () => {}) {
  const s = displayScale(scale), map = inverse(rectifiedToImage(geometry));
  let drag;
  const screen = (event) => {
    const box = canvas.getBoundingClientRect();
    return { x: event.clientX - box.left, y: event.clientY - box.top };
  };
  const rectPoint = (p) => project(map, { x: p.x/s.x, y: p.y/s.y });
  const down = (event) => {
    if (drag || event.button !== 0) return;
    try {
      const p = screen(event), hits = [];
      for (const group of ['cut', 'print']) for (const side of sides) {
        const line = geometry.lines[group][side];
        linePoints(line, side, geometry, 2).forEach((end, index) => {
          const distance = Math.hypot(end.x*s.x-p.x, end.y*s.y-p.y);
          if (distance <= 10) hits.push({ group, side, index, distance });
        });
      }
      const hit = hits.sort((a, b) => a.distance - b.distance)[0];
      if (!hit) return;
      canvas.setPointerCapture(event.pointerId);
      const span = (verticalSide(hit.side) ? geometry.rectified.height : geometry.rectified.width) - 1;
      drag = { ...hit, id: event.pointerId, t: hit.index * span,
        pivot: (1-hit.index) * span, start: rectPoint(p),
        line: { ...geometry.lines[hit.group][hit.side] } };
      event.preventDefault();
    } catch (error) { onError(error); }
  };
  const move = (event) => {
    if (!drag || drag.id !== event.pointerId) return;
    try {
      const p = rectPoint(screen(event));
      // Endpoint stays at its original along-axis station; only across-axis
      // movement changes the slope, keeping the opposite endpoint fixed.
      const delta = verticalSide(drag.side) ? p.x-drag.start.x : p.y-drag.start.y;
      geometry.lines[drag.group][drag.side] = moveEndpoint(drag.line, drag.t, drag.pivot, delta);
      onChange();
    } catch (error) { onError(error); }
  };
  const finish = (event) => {
    if (!drag || drag.id !== event.pointerId) return;
    if (event.type !== 'pointerup') geometry.lines[drag.group][drag.side] = drag.line;
    const id = drag.id;
    drag = undefined;
    if (canvas.hasPointerCapture(id)) canvas.releasePointerCapture(id);
    onChange();
  };
  const handlers = { pointerdown: down, pointermove: move, pointerup: finish,
    pointercancel: finish, lostpointercapture: finish };
  for (const [name, handler] of Object.entries(handlers)) canvas.addEventListener(name, handler);
  return () => {
    if (drag) finish({ type: 'pointercancel', pointerId: drag.id });
    for (const [name, handler] of Object.entries(handlers)) canvas.removeEventListener(name, handler);
  };
}

import { drawOverlay, attachEndpointDrag, reviewedGeometry, confirmBody }
  from "/examples/centering-editor.js";

export function mountEditor({ canvas, photo, acceptButton, measurement, submitConfirm, showError }) {
  const geometry = reviewedGeometry(measurement.data.geometry);
  const box = photo.getBoundingClientRect(), dpr = window.devicePixelRatio || 1;
  const scale = { x: box.width / geometry.image.width, y: box.height / geometry.image.height };
  canvas.style.width = box.width + "px";
  canvas.style.height = box.height + "px";
  canvas.style.touchAction = "none";
  canvas.width = Math.round(box.width * dpr);
  canvas.height = Math.round(box.height * dpr);
  const ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  const repaint = () => {
    ctx.clearRect(0, 0, box.width, box.height);
    drawOverlay(ctx, geometry, scale);
  };
  const detach = attachEndpointDrag(canvas, geometry, scale, repaint, showError);
  const accept = async () => {
    acceptButton.disabled = true;
    try {
      const accepted = reviewedGeometry(geometry); // Retain this copy with the result.
      await submitConfirm(confirmBody(measurement, accepted));
    } catch (error) { showError(error); }
    finally { acceptButton.disabled = false; }
  };
  acceptButton.addEventListener("click", accept);
  repaint();
  return () => { detach(); acceptButton.removeEventListener("click", accept); };
}