abcjs 6.1.8 → 6.2.0

package/src/write/{selection.js → interactive/selection.js}

@@ -1,4 +1,4 @@
-var spacing = require('./abc_spacing');
+var spacing = require('../helpers/spacing');
 
 function setupSelection(engraver, svgs) {
 	engraver.rangeHighlight = rangeHighlight;
@@ -15,9 +15,9 @@ function setupSelection(engraver, svgs) {
 		}
 	}
 	for (var i = 0; i < svgs.length; i++) {
-		svgs[i].addEventListener('touchstart', mouseDown.bind(engraver));
-		svgs[i].addEventListener('touchmove', mouseMove.bind(engraver));
-		svgs[i].addEventListener('touchend', mouseUp.bind(engraver));
+		svgs[i].addEventListener('touchstart', mouseDown.bind(engraver), { passive: true });
+		svgs[i].addEventListener('touchmove', mouseMove.bind(engraver), { passive: true });
+		svgs[i].addEventListener('touchend', mouseUp.bind(engraver), { passive: true });
 		svgs[i].addEventListener('mousedown', mouseDown.bind(engraver));
 		svgs[i].addEventListener('mousemove', mouseMove.bind(engraver));
 		svgs[i].addEventListener('mouseup', mouseUp.bind(engraver));
@@ -56,7 +56,7 @@ function getCoord(ev) {
 	y = y * scaleY;
 	//console.log(x, y)
 
-	return [x, y+yOffset];
+	return [x, y + yOffset];
 }
 
 function elementFocused(ev) {
@@ -69,7 +69,7 @@ function elementFocused(ev) {
 
 function keyboardDown(ev) {
 	// Swallow the up and down arrow events - they will be used for dragging with the keyboard
-	switch(ev.keyCode) {
+	switch (ev.keyCode) {
 		case 38:
 		case 40:
 			ev.preventDefault();
@@ -80,7 +80,7 @@ function keyboardSelection(ev) {
 	// "this" is the EngraverController because of the bind(this) when setting the event listener.
 	var handled = false;
 	var index = ev.target.dataset.index;
-	switch(ev.keyCode) {
+	switch (ev.keyCode) {
 		case 13:
 		case 32:
 			handled = true;
@@ -163,7 +163,7 @@ function findElementByCoord(self, x, y) {
 			// figure out the distance to this element.
 			var dx = Math.abs(x - el.dim.left) > Math.abs(x - el.dim.right) ? Math.abs(x - el.dim.right) : Math.abs(x - el.dim.left);
 			var dy = Math.abs(y - el.dim.top) > Math.abs(y - el.dim.bottom) ? Math.abs(y - el.dim.bottom) : Math.abs(y - el.dim.top);
-			var hypotenuse = Math.sqrt(dx*dx + dy*dy);
+			var hypotenuse = Math.sqrt(dx * dx + dy * dy);
 			if (hypotenuse < minDistance) {
 				minDistance = hypotenuse;
 				closestIndex = i;
@@ -177,20 +177,20 @@ function getBestMatchCoordinates(dim, ev, scale) {
 	// Different browsers have conflicting meanings for the coordinates that are returned.
 	// If the item we want is clicked on directly, then we will just see what is the best match.
 	// This seems like less of a hack than browser sniffing.
-	if (dim.x <= ev.offsetX && dim.x+dim.width >= ev.offsetX &&
-		dim.y <= ev.offsetY && dim.y+dim.height >= ev.offsetY)
-		return [ ev.offsetX, ev.offsetY];
+	if (dim.x <= ev.offsetX && dim.x + dim.width >= ev.offsetX &&
+		dim.y <= ev.offsetY && dim.y + dim.height >= ev.offsetY)
+		return [ev.offsetX, ev.offsetY];
 	// Firefox returns a weird value for offset, but layer is correct.
 	// Safari and Chrome return the correct value for offset, but layer is multiplied by the scale (that is, if it were rendered with { scale: 2 })
 	// For instance (if scale is 2):
 	// Firefox: { offsetY: 5, layerY: 335 }
 	// Others: {offsetY: 335, layerY: 670} (there could be a little rounding, so the number might not be exactly 2x)
 	// So, if layerY/scale is approx. offsetY, then use offsetY, otherwise use layerY
-	var epsilon = Math.abs(ev.layerY/scale - ev.offsetY);
+	var epsilon = Math.abs(ev.layerY / scale - ev.offsetY);
 	if (epsilon < 3)
-		return [ ev.offsetX, ev.offsetY];
+		return [ev.offsetX, ev.offsetY];
 	else
-		return  [ ev.layerX, ev.layerY];
+		return [ev.layerX, ev.layerY];
 }
 
 function getTarget(target) {
@@ -202,7 +202,7 @@ function getTarget(target) {
 	while (!found) {
 		if (!target.parentElement)
 			found = true;
-		else {	
+		else {
 			target = target.parentElement;
 			if (target.tagName === "svg")
 				found = true;
@@ -290,7 +290,7 @@ function mouseMove(ev) {
 
 	var positioning = getMousePosition(this, _ev);
 
-	var yDist = Math.round((positioning.y - this.dragMouseStart.y)/spacing.STEP);
+	var yDist = Math.round((positioning.y - this.dragMouseStart.y) / spacing.STEP);
 	if (yDist !== this.dragYStep) {
 		this.dragYStep = yDist;
 		this.dragTarget.svgEl.setAttribute("transform", "translate(0," + (yDist * spacing.STEP) + ")");
@@ -329,7 +329,7 @@ function setSelection(dragIndex) {
 		this.dragTarget = this.selectables[dragIndex];
 		this.dragIndex = dragIndex;
 		this.dragMechanism = "keyboard";
-		mouseUp.bind(this)({target: this.dragTarget.svgEl});
+		mouseUp.bind(this)({ target: this.dragTarget.svgEl });
 	}
 }
 
@@ -368,8 +368,8 @@ function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
 	analysis.clickedClasses = closest.classList;
 	analysis.selectableElement = target.svgEl;
 
-	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);
+	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);
 	}
 }
 
@@ -377,32 +377,32 @@ function findNumber(klass, match, target, name) {
 	if (klass.indexOf(match) === 0) {
 		var value = klass.replace(match, '');
 		var num = parseInt(value, 10);
-		if (''+num === value)
+		if ('' + num === value)
 			target[name] = num;
 	}
 }
 
 function clearSelection() {
-	for (var i=0;i<this.selected.length;i++) {
+	for (var i = 0; i < this.selected.length; i++) {
 		this.selected[i].unhighlight(undefined, this.renderer.foregroundColor);
 	}
 	this.selected = [];
 }
 
-function rangeHighlight(start,end) {
+function rangeHighlight(start, end) {
 	clearSelection.bind(this)();
-	for (var line=0;line<this.staffgroups.length; line++) {
+	for (var line = 0; line < this.staffgroups.length; line++) {
 		var voices = this.staffgroups[line].voices;
-		for (var voice=0;voice<voices.length;voice++) {
+		for (var voice = 0; voice < voices.length; voice++) {
 			var elems = voices[voice].children;
-			for (var elem=0; elem<elems.length; elem++) {
+			for (var elem = 0; elem < elems.length; elem++) {
 				// Since the user can highlight more than an element, or part of an element, a hit is if any of the endpoints
 				// is inside the other range.
 				var elStart = elems[elem].abcelem.startChar;
 				var elEnd = elems[elem].abcelem.endChar;
-				if ((end>elStart && start<elEnd) || ((end===start) && end===elEnd)) {
+				if ((end > elStart && start < elEnd) || ((end === start) && end === elEnd)) {
 					//		if (elems[elem].abcelem.startChar>=start && elems[elem].abcelem.endChar<=end) {
-					this.selected[this.selected.length]=elems[elem];
+					this.selected[this.selected.length] = elems[elem];
 					elems[elem].highlight(undefined, this.selectionColor);
 				}
 			}

package/src/write/{unhighlight.js → interactive/unhighlight.js}

@@ -1,4 +1,4 @@
-var setClass = require('./set-class');
+var setClass = require('../helpers/set-class');
 
 var unhighlight = function (klass, color) {
 	if (klass === undefined)

package/src/write/layout/beam.js

@@ -1,8 +1,8 @@
-var RelativeElement = require('../abc_relative_element');
-var spacing = require('../abc_spacing');
-var getBarYAt = require('./getBarYAt');
+var RelativeElement = require('../creation/elements/relative-element');
+var spacing = require('../helpers/spacing');
+var getBarYAt = require('./get-bar-y-at');
 
-var layoutBeam = function(beam) {
+var layoutBeam = function (beam) {
 	if (beam.elems.length === 0 || beam.allrests) return;
 
 	var dy = calcDy(beam.stemsUp, beam.isgrace); // This is the width of the beam line.
@@ -28,14 +28,14 @@ var layoutBeam = function(beam) {
 	createStems(beam.elems, beam.stemsUp, beam.beams[0], dy, beam.mainNote);
 };
 
-var getDurlog = function(duration) {
+var getDurlog = function (duration) {
 	// TODO-PER: This is a hack to prevent a Chrome lockup. Duration should have been defined already,
 	// but there's definitely a case where it isn't. [Probably something to do with triplets.]
 	if (duration === undefined) {
 		return 0;
 	}
 	//        console.log("getDurlog: " + duration);
-	return Math.floor(Math.log(duration)/Math.log(2));
+	return Math.floor(Math.log(duration) / Math.log(2));
 };
 
 //
@@ -78,7 +78,7 @@ function calcXPos(asc, firstElement, lastElement) {
 	if (asc) startX += starthead.w - 0.6;
 	var endX = endhead.x;
 	endX += (asc) ? endhead.w : 0.6;
-	return [ startX, endX ];
+	return [startX, endX];
 }
 
 function calcYPos(average, numElements, stemHeight, asc, firstAveragePitch, lastAveragePitch, isFlat, minPitch, maxPitch, isGrace) {
@@ -101,7 +101,7 @@ function calcYPos(average, numElements, stemHeight, asc, firstAveragePitch, last
 		}
 	}
 
-	return [ startY, endY];
+	return [startY, endY];
 }
 
 function createStems(elems, asc, beam, dy, mainNote) {
@@ -168,11 +168,11 @@ function createAdditionalBeams(elems, asc, beam, isGrace, dy) {
 					durlog: durlog, single: true
 				};
 			}
-			if (i > 0 && elem.abcelem.beambr && elem.abcelem.beambr <= (index+1)) {
+			if (i > 0 && elem.abcelem.beambr && elem.abcelem.beambr <= (index + 1)) {
 				if (!auxBeams[index].split)
 					auxBeams[index].split = [auxBeams[index].x];
-				var xPos = calcXPos(asc, elems[i-1], elem);
-				if (auxBeams[index].split[auxBeams[index].split.length-1] >= xPos[0]) {
+				var xPos = calcXPos(asc, elems[i - 1], elem);
+				if (auxBeams[index].split[auxBeams[index].split.length - 1] >= xPos[0]) {
 					// the reduction in beams leaves a note unattached so create a small flag for it.
 					xPos[0] += elem.w;
 				}
@@ -195,9 +195,9 @@ function createAdditionalBeams(elems, asc, beam, isGrace, dy) {
 				var b = { startX: auxBeams[j].x, endX: auxBeamEndX, startY: auxBeams[j].y, endY: auxBeamEndY, dy: dy }
 				if (auxBeams[j].split !== undefined) {
 					var split = auxBeams[j].split;
-					if (b.endX <= split[split.length-1]) {
+					if (b.endX <= split[split.length - 1]) {
 						// the reduction in beams leaves the last note by itself, so create a little flag for it
-						split[split.length-1] -= elem.w;
+						split[split.length - 1] -= elem.w;
 					}
 					split.push(b.endX);
 					b.split = auxBeams[j].split;

package/src/write/layout/get-left-edge-of-staff.js

@@ -5,10 +5,10 @@ function getLeftEdgeOfStaff(renderer, getTextSize, voices, brace, bracket) {
 	var voiceheaderw = 0;
 	var i;
 	var size;
-	for (i=0;i<voices.length;i++) {
-		if(voices[i].header) {
+	for (i = 0; i < voices.length; i++) {
+		if (voices[i].header) {
 			size = getTextSize.calc(voices[i].header, 'voicefont', '');
-			voiceheaderw = Math.max(voiceheaderw,size.width);
+			voiceheaderw = Math.max(voiceheaderw, size.width);
 		}
 	}
 	voiceheaderw = addBraceSize(voiceheaderw, brace, getTextSize);
@@ -32,7 +32,7 @@ function addBraceSize(voiceheaderw, brace, getTextSize) {
 		for (var i = 0; i < brace.length; i++) {
 			if (brace[i].header) {
 				var size = getTextSize.calc(brace[i].header, 'voicefont', '');
-				voiceheaderw = Math.max(voiceheaderw,size.width);
+				voiceheaderw = Math.max(voiceheaderw, size.width);
 			}
 		}
 	}

package/src/write/layout/layout.js

@@ -1,94 +1,94 @@
 var layoutVoice = require('./voice');
-var setUpperAndLowerElements = require('./setUpperAndLowerElements');
-var layoutStaffGroup = require('./staffGroup');
+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 i;
-		var abcLine;
-		// Adjust the x-coordinates to their absolute positions
-		var maxWidth = width;
-		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;
-			}
+	var i;
+	var abcLine;
+	// Adjust the x-coordinates to their absolute positions
+	var maxWidth = width;
+	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;
 		}
+	}
 
-		// Layout the beams and add the stems to the beamed notes.
-		for(i=0; i<abctune.lines.length; i++) {
-			abcLine = abctune.lines[i];
-			if (abcLine.staffGroup && abcLine.staffGroup.voices) {
-				for (var j = 0; j < abcLine.staffGroup.voices.length; j++)
-					layoutVoice(abcLine.staffGroup.voices[j]);
-				setUpperAndLowerElements(renderer, abcLine.staffGroup);
-			}
+	// Layout the beams and add the stems to the beamed notes.
+	for (i = 0; i < abctune.lines.length; i++) {
+		abcLine = abctune.lines[i];
+		if (abcLine.staffGroup && abcLine.staffGroup.voices) {
+			for (var j = 0; j < abcLine.staffGroup.voices.length; j++)
+				layoutVoice(abcLine.staffGroup.voices[j]);
+			setUpperAndLowerElements(renderer, abcLine.staffGroup);
 		}
+	}
 
-		// Set the staff spacing
-		// TODO-PER: we should have been able to do this by the time we called setUpperAndLowerElements, but for some reason the "bottom" element seems to be set as a side effect of setting the X spacing.
-		for(i=0; i<abctune.lines.length; i++) {
-			abcLine = abctune.lines[i];
-			if (abcLine.staffGroup) {
-				abcLine.staffGroup.setHeight();
-			}
+	// Set the staff spacing
+	// TODO-PER: we should have been able to do this by the time we called setUpperAndLowerElements, but for some reason the "bottom" element seems to be set as a side effect of setting the X spacing.
+	for (i = 0; i < abctune.lines.length; i++) {
+		abcLine = abctune.lines[i];
+		if (abcLine.staffGroup) {
+			abcLine.staffGroup.setHeight();
 		}
-		return maxWidth;
 	}
-	// Do the x-axis positioning for a single line (a group of related staffs)
-	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;
-		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.)
-			var ret = layoutStaffGroup(newspace, renderer, 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;
-		}
-		centerWholeRests(staffGroup.voices);
-	};
+	return maxWidth;
+}
+// Do the x-axis positioning for a single line (a group of related staffs)
+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;
+	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.)
+		var ret = layoutStaffGroup(newspace, renderer, 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;
+	}
+	centerWholeRests(staffGroup.voices);
+};
 
-	function calcHorizontalSpacing(isLastLine, stretchLast, targetWidth, lineWidth, spacing, spacingUnits, minSpace, padding) {
-		if (isLastLine) {
-			if (stretchLast === undefined) {
-				if (lineWidth / targetWidth < 0.66) return null; // keep this for backward compatibility. The break isn't quite the same for some reason.
-			} else {
-				// "Stretch the last music line of a tune when it lacks less than the float fraction of the page width."
-				var lack = 1 - (lineWidth+padding) / targetWidth;
-				var stretch = lack < stretchLast;
-				if (!stretch) return null; // don't stretch last line too much
-			}
+function calcHorizontalSpacing(isLastLine, stretchLast, targetWidth, lineWidth, spacing, spacingUnits, minSpace, padding) {
+	if (isLastLine) {
+		if (stretchLast === undefined) {
+			if (lineWidth / targetWidth < 0.66) return null; // keep this for backward compatibility. The break isn't quite the same for some reason.
+		} else {
+			// "Stretch the last music line of a tune when it lacks less than the float fraction of the page width."
+			var lack = 1 - (lineWidth + padding) / targetWidth;
+			var stretch = lack < stretchLast;
+			if (!stretch) return null; // don't stretch last line too much
 		}
-		if (Math.abs(targetWidth-lineWidth) < 2) return null; // if we are already near the target width, we're done.
-		var relSpace = spacingUnits * spacing;
-		var constSpace = lineWidth - relSpace;
-		if (spacingUnits > 0) {
-			spacing = (targetWidth - constSpace) / spacingUnits;
-			if (spacing * minSpace > 50) {
-				spacing = 50 / minSpace;
-			}
-			return spacing;
+	}
+	if (Math.abs(targetWidth - lineWidth) < 2) return null; // if we are already near the target width, we're done.
+	var relSpace = spacingUnits * spacing;
+	var constSpace = lineWidth - relSpace;
+	if (spacingUnits > 0) {
+		spacing = (targetWidth - constSpace) / spacingUnits;
+		if (spacing * minSpace > 50) {
+			spacing = 50 / minSpace;
 		}
-		return null;
+		return spacing;
 	}
+	return null;
+}
 
-	function centerWholeRests(voices) {
-		// whole rests are a special case: if they are by themselves in a measure, then they should be centered.
-		// (If they are not by themselves, that is probably a user error, but we'll just center it between the two items to either side of it.)
-		for (var i = 0; i < voices.length; i++) {
-			var voice = voices[i];
-			// Look through all of the elements except for the first and last. If the whole note appears there then there isn't anything to center it between anyway.
-			for (var j = 1; j < voice.children.length-1; j++) {
-				var absElem = voice.children[j];
-				if (absElem.abcelem.rest && (absElem.abcelem.rest.type === 'whole' || absElem.abcelem.rest.type === 'multimeasure')) {
-					var before = voice.children[j-1];
-					var after = voice.children[j+1];
-					absElem.center(before, after);
-				}
+function centerWholeRests(voices) {
+	// whole rests are a special case: if they are by themselves in a measure, then they should be centered.
+	// (If they are not by themselves, that is probably a user error, but we'll just center it between the two items to either side of it.)
+	for (var i = 0; i < voices.length; i++) {
+		var voice = voices[i];
+		// Look through all of the elements except for the first and last. If the whole note appears there then there isn't anything to center it between anyway.
+		for (var j = 1; j < voice.children.length - 1; j++) {
+			var absElem = voice.children[j];
+			if (absElem.abcelem.rest && (absElem.abcelem.rest.type === 'whole' || absElem.abcelem.rest.type === 'multimeasure')) {
+				var before = voice.children[j - 1];
+				var after = voice.children[j + 1];
+				absElem.center(before, after);
 			}
 		}
 	}
+}
 
 module.exports = layout;

package/src/write/layout/{setUpperAndLowerElements.js → set-upper-and-lower-elements.js}

@@ -1,6 +1,6 @@
-var spacing = require('../abc_spacing');
+var spacing = require('../helpers/spacing');
 
-var setUpperAndLowerElements = function(renderer, staffGroup) {
+var setUpperAndLowerElements = function (renderer, staffGroup) {
 	// Each staff already has the top and bottom set, now we see if there are elements that are always on top and bottom, and resolve their pitch.
 	// Also, get the overall height of all the staves in this group.
 	var lastStaffBottom;
@@ -49,7 +49,7 @@ var setUpperAndLowerElements = function(renderer, staffGroup) {
 		incTop(staff, positionY, 'tempoHeightAbove');
 
 		if (staff.specialY.lyricHeightBelow) {
-			staff.specialY.lyricHeightBelow += renderer.spacing.vocal/spacing.STEP;
+			staff.specialY.lyricHeightBelow += renderer.spacing.vocal / spacing.STEP;
 			positionY.lyricHeightBelow = staff.bottom;
 			staff.bottom -= (staff.specialY.lyricHeightBelow + margin);
 		}
@@ -82,7 +82,7 @@ var setUpperAndLowerElements = function(renderer, staffGroup) {
 		if (lastStaffBottom !== undefined) {
 			var thisStaffTop = staff.top - 10;
 			var forcedSpacingBetween = lastStaffBottom + thisStaffTop;
-			var minSpacingInPitches = renderer.spacing.systemStaffSeparation/spacing.STEP;
+			var minSpacingInPitches = renderer.spacing.systemStaffSeparation / spacing.STEP;
 			var addedSpace = minSpacingInPitches - forcedSpacingBetween;
 			if (addedSpace > 0)
 				staff.top += addedSpace;
@@ -195,7 +195,7 @@ function setUpperAndLowerTempoElement(positionY, element) {
 }
 
 function setUpperAndLowerRelativeElements(positionY, element, renderSpacing) {
-	switch(element.type) {
+	switch (element.type) {
 		case "part":
 			element.top = positionY.partHeightAbove + element.height;
 			element.bottom = positionY.partHeightAbove;
@@ -215,9 +215,9 @@ function setUpperAndLowerRelativeElements(positionY, element, renderSpacing) {
 				element.top = positionY.lyricHeightAbove;
 				element.bottom = positionY.lyricHeightAbove;
 			} else {
-				element.top = positionY.lyricHeightBelow + renderSpacing.vocal/spacing.STEP;
-				element.bottom = positionY.lyricHeightBelow + renderSpacing.vocal/spacing.STEP;
-				element.pitch -= renderSpacing.vocal/spacing.STEP;
+				element.top = positionY.lyricHeightBelow + renderSpacing.vocal / spacing.STEP;
+				element.bottom = positionY.lyricHeightBelow + renderSpacing.vocal / spacing.STEP;
+				element.pitch -= renderSpacing.vocal / spacing.STEP;
 			}
 			break;
 		case "debug":

package/src/write/layout/{staffGroup.js → staff-group.js}

@@ -1,4 +1,4 @@
-var layoutVoiceElements = require('./VoiceElements');
+var layoutVoiceElements = require('./voice-elements');
 
 function checkLastBarX(voices) {
 	var maxX = 0;
@@ -19,35 +19,35 @@ function checkLastBarX(voices) {
 	}
 }
 
-var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge) {
+var layoutStaffGroup = function (spacing, renderer, debug, staffGroup, leftEdge) {
 	var epsilon = 0.0000001; // Fudging for inexactness of floating point math.
 	var spacingunits = 0; // number of times we will have ended up using the spacing distance (as opposed to fixed width distances)
 	var minspace = 1000; // a big number to start off with - used to find out what the smallest space between two notes is -- GD 2014.1.7
 
 	var x = leftEdge;
-	staffGroup.startx=x;
+	staffGroup.startx = x;
 	var i;
 
 	var currentduration = 0;
 	if (debug) console.log("init layout", spacing);
-	for (i=0;i<staffGroup.voices.length;i++) {
+	for (i = 0; i < staffGroup.voices.length; i++) {
 		layoutVoiceElements.beginLayout(x, staffGroup.voices[i]);
 	}
 
 	var spacingunit = 0; // number of spacingunits coming from the previously laid out element to this one
 	while (!finished(staffGroup.voices)) {
 		// find first duration level to be laid out among candidates across voices
-		currentduration= null; // candidate smallest duration level
-		for (i=0;i<staffGroup.voices.length;i++) {
-			if (!layoutVoiceElements.layoutEnded(staffGroup.voices[i]) && (!currentduration || getDurationIndex(staffGroup.voices[i])<currentduration))
-				currentduration=getDurationIndex(staffGroup.voices[i]);
+		currentduration = null; // candidate smallest duration level
+		for (i = 0; i < staffGroup.voices.length; i++) {
+			if (!layoutVoiceElements.layoutEnded(staffGroup.voices[i]) && (!currentduration || getDurationIndex(staffGroup.voices[i]) < currentduration))
+				currentduration = getDurationIndex(staffGroup.voices[i]);
 		}
 
 
 		// isolate voices at current duration level
 		var currentvoices = [];
 		var othervoices = [];
-		for (i=0;i<staffGroup.voices.length;i++) {
+		for (i = 0; i < staffGroup.voices.length; i++) {
 			var durationIndex = getDurationIndex(staffGroup.voices[i]);
 			// PER: Because of the inexactness of JS floating point math, we just get close.
 			if (durationIndex - currentduration > epsilon) {
@@ -62,44 +62,44 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 		// among the current duration level find the one which needs starting furthest right
 		spacingunit = 0; // number of spacingunits coming from the previously laid out element to this one
 		var spacingduration = 0;
-		for (i=0;i<currentvoices.length;i++) {
+		for (i = 0; i < currentvoices.length; i++) {
 			//console.log("greatest spacing unit", x, layoutVoiceElements.getNextX(currentvoices[i]), layoutVoiceElements.getSpacingUnits(currentvoices[i]), currentvoices[i].spacingduration);
-			if (layoutVoiceElements.getNextX(currentvoices[i])>x) {
-				x=layoutVoiceElements.getNextX(currentvoices[i]);
-				spacingunit=layoutVoiceElements.getSpacingUnits(currentvoices[i]);
+			if (layoutVoiceElements.getNextX(currentvoices[i]) > x) {
+				x = layoutVoiceElements.getNextX(currentvoices[i]);
+				spacingunit = layoutVoiceElements.getSpacingUnits(currentvoices[i]);
 				spacingduration = currentvoices[i].spacingduration;
 			}
 		}
-		spacingunits+=spacingunit;
-		minspace = Math.min(minspace,spacingunit);
-		if (debug) console.log("currentduration: ",currentduration, spacingunits, minspace);
+		spacingunits += spacingunit;
+		minspace = Math.min(minspace, spacingunit);
+		if (debug) console.log("currentduration: ", currentduration, spacingunits, minspace);
 
 		var lastTopVoice = undefined;
-		for (i=0;i<currentvoices.length;i++) {
+		for (i = 0; i < currentvoices.length; i++) {
 			var v = currentvoices[i];
 			if (v.voicenumber === 0)
 				lastTopVoice = i;
 			var topVoice = (lastTopVoice !== undefined && currentvoices[lastTopVoice].voicenumber !== v.voicenumber) ? currentvoices[lastTopVoice] : undefined;
 			if (!isSameStaff(v, topVoice))
 				topVoice = undefined;
-			var voicechildx = layoutVoiceElements.layoutOneItem(x,spacing, v, renderer.minPadding, topVoice);
-			var dx = voicechildx-x;
-			if (dx>0) {
+			var voicechildx = layoutVoiceElements.layoutOneItem(x, spacing, v, renderer.minPadding, topVoice);
+			var dx = voicechildx - x;
+			if (dx > 0) {
 				x = voicechildx; //update x
-				for (var j=0;j<i;j++) { // shift over all previously laid out elements
+				for (var j = 0; j < i; j++) { // shift over all previously laid out elements
 					layoutVoiceElements.shiftRight(dx, currentvoices[j]);
 				}
 			}
 		}
 
 		// remove the value of already counted spacing units in other voices (e.g. if a voice had planned to use up 5 spacing units but is not in line to be laid out at this duration level - where we've used 2 spacing units - then we must use up 3 spacing units, not 5)
-		for (i=0;i<othervoices.length;i++) {
-			othervoices[i].spacingduration-=spacingduration;
-			layoutVoiceElements.updateNextX(x,spacing, othervoices[i]); // adjust other voices expectations
+		for (i = 0; i < othervoices.length; i++) {
+			othervoices[i].spacingduration -= spacingduration;
+			layoutVoiceElements.updateNextX(x, spacing, othervoices[i]); // adjust other voices expectations
 		}
 
 		// update indexes of currently laid out elems
-		for (i=0;i<currentvoices.length;i++) {
+		for (i = 0; i < currentvoices.length; i++) {
 			var voice = currentvoices[i];
 			layoutVoiceElements.updateIndices(voice);
 		}
@@ -107,17 +107,17 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 
 
 	// find the greatest remaining x as a base for the width
-	for (i=0;i<staffGroup.voices.length;i++) {
-		if (layoutVoiceElements.getNextX(staffGroup.voices[i])>x) {
-			x=layoutVoiceElements.getNextX(staffGroup.voices[i]);
-			spacingunit=layoutVoiceElements.getSpacingUnits(staffGroup.voices[i]);
+	for (i = 0; i < staffGroup.voices.length; i++) {
+		if (layoutVoiceElements.getNextX(staffGroup.voices[i]) > x) {
+			x = layoutVoiceElements.getNextX(staffGroup.voices[i]);
+			spacingunit = layoutVoiceElements.getSpacingUnits(staffGroup.voices[i]);
 		}
 	}
 
 	// adjust lastBar when needed (multi staves)
 	checkLastBarX(staffGroup.voices);
 	//console.log("greatest remaining",spacingunit,x);
-	spacingunits+=spacingunit;
+	spacingunits += spacingunit;
 	staffGroup.setWidth(x);
 
 	return { spacingUnits: spacingunits, minSpace: minspace };
@@ -125,14 +125,14 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 
 
 function finished(voices) {
-	for (var i=0;i<voices.length;i++) {
+	for (var i = 0; i < voices.length; i++) {
 		if (!layoutVoiceElements.layoutEnded(voices[i])) return false;
 	}
 	return true;
 }
 
 function getDurationIndex(element) {
-	return element.durationindex - (element.children[element.i] && (element.children[element.i].duration>0)?0:0.0000005); // if the ith element doesn't have a duration (is not a note), its duration index is fractionally before. This enables CLEF KEYSIG TIMESIG PART, etc. to be laid out before we get to the first note of other voices
+	return element.durationindex - (element.children[element.i] && (element.children[element.i].duration > 0) ? 0 : 0.0000005); // if the ith element doesn't have a duration (is not a note), its duration index is fractionally before. This enables CLEF KEYSIG TIMESIG PART, etc. to be laid out before we get to the first note of other voices
 }
 
 function isSameStaff(voice1, voice2) {