abcjs 6.2.3 → 6.4.0

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-wrapper abcjs-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

@@ -17,6 +17,7 @@ var GetFontAndAttr = require('./helpers/get-font-and-attr');
 var GetTextSize = require('./helpers/get-text-size');
 var draw = require('./draw/draw');
 var tablatures = require('../api/abc_tablatures');
+var findSelectableElement = require('./interactive/find-selectable-element');
 
 /**
  * @class
@@ -32,6 +33,7 @@ var tablatures = require('../api/abc_tablatures');
  */
 var EngraverController = function (paper, params) {
 	params = params || {};
+	this.findSelectableElement = findSelectableElement;
 	this.oneSvgPerLine = params.oneSvgPerLine;
 	this.selectionColor = params.selectionColor;
 	this.dragColor = params.dragColor ? params.dragColor : params.selectionColor;
@@ -40,6 +42,7 @@ var EngraverController = function (paper, params) {
 	this.responsive = params.responsive;
 	this.space = 3 * spacing.SPACE;
 	this.initialClef = params.initialClef;
+	this.timeBasedLayout = params.timeBasedLayout;
 	this.expandToWidest = !!params.expandToWidest;
 	this.scale = params.scale ? parseFloat(params.scale) : 0;
 	this.classes = new Classes({ shouldAddClasses: params.add_classes });
@@ -65,6 +68,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,12 +128,13 @@ 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);
 	// layout() sets the x-coordinate of the abcTune element here:
 	// abcTune.lines[0].staffGroup.voices[0].children[0].x
-	layout(this.renderer, abcTune, 0, this.space);
+	layout(this.renderer, abcTune, 0, this.space, this.timeBasedLayout);
 
 	var ret = [];
 	var section;
@@ -170,6 +176,7 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
 		} else
 			needNewSection = true;
 	}
+	this.jazzchords = origJazzChords
 	return ret;
 };
 
@@ -178,6 +185,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 +196,8 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
 		percmap: abcTune.formatting.percmap,
 		initialClef: this.initialClef,
 		jazzchords: this.jazzchords,
+		timeBasedLayout: this.timeBasedLayout,
+		accentAbove: this.accentAbove,
 		germanAlphabet: this.germanAlphabet
 	});
 	this.engraver.setStemHeight(this.renderer.spacing.stemHeight);
