Refactor code structure for improved readability and maintainability

static/board-math.js

@@ -0,0 +1,199 @@
+/* Typed math on the sketch board (static/math-board.js).
+   The student types with MathLive (static/vendor/mathlive, MIT, loaded only when first needed) and its on-screen
+   math keyboard, set up here for ninth grade: digits, x and y, fractions, powers, roots, brackets, |x|, ± ≤ ≥ ≠, π,
+   degrees, angles and triangles, plus a letters tab. What is typed is kept as LaTeX and drawn on the board's
+   canvas by the small renderer below, so it moves, prints and is handed in with everything else. The renderer
+   knows the LaTeX that keyboard makes; anything else is drawn as its plain name. */
+(()=>{
+const VENDOR="/static/vendor/mathlive/";
+const SERIF='"STIX Two Text","Cambria Math","Times New Roman",serif';
+
+/* ---------- MathLive ---------- */
+let loading=null;
+function load(){
+  return loading||=new Promise((ok,no)=>{
+    if(window.MathfieldElement||window.MathLive) return ok();
+    const s=document.createElement("script"); s.src=VENDOR+"mathlive.min.js"; s.onload=ok; s.onerror=()=>{ loading=null; no(Error("mathlive")); };
+    document.head.append(s);
+  }).then(()=>{
+    const M=window.MathfieldElement||window.MathLive?.MathfieldElement;
+    M.fontsDirectory=VENDOR+"fonts"; M.soundsDirectory=null; M.keypressSound=null; M.plonkSound=null;
+    const k=window.mathVirtualKeyboard; if(k&&!k.__mathly){ k.__mathly=true; k.layouts=[NINTH,"alphabetic"]; k.editToolbar="none"; }
+  });
+}
+const key=(insert,label,tooltip,more={})=>({insert,label,tooltip,...more});
+const NINTH={label:"123",tooltip:"מספרים ופעולות",rows:[
+  ["[7]","[8]","[9]",key("\\div","÷","חילוק"),key("\\frac{#@}{#?}","a⁄b","שבר"),"x","y",key("\\pi","π","פאי"),"[backspace]"],
+  ["[4]","[5]","[6]",key("\\times","×","כפל"),key("#@^2","x²","בריבוע"),key("#@^{#?}","xⁿ","חזקה"),"a","b",key("\\left(#0\\right)","( )","סוגריים")],
+  ["[1]","[2]","[3]","[-]",key("\\sqrt{#0}","√","שורש"),key("\\sqrt[#?]{#0}","ⁿ√","שורש n"),key("\\left|#0\\right|","|x|","ערך מוחלט"),"[left]","[right]"],
+  ["[0]","[.]","[=]","[+]",key("\\pm","±","פלוס מינוס"),key("\\le","≤","קטן או שווה"),key("\\ge","≥","גדול או שווה"),key("\\ne","≠","שונה"),"[return]"],
+  [key("^{\\circ}","°","מעלות"),key("\\angle","∠","זווית"),key("\\triangle","△","משולש"),"<",">",",",key("\\perp","⊥","מאונך"),key("\\parallel","∥","מקביל"),"[hide-keyboard]"]]};
+
+/* ---------- reading LaTeX ---------- */
+const SYM={cdot:["⋅","op"],times:["×","op"],div:["÷","op"],pm:["±","op"],mp:["∓","op"],le:["≤","rel"],leq:["≤","rel"],ge:["≥","rel"],geq:["≥","rel"],
+  ne:["≠","rel"],neq:["≠","rel"],approx:["≈","rel"],sim:["∼","rel"],cong:["≅","rel"],lt:["<","rel"],gt:[">","rel"],to:["→","rel"],
+  Rightarrow:["⇒","rel"],Leftrightarrow:["⇔","rel"],in:["∈","rel"],perp:["⊥","rel"],parallel:["∥","rel"],mid:["|","rel"],
+  pi:["π"],alpha:["α"],beta:["β"],gamma:["γ"],delta:["δ"],theta:["θ"],lambda:["λ"],mu:["μ"],sigma:["σ"],phi:["φ"],omega:["ω"],Delta:["Δ"],
+  angle:["∠"],measuredangle:["∡"],triangle:["△"],circ:["°"],degree:["°"],infty:["∞"],cdots:["⋯"],ldots:["…"],dots:["…"],prime:["′"],
+  vert:["|"],lvert:["|"],rvert:["|"],"%":["%"],"{":["{"],"}":["}"],lbrace:["{"],rbrace:["}"],colon:[":","punct"],",":[" ","space"],
+  ":":[" ","space"],";":[" ","space"]," ":[" ","space"],quad:["  ","space"],qquad:["    ","space"],"!":["","space"],
+  exponentialE:["e"],imaginaryI:["i"]};
+const TEXT=new Set(["text","mathrm","textrm","operatorname","mbox","textit","mathit"]);
+const WRAP=new Set(["mathbf","boldsymbol","mathsf","displaystyle","textstyle","mathnormal","bm"]);
+const ANGLE_FREE=new Set(["(","[","|","{","−","+"]);
+
+function tokens(s){
+  const out=[]; let i=0;
+  while(i<s.length){
+    const c=s[i];
+    if(c==="\\"){ let j=i+1; if(/[a-zA-Z]/.test(s[j]||"")) while(j<s.length&&/[a-zA-Z]/.test(s[j])) j++; else j++; out.push(s.slice(i,j)); i=j; }
+    else if(/\s/.test(c)) i++;
+    else{ out.push(c); i++; }
+  }
+  return out;
+}
+function parse(latex){
+  const t=tokens(String(latex||"")); let i=0;
+  const peek=()=>t[i], next=()=>t[i++];
+  function list(stop){
+    const items=[];
+    while(i<t.length&&!stop.includes(peek())){
+      const k=peek();
+      if(k==="^"||k==="_"){ next(); const base=items.pop()||{t:"row",items:[]}; const s=base.t==="scripts"?base:{t:"scripts",base};
+        s[k==="^"?"sup":"sub"]=arg(); items.push(s); continue; }
+      if(k==="'"){ next(); items.push({t:"sym",s:"′"}); continue; }
+      items.push(atom());
+    }
+    return items;
+  }
+  function group(close){ const items=list([close]); next(); return {t:"row",items}; }
+  function arg(){
+    if(peek()==="{"){ next(); return group("}"); }
+    return i<t.length?atom():{t:"row",items:[]};
+  }
+  function raw(){   // a text argument, as written
+    if(peek()!=="{") return next()||"";
+    next(); let depth=1, s="";
+    while(i<t.length){ const k=next(); if(k==="{") depth++; if(k==="}"&&!--depth) break;
+      s+=k.startsWith("\\")?(SYM[k.slice(1)]?.[0]??(k.length===2?k[1]:k.slice(1))):k; }
+    return s;
+  }
+  function delim(){ const k=next()||"."; if(k===".") return ""; if(k.startsWith("\\")) return SYM[k.slice(1)]?.[0]??k.slice(1); return k; }
+  function atom(){
+    const k=next();
+    if(k==="{") return group("}");
+    if(k==="}") return {t:"row",items:[]};
+    if(k.startsWith("\\")){
+      const c=k.slice(1);
+      if(c==="frac"||c==="dfrac"||c==="tfrac"||c==="cfrac") return {t:"frac",n:arg(),d:arg()};
+      if(c==="sqrt"){ let index=null; if(peek()==="["){ next(); index={t:"row",items:list(["]"])}; next(); } return {t:"sqrt",body:arg(),index}; }
+      if(c==="left"){ const l=delim(), body={t:"row",items:list(["\\right"])}; next(); return {t:"fence",l,r:delim(),body}; }
+      if(c==="right") return {t:"row",items:[]};
+      if(TEXT.has(c)) return {t:"text",s:raw(),italic:c==="textit"||c==="mathit"};
+      if(WRAP.has(c)) return peek()==="{"?arg():{t:"row",items:[]};
+      if(c==="overline"||c==="bar"||c==="overrightarrow"||c==="vec"||c==="widehat"||c==="hat") return {t:"over",body:arg(),arrow:c==="overrightarrow"||c==="vec"};
+      if(c==="placeholder"){ if(peek()==="["){ while(i<t.length&&next()!=="]"); } raw(); return {t:"ph"}; }
+      if(SYM[c]){ const [s,kind]=SYM[c]; return kind==="space"?{t:"space",w:s.length*.17}:{t:"sym",s,kind}; }
+      return {t:"text",s:c};   // unknown: its name, as text
+    }
+    if(/[a-zA-Z]/.test(k)) return {t:"sym",s:k,italic:true};
+    if(k==="-") return {t:"sym",s:"−",kind:"op"};
+    if(k==="+"||k==="*") return {t:"sym",s:k==="*"?"⋅":"+",kind:"op"};
+    if(k==="="||k==="<"||k===">") return {t:"sym",s:k,kind:"rel"};
+    if(k===","||k===";") return {t:"sym",s:k,kind:"punct"};
+    return {t:"sym",s:k};
+  }
+  return {t:"row",items:list([])};
+}
+
+/* ---------- laying it out: each box has a width, a height above the baseline (a) and below it (d) ---------- */
+const meter=document.createElement("canvas").getContext("2d");
+const fontOf=(size,italic)=>`${italic?"italic ":""}${size}px ${SERIF}`;
+function width(s,size,italic){ meter.font=fontOf(size,italic); return meter.measureText(s).width; }
+
+function box(node,z){   // z: the font size
+  switch(node.t){
+    case "row": return row(node.items,z);
+    case "sym":{ const w=width(node.s,z,node.italic);
+      return {w,a:.72*z,d:.22*z,kind:node.kind,paint:(c,x,y)=>{ c.font=fontOf(z,node.italic); c.fillText(node.s,x,y); }}; }
+    case "text":{ const w=width(node.s,z,node.italic);
+      return {w,a:.72*z,d:.22*z,paint:(c,x,y)=>{ c.font=fontOf(z,node.italic); c.fillText(node.s,x,y); }}; }
+    case "space": return {w:node.w*z,a:0,d:0,paint:()=>{}};
+    case "ph": return {w:.5*z,a:.6*z,d:.1*z,paint:(c,x,y)=>{ c.save(); c.globalAlpha=.35; c.lineWidth=1; c.strokeRect(x+.05*z,y-.6*z,.4*z,.7*z); c.restore(); }};
+    case "scripts": return scripts(node,z);
+    case "frac": return frac(node,z);
+    case "sqrt": return sqrt(node,z);
+    case "fence": return fence(node,z);
+    case "over":{ const b=box(node.body,z), lw=Math.max(1,.05*z);
+      return {w:b.w,a:b.a+.14*z,d:b.d,paint:(c,x,y)=>{ b.paint(c,x,y); c.lineWidth=lw; c.beginPath(); c.moveTo(x,y-b.a-.08*z); c.lineTo(x+b.w,y-b.a-.08*z); c.stroke();
+        if(node.arrow){ c.beginPath(); c.moveTo(x+b.w-.15*z,y-b.a-.15*z); c.lineTo(x+b.w,y-b.a-.08*z); c.lineTo(x+b.w-.15*z,y-b.a-.01*z); c.stroke(); } }}; }
+  }
+  return {w:0,a:0,d:0,paint:()=>{}};
+}
+function row(items,z){
+  const parts=[]; let prev=null;
+  for(const it of items){
+    const b=box(it,z);
+    // a little room around + − = and the like; a sign at the start, or after another sign or a bracket, is a unary one
+    const unary=b.kind==="op"&&(!prev||prev.kind==="op"||prev.kind==="rel"||prev.open);
+    const pad=b.kind==="rel"?.28*z:b.kind==="op"&&!unary?.2*z:b.kind==="punct"?0:0;
+    const after=b.kind==="punct"?.2*z:pad;
+    if(it.t==="frac"){ parts.push({b:{w:.08*z,a:0,d:0,paint:()=>{}}}); }
+    parts.push({b,pre:pad,post:after});
+    if(it.t==="frac") parts.push({b:{w:.08*z,a:0,d:0,paint:()=>{}}});
+    prev=it.t==="sym"&&ANGLE_FREE.has(it.s)&&b.kind!=="op"?{open:true}:b;
+  }
+  let w=0, a=.72*z*(items.length?0:1), d=.22*z*(items.length?0:1);
+  for(const p of parts){ w+=(p.pre||0)+p.b.w+(p.post||0); a=Math.max(a,p.b.a); d=Math.max(d,p.b.d); }
+  return {w,a,d,paint:(c,x,y)=>{ let at=x; for(const p of parts){ at+=p.pre||0; p.b.paint(c,at,y); at+=p.b.w+(p.post||0); } }};
+}
+function scripts(node,z){
+  const b=box(node.base,z), s=Math.max(9,.7*z);
+  const sup=node.sup?box(node.sup,s):null, sub=node.sub?box(node.sub,s):null;
+  const up=Math.max(.38*z,b.a-.38*z), down=Math.max(.2*z,b.d+.04*z-(sub?.a||0)*.2);
+  const gap=.04*z, w=b.w+gap+Math.max(sup?.w||0,sub?.w||0);
+  return {w,a:Math.max(b.a,sup?up+sup.a:0),d:Math.max(b.d,sub?down+sub.d:0),
+    paint:(c,x,y)=>{ b.paint(c,x,y); sup?.paint(c,x+b.w+gap,y-up); sub?.paint(c,x+b.w+gap,y+down); }};
+}
+function frac(node,z){
+  const s=Math.max(10,.85*z), n=box(node.n,s), d=box(node.d,s);
+  const axis=.28*z, gap=.12*z, lw=Math.max(1,.055*z), w=Math.max(n.w,d.w)+.24*z;
+  return {w,a:axis+gap+n.d+n.a,d:Math.max(0,d.a+d.d+gap-axis),
+    paint:(c,x,y)=>{ const bar=y-axis;
+      c.save(); c.lineWidth=lw; c.beginPath(); c.moveTo(x+.04*z,bar); c.lineTo(x+w-.04*z,bar); c.stroke(); c.restore();
+      n.paint(c,x+(w-n.w)/2,bar-gap-n.d); d.paint(c,x+(w-d.w)/2,bar+gap+d.a); }};
+}
+function sqrt(node,z){
+  const b=box(node.body,z), idx=node.index?.items?.length?box(node.index,Math.max(9,.55*z)):null;
+  const top=Math.max(b.a,.72*z)+.16*z, hook=.58*z, shift=idx?Math.max(0,idx.w-.28*z):0, lw=Math.max(1,.055*z);
+  return {w:shift+hook+b.w+.12*z,a:Math.max(top+.06*z,idx?.62*top+idx.a+idx.d:0),d:Math.max(b.d+.06*z,.22*z),
+    paint:(c,x,y)=>{ const x0=x+shift, bottom=y+Math.max(b.d,.05*z)+.04*z, t=y-top;
+      c.save(); c.lineWidth=lw; c.lineJoin="round"; c.beginPath();
+      c.moveTo(x0,y-.32*z); c.lineTo(x0+.12*z,y-.4*z); c.lineTo(x0+.3*z,bottom); c.lineTo(x0+hook,t); c.lineTo(x0+hook+b.w+.1*z,t); c.stroke(); c.restore();
+      b.paint(c,x0+hook+.04*z,y); idx?.paint(c,x0+.3*z-idx.w,y-.62*top); }};
+}
+function fence(node,z){
+  const b=box(node.body,z), tall=b.a+b.d>1.15*z;
+  const side=s=>{ if(!s) return {w:.05*z,paint:()=>{}};
+    const w=width(s,z,false);
+    return {w,paint:(c,x,y)=>{ c.save(); c.font=fontOf(z,false);
+      if(tall){ const h=b.a+b.d+.12*z, k=h/(.98*z); c.translate(x,y-b.a-.06*z); c.scale(1,k); c.fillText(s,0,.76*z); }
+      else c.fillText(s,x,y);
+      c.restore(); }}; };
+  const l=side(node.l), r=side(node.r), pad=.04*z;
+  return {w:l.w+pad+b.w+pad+r.w,a:Math.max(b.a+.08*z,.75*z),d:Math.max(b.d+.08*z,.25*z),
+    paint:(c,x,y)=>{ l.paint(c,x,y); b.paint(c,x+l.w+pad,y); r.paint(c,x+l.w+pad+b.w+pad,y); }};
+}
+
+const cache=new Map();
+// the laid-out formula at this font size: w, a and d, and paint(context, x, baseline y) in the context's colors
+function layout(latex,size){
+  const k=size+"|"+latex;
+  if(!cache.has(k)){ if(cache.size>500) cache.clear(); cache.set(k,box(parse(latex),size)); }
+  return cache.get(k);
+}
+// widths are measured with the math font: when it arrives, measure again
+document.fonts?.addEventListener?.("loadingdone",()=>{ cache.clear(); window.MathlyBoardMath.onFonts?.(); });
+
+window.MathlyBoardMath={load,layout,parse};
+})();

