abcjs 6.0.0-beta.8 → 6.0.1

package/src/write/classes.js

@@ -0,0 +1,100 @@
+var Classes = function Classes(options) {
+	this.shouldAddClasses = options.shouldAddClasses;
+	this.reset();
+}
+
+Classes.prototype.reset = function () {
+	this.lineNumber = null;
+	this.voiceNumber = null;
+	this.measureNumber = null;
+	this.measureTotalPerLine = [];
+	this.noteNumber = null;
+}
+
+Classes.prototype.incrLine = function () {
+	if (this.lineNumber === null)
+		this.lineNumber = 0;
+	else
+		this.lineNumber++;
+	this.voiceNumber = null;
+	this.measureNumber = null;
+	this.noteNumber = null;
+};
+
+Classes.prototype.incrVoice = function () {
+	if (this.voiceNumber === null)
+		this.voiceNumber = 0;
+	else
+		this.voiceNumber++;
+	this.measureNumber = null;
+	this.noteNumber = null;
+};
+
+Classes.prototype.isInMeasure = function () {
+	return this.measureNumber !== null;
+};
+
+Classes.prototype.newMeasure = function () {
+	if (this.measureNumber)
+		this.measureTotalPerLine[this.lineNumber] = this.measureNumber;
+	this.measureNumber = null;
+	this.noteNumber = null;
+};
+
+Classes.prototype.startMeasure = function () {
+	this.measureNumber = 0;
+	this.noteNumber = 0;
+};
+
+Classes.prototype.incrMeasure = function () {
+	this.measureNumber++;
+	this.noteNumber = 0;
+};
+
+Classes.prototype.incrNote = function () {
+	this.noteNumber++;
+};
+
+Classes.prototype.measureTotal = function () {
+	var total = 0;
+	for (var i = 0; i < this.lineNumber; i++)
+		total += this.measureTotalPerLine[i] ? this.measureTotalPerLine[i] : 0; // This can be null when non-music things are present.
+	if (this.measureNumber)
+		total += this.measureNumber;
+	return total;
+};
+
+Classes.prototype.getCurrent = function (c) {
+	return {
+		line: this.lineNumber,
+		measure: this.measureNumber,
+		measureTotal: this.measureTotal(),
+		voice: this.voiceNumber,
+		note: this.noteNumber
+	};
+};
+
+Classes.prototype.generate = function (c) {
+	if (!this.shouldAddClasses)
+		return "";
+	var ret = [];
+	if (c && c.length > 0) ret.push(c);
+	if (this.lineNumber !== null) ret.push("l"+this.lineNumber);
+	if (this.measureNumber !== null) ret.push("m"+this.measureNumber);
+	if (this.measureNumber !== null) ret.push("mm"+this.measureTotal()); // measureNumber is null between measures so this is still the test for measureTotal
+	if (this.voiceNumber !== null)  ret.push("v"+this.voiceNumber);
+	if (c && (c.indexOf('note') >= 0 || c.indexOf('rest') >= 0 || c.indexOf('lyric') >= 0 ) && this.noteNumber !== null) ret.push("n"+this.noteNumber);
+	// add a prefix to all classes that abcjs adds.
+	if (ret.length > 0) {
+		ret = ret.join(' '); // Some strings are compound classes - that is, specify more than one class in a string.
+		ret = ret.split(' ');
+		for (var i = 0; i < ret.length; i++) {
+			if (ret[i].indexOf('abcjs-') !== 0 && ret[i].length > 0) // if the prefix doesn't already exist and the class is not blank.
+				ret[i] = 'abcjs-' + ret[i];
+		}
+	}
+	return ret.join(' ');
+};
+
+
+module.exports = Classes;

package/src/write/draw/absolute.js

