abcjs 6.5.2 → 6.6.1

package/src/write/draw/chord-grid.js

@@ -0,0 +1,254 @@
+const printSymbol = require("./print-symbol");
+const printStem = require("./print-stem");
+
+function drawChordGrid(renderer, parts, leftMargin, pageWidth, fonts) {
+	const chordFont = fonts.gchordfont
+	const partFont = fonts.partsfont
+	const annotationFont = fonts.annotationfont
+	const endingFont = fonts.repeatfont
+	const textFont = fonts.textfont
+	const subtitleFont = fonts.subtitlefont
+
+	const ROW_HEIGHT = 50
+	const ENDING_HEIGHT = 10
+	const ANNOTATION_HEIGHT = 14
+	const PART_MARGIN_TOP = 10
+	const PART_MARGIN_BOTTOM = 20
+	const TEXT_MARGIN = 16
+
+	renderer.paper.openGroup({klass: 'abcjs-chord-grid'})
+	parts.forEach(part => {
+		switch (part.type) {
+			case "text": {
+				text(renderer, part.text, leftMargin, renderer.y, 16, textFont, null, null, false )
+				renderer.moveY(TEXT_MARGIN)
+			}
+				break
+			case "subtitle": {
+				text(renderer, part.subtitle, leftMargin, renderer.y+PART_MARGIN_TOP, 20, subtitleFont, null, "abcjs-subtitle", false )
+				renderer.moveY(PART_MARGIN_BOTTOM)
+			}
+				break
+			case "part":
+				if (part.lines.length > 0) {
+					text(renderer, part.name, leftMargin, renderer.y+PART_MARGIN_TOP, 20, subtitleFont, part.name, "abcjs-part", false )
+
+					renderer.moveY(PART_MARGIN_BOTTOM)
+					const numCols = part.lines[0].length
+					const colWidth = pageWidth / numCols
+					part.lines.forEach((line, lineNum) => {
+						let hasEnding = false
+						let hasAnnotation = false
+						line.forEach(measure => {
+							if (measure.ending)
+								hasEnding = true
+							if (measure.annotations && measure.annotations.length > 0)
+								hasAnnotation = true
+						})
+						const extraTop = hasAnnotation ? ANNOTATION_HEIGHT : hasEnding ? ENDING_HEIGHT : 0
+						line.forEach((measure, barNum) => {
+							const RECT_WIDTH = 1
+							if (!measure.noBorder) {
+								renderer.paper.rect({x: leftMargin + barNum * colWidth, y: renderer.y, width: colWidth, height: extraTop + ROW_HEIGHT})
+								renderer.paper.rect({x: leftMargin + barNum * colWidth + RECT_WIDTH, y: renderer.y + RECT_WIDTH, width: colWidth - RECT_WIDTH * 2, height: extraTop + ROW_HEIGHT - RECT_WIDTH * 2})
+								let repeatLeft = 0
+								let repeatRight = 0
+								const top = renderer.y
+								const left = leftMargin + colWidth * barNum
+								if (measure.hasStartRepeat) {
+									drawRepeat(renderer, left, top, top+ROW_HEIGHT+extraTop, true, extraTop)
+									repeatLeft = 12
+								}
+								if (measure.hasEndRepeat) {
+									drawRepeat(renderer, left+colWidth, top, top+ROW_HEIGHT+extraTop, false, extraTop)
+									repeatRight = 12
+								}
+
+								let endingWidth = 0
+								if (measure.ending) {
+									const endingEl = text(renderer, measure.ending, leftMargin + barNum * colWidth + 4, top + 10, 12, endingFont, null, null, false )
+									endingWidth = endingEl.getBBox().width + 4
+								}
+								drawMeasure(renderer, top, leftMargin+repeatLeft, colWidth, lineNum, barNum, measure.chord, chordFont, repeatLeft+repeatRight, ROW_HEIGHT, extraTop)
+								if (measure.annotations && measure.annotations.length > 0) {
+									drawAnnotations(renderer, top, leftMargin + barNum * colWidth +endingWidth, measure.annotations, annotationFont)
+								}
+								if (extraTop) {
+									renderer.paper.rectBeneath({x: leftMargin + barNum * colWidth, y: renderer.y, width: colWidth, height: extraTop, fill: '#e8e8e8', stroke: 'none'})
+								}
+							}
+						})
+						renderer.moveY(extraTop + ROW_HEIGHT)
+					})
+					renderer.moveY(PART_MARGIN_BOTTOM)
+				}
+				break;
+		}
+	})
+	renderer.paper.closeGroup()
+}
+
+function drawPercent(renderer, x, y, offset) {
+	var lineX1 = x - 10
+	var lineX2 = x + 10
+	var lineY1 = y + 10
+	var lineY2 = y - 10
+	var leftDotX = x - 10
+	var leftDotY = -renderer.yToPitch(offset) + 2
+	var rightDotX = x + 6.5
+	var rightDotY = -renderer.yToPitch(offset) -2.3
+
+	renderer.paper.lineToBack({x1: lineX1, x2: lineX2, y1: lineY1, y2: lineY2, 'stroke-width': '3px', 'stroke-linecap':"round"  })
+
+	printSymbol(renderer, leftDotX, leftDotY, "dots.dot", {
+		scalex: 1,
+		scaley: 1,
+		klass: "",
+		name: "dot"
+	});
+
+	printSymbol(renderer, rightDotX, rightDotY, "dots.dot", {
+		scalex: 1,
+		scaley: 1,
+		klass: "",
+		name: "dot"
+	});
+
+}
+
+function drawRepeat(renderer, x, y1, y2, isStart, offset) {
+	const lineX = isStart ? x+2 : x-4
+	const circleX = isStart ? x+9 : x-11
+
+	renderer.paper.openGroup({klass:'abcjs-repeat'})
+	printStem(renderer, lineX, 3 + renderer.lineThickness, y1, y2, null, "bar")
+
+	printSymbol(renderer, circleX, -renderer.yToPitch(offset)-4, "dots.dot", {
+		scalex: 1,
+		scaley: 1,
+		klass: "",
+		name: "dot"
+	});
+
+	printSymbol(renderer, circleX, -renderer.yToPitch(offset)-8, "dots.dot", {
+		scalex: 1,
+		scaley: 1,
+		klass: "",
+		name: "dot"
+	});
+	renderer.paper.closeGroup()
+}
+
+const symbols = {
+	'segno': "scripts.segno",
+	'coda': "scripts.coda",
+	"fermata": "scripts.ufermata",
+}
+
+function drawAnnotations(renderer, offset, left, annotations, annotationFont) {
+	left += 3
+	let el
+	for (let a = 0; a < annotations.length; a++) {
+		switch (annotations[a]) {
+			case 'segno':
+			case 'coda':
+			case "fermata": {
+				left += 12
+				el = printSymbol(renderer, left, -3, symbols[annotations[a]], {
+					scalex: 1,
+					scaley: 1,
+					//klass: renderer.controller.classes.generate(klass),
+					name: symbols[annotations[a]]
+				});
+				const box = el.getBBox()
+				left += box.width
+			}
+				break;
+			default:
+				text(renderer, annotations[a], left, offset + 12, 12, annotationFont, null, null, false )
+		}
+	}
+
+}
+
+function drawMeasure(renderer, offset, leftMargin, colWidth, lineNum, barNum, chords, chordFont, margin, height, extraTop) {
+	const left = leftMargin + colWidth * barNum
+	if (!chords[1] && !chords[2] && !chords[3])
+		drawSingleChord(renderer, left, offset+extraTop, colWidth-margin, height, chords[0], chordFont, extraTop)
+	else if (!chords[1] && !chords[3])
+		drawTwoChords(renderer, left, offset, colWidth-margin, height, chords[0], chords[2], chordFont, extraTop)
+	else
+		drawFourChords(renderer, left, offset, colWidth-margin, height, chords, chordFont, extraTop)
+}
+
+function renderChord(renderer, x, y, size, chord, font, maxWidth) {
+	const el = text(renderer, chord, x, y, size, font, null, "abcjs-chord", true)
+	let bb = el.getBBox()
+	let fontSize = size
+	while (bb.width > maxWidth && fontSize >= 14) {
+		fontSize -= 2
+		el.setAttribute('font-size', fontSize)
+		bb = el.getBBox()
+	}
+}
+
+const MAX_ONE_CHORD = 34
+const MAX_TWO_CHORDS = 26
+const MAX_FOUR_CHORDS = 20
+const TOP_MARGIN = -3
+
+function drawSingleChord(renderer, left, top, width, height, chord, font, extraTop) {
+	if (chord === '%')
+		drawPercent(renderer, left+width/2, top+height/2, extraTop+height/2)
+	else
+		renderChord(renderer, left+width/2, top+height/2+TOP_MARGIN, MAX_ONE_CHORD, chord, font, width)
+}
+
+function drawTwoChords(renderer, left, top, width, height, chord1, chord2, font, extraTop) {
+	renderer.paper.lineToBack({x1: left, x2: left+width, y1: top+height+extraTop, y2: top+2 })
+	renderChord(renderer, left+width/4, top+height/4+5+extraTop+TOP_MARGIN, MAX_TWO_CHORDS, chord1, font, width/2)
+	renderChord(renderer, left+3*width/4, top+3*height/4+extraTop+TOP_MARGIN, MAX_TWO_CHORDS, chord2, font, width/2)
+}
+
+function drawFourChords(renderer, left, top, width, height, chords, font, extraTop) {
+	const MARGIN = 3
+	renderer.paper.lineToBack({x1: left+MARGIN, x2: left+width-MARGIN, y1: top+height/2+extraTop, y2: top+height/2+extraTop })
+	renderer.paper.lineToBack({x1: left+width/2, x2: left+width/2, y1: top+MARGIN+extraTop, y2: top+height-MARGIN+extraTop })
+
+	if (chords[0])
+		renderChord(renderer, left+width/4, top+height/4+2+extraTop+TOP_MARGIN, MAX_FOUR_CHORDS, shortenChord(chords[0]), font, width / 2)
+	if (chords[1])
+		renderChord(renderer, left+3*width/4, top+height/4+2+extraTop+TOP_MARGIN, MAX_FOUR_CHORDS, shortenChord(chords[1]), font, width / 2)
+	if (chords[2])
+		renderChord(renderer, left+width/4, top+3*height/4+extraTop+TOP_MARGIN, MAX_FOUR_CHORDS, shortenChord(chords[2]), font, width / 2)
+	if (chords[3])
+		renderChord(renderer, left+3*width/4, top+3*height/4+extraTop+TOP_MARGIN, MAX_FOUR_CHORDS, shortenChord(chords[3]), font, width / 2)
+}
+
+function shortenChord(chord) {
+	if (chord === "No Chord")
+		return "N.C."
+	return chord
+}
+
+function text(renderer, str, x, y, size, font, dataName, klass, alignCenter) {
+	const attr = {
+		x: x,
+		y: y,
+		stroke:"none",
+		'font-size':size,
+		'font-style':font.style,
+		'font-family':font.face,
+		'font-weight':font.weight,
+		'text-decoration':font.decoration,
+	}
+	if (dataName)
+		attr['data-name'] = dataName
+	if (klass)
+		attr['class'] = klass
+	attr["text-anchor"] = alignCenter ? "middle" : "start"
+
+	return renderer.paper.text(str, attr, null, {"alignment-baseline": "middle"})
+}
+
+module.exports = drawChordGrid

