Grace note engraving: scaled stems/flags/beams, acciaccatura slash, stems forced up

Stem class gains _graceScale (60% thinner lines) and _slash (acciaccatura
diagonal through stem). handleNote/handleChord/drawBeamGroup in beams.js now
detect grace notes: force stems up, shorten to ~5 half-spaces, scale flag
glyphs, and tag beams with _graceScale for thinner beam lines. Beam class
scales thickness proportionally. Added 'Grace Note Variants' visual test
(accidentals, high position, beamed 16th grace pair).

Author: zz85

plans/features-todo.md

@@ -54,7 +54,7 @@ Planned features and improvements, roughly prioritized.
 - [ ] Multiple lyric verses (currently only verse 1 rendered; NWC supports up to 8)
 - [ ] Grand staff brace rendering (`braceWithNext` parsed but not drawn)
 - [ ] Proportional / spring-and-rod spacing (currently fixed-width-per-duration)
-- [x] Grace notes — drawn at 60% scale with reduced spacing
+- [x] Grace notes — 60% scale noteheads/accidentals, stems always up, shorter stems (~5 half-spaces), thinner stem/beam lines, scaled flag glyphs, acciaccatura slash through stem. Beamed grace groups get scaled beams. Reduced horizontal spacing (40% spring, 50% padding).
 - [x] Ties and slurs — direction follows stem (up→below, down→above); anchored at notehead pitch (offsetY); per-child-note chord ties; cross-system tie splitting preserves direction; slurs use outer chord note as anchor
 - [x] **Professional tie/slur engraving** — Cubic bezier curves with proportional arc height (short ties = round, long ties = flat); separate Tie/Slur classes (ties thicker+rounder, slurs thinner+more open); edge-anchored ties (gap from notehead edges, "never touch"); chord inner/outer direction (top curves above, bottom below, inner follows nearest); mixed-stem slurs default above; staff-line avoidance (peak nudged into spaces); accidental collision clearance; engraving constants in `src/engraving-rules.js`
 - [x] Triplet/tuplet brackets — numeral on stem/beam side; fully-beamed triplets get numeral only (no bracket); unbeamed/mixed get bracket+numeral; vocal staves place numeral above to clear lyrics
@@ -66,7 +66,7 @@ Planned features and improvements, roughly prioritized.
 - [ ] **Staves need sufficient vertical space** — when notes extend far above/below the staff (ledger lines, high beams, triplet brackets, slur arcs), adjacent staves can overlap. The vertical gap between staves should be computed dynamically based on the actual content extent (highest/lowest drawn element) rather than using a fixed inter-staff gap. This affects both scroll and wrap modes.
 - [ ] **Hairpins collide with adjacent dynamics** — a crescendo/decrescendo wedge that leads into a dynamic marking (e.g. cresc → ff) can overlap the dynamic glyph. The hairpin end-point should stop short to leave clearance, or the dynamic should be nudged right.
 - [ ] **Hairpins and dynamics vertical alignment** — hairpin wedges and dynamic markings on the same staff should share a consistent baseline Y position so they read as a continuous expression lane, rather than each sitting at its own independent vertical offset.
-- [ ] **Grace notes: stem/flag not scaled** — grace note noteheads and accidentals render at 60% scale, but stems are full length/thickness and flags are full-sized. `beams.js` has zero grace-note awareness. Need: shorter stems (~4 half-spaces), 60%-scaled flag glyphs, thinner stem lines, and optionally an acciaccatura slash through the stem.
+- [x] **Grace notes: stem/flag not scaled** — Fixed: stems shortened to ~5 half-spaces with 60% thickness, flag glyphs scaled, acciaccatura slash drawn, stems forced up. Beam groups also scaled (thinner beams, shorter stems).
 - [ ] **Stave brackets misaligned** — bracket/brace rendering for staff groups (`bracketWithNext`, `braceWithNext`) is visually incorrect or mispositioned.
 - [ ] **Chord tie orientation wrong** — ties on chord notes don't always follow the inner/outer rule correctly in all cases. The top note should curve above, bottom note below, inner notes follow nearest outer.
 - [ ] **Slur direction with mixed beams** — when a slur spans notes that belong to different beam groups or a mix of beamed and unbeamed notes, the slur direction heuristic can pick the wrong side. Should consider the overall phrase contour and stem directions of all spanned notes, not just the start/end.

