abcjs 6.1.8 → 6.2.0

package/src/write/draw/tempo.js

@@ -8,37 +8,37 @@ function drawTempo(renderer, params) {
 
 	//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.
+	//	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();
-//	});
+	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];
 }
 

package/src/write/draw/text.js

@@ -3,7 +3,7 @@ var roundNumber = require("./round-number");
 function renderText(renderer, params, alreadyInGroup) {
 	var y = params.y;
 	if (params.lane) {
-		var laneMargin = params.dim.font.size*0.25;
+		var laneMargin = params.dim.font.size * 0.25;
 		y += (params.dim.font.size + laneMargin) * params.lane;
 	}
 
@@ -12,7 +12,7 @@ function renderText(renderer, params, alreadyInGroup) {
 		hash = params.dim;
 		hash.attr.class = params.klass;
 	} else
-		 hash = renderer.controller.getFontAndAttr.calc(params.type, params.klass);
+		hash = renderer.controller.getFontAndAttr.calc(params.type, params.klass);
 	if (params.anchor)
 		hash.attr["text-anchor"] = params.anchor;
 	hash.attr.x = params.x;
@@ -32,7 +32,7 @@ function renderText(renderer, params, alreadyInGroup) {
 
 	if (hash.font.box) {
 		if (!alreadyInGroup)
-			renderer.paper.openGroup({klass: hash.attr['class'], fill: renderer.foregroundColor, "data-name": params.name});
+			renderer.paper.openGroup({ klass: hash.attr['class'], fill: renderer.foregroundColor, "data-name": params.name });
 		if (hash.attr["text-anchor"] === "end") {
 			hash.attr.x -= hash.font.padding;
 		} else if (hash.attr["text-anchor"] === "start") {
@@ -53,7 +53,7 @@ function renderText(renderer, params, alreadyInGroup) {
 
 		var delta = 0;
 		if (hash.attr["text-anchor"] === "middle") {
-		 	delta = size.width / 2 + hash.font.padding;
+			delta = size.width / 2 + hash.font.padding;
 		} else if (hash.attr["text-anchor"] === "end") {
 			delta = size.width + hash.font.padding * 2;
 		}
@@ -61,7 +61,7 @@ function renderText(renderer, params, alreadyInGroup) {
 		if (params.centerVertically) {
 			deltaY = size.height - hash.font.padding;
 		}
-		renderer.paper.rect({ "data-name": "box", x: Math.round(params.x - delta), y: Math.round(y - deltaY), width: Math.round(size.width + hash.font.padding*2), height: Math.round(size.height + hash.font.padding*2)});
+		renderer.paper.rect({ "data-name": "box", x: Math.round(params.x - delta), y: Math.round(y - deltaY), width: Math.round(size.width + hash.font.padding * 2), height: Math.round(size.height + hash.font.padding * 2) });
 		if (!alreadyInGroup)
 			elem = renderer.paper.closeGroup();
 	}

package/src/write/draw/tie.js

@@ -15,8 +15,8 @@ function drawTie(renderer, params, linestartx, lineendx, selectables) {
 		klass += ' abcjs-end-edge';
 	if (params.hint)
 		klass = "abcjs-hint";
-	var fudgeY =  params.fixedY ? 1.5 : 0; // TODO-PER: This just compensates for drawArc, which contains too much knowledge of ties and slurs.
-	var el = drawArc(renderer, params.startX, params.endX, params.startY+fudgeY, params.endY+fudgeY,  params.above, klass, params.isTie, params.dotted);
+	var fudgeY = params.fixedY ? 1.5 : 0; // TODO-PER: This just compensates for drawArc, which contains too much knowledge of ties and slurs.
+	var el = drawArc(renderer, params.startX, params.endX, params.startY + fudgeY, params.endY + fudgeY, params.above, klass, params.isTie, params.dotted);
 	selectables.wrapSvgEl({ el_type: "slur", startChar: -1, endChar: -1 }, el);
 	return [el];
 }
@@ -46,32 +46,32 @@ var layout = function (params, lineStartX, lineEndX) {
 	params.avoidCollisionAbove();
 };
 
-var drawArc = function(renderer, x1, x2, pitch1, pitch2, above, klass, isTie, dotted) {
+var drawArc = function (renderer, x1, x2, pitch1, pitch2, above, klass, isTie, dotted) {
 	// If it is a tie vs. a slur, draw it shallower.
 	var spacing = isTie ? 1.2 : 1.5;
 
 	x1 = roundNumber(x1 + 6);
 	x2 = roundNumber(x2 + 4);
-	pitch1 = pitch1 + ((above)?spacing:-spacing);
-	pitch2 = pitch2 + ((above)?spacing:-spacing);
+	pitch1 = pitch1 + ((above) ? spacing : -spacing);
+	pitch2 = pitch2 + ((above) ? spacing : -spacing);
 	var y1 = roundNumber(renderer.calcY(pitch1));
 	var y2 = roundNumber(renderer.calcY(pitch2));
 
 	//unit direction vector
-	var dx = x2-x1;
-	var dy = y2-y1;
-	var norm= Math.sqrt(dx*dx+dy*dy);
-	var ux = dx/norm;
-	var uy = dy/norm;
+	var dx = x2 - x1;
+	var dy = y2 - y1;
+	var norm = Math.sqrt(dx * dx + dy * dy);
+	var ux = dx / norm;
+	var uy = dy / norm;
 
-	var flatten = norm/3.5;
+	var flatten = norm / 3.5;
 	var maxFlatten = isTie ? 10 : 25;  // If it is a tie vs. a slur, draw it shallower.
-	var curve = ((above)?-1:1)*Math.min(maxFlatten, Math.max(4, flatten));
+	var curve = ((above) ? -1 : 1) * Math.min(maxFlatten, Math.max(4, flatten));
 
-	var controlx1 = roundNumber(x1+flatten*ux-curve*uy);
-	var controly1 = roundNumber(y1+flatten*uy+curve*ux);
-	var controlx2 = roundNumber(x2-flatten*ux-curve*uy);
-	var controly2 = roundNumber(y2-flatten*uy+curve*ux);
+	var controlx1 = roundNumber(x1 + flatten * ux - curve * uy);
+	var controly1 = roundNumber(y1 + flatten * uy + curve * ux);
+	var controlx2 = roundNumber(x2 - flatten * ux - curve * uy);
+	var controly2 = roundNumber(y2 - flatten * uy + curve * ux);
 	var thickness = 2;
 	if (klass)
 		klass += ' slur';
@@ -83,12 +83,12 @@ var drawArc = function(renderer, x1, x2, pitch1, pitch2, above, klass, isTie, do
 		klass += ' dotted';
 		var pathString2 = sprintf("M %f %f C %f %f %f %f %f %f", x1, y1,
 			controlx1, controly1, controlx2, controly2, x2, y2);
-		ret = renderer.paper.path({path:pathString2, stroke:renderer.foregroundColor, fill:"none", 'stroke-dasharray': "5 5", 'class': renderer.controller.classes.generate(klass), "data-name": isTie ? "tie" : "slur"});
+		ret = renderer.paper.path({ path: pathString2, stroke: renderer.foregroundColor, fill: "none", 'stroke-dasharray': "5 5", 'class': renderer.controller.classes.generate(klass), "data-name": isTie ? "tie" : "slur" });
 	} else {
 		var pathString = sprintf("M %f %f C %f %f %f %f %f %f C %f %f %f %f %f %f z", x1, y1,
 			controlx1, controly1, controlx2, controly2, x2, y2,
 			roundNumber(controlx2 - thickness * uy), roundNumber(controly2 + thickness * ux), roundNumber(controlx1 - thickness * uy), roundNumber(controly1 + thickness * ux), x1, y1);
-		ret = renderer.paper.path({path:pathString, stroke:"none", fill:renderer.foregroundColor, 'class': renderer.controller.classes.generate(klass), "data-name": isTie ? "tie" : "slur"});
+		ret = renderer.paper.path({ path: pathString, stroke: "none", fill: renderer.foregroundColor, 'class': renderer.controller.classes.generate(klass), "data-name": isTie ? "tie" : "slur" });
 	}
 
 	return ret;

package/src/write/draw/triplet.js

@@ -4,12 +4,12 @@ var printPath = require('./print-path');
 var roundNumber = require("./round-number");
 
 function drawTriplet(renderer, params, selectables) {
-	renderer.paper.openGroup({ klass: renderer.controller.classes.generate('triplet '+params.durationClass), "data-name": "triplet"});
+	renderer.paper.openGroup({ klass: renderer.controller.classes.generate('triplet ' + params.durationClass), "data-name": "triplet" });
 	if (!params.hasBeam) {
 		drawBracket(renderer, params.anchor1.x, params.startNote, params.anchor2.x + params.anchor2.w, params.endNote);
 	}
 	// HACK: adjust the position of "3". It is too high in all cases so we fudge it by subtracting 1 here.
-	renderText(renderer, {x: params.xTextPos, y: renderer.calcY(params.yTextPos - 1), text: "" + params.number, type: 'tripletfont', anchor: "middle", centerVertically: true, noClass: true, name: ""+params.number}, true);
+	renderText(renderer, { x: params.xTextPos, y: renderer.calcY(params.yTextPos - 1), text: "" + params.number, type: 'tripletfont', anchor: "middle", centerVertically: true, noClass: true, name: "" + params.number }, true);
 	var g = renderer.paper.closeGroup();
 	selectables.wrapSvgEl({ el_type: "triplet", startChar: -1, endChar: -1 }, g);
 	return g;
@@ -30,17 +30,17 @@ function drawBracket(renderer, x1, y1, x2, y2) {
 	pathString += drawLine(x2, y2, x2, y2 + bracketHeight);
 
 	// figure out midpoints to draw the broken line.
-	var midX = x1 + (x2-x1)/2;
+	var midX = x1 + (x2 - x1) / 2;
 	//var midY = y1 + (y2-y1)/2;
 	var gapWidth = 8;
 	var slope = (y2 - y1) / (x2 - x1);
 	var leftEndX = midX - gapWidth;
 	var leftEndY = y1 + (leftEndX - x1) * slope;
-	pathString += drawLine( x1, y1, leftEndX, leftEndY);
+	pathString += drawLine(x1, y1, leftEndX, leftEndY);
 	var rightStartX = midX + gapWidth;
 	var rightStartY = y1 + (rightStartX - x1) * slope;
-	pathString += drawLine( rightStartX, rightStartY, x2, y2);
-	printPath(renderer, {path: pathString, stroke: renderer.foregroundColor, "data-name": "triplet-bracket"});
+	pathString += drawLine(rightStartX, rightStartY, x2, y2);
+	printPath(renderer, { path: pathString, stroke: renderer.foregroundColor, "data-name": "triplet-bracket" });
 }
 
 module.exports = drawTriplet;

package/src/write/draw/voice.js

@@ -9,18 +9,21 @@ var renderText = require('./text');
 var drawAbsolute = require('./absolute');
 
 function drawVoice(renderer, params, bartop, selectables, staffPos) {
-	var width = params.w-1;
+	var width = params.w - 1;
 	renderer.staffbottom = params.staff.bottom;
+	var saveColor = renderer.foregroundColor
+	if (params.color)
+		renderer.foregroundColor = params.color
 
 	if (params.header) { // print voice name
-		var textEl = renderText(renderer, {x: renderer.padding.left, y: renderer.calcY(params.headerPosition), text: params.header, type: 'voicefont', klass: 'staff-extra voice-name', anchor: 'start', centerVertically: true, name: "voice-name"}, true);
+		var textEl = renderText(renderer, { x: renderer.padding.left, y: renderer.calcY(params.headerPosition), text: params.header, type: 'voicefont', klass: 'staff-extra voice-name', anchor: 'start', centerVertically: true, name: "voice-name" }, true);
 		selectables.wrapSvgEl({ el_type: "voiceName", startChar: -1, endChar: -1, text: params.header }, textEl);
 	}
 
 	var i;
 	var child;
 	var foundNote = false;
-	for (i=0; i < params.children.length; i++) {
+	for (i = 0; i < params.children.length; i++) {
 		child = params.children[i];
 		if (child.type === 'note' || child.type === 'rest')
 			foundNote = true;
@@ -29,21 +32,16 @@ function drawVoice(renderer, params, bartop, selectables, staffPos) {
 			renderer.controller.classes.startMeasure();
 			justInitializedMeasureNumber = true;
 		}
-		switch (child.type) {
-			// case "tempo":
-			// 	child.elemset = drawTempo(renderer, child);
-			// 	break;
-			default:
-				if (params.staff.isTabStaff) {
-					child.invisible = false;
-  				if ( child.type == 'bar' ) {
-						if (child.abcelem.lastBar) {
-							bartop = params.topLine;
-						}
-					}
-				} 
-				drawAbsolute(renderer, child,(params.barto || i === params.children.length - 1) ? bartop : 0, selectables, staffPos);
+		if (params.staff.isTabStaff) {
+			child.invisible = false;
+			if (child.type == 'bar') {
+				if (child.abcelem.lastBar) {
+					bartop = params.topLine;
+				}
+			}
 		}
+		drawAbsolute(renderer, child, (params.barto || i === params.children.length - 1) ? bartop : 0, selectables, staffPos);
+
 		if (child.type === 'note' || isNonSpacerRest(child))
 			renderer.controller.classes.incrNote();
 		if (child.type === 'bar' && !justInitializedMeasureNumber && foundNote) {
@@ -92,6 +90,7 @@ function drawVoice(renderer, params, bartop, selectables, staffPos) {
 			}
 		}
 	}
+	renderer.foregroundColor = saveColor
 
 }
 

package/src/write/{abc_engraver_controller.js → engraver-controller.js}

@@ -2,19 +2,19 @@
 
 /*global Math */
 
-var spacing = require('./abc_spacing');
-var AbstractEngraver = require('./abc_abstract_engraver');
-var Renderer = require('./abc_renderer');
-var FreeText = require('./free-text');
-var Separator = require('./separator');
-var Subtitle = require('./subtitle');
-var TopText = require('./top-text');
-var BottomText = require('./bottom-text');
-var setupSelection = require('./selection');
+var spacing = require('./helpers/spacing');
+var AbstractEngraver = require('./creation/abstract-engraver');
+var Renderer = require('./renderer');
+var FreeText = require('./creation/elements/free-text');
+var Separator = require('./creation/elements/separator');
+var Subtitle = require('./creation/elements/subtitle');
+var TopText = require('./creation/elements/top-text');
+var BottomText = require('./creation/elements/bottom-text');
+var setupSelection = require('./interactive/selection');
 var layout = require('./layout/layout');
-var Classes = require('./classes');
-var GetFontAndAttr = require('./get-font-and-attr');
-var GetTextSize = require('./get-text-size');
+var Classes = require('./helpers/classes');
+var GetFontAndAttr = require('./helpers/get-font-and-attr');
+var GetTextSize = require('./helpers/get-text-size');
 var draw = require('./draw/draw');
 var tablatures = require('../api/abc_tablatures');
 
@@ -30,20 +30,20 @@ var tablatures = require('../api/abc_tablatures');
  * in the renderer for highlighting purposes
  *
  */
-var EngraverController = function(paper, params) {
-  params = params || {};
-  this.oneSvgPerLine = params.oneSvgPerLine;
-  this.selectionColor = params.selectionColor;
-  this.dragColor = params.dragColor ? params.dragColor : params.selectionColor;
-  this.dragging = !!params.dragging;
-  this.selectTypes = params.selectTypes;
-  this.responsive = params.responsive;
-  this.space = 3*spacing.SPACE;
+var EngraverController = function (paper, params) {
+	params = params || {};
+	this.oneSvgPerLine = params.oneSvgPerLine;
+	this.selectionColor = params.selectionColor;
+	this.dragColor = params.dragColor ? params.dragColor : params.selectionColor;
+	this.dragging = !!params.dragging;
+	this.selectTypes = params.selectTypes;
+	this.responsive = params.responsive;
+	this.space = 3 * spacing.SPACE;
 	this.initialClef = params.initialClef;
-  this.scale = params.scale ? parseFloat(params.scale) : 0;
-  this.classes = new Classes({ shouldAddClasses: params.add_classes });
-  if (!(this.scale > 0.1))
-    this.scale = undefined;
+	this.scale = params.scale ? parseFloat(params.scale) : 0;
+	this.classes = new Classes({ shouldAddClasses: params.add_classes });
+	if (!(this.scale > 0.1))
+		this.scale = undefined;
 
 	if (params.staffwidth) {
 		// Note: Normally all measurements to the engraver are in POINTS. However, if a person is formatting for the
@@ -58,13 +58,17 @@ var EngraverController = function(paper, params) {
 	if (params.clickListener)
 		this.addSelectListener(params.clickListener);
 
-  this.renderer=new Renderer(paper);
+	this.renderer = new Renderer(paper);
 	this.renderer.setPaddingOverride(params);
 	if (params.showDebug)
 		this.renderer.showDebug = params.showDebug;
 	if (params.jazzchords)
 		this.jazzchords = params.jazzchords;
-  this.renderer.controller = this; // TODO-GD needed for highlighting
+	if (params.germanAlphabet)
+		this.germanAlphabet = params.germanAlphabet;
+	if (params.lineThickness)
+		this.lineThickness = params.lineThickness;
+	this.renderer.controller = this; // TODO-GD needed for highlighting
 	this.renderer.foregroundColor = params.foregroundColor ? params.foregroundColor : "currentColor";
 	if (params.ariaLabel !== undefined)
 		this.renderer.ariaLabel = params.ariaLabel;
@@ -73,7 +77,7 @@ var EngraverController = function(paper, params) {
 	this.reset();
 };
 
-EngraverController.prototype.reset = function() {
+EngraverController.prototype.reset = function () {
 	this.selected = [];
 	this.staffgroups = [];
 	if (this.engraver)
@@ -84,24 +88,26 @@ EngraverController.prototype.reset = function() {
 	this.dragIndex = -1;
 	this.dragMouseStart = { x: -1, y: -1 };
 	this.dragYStep = 0;
+	if (this.lineThickness)
+		this.renderer.setLineThickness(this.lineThickness)
 };
 
 /**
  * run the engraving process
  */
-EngraverController.prototype.engraveABC = function(abctunes, tuneNumber, lineOffset) {
-  if (abctunes[0]===undefined) {
-    abctunes = [abctunes];
-  }
+EngraverController.prototype.engraveABC = function (abctunes, tuneNumber, lineOffset) {
+	if (abctunes[0] === undefined) {
+		abctunes = [abctunes];
+	}
 	this.reset();
 
-  for (var i = 0; i < abctunes.length; i++) {
-    if (tuneNumber === undefined)
-      tuneNumber = i;
-    this.getFontAndAttr = new GetFontAndAttr(abctunes[i].formatting, this.classes);
-    this.getTextSize = new GetTextSize(this.getFontAndAttr, this.renderer.paper);
-    this.engraveTune(abctunes[i], tuneNumber, lineOffset);
-  }
+	for (var i = 0; i < abctunes.length; i++) {
+		if (tuneNumber === undefined)
+			tuneNumber = i;
+		this.getFontAndAttr = new GetFontAndAttr(abctunes[i].formatting, this.classes);
+		this.getTextSize = new GetTextSize(this.getFontAndAttr, this.renderer.paper);
+		this.engraveTune(abctunes[i], tuneNumber, lineOffset);
+	}
 };
 
 /**
@@ -112,7 +118,7 @@ EngraverController.prototype.adjustNonScaledItems = function (scale) {
 	this.renderer.adjustNonScaledItems(scale);
 };
 
-EngraverController.prototype.getMeasureWidths = function(abcTune) {
+EngraverController.prototype.getMeasureWidths = function (abcTune) {
 	this.reset();
 	this.getFontAndAttr = new GetFontAndAttr(abcTune.formatting, this.classes);
 	this.getTextSize = new GetTextSize(this.getFontAndAttr, this.renderer.paper);
@@ -127,7 +133,7 @@ EngraverController.prototype.getMeasureWidths = function(abcTune) {
 	var section;
 
 	var needNewSection = true;
-	for(var i=0; i<abcTune.lines.length; i++) {
+	for (var i = 0; i < abcTune.lines.length; i++) {
 		var abcLine = abcTune.lines[i];
 		if (abcLine.staff) {
 			if (needNewSection) {
@@ -179,10 +185,11 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
 		graceSlurs: abcTune.formatting.graceSlurs !== false, // undefined is the default, which is true
 		percmap: abcTune.formatting.percmap,
 		initialClef: this.initialClef,
-		jazzchords: this.jazzchords
+		jazzchords: this.jazzchords,
+		germanAlphabet: this.germanAlphabet
 	});
 	this.engraver.setStemHeight(this.renderer.spacing.stemHeight);
-	this.engraver.measureLength = abcTune.getMeterFraction().num/abcTune.getMeterFraction().den;
+	this.engraver.measureLength = abcTune.getMeterFraction().num / abcTune.getMeterFraction().den;
 	if (abcTune.formatting.staffwidth) {
 		this.width = abcTune.formatting.staffwidth * 1.33; // The width is expressed in pt; convert to px.
 	} else {
@@ -205,11 +212,11 @@ EngraverController.prototype.constructTuneElements = function (abcTune) {
 	var abcLine;
 	var hasPrintedTempo = false;
 	var hasSeenNonSubtitle = false;
-	for(i=0; i<abcTune.lines.length; i++) {
+	for (i = 0; i < abcTune.lines.length; i++) {
 		abcLine = abcTune.lines[i];
 		if (abcLine.staff) {
 			hasSeenNonSubtitle = true;
-			abcLine.staffGroup = this.engraver.createABCLine(abcLine.staff, !hasPrintedTempo ? abcTune.metaText.tempo: null, i);
+			abcLine.staffGroup = this.engraver.createABCLine(abcLine.staff, !hasPrintedTempo ? abcTune.metaText.tempo : null, i);
 			hasPrintedTempo = true;
 		} else if (abcLine.subtitle) {
 			// If the subtitle is at the top, then it was already accounted for. So skip all subtitles until the first non-subtitle line.
@@ -281,16 +288,16 @@ function splitSvgIntoLines(output, title, responsive) {
 		var wrapper = document.createElement("div");
 		var divStyles = "overflow: hidden;"
 		if (responsive !== 'resize')
-			divStyles += "height:"+height+"px;"
+			divStyles += "height:" + height + "px;"
 		wrapper.setAttribute("style", divStyles)
 		var svg = duplicateSvg(source)
-		var fullTitle = "Sheet Music for \"" + title + "\" section " + (i+1)
+		var fullTitle = "Sheet Music for \"" + title + "\" section " + (i + 1)
 		svg.setAttribute("aria-label", fullTitle)
 		if (responsive !== 'resize')
 			svg.setAttribute("height", height)
 		if (responsive === 'resize')
 			svg.style.position = ''
-		svg.setAttribute("viewBox", "0 " + nextTop + " " + width + " " + height )
+		svg.setAttribute("viewBox", "0 " + nextTop + " " + width + " " + height)
 		svg.appendChild(style.cloneNode(true))
 		var titleEl = document.createElement("title")
 		titleEl.innerText = fullTitle
@@ -301,7 +308,7 @@ function splitSvgIntoLines(output, title, responsive) {
 		svgs.push(svg)
 		output.appendChild(wrapper)
 		//wrappers.push(wrapper)
-		nextTop = box.y+box.height
+		nextTop = box.y + box.height
 	}
 	// for (i = 0; i < wrappers.length; i++)
 	// 	output.appendChild(wrappers[i])
@@ -320,11 +327,11 @@ function duplicateSvg(source) {
 	return svg;
 }
 
-EngraverController.prototype.getDim = function(historyEl) {
+EngraverController.prototype.getDim = function (historyEl) {
 	// Get the dimensions on demand because the getBBox call is expensive.
 	if (!historyEl.dim) {
 		var box = historyEl.svgEl.getBBox();
-		historyEl.dim = { left: Math.round(box.x), top: Math.round(box.y), right: Math.round(box.x+box.width), bottom: Math.round(box.y+box.height) };
+		historyEl.dim = { left: Math.round(box.x), top: Math.round(box.y), right: Math.round(box.x + box.width), bottom: Math.round(box.y + box.height) };
 	}
 	return historyEl.dim;
 };

package/src/write/{classes.js → helpers/classes.js}

@@ -82,12 +82,12 @@ Classes.prototype.generate = function (c) {
 	if (c === "tab-number") // TODO-PER-HACK! straighten out the tablature
 		return ret.join(' ')
 	if (c === "text instrument-name")
-		return "abcjs-text abcjs-instrument-name"	
-	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);
+		return "abcjs-text abcjs-instrument-name"
+	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.

package/src/write/{get-font-and-attr.js → helpers/get-font-and-attr.js}

@@ -3,7 +3,7 @@ var GetFontAndAttr = function GetFontAndAttr(formatting, classes) {
 	this.classes = classes;
 };
 
-GetFontAndAttr.prototype.updateFonts = function(fontOverrides) {
+GetFontAndAttr.prototype.updateFonts = function (fontOverrides) {
 	if (fontOverrides.gchordfont)
 		this.formatting.gchordfont = fontOverrides.gchordfont;
 	if (fontOverrides.tripletfont)
@@ -14,23 +14,25 @@ GetFontAndAttr.prototype.updateFonts = function(fontOverrides) {
 		this.formatting.vocalfont = fontOverrides.vocalfont;
 };
 
-GetFontAndAttr.prototype.calc = function(type, klass) {
+GetFontAndAttr.prototype.calc = function (type, klass) {
 	var font;
 	if (typeof type === 'string') {
 		font = this.formatting[type];
 		// Raphael deliberately changes the font units to pixels for some reason, so we need to change points to pixels here.
 		if (font)
-			font = {face: font.face, size: Math.round(font.size * 4 / 3), decoration: font.decoration, style: font.style, weight: font.weight, box: font.box};
+			font = { face: font.face, size: Math.round(font.size * 4 / 3), decoration: font.decoration, style: font.style, weight: font.weight, box: font.box };
 		else
-			font = {face: "Arial", size: Math.round(12 * 4 / 3), decoration: "underline", style: "normal", weight: "normal"};
+			font = { face: "Arial", size: Math.round(12 * 4 / 3), decoration: "underline", style: "normal", weight: "normal" };
 	} else
-		font = {face: type.face, size: Math.round(type.size * 4 / 3), decoration: type.decoration, style: type.style, weight: type.weight, box: type.box};
+		font = { face: type.face, size: Math.round(type.size * 4 / 3), decoration: type.decoration, style: type.style, weight: type.weight, box: type.box };
 	var paddingPercent = this.formatting.fontboxpadding ? this.formatting.fontboxpadding : 0.1
 	font.padding = font.size * paddingPercent;
 
-	var attr = {"font-size": font.size, 'font-style': font.style,
+	var attr = {
+		"font-size": font.size, 'font-style': font.style,
 		"font-family": font.face, 'font-weight': font.weight, 'text-decoration': font.decoration,
-		'class': this.classes.generate(klass) };
+		'class': this.classes.generate(klass)
+	};
 	return { font: font, attr: attr };
 };
 

package/src/write/{get-text-size.js → helpers/get-text-size.js}

@@ -3,15 +3,15 @@ var GetTextSize = function GetTextSize(getFontAndAttr, svg) {
 	this.svg = svg;
 };
 
-GetTextSize.prototype.updateFonts = function(fontOverrides) {
+GetTextSize.prototype.updateFonts = function (fontOverrides) {
 	this.getFontAndAttr.updateFonts(fontOverrides);
 };
 
-GetTextSize.prototype.attr = function(type, klass) {
+GetTextSize.prototype.attr = function (type, klass) {
 	return this.getFontAndAttr.calc(type, klass);
 };
 
-GetTextSize.prototype.calc = function(text, type, klass, el) {
+GetTextSize.prototype.calc = function (text, type, klass, el) {
 	var hash;
 	// This can be passed in either a string or a font. If it is a string it names one of the standard fonts.
 	if (typeof type === 'string')
@@ -38,12 +38,12 @@ GetTextSize.prototype.calc = function(text, type, klass, el) {
 	var size = this.svg.getTextSize(text, hash.attr, el);
 	if (hash.font.box) {
 		// Add padding and an equal margin to each side.
-		return { height: size.height + hash.font.padding*4, width: size.width + hash.font.padding*4 };
+		return { height: size.height + hash.font.padding * 4, width: size.width + hash.font.padding * 4 };
 	}
 	return size;
 };
 
-GetTextSize.prototype.baselineToCenter = function(text, type, klass, index, total) {
+GetTextSize.prototype.baselineToCenter = function (text, type, klass, index, total) {
 	// This is for the case where SVG wants to use the baseline of the first line as the Y coordinate.
 	// If there are multiple lines of text or there is an array of text then that will not be centered so this adjusts it.
 	var height = this.calc(text, type, klass).height;

package/src/write/{set-class.js → helpers/set-class.js}

@@ -11,7 +11,7 @@ var setClass = function (elemset, addClass, removeClass, color) {
 		kls = kls.replace(removeClass, "");
 		kls = kls.replace(addClass, "");
 		if (addClass.length > 0) {
-			if (kls.length > 0 && kls.charAt(kls.length - 1) !== ' ') kls += " ";
+			if (kls.length > 0 && kls[kls.length - 1] !== ' ') kls += " ";
 			kls += addClass;
 		}
 		el.setAttribute("class", kls);

package/src/write/{abc_spacing.js → helpers/spacing.js}

@@ -2,7 +2,7 @@ var spacing = {};
 
 spacing.FONTEM = 360;
 spacing.FONTSIZE = 30;
-spacing.STEP = spacing.FONTSIZE*93/720;
+spacing.STEP = spacing.FONTSIZE * 93 / 720;
 spacing.SPACE = 10;
 spacing.TOPNOTE = 15;
 spacing.STAVEHEIGHT = 100;

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

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