abcjs 6.2.3 → 6.3.0

package/src/write/creation/elements/top-text.js

@@ -1,6 +1,7 @@
 const addTextIf = require("../add-text-if");
+const richText = require("./rich-text");
 
-function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, getTextSize) {
+function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, shouldAddClasses, getTextSize) {
 	this.rows = [];
 
 	if (metaText.header && isPrint) {
@@ -18,12 +19,14 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
 	var tAnchor = formatting.titleleft ? 'start' : 'middle';
 	var tLeft = formatting.titleleft ? paddingLeft : paddingLeft + width / 2;
 	if (metaText.title) {
-		addTextIf(this.rows, { marginLeft: tLeft, text: metaText.title, font: 'titlefont', klass: 'title meta-top', marginTop: spacing.title, anchor: tAnchor, absElemType: "title", info: metaTextInfo.title, name: "title" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-title' : ''
+		richText(this.rows, metaText.title, "titlefont", klass, 'title', tLeft, {marginTop: spacing.title, anchor: tAnchor, absElemType: "title", info: metaTextInfo.title},  getTextSize)
 	}
 	if (lines.length) {
 		var index = 0;
 		while (index < lines.length && lines[index].subtitle) {
-			addTextIf(this.rows, { marginLeft: tLeft, text: lines[index].subtitle.text, font: 'subtitlefont', klass: 'text meta-top subtitle', marginTop: spacing.subtitle, anchor: tAnchor, absElemType: "subtitle", info: lines[index].subtitle, name: "subtitle" }, getTextSize);
+			var klass = shouldAddClasses ? 'abcjs-text abcjs-subtitle' : ''
+			richText(this.rows, lines[index].subtitle.text, "subtitlefont", klass, 'subtitle', tLeft, {marginTop: spacing.subtitle, anchor: tAnchor, absElemType: "subtitle", info: lines[index].subtitle},  getTextSize)
 			index++;
 		}
 	}
@@ -32,22 +35,45 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
 		this.rows.push({ move: spacing.composer });
 		if (metaText.rhythm && metaText.rhythm.length > 0) {
 			var noMove = !!(metaText.composer || metaText.origin);
-			addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.rhythm, font: 'infofont', klass: 'meta-top rhythm', absElemType: "rhythm", noMove: noMove, info: metaTextInfo.rhythm, name: "rhythm" }, getTextSize);
+			var klass = shouldAddClasses ? 'abcjs-rhythm' : ''
+			addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.rhythm, font: 'infofont', klass: klass, absElemType: "rhythm", noMove: noMove, info: metaTextInfo.rhythm, name: "rhythm" }, getTextSize);
 		}
