abcjs 6.0.0-beta.32 → 6.0.0-beta.36

package/src/write/draw/absolute.js

@@ -11,17 +11,12 @@ function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
 	elementGroup.beginGroup(renderer.paper, renderer.controller);
 	for (var i=0; i<params.children.length; i++) {
 		var child = params.children[i];
-		var el;
 		switch (child.type) {
 			case "TempoElement":
-				el = drawTempo(renderer, child);
-				if (el)
-					params.elemset = params.elemset.concat(el);
+				drawTempo(renderer, child);
 				break;
 			default:
-				el = drawRelativeElement(renderer, child, bartop);
-				if (el)
-					params.elemset.push(el);
+				drawRelativeElement(renderer, child, bartop);
 		}
 	}
 	var klass = params.type;
@@ -35,16 +30,19 @@ function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
 			}
 		}
 	}
-	var g = elementGroup.endGroup(klass);
+	var g = elementGroup.endGroup(klass, params.type);
 	if (g) {
-		if (isTempo && params.elemset.length > 0) {
-			// If this is a tempo element there are text portions that are in params.elemset[0] already.
-			// The graphic portion (the drawn note) is in g and that should just be added to the text so that it is a single element for selecting.
-			renderer.paper.moveElementToChild(params.elemset[0], g);
-			selectables.add(params, params.elemset[0], false, staffPos);
+		if (isTempo) {
+			params.startChar = params.abcelem.startChar;
+			params.endChar = params.abcelem.endChar;
+			selectables.add(params, g, false, staffPos);
 		} else {
 			params.elemset.push(g);
-			selectables.add(params, g, params.type === 'note', staffPos);
+			var isSelectable = false;
+			if (params.type === 'note' || params.type === 'tabNumber') {
+				isSelectable = true;
+			}
+			selectables.add(params, g, isSelectable, staffPos);
 		}
 	} else if (params.elemset.length > 0)
 		selectables.add(params, params.elemset[0], params.type === 'note', staffPos);

package/src/write/draw/brace.js

@@ -45,7 +45,7 @@ function straightPath(renderer, xLeft, yTop, yBottom, type) {
 		-wCurve*0.1, -hCurve*0.3,
 		-wCurve, -hCurve-spacing.STEP // left bottom
 	);
-	return renderer.paper.path({path:pathString, stroke:renderer.foregroundColor, fill:renderer.foregroundColor, 'class': renderer.controller.classes.generate(type)});
+	return renderer.paper.path({path:pathString, stroke:renderer.foregroundColor, fill:renderer.foregroundColor, 'class': renderer.controller.classes.generate(type), "data-name": type});
 }
 
 function curvyPath(renderer, xLeft, yTop, yBottom, type) {
@@ -61,7 +61,7 @@ function curvyPath(renderer, xLeft, yTop, yBottom, type) {
 		[0, 17.5, -7.5, 6.6, -5, 20, 0],
 		[yHeight/2, yHeight/1.46, yHeight/1.22, yHeight, yHeight/1.19, yHeight/1.42, yHeight/2]);
 
-	return renderer.paper.path({path:pathString, stroke:renderer.foregroundColor, fill:renderer.foregroundColor, 'class': renderer.controller.classes.generate(type)});
+	return renderer.paper.path({path:pathString, stroke:renderer.foregroundColor, fill:renderer.foregroundColor, 'class': renderer.controller.classes.generate(type), "data-name": type});
 }
 
 function curve(xLeft, yTop, xCurve, yCurve) {
@@ -78,7 +78,7 @@ function curve(xLeft, yTop, xCurve, yCurve) {
 var draw = function (renderer, xLeft, yTop, yBottom, type, header, selectables) {//Tony
 	var ret;
 	if (header) {
-		renderer.paper.openGroup({klass: renderer.controller.classes.generate("staff-extra voice-name")});
+		renderer.paper.openGroup({klass: renderer.controller.classes.generate("staff-extra voice-name"), "data-name": type});
 		var position = yTop + (yBottom - yTop) / 2;
 		position = position - renderer.controller.getTextSize.baselineToCenter(header, "voicefont", 'staff-extra voice-name', 0, 1);
 

package/src/write/draw/crescendo.js

@@ -32,7 +32,7 @@ var drawLine = function (renderer, y1, y2, y3, y4, left, right) {
 
 	var pathString = sprintf("M %f %f L %f %f M %f %f L %f %f",
 		left, y1, right, y2, left, y3, right, y4);
-	return printPath(renderer, {path:pathString, highlight: "stroke", stroke:renderer.foregroundColor, 'class': renderer.controller.classes.generate('dynamics decoration')});
+	return printPath(renderer, {path:pathString, highlight: "stroke", stroke:renderer.foregroundColor, 'class': renderer.controller.classes.generate('dynamics decoration'), "data-name": "dynamics"});
 };
 
 module.exports = drawCrescendo;

package/src/write/draw/draw.js

@@ -9,7 +9,6 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 	renderer.moveY(renderer.padding.top);
 	nonMusic(renderer, abcTune.topText, selectables);
 	renderer.moveY(renderer.spacing.music);
-
 	var staffgroups = [];
 	for (var line = 0; line < abcTune.lines.length; line++) {
 		classes.incrLine();
@@ -20,7 +19,7 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 			}
 			if (staffgroups.length >= 1)
 				addStaffPadding(renderer, renderer.spacing.staffSeparation, staffgroups[staffgroups.length - 1], abcLine.staffGroup);
-			var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables);
+			var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables,line);
 			staffgroup.line = line; // If there are non-music lines then the staffgroup array won't line up with the line array, so this keeps track.
 			staffgroups.push(staffgroup);
 		} else if (abcLine.nonMusic) {
@@ -35,8 +34,8 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 	return { staffgroups: staffgroups, selectables: selectables.getElements() };
 }
 
-function engraveStaffLine(renderer, staffGroup, selectables) {
-	drawStaffGroup(renderer, staffGroup, selectables);
+function engraveStaffLine(renderer, staffGroup, selectables,lineNumber) {
+	drawStaffGroup(renderer, staffGroup, selectables,lineNumber);
 	var height = staffGroup.height * spacing.STEP;
 	renderer.y += height;
 	return staffGroup;

package/src/write/draw/dynamics.js

@@ -5,7 +5,14 @@ function drawDynamics(renderer, params, selectables) {
 		window.console.error("Dynamic Element y-coordinate not set.");
 	var scalex = 1;
 	var scaley = 1;
-	var el = printSymbol(renderer, params.anchor.x, params.pitch, params.dec, scalex, scaley, renderer.controller.classes.generate('decoration dynamics'));
+	var el = printSymbol(renderer, params.anchor.x, params.pitch, params.dec, {
+		scalex: scalex,
+		scaley: scaley,
+		klass: renderer.controller.classes.generate('decoration dynamics'),
+		fill:renderer.foregroundColor,
+		stroke: "none",
+		name: "dynamics"
+	});
 	selectables.wrapSvgEl({el_type: "dynamicDecoration", startChar: -1, endChar: -1, decoration: params.dec}, el);
 	return [el];
 }

package/src/write/draw/ending.js

@@ -25,8 +25,8 @@ function drawEnding(renderer, params, linestartx, lineendx, selectables) {
 	pathString += sprintf("M %f %f L %f %f ",
 		linestartx, y, lineendx, y);
 
-	renderer.paper.openGroup({klass: renderer.controller.classes.generate("ending")});
-	printPath(renderer, {path: pathString, stroke: renderer.foregroundColor, fill: renderer.foregroundColor});
+	renderer.paper.openGroup({klass: renderer.controller.classes.generate("ending"), "data-name": "ending"});
+	printPath(renderer, {path: pathString, stroke: renderer.foregroundColor, fill: renderer.foregroundColor, "data-name": "line"});
 	if (params.anchor1)
 		renderText(renderer, {
 			x: roundNumber(linestartx + 5),
@@ -35,7 +35,8 @@ function drawEnding(renderer, params, linestartx, lineendx, selectables) {
 			type: 'repeatfont',
 			klass: 'ending',
 			anchor: "start",
-			noClass: true
+			noClass: true,
+			name: params.text
 		});
 	var g = renderer.paper.closeGroup();
 	selectables.wrapSvgEl({el_type: "ending", startChar: -1, endChar: -1}, g);

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

@@ -14,6 +14,7 @@ var roundNumber = require("./round-number");
 		this.path = [];
 		this.lastM = [0, 0];
 		this.ingroup = true;
+		this.paper.openGroup();
 	};
 
 	Group.prototype.isInGroup = function() {
@@ -41,20 +42,21 @@ var roundNumber = require("./round-number");
 	/**
 	 * End a group of glyphs that will always be moved, scaled and highlighted together
 	 */
-	Group.prototype.endGroup = function (klass) {
+	Group.prototype.endGroup = function (klass, name) {
 		this.ingroup = false;
-		if (this.path.length === 0) return null;
+		//if (this.path.length === 0) return null;
 		var path = "";
 		for (var i = 0; i < this.path.length; i++)
 			path += this.path[i].join(" ");
-		var ret = this.paper.path({
-			path: path,
-			stroke: "none",
-			fill: this.controller.renderer.foregroundColor,
-			'class': this.controller.classes.generate(klass)
-		});
 		this.path = [];
 
+		var ret = this.paper.closeGroup();
+		if (ret) {
+			ret.setAttribute("class", this.controller.classes.generate(klass))
+			ret.setAttribute("fill", this.controller.renderer.foregroundColor)
+			ret.setAttribute("stroke", "none")
+			ret.setAttribute("data-name", name)
+		}
 		return ret;
 	};
 

package/src/write/draw/non-music.js

@@ -4,7 +4,9 @@ var renderText = require('./text');
 function nonMusic(renderer, obj, selectables) {
 	for (var i = 0; i < obj.rows.length; i++) {
 		var row = obj.rows[i];
-		if (row.move) {
+		if (row.absmove) {
+			renderer.absolutemoveY(row.absmove);
+		} else if (row.move) {
 			renderer.moveY(row.move);
 		} else if (row.text) {
 			var x = row.left ? row.left : 0;
@@ -14,28 +16,31 @@ function nonMusic(renderer, obj, selectables) {
 				text: row.text,
 				type: row.font,
 				klass: row.klass,
+				name: row.name,
 				anchor: row.anchor
 			});
 			if (row.absElemType) {
 				selectables.wrapSvgEl({
 					el_type: row.absElemType,
-					startChar: -1,
-					endChar: -1,
+					name: row.name,
+					startChar: row.startChar,
+					endChar: row.endChar,
 					text: row.text
 				}, el);
 			}
 		} else if (row.separator) {
 			drawSeparator(renderer, row.separator)
 		} else if (row.startGroup) {
-			renderer.paper.openGroup({klass: row.klass});
+			renderer.paper.openGroup({klass: row.klass, "data-name": row.name});
 		} else if (row.endGroup) {
 			// TODO-PER: also create a history element with the title "row.endGroup"
 			var g = renderer.paper.closeGroup();
 			if (row.absElemType)
 				selectables.wrapSvgEl({
 					el_type: row.absElemType,
-					startChar: -1,
-					endChar: -1,
+					name: row.name,
+					startChar: row.startChar,
+					endChar: row.endChar,
 					text: ""
 				}, g);
 		}

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

@@ -0,0 +1,24 @@
+var sprintf = require('./sprintf');
+var roundNumber = require("./round-number");
+
+function printLine(renderer, x1, x2, y , klass, name ,dy ) {
+  if (!dy ) dy = 0.35;
+  var fill = renderer.foregroundColor;
+  x1 = roundNumber(x1);
+  x2 = roundNumber(x2);
+  var y1 = roundNumber(y - dy);
+  var y2 = roundNumber(y + dy);
+  var pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x1, y1, x2, y1,
+    x2, y2, x1, y2);
+  var options = { path: pathString, stroke: "none", fill: fill };
+  if (name)
+    options['data-name'] = name;
+  if (klass)
+    options['class'] = klass;
+  var ret = renderer.paper.pathToBack(options);
+
+  return ret;
+}
+
+module.exports = printLine;
+

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

@@ -1,7 +1,7 @@
 var elementGroup = require('./group-elements');
 var roundNumber = require("./round-number");
 
-function printStem(renderer, x, dx, y1, y2) {
+function printStem(renderer, x, dx, y1, y2, klass, name) {
 	if (dx<0 || y1<y2) { // correct path "handedness" for intersection with other elements
 		var tmp = roundNumber(y2);
 		y2 = roundNumber(y1);
@@ -12,18 +12,19 @@ function printStem(renderer, x, dx, y1, y2) {
 	}
 	x = roundNumber(x);
 	var x2 = roundNumber(x+dx);
-	var fill = renderer.foregroundColor;
 	var pathArray = [["M",x,y1],["L", x, y2],["L", x2, y2],["L",x2,y1],["z"]];
-	if (elementGroup.isInGroup()) {
-		elementGroup.addPath(pathArray);
-	} else {
-		var path = "";
-		for (var i = 0; i < pathArray.length; i++)
-			path += pathArray[i].join(" ");
-		var ret = renderer.paper.pathToBack({path:path, stroke:"none", fill:fill, 'class': renderer.controller.classes.generate('stem')});
-
-		return ret;
+	var attr = { path: ""};
+	for (var i = 0; i < pathArray.length; i++)
+		attr.path += pathArray[i].join(" ");
+	if (klass)
+		attr['class'] = klass;
+	if (name)
+		attr['data-name'] = name;
+	if (!elementGroup.isInGroup()) {
+		attr.stroke ="none";
+		attr.fill = renderer.foregroundColor;
 	}
+	return renderer.paper.pathToBack(attr);
 }
 
 module.exports = printStem;

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

@@ -7,22 +7,23 @@ var elementGroup = require('./group-elements');
  * if symbol is a multichar string without a . (as in scripts.staccato) 1 symbol per char is assumed
  * not scaled if not in printgroup
  */
-function printSymbol(renderer, x, offset, symbol, scalex, scaley, klass) {
+function printSymbol(renderer, x, offset, symbol, options) {
+	// TODO-PER: what happened to scalex, and scaley? That might have been a bug introduced in refactoring
 	var el;
 	var ycorr;
 	if (!symbol) return null;
 	if (symbol.length > 1 && symbol.indexOf(".") < 0) {
-		renderer.paper.openGroup({klass: klass});
+		renderer.paper.openGroup({"data-name": options.name, klass: options.klass});
 		var dx = 0;
 		for (var i = 0; i < symbol.length; i++) {
 			var s = symbol.charAt(i);
 			ycorr = glyphs.getYCorr(s);
-			el = glyphs.printSymbol(x + dx, renderer.calcY(offset + ycorr), s, renderer.paper, '', "none", renderer.foregroundColor);
+			el = glyphs.printSymbol(x + dx, renderer.calcY(offset + ycorr), s, renderer.paper, {stroke: options.stroke, fill: options.fill, "data-name": options.name});
 			if (el) {
 				if (i < symbol.length - 1)
 					dx += kernSymbols(s, symbol.charAt(i + 1), glyphs.getSymbolWidth(s));
 			} else {
-				renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start'});
+				renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start'}, false);
 			}
 		}
 		var g = renderer.paper.closeGroup();
@@ -30,14 +31,14 @@ function printSymbol(renderer, x, offset, symbol, scalex, scaley, klass) {
 	} else {
 		ycorr = glyphs.getYCorr(symbol);
 		if (elementGroup.isInGroup()) {
-			elementGroup.addPath(glyphs.getPathForSymbol(x, renderer.calcY(offset + ycorr), symbol, scalex, scaley));
+			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, "none", renderer.foregroundColor);
-			if (el) {
-				return el;
-			} else
-				renderText(renderer, { x: x, y: renderer.y, text: "no symbol:" + symbol, type: "debugfont", klass: 'debug-msg', anchor: 'start'});
+			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);
 		return null;
 	}
 }

package/src/write/draw/relative.js

@@ -9,40 +9,60 @@ function drawRelativeElement(renderer, params, bartop) {
 	var y = renderer.calcY(params.pitch);
 	switch(params.type) {
 		case "symbol":
-			if (params.c===null) return null;
+			if (params.c === null) return null;
 			var klass = "symbol";
 			if (params.klass) klass += " " + params.klass;
-			params.graphelem = printSymbol(renderer, params.x, params.pitch, params.c, params.scalex, params.scaley, renderer.controller.classes.generate(klass), "none", renderer.foregroundColor); break;
+			params.graphelem = printSymbol(renderer, params.x, params.pitch, params.c, {
+				scalex: params.scalex,
+				scaley: params.scaley,
+				klass: renderer.controller.classes.generate(klass),
+//				fill:"none",
+//				stroke: renderer.foregroundColor,
+				name: params.name
+			});
+			break;
 		case "debug":
-			params.graphelem = renderText(renderer, { x: params.x, y: renderer.calcY(15), text: ""+params.c, type: "debugfont", klass: renderer.controller.classes.generate('debug-msg'), anchor: 'start', centerVertically: false, dim: params.dim}); break;
+			params.graphelem = renderText(renderer, { x: params.x, y: renderer.calcY(15), text: "" + params.c, type: "debugfont", klass: renderer.controller.classes.generate('debug-msg'), anchor: 'start', centerVertically: false, dim: params.dim }, false);
+			break;
+		case "tabNumber":
+			var hAnchor = "middle";
+			var tabFont = "tabnumberfont";
+			var tabClass = 'tab-number';
+			if (params.isGrace) {
+				tabFont = "tabgracefont";
+				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);
+			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});
+			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});
+			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()});
+			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: "middle", centerVertically: true, dim: params.dim});
+			params.graphelem = renderText(renderer, { x: params.x, y: y+6, text: params.c, type: 'annotationfont', klass: renderer.controller.classes.generate("annotation"), anchor: "middle", 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()});
+			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});
+			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});
+			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)); break; // bartop can't be 0
+			params.graphelem = printStem(renderer, params.x, params.linewidth, 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)); break;
+			params.graphelem = printStem(renderer, params.x, params.linewidth, y, renderer.calcY(params.pitch2), 'abcjs-stem', 'stem'); break;
 		case "ledger":