package/src/write/draw/draw.js

@@ -3,8 +3,9 @@ var setPaperSize = require('./set-paper-size');
 var nonMusic = require('./non-music');
 var spacing = require('../helpers/spacing');
 var Selectables = require('./selectables');
+var drawChordGrid = require('./chord-grid');
 
-function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
+function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset, chordGrid) {
 	var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
 	var groupClasses = {}
 	if (classes.shouldAddClasses)
@@ -14,48 +15,60 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 	nonMusic(renderer, abcTune.topText, selectables);
 	renderer.paper.closeGroup()
 	renderer.moveY(renderer.spacing.music);
+
+	let suppressMusic = false
+	if (chordGrid && abcTune.chordGrid) {
+		drawChordGrid(renderer, abcTune.chordGrid, renderer.padding.left, width, abcTune.formatting)
+		if (chordGrid === 'noMusic')
+			suppressMusic = true
+	}
+
 	var staffgroups = [];
 	var nStaves = 0;
-	for (var line = 0; line < abcTune.lines.length; line++) {
-		classes.incrLine();
-		var abcLine = abcTune.lines[line];
-		if (abcLine.staff) {
-			// MAE 26 May 2025 - for incipits staff count limiting
-			nStaves++;
-			if (abcTune.formatting.maxStaves){
-				if (nStaves > abcTune.formatting.maxStaves){
-					break;
+	if (!suppressMusic) {
+		for (var line = 0; line < abcTune.lines.length; line++) {
+			classes.incrLine();
+			var abcLine = abcTune.lines[line];
+			if (abcLine.staff) {
+				// MAE 26 May 2025 - for incipits staff count limiting
+				nStaves++;
+				if (abcTune.formatting.maxStaves) {
+					if (nStaves > abcTune.formatting.maxStaves) {
+						break;
+					}
 				}
+				if (classes.shouldAddClasses)
+					groupClasses.klass = "abcjs-staff-wrapper abcjs-l" + classes.lineNumber
+				renderer.paper.openGroup(groupClasses)
+				if (abcLine.vskip) {
+					renderer.moveY(abcLine.vskip);
+				}
+				if (staffgroups.length >= 1)
+					addStaffPadding(renderer, renderer.spacing.staffSeparation, staffgroups[staffgroups.length - 1], abcLine.staffGroup);
+				var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables, line);
+				staffgroup.line = lineOffset + line; // If there are non-music lines then the staffgroup array won't line up with the line array, so this keeps track.
+				staffgroups.push(staffgroup);
+				renderer.paper.closeGroup()
+			} else if (abcLine.nonMusic) {
+				if (classes.shouldAddClasses)
+					groupClasses.klass = "abcjs-non-music"
+				renderer.paper.openGroup(groupClasses)
+				nonMusic(renderer, abcLine.nonMusic, selectables);
+				renderer.paper.closeGroup()
 			}
-			if (classes.shouldAddClasses)
-				groupClasses.klass = "abcjs-staff-wrapper abcjs-l" + classes.lineNumber
-			renderer.paper.openGroup(groupClasses)
-			if (abcLine.vskip) {
-				renderer.moveY(abcLine.vskip);
-			}
-			if (staffgroups.length >= 1)
-				addStaffPadding(renderer, renderer.spacing.staffSeparation, staffgroups[staffgroups.length - 1], abcLine.staffGroup);
-			var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables, line);
-			staffgroup.line = lineOffset + line; // If there are non-music lines then the staffgroup array won't line up with the line array, so this keeps track.
-			staffgroups.push(staffgroup);
-			renderer.paper.closeGroup()
-		} else if (abcLine.nonMusic) {
-			if (classes.shouldAddClasses)
-				groupClasses.klass = "abcjs-non-music"
-			renderer.paper.openGroup(groupClasses)
-			nonMusic(renderer, abcLine.nonMusic, selectables);
-			renderer.paper.closeGroup()
 		}
 	}
 
 	classes.reset();
-	if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
-		if (classes.shouldAddClasses)
-			groupClasses.klass = "abcjs-meta-bottom"
-		renderer.paper.openGroup(groupClasses)
-		renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
-		nonMusic(renderer, abcTune.bottomText, selectables);
-		renderer.paper.closeGroup()
+	if (!suppressMusic) {
+		if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
+			if (classes.shouldAddClasses)
+				groupClasses.klass = "abcjs-meta-bottom"
+			renderer.paper.openGroup(groupClasses)
+			renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
+			nonMusic(renderer, abcTune.bottomText, selectables);
+			renderer.paper.closeGroup()
+		}
 	}
 	setPaperSize(renderer, maxWidth, scale, responsive);
 	return { staffgroups: staffgroups, selectables: selectables.getElements() };

package/src/write/draw/text.js

@@ -39,7 +39,7 @@ function renderText(renderer, params, alreadyInGroup) {
 
 	// MAE 9 May 2025 for free text blocks
 	var text;
-	if (params.name == "free-text"){
+	if (params.name === "free-text"){
 		text = params.text.replace(/^[ \t]*\n/gm, ' \n');
 	}
 	else{

package/src/write/engraver-controller.js

@@ -74,6 +74,8 @@ var EngraverController = function (paper, params) {
 		this.germanAlphabet = params.germanAlphabet;
 	if (params.lineThickness)
 		this.lineThickness = params.lineThickness;
+	if (params.chordGrid)
+		this.chordGrid = params.chordGrid;
 	this.renderer.controller = this; // TODO-GD needed for highlighting
 	this.renderer.foregroundColor = params.foregroundColor ? params.foregroundColor : "currentColor";
 	if (params.ariaLabel !== undefined)
@@ -251,7 +253,7 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 
 	var origJazzChords = this.jazzchords
 	var scale = this.setupTune(abcTune, tuneNumber);
-  
+
 	// Create all of the element objects that will appear on the page.
 	this.constructTuneElements(abcTune);
   
@@ -300,7 +302,7 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 	}
   
 	// Do all the writing to the SVG
-	var ret = draw(this.renderer, this.classes, abcTune, this.width, maxWidth, this.responsive, scale, this.selectTypes, tuneNumber, lineOffset);
+	var ret = draw(this.renderer, this.classes, abcTune, this.width, maxWidth, this.responsive, scale, this.selectTypes, tuneNumber, lineOffset, this.chordGrid);
 	this.staffgroups = ret.staffgroups;
 	this.selectables = ret.selectables;
 	if (this.oneSvgPerLine) {

package/src/write/layout/beam.js

@@ -189,7 +189,22 @@ function createAdditionalBeams(elems, asc, beam, isGrace, dy) {
 
 
 				if (auxBeams[j].single) {
-					auxBeamEndX = (i === 0) ? x + 5 : x - 5;
+					if(i === 0) {
+						// This is the first note in the group, always draw the beam to the right
+						auxBeamEndX = x + 5;
+					} else if (i === elems.length - 1) {
+						// This is the last note in the group, always draw the beam to the left
+						auxBeamEndX = x - 5;
+					} else {
+						// This is a middle note, check the note durations of the notes to the left and right
+						if(elems[i-1].duration === elems[i+1].duration) {
+						// The notes on either side are the same duration, alternate which side the beam goes to
+						auxBeamEndX = i%2 === 0 ? x + 5 : x - 5;
+						} else {
+						// The notes on either side are different durations, draw the beam to the shorter note
+						auxBeamEndX = elems[i-1].duration > elems[i+1].duration ? x + 5 : x - 5;
+						}
+					}
 					auxBeamEndY = getBarYAt(beam.startX, beam.startY, beam.endX, beam.endY, auxBeamEndX) + sy * (j + 1);
 				}
 				var b = { startX: auxBeams[j].x, endX: auxBeamEndX, startY: auxBeams[j].y, endY: auxBeamEndY, dy: dy }

package/src/write/renderer.js

@@ -179,6 +179,10 @@ Renderer.prototype.calcY = function (ofs) {
 	return this.y - ofs * spacing.STEP;
 };
 
+Renderer.prototype.yToPitch = function (ofs) {
+	return ofs / spacing.STEP;
+};
+
 Renderer.prototype.moveY = function (em, numLines) {
 	if (numLines === undefined) numLines = 1;
 	this.y += em * numLines;

package/src/write/svg.js

@@ -168,7 +168,7 @@ Svg.prototype.rectBeneath = function (attr) {
 	this.svg.insertBefore(el, this.svg.firstChild);
 };
 
-Svg.prototype.text = function (text, attr, target) {
+Svg.prototype.text = function (text, attr, target, spanAttr) {
 	var el = document.createElementNS(svgNS, 'text');
 	el.setAttribute("stroke", "none");
 	for (var key in attr) {
@@ -185,6 +185,13 @@ Svg.prototype.text = function (text, attr, target) {
 	    }
 
 		var line = document.createElementNS(svgNS, 'tspan');
+		if (spanAttr) {
+			for (var skey in spanAttr) {
+				if (spanAttr.hasOwnProperty(skey)) {
+					line.setAttribute(skey, spanAttr[skey]);
+				}
+			}
+		}
 		line.setAttribute("x", attr.x ? attr.x : 0);
 		if (i !== 0)
 			line.setAttribute("dy", "1.2em");

package/types/index.d.ts

@@ -266,6 +266,7 @@ declare module 'abcjs' {
 		add_classes?: boolean;
 		afterParsing?: AfterParsing;
 		ariaLabel?: string;
+		chordGrid?:'noMusic'|'withMusic';
 		clickListener?: ClickListener;
 		dragColor?: string;
 		dragging?: boolean;
@@ -872,6 +873,29 @@ declare module 'abcjs' {
 		}
 	}
 
+	interface ChordGridSubtitle {
+		type: "subtitle";
+		subtitle: string;
+	}
+	interface ChordGridText {
+		type: "text";
+		text: string;
+	}
+	interface ChordGridMeasure {
+		chord: [string,string,string,string];
+		hasStartRepeat?:boolean;
+		hasEndRepeat?:boolean;
+		noBorder?:boolean; // for when the line isn't complete, this is a placeholder
+		ending?:number; // This bar starts an ending
+		annotations?: Array<string>;
+	}
+	interface ChordGridPart {
+		type: "part";
+		name: string;
+		lines: Array<ChordGridMeasure>;
+	}
+	type ChordGrid = ChordGridSubtitle | ChordGridText | ChordGridPart;
+
 	export interface TuneObject {
 		formatting: Formatting;
 		engraver?: EngraverController;
@@ -881,6 +905,7 @@ declare module 'abcjs' {
 		metaTextInfo: MetaTextInfo;
 		version: string;
 		warnings?: Array<string>;
+		chordGrid?: Array<ChordGrid>;
 
 		getTotalTime: NumberFunction;
 		getTotalBeats: NumberFunction;

package/version.js

@@ -1,3 +1,3 @@
-var version = '6.5.2';
+var version = '6.6.1';
 
 module.exports = version;