static/js/scribble.js

// static/js/scribble.js

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let drawing = false;

canvas.addEventListener("mousedown", () => (drawing = true));
canvas.addEventListener("mouseup", () => (drawing = false));
canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;
  ctx.lineWidth = 4;
  ctx.lineCap = "round";
  ctx.strokeStyle = "#000";
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

document.getElementById("clear").addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

document.getElementById("convert").addEventListener("click", async () => {
  const image = canvas.toDataURL("image/png");
  const response = await fetch("/scribble/convert", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ image }),
  });

  const data = await response.json();
  if (data.latex) {
    document.getElementById("result-box").style.display = "block";
    document.getElementById("latex-output").value = data.latex;
  } else {
    alert("Error generating LaTeX.");
  }
});

document.getElementById("copy").addEventListener("click", () => {
  const textarea = document.getElementById("latex-output");
  textarea.select();
  document.execCommand("copy");
  alert("✅ LaTeX code copied!");
});