@@ -0,0 +1,68 @@
+var drawTempo = require('./tempo');
+var drawRelativeElement = require('./relative');
+var spacing = require('../abc_spacing');
+var setClass = require('../set-class');
+var elementGroup = require('./group-elements');
+
+function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
+	if (params.invisible) return;
+	var isTempo = params.children.length > 0 && params.children[0].type === "TempoElement";
+	params.elemset = [];
+	elementGroup.beginGroup(renderer.paper, renderer.controller);
+	for (var i=0; i<params.children.length; i++) {
+		var child = params.children[i];
+		switch (child.type) {
+			case "TempoElement":
+				drawTempo(renderer, child);
+				break;
+			default:
+				drawRelativeElement(renderer, child, bartop);
+		}
+	}
+	var klass = params.type;
+	if (params.type === 'note' || params.type === 'rest') {
+		params.counters = renderer.controller.classes.getCurrent();
+		klass += ' d' + Math.round(params.durationClass*1000)/1000;
+		klass = klass.replace(/\./g, '-');
+		if (params.abcelem.pitches) {
+			for (var j = 0; j < params.abcelem.pitches.length; j++) {
+				klass += ' p' + params.abcelem.pitches[j].pitch;
+			}
+		}
+	}
+	var g = elementGroup.endGroup(klass, params.type);
+	if (g) {
+		if (isTempo) {
+			params.startChar = params.abcelem.startChar;
+			params.endChar = params.abcelem.endChar;
+			selectables.add(params, g, false, staffPos);
+		} else {
+			params.elemset.push(g);
+			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);
+	// If there was no output, then don't add to the selectables. This happens when using the "y" spacer, for instance.
+
+	if (params.klass)
+		setClass(params.elemset, "mark", "", "#00ff00");
+	if (params.hint)
+		setClass(params.elemset, "abcjs-hint", "", null);
+	params.abcelem.abselem = params;
+
+	if (params.heads && params.heads.length > 0) {
+		params.notePositions = [];
+		for (var jj = 0; jj < params.heads.length; jj++) {
+			params.notePositions.push({
+				x: params.heads[jj].x + params.heads[jj].w/2,
+				y: staffPos.zero - params.heads[jj].pitch * spacing.STEP
+			});
+		}
+	}
+}
+
+module.exports = drawAbsolute;

package/src/write/draw/beam.js

@@ -0,0 +1,56 @@
+var printPath = require('./print-path');
+var roundNumber = require("./round-number");
+
+function drawBeam(renderer, params) {
+	if (params.beams.length === 0) return;
+
+	var pathString = "";
+	for (var i = 0; i < params.beams.length; i++) {
+		var beam = params.beams[i];
+		if (beam.split) {
+			var slope = getSlope(renderer, beam.startX, beam.startY, beam.endX, beam.endY);
+			var xes = [ ];
+			for (var j = 0; j < beam.split.length; j+=2) {
+				xes.push([beam.split[j], beam.split[j+1]]);
+			}
+			for (j = 0; j < xes.length; j++) {
+				var y1 = getY(beam.startX, beam.startY, slope, xes[j][0]);
+				var y2 = getY(beam.startX, beam.startY, slope, xes[j][1]);
+				pathString += draw(renderer, xes[j][0], y1, xes[j][1], y2, beam.dy);
+			}
+		} else
+			pathString += draw(renderer, beam.startX, beam.startY, beam.endX, beam.endY, beam.dy);
+	}
+	var durationClass = ("abcjs-d"+params.duration).replace(/\./g,"-");
+	var klasses = renderer.controller.classes.generate('beam-elem '+durationClass);
+	var el = printPath(renderer, {
+		path: pathString,
+		stroke: "none",
+		fill: renderer.foregroundColor,
+		'class': klasses
+	});
+	return [el];
+}
+
+function draw(renderer, startX, startY, endX, endY, dy) {
+	// the X coordinates are actual coordinates, but the Y coordinates are in pitches.
+	startY = roundNumber(renderer.calcY(startY));
+	endY = roundNumber(renderer.calcY(endY));
+	startX = roundNumber(startX);
+	endX = roundNumber(endX);
+	var startY2 = roundNumber(startY+dy);
+	var endY2 = roundNumber(endY+dy);
+	return "M" + startX + " " + startY + " L" + endX + " " + endY +
+		"L" + endX + " " + endY2 + " L" + startX + " " + startY2 + "z";
+}
+
+function getSlope(renderer, startX, startY, endX, endY) {
+	return (endY - startY) / (endX - startX);
+}
+
+function getY(startX, startY, slope, currentX) {
+	var x = currentX - startX;
+	return startY + x*slope;
+}
+
+module.exports = drawBeam;