static/index.html

@@ -29,6 +29,7 @@
   <script src="/static/math-tex.js"></script>
   <script src="/static/math-sky.js"></script>
   <script src="/static/science.js"></script>
+  <script src="/static/board-math.js"></script>
   <script src="/static/math-board.js"></script>
   <script src="/static/math.js"></script>
 </body>

static/math-board.js

@@ -5,7 +5,8 @@
    as long as the page is open. Nothing is sent anywhere unless the student hands it in.
 
    Everything on the board is an element that can be moved or erased: a pen stroke (with a pen's pressure),
-   a straight line, a circle (dragged from the center), and a copy of the question (its text and figures).
+   a straight line, a circle (dragged from the center), typed math (the math keyboard, static/board-math.js), and a
+   copy of the question (its text and figures).
    Line ends and circle centers snap to the ends and centers already drawn, so a triangle closes neatly;
    lines that meet that way move together. The eraser removes the lines and circles it touches and cuts pen strokes;
    it leaves the question's copy alone (select it and delete it instead).
@@ -19,7 +20,8 @@ const setOn=on=>{ try{ localStorage.setItem(PREF,on?"on":"off"); }catch{} };
 
 const INKS=[["#1B2140","שחור"],["#2563D9","כחול"],["#D3455B","אדום"]];
 const ERASERS=[[16,"קטן"],[40,"בינוני"],[90,"גדול"]];
-const TOOLS=[["move","✋","הזזה"],["pen","✏️","עט"],["line","╱","קו ישר"],["circle","◯","עיגול"],["eraser","🧽","מחק"]];
+const TOOLS=[["move","✋","הזזה"],["pen","✏️","עט"],["line","╱","קו ישר"],["circle","◯","עיגול"],["math","∑","נוסחה"],["eraser","🧽","מחק"]];
+const MATH_SIZE=26;
 const PEN=2.6, SHAPE=2.4, SNAP=12, GRAB=9, STEP=2, HISTORY=100;
 const PAPER_INK="#1B2140", PAPER_FAINT="#C5CBDF", SELECT="#2563D9";
 const FONT='500 17px Rubik, system-ui, "Segoe UI", sans-serif', LINE_H=27, CARD_PAD=14;
@@ -29,6 +31,7 @@ const sketches=new Map(), images=new Map();
 let el=null, canvas=null, ctx=null, key="", base="", pages=0, page=0, layer=null, source=null, hand=null, onPage=null;
 let tool="pen", ink=INKS[0][0], eraser=ERASERS[1][0], sendLabel="";
 let draft=null, drag=null, rub=null, selection=[];
+let editing=null;   // the formula being typed: {mark (null for a new one), at, node, field, key}
 let full=null;   // the board open full screen: {saved: the context to go back to, done: called when it closes}
 const touches=new Map(); let pan=null, penSeen=false;
 const desk=()=>matchMedia("(min-width:1000px) and (any-pointer:fine)").matches;   // the same test as math.css
@@ -80,7 +83,8 @@ function build(){
   canvas.addEventListener("pointermove",move);
   canvas.addEventListener("pointerup",up);
   canvas.addEventListener("pointercancel",up);
-  canvas.addEventListener("contextmenu",e=>e.preventDefault());   // the pen's side button: no browser menu over the board
+  canvas.addEventListener("contextmenu",e=>e.preventDefault());
+  canvas.addEventListener("dblclick",e=>{ const m=hit(at(e)); if(m?.kind==="math") editMath(m,at(e)); });   // typed math is edited where it is   // the pen's side button: no browser menu over the board
   canvas.addEventListener("wheel",e=>{   // endless paper: scrolls down as far as needed, never above the top
     if(e.ctrlKey) return;   // the browser's zoom
     e.preventDefault(); const s=sketch(), dy=e.deltaMode===1?e.deltaY*24:e.deltaMode===2?e.deltaY*canvas.clientHeight:e.deltaY;
@@ -90,7 +94,7 @@ function build(){
   setTool(tool);
 }
 function pressed(sel,b){ el.querySelectorAll(sel).forEach(x=>x.setAttribute("aria-pressed",x===b)); }
-function reset(){ draft=drag=rub=null; select([]); }
+function reset(){ draft=drag=rub=null; select([]); if(editing) finishMath(false); }
 function setTool(t){
   tool=t; el.querySelectorAll("[data-tool]").forEach(x=>x.setAttribute("aria-pressed",x.dataset.tool===t));
   el.dataset.tool=t; if(t!=="move"&&selection.length){ select([]); paint(); }
@@ -99,7 +103,7 @@ function setTool(t){
   canvas.style.cursor=t==="eraser"?`url("data:image/svg+xml,${svg.replace(/</g,"%3C").replace(/>/g,"%3E")}") ${r+1} ${r+1}, cell`:t==="move"?"default":"";
 }
 function select(list){ selection=list; }
-function turn(p){ page=p; key=`${base}:${page}`; reset(); drawPages(); drawSend(); paint(); }
+function turn(p){ if(editing) finishMath(true); page=p; key=`${base}:${page}`; reset(); drawPages(); drawSend(); paint(); }
 function drawSend(){
   const b=el.querySelector(".mx-board-send"); b.hidden=!hand; el.querySelector(".mx-board-row").hidden=pages<2&&!hand; if(!hand) return;
   b.disabled=false; b.innerHTML=`<i aria-hidden="true">📤</i><span>${sendLabel||`הגשה לשאלה ${page+1}`}</span>`; b.title=sendLabel||`הגשת הלוח כתשובה לשאלה ${page+1}`;
@@ -134,6 +138,7 @@ function draw(m){
   if(m.kind==="line"){ ctx.lineWidth=SHAPE; ctx.beginPath(); ctx.moveTo(...m.a); ctx.lineTo(...m.b); ctx.stroke(); }
   else if(m.kind==="circle"){ ctx.lineWidth=SHAPE; ctx.beginPath(); ctx.arc(m.a[0],m.a[1],dist(m.a,m.b),0,Math.PI*2); ctx.stroke(); }
   else if(m.kind==="card") card(m);
+  else if(m.kind==="math"){ const L=mathBox(m); if(L){ ctx.fillStyle=m.color; ctx.direction="ltr"; ctx.textAlign="left"; ctx.textBaseline="alphabetic"; L.paint(ctx,m.x,m.y+L.a); } }
   else{ for(let i=1;i<m.pts.length;i++) segment(m,i); if(m.pts.length===1) segment(m,0); }
   ctx.restore();
 }
@@ -160,8 +165,10 @@ function picture(src){
   if(!images.has(src)){ const img=new Image(); img.onload=()=>paint(); img.src=src; images.set(src,img); }
   return images.get(src);
 }
+const mathBox=m=>window.MathlyBoardMath?.layout(m.latex,m.size||MATH_SIZE);
 function box(m){
   if(m.kind==="card") return [m.x,m.y,m.x+m.w,m.y+m.h];
+  if(m.kind==="math"){ const L=mathBox(m)||{w:0,a:0,d:0}; return [m.x,m.y,m.x+L.w,m.y+L.a+L.d]; }
   if(m.kind==="circle"){ const r=dist(m.a,m.b); return [m.a[0]-r,m.a[1]-r,m.a[0]+r,m.a[1]+r]; }
   const pts=m.kind==="line"?[m.a,m.b]:m.pts, xs=pts.map(p=>p[0]), ys=pts.map(p=>p[1]);
   return [Math.min(...xs),Math.min(...ys),Math.max(...xs),Math.max(...ys)];
@@ -182,7 +189,8 @@ function toSegment(p,a,b){
 function reach(m,p){
   if(m.kind==="line") return toSegment(p,m.a,m.b);
   if(m.kind==="circle") return Math.min(Math.abs(dist(p,m.a)-dist(m.a,m.b)),dist(p,m.a));
-  if(m.kind==="card"){ const [x0,y0,x1,y1]=box(m); return p[0]>=x0&&p[0]<=x1&&p[1]>=y0&&p[1]<=y1?0:Infinity; }
+  if(m.kind==="card"||m.kind==="math"){ const [x0,y0,x1,y1]=box(m), dx=Math.max(x0-p[0],0,p[0]-x1), dy=Math.max(y0-p[1],0,p[1]-y1);
+    return m.kind==="card"?(dx||dy?Infinity:0):Math.hypot(dx,dy); }
   if(m.pts.length===1) return dist(p,m.pts[0]);
   let d=Infinity; for(let i=1;i<m.pts.length;i++) d=Math.min(d,toSegment(p,m.pts[i-1],m.pts[i])); return d;
 }
@@ -203,13 +211,13 @@ function snap(p,skip){
 }
 function shift(m,dx,dy){
   const by=p=>{ p[0]+=dx; p[1]+=dy; };
-  if(m.kind==="card"){ m.x+=dx; m.y+=dy; } else if(m.kind==="free") m.pts.forEach(by); else { by(m.a); by(m.b); }
+  if(m.kind==="card"||m.kind==="math"){ m.x+=dx; m.y+=dy; } else if(m.kind==="free") m.pts.forEach(by); else { by(m.a); by(m.b); }
 }
-// the eraser at p: lines and circles it touches go; pen strokes are cut; the question's copy stays
+// the eraser at p: lines, circles and typed math it touches go; pen strokes are cut; the question's copy stays
 function rubOut(p){
   const r=eraser/2, all=marks(); let changed=false;
   for(let i=all.length-1;i>=0;i--){ const m=all[i];
-    if(m.kind==="line"||m.kind==="circle"){ if(reach(m,p)<=r+SHAPE/2){ all.splice(i,1); changed=true; } continue; }
+    if(m.kind==="line"||m.kind==="circle"||m.kind==="math"){ if(reach(m,p)<=r+SHAPE/2){ all.splice(i,1); changed=true; } continue; }
     if(m.kind!=="free") continue;
     const gone=m.pts.map(q=>dist(p,q)<=r+PEN); if(!gone.some(Boolean)) continue;
     const runs=[]; let run=[]; m.pts.forEach((q,k)=>{ if(gone[k]){ if(run.length) runs.push(run); run=[]; } else run.push(q); }); if(run.length) runs.push(run);
@@ -241,6 +249,8 @@ function down(e){
   }
   if(e.button!==0&&e.button!==5) return;   // 5: the pen's eraser end
   const p=at(e), use=e.button===5||(e.buttons&32)>0?"eraser":tool;
+  if(editing){ e.preventDefault(); return finishMath(true); }   // a tap beside the formula being typed: it is done
+  if(use==="math"){ e.preventDefault(); const m=hit(p); return editMath(m?.kind==="math"?m:null,p); }
   capture(e.pointerId); e.preventDefault();
   if(use==="move"){
     const m=hit(p);
@@ -356,6 +366,47 @@ function copyQuestion(){
   marks().push(m); setTool("move"); select([m]); paint(); if(pages>1) drawPages();
 }
 
+/* ---------- typed math ---------- */
+// a bar over the board's top with the math field; the math keyboard opens with it
+async function editMath(mark,p){
+  const M=window.MathlyBoardMath; if(!M||editing) return;
+  const node=document.createElement("div"); node.className="mx-board-mathedit"; node.dir="ltr";
+  node.innerHTML='<span class="mx-board-mathwait" dir="rtl">טוענים את מקלדת המתמטיקה…</span>';
+  el.querySelector(".mx-board-stage").append(node);
+  const e=editing={mark,at:p,node,field:null,key};
+  try{ await M.load(); }
+  catch{ node.querySelector("span").textContent="לא הצלחנו לטעון את מקלדת המתמטיקה. נסו שוב."; return setTimeout(()=>editing===e&&finishMath(false),2500); }
+  if(editing!==e) return;
+  node.innerHTML=`<math-field aria-label="נוסחה"></math-field>
+    <button type="button" data-math="ok" title="הוספה ללוח">✓</button><button type="button" data-math="cancel" title="ביטול">✕</button>`;
+  const f=e.field=node.querySelector("math-field");
+  f.mathVirtualKeyboardPolicy="manual";
+  f.value=mark?.latex||"";
+  f.addEventListener("change",()=>editing===e&&finishMath(true));   // the keyboard's return key, Enter, or leaving the field
+  f.addEventListener("focusin",()=>window.mathVirtualKeyboard?.show());
+  // the buttons keep the field's focus, so leaving it does not count as done before the tap is read
+  node.querySelectorAll("button").forEach(b=>b.addEventListener("pointerdown",ev=>{ ev.preventDefault(); finishMath(b.dataset.math==="ok"); }));
+  f.focus(); window.mathVirtualKeyboard?.show();
+}
+function finishMath(keep){
+  const e=editing; if(!e) return; editing=null;
+  const latex=keep&&e.field?String(e.field.getValue?.("latex")??e.field.value??"").trim():null;
+  try{ window.mathVirtualKeyboard?.hide(); }catch{}
+  e.node.remove();
+  if(latex===null||e.key!==key) return;   // cancelled, or another page by now
+  const all=marks();
+  if(e.mark){
+    if(!all.includes(e.mark)||latex===e.mark.latex) return;
+    remember(); if(latex) e.mark.latex=latex; else all.splice(all.indexOf(e.mark),1);   // emptied: gone
+  }else if(latex){
+    const L=window.MathlyBoardMath.layout(latex,MATH_SIZE), W=canvas.clientWidth;
+    remember();
+    all.push({kind:"math",latex,color:ink,size:MATH_SIZE,x:Math.max(8,Math.min(e.at[0],W-8-L.w)),y:Math.max(0,e.at[1]-(L.a+L.d)/2)});
+  }else return;
+  paint(); if(pages>1) drawPages();
+}
+if(window.MathlyBoardMath) window.MathlyBoardMath.onFonts=()=>el&&paint();
+
 /* ---------- handing in ---------- */
 // the whole sketch as a picture on white paper: as wide as the board, as tall as what is drawn
 function snapshot(){
@@ -379,8 +430,9 @@ async function send(){
 }
 
 document.addEventListener("keydown",e=>{
+  if(editing&&e.key==="Escape"){ e.preventDefault(); e.stopImmediatePropagation(); return finishMath(false); }
   if(full&&e.key==="Escape"){ e.preventDefault(); e.stopImmediatePropagation(); return closeFull(); }   // back to the question, not out of it
-  if(!shown()||e.target.closest?.("input,textarea,[contenteditable]")) return;
+  if(!shown()||editing||e.target.closest?.("input,textarea,[contenteditable],math-field")) return;
   if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="z"&&!e.shiftKey){ e.preventDefault(); undo(); }
   else if((e.key==="Delete"||e.key==="Backspace")&&selection.length){ e.preventDefault(); removeSelection(); }
 });
@@ -429,7 +481,7 @@ function openFull({host,key:k,pages:n=1,page:p=0,question=null,submit=null,turne
   el.querySelector(".mx-board-back").focus({preventScroll:true});
 }
 function closeFull(){
-  if(!full) return; const f=full; full=null;
+  if(!full) return; if(editing) finishMath(true); const f=full; full=null;
   el.classList.remove("full"); el.removeAttribute("role"); el.removeAttribute("aria-modal"); el.remove();
   restore(f.saved); f.done?.();
   if(layer?.isConnected&&desk()) again();

static/math.css

@@ -675,7 +675,7 @@ button.sky-chip.flame{padding:6px 11px;color:var(--ink)}
 .mx-board-bar button:hover{color:var(--ink);background:var(--surface-2)}
 .mx-board-bar button[hidden]{display:none}
 .mx-board-bar button[aria-pressed="true"]{color:var(--ink);border-color:var(--mx-accent);background:var(--mx-accent-soft)}
-@media (max-width:1280px){.mx-board-bar button span{display:none}}   /* a narrower board: icons only, names stay as tooltips */
+@media (max-width:1600px){.mx-board-bar button span{display:none}}   /* a narrower board: icons only, names stay as tooltips */
 .mx-board-group{display:inline-flex;align-items:center;gap:3px}
 .mx-board-inks,.mx-board-sizes{padding-inline:6px;border-inline-start:1px solid var(--line)}
 .mx-board-inks button,.mx-board-sizes button{width:34px;padding:0;justify-content:center}
@@ -717,3 +717,13 @@ button.sky-chip.flame{padding:6px 11px;color:var(--ink)}
 .mx-board.full .mx-board-gap{flex:0}
 .mx-board.full .mx-board-bar [data-do="hide"]{display:none}   /* the head's "back" does it */
 .mx-board.full .mx-board-bar button{min-height:40px;min-width:40px;justify-content:center}
+
+/* typing math on the board: a bar over the board's top; MathLive's keyboard sits above everything, the board too */
+body{--keyboard-zindex:3000}
+.mx-board-mathedit{position:absolute;z-index:2;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:6px;padding:6px;
+  background:#fff;border:1.5px solid var(--mx-accent);border-radius:12px;box-shadow:0 4px 16px rgb(27 33 64/.18)}
+.mx-board-mathedit math-field{flex:1;min-width:0;font-size:24px;border:0;background:none;color:#1B2140;--caret-color:#2563D9;--selection-background-color:#DCE6FF}
+.mx-board-mathedit math-field::part(virtual-keyboard-toggle),.mx-board-mathedit math-field::part(menu-toggle){display:none}
+.mx-board-mathedit button{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #C5CBDF;background:#F4F6FC;color:#1B2140;font:700 18px/1 var(--f-body);cursor:pointer}
+.mx-board-mathedit button[data-math="ok"]{background:var(--mx-accent);border-color:var(--mx-accent);color:var(--mx-on-accent)}
+.mx-board-mathwait{flex:1;color:#5B6694;font:500 14px/1.3 var(--f-body);padding:8px}

static/vendor/mathlive/LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright (c) 2017 - present Arno Gourdol. All rights reserved.
+ 
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"), 
+to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

tests/test_board_browser.py

@@ -296,3 +296,60 @@ def test_the_wheel_scrolls_an_endless_paper(browser, server):
     assert alpha_near(page, 200, 300) > 0
     playwright.expect(page.locator(".mx-board-send")).to_be_hidden()   # handing in is the unit quiz's
     assert errors == []
+
+
+def type_math(page, at, latex):
+    """Taps the board with the math tool at `at`, types `latex` into the math field and adds it."""
+    box = page.locator(".mx-board canvas").bounding_box()
+    page.mouse.click(box["x"] + at[0], box["y"] + at[1])
+    field = page.locator(".mx-board-mathedit math-field")
+    playwright.expect(field).to_be_visible(timeout=10000)
+    page.evaluate("v=>{document.querySelector('.mx-board-mathedit math-field').value=v}", latex)
+    page.locator(".mx-board-mathedit [data-math=ok]").dispatch_event("pointerdown")
+    playwright.expect(page.locator(".mx-board-mathedit")).to_have_count(0)
+
+
+def test_typed_math_is_an_element_like_any_other(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    board_on(page)
+    page.locator(".mx-board [data-tool=math]").click()
+    box = page.locator(".mx-board canvas").bounding_box()
+    page.mouse.click(box["x"] + 100, box["y"] + 200)
+    playwright.expect(page.locator(".mx-board-mathedit math-field")).to_be_visible(timeout=10000)
+    assert page.evaluate("window.mathVirtualKeyboard.visible")   # the math keyboard opens with it
+    page.keyboard.press("Escape")   # cancels the formula, not the board
+    playwright.expect(page.locator(".mx-board-mathedit")).to_have_count(0)
+    playwright.expect(page.locator(".mx-board")).to_be_visible()
+    assert ink_pixels(page) == 0
+
+    type_math(page, (100, 200), r"\frac{x^2-9}{x+3}=x-3")
+    assert ink_pixels(page) > 100
+    assert alpha_near(page, 112, 200) > 0 or alpha_near(page, 130, 200) > 0
+
+    type_math(page, (100, 200), r"x^2")   # tapping it with the math tool edits it, in place
+    assert ink_pixels(page) > 0
+    page.locator(".mx-board [data-do=undo]").click()   # back to the fraction
+
+    page.locator(".mx-board [data-tool=move]").click()
+    drag(page, (120, 200), (120, 450))
+    assert alpha_near(page, 112, 200) + alpha_near(page, 130, 200) == 0
+    assert alpha_near(page, 112, 450) + alpha_near(page, 130, 450) > 0   # it went with the drag, whole
+
+    page.locator(".mx-board [data-tool=eraser]").click()
+    drag(page, (100, 440), (260, 460))
+    assert ink_pixels(page) == 0   # the eraser takes the whole formula
+    assert errors == []
+
+
+def test_the_math_renderer_draws_what_the_keyboard_makes(browser, server):
+    page, errors = open_skill(browser, server, 1440, 900)
+    sizes = page.evaluate("""()=>[
+      'x^2-5x+6=0', 'x_{1,2}=\\\\frac{-b\\\\pm\\\\sqrt{b^2-4ac}}{2a}', '\\\\sqrt[3]{8}', '\\\\left(\\\\frac{a}{b}\\\\right)^{3}',
+      '\\\\left|x-2\\\\right|\\\\le 5', '\\\\angle ABC=30^{\\\\circ}', '\\\\triangle ABC\\\\cong\\\\triangle DEF', 'a\\\\perp b\\\\parallel c',
+      '\\\\text{שטח}=\\\\pi r^2', '\\\\placeholder{}+1', '\\\\unknowncommand{x}', ''
+    ].map(l=>{ const L=window.MathlyBoardMath.layout(l,26); return [L.w,L.a,L.d]; })""")
+    assert all(w >= 0 and a >= 0 and d >= 0 for w, a, d in sizes)
+    assert all(w > 10 for w, _, _ in sizes[:-1])
+    frac, plain = sizes[1], sizes[0]
+    assert frac[0] > plain[0] and frac[1] > plain[1]   # a fraction is wider and taller than a line of text
+    assert errors == []