abcjs 6.2.2 → 6.3.0

package/src/write/draw/glissando.js

@@ -11,6 +11,7 @@ function drawGlissando(renderer, params, selectables) {
 	var rightY = renderer.calcY(params.anchor2.heads[0].pitch)
 	var leftX = params.anchor1.x + params.anchor1.w / 2
 	var rightX = params.anchor2.x + params.anchor2.w / 2
+	
 	var len = lineLength(leftX, leftY, rightX, rightY)
 	var marginLeft = params.anchor1.w / 2 + margin
 	var marginRight = params.anchor2.w / 2 + margin

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/set-paper-size.js

@@ -1,5 +1,5 @@
 function setPaperSize(renderer, maxwidth, scale, responsive) {
-	var w = (maxwidth + renderer.padding.right) * scale;
+	var w = (maxwidth + renderer.padding.left + renderer.padding.right) * scale;
 	var h = (renderer.y + renderer.padding.bottom) * scale;
 	if (renderer.isPrint)
 		h = Math.max(h, 1056); // 11in x 72pt/in x 1.33px/pt

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/draw/tie.js

@@ -17,7 +17,15 @@ function drawTie(renderer, params, linestartx, lineendx, selectables) {
 		klass = "abcjs-hint";
 	var fudgeY = params.fixedY ? 1.5 : 0; // TODO-PER: This just compensates for drawArc, which contains too much knowledge of ties and slurs.
 	var el = drawArc(renderer, params.startX, params.endX, params.startY + fudgeY, params.endY + fudgeY, params.above, klass, params.isTie, params.dotted);
-	selectables.wrapSvgEl({ el_type: "slur", startChar: -1, endChar: -1 }, el);
+	var startChar = -1
+	// This gets the start and end points of the contents of the slur. We assume that the parenthesis are just to the outside of that.
+	if (params.anchor1 && !params.isTie)
+		startChar = params.anchor1.parent.abcelem.startChar - 1
+	var endChar = -1
+	if (params.anchor2 && !params.isTie)
+		endChar = params.anchor2.parent.abcelem.endChar + 1
+
+	selectables.wrapSvgEl({ el_type: "slur", startChar: startChar, endChar: endChar }, el);
 	return [el];
 }
 

package/src/write/engraver-controller.js

@@ -40,6 +40,7 @@ var EngraverController = function (paper, params) {
 	this.responsive = params.responsive;
 	this.space = 3 * spacing.SPACE;
 	this.initialClef = params.initialClef;
+	this.expandToWidest = !!params.expandToWidest;
 	this.scale = params.scale ? parseFloat(params.scale) : 0;
 	this.classes = new Classes({ shouldAddClasses: params.add_classes });
 	if (!(this.scale > 0.1))
@@ -64,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)
@@ -122,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);
@@ -169,6 +173,7 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
 		} else
 			needNewSection = true;
 	}
+	this.jazzchords = origJazzChords
 	return ret;
 };
 
@@ -177,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, {
@@ -186,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);
@@ -205,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;
@@ -232,35 +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);
+	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.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/interactive/selection.js

@@ -127,6 +127,8 @@ function keyboardSelection(ev) {
 }
 
 function findElementInHistory(selectables, el) {
+	if (!el)
+		return -1;
 	for (var i = 0; i < selectables.length; i++) {
 		if (el.dataset.index === selectables[i].svgEl.dataset.index)
 			return i;
@@ -195,9 +197,13 @@ function getBestMatchCoordinates(dim, ev, scale) {
 
 function getTarget(target) {
 	// This searches up the dom for the first item containing the attribute "selectable", or stopping at the SVG.
+	if (!target)
+		return null;
 	if (target.tagName === "svg")
 		return target;
 
+	if (!target.getAttribute)
+		return null;	
 	var found = target.getAttribute("selectable");
 	while (!found) {
 		if (!target.parentElement)

package/src/write/layout/layout.js

@@ -3,7 +3,7 @@ var setUpperAndLowerElements = require('./set-upper-and-lower-elements');
 var layoutStaffGroup = require('./staff-group');
 var getLeftEdgeOfStaff = require('./get-left-edge-of-staff');
 
-var layout = function (renderer, abctune, width, space) {
+var layout = function (renderer, abctune, width, space, expandToWidest) {
 	var i;
 	var abcLine;
 	// Adjust the x-coordinates to their absolute positions
@@ -11,8 +11,14 @@ var layout = function (renderer, abctune, width, space) {
 	for (i = 0; i < abctune.lines.length; i++) {
 		abcLine = abctune.lines[i];
 		if (abcLine.staff) {
-			setXSpacing(renderer, width, space, abcLine.staffGroup, abctune.formatting, i === abctune.lines.length - 1, false);
-			if (abcLine.staffGroup.w > maxWidth) maxWidth = abcLine.staffGroup.w;
+			// console.log("=== line", i)
+			var thisWidth = setXSpacing(renderer, maxWidth, space, abcLine.staffGroup, abctune.formatting, i === abctune.lines.length - 1, false);
+			// console.log(thisWidth, maxWidth)
+			if (Math.round(thisWidth) > Math.round(maxWidth)) { // to take care of floating point weirdness
+				maxWidth = thisWidth
+				if (expandToWidest)
+					i = -1 // do the calculations over with the new width
+			}
 		}
 	}
 
@@ -41,15 +47,39 @@ var setXSpacing = function (renderer, width, space, staffGroup, formatting, isLa
 	var leftEdge = getLeftEdgeOfStaff(renderer, staffGroup.getTextSize, staffGroup.voices, staffGroup.brace, staffGroup.bracket);
 	var newspace = space;
 	for (var it = 0; it < 8; it++) { // TODO-PER: shouldn't need multiple passes, but each pass gets it closer to the right spacing. (Only affects long lines: normal lines break out of this loop quickly.)
+		// console.log("iteration", it)
+		// dumpGroup("before", staffGroup)
 		var ret = layoutStaffGroup(newspace, renderer, debug, staffGroup, leftEdge);
+		// dumpGroup("after",staffGroup)
 		newspace = calcHorizontalSpacing(isLastLine, formatting.stretchlast, width + renderer.padding.left, staffGroup.w, newspace, ret.spacingUnits, ret.minSpace, renderer.padding.left + renderer.padding.right);
 		if (debug)
 			console.log("setXSpace", it, staffGroup.w, newspace, staffGroup.minspace);
 		if (newspace === null) break;
 	}
 	centerWholeRests(staffGroup.voices);
+	return staffGroup.w - leftEdge
 };
 
+// function dumpGroup(label, staffGroup) {
+// 	var output = {
+// 		line: staffGroup.line,
+// 		w: staffGroup.w,
+// 		voice: {
+// 			i: staffGroup.voices[0].i,
+// 			minx: staffGroup.voices[0].minx,
+// 			nextx: staffGroup.voices[0].nextx,
+// 			spacingduration: staffGroup.voices[0].spacingduration,
+// 			w: staffGroup.voices[0].w,
+// 			children: [],
+// 		}
+// 	}
+// 	for (var i = 0; i < staffGroup.voices[0].children.length; i++) {
+// 		var child = staffGroup.voices[0].children[i]
+// 		output.voice.children.push({ fixedW: child.fixed.w, w: child.w, x: child.x, type: child.type })
+// 	}
+// 	console.log(label,output)
+// }
+
 function calcHorizontalSpacing(isLastLine, stretchLast, targetWidth, lineWidth, spacing, spacingUnits, minSpace, padding) {
 	if (isLastLine) {
 		if (stretchLast === undefined) {

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