package/src/write/draw/brace.js

@@ -0,0 +1,106 @@
+var sprintf = require('./sprintf');
+var spacing = require('../abc_spacing');
+var renderText = require('./text');
+
+function drawBrace(renderer, params, selectables) {
+	// The absoluteY number is the spot where the note on the first ledger line is drawn (i.e. middle C if treble clef)
+	// The STEP offset here moves it to the top and bottom lines
+	var startY = params.startVoice.staff.absoluteY - spacing.STEP*10;
+	if (params.endVoice && params.endVoice.staff)
+		params.endY = params.endVoice.staff.absoluteY - spacing.STEP*2;
+	else if (params.lastContinuedVoice && params.lastContinuedVoice.staff)
+		params.endY = params.lastContinuedVoice.staff.absoluteY - spacing.STEP*2;
+	else
+		params.endY = params.startVoice.staff.absoluteY - spacing.STEP*2;
+	return draw(renderer, params.x,startY, params.endY, params.type, params.header, selectables);
+}
+
+function straightPath(renderer, xLeft, yTop, yBottom, type) {
+	xLeft += spacing.STEP;
+	var xLineWidth = spacing.STEP*0.75;
+	var yOverlap = spacing.STEP*0.75;
+	var height = yBottom - yTop;
+	// Straight line
+	var pathString = sprintf("M %f %f l %f %f l %f %f l %f %f z",
+		xLeft, yTop-yOverlap, // top left line
+		0, height+yOverlap*2, // bottom left line
+		xLineWidth, 0, // bottom right line
+		0, - (height+yOverlap*2) // top right line
+	);
+	// Top arm
+	var wCurve = spacing.STEP*2;
+	var hCurve = spacing.STEP;
+	pathString += sprintf("M %f %f q %f %f %f %f q %f %f %f %f z",
+		xLeft+xLineWidth, yTop-yOverlap, // top left arm
+		wCurve*0.6, hCurve*0.2,
+		wCurve, -hCurve, // right point
+		-wCurve*0.1, hCurve*0.3,
+		-wCurve, hCurve+spacing.STEP // left bottom
+	);
+	// Bottom arm
+	pathString += sprintf("M %f %f q %f %f %f %f q %f %f %f %f z",
+		xLeft+xLineWidth, yTop+yOverlap+height, // bottom left arm
+		wCurve*0.6, -hCurve*0.2,
+		wCurve, hCurve, // right point
+		-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), "data-name": type});
+}
+
+function curvyPath(renderer, xLeft, yTop, yBottom, type) {
+	var yHeight = yBottom - yTop;
+
+	var pathString = curve(xLeft,
+		yTop,
+		[7.5, -8, 21, 0, 18.5, -10.5, 7.5],
+		[0, yHeight/5.5, yHeight/3.14, yHeight/2, yHeight/2.93, yHeight/4.88, 0]);
+
+	pathString += curve(xLeft,
+		yTop,
+		[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), "data-name": type});
+}
+
+function curve(xLeft, yTop, xCurve, yCurve) {
+	return sprintf("M %f %f C %f %f %f %f %f %f C %f %f %f %f %f %f z",
+		xLeft+xCurve[0], yTop+yCurve[0],
+		xLeft+xCurve[1], yTop+yCurve[1],
+		xLeft+xCurve[2], yTop+yCurve[2],
+		xLeft+xCurve[3], yTop+yCurve[3],
+		xLeft+xCurve[4], yTop+yCurve[4],
+		xLeft+xCurve[5], yTop+yCurve[5],
+		xLeft+xCurve[6], yTop+yCurve[6]);
+}
+
+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"), "data-name": type});
+		var position = yTop + (yBottom - yTop) / 2;
+		position = position - renderer.controller.getTextSize.baselineToCenter(header, "voicefont", 'staff-extra voice-name', 0, 1);
+
+		renderText(renderer, {
+			x: renderer.padding.left,
+			y: position,
+			text: header,
+			type: 'voicefont',
+			klass: 'staff-extra voice-name',
+			anchor: 'start',
+			centerVertically: true
+		});
+	}
+	if (type === "brace")
+		ret = curvyPath(renderer, xLeft, yTop, yBottom, type);
+	else if (type === "bracket")
+		ret = straightPath(renderer, xLeft, yTop, yBottom, type);
+	if (header) {
+		ret = renderer.paper.closeGroup();
+	}
+	selectables.wrapSvgEl({el_type: type, startChar: -1, endChar: -1}, ret);
+
+	return ret;
+};
+module.exports = drawBrace;

