Update transcription-editor.html

transcription-editor.html

@@ -90,8 +90,18 @@
 
   .roll-wrap{position:relative; height:290px; background:var(--panel); border:1px solid var(--line);
     border-radius:6px; overflow:hidden}
-  .lyric-input{position:absolute; z-index:20; font-family:var(--sans); font-size:11px; padding:2px 5px;
-    border:1px solid var(--sel); border-radius:4px; background:#fff; color:#5a3f78; width:104px; outline:none}
+  .lyric-box{position:absolute; z-index:20; display:none; align-items:center; gap:3px; padding:3px;
+    background:#fff; border:1px solid var(--sel); border-radius:6px; box-shadow:0 3px 12px rgba(0,0,0,.14)}
+  .lyric-box.on{display:flex}
+  .lyric-box input{font-family:var(--sans); font-size:11px; padding:2px 5px; border:1px solid var(--line);
+    border-radius:4px; background:#fff; color:#5a3f78; width:96px; outline:none}
+  .lyric-box input:focus{border-color:var(--sel)}
+  .lyric-box .lyric-ok{font-family:inherit; font-size:12px; line-height:1; color:#fff; background:var(--edit);
+    border:none; border-radius:4px; padding:4px 7px; cursor:pointer}
+  .lyric-box .lyric-ok:hover{background:#264249}
+  .lyric-box .lyric-x{font-family:inherit; font-size:13px; line-height:1; color:var(--muted); background:none;
+    border:none; padding:2px 4px; cursor:pointer}
+  .lyric-box .lyric-x:hover{color:var(--warn)}
   canvas.roll{display:block; width:100%; height:100%; cursor:crosshair; touch-action:none}
   .readout{display:flex; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--muted); align-items:center}
   .chip{display:inline-flex; align-items:center; gap:6px; background:#F7F7F5; border:1px solid var(--line);
@@ -451,8 +461,9 @@ function panelHTML(K){ return `
         right-click a note for the pitches the audio supports at that position ·
         drag to transpose · drag either edge to adjust onset or duration ·
         &uarr;/&darr; to transpose by a semitone (Shift for an octave) &middot; Ctrl+Z to undo.<br>
-        <b>Lyrics</b> &middot; double-click a note to type its word or syllable &middot;
-        Enter moves to the next note, Esc closes. These are what appear under the alignment below.<br>
+        <b>Lyrics</b> &middot; double-click a note to type its word or syllable, then press &#10003; (or Enter) to confirm &middot;
+        the word appears by the note, Enter jumps to the next note, Esc cancels &middot;
+        these are the lyrics carried through to the alignment below.<br>
         <b>View</b> &middot; scroll to zoom, Shift + scroll to pan.<br>
         <b>Waveform markers</b> (optional, above) &middot; drag to reposition &middot;
         Shift-drag to shift the whole track &middot; right-click to delete.
@@ -461,7 +472,12 @@ function panelHTML(K){ return `
 
     <div class="roll-wrap">
       <canvas class="roll js-roll"></canvas>
-      <input class="lyric-input js-lyricin" hidden spellcheck="false" autocomplete="off">
+      <span class="lyric-box js-lyricbox">
+        <input class="js-lyricin" spellcheck="false" autocomplete="off"
+               placeholder="word / syllable" aria-label="Lyric for this note">
+        <button class="lyric-ok js-lyricok" title="Confirm (Enter)">&#10003;</button>
+        <button class="lyric-x js-lyricx" title="Cancel (Esc)">&times;</button>
+      </span>
     </div>
     <div class="hscroll js-rollscroll"><div class="js-rollspacer"></div></div>
     <div class="zoomrow">
@@ -695,9 +711,7 @@ function createPanel(KEY, root){
     const span = spanSec();
     rollClampVS();
     const vs = rollVS, vd = rollViewDur();
-    const anyLyric = notes.some(n=>n.lyric);
-    const stripH = anyLyric ? 15 : 0;
-    const padL=58,padR=14,padT=14,padB=20+stripH, plotW=w-padL-padR, plotH=h-padT-padB;
+    const padL=58,padR=14,padT=14,padB=20, plotW=w-padL-padR, plotH=h-padT-padB;
     const rows=hi-lo+1, rowH=plotH/rows, gap=rowH*0.18, bh=Math.max(rowH-2*gap,3);
     geo = {padL,padT,plotW,plotH,span,vs,vd,lo,hi,rowH,gap,bh};
     const x = timeToX, y = pch => padT + (hi-pch)*rowH;
@@ -736,7 +750,7 @@ function createPanel(KEY, root){
 
     /* everything time-based is clipped to the plot, so nothing bleeds over the keys */
     ctx.save();
-    ctx.beginPath(); ctx.rect(padL,padT,plotW,plotH+stripH); ctx.clip();
+    ctx.beginPath(); ctx.rect(padL,padT,plotW,plotH); ctx.clip();
 
     const thr=(+$(".js-thr").value)/100;
     for(const n of notes){
@@ -776,21 +790,37 @@ function createPanel(KEY, root){
       });
       ctx.restore();
     }
-    /* lyric strip: one word per note, skipped where two would collide */
-    if(anyLyric){
-      ctx.font='10px '+col("--sans"); ctx.textBaseline='top'; ctx.textAlign='left';
-      const sy = h - padB + 2;
-      let lastRight = -Infinity;
+    /* per-note lyric labels, drawn against the note itself. Preference is
+       above the note; if there is no room there (note sits near the top) the
+       label drops below it. Collisions within the same band are skipped so
+       words never overprint, and the label of the note being edited is held
+       back because the live text box already shows it. */
+    if(notes.some(n=>n.lyric)){
+      ctx.font='10px '+col("--sans"); ctx.textBaseline='alphabetic'; ctx.textAlign='left';
+      const LBL_H=13, LBL_PADX=3;
+      let lastAboveRight=-Infinity, lastBelowRight=-Infinity;
       notes.slice().sort((a,b)=>a.start-b.start).forEach(n=>{
         if(!n.lyric) return;
-        if(n.start < vs || n.start > vs+vd) return;
-        const lx = x(n.start);
-        if(lx < lastRight + 3) return;
-        ctx.strokeStyle='rgba(138,99,168,0.35)'; ctx.lineWidth=1;
-        ctx.beginPath(); ctx.moveTo(lx, padT); ctx.lineTo(lx, sy); ctx.stroke();
+        if(n.id===lyricEditId) return;
+        if(n.start+n.dur < vs || n.start > vs+vd) return;
+        const nx=x(n.start), ny=y(n.pitch)+gap;
+        const tw=ctx.measureText(n.lyric).width, boxW=tw+LBL_PADX*2;
+        const above = ny - gap - 2 >= padT + LBL_H;    // room over the note?
+        let boxY;
+        if(above){
+          if(nx < lastAboveRight + 2) return;
+          boxY = ny - 2 - LBL_H;
+          lastAboveRight = nx + boxW;
+        } else {
+          const noteBottom = ny + bh;
+          if(nx < lastBelowRight + 2) return;
+          boxY = Math.min(noteBottom + 2, h - padB - LBL_H);
+          lastBelowRight = nx + boxW;
+        }
+        ctx.fillStyle='rgba(138,99,168,0.12)';
+        roundRectCtx(ctx, nx, boxY, boxW, LBL_H, 3); ctx.fill();
         ctx.fillStyle='#5a3f78';
-        ctx.fillText(n.lyric, lx+2, sy);
-        lastRight = lx + ctx.measureText(n.lyric).width + 2;
+        ctx.fillText(n.lyric, nx+LBL_PADX, boxY+LBL_H-3.5);
       });
     }
     ctx.restore();
@@ -1154,10 +1184,10 @@ function createPanel(KEY, root){
     return "";
   }
   function closeLyricEditor(commit){
-    const el=$(".js-lyricin");
-    if(lyricEditId==null){ el.hidden=true; return; }
+    const el=$(".js-lyricin"), box=$(".js-lyricbox");
+    if(lyricEditId==null){ box.classList.remove("on"); return; }
     const n=byId(lyricEditId), id=lyricEditId;
-    lyricEditId=null; el.hidden=true;
+    lyricEditId=null; box.classList.remove("on");
     if(commit && n){
       const v=el.value.trim();
       if((n.lyric||"") !== v){ pushUndo(); n.lyric = v || undefined; afterEdit(); }
@@ -1166,19 +1196,22 @@ function createPanel(KEY, root){
   }
   function openLyricEditor(id){
     const n=byId(id); if(!n) return;
-    // bring the note into view first, so the field is never off screen
+    // bring the note into view first, so the box is never off screen
     if(rollZoom>1){
       const vd=rollViewDur();
       if(n.start < geo.vs || n.start > geo.vs+vd*0.9){ rollVS=n.start-vd*0.25; rollClampVS(); draw(); }
     }
-    const el=$(".js-lyricin"), wrap=cv.parentElement;
-    const nx=timeToX(n.start), ny=geo.padT+(geo.hi-n.pitch)*geo.rowH+geo.rowH;
+    const el=$(".js-lyricin"), box=$(".js-lyricbox"), wrap=cv.parentElement;
     el.value = n.lyric || markerTextFor(n);
-    el.hidden=false;
-    el.style.left = Math.max(2, Math.min(nx, wrap.clientWidth-110)) + "px";
-    el.style.top  = Math.max(2, Math.min(ny, wrap.clientHeight-24)) + "px";
     lyricEditId=id;
     selectedIds=new Set([id]); draw();
+    // draw() has run, so geo is current: place the box just under the note,
+    // clamped to the visible area both ways (the box is ~150px wide, 26 tall).
+    box.classList.add("on");
+    const bw=box.offsetWidth||150, bh2=box.offsetHeight||26;
+    const nx=timeToX(n.start), ny=geo.padT+(geo.hi-n.pitch)*geo.rowH+geo.rowH+2;
+    box.style.left = Math.max(2, Math.min(nx, wrap.clientWidth - bw - 2)) + "px";
+    box.style.top  = Math.max(2, Math.min(ny, wrap.clientHeight - bh2 - 2)) + "px";
     el.focus(); el.select();
   }
   function nextNoteAfter(id){
@@ -1186,23 +1219,38 @@ function createPanel(KEY, root){
     const i=ordered.findIndex(n=>n.id===id);
     return (i>=0 && i<ordered.length-1) ? ordered[i+1].id : null;
   }
+  // A pointerdown on either button must not let the input's blur fire first
+  // and commit/close before the button's own handler runs.
+  let suppressBlur=false;
+  [".js-lyricok",".js-lyricx"].forEach(sel=>{
+    $(sel).addEventListener("pointerdown", ()=>{ suppressBlur=true; });
+  });
   $(".js-lyricin").addEventListener("keydown", e=>{
     e.stopPropagation();                       // never reaches the global shortcuts
     if(e.key==="Enter"){
       e.preventDefault();
       const id=closeLyricEditor(true);
       const nxt=e.shiftKey?null:nextNoteAfter(id);
-      if(nxt!=null) openLyricEditor(nxt);
+      if(nxt!=null) openLyricEditor(nxt); else draw();
     } else if(e.key==="Escape"){
       e.preventDefault(); closeLyricEditor(false); draw();
     } else if(e.key==="Tab"){
       e.preventDefault();
       const id=closeLyricEditor(true);
       const nxt=nextNoteAfter(id);
-      if(nxt!=null) openLyricEditor(nxt);
+      if(nxt!=null) openLyricEditor(nxt); else draw();
     }
   });
-  $(".js-lyricin").addEventListener("blur", ()=>{ if(lyricEditId!=null) closeLyricEditor(true); });
+  $(".js-lyricin").addEventListener("blur", ()=>{
+    if(suppressBlur){ suppressBlur=false; return; }
+    if(lyricEditId!=null){ closeLyricEditor(true); draw(); }
+  });
+  $(".js-lyricok").addEventListener("click", ()=>{
+    const id=closeLyricEditor(true);
+    const nxt=nextNoteAfter(id);
+    if(nxt!=null) openLyricEditor(nxt); else draw();
+  });
+  $(".js-lyricx").addEventListener("click", ()=>{ closeLyricEditor(false); draw(); });
 
   function retuneTo(id, pitch){
     const n = byId(id); if(!n) return;