-		var composerLine = "";
-		if (metaText.composer) composerLine += metaText.composer;
-		if (metaText.origin) composerLine += ' (' + metaText.origin + ')';
-		if (composerLine.length > 0) {
-			addTextIf(this.rows, { marginLeft: paddingLeft + width, text: composerLine, font: 'composerfont', klass: 'meta-top composer', anchor: "end", absElemType: "composer", info: metaTextInfo.composer, name: "composer" }, getTextSize);
+		var hasSimpleComposerLine = true
+		if (metaText.composer && typeof metaText.composer !== 'string')
+			hasSimpleComposerLine = false
+		if (metaText.origin && typeof metaText.origin !== 'string')
+			hasSimpleComposerLine = false
+			
+		var composerLine = metaText.composer ? metaText.composer : '';
+		if (metaText.origin) {
+			if (typeof composerLine === 'string' && typeof metaText.origin === 'string')
+				composerLine += ' (' + metaText.origin + ')';
+			else if (typeof composerLine === 'string' && typeof metaText.origin !== 'string') {
+				composerLine = [{text:composerLine}]
+				composerLine.push({text:" ("})
+				composerLine = composerLine.concat(metaText.origin)
+				composerLine.push({text:")"})
+			} else {
+				composerLine.push({text:" ("})
+				composerLine = composerLine.concat(metaText.origin)
+				composerLine.push({text:")"})
+			}
+		}
+		if (composerLine) {
+			var klass = shouldAddClasses ? 'abcjs-composer' : ''
+			richText(this.rows, composerLine, 'composerfont', klass, "composer", paddingLeft+width, {anchor: "end", absElemType: "composer", info: metaTextInfo.composer, ingroup: true}, getTextSize)
 		}
 	}
 
 	if (metaText.author && metaText.author.length > 0) {
-		addTextIf(this.rows, { marginLeft: paddingLeft + width, text: metaText.author, font: 'composerfont', klass: 'meta-top author', anchor: "end", absElemType: "author", info: metaTextInfo.author, name: "author" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-author' : ''
+		richText(this.rows, metaText.author, 'composerfont', klass, "author", paddingLeft+width, {anchor: "end", absElemType: "author", info: metaTextInfo.author}, getTextSize)
 	}
 
 	if (metaText.partOrder && metaText.partOrder.length > 0) {
-		addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.partOrder, font: 'partsfont', klass: 'meta-top part-order', absElemType: "partOrder", info: metaTextInfo.partOrder, name: "part-order" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-part-order' : ''
+		richText(this.rows, metaText.partOrder, 'partsfont', klass, "part-order", paddingLeft, {absElemType: "partOrder", info: metaTextInfo.partOrder, anchor: 'start'}, getTextSize)
+
 	}
 }
 

package/src/write/creation/glyphs.js

@@ -86,7 +86,7 @@ var glyphs =
 	's': { d: [['M', 4.47, -8.73], ['c', 0.09, 0.00, 0.36, -0.03, 0.57, -0.03], ['c', 0.75, 0.03, 1.29, 0.24, 1.71, 0.63], ['c', 0.51, 0.54, 0.66, 1.26, 0.36, 1.83], ['c', -0.24, 0.42, -0.63, 0.57, -1.11, 0.42], ['c', -0.33, -0.09, -0.60, -0.36, -0.60, -0.57], ['c', 0.00, -0.03, 0.06, -0.21, 0.15, -0.39], ['c', 0.12, -0.21, 0.15, -0.33, 0.18, -0.48], ['c', 0.00, -0.24, -0.06, -0.48, -0.15, -0.60], ['c', -0.15, -0.21, -0.42, -0.24, -0.75, -0.15], ['c', -0.27, 0.06, -0.48, 0.18, -0.69, 0.36], ['c', -0.39, 0.39, -0.51, 0.96, -0.33, 1.38], ['c', 0.09, 0.21, 0.42, 0.51, 0.78, 0.72], ['c', 1.11, 0.69, 1.59, 1.11, 1.89, 1.68], ['c', 0.21, 0.39, 0.24, 0.78, 0.15, 1.29], ['c', -0.18, 1.20, -1.17, 2.16, -2.52, 2.52], ['c', -1.02, 0.24, -1.95, 0.12, -2.70, -0.42], ['c', -0.72, -0.51, -0.99, -1.47, -0.60, -2.19], ['c', 0.24, -0.48, 0.72, -0.63, 1.17, -0.42], ['c', 0.33, 0.18, 0.54, 0.45, 0.57, 0.81], ['c', 0.00, 0.21, -0.03, 0.30, -0.33, 0.51], ['c', -0.33, 0.24, -0.39, 0.42, -0.27, 0.69], ['c', 0.06, 0.15, 0.21, 0.27, 0.45, 0.33], ['c', 0.30, 0.09, 0.87, 0.09, 1.20, 0.00], ['c', 0.75, -0.21, 1.23, -0.72, 1.29, -1.35], ['c', 0.03, -0.42, -0.15, -0.81, -0.54, -1.20], ['c', -0.24, -0.24, -0.48, -0.42, -1.41, -1.02], ['c', -0.69, -0.42, -1.05, -0.93, -1.05, -1.47], ['c', 0.00, -0.39, 0.12, -0.87, 0.30, -1.23], ['c', 0.27, -0.57, 0.78, -1.05, 1.38, -1.35], ['c', 0.24, -0.12, 0.63, -0.27, 0.90, -0.30], ['z']], w: 6.632, h: 8.758 },
 	'z': { d: [['M', 2.64, -7.95], ['c', 0.36, -0.09, 0.81, -0.03, 1.71, 0.27], ['c', 0.78, 0.21, 0.96, 0.27, 1.74, 0.30], ['c', 0.87, 0.06, 1.02, 0.03, 1.38, -0.21], ['c', 0.21, -0.15, 0.33, -0.15, 0.48, -0.06], ['c', 0.15, 0.09, 0.21, 0.30, 0.15, 0.45], ['c', -0.03, 0.06, -1.26, 1.26, -2.76, 2.67], ['l', -2.73, 2.55], ['l', 0.54, 0.03], ['c', 0.54, 0.03, 0.72, 0.03, 2.01, 0.15], ['c', 0.36, 0.03, 0.90, 0.06, 1.20, 0.09], ['c', 0.66, 0.00, 0.81, -0.03, 1.02, -0.24], ['c', 0.30, -0.30, 0.39, -0.72, 0.27, -1.23], ['c', -0.06, -0.27, -0.06, -0.27, -0.03, -0.39], ['c', 0.15, -0.30, 0.54, -0.27, 0.69, 0.03], ['c', 0.15, 0.33, 0.27, 1.02, 0.27, 1.50], ['c', 0.00, 1.47, -1.11, 2.70, -2.52, 2.79], ['c', -0.57, 0.03, -1.02, -0.09, -2.01, -0.51], ['c', -1.02, -0.42, -1.23, -0.48, -2.13, -0.54], ['c', -0.81, -0.06, -0.96, -0.03, -1.26, 0.18], ['c', -0.12, 0.06, -0.24, 0.12, -0.27, 0.12], ['c', -0.27, 0.00, -0.45, -0.30, -0.36, -0.51], ['c', 0.03, -0.06, 1.32, -1.32, 2.91, -2.79], ['l', 2.88, -2.73], ['c', -0.03, 0.00, -0.21, 0.03, -0.42, 0.06], ['c', -0.21, 0.03, -0.78, 0.09, -1.23, 0.12], ['c', -1.11, 0.12, -1.23, 0.15, -1.95, 0.27], ['c', -0.72, 0.15, -1.17, 0.18, -1.29, 0.09], ['c', -0.27, -0.18, -0.21, -0.75, 0.12, -1.26], ['c', 0.39, -0.60, 0.93, -1.02, 1.59, -1.20], ['z']], w: 8.573, h: 8.743 },
 	'+': { d: [['M', 3.48, -9.3], ['c', 0.18, -0.09, 0.36, -0.09, 0.54, 0.00], ['c', 0.18, 0.09, 0.24, 0.15, 0.33, 0.30], ['l', 0.06, 0.15], ['l', 0.00, 1.29], ['l', 0.00, 1.29], ['l', 1.29, 0.00], ['c', 1.23, 0.00, 1.29, 0.00, 1.41, 0.06], ['c', 0.06, 0.03, 0.15, 0.09, 0.18, 0.12], ['c', 0.12, 0.09, 0.21, 0.33, 0.21, 0.48], ['c', 0.00, 0.15, -0.09, 0.39, -0.21, 0.48], ['c', -0.03, 0.03, -0.12, 0.09, -0.18, 0.12], ['c', -0.12, 0.06, -0.18, 0.06, -1.41, 0.06], ['l', -1.29, 0.00], ['l', 0.00, 1.29], ['c', 0.00, 1.23, 0.00, 1.29, -0.06, 1.41], ['c', -0.09, 0.18, -0.15, 0.24, -0.30, 0.33], ['c', -0.21, 0.09, -0.39, 0.09, -0.57, 0.00], ['c', -0.18, -0.09, -0.24, -0.15, -0.33, -0.33], ['c', -0.06, -0.12, -0.06, -0.18, -0.06, -1.41], ['l', 0.00, -1.29], ['l', -1.29, 0.00], ['c', -1.23, 0.00, -1.29, 0.00, -1.41, -0.06], ['c', -0.18, -0.09, -0.24, -0.15, -0.33, -0.33], ['c', -0.09, -0.18, -0.09, -0.36, 0.00, -0.54], ['c', 0.09, -0.18, 0.15, -0.24, 0.33, -0.33], ['l', 0.15, -0.06], ['l', 1.26, 0.00], ['l', 1.29, 0.00], ['l', 0.00, -1.29], ['c', 0.00, -1.23, 0.00, -1.29, 0.06, -1.41], ['c', 0.09, -0.18, 0.15, -0.24, 0.33, -0.33], ['z']], w: 7.507, h: 7.515 },
-	',': { d: [['M', 1.32, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']], w: 3.452, h: 8.143 },
+	',': { d: [['M', 1.85, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']], w: 3.452, h: 8.143 },
 	'-': { d: [['M', 0.18, -5.34], ['c', 0.09, -0.06, 0.15, -0.06, 2.31, -0.06], ['c', 2.46, 0.00, 2.37, 0.00, 2.46, 0.21], ['c', 0.12, 0.21, 0.03, 0.42, -0.15, 0.54], ['c', -0.09, 0.06, -0.15, 0.06, -2.28, 0.06], ['c', -2.16, 0.00, -2.22, 0.00, -2.31, -0.06], ['c', -0.27, -0.15, -0.27, -0.54, -0.03, -0.69], ['z']], w: 5.001, h: 0.81 },
 	'.': { d: [['M', 1.32, -3.36], ['c', 1.05, -0.27, 2.10, 0.57, 2.10, 1.65], ['c', 0.00, 1.08, -1.05, 1.92, -2.10, 1.65], ['c', -0.90, -0.21, -1.50, -1.14, -1.26, -2.04], ['c', 0.12, -0.63, 0.63, -1.11, 1.26, -1.26], ['z']], w: 3.413, h: 3.402 },
 	'scripts.wedge': { d: [['M', -3.66, -7.44], ['c', 0.06, -0.09, 0.00, -0.09, 0.81, 0.03], ['c', 1.86, 0.30, 3.84, 0.30, 5.73, 0.00], ['c', 0.78, -0.12, 0.72, -0.12, 0.78, -0.03], ['c', 0.15, 0.15, 0.12, 0.24, -0.24, 0.60], ['c', -0.93, 0.93, -1.98, 2.76, -2.67, 4.62], ['c', -0.30, 0.78, -0.51, 1.71, -0.51, 2.13], ['c', 0.00, 0.15, 0.00, 0.18, -0.06, 0.27], ['c', -0.12, 0.09, -0.24, 0.09, -0.36, 0.00], ['c', -0.06, -0.09, -0.06, -0.12, -0.06, -0.27], ['c', 0.00, -0.42, -0.21, -1.35, -0.51, -2.13], ['c', -0.69, -1.86, -1.74, -3.69, -2.67, -4.62], ['c', -0.36, -0.36, -0.39, -0.45, -0.24, -0.60], ['z']], w: 7.49, h: 7.752 },

package/src/write/draw/absolute.js

@@ -16,7 +16,10 @@ function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
 				drawTempo(renderer, child);
 				break;
 			default:
-				drawRelativeElement(renderer, child, bartop);
+				var el = drawRelativeElement(renderer, child, bartop);
+				if (child.type === "symbol" && child.c && child.c.indexOf('notehead') >= 0) {
+					el.setAttribute('class', 'abcjs-notehead')
+				}
 		}
 	}
 	var klass = params.type;

package/src/write/draw/draw.js

@@ -6,7 +6,10 @@ var Selectables = require('./selectables');
 
 function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
 	var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
-	renderer.paper.openGroup()
+	var groupClasses = {}
+	if (classes.shouldAddClasses)
+		groupClasses.klass = "abcjs-meta-top"
+	renderer.paper.openGroup(groupClasses)
 	renderer.moveY(renderer.padding.top);
 	nonMusic(renderer, abcTune.topText, selectables);
 	renderer.paper.closeGroup()
@@ -16,7 +19,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 		classes.incrLine();
 		var abcLine = abcTune.lines[line];
 		if (abcLine.staff) {
-			renderer.paper.openGroup()
+			if (classes.shouldAddClasses)
+				groupClasses.klass = "abcjs-staff l" + classes.lineNumber
+			renderer.paper.openGroup(groupClasses)
 			if (abcLine.vskip) {
 				renderer.moveY(abcLine.vskip);
 			}
@@ -27,7 +32,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 			staffgroups.push(staffgroup);
 			renderer.paper.closeGroup()
 		} else if (abcLine.nonMusic) {
-			renderer.paper.openGroup()
+			if (classes.shouldAddClasses)
+				groupClasses.klass = "abcjs-non-music"
+			renderer.paper.openGroup(groupClasses)
 			nonMusic(renderer, abcLine.nonMusic, selectables);
 			renderer.paper.closeGroup()
 		}
@@ -35,7 +42,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 
 	classes.reset();
 	if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
-		renderer.paper.openGroup()
+		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()

package/src/write/draw/non-music.js

@@ -8,12 +8,14 @@ function nonMusic(renderer, obj, selectables) {
 			renderer.absolutemoveY(row.absmove);
 		} else if (row.move) {
 			renderer.moveY(row.move);
-		} else if (row.text) {
+		} else if (row.text || row.phrases) {
 			var x = row.left ? row.left : 0;
 			var el = renderText(renderer, {
 				x: x,
 				y: renderer.y,
 				text: row.text,
+				phrases: row.phrases,
+				'dominant-baseline': row['dominant-baseline'],
 				type: row.font,
 				klass: row.klass,
 				name: row.name,

package/src/write/draw/relative.js

@@ -27,7 +27,7 @@ function drawRelativeElement(renderer, params, bartop) {
 		case "tabNumber":
 			var hAnchor = "middle";
 			var tabFont = "tabnumberfont";
-			var tabClass = 'tab-number';
+			var tabClass = 'abcjs-tab-number';
 			if (params.isGrace) {
 				tabFont = "tabgracefont";
 				y += 2.5;

package/src/write/draw/tempo.js

@@ -16,7 +16,7 @@ function drawTempo(renderer, params) {
 	var text;
 	var size;
 	if (params.tempo.preString) {
-		text = renderText(renderer, { x: x, y: y, text: params.tempo.preString, type: 'tempofont', klass: 'abcjs-tempo', anchor: "start", noClass: true, "dominant-baseline": "ideographic", name: "pre" }, true);
+		text = renderText(renderer, { x: x, y: y, text: params.tempo.preString, type: 'tempofont', klass: 'abcjs-tempo', anchor: "start", noClass: true, name: "pre" }, true);
 		size = renderer.controller.getTextSize.calc(params.tempo.preString, 'tempofont', 'tempo', text);
 		var preWidth = size.width;
 		var charWidth = preWidth / params.tempo.preString.length; // Just get some average number to increase the spacing.

package/src/write/draw/text.js

@@ -2,6 +2,14 @@ var roundNumber = require("./round-number");
 
 function renderText(renderer, params, alreadyInGroup) {
 	var y = params.y;
+
+	// TODO-PER: Probably need to merge the regular text and rich text better. At the least, rich text loses the font box.
+	if (params.phrases) {
+		//richTextLine = function (phrases, x, y, klass, anchor, target)
+		var elem = renderer.paper.richTextLine(params.phrases, params.x, params.y, params.klass, params.anchor);
+		return elem;
+	}
+
 	if (params.lane) {
 		var laneMargin = params.dim.font.size * 0.25;
 		y += (params.dim.font.size + laneMargin) * params.lane;
@@ -15,6 +23,8 @@ function renderText(renderer, params, alreadyInGroup) {
 		hash = renderer.controller.getFontAndAttr.calc(params.type, params.klass);
 	if (params.anchor)
 		hash.attr["text-anchor"] = params.anchor;
+	if (params['dominant-baseline'])
+		hash.attr["dominant-baseline"] = params['dominant-baseline'];
 	hash.attr.x = params.x;
 	hash.attr.y = y;
 	if (!params.centerVertically)

package/src/write/engraver-controller.js

@@ -65,6 +65,8 @@ var EngraverController = function (paper, params) {
 		this.renderer.showDebug = params.showDebug;
 	if (params.jazzchords)
 		this.jazzchords = params.jazzchords;
+	if (params.accentAbove)
+		this.accentAbove = params.accentAbove;
 	if (params.germanAlphabet)
 		this.germanAlphabet = params.germanAlphabet;
 	if (params.lineThickness)
@@ -123,6 +125,7 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
 	this.reset();
 	this.getFontAndAttr = new GetFontAndAttr(abcTune.formatting, this.classes);
 	this.getTextSize = new GetTextSize(this.getFontAndAttr, this.renderer.paper);
+	var origJazzChords = this.jazzchords
 
 	this.setupTune(abcTune, 0);
 	this.constructTuneElements(abcTune);
@@ -170,6 +173,7 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
 		} else
 			needNewSection = true;
 	}
+	this.jazzchords = origJazzChords
 	return ret;
 };
 
@@ -178,6 +182,8 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
 
 	if (abcTune.formatting.jazzchords !== undefined)
 		this.jazzchords = abcTune.formatting.jazzchords;
+	if (abcTune.formatting.accentAbove !== undefined)
+		this.accentAbove = abcTune.formatting.accentAbove;
 
 	this.renderer.newTune(abcTune);
 	this.engraver = new AbstractEngraver(this.getTextSize, tuneNumber, {
@@ -187,6 +193,7 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
 		percmap: abcTune.formatting.percmap,
 		initialClef: this.initialClef,
 		jazzchords: this.jazzchords,
+		accentAbove: this.accentAbove,
 		germanAlphabet: this.germanAlphabet
 	});
 	this.engraver.setStemHeight(this.renderer.spacing.stemHeight);
@@ -206,7 +213,7 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
 };
 
 EngraverController.prototype.constructTuneElements = function (abcTune) {
-	abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+	abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
 
 	// Generate the raw staff line data
 	var i;
@@ -233,40 +240,74 @@ EngraverController.prototype.constructTuneElements = function (abcTune) {
 			abcLine.nonMusic = new Separator(abcLine.separator.spaceAbove, abcLine.separator.lineLength, abcLine.separator.spaceBelow);
 		}
 	}
-	abcTune.bottomText = new BottomText(abcTune.metaText, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+	abcTune.bottomText = new BottomText(abcTune.metaText, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
 };
 
 EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOffset) {
-	var scale = this.setupTune(abcTune, tuneNumber);
 
+	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);
-
+  
+	//Set the top text now that we know the width
+  
 	// Do all the positioning, both horizontally and vertically
 	var maxWidth = layout(this.renderer, abcTune, this.width, this.space, this.expandToWidest);
-
+  
 	//Set the top text now that we know the width
-	if (this.expandToWidest && maxWidth > this.width+1) {
-		abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, maxWidth, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+	if (this.expandToWidest && maxWidth > this.width + 1) {
+  
+		abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, maxWidth, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
+  
+		if ((abcTune.lines)&&(abcTune.lines.length > 0)){
+			var nlines = abcTune.lines.length;
+
+			for (var i=0;i<nlines;++i){
+				var entry = abcTune.lines[i];
+				if (entry.nonMusic){
+					if ((entry.nonMusic.rows) && (entry.nonMusic.rows.length > 0)){
+						var nRows = entry.nonMusic.rows.length;
+						for (var j=0;j<nRows;++j){
+							var thisRow = entry.nonMusic.rows[j];
+							// Recenter the element if it's a subtitle or centered text 
+							if (thisRow.left){
+								if (entry.subtitle){
+									thisRow.left = (maxWidth/2) + this.renderer.padding.left;
+								} else {
+									if ((entry.text)&&(entry.text.length>0)){
+										if (entry.text[0].center){
+											thisRow.left = (maxWidth/2) + this.renderer.padding.left;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 
 	// Deal with tablature for staff
 	if (abcTune.tablatures) {
-		tablatures.layoutTablatures(this.renderer, abcTune);
+	  tablatures.layoutTablatures(this.renderer, abcTune);
 	}
-
+  
 	// 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);
 	this.staffgroups = ret.staffgroups;
 	this.selectables = ret.selectables;
-
 	if (this.oneSvgPerLine) {
-		var div = this.renderer.paper.svg.parentNode
-		this.svgs = splitSvgIntoLines(this.renderer, div, abcTune.metaText.title, this.responsive)
+	  var div = this.renderer.paper.svg.parentNode;
+	  this.svgs = splitSvgIntoLines(this.renderer, div, abcTune.metaText.title, this.responsive);
 	} else {
-		this.svgs = [this.renderer.paper.svg];
+	  this.svgs = [this.renderer.paper.svg];
 	}
 	setupSelection(this, this.svgs);
+	
+	this.jazzchords = origJazzChords
 };
 
 function splitSvgIntoLines(renderer, output, title, responsive) {

package/src/write/helpers/classes.js

@@ -79,7 +79,7 @@ Classes.prototype.generate = function (c) {
 		return "";
 	var ret = [];
 	if (c && c.length > 0) ret.push(c);
-	if (c === "tab-number") // TODO-PER-HACK! straighten out the tablature
+	if (c === "abcjs-tab-number") // TODO-PER-HACK! straighten out the tablature
 		return ret.join(' ')
 	if (c === "text instrument-name")
 		return "abcjs-text abcjs-instrument-name"

package/src/write/helpers/get-font-and-attr.js

@@ -14,6 +14,13 @@ GetFontAndAttr.prototype.updateFonts = function (fontOverrides) {
 		this.formatting.vocalfont = fontOverrides.vocalfont;
 };
 
+GetFontAndAttr.prototype.getFamily = function (type) {
+	if (type[0] === '"' && type[type.length-1] === '"') {
+		return type.substring(1, type.length-1)
+	}
+	return type
+};
+
 GetFontAndAttr.prototype.calc = function (type, klass) {
 	var font;
 	if (typeof type === 'string') {
@@ -30,7 +37,7 @@ GetFontAndAttr.prototype.calc = function (type, klass) {
 
 	var attr = {
 		"font-size": font.size, 'font-style': font.style,
-		"font-family": font.face, 'font-weight': font.weight, 'text-decoration': font.decoration,
+		"font-family": this.getFamily(font.face), 'font-weight': font.weight, 'text-decoration': font.decoration,
 		'class': this.classes.generate(klass)
 	};
 	return { font: font, attr: attr };

package/src/write/helpers/get-text-size.js

@@ -11,6 +11,13 @@ GetTextSize.prototype.attr = function (type, klass) {
 	return this.getFontAndAttr.calc(type, klass);
 };
 
+GetTextSize.prototype.getFamily = function (type) {
+	if (type[0] === '"' && type[type.length-1] === '"') {
+		return type.substring(1, type.length-1)
+	}
+	return type
+};
+
 GetTextSize.prototype.calc = function (text, type, klass, el) {
 	var hash;
 	// This can be passed in either a string or a font. If it is a string it names one of the standard fonts.
@@ -28,7 +35,7 @@ GetTextSize.prototype.calc = function (text, type, klass, el) {
 			attr: {
 				"font-size": type.size,
 				"font-style": type.style,
-				"font-family": type.face,
+				"font-family": this.getFamily(type.face),
 				"font-weight": type.weight,
 				"text-decoration": type.decoration,
 				"class": this.getFontAndAttr.classes.generate(klass)

package/src/write/svg.js

@@ -211,6 +211,36 @@ Svg.prototype.text = function (text, attr, target) {
 	return el;
 };
 
+Svg.prototype.richTextLine = function (phrases, x, y, klass, anchor, target) {
+	var el = document.createElementNS(svgNS, 'text');
+	el.setAttribute("stroke", "none");
+	el.setAttribute("class", klass);
+	el.setAttribute("x", x);
+	el.setAttribute("y", y);
+	el.setAttribute("text-anchor", anchor);
+	el.setAttribute("dominant-baseline", "middle");
+
+	for (var i = 0; i < phrases.length; i++) {
+		var phrase = phrases[i]
+		var tspan = document.createElementNS(svgNS, 'tspan');
+		var attrs = Object.keys(phrase.attrs)
+		for (var j = 0; j < attrs.length; j++) {
+			var value = phrase.attrs[attrs[j]]
+			if (value !== '')
+				tspan.setAttribute(attrs[j], value)
+		}
+		tspan.textContent = phrase.content;
+
+		el.appendChild(tspan);
+	}
+
+	if (target)
+		target.appendChild(el);
+	else
+		this.append(el);
+	return el;
+}
+
 Svg.prototype.guessWidth = function (text, attr) {
 	var svg = this.createDummySvg();
 	var el = this.text(text, attr, svg);

package/temp.txt

@@ -0,0 +1,50 @@
+## Features
+
+### Tablature
+* Add tab feature `hideTabSymbol`
+* Add 5-string tab named "fiveString"
+* Make "mandolin" and "fiddle" synonyms for "violin" in tablature.
+
+### Synth
+* change the default synth control options for "play" and "progress" to be true
+* expose the MIDI creator function
+* Add a `getIsRunning()` function to enable play/pause
+* allow passing in soundfont and debug callback when playing an event directly.
+
+### Rich Text
+* allow up to 9 custom fonts in `%%setfont`
+* for rich text fields, escape two dollar signs 
+* allow rich text in all non-music fields 
+* give all non-music fields a unique class
+
+### Miscellaneous
+* add abcjs-notehead class to note heads; 
+* add `accentAbove` parameter
+* handle numbered tune names in the reverser
+* support reversing tune names with ", a" and ", an", with a variable amount of whitespace and case-insensitive
+* Add Glissando Synonyms
+* Put start and end char on slurs so they can be selected.
+* Add `expandToWidest` option
+
+## Bugs
+* fix placement of tab staff when there is no label
+* fix font placement bugs
+* remove spurious quotes in font name in svg attribute
+* Fix the name of the `abcjs-tab-number` class
+* fix crash when skipping a staff when creating tablature
+* Fix tab staff height when there is a label
+* Fix for crash when rendering multiple tab staves
+* Offset breath mark to the right
+* Center text when using `expandToWidest` set true
+* fix placement of triangle notehead
+* `afterParsing` now works with line wrapping.
+* Add paddingleft to the size of the SVG - it was cut off if the padding was larger than the default.
+* Guard against crash when the synth note wasn't loaded.
+* protect against spurious mouse click in selection
+* Fix bug in Firefox that cuts off the last line of the SVG
+
+## Documentation
+* add missing typescript types
+* fix synth control types
+* fixed some typescript types in the TimingCallbacks
+* TimingEvent is now NoteTimingEvent

package/types/index.d.ts

@@ -262,6 +262,7 @@ declare module 'abcjs' {
 	}
 
 	export interface AbcVisualParams {
+		accentAbove?: boolean;
 		add_classes?: boolean;
 		afterParsing?: AfterParsing;
 		ariaLabel?: string;
@@ -317,8 +318,8 @@ declare module 'abcjs' {
 	export interface EditorSynth {
 		synthControl?: SynthObjectController;
 		el: Selector;
-		cursorControl: CursorControl;
-		options: SynthOptions;
+		cursorControl?: CursorControl;
+		options?: SynthOptions;
 	}
 
 	export interface EditorOptions {
@@ -336,7 +337,7 @@ declare module 'abcjs' {
 	// Audio
 	export interface NoteMapTrackItem {
 		pitch: number;
-		instrument: number;
+		instrument: string;
 		start: number;
 		end: number;
 		startChar: number;
@@ -846,6 +847,7 @@ declare module 'abcjs' {
 		getElementFromChar: (charPos: number) => VoiceItem | null;
 		millisecondsPerMeasure: (bpm?: number) => number;
 		setTiming: (bpm?: number, measuresOfDelay? : number) => void;
+		setupEvents: (startingDelay: number, timeDivider:number, startingBpm: number, warp?: number) => Array<NoteTimingEvent>;
 		setUpAudio: (options: SynthOptions) => AudioTracks;
 		makeVoicesArray: () => Array<Selectable[]>
 		deline: () => Array<TuneLine>;
@@ -1026,10 +1028,30 @@ declare module 'abcjs' {
 		loaded: Array<string>;
 	}
 
-	export interface AudioTrack {
-		cmd: AudioTrackCommand;
-		[param: string]: any; // TODO - make this a union
+	export interface AudioTrackProgramItem {
+		cmd: 'program';
+		channel: number;
+		instrument: number;
+	}
+
+	export interface AudioTrackNoteItem {
+		cmd: 'note';
+		duration: number;
+		endChar: number;
+		endType?: "staccato"|"tenuto";
+		gap: number;
+		instrument: number;
+		pitch: number;
+		start: number;
+		startChar: number;
+		volume: number;
+	}
+	export interface AudioTrackTextItem {
+		cmd: 'text';
+		type: 'name';
+		text: string;
 	}
+	export type AudioTrack = Array<AudioTrackProgramItem|AudioTrackNoteItem|AudioTrackTextItem>
 
 	export interface AudioTracks {
 		tempo: number;
@@ -1157,6 +1179,7 @@ declare module 'abcjs' {
 		stop(): number
 		download(): string // returns audio buffer in wav format as a reference to a blob
 		getIsRunning(): boolean
+		getAudioBuffer(): AudioBuffer | undefined
 	}
 
 	export interface SynthInitResponse {
@@ -1188,6 +1211,22 @@ declare module 'abcjs' {
 		appendNote(trackNumber: number, pitch: number, durationInMeasures: number, volume: number, cents: number): void
 	}
 
+	export interface MidiRenderer {
+		setTempo(bpm: number): void
+		setGlobalInfo(bpm: number, name: string, key:KeySignature, time:MeterFraction): void
+		startTrack(): void
+		endTrack(): void
+		setText(type: string, text: string):void
+		setInstrument(instrument: number):void
+		setChannel(channel:number, pan?: number):void
+		startNote(pitch:number, loudness:number, cents?:number):void
+		endNote(pitch:number):void
+		addRest(length:number):void
+
+		getData():string
+		embed(parent:Element, noplayer:boolean):void
+	}
+
 	export namespace synth {
 		let instrumentIndexToName: [string]
 		let pitchToNoteName: [string]
@@ -1202,6 +1241,7 @@ declare module 'abcjs' {
 		export function getMidiFile(source: string | TuneObject, options?: MidiFileOptions): MidiFile;
 		export function playEvent(pitches: MidiPitches, graceNotes: MidiGracePitches | undefined, milliSecondsPerMeasure: number, soundFontUrl? : string, debugCallback?: (message: string) => void): Promise<void>;
 		export function sequence(visualObj: TuneObject, options: AbcVisualParams): AudioSequence
+		export function midiRenderer(): MidiRenderer
 	}
 
 	//

package/version.js

@@ -1,3 +1,3 @@
-var version = '6.2.3';
+var version = '6.3.0';
 
 module.exports = version;

package/.github/workflows/tests.yml

@@ -1,29 +0,0 @@
-name: Tests
-
-on: [push, pull_request]
-
-jobs:
-  Jest:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - name: Install Dependencies
-        run: npm install --color="always"
-
-      - name: Install Dependencies
-        run: npm test -- --colors
-
-