@@ -206,7 +217,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,43 +244,77 @@ 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);
-
+	var maxWidth = layout(this.renderer, abcTune, this.width, this.space, this.expandToWidest, this.timeBasedLayout);
+  
 	//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, scale);
 	} 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) {
+function splitSvgIntoLines(renderer, output, title, responsive, scale) {
 	// Each line is a top level <g> in the svg. To split it into separate
 	// svgs iterate through each of those and put them in a new svg. Since
 	// they are placed absolutely, the viewBox needs to be manipulated to
@@ -294,7 +339,7 @@ function splitSvgIntoLines(renderer, output, title, responsive) {
 		var wrapper = document.createElement("div");
 		var divStyles = "overflow: hidden;"
 		if (responsive !== 'resize')
-			divStyles += "height:" + height + "px;"
+			divStyles += "height:" + (height * scale) + "px;"
 		wrapper.setAttribute("style", divStyles)
 		var svg = duplicateSvg(source)
 		var fullTitle = "Sheet Music for \"" + title + "\" section " + (i + 1)

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/create-analysis.js

@@ -0,0 +1,50 @@
+function findNumber(klass, match, target, name) {
+	if (klass.indexOf(match) === 0) {
+		var value = klass.replace(match, '');
+		var num = parseInt(value, 10);
+		if ('' + num === value)
+			target[name] = num;
+	}
+}
+
+function createAnalysis(target, ev) {
+	var classes = [];
+	if (target.absEl.elemset) {
+		var classObj = {};
+		for (var j = 0; j < target.absEl.elemset.length; j++) {
+			var es = target.absEl.elemset[j];
+			if (es) {
+				var klass = es.getAttribute("class").split(' ');
+				for (var k = 0; k < klass.length; k++)
+					classObj[klass[k]] = true;
+			}
+		}
+		for (var kk = 0; kk < Object.keys(classObj).length; kk++)
+			classes.push(Object.keys(classObj)[kk]);
+	}
+	var analysis = {};
+	for (var ii = 0; ii < classes.length; ii++) {
+		findNumber(classes[ii], "abcjs-v", analysis, "voice");
+		findNumber(classes[ii], "abcjs-l", analysis, "line");
+		findNumber(classes[ii], "abcjs-m", analysis, "measure");
+	}
+	if (target.staffPos)
+		analysis.staffPos = target.staffPos;
+	var closest = ev.target;
+	while (closest && closest.dataset && !closest.dataset.name && closest.tagName.toLowerCase() !== 'svg')
+		closest = closest.parentNode;
+	var parent = ev.target;
+	while (parent && parent.dataset && !parent.dataset.index && parent.tagName.toLowerCase() !== 'svg')
+		parent = parent.parentNode;
+	if (parent && parent.dataset) {
+		analysis.name = parent.dataset.name;
+		analysis.clickedName = closest.dataset.name;
+		analysis.parentClasses = parent.classList;
+	}
+	if (closest && closest.classList)
+		analysis.clickedClasses = closest.classList;
+	analysis.selectableElement = target.svgEl;
+	return {classes: classes, analysis: analysis}
+}
+
+module.exports = createAnalysis;

package/src/write/interactive/find-selectable-element.js

@@ -0,0 +1,24 @@
+var createAnalysis = require('./create-analysis');
+
+function findSelectableElement(event) {
+	var selectable = event
+	while (selectable && selectable.attributes && selectable.tagName.toLowerCase() !== 'svg' && !selectable.attributes.selectable) {
+		selectable = selectable.parentNode
+	}
+	if (selectable && selectable.attributes && selectable.attributes.selectable) {
+		var index = selectable.attributes['data-index'].nodeValue
+		if (index) {
+			index = parseInt(index, 10)
+			if (index >= 0 && index < this.selectables.length) {
+				var element = this.selectables[index]
+				var ret = createAnalysis(element, event)
+				ret.index = index
+				ret.element = element
+				return ret
+			}
+		}
+	}
+	return null
+}
+
+module.exports = findSelectableElement;

package/src/write/interactive/selection.js

@@ -1,4 +1,5 @@
 var spacing = require('../helpers/spacing');
+var createAnalysis = require('./create-analysis');
 
 function setupSelection(engraver, svgs) {
 	engraver.rangeHighlight = rangeHighlight;
@@ -339,58 +340,17 @@ function setSelection(dragIndex) {
 	}
 }
 
+
 function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
-	var classes = [];
-	if (target.absEl.elemset) {
-		var classObj = {};
-		for (var j = 0; j < target.absEl.elemset.length; j++) {
-			var es = target.absEl.elemset[j];
-			if (es) {
-				var klass = es.getAttribute("class").split(' ');
-				for (var k = 0; k < klass.length; k++)
-					classObj[klass[k]] = true;
-			}
-		}
-		for (var kk = 0; kk < Object.keys(classObj).length; kk++)
-			classes.push(Object.keys(classObj)[kk]);
-	}
-	var analysis = {};
-	for (var ii = 0; ii < classes.length; ii++) {
-		findNumber(classes[ii], "abcjs-v", analysis, "voice");
-		findNumber(classes[ii], "abcjs-l", analysis, "line");
-		findNumber(classes[ii], "abcjs-m", analysis, "measure");
-	}
-	if (target.staffPos)
-		analysis.staffPos = target.staffPos;
-	var closest = ev.target;
-	while (closest && closest.dataset && !closest.dataset.name && closest.tagName.toLowerCase() !== 'svg')
-		closest = closest.parentNode;
-	var parent = ev.target;
-	while (parent && parent.dataset && !parent.dataset.index && parent.tagName.toLowerCase() !== 'svg')
-		parent = parent.parentNode;
-	if (parent && parent.dataset) {
-		analysis.name = parent.dataset.name;
-		analysis.clickedName = closest.dataset.name;
-		analysis.parentClasses = parent.classList;
-	}
-	if (closest && closest.classList)
-		analysis.clickedClasses = closest.classList;
-	analysis.selectableElement = target.svgEl;
+	var ret = createAnalysis(target, ev)
+	var classes = ret.classes
+	var analysis = ret.analysis
 
 	for (var i = 0; i < this.listeners.length; i++) {
 		this.listeners[i](target.absEl.abcelem, target.absEl.tuneNumber, classes.join(' '), analysis, { step: dragStep, max: dragMax, index: dragIndex, setSelection: setSelection.bind(this) }, ev);
 	}
 }
 
-function findNumber(klass, match, target, name) {
-	if (klass.indexOf(match) === 0) {
-		var value = klass.replace(match, '');
-		var num = parseInt(value, 10);
-		if ('' + num === value)
-			target[name] = num;
-	}
-}
-
 function clearSelection() {
 	for (var i = 0; i < this.selected.length; i++) {
 		this.selected[i].unhighlight(undefined, this.renderer.foregroundColor);

package/src/write/layout/layout-in-grid.js

@@ -0,0 +1,83 @@
+var getLeftEdgeOfStaff = require('./get-left-edge-of-staff');
+
+function layoutInGrid(renderer, staffGroup, timeBasedLayout) {
+	var leftEdge = getLeftEdgeOfStaff(renderer, staffGroup.getTextSize, staffGroup.voices, staffGroup.brace, staffGroup.bracket);
+	var ret = getTotalDuration(staffGroup, timeBasedLayout.minPadding)
+	var totalDuration = ret.totalDuration
+	var minSpacing = ret.minSpacing
+	var totalWidth = minSpacing * totalDuration
+	if (timeBasedLayout.minWidth)
+		totalWidth = Math.max(totalWidth, timeBasedLayout.minWidth)
+	var leftAlignPadding = timeBasedLayout.minPadding ? timeBasedLayout.minPadding/2 : 2 // If the padding isn't specified still give it some
+
+	staffGroup.startx = leftEdge
+	staffGroup.w = totalWidth + leftEdge
+	for (var i = 0; i < staffGroup.voices.length; i++) {
+		var voice = staffGroup.voices[i]
+		voice.startx = leftEdge
+		voice.w = totalWidth + leftEdge
+
+		var x = leftEdge
+		var afterFixedLeft = false
+		var durationUnit = 0
+		for (var j = 0; j < voice.children.length; j++) {
+			var child = voice.children[j]
+			if (!afterFixedLeft) {
+				if (child.duration !== 0) {
+					// We got to the first music element on the line
+					afterFixedLeft = true
+					durationUnit = (totalWidth + leftEdge - x) / totalDuration
+					staffGroup.gridStart = x
+				} else {
+					// We are still doing the preliminary stuff - clef, time sig, etc.
+					child.x = x
+					x += child.w + child.minspacing
+				}
+			}
+			if (afterFixedLeft) {
+				if (timeBasedLayout.align === 'center')
+					child.x = x + (child.duration * durationUnit) / 2 - child.w / 2
+				else {
+					// left align with padding - but no padding for barlines, they should be right aligned.
+					// TODO-PER: it looks better to move bar lines one pixel to right. Not sure why.
+					if (child.duration === 0) {
+						child.x = x + 1 - child.w
+					} else {
+						// child.extraw has the width of the accidentals - push the note to the right to take that into consideration. It will be 0 if there is nothing to the left.
+						child.x = x + leftAlignPadding - child.extraw
+					}
+				}
+				x += child.duration * durationUnit
+			}
+			for (var k = 0; k < child.children.length; k++) {
+				var grandchild = child.children[k]
+				// some elements don't have a dx - Tempo, for instance
+				var dx = grandchild.dx ? grandchild.dx : 0
+				grandchild.x = child.x + dx
+			}
+		}
+		staffGroup.gridEnd = x
+	}
+	return totalWidth
+}
+
+function getTotalDuration(staffGroup, timeBasedLayout) {
+	var maxSpacing = 0
+	var maxCount = 0
+	for (var i = 0; i < staffGroup.voices.length; i++) {
+		var count = 0
+		var voice = staffGroup.voices[i]
+		for (var j = 0; j < voice.children.length; j++) {
+			var element = voice.children[j]
+			count += element.duration
+			if (element.duration) {
+				var width = (element.w+timeBasedLayout) / element.duration
+				maxSpacing = Math.max(maxSpacing, width)
+			}
+		}
+		maxCount = Math.max(maxCount, count)
+	}
+	return { totalDuration: maxCount, minSpacing: maxSpacing}
+}
+
+module.exports = layoutInGrid;

package/src/write/layout/layout.js

@@ -2,8 +2,12 @@ var layoutVoice = require('./voice');
 var setUpperAndLowerElements = require('./set-upper-and-lower-elements');
 var layoutStaffGroup = require('./staff-group');
 var getLeftEdgeOfStaff = require('./get-left-edge-of-staff');
+var layoutInGrid = require('./layout-in-grid');
 
-var layout = function (renderer, abctune, width, space, expandToWidest) {
+// This sets the "x" attribute on all the children in abctune.lines
+// It also sets the "w" and "startx" attributes on "voices"
+// It also sets the "w" and "startx" attributes on "voices.children"
+var layout = function (renderer, abctune, width, space, expandToWidest, timeBasedLayout) {
 	var i;
 	var abcLine;
 	// Adjust the x-coordinates to their absolute positions
@@ -12,7 +16,11 @@ var layout = function (renderer, abctune, width, space, expandToWidest) {
 		abcLine = abctune.lines[i];
 		if (abcLine.staff) {
 			// console.log("=== line", i)
-			var thisWidth = setXSpacing(renderer, maxWidth, space, abcLine.staffGroup, abctune.formatting, i === abctune.lines.length - 1, false);
+			var thisWidth;
+			if (timeBasedLayout !== undefined)
+				thisWidth = layoutInGrid(renderer, abcLine.staffGroup, timeBasedLayout);
+			else
+				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
@@ -46,39 +54,36 @@ var layout = function (renderer, abctune, width, space, expandToWidest) {
 var setXSpacing = function (renderer, width, space, staffGroup, formatting, isLastLine, debug) {
 	var leftEdge = getLeftEdgeOfStaff(renderer, staffGroup.getTextSize, staffGroup.voices, staffGroup.brace, staffGroup.bracket);
 	var newspace = space;
+	//dumpGroup("before", staffGroup)
 	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)
+		var ret = layoutStaffGroup(newspace, renderer.minPadding, debug, staffGroup, leftEdge);
 		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;
 	}
+	//dumpGroup("after",staffGroup)
 	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 replacer(key, value) {
+	// Filtering out properties
+	if (key === 'parent') {
+		return 'parent';
+	}
+	if (key === 'beam') {
+		return 'beam';
+	}
+	return value;
+}
+
+function dumpGroup(label, staffGroup) {
+	console.log("=================== " + label + " =========================")
+	console.log(staffGroup)
+	console.log(JSON.stringify(staffGroup, replacer, "\t"))
+}
 
 function calcHorizontalSpacing(isLastLine, stretchLast, targetWidth, lineWidth, spacing, spacingUnits, minSpace, padding) {
 	if (isLastLine) {

package/src/write/layout/set-upper-and-lower-elements.js

@@ -87,6 +87,8 @@ var setUpperAndLowerElements = function (renderer, staffGroup) {
 			if (addedSpace > 0)
 				staff.top += addedSpace;
 		}
+		staff.top += renderer.spacing.staffTopMargin / spacing.STEP
+
 		lastStaffBottom = 2 - staff.bottom; // the staff starts at position 2 and the bottom variable is negative. Therefore to find out how large the bottom is, we reverse the sign of the bottom, and add the 2 in.
 
 		// Now we need a little margin on the top, so we'll just throw that in.