abcjs 6.3.0 → 6.4.0

package/src/synth/create-synth.js

@@ -26,13 +26,15 @@ function CreateSynth() {
 	self.audioBuffers = []; // cache of the buffers so starting play can be fast.
 	self.duration = undefined; // the duration of the tune in seconds.
 	self.isRunning = false; // whether there is currently a sound buffer running.
-//	self.options = undefined
+	self.options = undefined
+	self.pickupLength = 0
 
 	// Load and cache all needed sounds
 	self.init = function(options) {
 		if (!options)
 			options = {};
-//		self.options = options
+		if (options.options)
+			self.options = options.options
 		registerAudioContext(options.audioContext); // This works no matter what - if there is already an ac it is a nop; if the context is not passed in, then it creates one.
 		var startTime = activeAudioContext().currentTime;
 		self.debugCallback = options.debugCallback;
@@ -115,6 +117,7 @@ function CreateSynth() {
 			var meter = options.visualObj.getMeterFraction();
 			if (meter.den)
 				self.meterSize = options.visualObj.getMeterFraction().num / options.visualObj.getMeterFraction().den;
+			self.pickupLength = options.visualObj.getPickupLength()
 		} else if (options.sequence)
 			self.flattened = options.sequence;
 		else
@@ -124,6 +127,7 @@ function CreateSynth() {
 		self.sequenceCallback = params.sequenceCallback;
 		self.callbackContext = params.callbackContext;
 		self.onEnded = params.onEnded;
+		self.meterFraction = options.visualObj.getMeterFraction();
 
 		var allNotes = {};
 		var cached = [];
@@ -136,18 +140,19 @@ function CreateSynth() {
 				if (event.pitch !== undefined) {
 					var pitchNumber = event.pitch;
 					var noteName = pitchToNoteName[pitchNumber];
+					var inst = event.instrument !== undefined ? instrumentIndexToName[event.instrument] : currentInstrument
 					if (noteName) {
-						if (!allNotes[currentInstrument])
-							allNotes[currentInstrument] = {};
-						if (!soundsCache[currentInstrument] || !soundsCache[currentInstrument][noteName])
-							allNotes[currentInstrument][noteName] = true;
+						if (!allNotes[inst])
+							allNotes[inst] = {};
+						if (!soundsCache[inst] || !soundsCache[inst][noteName])
+							allNotes[inst][noteName] = true;
 						else {
-							var label2 = currentInstrument+":"+noteName
+							var label2 = inst+":"+noteName
 							if (cached.indexOf(label2) < 0)
 								cached.push(label2);
 						}
 					} else {
-						var label = currentInstrument+":"+noteName
+						var label = inst+":"+noteName
 						console.log("Can't find note: ", pitchNumber, label);
 						if (errorNotes.indexOf(label) < 0)
 							errorNotes.push(label)
@@ -309,8 +314,10 @@ function CreateSynth() {
 			self.stop();
 
 			var noteMapTracks = createNoteMap(self.flattened);
-			// if (self.options.swing)
-			// 	addSwing(noteMapTracks, self.options.swing, self.beatsPerMeasure)
+
+			if (self.options.swing)
+				addSwing(noteMapTracks, self.options.swing, self.meterFraction, self.pickupLength)
+
 			if (self.sequenceCallback)
 				self.sequenceCallback(noteMapTracks, self.callbackContext);
 
@@ -545,38 +552,80 @@ function CreateSynth() {
 		}
 	};
 
-	// // this is a first attempt at adding a little bit of swing to the output, but the algorithm isn't correct.
-	// function addSwing(noteMapTracks, swing, beatsPerMeasure) {
-	// 	console.log("addSwing", noteMapTracks, swing, beatsPerMeasure)
-	// 	// Swing should be between -0.9 and 0.9. Make sure the input is between them.
-	// 	// Then that is the percentage to add to the first beat, so a negative number moves the second beat earlier.
-	// 	// A value of zero is the same as no swing at all.
-	// 	// This only works when there are an even number of beats in a measure.
-	// 	if (beatsPerMeasure % 2 !== 0)
-	// 		return;
-	// 	swing = parseFloat(swing)
-	// 	if (isNaN(swing))
-	// 		return
-	// 	if (swing < -0.9)
-	// 		swing = -0.9
-	// 	if (swing > 0.9)
-	// 		swing = 0.9
-	// 	var beatLength = (1 / beatsPerMeasure)*2
-	// 	swing = beatLength * swing
-	// 	for (var t = 0; t < noteMapTracks.length; t++) {
-	// 		var track = noteMapTracks[t];
-	// 		for (var i = 0; i < track.length; i++) {
-	// 			var event = track[i];
-	// 			if (event.start % beatLength) {
-	// 				// This is the off beat
-	// 				event.start += swing;
-	// 			} else {
-	// 				// This is the beat
-	// 				event.end += swing;
-	// 			}
-	// 		}
-	// 	}
-	// }
+	function addSwing(noteMapTracks, swing, meterFraction, pickupLength) {
+
+		// we can only swing in X/4 and X/8 meters.
+		if (meterFraction.den != 4 && meterFraction.den != 8)
+			return;
+
+		swing = parseFloat(swing);
+
+		// 50 (or less) is no swing, 
+		if (isNaN(swing) || swing <= 50)
+			return;
+
+		// 66 is triplet swing 2:1, and 
+		// 60 is swing with a ratio of 3:2. 
+		// 75 is the maximum swing where the first eight is played as a dotted eight and the second as a sixteenth. 
+		if (swing > 75)
+			swing = 75;
+
+		// convert the swing percentage to a percentage of increase for the first half of the beat
+		swing = swing/50 - 1;
+
+		// The volume of the swung notes is increased by this factor
+		// could be also in the settings. Try out values such 0.1, 0.2
+		var volumeIncrease = 0.0;
+
+		// the beatLength in X/8 meters
+		var beatLength = 0.25; 
+
+		// in X/8 meters the 16s swing so the beatLength is halved
+		if (meterFraction.den === 8) 
+			beatLength = beatLength/2; 
+
+		// duration of a half beat
+		var halfbeatLength = beatLength/2;
+
+		// the extra duration of the first swung notes and the delay of the second notes
+		var swingDuration = halfbeatLength * swing;
+
+		for (var t = 0; t < noteMapTracks.length; t++) {
+			var track = noteMapTracks[t];
+			for (var i = 0; i < track.length; i++) {
+				var event = track[i];
+				if (
+					// is halfbeat
+					(event.start-pickupLength) % halfbeatLength == 0 && (event.start-pickupLength) % beatLength != 0 
+					&& (
+						// the previous note is on the beat or before OR there is no previous note 
+						i == 0 
+						|| track[i-1].start <= track[i].start - halfbeatLength
+					)
+					&& (
+						// the next note is on the beat or after OR there is no next note
+						i == track.length - 1 
+						|| track[i+1].start >= track[i].start + halfbeatLength
+					)
+				) {
+					var oldEventStart = event.start;
+
+					event.start += swingDuration;
+
+					// Increase volume of swung notes
+					event.volume *= 1 + volumeIncrease;
+
+					// if there is a previous note ending at the start of this note, extend its end
+					// and decrease its volume
+					if (i > 0 && track[i-1].end == oldEventStart) {
+						track[i-1].end = event.start;
+						track[i-1].volume *= 1 - volumeIncrease;
+					}
+				}
+			}
+		}
+	}
+	
 }
 
 module.exports = CreateSynth;

package/src/test/abc_parser_lint.js

@@ -556,6 +556,7 @@ var ParserLint = function() {
 			subtitlespace: { type: "number", optional: true },
 			sysstaffsep: { type: "number", optional: true },
 			systemsep: { type: "number", optional: true },
+			stafftopmargin: { type: "number", optional: true },
 			tabgracefont: fontType,
 			tablabelfont: fontType,
 			tabnumberfont: fontType,

package/src/write/creation/abstract-engraver.js

@@ -831,7 +831,10 @@ AbstractEngraver.prototype.createNote = function (elem, nostem, isSingleLineStaf
 	}
 
 	if (elem.decoration) {
-		this.decoration.createDecoration(voice, elem.decoration, abselem.top, (notehead) ? notehead.w : 0, abselem, roomtaken, dir, abselem.bottom, elem.positioning, this.hasVocals, this.accentAbove);
+		// TODO-PER: nostem is true if this is beamed. In that case we don't know where to place the decoration yet so just make a guess. This should be refactored to not place decorations until after the beams are determined.
+		// This should probably be combined with moveDecorations()
+		var bottom = nostem ? Math.min(-3, abselem.bottom - 6) : abselem.bottom
+		this.decoration.createDecoration(voice, elem.decoration, abselem.top, (notehead) ? notehead.w : 0, abselem, roomtaken, dir, bottom, elem.positioning, this.hasVocals, this.accentAbove);
 	}
 
 	if (elem.barNumber) {

package/src/write/creation/decoration.js

@@ -160,7 +160,7 @@ var stackedDecoration = function (decoration, width, abselem, yPos, positioning,
 		var height = glyphs.symbolHeightInPitches(symbol) + 1; // adding a little padding so nothing touches.
 		var y = getPlacement(placement);
 		y = (placement === 'above') ? y + height / 2 : y - height / 2;// Center the element vertically.
-		abselem.addFixedX(new RelativeElement(symbol, deltaX, glyphs.getSymbolWidth(symbol), y, { klass: 'ornament', thickness: glyphs.symbolHeightInPitches(symbol) }));
+		abselem.addFixedX(new RelativeElement(symbol, deltaX, glyphs.getSymbolWidth(symbol), y, { klass: 'ornament', thickness: glyphs.symbolHeightInPitches(symbol), position: placement }));
 
 		incrementPlacement(placement, height);
 	}
@@ -355,7 +355,8 @@ Decoration.prototype.createDecoration = function (voice, decoration, pitch, widt
 	// yPos is an object containing 'above' and 'below'. That is the placement of the next symbol on either side.
 
 	yPos.above = Math.max(yPos.above, this.minTop);
-	var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, this.minBottom, accentAbove);
+	yPos.below = Math.min(yPos.below, minPitch);
+	var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, minPitch, accentAbove);
 	//if (hasOne) {
 		//			abselem.top = Math.max(yPos.above + 3, abselem.top); // TODO-PER: Not sure why we need this fudge factor.
 	//}

package/src/write/creation/elements/tie-element.js

@@ -177,6 +177,29 @@ TieElem.prototype.calcSlurY = function () {
 		} else
 			this.endY = this.above && beamInterferes ? this.anchor2.highestVert : this.anchor2.pitch;
 
+		if (this.anchor1.scalex === 1) { // Need a way to tell if this is a grace note - if so then keep the slur as close as possible. TODO-PER-HACK: this should be more declaratively determined.
+			var hasBeam1 = !!this.anchor1.parent.beam
+			var hasBeam2 = !!this.anchor2.parent.beam
+			if (hasBeam1) {
+				var isLastInBeam = this.anchor1.parent === this.anchor1.parent.beam.elems[this.anchor1.parent.beam.elems.length-1]
+				if (!isLastInBeam) {
+						if (this.above)
+						this.startY = this.anchor1.parent.fixed.t
+					else
+						this.startY = this.anchor1.parent.fixed.b
+				}
+			}
+
+			if (hasBeam2) {
+				var isFirstInBeam = this.anchor2.parent === this.anchor2.parent.beam.elems[0]
+				if (!isFirstInBeam) {
+					if (this.above)
+						this.endY = this.anchor2.parent.fixed.t
+					else
+						this.endY = this.anchor2.parent.fixed.b
+				}
+			}
+		}
 	} else if (this.anchor1) {
 		this.startY = this.endY = this.anchor1.pitch;
 	} else if (this.anchor2) {

package/src/write/draw/draw.js

@@ -20,7 +20,7 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 		var abcLine = abcTune.lines[line];
 		if (abcLine.staff) {
 			if (classes.shouldAddClasses)
-				groupClasses.klass = "abcjs-staff l" + classes.lineNumber
+				groupClasses.klass = "abcjs-staff-wrapper abcjs-l" + classes.lineNumber
 			renderer.paper.openGroup(groupClasses)
 			if (abcLine.vskip) {
 				renderer.moveY(abcLine.vskip);

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 });
@@ -131,7 +134,7 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
 	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;
@@ -193,6 +196,7 @@ 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
 	});
@@ -254,7 +258,7 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 	//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) {
@@ -301,7 +305,7 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 	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);
+	  this.svgs = splitSvgIntoLines(this.renderer, div, abcTune.metaText.title, this.responsive, scale);
 	} else {
 	  this.svgs = [this.renderer.paper.svg];
 	}
@@ -310,7 +314,7 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 	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
@@ -335,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/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) {