Add Start button and Home/End keys to editor for navigation
After auto-scroll during preview, users couldn't easily navigate back to the beginning to reposition the play-from marker. Added: - "⏮ Start" button that resets scroll and play-from marker to beginning - Home key shortcut to do the same - End key shortcut to jump to end of piece https://claude.ai/code/session_01TLvDyKzUQekd9hzFuEJ5YX
This commit is contained in:
+18
@@ -197,6 +197,7 @@ canvas{display:block;}
|
|||||||
<label style="color:#aaa;font-size:12px;">BPM: <input type="number" id="ed-bpm" value="120" min="30" max="300" style="width:55px;background:#1a1a2e;color:#fff;border:1px solid #444;padding:2px 4px;border-radius:3px;" onchange="edUpdateBpm()"></label>
|
<label style="color:#aaa;font-size:12px;">BPM: <input type="number" id="ed-bpm" value="120" min="30" max="300" style="width:55px;background:#1a1a2e;color:#fff;border:1px solid #444;padding:2px 4px;border-radius:3px;" onchange="edUpdateBpm()"></label>
|
||||||
<label style="color:#aaa;font-size:12px;">Time: <select id="ed-timesig" style="background:#1a1a2e;color:#fff;border:1px solid #444;padding:2px;border-radius:3px;font-size:12px;" onchange="edUpdateTimeSig()"><option>4/4</option><option>3/4</option><option>2/4</option><option>6/8</option><option>9/8</option><option>5/4</option><option>7/8</option><option>12/8</option></select></label>
|
<label style="color:#aaa;font-size:12px;">Time: <select id="ed-timesig" style="background:#1a1a2e;color:#fff;border:1px solid #444;padding:2px;border-radius:3px;font-size:12px;" onchange="edUpdateTimeSig()"><option>4/4</option><option>3/4</option><option>2/4</option><option>6/8</option><option>9/8</option><option>5/4</option><option>7/8</option><option>12/8</option></select></label>
|
||||||
<label style="color:#aaa;font-size:12px;">Zoom: <input type="range" id="ed-zoom" min="20" max="200" value="80" style="width:80px;" oninput="edDraw()"></label>
|
<label style="color:#aaa;font-size:12px;">Zoom: <input type="range" id="ed-zoom" min="20" max="200" value="80" style="width:80px;" oninput="edDraw()"></label>
|
||||||
|
<button class="smbtn" onclick="edGoToStart()" title="Scroll to start and reset play-from marker (Home key)">⏮ Start</button>
|
||||||
<button class="smbtn" onclick="edPreview()" id="ed-pv-btn">▶ Preview</button>
|
<button class="smbtn" onclick="edPreview()" id="ed-pv-btn">▶ Preview</button>
|
||||||
<button class="smbtn" onclick="edSave()" style="background:#38a169;">💾 Save</button>
|
<button class="smbtn" onclick="edSave()" style="background:#38a169;">💾 Save</button>
|
||||||
<button class="smbtn" onclick="edExport()">📋 Copy JSON</button>
|
<button class="smbtn" onclick="edExport()">📋 Copy JSON</button>
|
||||||
@@ -5614,6 +5615,17 @@ function edKeyDown(e){
|
|||||||
edSelRange=null;edSelected=-1;edPlayFromMarker=-1;edDraw();e.preventDefault();return;
|
edSelRange=null;edSelected=-1;edPlayFromMarker=-1;edDraw();e.preventDefault();return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Home key — scroll to start and reset play-from marker
|
||||||
|
if(e.key==="Home"){edGoToStart();e.preventDefault();return;}
|
||||||
|
|
||||||
|
// End key — scroll to end of piece
|
||||||
|
if(e.key==="End"){
|
||||||
|
var cv=getEdCanvas();
|
||||||
|
var endT=edIsClassical?(edPiece&&edPiece.duration||90):4;
|
||||||
|
edScrollX=Math.max(0,endT*edPxPerUnit()-cv.width+50);
|
||||||
|
edDraw();e.preventDefault();return;
|
||||||
|
}
|
||||||
|
|
||||||
if((e.key==="Delete"||e.key==="Backspace")&&edSelected>=0){
|
if((e.key==="Delete"||e.key==="Backspace")&&edSelected>=0){
|
||||||
edMelody.splice(edSelected,1);
|
edMelody.splice(edSelected,1);
|
||||||
edSelected=-1;
|
edSelected=-1;
|
||||||
@@ -5753,6 +5765,12 @@ function edDurInfo(durSec){
|
|||||||
return {sym:"\u266C\u266C",name:"32nd",val:0.125};
|
return {sym:"\u266C\u266C",name:"32nd",val:0.125};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function edGoToStart(){
|
||||||
|
edScrollX=0;
|
||||||
|
edPlayFromMarker=-1;
|
||||||
|
edDraw();
|
||||||
|
}
|
||||||
|
|
||||||
function edStopPlayhead(){
|
function edStopPlayhead(){
|
||||||
edPlayhead=-1;
|
edPlayhead=-1;
|
||||||
if(edPlayheadRAF)cancelAnimationFrame(edPlayheadRAF);
|
if(edPlayheadRAF)cancelAnimationFrame(edPlayheadRAF);
|
||||||
|
|||||||
Reference in New Issue
Block a user