src/drawing.js

@@ -561,11 +561,26 @@ class Stem extends Draw {
 	}
 
 	draw(ctx) {
+		var scale = this._graceScale || 1
 		ctx.beginPath()
-		ctx.lineWidth = getFontSize() / 30 // 1.2
+		ctx.lineWidth = (getFontSize() / 30) * scale
 		ctx.moveTo(0, 0)
 		ctx.lineTo(0, this.unitsToY(this.len))
 		ctx.stroke()
+
+		// Acciaccatura slash: diagonal line through the stem
+		if (this._slash) {
+			var fs = getFontSize()
+			var slashLen = fs * 0.25 * scale
+			// Position the slash roughly 1/3 up the stem
+			var stemPixels = this.unitsToY(this.len)
+			var slashY = stemPixels * 0.35
+			ctx.beginPath()
+			ctx.lineWidth = (fs / 24) * scale
+			ctx.moveTo(-slashLen * 0.6, slashY - slashLen * 0.5)
+			ctx.lineTo(slashLen * 0.6, slashY + slashLen * 0.5)
+			ctx.stroke()
+		}
 	}
 }
 
@@ -968,7 +983,8 @@ class Beam extends Draw {
 	}
 
 	draw(ctx) {
-		const beamThickness = getFontSize() / 10
+		var scale = this._graceScale || 1
+		const beamThickness = (getFontSize() / 10) * scale
 		const beamSpacing = beamThickness * 1.0
 		// Stems-up: additional beams stack downward (toward noteheads) → positive offset.
 		// Stems-down: additional beams stack upward (toward noteheads) → negative offset.

src/layout/beams.js

@@ -166,13 +166,19 @@ function computeStemLength(position, stemUp, chordSpan, beamCount) {
 function drawBeamGroup(group) {
 	if (group.length < 2) return
 
+	// Detect grace note beam group (all notes in group are grace)
+	const isGraceGroup = group.every(t => t.grace)
+	const graceScale = isGraceGroup ? 0.6 : 1.0
+
 	// Use the stored stem direction from the NWC file if available.
 	// stem: 1 = up, 2 = down.  Fall back to average-position heuristic.
-	const firstStemDir = group[0].stem
+	// Grace notes: stems almost always point up.
 	let stemUp
-	if (firstStemDir === 1) {
+	if (isGraceGroup) {
+		stemUp = true
+	} else if (group[0].stem === 1) {
 		stemUp = true
-	} else if (firstStemDir === 2) {
+	} else if (group[0].stem === 2) {
 		stemUp = false
 	} else {
 		const avgPosition = group.reduce((sum, token) => {
@@ -281,15 +287,17 @@ function drawBeamGroup(group) {
 		beamBase = -Infinity
 		for (const nd of noteData) {
 			const t = (nd.x - firstX) / xSpan
-			const minStem = computeStemLength(nd.position, stemUp, nd.chordSpan, totalBeamCount)
+			var minStem = computeStemLength(nd.position, stemUp, nd.chordSpan, totalBeamCount)
+			if (isGraceGroup) minStem = Math.min(minStem, 5)
 			const needed = nd.position + minStem - slope * t
 			if (needed > beamBase) beamBase = needed
 		}
 	} else {
 		beamBase = Infinity
 		for (const nd of noteData) {
 			const t = (nd.x - firstX) / xSpan
-			const minStem = computeStemLength(nd.position, stemUp, nd.chordSpan, totalBeamCount)
+			var minStem = computeStemLength(nd.position, stemUp, nd.chordSpan, totalBeamCount)
+			if (isGraceGroup) minStem = Math.min(minStem, 5)
 			const needed = nd.position - minStem - slope * t
 			if (needed < beamBase) beamBase = needed
 		}
@@ -320,6 +328,7 @@ function drawBeamGroup(group) {
 		// Stem-down: start at (relativePos - stemLen), draws up by stemLen → reaches notehead
 		const stemY = stemUp ? data.relativePos : data.relativePos - data.stemLen
 		const stem = new Stem(stemY, data.stemLen)
+		if (isGraceGroup) stem._graceScale = graceScale
 		stem.moveTo(data.x, data.y)
 		drawing.add(stem)
 	})
@@ -333,6 +342,7 @@ function drawBeamGroup(group) {
 
 	const primaryBeam = new Beam(beamStartRelative, beamEndRelative, 0, lastStem.x - firstStem.x, primaryBeamCount)
 	primaryBeam.stemUp = stemUp
+	if (isGraceGroup) primaryBeam._graceScale = graceScale
 	primaryBeam.moveTo(firstStem.x, firstStem.y)
 	drawing.add(primaryBeam)
 
@@ -362,6 +372,7 @@ function drawBeamGroup(group) {
 
 		const subBeam = new Beam(segStartY, segEndY, segStartX, segEndX, 1)
 		subBeam.stemUp = stemUp
+		if (isGraceGroup) subBeam._graceScale = graceScale
 		subBeam._beamOffset = seg.level
 		subBeam.moveTo(firstStem.x, firstStem.y)
 		drawing.add(subBeam)
@@ -384,8 +395,12 @@ function handleChord(token) {
 	const topNote = notes.reduce((a, b) => a.position > b.position ? a : b)
 	const bottomNote = notes.reduce((a, b) => a.position < b.position ? a : b)
 
-	const stemUp =
-		token.Stem === 'Up' || token.stem === 1
+	const isGrace = !!token.grace
+	const graceScale = isGrace ? 0.6 : 1.0
+
+	// Grace notes: stems almost always point up.
+	const stemUp = isGrace ? true
+		: token.Stem === 'Up' || token.stem === 1
 			? true
 			: token.Stem === 'Down' || token.stem === 2
 			? false
@@ -397,27 +412,31 @@ function handleChord(token) {
 
 	const relativePos = anchorNote.position + 4
 	const chordSpan = topNote.position - bottomNote.position
-	// Standalone chords: beamCount=0 (extra beam length only applies in beam groups)
-	const stemLen = computeStemLength(anchorNote.position, stemUp, chordSpan, 0)
+	const stemLen = isGrace ? 5 + chordSpan
+		: computeStemLength(anchorNote.position, stemUp, chordSpan, 0)
 	const requireFlag = duration >= 8
 
 	if (!stemUp) {
 		const stem = new Stem(relativePos - stemLen, stemLen)
+		if (isGrace) { stem._graceScale = graceScale; stem._slash = true }
 		stem.moveTo(notehead.x, notehead.y)
 		drawing.add(stem)
 
 		if (requireFlag) {
 			var flag = new Glyph(`flag${duration}thDown`, relativePos - stemLen - 0.5)
+			if (isGrace) flag._graceScale = graceScale
 			flag.moveTo(notehead.x, notehead.y)
 			drawing.add(flag)
 		}
 	} else {
 		const stem = new Stem(relativePos, stemLen)
+		if (isGrace) { stem._graceScale = graceScale; stem._slash = true }
 		stem.moveTo(notehead.x + notehead.width, notehead.y)
 		drawing.add(stem)
 
 		if (requireFlag) {
 			var flag = new Glyph(`flag${duration}thUp`, relativePos + stemLen)
+			if (isGrace) flag._graceScale = graceScale
 			flag.moveTo(notehead.x + notehead.width, notehead.y)
 			drawing.add(flag)
 		}
@@ -431,35 +450,44 @@ function handleNote(token) {
 	const notehead = token.drawingNoteHead
 	if (!notehead) return
 
-	const stemUp =
-		token.Stem === 'Up' || token.stem === 1
+	const isGrace = !!token.grace
+	const graceScale = isGrace ? 0.6 : 1.0
+
+	// Grace notes: stems almost always point up (standard engraving).
+	const stemUp = isGrace ? true
+		: token.Stem === 'Up' || token.stem === 1
 			? true
 			: token.Stem === 'Down' || token.stem === 2
 			? false
 			: token.position < 0
 
 	const relativePos = token.position + 4
-	// Standalone notes: beamCount=0 (extra beam length only applies in beam groups)
-	const stemLen = computeStemLength(token.position, stemUp, 0, 0)
+	// Grace notes: ~5 half-spaces stem (shorter than the standard 7).
+	const stemLen = isGrace ? 5
+		: computeStemLength(token.position, stemUp, 0, 0)
 	const requireFlag = duration >= 8
 
 	if (!stemUp) {
 		const stem = new Stem(relativePos - stemLen, stemLen)
+		if (isGrace) { stem._graceScale = graceScale; stem._slash = true }
 		stem.moveTo(notehead.x, notehead.y)
 		drawing.add(stem)
 
 		if (requireFlag) {
 			var flag = new Glyph(`flag${duration}thDown`, relativePos - stemLen - 0.5)
+			if (isGrace) flag._graceScale = graceScale
 			flag.moveTo(notehead.x, notehead.y)
 			drawing.add(flag)
 		}
 	} else {
 		const stem = new Stem(relativePos, stemLen)
+		if (isGrace) { stem._graceScale = graceScale; stem._slash = true }
 		stem.moveTo(notehead.x + notehead.width, notehead.y)
 		drawing.add(stem)
 
 		if (requireFlag) {
 			var flag = new Glyph(`flag${duration}thUp`, relativePos + stemLen)
+			if (isGrace) flag._graceScale = graceScale
 			flag.moveTo(notehead.x + notehead.width, notehead.y)
 			drawing.add(flag)
 		}

test/visual/fixtures.js

@@ -723,16 +723,33 @@ const SYNTHETIC_FIXTURES = [
 			]]),
 		},
 			{
-				label: 'Grace Notes',
-				desc: 'Grace note before regular note — 60% scale',
-				data: () => makeScore('Grace Notes', [[
-					clef(), keySig(), timeSig(),
-					note(2, 8, { grace: 1 }), note(0, 4),
-					note(4, 8, { grace: 1 }), note(2, 4),
-					note(-2, 8, { grace: 1 }), note(0, 2),
-					bar(3),
-				]]),
-			},
+			label: 'Grace Notes',
+			desc: 'Acciaccatura (slashed stem), scaled flag, stems up',
+			data: () => makeScore('Grace Notes', [[
+				clef(), keySig(), timeSig(),
+				// Single grace notes before different durations
+				note(2, 8, { grace: 1 }), note(0, 4),
+				note(4, 8, { grace: 1 }), note(2, 4),
+				note(-2, 8, { grace: 1 }), note(0, 2),
+				bar(3),
+			]]),
+		},
+		{
+			label: 'Grace Note Variants',
+			desc: 'High/low positions, with accidentals, beamed grace group',
+			data: () => makeScore('Grace Note Variants', [[
+				clef(), keySig(), timeSig(),
+				// Grace note with accidental
+				note(0, 8, { grace: 1, accidental: '#' }), note(0, 4),
+				// Grace note high on staff
+				note(6, 8, { grace: 1 }), note(4, 4),
+				// Beamed grace note pair (16ths)
+				note(0, 16, { grace: 1, beam: 1 }),
+				note(2, 16, { grace: 1, beam: 3 }),
+				note(0, 2),
+				bar(3),
+			]]),
+		},
 		],
 	},
 	// ────────────────────────────────────────────────────────────