-			params.graphelem = printStaffLine(renderer, params.x, params.x+params.w, params.pitch, renderer.controller.classes.generate("ledger")); break;
+			params.graphelem = printStaffLine(renderer, params.x, params.x+params.w, params.pitch, "abcjs-ledger", "ledger"); break;
 	}
 	if (params.scalex!==1 && params.graphelem) {
 		scaleExistingElem(renderer.paper, params.graphelem, params.scalex, params.scaley, params.x, y);

package/src/write/draw/selectables.js

@@ -10,9 +10,9 @@ function Selectables(paper, selectTypes, tuneNumber) {
 
 Selectables.prototype.getElements = function () {
 	return this.elements;
-}
+};
 
-Selectables.prototype.add = function (absEl, svgEl, isNote, staffPos) {
+Selectables.prototype.add = function (absEl, svgEl, isNoteOrTabNumber, staffPos) {
 	if (!this.canSelect(absEl))
 		return;
 	var params;
@@ -21,7 +21,7 @@ Selectables.prototype.add = function (absEl, svgEl, isNote, staffPos) {
 	else
 		params = { selectable: true, tabindex: 0, "data-index": this.elements.length};
 	this.paper.setAttributeOnElement(svgEl, params);
-	var sel = { absEl: absEl, svgEl: svgEl, isDraggable: isNote };
+	var sel = { absEl: absEl, svgEl: svgEl, isDraggable: isNoteOrTabNumber };
 	if (staffPos !== undefined)
 		sel.staffPos = staffPos;
 	this.elements.push(sel);
@@ -36,8 +36,11 @@ Selectables.prototype.canSelect = function (absEl) {
 	if (this.selectTypes === true)
 		return true;
 	if (this.selectTypes === undefined) {
-		// by default, only notes can be clicked.
-		return absEl.abcelem.el_type === 'note';
+		// by default, only notes and tab numbers can be clicked.
+		if (absEl.abcelem.el_type === 'note' || absEl.abcelem.el_type === 'tabNumber') {
+			return true;
+		}
+		return false;
 	}
 	return this.selectTypes.indexOf(absEl.abcelem.el_type) >= 0;
 };
@@ -49,7 +52,7 @@ Selectables.prototype.wrapSvgEl = function(abcelem, el) {
 		elemset: [el],
 		highlight: highlight,
 		unhighlight: unhighlight
-	}
+	};
 	this.add(absEl, el, false);
 };
 

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

@@ -4,8 +4,9 @@ var drawVoice = require('./voice');
 var printStaff = require('./staff');
 var printDebugBox = require('./debug-box');
 var printStem = require('./print-stem');
+var nonMusic = require('./non-music');
 
-function drawStaffGroup(renderer, params, selectables) {
+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.
@@ -14,7 +15,7 @@ function drawStaffGroup(renderer, params, selectables) {
 	var colorIndex;
 
 	// An invisible marker is useful to be able to find where each system starts.
-	addInvisibleMarker(renderer,"abcjs-top-of-system");
+	addInvisibleMarker(renderer, "abcjs-top-of-system");
 
 	var startY = renderer.y; // So that it can be restored after we're done.
 	// Set the absolute Y position for each staff here, so the voice drawing below can just use if.
@@ -28,7 +29,7 @@ function drawStaffGroup(renderer, params, selectables) {
 				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,
 						y: renderer.calcY(staff1.originalTop),
@@ -68,20 +69,40 @@ function drawStaffGroup(renderer, params, selectables) {
 	var topLine; // these are to connect multiple staves. We need to remember where they are.
 	var bottomLine;
 
+	var linePitch = 2;
 	var bartop = 0;
 	for (var i=0;i<params.voices.length;i++) {
 		var staff = params.voices[i].staff;
-		renderer.y = staff.absoluteY;
+		var tabName = params.voices[i].tabNameInfos;
+		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(2);
+			bottomLine  = renderer.calcY(linePitch);
 			if (staff.lines !== 0) {
+				if (staff.linePitch) {
+					linePitch = staff.linePitch; 
+				}
 				renderer.controller.classes.newMeasure();
-				printStaff(renderer, params.startx, params.w, staff.lines);
+				var lines = printStaff(renderer, params.startx, params.w, staff.lines, staff.linePitch, staff.dy);
+				bottomLine = lines[1];
+				staff.bottomLine = bottomLine;
+				staff.topLine = lines[0];
+				// rework bartop when tabs are present with current staff
+				if (staff.hasTab) {
+					// do not link to staff above  (ugly looking)
+					bartop = staff.topLine;
+				}
+				if (staff.hasStaff) {
+					// this is a tab
+					bartop = staff.hasStaff.topLine;
+					params.voices[i].barto = true;
+					params.voices[i].topLine = topLine;
+				}
+
 			}
 			printBrace(renderer, staff.absoluteY, params.brace, i, selectables);
 			printBrace(renderer, staff.absoluteY, params.bracket, i, selectables);
@@ -91,9 +112,21 @@ function drawStaffGroup(renderer, params, selectables) {
 			zero: renderer.y,
 			height: params.height*spacing.STEP
 		});
+		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({ move: tabName.textSize.height });
+			nonMusic(renderer, r);
+			tabNameHeight = tabName.textSize.height;
+		}
+
 		renderer.controller.classes.newMeasure();
 		if (!params.voices[i].duplicate) {
-			bartop = renderer.calcY(2); // This connects the bar lines between two different staves.
+				bartop = renderer.calcY(2 + tabNameHeight); // This connects the bar lines between two different staves.
 //			if (staff.bottom < 0)
 //				renderer.moveY(spacing.STEP, -staff.bottom);
 		}
@@ -101,8 +134,11 @@ function drawStaffGroup(renderer, params, selectables) {
 	renderer.controller.classes.newMeasure();
 
 	// connect all the staves together with a vertical line
-	if (params.staffs.length>1) {
-		printStem(renderer, params.startx, 0.6, topLine, bottomLine);
+	var staffSize = params.staffs.length;
+	if (staffSize > 1) {
+		topLine = params.staffs[0].topLine;
+		bottomLine = params.staffs[staffSize - 1].bottomLine;
+		printStem(renderer, params.startx, 0.6, topLine, bottomLine, null);
 	}
 	renderer.y = startY;
 

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

@@ -1,22 +1,8 @@
-var sprintf = require('./sprintf');
-var roundNumber = require("./round-number");
+var printLine = require('./print-line');
 
-function printStaffLine(renderer, x1,x2, pitch, klass) {
-	var dy = 0.35;
-	var fill = renderer.foregroundColor;
+function printStaffLine(renderer, x1,x2, pitch, klass, name , dy) {
 	var y = renderer.calcY(pitch);
-	x1 = roundNumber(x1);
-	x2 = roundNumber(x2);
-	var y1 = roundNumber(y-dy);
-	var y2 = roundNumber(y+dy);
-	var pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x1, y1, x2, y1,
-		x2, y2, x1, y2);
-	var options = {path:pathString, stroke:"none", fill:fill};
-	if (klass)
-		options['class'] = klass;
-	var ret = renderer.paper.pathToBack(options);
-
-	return ret;
+	return printLine(renderer,x1,x2,y,klass,name,dy);
 }
 
 module.exports = printStaffLine;

package/src/write/draw/staff.js

@@ -1,18 +1,31 @@
 var printStaffLine = require('./staff-line');
 
-function printStaff(renderer, startx, endx, numLines) {
+function printStaff(renderer, startx, endx, numLines , linePitch , dy) {
 	var klass = "abcjs-top-line";
+	var pitch = 2;
+	if (linePitch) {
+		pitch = linePitch;
+	}
 	renderer.paper.openGroup({ prepend: true, klass: renderer.controller.classes.generate("abcjs-staff") });
 	// If there is one line, it is the B line. Otherwise, the bottom line is the E line.
+	var firstYLine = 0;
+	var lastYLine = 0;
 	if (numLines === 1) {
 		printStaffLine(renderer, startx,endx,6, klass);
 	} else {
+
 		for (var i = numLines - 1; i >= 0; i--) {
-			printStaffLine(renderer, startx, endx, (i + 1) * 2, klass);
+			var curpitch = (i + 1) * pitch;
+			lastYLine = renderer.calcY(curpitch);
+			if (firstYLine == 0) {
+				firstYLine = lastYLine;
+			}
+			printStaffLine(renderer, startx, endx, curpitch, klass , null , dy) ;
 			klass = undefined;
 		}
 	}
 	renderer.paper.closeGroup();
+	return [firstYLine,lastYLine];
 }
 
 module.exports = printStaff;