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

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

@@ -6,17 +6,17 @@ function drawTempo(renderer, params) {
 	if (params.pitch === undefined)
 		window.console.error("Tempo Element y-coordinate not set.");
 
-	var tempoGroup;
+	//var tempoGroup;
 	params.tempo.el_type = "tempo";
 //	renderer.wrapInAbsElem(params.tempo, "abcjs-tempo", function () {
-		renderer.paper.openGroup({klass: renderer.controller.classes.generate("tempo")});
+		//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"});
+			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.
@@ -28,18 +28,18 @@ function drawTempo(renderer, params) {
 				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});
+			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});
+			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();
+		//tempoGroup = renderer.paper.closeGroup();
 //	});
-	return [tempoGroup];
+	//return [tempoGroup];
 }
 
 module.exports = drawTempo;

package/src/write/draw/text.js

@@ -1,6 +1,6 @@
 var roundNumber = require("./round-number");
 
-function renderText(renderer, params) {
+function renderText(renderer, params, alreadyInGroup) {
 	var y = params.y;
 	if (params.lane) {
 		var laneMargin = params.dim.font.size*0.25;
@@ -23,12 +23,16 @@ function renderText(renderer, params) {
 		console.log("Debug msg: " + params.text);
 		hash.attr.stroke = "#ff0000";
 	}
+	if (params.cursor) {
+		hash.attr.cursor = params.cursor;
+	}
 
 	var text = params.text.replace(/\n\n/g, "\n \n");
 	text = text.replace(/^\n/, "\xA0\n");
 
 	if (hash.font.box) {
-		renderer.paper.openGroup({klass: hash.attr['class'], fill: renderer.foregroundColor});
+		if (!alreadyInGroup)
+			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") {
@@ -41,6 +45,8 @@ function renderText(renderer, params) {
 		delete hash.attr['class'];
 	hash.attr.x = roundNumber(hash.attr.x);
 	hash.attr.y = roundNumber(hash.attr.y);
+	if (params.name)
+		hash.attr["data-name"] = params.name;
 	var elem = renderer.paper.text(text, hash.attr);
 	if (hash.font.box) {
 		var size = elem.getBBox();
@@ -55,8 +61,9 @@ function renderText(renderer, params) {
 		if (params.centerVertically) {
 			deltaY = size.height - hash.font.padding;
 		}
-		renderer.paper.rect({ 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)});
-		elem = renderer.paper.closeGroup();
+		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();
 	}
 	return elem;
 }

package/src/write/draw/tie.js

@@ -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)});
+		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)});
+		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)});
+	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});
+	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;
@@ -40,7 +40,7 @@ function drawBracket(renderer, x1, y1, x2, y2) {
 	var rightStartX = midX + gapWidth;
 	var rightStartY = y1 + (rightStartX - x1) * slope;
 	pathString += drawLine( rightStartX, rightStartY, x2, y2);
-	printPath(renderer, {path: pathString, stroke: renderer.foregroundColor});
+	printPath(renderer, {path: pathString, stroke: renderer.foregroundColor, "data-name": "triplet-bracket"});
 }
 
 module.exports = drawTriplet;

package/src/write/draw/voice.js

@@ -12,7 +12,7 @@ function drawVoice(renderer, params, bartop, selectables, staffPos) {
 	renderer.staffbottom = params.staff.bottom;
 
 	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});
+		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);
 	}
 
@@ -33,6 +33,14 @@ function drawVoice(renderer, params, bartop, selectables, staffPos) {
 			// 	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 (child.type === 'note' || isNonSpacerRest(child))
@@ -75,7 +83,7 @@ function drawVoice(renderer, params, bartop, selectables, staffPos) {
 					child.elemset = drawTie(renderer, child, params.startx + 10, width, selectables);
 					break;
 				default:
-					console.log(child)
+					console.log(child);
 					drawAbsolute(renderer, child, params.startx + 10, width, selectables, staffPos);
 			}
 		}

package/src/write/format-jazz-chord.js

