mirror of
https://github.com/9x/sheetmusictrainer.git
synced 2026-11-03 22:03:54 +01:00
Fix live-note staff clipping (written-range headroom, block SVG) and center Zen-mode content vertically
This commit is contained in:
18
src/App.css
18
src/App.css
@@ -1103,3 +1103,21 @@ button {
|
|||||||
flex: none;
|
flex: none;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.live-note-staff svg {
|
||||||
|
display: block; /* inline SVG baseline gap made the box taller than the SVG */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zen mode: center the core UI vertically; the exit button is position:fixed
|
||||||
|
and stays at the top. `safe center` avoids clipping when content is taller
|
||||||
|
than the viewport. */
|
||||||
|
.app-container.zen-mode {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.zen-mode .main-stage {
|
||||||
|
flex: 1;
|
||||||
|
justify-content: safe center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|||||||
@@ -42,7 +42,10 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
|
|||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
|
|
||||||
const renderer = new Renderer(container, Renderer.Backends.SVG);
|
const renderer = new Renderer(container, Renderer.Backends.SVG);
|
||||||
renderer.resize(width, 74);
|
// Enough headroom for the instrument's written range: guitar first
|
||||||
|
// position reaches written E3 — about four ledger lines BELOW the
|
||||||
|
// treble staff. A 74px box clipped those (half-invisible staff).
|
||||||
|
renderer.resize(width, 112);
|
||||||
const context = renderer.getContext();
|
const context = renderer.getContext();
|
||||||
|
|
||||||
const resolvedColor =
|
const resolvedColor =
|
||||||
@@ -52,7 +55,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
|
|||||||
context.setFillStyle(resolvedColor);
|
context.setFillStyle(resolvedColor);
|
||||||
context.setStrokeStyle(resolvedColor);
|
context.setStrokeStyle(resolvedColor);
|
||||||
|
|
||||||
const stave = new Stave(0, 10, width - 2);
|
const stave = new Stave(0, 28, width - 2);
|
||||||
stave.setDefaultLedgerLineStyle({ strokeStyle: resolvedColor, lineWidth: 2 });
|
stave.setDefaultLedgerLineStyle({ strokeStyle: resolvedColor, lineWidth: 2 });
|
||||||
stave.addClef(clef);
|
stave.addClef(clef);
|
||||||
if (keySignature) stave.addKeySignature(keySignature);
|
if (keySignature) stave.addKeySignature(keySignature);
|
||||||
@@ -81,6 +84,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
|
|||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
className="live-note-staff"
|
className="live-note-staff"
|
||||||
style={{ width }}
|
style={{ width }}
|
||||||
|
// (height comes from the SVG)
|
||||||
role="img"
|
role="img"
|
||||||
aria-label={midi !== null ? `Currently played: note` : 'No note currently detected'}
|
aria-label={midi !== null ? `Currently played: note` : 'No note currently detected'}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user