package/src/write/draw/crescendo.js

@@ -0,0 +1,38 @@
+var sprintf = require('./sprintf');
+var printPath = require('./print-path');
+var roundNumber = require("./round-number");
+
+function drawCrescendo(renderer, params, selectables) {
+	if (params.pitch === undefined)
+		window.console.error("Crescendo Element y-coordinate not set.");
+	var y = renderer.calcY(params.pitch) + 4; // This is the top pixel to use (it is offset a little so that it looks good with the volume marks.)
+	var height = 8;
+
+	// TODO-PER: This is just a quick hack to make the dynamic marks not crash if they are mismatched. See the slur treatment for the way to get the beginning and end.
+	var left = params.anchor1 ? params.anchor1.x : 0;
+	var right = params.anchor2 ? params.anchor2.x : 800;
+
+	var el;
+	if (params.dir === "<") {
+		el = drawLine(renderer, y+height/2, y, y+height/2, y+height, left, right);
+	} else {
+		el = drawLine(renderer, y, y+height/2, y+height, y+height/2, left, right);
+	}
+	selectables.wrapSvgEl({el_type: "dynamicDecoration", startChar: -1, endChar: -1}, el);
+	return [el];
+}
+
+var drawLine = function (renderer, y1, y2, y3, y4, left, right) {
+	y1 = roundNumber(y1);
+	y2 = roundNumber(y2);
+	y3 = roundNumber(y3);
+	y4 = roundNumber(y4);
+	left = roundNumber(left);
+	right = roundNumber(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'), "data-name": "dynamics"});
+};
+
+module.exports = drawCrescendo;

package/src/write/draw/debug-box.js

@@ -0,0 +1,8 @@
+function printDebugBox(renderer, attr, comment) {
+	var box = renderer.paper.rectBeneath(attr);
+	if (comment)
+		renderer.paper.text(comment, {x: 0, y: attr.y+7, "text-anchor": "start", "font-size":"14px", fill: "rgba(0,0,255,.4)", stroke: "rgba(0,0,255,.4)" });
+	return box;
+}
+
+module.exports = printDebugBox;

package/src/write/draw/draw.js

@@ -0,0 +1,56 @@
+var drawStaffGroup = require('./staff-group');
+var setPaperSize = require('./set-paper-size');
+var nonMusic = require('./non-music');
+var spacing = require('../abc_spacing');
+var Selectables = require('./selectables');
+
+function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
+	var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
+	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();
+		var abcLine = abcTune.lines[line];
+		if (abcLine.staff) {
+			if (abcLine.vskip) {
+				renderer.moveY(abcLine.vskip);
+			}
+			if (staffgroups.length >= 1)
+				addStaffPadding(renderer, renderer.spacing.staffSeparation, staffgroups[staffgroups.length - 1], abcLine.staffGroup);
+			var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables,line);
+			staffgroup.line = lineOffset+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) {
+			nonMusic(renderer, abcLine.nonMusic, selectables);
+		}
+	}
+
+	classes.reset();
+	if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
+		renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
+		nonMusic(renderer, abcTune.bottomText, selectables);
+	}
+	setPaperSize(renderer, maxWidth, scale, responsive);
+	return { staffgroups: staffgroups, selectables: selectables.getElements() };
+}
+
+function engraveStaffLine(renderer, staffGroup, selectables,lineNumber) {
+	drawStaffGroup(renderer, staffGroup, selectables,lineNumber);
+	var height = staffGroup.height * spacing.STEP;
+	renderer.y += height;
+	return staffGroup;
+}
+
+function addStaffPadding(renderer, staffSeparation, lastStaffGroup, thisStaffGroup) {
+	var lastStaff = lastStaffGroup.staffs[lastStaffGroup.staffs.length-1];
+	var lastBottomLine = -(lastStaff.bottom - 2); // The 2 is because the scale goes to 2 below the last line.
+	var nextTopLine = thisStaffGroup.staffs[0].top - 10; // Because 10 represents the top line.
+	var naturalSeparation = nextTopLine + lastBottomLine; // This is how far apart they'd be without extra spacing
+	var separationInPixels = naturalSeparation * spacing.STEP;
+	if (separationInPixels < staffSeparation)
+		renderer.moveY(staffSeparation-separationInPixels);
+}
+
+module.exports = draw;

