abcjs 6.0.0-beta.8 → 6.0.1

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

@@ -0,0 +1,30 @@
+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
+		var tmp = roundNumber(y2);
+		y2 = roundNumber(y1);
+		y1 = tmp;
+	} else {
+		y1 = roundNumber(y1);
+		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: ""};
+	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

@@ -0,0 +1,59 @@
+var renderText = require('./text');
+var glyphs = require('../abc_glyphs');
+var elementGroup = require('./group-elements');
+
+/**
+ * assumes this.y is set appropriately
+ * 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, 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) {
+		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});
+		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, {stroke: options.stroke, fill: options.fill});
+			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'}, false);
+			}
+		}
+		var g = renderer.paper.closeGroup();
+		return g;
+	} else {
+		ycorr = glyphs.getYCorr(symbol);
+		if (elementGroup.isInGroup()) {
+			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});
+		}
+		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;
+	}
+}
+
+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;
+	if (lastSymbol === 'p' && thisSymbol === 'p')
+		width = width*5/6;
+	if (lastSymbol === 'f' && thisSymbol === 'z')
+		width = width*5/8;
+	return width;
+}
+
+module.exports = printSymbol;

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

@@ -0,0 +1,18 @@
+var sprintf = require("./sprintf");
+
+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')});
+
+}
+
+module.exports = printVerticalLine;

package/src/write/draw/relative.js

@@ -0,0 +1,77 @@
+var renderText = require('./text');
+var printStem = require('./print-stem');
+var printStaffLine = require('./staff-line');
+var printSymbol = require('./print-symbol');
+
+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) {
+		case "symbol":
+			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, {
+				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 }, 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, 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);
+			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);
+			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}, 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);
+			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);
+			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);
+			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
+		case "stem":
+			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, "abcjs-ledger", "ledger"); break;
+	}
+	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;"});
+}
+
+module.exports = drawRelativeElement;

package/src/write/draw/round-number.js

@@ -0,0 +1,5 @@
+function roundNumber(x) {
+	return parseFloat(x.toFixed(2));
+}
+
+module.exports = roundNumber;

package/src/write/draw/selectables.js

@@ -0,0 +1,59 @@
+var highlight = require('../highlight');
+var unhighlight = require('../unhighlight');
+
+function Selectables(paper, selectTypes, tuneNumber) {
+	this.elements = [];
+	this.paper = paper;
+	this.tuneNumber = tuneNumber;
+	this.selectTypes = selectTypes;
+}
+
+Selectables.prototype.getElements = function () {
+	return this.elements;
+};
+
+Selectables.prototype.add = function (absEl, svgEl, isNoteOrTabNumber, staffPos) {
+	if (!this.canSelect(absEl))
+		return;
+	var params;
+	if (this.selectTypes === undefined)
+		params = { selectable: false, "data-index": this.elements.length}; // This is the old behavior.
+	else
+		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)
+		sel.staffPos = staffPos;
+	this.elements.push(sel);
+
+};
+
+Selectables.prototype.canSelect = function (absEl) {
+	if (this.selectTypes === false)
+		return false;
+	if (!absEl || !absEl.abcelem)
+		return false;
+	if (this.selectTypes === true)
+		return true;
+	if (this.selectTypes === undefined) {
+		// 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;
+};
+
+Selectables.prototype.wrapSvgEl = function(abcelem, el) {
+	var absEl = {
+		tuneNumber: this.tuneNumber,
+		abcelem: abcelem,
+		elemset: [el],
+		highlight: highlight,
+		unhighlight: unhighlight
+	};
+	this.add(absEl, el, false);
+};
+
+module.exports = Selectables;

package/src/write/draw/separator.js

@@ -0,0 +1,16 @@
+function drawSeparator(renderer, width) {
+	var fill = "rgba(0,0,0,255)";
+	var stroke = "rgba(0,0,0,0)";
+	var y = Math.round(renderer.y);
+	var staffWidth = renderer.controller.width;
+	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 ' + x1 + ' ' + y + ' z';
+	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

@@ -0,0 +1,45 @@
+function setPaperSize(renderer, maxwidth, scale, responsive) {
+	var w = (maxwidth+renderer.padding.right)*scale;
+	var h = (renderer.y)*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.
+
+	// for accessibility
+	if (renderer.ariaLabel !== '') {
+		var text = "Sheet Music";
+		if (renderer.abctune && renderer.abctune.metaText && renderer.abctune.metaText.title)
+			text += " for \"" + renderer.abctune.metaText.title + '"';
+		renderer.paper.setTitle(text);
+		var label = renderer.ariaLabel ? renderer.ariaLabel : text;
+		renderer.paper.setAttribute("aria-label", label);
+	}
+
+	// for dragging - don't select during drag
+	var styles = [
+		"-webkit-touch-callout: none;",
+		"-webkit-user-select: none;",
+		"-khtml-user-select: none;",
+		"-moz-user-select: none;",
+		"-ms-user-select: none;",
+		"user-select: none;"
+	];
+	renderer.paper.insertStyles(".abcjs-dragging-in-progress text, .abcjs-dragging-in-progress tspan {" + styles.join(" ") + "}");
+
+	var parentStyles = { overflow: "hidden" };
+	if (responsive === 'resize') {
+		renderer.paper.setResponsiveWidth(w, h);
+	} else {
+		parentStyles.width = "";
+		parentStyles.height = h + "px";
+		if (scale < 1) {
+			parentStyles.width = w + "px";
+			renderer.paper.setSize(w / scale, h / scale);
+		} else
+			renderer.paper.setSize(w, h);
+	}
+	renderer.paper.setScale(scale);
+	renderer.paper.setParentStyles(parentStyles);
+}
+
+module.exports = setPaperSize;

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

@@ -0,0 +1,226 @@
+var spacing = require('../abc_spacing');
+var drawBrace = require('./brace');
+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,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.
+	// If there are multiple staves, then renderer.y will be incremented for each new staff.
+
+	var colorIndex;
+
+	// An invisible marker is useful to be able to find where each system starts.
+	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.
+	for (var j = 0; j < params.staffs.length; j++) {
+		var staff1 = params.staffs[j];
+		//renderer.printHorizontalLine(50, renderer.y, "start");
+		renderer.moveY(spacing.STEP, staff1.top);
+		staff1.absoluteY = renderer.y;
+		if (renderer.showDebug) {
+			if (renderer.showDebug.indexOf("box") >= 0) {
+				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"});
+				printDebugBox(renderer,
+					{ 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 });
+				colorIndex = 0;
+				debugPrintGridItem(staff1, 'chordHeightAbove');
+				debugPrintGridItem(staff1, 'chordHeightBelow');
+				debugPrintGridItem(staff1, 'dynamicHeightAbove');
+				debugPrintGridItem(staff1, 'dynamicHeightBelow');
+				debugPrintGridItem(staff1, 'endingHeightAbove');
+				debugPrintGridItem(staff1, 'lyricHeightAbove');
+				debugPrintGridItem(staff1, 'lyricHeightBelow');
+				debugPrintGridItem(staff1, 'partHeightAbove');
+				debugPrintGridItem(staff1, 'tempoHeightAbove');
+				debugPrintGridItem(staff1, 'volumeHeightAbove');
+				debugPrintGridItem(staff1, 'volumeHeightBelow');
+			}
+		}
+		renderer.moveY(spacing.STEP, -staff1.bottom);
+		if (renderer.showDebug) {
+			if (renderer.showDebug.indexOf("grid") >= 0) {
+				renderer.paper.dottedLine({
+					x1: renderer.padding.left,
+					x2: renderer.padding.left + renderer.controller.width,
+					y1: renderer.y,
+					y2: renderer.y,
+					stroke: "#0000aa"
+				});
+			}
+		}
+	}
+	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;
+		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(linePitch);
+			if (staff.lines !== 0) {
+				if (staff.linePitch) {
+					linePitch = staff.linePitch; 
+				}
+				renderer.controller.classes.newMeasure();
+				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);
+		}
+		drawVoice(renderer, params.voices[i], bartop, selectables, {
+			top: startY,
+			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 + tabNameHeight); // This connects the bar lines between two different staves.
+//			if (staff.bottom < 0)
+//				renderer.moveY(spacing.STEP, -staff.bottom);
+		}
+	}
+	renderer.controller.classes.newMeasure();
+
+	// connect all the staves together with a vertical line
+	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;
+
+	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 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,
+					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 },
+				key.substr(0, 4));
+			colorIndex += 1; if (colorIndex > 6) colorIndex = 0;
+		}
+	}
+}
+
+function printBrace(renderer, absoluteY, brace, index, selectables) {
+	if (brace) {
+		for (var i = 0; i < brace.length; i++) {
+			if (brace[i].isStartVoice(index)) {
+				brace[i].startY = absoluteY - spacing.STEP * 10;
+				brace[i].elemset = drawBrace(renderer, brace[i], selectables);
+			}
+		}
+	}
+}
+
+function addInvisibleMarker(renderer, className) {
+	var y = Math.round(renderer.y);
+	renderer.paper.pathToBack({path:"M 0 " + y + " L 0 0", stroke:"none", fill:"none", "stroke-opacity": 0, "fill-opacity": 0, 'class': renderer.controller.classes.generate(className), 'data-vertical': y });
+}
+
+function boxAllElements(renderer, voices, which) {
+	for (var i = 0; i < which.length; i++) {
+		var children = voices[which[i]].children;
+		for (var j = 0; j < children.length; j++) {
+			var elem = children[j];
+			var coords = elem.getFixedCoords();
+			if (elem.invisible || coords.t === undefined || coords.b === undefined)
+				continue;
+			var height = (coords.t - coords.b)*spacing.STEP;
+			printDebugBox(renderer,
+				{ x: coords.x,
+					y: renderer.calcY(coords.t),
+					width: coords.w,
+					height: height,
+					fill: "#88e888",
+					"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();
+					printDebugBox(renderer,
+						{ x: chord.left,
+							y: y,
+							width: chord.right-chord.left,
+							height: relElem.dim.font.size,
+							fill: "none",
+							stroke: "#4aa93d",
+							"stroke-opacity": 0.8
+						});
+				}
+			}
+		}
+	}
+}
+
+module.exports = drawStaffGroup;

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

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

package/src/write/draw/staff.js

@@ -0,0 +1,33 @@
+var printStaffLine = require('./staff-line');
+
+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);
+		firstYLine = renderer.calcY(10);
+		lastYLine = renderer.calcY(2);
+	} else {
+
+		for (var i = numLines - 1; i >= 0; i--) {
+			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;

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

@@ -0,0 +1,40 @@
+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;
+}
+
+TabLine.prototype.printVertical = function (y1, y2, x) {
+  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);
+}
+
+module.exports = TabLine;
+

package/src/write/draw/tempo.js

@@ -0,0 +1,45 @@
+var drawRelativeElement = require('./relative');
+var renderText = require('./text');
+
+function drawTempo(renderer, params) {
+	var x = params.x;
+	if (params.pitch === undefined)
+		window.console.error("Tempo Element y-coordinate not set.");
+
+	//var tempoGroup;
+	params.tempo.el_type = "tempo";
+//	renderer.wrapInAbsElem(params.tempo, "abcjs-tempo", function () {
+		//renderer.paper.openGroup({klass: renderer.controller.classes.generate("tempo wha")});
+		// The text is aligned with extra room for descenders but numbers look like they are a little too high, so bump it a little.
+	var descenderHeight = 2;
+		var y = renderer.calcY(params.pitch) + 2;
+		var text;
+		var size;
+		if (params.tempo.preString) {
+			text = renderText(renderer, {x:x, y: y, text: params.tempo.preString, type: 'tempofont', klass: 'abcjs-tempo', anchor: "start", noClass: true, "dominant-baseline": "ideographic", name: "pre"}, true);
+			size = renderer.controller.getTextSize.calc(params.tempo.preString, 'tempofont', 'tempo', text);
+			var preWidth = size.width;
+			var charWidth = preWidth / params.tempo.preString.length; // Just get some average number to increase the spacing.
+			x += preWidth + charWidth;
+		}
+		if (params.note) {
+			params.note.setX(x);
+			for (var i = 0; i < params.note.children.length; i++)
+				drawRelativeElement(renderer, params.note.children[i], x);
+			x += (params.note.w + 5);
+			var str = "= " + params.tempo.bpm;
+			text = renderText(renderer, {x:x, y: y, text: str, type: 'tempofont', klass: 'abcjs-tempo', anchor: "start", noClass: true, name: "beats"});
+			size = renderer.controller.getTextSize.calc(str, 'tempofont', 'tempo', text);
+			var postWidth = size.width;
+			var charWidth2 = postWidth / str.length; // Just get some average number to increase the spacing.
+			x += postWidth + charWidth2;
+		}
+		if (params.tempo.postString) {
+			renderText(renderer, {x:x, y: y, text: params.tempo.postString, type: 'tempofont', klass: 'abcjs-tempo', anchor: "start", noClass: true, name: "post"}, true);
+		}
+		//tempoGroup = renderer.paper.closeGroup();
+//	});
+	//return [tempoGroup];
+}
+
+module.exports = drawTempo;