@@ -0,0 +1,15 @@
+function formatJazzChord(chordString) {
+	// This puts markers in the pieces of the chord that are read by the svg creator.
+	// After the main part of the chord (the letter, a sharp or flat, and "m") a marker is added. Before a slash a marker is added.
+	var lines = chordString.split("\n");
+	for (var i = 0; i < lines.length; i++) {
+		var chord = lines[i];
+		// If the chord isn't in a recognizable format then just skip the formatting.
+		var reg = chord.match(/^([ABCDEFG][♯♭]?)?([^\/]+)?(\/[ABCDEFG][#b]?)?/);
+		if (reg)
+			lines[i] = (reg[1]?reg[1]:'') + "\x03" + (reg[2]?reg[2]:'')  + "\x03" + (reg[3]?reg[3]:'');
+	}
+	return lines.join("\n");
+}
+
+module.exports = formatJazzChord;

package/src/write/free-text.js

@@ -1,4 +1,5 @@
-function FreeText(text, vskip, getFontAndAttr, paddingLeft, width, getTextSize) {
+function FreeText(info, vskip, getFontAndAttr, paddingLeft, width, getTextSize) {
+	var text = info.text;
 	this.rows = [];
 	var size;
 	if (vskip)
@@ -8,23 +9,30 @@ function FreeText(text, vskip, getFontAndAttr, paddingLeft, width, getTextSize)
 		this.rows.push({move: hash.attr['font-size'] * 2}); // move the distance of the line, plus the distance of the margin, which is also one line.
 	} else if (typeof text === 'string') {
 		this.rows.push({move: hash.attr['font-size']/2}); // TODO-PER: move down some - the y location should be the top of the text, but we output text specifying the center line.
-		this.rows.push({left: paddingLeft, text: text, font: 'textfont', klass: 'defined-text', anchor: "start", absElemType: "freeText"});
+		this.rows.push({left: paddingLeft, text: text, font: 'textfont', klass: 'defined-text', anchor: "start", startChar: info.startChar, endChar: info.endChar, absElemType: "freeText", name: "free-text"});
 		size = getTextSize.calc(text, 'textfont', 'defined-text');
 		this.rows.push({move: size.height});
-	} else {
+	} else if (text) {
+		var maxHeight = 0;
+		var leftSide = paddingLeft;
 		var currentFont = 'textfont';
-		var isCentered = false; // The structure is wrong here: it requires an array to do centering, but it shouldn't have.
 		for (var i = 0; i < text.length; i++) {
-			if (text[i].font)
+			if (text[i].font) {
 				currentFont = text[i].font;
-			else
+			} else
 				currentFont = 'textfont';
-			if (text[i].center)
-				isCentered = true;
-			var alignment = isCentered ? 'middle' : 'start';
-			var x = isCentered ? width / 2 : paddingLeft;
-			this.rows.push({left: x, text: text[i].text, font: currentFont, klass: 'defined-text', anchor: alignment, absElemType: "freeText"});
-			size = getTextSize.calc(text[i].text, currentFont, 'defined-text');
+			this.rows.push({left: leftSide, text: text[i].text, font: currentFont, klass: 'defined-text', anchor: 'start', startChar: info.startChar, endChar: info.endChar, absElemType: "freeText", name: "free-text"});
+			size = getTextSize.calc(text[i].text, getFontAndAttr.calc(currentFont, 'defined-text').font, 'defined-text');
+			leftSide += size.width + size.height/2; // add a little padding to the right side. The height of the font is probably a close enough approximation.
+			maxHeight = Math.max(maxHeight, size.height)
+		}
+		this.rows.push({move: maxHeight});
+	} else {
+		// The structure is wrong here: it requires an array to do centering, but it shouldn't have.
+		if (info.length === 1) {
+			var x = width / 2;
+			this.rows.push({left: x, text: info[0].text, font: 'textfont', klass: 'defined-text', anchor: 'middle', startChar: info.startChar, endChar: info.endChar, absElemType: "freeText", name: "free-text"});
+			size = getTextSize.calc(info[0].text, 'textfont', 'defined-text');
 			this.rows.push({move: size.height});
 		}
 	}

package/src/write/layout/VoiceElements.js

@@ -27,11 +27,43 @@ VoiceElement.getSpacingUnits = function (voice) {
 // x - position to try to layout the element at
 // spacing - base spacing
 // can't call this function more than once per iteration
-VoiceElement.layoutOneItem = function (x, spacing, voice, minPadding) {
+VoiceElement.layoutOneItem = function (x, spacing, voice, minPadding, firstVoice) {
 	var child = voice.children[voice.i];
 	if (!child) return 0;
 	var er = x - voice.minx; // available extrawidth to the left
 	var pad = voice.durationindex + child.duration > 0 ? minPadding : 0; // only add padding to the items that aren't fixed to the left edge.
+	// See if this item overlaps the item in the first voice. If firstVoice is undefined then there's nothing to compare.
+	if (child.abcelem.el_type === "note" && !child.abcelem.rest && voice.voicenumber !== 0 && firstVoice) {
+		var firstChild = firstVoice.children[firstVoice.i];
+		// It overlaps if the either the child's top or bottom is inside the firstChild's or at least within 1
+		// A special case is if the element is on the same line then it can share a note head, if the notehead is the same
+		var overlaps = firstChild &&
+			((child.abcelem.maxpitch <= firstChild.abcelem.maxpitch+1 && child.abcelem.maxpitch >= firstChild.abcelem.minpitch-1) ||
+			(child.abcelem.minpitch <= firstChild.abcelem.maxpitch+1 && child.abcelem.minpitch >= firstChild.abcelem.minpitch-1))
+		// See if they can share a note head
+		if (overlaps && child.abcelem.minpitch === firstChild.abcelem.minpitch && child.abcelem.maxpitch === firstChild.abcelem.maxpitch &&
+		firstChild.heads && firstChild.heads.length > 0 && child.heads && child.heads.length > 0 &&
+		firstChild.heads[0].c === child.heads[0].c)
+			overlaps = false;
+		// If this note overlaps the note in the first voice and we haven't moved the note yet (this can be called multiple times)
+		if (overlaps) {
+			// I think that firstChild should always have at least one note head, but defensively make sure.
+			// There was a problem with this being called more than once so if a value is adjusted then it is saved so it is only adjusted once.
+			var firstChildNoteWidth = firstChild.heads && firstChild.heads.length > 0 ? firstChild.heads[0].realWidth : firstChild.fixed.w;
+			if (!child.adjustedWidth)
+				child.adjustedWidth = firstChildNoteWidth + child.w;
+			child.w = child.adjustedWidth
+			for (var j = 0; j < child.children.length; j++) {
+				var relativeChild = child.children[j];
+				if (relativeChild.name.indexOf("accidental") < 0) {
+					if (!relativeChild.adjustedWidth)
+						relativeChild.adjustedWidth = relativeChild.dx + firstChildNoteWidth;
+					relativeChild.dx = relativeChild.adjustedWidth
+				}
+			}
+
+		}
+	}
 	var extraWidth = getExtraWidth(child, pad);
 	if (er<extraWidth) { // shift right by needed amount
 		// There's an exception if a bar element is after a Part element, there is no shift.

package/src/write/layout/beam.js

@@ -116,6 +116,8 @@ function createStems(elems, asc, beam, dy, mainNote) {
 		var ovalDelta = 1 / 5;//(isGrace)?1/3:1/5;
 		var pitch = furthestHead.pitch + ((asc) ? ovalDelta : -ovalDelta);
 		var dx = asc ? furthestHead.w : 0; // down-pointing stems start on the left side of the note, up-pointing stems start on the right side, so we offset by the note width.
+		if (!isGrace)
+			dx += furthestHead.dx;
 		var x = furthestHead.x + dx; // this is now the actual x location in pixels.
 		var bary = getBarYAt(beam.startX, beam.startY, beam.endX, beam.endY, x);
 		var lineWidth = (asc) ? -0.6 : 0.6;

package/src/write/layout/staffGroup.js

@@ -1,5 +1,22 @@
 var layoutVoiceElements = require('./VoiceElements');
 
+function checkLastBarX(voices) {
+	var maxX = 0;
+	for (var i = 0; i < voices.length; i++) {
+		var curVoice = voices[i];
+		var lastChild = curVoice.children.length - 1;
+		var maxChild = curVoice.children[lastChild];
+		if (maxChild.abcelem.el_type == 'bar') {
+			var barX = maxChild.children[0].x;
+			if (barX > maxX) {
+				maxX = barX;
+			} else {
+				maxChild.children[0].x = maxX;
+			}
+		}
+	}
+}
+
 var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge) {
 	var epsilon = 0.0000001; // Fudging for inexactness of floating point math.
 	var spacingunits = 0; // number of times we will have ended up using the spacing distance (as opposed to fixed width distances)
@@ -44,7 +61,7 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 		spacingunit = 0; // number of spacingunits coming from the previously laid out element to this one
 		var spacingduration = 0;
 		for (i=0;i<currentvoices.length;i++) {
-			//console.log("greatest spacing unit", x, currentvoices[i].getNextX(), currentvoices[i].getSpacingUnits(), currentvoices[i].spacingduration);
+			//console.log("greatest spacing unit", x, layoutVoiceElements.getNextX(currentvoices[i]), layoutVoiceElements.getSpacingUnits(currentvoices[i]), currentvoices[i].spacingduration);
 			if (layoutVoiceElements.getNextX(currentvoices[i])>x) {
 				x=layoutVoiceElements.getNextX(currentvoices[i]);
 				spacingunit=layoutVoiceElements.getSpacingUnits(currentvoices[i]);
@@ -55,8 +72,15 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 		minspace = Math.min(minspace,spacingunit);
 		if (debug) console.log("currentduration: ",currentduration, spacingunits, minspace);
 
+		var lastTopVoice = undefined;
 		for (i=0;i<currentvoices.length;i++) {
-			var voicechildx = layoutVoiceElements.layoutOneItem(x,spacing, currentvoices[i], renderer.minPadding);
+			var v = currentvoices[i];
+			if (v.voicenumber === 0)
+				lastTopVoice = i;
+			var topVoice = (lastTopVoice !== undefined && currentvoices[lastTopVoice].voicenumber !== v.voicenumber) ? currentvoices[lastTopVoice] : undefined;
+			if (!isSameStaff(v, topVoice))
+				topVoice = undefined;
+			var voicechildx = layoutVoiceElements.layoutOneItem(x,spacing, v, renderer.minPadding, topVoice);
 			var dx = voicechildx-x;
 			if (dx>0) {
 				x = voicechildx; //update x
@@ -87,6 +111,9 @@ var layoutStaffGroup = function(spacing, renderer, debug, staffGroup, leftEdge)
 			spacingunit=layoutVoiceElements.getSpacingUnits(staffGroup.voices[i]);
 		}
 	}
+
+	// adjust lastBar when needed (multi staves)
+	checkLastBarX(staffGroup.voices);
 	//console.log("greatest remaining",spacingunit,x);
 	spacingunits+=spacingunit;
 	staffGroup.setWidth(x);
@@ -106,4 +133,12 @@ function getDurationIndex(element) {
 	return element.durationindex - (element.children[element.i] && (element.children[element.i].duration>0)?0:0.0000005); // if the ith element doesn't have a duration (is not a note), its duration index is fractionally before. This enables CLEF KEYSIG TIMESIG PART, etc. to be laid out before we get to the first note of other voices
 }
 
+function isSameStaff(voice1, voice2) {
+	if (!voice1 || !voice1.staff || !voice1.staff.voices || voice1.staff.voices.length === 0)
+		return false;
+	if (!voice2 || !voice2.staff || !voice2.staff.voices || voice2.staff.voices.length === 0)
+		return false;
+	return (voice1.staff.voices[0] === voice2.staff.voices[0]);
+}
+
 module.exports = layoutStaffGroup;

package/src/write/layout/voice.js

@@ -51,7 +51,8 @@ function moveDecorations(beam) {
 }
 
 function placeInLane(rightMost, relElem) {
-	// These items are centered so figure the coordinates accordingly and add a little margin.
+	// These items are centered so figure the coordinates accordingly.
+	// The font reports some extra space so the margin is built in.
 	var xCoords = relElem.getChordDim();
 	if (xCoords) {
 		for (var i = 0; i < rightMost.length; i++) {

package/src/write/selection.js

@@ -5,7 +5,7 @@ function setupSelection(engraver) {
 	if (engraver.dragging) {
 		for (var h = 0; h < engraver.selectables.length; h++) {
 			var hist = engraver.selectables[h];
-			if (hist.selectable) {
+			if (hist.svgEl.getAttribute("selectable") === "true") {
 				hist.svgEl.setAttribute("tabindex", 0);
 				hist.svgEl.setAttribute("data-index", h);
 				hist.svgEl.addEventListener("keydown", keyboardDown.bind(engraver));
@@ -79,7 +79,7 @@ function keyboardSelection(ev) {
 			this.dragTarget = this.selectables[index];
 			this.dragIndex = index;
 			this.dragMechanism = "keyboard";
-			mouseUp.bind(this)();
+			mouseUp.bind(this)(ev);
 			break;
 		case 38: // arrow up
 			handled = true;
@@ -107,7 +107,7 @@ function keyboardSelection(ev) {
 		case 9: // tab
 			// This is losing focus - if there had been dragging, then do the callback
 			if (this.dragYStep !== 0) {
-				mouseUp.bind(this)();
+				mouseUp.bind(this)(ev);
 			}
 			break;
 		default:
@@ -186,7 +186,7 @@ function getBestMatchCoordinates(dim, ev, scale) {
 }
 
 function getTarget(target) {
-	// This searches up the dom for the first item containig the attribute "selectable", or stopping at the SVG.
+	// This searches up the dom for the first item containing the attribute "selectable", or stopping at the SVG.
 	if (target.tagName === "svg")
 		return target;
 
@@ -284,7 +284,7 @@ function setSelection(dragIndex) {
 		this.dragTarget = this.selectables[dragIndex];
 		this.dragIndex = dragIndex;
 		this.dragMechanism = "keyboard";
-		mouseUp.bind(this)();
+		mouseUp.bind(this)({target: this.dragTarget.svgEl});
 	}
 }
 
@@ -311,6 +311,16 @@ function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
 	}
 	if (target.staffPos)
 		analysis.staffPos = target.staffPos;
+	var closest = ev.target;
+	while (!closest.dataset.name && closest.tagName.toLowerCase() !== 'svg')
+		closest = closest.parentNode;
+	var parent = ev.target;
+	while (!parent.dataset.index && parent.tagName.toLowerCase() !== 'svg')
+		parent = parent.parentNode;
+	analysis.name = parent.dataset.name;
+	analysis.clickedName = closest.dataset.name;
+	analysis.parentClasses = parent.classList;
+	analysis.clickedClasses = closest.classList;
 
 	for (var i=0; i<this.listeners.length;i++) {
 		this.listeners[i](target.absEl.abcelem, target.absEl.tuneNumber, classes.join(' '), analysis, { step: dragStep, max: dragMax, index: dragIndex, setSelection: setSelection.bind(this)}, ev);

package/src/write/separator.js

@@ -2,7 +2,7 @@ function Separator(spaceAbove, lineLength, spaceBelow) {
 	this.rows = [];
 	if (spaceAbove)
 		this.rows.push({move: spaceAbove});
-	this.rows.push({ separator: lineLength });
+	this.rows.push({ separator: lineLength, absElemType: "separator" });
 	if (spaceBelow)
 		this.rows.push({move: spaceBelow});
 }

package/src/write/subtitle.js

@@ -1,11 +1,11 @@
-function Subtitle(spaceAbove, formatting, text, center, paddingLeft, getTextSize) {
+function Subtitle(spaceAbove, formatting, info, center, paddingLeft, getTextSize) {
 	this.rows = [];
 	if (spaceAbove)
 		this.rows.push({move: spaceAbove});
 	var tAnchor = formatting.titleleft ? 'start' : 'middle';
 	var tLeft = formatting.titleleft ? paddingLeft : center;
-	this.rows.push({left: tLeft, text: text, font: 'subtitlefont', klass: 'text subtitle', anchor: tAnchor});
-	var size = getTextSize.calc(text, 'subtitlefont', 'text subtitle');
+	this.rows.push({left: tLeft, text: info.text, font: 'subtitlefont', klass: 'text subtitle', anchor: tAnchor, startChar: info.startChar, endChar: info.endChar, absElemType: "subtitle", name: "subtitle"});
+	var size = getTextSize.calc(info.text, 'subtitlefont', 'text subtitle');
 	this.rows.push({move: size.height});
 }
 

package/src/write/svg.js

@@ -6,6 +6,7 @@ var svgNS = "http://www.w3.org/2000/svg";
 
 function Svg(wrapper) {
 	this.svg = createSvg();
+	this.currentGroup = [];
 	wrapper.appendChild(this.svg);
 }
 
@@ -13,6 +14,7 @@ Svg.prototype.clear = function() {
 	if (this.svg) {
 		var wrapper = this.svg.parentNode;
 		this.svg = createSvg();
+		this.currentGroup = [];
 		if (wrapper) {
 			// TODO-PER: If the wrapper is not present, then the underlying div was pulled out from under this instance. It's possible that is still useful (for creating the music off page?)
 			wrapper.innerHTML = "";
@@ -135,7 +137,7 @@ Svg.prototype.rect = function(attr) {
 	lines.push(constructVLine(x2, y1, y2));
 	lines.push(constructVLine(x1, y2, y1));
 
-	return this.path({ path: lines.join(" "), stroke: "none"});
+	return this.path({ path: lines.join(" "), stroke: "none", "data-name": attr["data-name"] });
 };
 
 Svg.prototype.dottedLine = function(attr) {
@@ -177,10 +179,29 @@ Svg.prototype.text = function(text, attr, target) {
 	var lines = (""+text).split("\n");
 	for (var i = 0; i < lines.length; i++) {
 		var line = document.createElementNS(svgNS, 'tspan');
-		line.textContent = lines[i];
 		line.setAttribute("x", attr.x ? attr.x : 0);
 		if (i !== 0)
 			line.setAttribute("dy", "1.2em");
+		if (lines[i].indexOf("\x03") !== -1) {
+			var parts = lines[i].split('\x03')
+			line.textContent = parts[0];
+			if (parts[1]) {
+				var ts2 = document.createElementNS(svgNS, 'tspan');
+				ts2.setAttribute("dy", "-0.3em");
+				ts2.setAttribute("style", "font-size:0.7em");
+				ts2.textContent = parts[1];
+				line.appendChild(ts2);
+			}
+			if (parts[2]) {
+				var dist = parts[1] ? "0.4em" : "0.1em";
+				var ts3 = document.createElementNS(svgNS, 'tspan');
+				ts3.setAttribute("dy", dist);
+				ts3.setAttribute("style", "font-size:0.7em");
+				ts3.textContent = parts[2];
+				line.appendChild(ts3);
+			}
+		} else
+			line.textContent = lines[i];
 		el.appendChild(line);
 	}
 	if (target)
@@ -252,8 +273,8 @@ Svg.prototype.getTextSize = function(text, attr, el) {
 		size = this.guessWidth(text, attr);
 	}
 	if (removeLater) {
-		if (this.currentGroup)
-			this.currentGroup.removeChild(el);
+		if (this.currentGroup.length > 0)
+			this.currentGroup[0].removeChild(el);
 		else
 			this.svg.removeChild(el);
 	}
@@ -271,18 +292,24 @@ Svg.prototype.openGroup = function(options) {
 		el.setAttribute("fill", options.fill);
 	if (options.stroke)
 		el.setAttribute("stroke", options.stroke);
+	if (options['data-name'])
+		el.setAttribute("data-name", options['data-name']);
 
 	if (options.prepend)
-		this.svg.insertBefore(el, this.svg.firstChild);
+		this.prepend(el);
 	else
-		this.svg.appendChild(el);
-	this.currentGroup = el;
+		this.append(el);
+	this.currentGroup.unshift(el);
 	return el;
 };
 
 Svg.prototype.closeGroup = function() {
-	var g = this.currentGroup;
-	this.currentGroup = null;
+	var g = this.currentGroup.shift();
+	if (g && g.children.length === 0) {
+		// If nothing was added to the group it is because all the elements were invisible. We don't need the group, then.
+		this.svg.removeChild(g);
+		return null;
+	}
 	return g;
 };
 
@@ -292,7 +319,7 @@ Svg.prototype.path = function(attr) {
 		if (attr.hasOwnProperty(key)) {
 			if (key === 'path')
 				el.setAttributeNS(null, 'd', attr.path);
-			else
+			else if (attr[key] !== undefined)
 				el.setAttributeNS(null, key, attr[key]);
 		}
 	}
@@ -315,16 +342,16 @@ Svg.prototype.pathToBack = function(attr) {
 };
 
 Svg.prototype.append = function(el) {
-	if (this.currentGroup)
-		this.currentGroup.appendChild(el);
+	if (this.currentGroup.length > 0)
+		this.currentGroup[0].appendChild(el);
 	else
 		this.svg.appendChild(el);
 };
 
 Svg.prototype.prepend = function(el) {
 	// The entire group is prepended, so don't prepend the individual elements.
-	if (this.currentGroup)
-		this.currentGroup.appendChild(el);
+	if (this.currentGroup.length > 0)
+		this.currentGroup[0].appendChild(el);
 	else
 		this.svg.insertBefore(el, this.svg.firstChild);
 };