package/src/write/draw/dynamics.js

@@ -0,0 +1,20 @@
+var printSymbol = require('./print-symbol');
+
+function drawDynamics(renderer, params, selectables) {
+	if (params.pitch === undefined)
+		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: 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];
+}
+
+module.exports = drawDynamics;

package/src/write/draw/ending.js

@@ -0,0 +1,46 @@
+var sprintf = require('./sprintf');
+var renderText = require('./text');
+var printPath = require('./print-path');
+var roundNumber = require("./round-number");
+
+function drawEnding(renderer, params, linestartx, lineendx, selectables) {
+	if (params.pitch === undefined)
+		window.console.error("Ending Element y-coordinate not set.");
+	var y = roundNumber(renderer.calcY(params.pitch));
+	var height = 20;
+	var pathString = '';
+
+	if (params.anchor1) {
+		linestartx = roundNumber(params.anchor1.x+params.anchor1.w);
+		pathString += sprintf("M %f %f L %f %f ",
+			linestartx, y, linestartx, roundNumber(y+height));
+	}
+
+	if (params.anchor2) {
+		lineendx = roundNumber(params.anchor2.x);
+		pathString += sprintf("M %f %f L %f %f ",
+			lineendx, y, lineendx, roundNumber(y+height));
+	}
+
+	pathString += sprintf("M %f %f L %f %f ",
+		linestartx, y, lineendx, y);
+
+	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),
+			y: roundNumber(renderer.calcY(params.pitch - 0.5)),
+			text: params.text,
+			type: 'repeatfont',
+			klass: 'ending',
+			anchor: "start",
+			noClass: true,
+			name: params.text
+		});
+	var g = renderer.paper.closeGroup();
+	selectables.wrapSvgEl({el_type: "ending", startChar: -1, endChar: -1}, g);
+	return [g];
+}
+
+module.exports = drawEnding;

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

