abcjs 6.1.9 → 6.2.1

package/src/write/draw/print-stem.js

@@ -2,7 +2,7 @@ var elementGroup = require('./group-elements');
 var roundNumber = require("./round-number");
 
 function printStem(renderer, x, dx, y1, y2, klass, name) {
-	if (dx<0 || y1<y2) { // correct path "handedness" for intersection with other elements
+	if (dx < 0 || y1 < y2) { // correct path "handedness" for intersection with other elements
 		var tmp = roundNumber(y2);
 		y2 = roundNumber(y1);
 		y1 = tmp;
@@ -11,9 +11,19 @@ function printStem(renderer, x, dx, y1, y2, klass, name) {
 		y2 = roundNumber(y2);
 	}
 	x = roundNumber(x);
-	var x2 = roundNumber(x+dx);
-	var pathArray = [["M",x,y1],["L", x, y2],["L", x2, y2],["L",x2,y1],["z"]];
-	var attr = { path: ""};
+	var x2 = roundNumber(x + dx);
+	// TODO-PER: This fixes a firefox bug where a path needs to go over the 0.5 mark or it isn't displayed
+	if (renderer.firefox112 && Math.abs(dx) < 1) {
+		var higher = Math.max(x,x2)
+		var int = Math.floor(higher)
+		var distToHalf = 0.52 - (higher - int)
+		if (distToHalf > 0) {
+			x += distToHalf
+			x2 += distToHalf
+		}
+	}
+	var pathArray = [["M", x, y1], ["L", x, y2], ["L", x2, y2], ["L", x2, y1], ["z"]];
+	var attr = { path: "" };
 	for (var i = 0; i < pathArray.length; i++)
 		attr.path += pathArray[i].join(" ");
 	if (klass)
@@ -21,7 +31,7 @@ function printStem(renderer, x, dx, y1, y2, klass, name) {
 	if (name)
 		attr['data-name'] = name;
 	if (!elementGroup.isInGroup()) {
-		attr.stroke ="none";
+		attr.stroke = "none";
 		attr.fill = renderer.foregroundColor;
 	}
 	return renderer.paper.pathToBack(attr);

package/src/write/draw/print-symbol.js

@@ -1,5 +1,5 @@
 var renderText = require('./text');
-var glyphs = require('../abc_glyphs');
+var glyphs = require('../creation/glyphs');
 var elementGroup = require('./group-elements');
 
 /**
@@ -14,17 +14,17 @@ function printSymbol(renderer, x, offset, symbol, options) {
 	if (!symbol) return null;
 	if (symbol.length > 1 && symbol.indexOf(".") < 0) {
 		var groupClass = elementGroup.isInGroup() ? '' : options.klass // If this is already in a group then don't repeat the classes for the sub-group)
-		renderer.paper.openGroup({"data-name": options.name, klass: groupClass});
+		renderer.paper.openGroup({ "data-name": options.name, klass: groupClass });
 		var dx = 0;
 		for (var i = 0; i < symbol.length; i++) {
-			var s = symbol.charAt(i);
+			var s = symbol[i];
 			ycorr = glyphs.getYCorr(s);
-			el = glyphs.printSymbol(x + dx, renderer.calcY(offset + ycorr), s, renderer.paper, {stroke: options.stroke, fill: options.fill});
+			el = glyphs.printSymbol(x + dx, renderer.calcY(offset + ycorr), s, renderer.paper, { stroke: options.stroke, fill: options.fill });
 			if (el) {
 				if (i < symbol.length - 1)
-					dx += kernSymbols(s, symbol.charAt(i + 1), glyphs.getSymbolWidth(s));
+					dx += kernSymbols(s, symbol[i + 1], glyphs.getSymbolWidth(s));
 			} else {
-				renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start'}, false);
+				renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start' }, false);
 			}
 		}
 		var g = renderer.paper.closeGroup();
@@ -32,14 +32,14 @@ function printSymbol(renderer, x, offset, symbol, options) {
 	} else {
 		ycorr = glyphs.getYCorr(symbol);
 		if (elementGroup.isInGroup()) {
-			el = glyphs.printSymbol(x, renderer.calcY(offset + ycorr), symbol, renderer.paper, {"data-name": options.name});
+			el = glyphs.printSymbol(x, renderer.calcY(offset + ycorr), symbol, renderer.paper, { "data-name": options.name });
 		} else {
-			el = glyphs.printSymbol(x, renderer.calcY(offset + ycorr), symbol, renderer.paper, {klass: options.klass, stroke: options.stroke, fill: options.fill, "data-name": options.name});
+			el = glyphs.printSymbol(x, renderer.calcY(offset + ycorr), symbol, renderer.paper, { klass: options.klass, stroke: options.stroke, fill: options.fill, "data-name": options.name });
 		}
 		if (el) {
 			return el;
 		}
-		renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start'}, false);
+		renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start' }, false);
 		return null;
 	}
 }
@@ -48,11 +48,11 @@ function kernSymbols(lastSymbol, thisSymbol, lastSymbolWidth) {
 	// This is just some adjustments to make it look better.
 	var width = lastSymbolWidth;
 	if (lastSymbol === 'f' && thisSymbol === 'f')
-		width = width*2/3;
+		width = width * 2 / 3;
 	if (lastSymbol === 'p' && thisSymbol === 'p')
-		width = width*5/6;
+		width = width * 5 / 6;
 	if (lastSymbol === 'f' && thisSymbol === 'z')
-		width = width*5/8;
+		width = width * 5 / 8;
 	return width;
 }
 

package/src/write/draw/print-vertical-line.js

@@ -1,17 +1,17 @@
 var sprintf = require("./sprintf");
 
-function printVerticalLine (renderer, x, y1, y2) {
+function printVerticalLine(renderer, x, y1, y2) {
 	var dy = 0.35;
 	var fill = "#00aaaa";
 	var pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x - dy, y1, x - dy, y2,
 		x + dy, y1, x + dy, y2);
-	renderer.paper.pathToBack({path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff')});
-	pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x - 20, y1, x - 20, y1+3,
-		x, y1, x, y1+3);
-	renderer.paper.pathToBack({path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff')});
-	pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x + 20, y2, x + 20, y2+3,
-		x, y2, x, y2+3);
-	renderer.paper.pathToBack({path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff')});
+	renderer.paper.pathToBack({ path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff') });
+	pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x - 20, y1, x - 20, y1 + 3,
+		x, y1, x, y1 + 3);
+	renderer.paper.pathToBack({ path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff') });
+	pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x + 20, y2, x + 20, y2 + 3,
+		x, y2, x, y2 + 3);
+	renderer.paper.pathToBack({ path: pathString, stroke: "none", fill: fill, 'class': renderer.controller.classes.generate('staff') });
 
 }
 

package/src/write/draw/relative.js

@@ -7,7 +7,7 @@ function drawRelativeElement(renderer, params, bartop) {
 	if (params.pitch === undefined)
 		window.console.error(params.type + " Relative Element y-coordinate not set.");
 	var y = renderer.calcY(params.pitch);
-	switch(params.type) {
+	switch (params.type) {
 		case "symbol":
 			if (params.c === null) return null;
 			var klass = "symbol";
@@ -16,8 +16,8 @@ function drawRelativeElement(renderer, params, bartop) {
 				scalex: params.scalex,
 				scaley: params.scaley,
 				klass: renderer.controller.classes.generate(klass),
-//				fill:"none",
-//				stroke: renderer.foregroundColor,
+				//				fill:"none",
+				//				stroke: renderer.foregroundColor,
 				name: params.name
 			});
 			break;
@@ -33,45 +33,46 @@ function drawRelativeElement(renderer, params, bartop) {
 				y += 2.5;
 				tabClass = 'tab-grace'
 			}
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: "" + params.c, type: tabFont, klass: renderer.controller.classes.generate(tabClass), anchor: hAnchor, centerVertically: false, dim: params.dim , cursor: 'default'}, false);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: "" + params.c, type: tabFont, klass: renderer.controller.classes.generate(tabClass), anchor: hAnchor, centerVertically: false, dim: params.dim, cursor: 'default' }, false);
 			break;
 		case "barNumber":
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: ""+params.c, type: "measurefont", klass: renderer.controller.classes.generate('bar-number'), anchor: "middle", dim: params.dim, name: "bar-number"}, true);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: "" + params.c, type: "measurefont", klass: renderer.controller.classes.generate('bar-number'), anchor: "middle", dim: params.dim, name: "bar-number" }, true);
 			break;
 		case "lyric":
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: "vocalfont", klass: renderer.controller.classes.generate('lyric'), anchor: "middle", dim: params.dim, name: "lyric"}, false);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: "vocalfont", klass: renderer.controller.classes.generate('lyric'), anchor: "middle", dim: params.dim, name: "lyric" }, false);
 			break;
 		case "chord":
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'gchordfont', klass: renderer.controller.classes.generate("chord"), anchor: "middle", dim: params.dim, lane: params.getLane(), name: "chord"}, false);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'gchordfont', klass: renderer.controller.classes.generate("chord"), anchor: "middle", dim: params.dim, lane: params.getLane(), name: "chord" }, false);
 			break;
 		case "decoration":
 			// The +6 is to compensate for the placement of text in svg: to be on the same row as symbols, the y-coord needs to compensate for the center line.
-			params.graphelem = renderText(renderer, { x: params.x, y: y+6, text: params.c, type: 'annotationfont', klass: renderer.controller.classes.generate("annotation"), anchor: params.anchor, centerVertically: true, dim: params.dim}, false);
+			params.graphelem = renderText(renderer, { x: params.x, y: y + 6, text: params.c, type: 'annotationfont', klass: renderer.controller.classes.generate("annotation"), anchor: params.anchor, centerVertically: true, dim: params.dim }, false);
 			break;
 		case "text":
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'annotationfont', klass: renderer.controller.classes.generate("annotation"), anchor: "start", centerVertically: params.centerVertically, dim: params.dim, lane: params.getLane(), name: "annotation"}, false);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'annotationfont', klass: renderer.controller.classes.generate("annotation"), anchor: "start", centerVertically: params.centerVertically, dim: params.dim, lane: params.getLane(), name: "annotation" }, false);
 			break;
 		case "multimeasure-text":
-			params.graphelem = renderText(renderer, { x: params.x+params.w/2, y: y, text: params.c, type: 'tempofont', klass: renderer.controller.classes.generate("rest"), anchor: "middle", centerVertically: false, dim: params.dim}, false);
+			params.graphelem = renderText(renderer, { x: params.x + params.w / 2, y: y, text: params.c, type: 'tempofont', klass: renderer.controller.classes.generate("rest"), anchor: "middle", centerVertically: false, dim: params.dim }, false);
 			break;
 		case "part":
-			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'partsfont', klass: renderer.controller.classes.generate("part"), anchor: "start", dim: params.dim, name: params.c}, true);
+			params.graphelem = renderText(renderer, { x: params.x, y: y, text: params.c, type: 'partsfont', klass: renderer.controller.classes.generate("part"), anchor: "start", dim: params.dim, name: params.c }, true);
 			break;
 		case "bar":
-			params.graphelem = printStem(renderer, params.x, params.linewidth, y, (bartop)?bartop:renderer.calcY(params.pitch2), null, "bar"); break; // bartop can't be 0
+			params.graphelem = printStem(renderer, params.x, params.linewidth + renderer.lineThickness, y, (bartop) ? bartop : renderer.calcY(params.pitch2), null, "bar"); break; // bartop can't be 0
 		case "stem":
-			params.graphelem = printStem(renderer, params.x, params.linewidth, y, renderer.calcY(params.pitch2), 'abcjs-stem', 'stem'); break;
+			var stemWidth = params.linewidth > 0 ? params.linewidth + renderer.lineThickness : params.linewidth - renderer.lineThickness
+			params.graphelem = printStem(renderer, params.x, stemWidth, y, renderer.calcY(params.pitch2), 'abcjs-stem', 'stem'); break;
 		case "ledger":
-			params.graphelem = printStaffLine(renderer, params.x, params.x+params.w, params.pitch, "abcjs-ledger", "ledger"); break;
+			params.graphelem = printStaffLine(renderer, params.x, params.x + params.w, params.pitch, "abcjs-ledger", "ledger", 0.35 + renderer.lineThickness); break;
 	}
-	if (params.scalex!==1 && params.graphelem) {
+	if (params.scalex !== 1 && params.graphelem) {
 		scaleExistingElem(renderer.paper, params.graphelem, params.scalex, params.scaley, params.x, y);
 	}
 	return params.graphelem;
 }
 
 function scaleExistingElem(paper, elem, scaleX, scaleY, x, y) {
-	paper.setAttributeOnElement(elem, { style: "transform:scale("+scaleX+","+scaleY + ");transform-origin:" + x + "px " + y + "px;"});
+	paper.setAttributeOnElement(elem, { style: "transform:scale(" + scaleX + "," + scaleY + ");transform-origin:" + x + "px " + y + "px;" });
 }
 
 module.exports = drawRelativeElement;

package/src/write/draw/selectables.js

@@ -1,5 +1,5 @@
-var highlight = require('../highlight');
-var unhighlight = require('../unhighlight');
+var highlight = require('../interactive/highlight');
+var unhighlight = require('../interactive/unhighlight');
 
 function Selectables(paper, selectTypes, tuneNumber) {
 	this.elements = [];
@@ -17,9 +17,9 @@ Selectables.prototype.add = function (absEl, svgEl, isNoteOrTabNumber, staffPos)
 		return;
 	var params;
 	if (this.selectTypes === undefined)
-		params = { selectable: false, "data-index": this.elements.length}; // This is the old behavior.
+		params = { selectable: false, "data-index": this.elements.length }; // This is the old behavior.
 	else
-		params = { selectable: true, tabindex: 0, "data-index": this.elements.length};
+		params = { selectable: true, tabindex: 0, "data-index": this.elements.length };
 	this.paper.setAttributeOnElement(svgEl, params);
 	var sel = { absEl: absEl, svgEl: svgEl, isDraggable: isNoteOrTabNumber };
 	if (staffPos !== undefined)
@@ -45,7 +45,7 @@ Selectables.prototype.canSelect = function (absEl) {
 	return this.selectTypes.indexOf(absEl.abcelem.el_type) >= 0;
 };
 
-Selectables.prototype.wrapSvgEl = function(abcelem, el) {
+Selectables.prototype.wrapSvgEl = function (abcelem, el) {
 	var absEl = {
 		tuneNumber: this.tuneNumber,
 		abcelem: abcelem,

package/src/write/draw/separator.js

@@ -3,14 +3,14 @@ function drawSeparator(renderer, width) {
 	var stroke = "rgba(0,0,0,0)";
 	var y = Math.round(renderer.y);
 	var staffWidth = renderer.controller.width;
-	var x1 = (staffWidth - width)/2;
+	var x1 = (staffWidth - width) / 2;
 	var x2 = x1 + width;
 	var pathString = 'M ' + x1 + ' ' + y +
 		' L ' + x2 + ' ' + y +
-		' L ' + x2 + ' ' + (y+1) +
-		' L ' + x1 + ' ' + (y+1) +
+		' L ' + x2 + ' ' + (y + 1) +
+		' L ' + x1 + ' ' + (y + 1) +
 		' L ' + x1 + ' ' + y + ' z';
-	renderer.paper.pathToBack({path:pathString, stroke:stroke, fill:fill, 'class': renderer.controller.classes.generate('defined-text')});
+	renderer.paper.pathToBack({ path: pathString, stroke: stroke, fill: fill, 'class': renderer.controller.classes.generate('defined-text') });
 }
 
 module.exports = drawSeparator;

package/src/write/draw/set-paper-size.js

@@ -1,6 +1,6 @@
 function setPaperSize(renderer, maxwidth, scale, responsive) {
-	var w = (maxwidth+renderer.padding.right)*scale;
-	var h = (renderer.y+renderer.padding.bottom)*scale;
+	var w = (maxwidth + 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
 	// TODO-PER: We are letting the page get as long as it needs now, but eventually that should go to a second page.

package/src/write/draw/sprintf.js

@@ -29,37 +29,37 @@
 
 //function str_repeat(i, m) { for (var o = []; m > 0; o[--m] = i); return(o.join('')); }
 
-var sprintf = function() {
-  var i = 0, a, f = arguments[i++], o = [], m, p, c, x;
-  while (f) {
-    if (m = /^[^\x25]+/.exec(f)) o.push(m[0]);
-    else if (m = /^\x25{2}/.exec(f)) o.push('%');
-    else if (m = /^\x25(?:(\d+)\$)?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(f)) {
-      if (((a = arguments[m[1] || i++]) == null) || (a == undefined)) throw("Too few arguments.");
-      if (/[^s]/.test(m[7]) && (typeof(a) != 'number'))
-        throw("Expecting number but found " + typeof(a));
-      switch (m[7]) {
-        case 'b': a = a.toString(2); break;
-        case 'c': a = String.fromCharCode(a); break;
-        case 'd': a = parseInt(a); break;
-        case 'e': a = m[6] ? a.toExponential(m[6]) : a.toExponential(); break;
-        case 'f': a = m[6] ? parseFloat(a).toFixed(m[6]) : parseFloat(a); break;
-        case 'o': a = a.toString(8); break;
-        case 's': a = ((a = String(a)) && m[6] ? a.substring(0, m[6]) : a); break;
-        case 'u': a = Math.abs(a); break;
-        case 'x': a = a.toString(16); break;
-        case 'X': a = a.toString(16).toUpperCase(); break;
-      }
-      a = (/[def]/.test(m[7]) && m[2] && a > 0 ? '+' + a : a);
-      c = m[3] ? m[3] == '0' ? '0' : m[3].charAt(1) : ' ';
-      x = m[5] - String(a).length;
-      p = m[5] ? str_repeat(c, x) : '';
-      o.push(m[4] ? a + p : p + a);
-    }
-    else throw ("Huh ?!");
-    f = f.substring(m[0].length);
-  }
-  return o.join('');
+var sprintf = function () {
+	var i = 0, a, f = arguments[i++], o = [], m, p, c, x;
+	while (f) {
+		if (m = /^[^\x25]+/.exec(f)) o.push(m[0]);
+		else if (m = /^\x25{2}/.exec(f)) o.push('%');
+		else if (m = /^\x25(?:(\d+)\$)?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(f)) {
+			if (((a = arguments[m[1] || i++]) == null) || (a == undefined)) throw ("Too few arguments.");
+			if (/[^s]/.test(m[7]) && (typeof (a) != 'number'))
+				throw ("Expecting number but found " + typeof (a));
+			switch (m[7]) {
+				case 'b': a = a.toString(2); break;
+				case 'c': a = String.fromCharCode(a); break;
+				case 'd': a = parseInt(a); break;
+				case 'e': a = m[6] ? a.toExponential(m[6]) : a.toExponential(); break;
+				case 'f': a = m[6] ? parseFloat(a).toFixed(m[6]) : parseFloat(a); break;
+				case 'o': a = a.toString(8); break;
+				case 's': a = ((a = String(a)) && m[6] ? a.substring(0, m[6]) : a); break;
+				case 'u': a = Math.abs(a); break;
+				case 'x': a = a.toString(16); break;
+				case 'X': a = a.toString(16).toUpperCase(); break;
+			}
+			a = (/[def]/.test(m[7]) && m[2] && a > 0 ? '+' + a : a);
+			c = m[3] ? m[3] == '0' ? '0' : m[3][1] : ' ';
+			x = m[5] - String(a).length;
+			p = m[5] ? str_repeat(c, x) : '';
+			o.push(m[4] ? a + p : p + a);
+		}
+		else throw ("Huh ?!");
+		f = f.substring(m[0].length);
+	}
+	return o.join('');
 };
 
 module.exports = sprintf;

package/src/write/draw/staff-group.js

@@ -1,4 +1,4 @@
-var spacing = require('../abc_spacing');
+var spacing = require('../helpers/spacing');
 var drawBrace = require('./brace');
 var drawVoice = require('./voice');
 var printStaff = require('./staff');
@@ -6,7 +6,7 @@ var printDebugBox = require('./debug-box');
 var printStem = require('./print-stem');
 var nonMusic = require('./non-music');
 
-function drawStaffGroup(renderer, params, selectables,lineNumber) {
+function drawStaffGroup(renderer, params, selectables, lineNumber) {
 	// We enter this method with renderer.y pointing to the topmost coordinate that we're allowed to draw.
 	// All of the children that will be drawn have a relative "pitch" set, where zero is the first ledger line below the staff.
 	// renderer.y will be offset at the beginning of each staff by the amount required to make the relative pitch work.
@@ -25,20 +25,22 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 		renderer.moveY(spacing.STEP, staff1.top);
 		staff1.absoluteY = renderer.y;
 		if (renderer.showDebug) {
-			if (renderer.showDebug.indexOf("box") >= 0) {
+			if (renderer.showDebug.indexOf("box") >= 0 && staff1.voices) {
 				boxAllElements(renderer, params.voices, staff1.voices);
 			}
 			if (renderer.showDebug.indexOf("grid") >= 0) {
-				renderer.paper.dottedLine({x1: renderer.padding.left, x2: renderer.padding.left+renderer.controller.width, y1: startY, y2: startY, stroke: "#0000ff"});
+				renderer.paper.dottedLine({ x1: renderer.padding.left, x2: renderer.padding.left + renderer.controller.width, y1: startY, y2: startY, stroke: "#0000ff" });
 				printDebugBox(renderer,
-					{ x: renderer.padding.left,
+					{
+						x: renderer.padding.left,
 						y: renderer.calcY(staff1.originalTop),
 						width: renderer.controller.width,
 						height: renderer.calcY(staff1.originalBottom) - renderer.calcY(staff1.originalTop),
 						fill: renderer.foregroundColor,
 						stroke: renderer.foregroundColor,
 						"fill-opacity": 0.1,
-						"stroke-opacity": 0.1 });
+						"stroke-opacity": 0.1
+					});
 				colorIndex = 0;
 				debugPrintGridItem(staff1, 'chordHeightAbove');
 				debugPrintGridItem(staff1, 'chordHeightBelow');
@@ -71,23 +73,23 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 
 	var linePitch = 2;
 	var bartop = 0;
-	for (var i=0;i<params.voices.length;i++) {
+	for (var i = 0; i < params.voices.length; i++) {
 		var staff = params.voices[i].staff;
 		var tabName = params.voices[i].tabNameInfos;
-		renderer.y = staff.absoluteY ;
+		renderer.y = staff.absoluteY;
 		renderer.controller.classes.incrVoice();
 		//renderer.y = staff.y;
 		// offset for starting the counting at middle C
 		if (!params.voices[i].duplicate) {
-//			renderer.moveY(spacing.STEP, staff.top);
-			if (!topLine) topLine  = renderer.calcY(10);
-			bottomLine  = renderer.calcY(linePitch);
+			//			renderer.moveY(spacing.STEP, staff.top);
+			if (!topLine) topLine = renderer.calcY(10);
+			bottomLine = renderer.calcY(linePitch);
 			if (staff.lines !== 0) {
 				if (staff.linePitch) {
-					linePitch = staff.linePitch; 
+					linePitch = staff.linePitch;
 				}
 				renderer.controller.classes.newMeasure();
-				var lines = printStaff(renderer, params.startx, params.w, staff.lines, staff.linePitch, staff.dy);
+				var lines = printStaff(renderer, params.startx, params.w, staff.lines, staff.linePitch, 0.35);
 				bottomLine = lines[1];
 				staff.bottomLine = bottomLine;
 				staff.topLine = lines[0];
@@ -110,15 +112,15 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 		drawVoice(renderer, params.voices[i], bartop, selectables, {
 			top: startY,
 			zero: renderer.y,
-			height: params.height*spacing.STEP
+			height: params.height * spacing.STEP
 		});
-		var tabNameHeight = 0; 
+		var tabNameHeight = 0;
 		if (tabName) {
 			// print tab infos on staffBottom
 			var r = { rows: [] };
 			r.rows.push({ absmove: bottomLine + 2 });
 			var leftMargin = 8;
-			r.rows.push({ left: params.startx+leftMargin, text: tabName.name, font: 'tablabelfont', klass: 'text instrument-name', anchor: 'start' });
+			r.rows.push({ left: params.startx + leftMargin, text: tabName.name, font: 'tablabelfont', klass: 'text instrument-name', anchor: 'start' });
 			r.rows.push({ move: tabName.textSize.height });
 			nonMusic(renderer, r);
 			tabNameHeight = tabName.textSize.height;
@@ -126,9 +128,9 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 
 		renderer.controller.classes.newMeasure();
 		if (!params.voices[i].duplicate) {
-				bartop = renderer.calcY(2 + tabNameHeight); // This connects the bar lines between two different staves.
-//			if (staff.bottom < 0)
-//				renderer.moveY(spacing.STEP, -staff.bottom);
+			bartop = renderer.calcY(2 + tabNameHeight); // This connects the bar lines between two different staves.
+			//			if (staff.bottom < 0)
+			//				renderer.moveY(spacing.STEP, -staff.bottom);
 		}
 	}
 	renderer.controller.classes.newMeasure();
@@ -143,23 +145,25 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 	renderer.y = startY;
 
 	function debugPrintGridItem(staff, key) {
-		var colors = [ "rgb(207,27,36)", "rgb(168,214,80)", "rgb(110,161,224)", "rgb(191,119,218)", "rgb(195,30,151)",
-			"rgb(31,170,177)", "rgb(220,166,142)" ];
-		if (staff.positionY[key]) {
+		var colors = ["rgb(207,27,36)", "rgb(168,214,80)", "rgb(110,161,224)", "rgb(191,119,218)", "rgb(195,30,151)",
+			"rgb(31,170,177)", "rgb(220,166,142)"];
+		if (staff.positionY && staff.positionY[key]) {
 			var height = staff.specialY[key] * spacing.STEP;
 			if (key === "chordHeightAbove" && staff.specialY.chordLines && staff.specialY.chordLines.above)
 				height *= staff.specialY.chordLines.above;
 			if (key === "chordHeightBelow" && staff.specialY.chordLines && staff.specialY.chordLines.below)
 				height *= staff.specialY.chordLines.below;
 			printDebugBox(renderer,
-				{ x: renderer.padding.left,
+				{
+					x: renderer.padding.left,
 					y: renderer.calcY(staff.positionY[key]),
 					width: renderer.controller.width,
 					height: height,
 					fill: colors[colorIndex],
 					stroke: colors[colorIndex],
 					"fill-opacity": 0.4,
-					"stroke-opacity": 0.4 },
+					"stroke-opacity": 0.4
+				},
 				key.substr(0, 4));
 			colorIndex += 1; if (colorIndex > 6) colorIndex = 0;
 		}
@@ -190,9 +194,10 @@ function boxAllElements(renderer, voices, which) {
 			var coords = elem.getFixedCoords();
 			if (elem.invisible || coords.t === undefined || coords.b === undefined)
 				continue;
-			var height = (coords.t - coords.b)*spacing.STEP;
+			var height = (coords.t - coords.b) * spacing.STEP;
 			printDebugBox(renderer,
-				{ x: coords.x,
+				{
+					x: coords.x,
 					y: renderer.calcY(coords.t),
 					width: coords.w,
 					height: height,
@@ -200,18 +205,19 @@ function boxAllElements(renderer, voices, which) {
 					"fill-opacity": 0.4,
 					stroke: "#4aa93d",
 					"stroke-opacity": 0.8
-			});
+				});
 
 			for (var k = 0; k < elem.children.length; k++) {
 				var relElem = elem.children[k];
 				var chord = relElem.getChordDim();
 				if (chord) {
 					var y = renderer.calcY(relElem.pitch);
-					y += relElem.dim.font.size*relElem.getLane();
+					y += relElem.dim.font.size * relElem.getLane();
 					printDebugBox(renderer,
-						{ x: chord.left,
+						{
+							x: chord.left,
 							y: y,
-							width: chord.right-chord.left,
+							width: chord.right - chord.left,
 							height: relElem.dim.font.size,
 							fill: "none",
 							stroke: "#4aa93d",

package/src/write/draw/staff-line.js

@@ -1,8 +1,8 @@
 var printLine = require('./print-line');
 
-function printStaffLine(renderer, x1,x2, pitch, klass, name , dy) {
+function printStaffLine(renderer, x1, x2, pitch, klass, name, dy) {
 	var y = renderer.calcY(pitch);
-	return printLine(renderer,x1,x2,y,klass,name,dy);
+	return printLine(renderer, x1, x2, y, klass, name, dy);
 }
 
 module.exports = printStaffLine;

package/src/write/draw/staff.js

@@ -1,6 +1,6 @@
 var printStaffLine = require('./staff-line');
 
-function printStaff(renderer, startx, endx, numLines , linePitch , dy) {
+function printStaff(renderer, startx, endx, numLines, linePitch, dy) {
 	var klass = "abcjs-top-line";
 	var pitch = 2;
 	if (linePitch) {
@@ -11,7 +11,7 @@ function printStaff(renderer, startx, endx, numLines , linePitch , dy) {
 	var firstYLine = 0;
 	var lastYLine = 0;
 	if (numLines === 1) {
-		printStaffLine(renderer, startx,endx,6, klass);
+		printStaffLine(renderer, startx, endx, 6, klass, null, dy + renderer.lineThickness);
 		firstYLine = renderer.calcY(10);
 		lastYLine = renderer.calcY(2);
 	} else {
@@ -22,12 +22,12 @@ function printStaff(renderer, startx, endx, numLines , linePitch , dy) {
 			if (firstYLine === 0) {
 				firstYLine = lastYLine;
 			}
-			printStaffLine(renderer, startx, endx, curpitch, klass , null , dy) ;
+			printStaffLine(renderer, startx, endx, curpitch, klass, null, dy + renderer.lineThickness);
 			klass = undefined;
 		}
 	}
 	renderer.paper.closeGroup();
-	return [firstYLine,lastYLine];
+	return [firstYLine, lastYLine];
 }
 
 module.exports = printStaff;

package/src/write/draw/tab-line.js

@@ -2,38 +2,38 @@ var sprintf = require('./sprintf');
 var roundNumber = require('./round-number');
 var printStem = require('./print-stem');
 
-function TabLine(renderer , klass , dx , name) {
-  this.renderer = renderer;
-  if (!dx) dx = 0.35; // default
-  this.dx = dx;
-  this.klass = klass;
-  this.name = name;
-  var fill = renderer.foregroundColor;
-  this.options = { stroke: "none", fill: fill };
-  if (name)
-    this.options['data-name'] = name;
-  if (klass)
-    this.options['class'] = klass;
+function TabLine(renderer, klass, dx, name) {
+	this.renderer = renderer;
+	if (!dx) dx = 0.35; // default
+	this.dx = dx;
+	this.klass = klass;
+	this.name = name;
+	var fill = renderer.foregroundColor;
+	this.options = { stroke: "none", fill: fill };
+	if (name)
+		this.options['data-name'] = name;
+	if (klass)
+		this.options['class'] = klass;
 }
 
 TabLine.prototype.printVertical = function (y1, y2, x) {
-  return printStem(this.renderer,
-    x,
-    this.dx,
-    y1,
-    y2,
-    this.options.klass,
-    this.options.name);
+	return printStem(this.renderer,
+		x,
+		this.dx,
+		y1,
+		y2,
+		this.options.klass,
+		this.options.name);
 }
 
 TabLine.prototype.printHorizontal = function (x1, x2, y) {
-  x1 = roundNumber(x1);
-  x2 = roundNumber(x2);
-  var y1 = roundNumber(y - this.dx);
-  var y2 = roundNumber(y + this.dx);
-  this.options.path = sprintf("M %f %f L %f %f L %f %f L %f %f z", x1, y1, x2, y1,
-    x2, y2, x1, y2);
-  return this.renderer.paper.pathToBack(this.options);
+	x1 = roundNumber(x1);
+	x2 = roundNumber(x2);
+	var y1 = roundNumber(y - this.dx);
+	var y2 = roundNumber(y + this.dx);
+	this.options.path = sprintf("M %f %f L %f %f L %f %f L %f %f z", x1, y1, x2, y1,
+		x2, y2, x1, y2);
+	return this.renderer.paper.pathToBack(this.options);
 }
 
 module.exports = TabLine;