@@ -0,0 +1,66 @@
+/**
+ * Begin a group of glyphs that will always be moved, scaled and highlighted together
+ */
+
+var roundNumber = require("./round-number");
+
+	function Group() {
+		this.ingroup = false;
+	}
+
+	Group.prototype.beginGroup = function (paper, controller) {
+		this.paper = paper;
+		this.controller = controller;
+		this.path = [];
+		this.lastM = [0, 0];
+		this.ingroup = true;
+		this.paper.openGroup();
+	};
+
+	Group.prototype.isInGroup = function() {
+		return this.ingroup;
+	}
+
+	Group.prototype.addPath = function (path) {
+		path = path || [];
+		if (path.length === 0) return;
+		path[0][0] = "m";
+		path[0][1] = roundNumber(path[0][1] - this.lastM[0]);
+		path[0][2] = roundNumber(path[0][2] - this.lastM[1]);
+		this.lastM[0] += path[0][1];
+		this.lastM[1] += path[0][2];
+		this.path.push(path[0]);
+		for (var i = 1, ii = path.length; i < ii; i++) {
+			if (path[i][0] === "m") {
+				this.lastM[0] += path[i][1];
+				this.lastM[1] += path[i][2];
+			}
+			this.path.push(path[i]);
+		}
+	};
+
+	/**
+	 * End a group of glyphs that will always be moved, scaled and highlighted together
+	 */
+	Group.prototype.endGroup = function (klass, name) {
+		this.ingroup = false;
+		//if (this.path.length === 0) return null;
+		var path = "";
+		for (var i = 0; i < this.path.length; i++)
+			path += this.path[i].join(" ");
+		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;
+	};
+
+	// There is just a singleton of this object.
+	var elementGroup = new Group();
+
+module.exports = elementGroup;

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

@@ -0,0 +1,25 @@
+// For debugging, it is sometimes useful to know where you are vertically.
+var sprintf = require("./sprintf");
+
+function printHorizontalLine(renderer, width, vertical, comment) {
+	var dy = 0.35;
+	var fill = "rgba(0,0,255,.4)";
+	var y = renderer.y;
+	if (vertical) y = vertical;
+	y = Math.round(y);
+	renderer.paper.text(""+Math.round(y), {x: 10, y: y, "text-anchor": "start", "font-size":"18px", fill: fill, stroke: fill });
+	var x1 = 50;
+	var x2 = width;
+	var pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", x1, y-dy, x1+x2, y-dy,
+		x2, y+dy, x1, y+dy);
+	renderer.paper.pathToBack({path:pathString, stroke:"none", fill:fill, 'class': renderer.controller.classes.generate('staff')});
+	for (var i = 1; i < width/100; i++) {
+		pathString = sprintf("M %f %f L %f %f L %f %f L %f %f z", i*100-dy, y-5, i*100-dy, y+5,
+			i*100+dy, y-5, i*100+dy, y+5);
+		renderer.paper.pathToBack({path:pathString, stroke:"none", fill:fill, 'class': renderer.controller.classes.generate('staff')});
+	}
+	if (comment)
+		renderer.paper.text(comment, {x: width+70, y: y, "text-anchor": "start", "font-size":"18px", fill: fill, stroke: fill });
+}
+
+module.exports = printHorizontalLine;

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

@@ -0,0 +1,50 @@
+var drawSeparator = require('./separator');
+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.absmove) {
+			renderer.absolutemoveY(row.absmove);
+		} else if (row.move) {
+			renderer.moveY(row.move);
+		} else if (row.text) {
+			var x = row.left ? row.left : 0;
+			var el = renderText(renderer, {
+				x: x,
+				y: renderer.y,
+				text: row.text,
+				type: row.font,
+				klass: row.klass,
+				name: row.name,
+				anchor: row.anchor
+			});
+			if (row.absElemType) {
+				selectables.wrapSvgEl({
+					el_type: row.absElemType,
+					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, "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,
+					name: row.name,
+					startChar: row.startChar,
+					endChar: row.endChar,
+					text: ""
+				}, g);
+		}
+	}
+}
+
+module.exports = nonMusic;

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-path.js

@@ -0,0 +1,7 @@
+function printPath(renderer, attrs, params) {
+	var ret = renderer.paper.path(attrs);
+
+	return ret;
+}
+
+module.exports = printPath;