abcjs 6.0.0-beta.8 → 6.0.1

package/src/write/selection.js

@@ -1,26 +1,11 @@
-//    Copyright (C) 2020 Paul Rosen (paul at paulrosen dot net)
-//
-//    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-//    documentation files (the "Software"), to deal in the Software without restriction, including without limitation
-//    the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
-//    to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-//
-//    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-//
-//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
-//    BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-//    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-//    DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
 var spacing = require('./abc_spacing');
 
 function setupSelection(engraver) {
 	engraver.rangeHighlight = rangeHighlight;
 	if (engraver.dragging) {
-		for (var h = 0; h < engraver.history.length; h++) {
-			var hist = engraver.history[h];
-			if (hist.selectable) {
+		for (var h = 0; h < engraver.selectables.length; h++) {
+			var hist = engraver.selectables[h];
+			if (hist.svgEl.getAttribute("selectable") === "true") {
 				hist.svgEl.setAttribute("tabindex", 0);
 				hist.svgEl.setAttribute("data-index", h);
 				hist.svgEl.addEventListener("keydown", keyboardDown.bind(engraver));
@@ -34,26 +19,42 @@ function setupSelection(engraver) {
 	engraver.renderer.paper.svg.addEventListener('mouseup', mouseUp.bind(engraver));
 }
 
-function getCoord(ev) {
-	var x = ev.offsetX;
-	var y = ev.offsetY;
-	// The target might be the SVG that we want, or it could be an item in the SVG (usually a path). If it is not the SVG then
-	// add an offset to the coordinates.
-	// if (ev.target.tagName.toLowerCase() !== 'svg') {
-	// 	var box = ev.target.getBBox();
-	// 	var absRect = ev.target.getBoundingClientRect();
-	// 	var offsetX = ev.clientX - absRect.left;
-	// 	var offsetY = ev.clientY - absRect.top;
-	// 	x = offsetX + box.x;
-	// 	y = offsetY + box.y;
-	// }
-	return [x,y];
+function getCoord(ev, svg) {
+	var scaleX = 1;
+	var scaleY = 1;
+
+	// when renderer.options.responsive === 'resize' the click coords are in relation to the HTML
+	// element, we need to convert to the SVG viewBox coords
+	if (svg.viewBox.baseVal) { // Firefox passes null to this when no viewBox is given
+		// Chrome makes these values null when no viewBox is given.
+		if (svg.viewBox.baseVal.width !== 0)
+			scaleX = svg.viewBox.baseVal.width / svg.clientWidth
+		if (svg.viewBox.baseVal.height !== 0)
+			scaleY = svg.viewBox.baseVal.height / svg.clientHeight
+	}
+
+	var svgClicked = ev.target.tagName === "svg";
+	var x;
+	var y;
+	if (svgClicked) {
+		x = ev.offsetX;
+		y = ev.offsetY;
+	} else {
+		x = ev.layerX;
+		y = ev.layerY;
+	}
+
+	x = x * scaleX;
+	y = y * scaleY;
+	//console.log(x, y)
+
+	return [x, y];
 }
 
 function elementFocused(ev) {
 	// If there had been another element focused and is being dragged, then report that before setting the new element up.
 	if (this.dragMechanism === "keyboard" && this.dragYStep !== 0 && this.dragTarget)
-		notifySelect.bind(this)(this.dragTarget, this.dragYStep, this.history.length, this.dragIndex);
+		notifySelect.bind(this)(this.dragTarget, this.dragYStep, this.selectables.length, this.dragIndex, ev);
 
 	this.dragYStep = 0;
 }
@@ -75,14 +76,14 @@ function keyboardSelection(ev) {
 		case 13:
 		case 32:
 			handled = true;
-			this.dragTarget = this.history[index];
+			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;
-			this.dragTarget = this.history[index];
+			this.dragTarget = this.selectables[index];
 			this.dragIndex = index;
 			if (this.dragTarget.isDraggable) {
 				if (this.dragging && this.dragTarget.isDraggable)
@@ -93,7 +94,7 @@ function keyboardSelection(ev) {
 			break;
 		case 40: // arrow down
 			handled = true;
-			this.dragTarget = this.history[index];
+			this.dragTarget = this.selectables[index];
 			this.dragIndex = index;
 			this.dragMechanism = "keyboard";
 			if (this.dragTarget.isDraggable) {
@@ -106,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:
@@ -117,22 +118,21 @@ function keyboardSelection(ev) {
 		ev.preventDefault();
 }
 
-function mouseDown(ev) {
-	// "this" is the EngraverController because of the bind(this) when setting the event listener.
-
-	var box = getCoord(ev);
-	var x = box[0];
-	var y = box[1];
+function findElementInHistory(selectables, el) {
+	for (var i = 0; i < selectables.length; i++) {
+		if (el === selectables[i].svgEl)
+			return i;
+	}
+	return -1;
+}
 
+function findElementByCoord(self, x, y) {
 	var minDistance = 9999999;
 	var closestIndex = -1;
-	var chosenEl;
-	for (var i = 0; i < this.history.length && minDistance > 0; i++) {
-		var el = this.history[i];
-		if (!el.selectable)
-			continue;
+	for (var i = 0; i < self.selectables.length && minDistance > 0; i++) {
+		var el = self.selectables[i];
 
-		this.getDim(el);
+		self.getDim(el);
 		if (el.dim.left < x && el.dim.right > x && el.dim.top < y && el.dim.bottom > y) {
 			// See if it is a direct hit on an element - if so, definitely take it (there are no overlapping elements)
 			closestIndex = i;
@@ -162,13 +162,82 @@ function mouseDown(ev) {
 			}
 		}
 	}
-	if (closestIndex >= 0 && minDistance <= 12) {
-		this.dragTarget = this.history[closestIndex];
-		this.dragIndex = closestIndex;
+	return (closestIndex >= 0 && minDistance <= 12) ? closestIndex : -1;
+}
+
+function getBestMatchCoordinates(dim, ev, scale) {
+	// Different browsers have conflicting meanings for the coordinates that are returned.
+	// If the item we want is clicked on directly, then we will just see what is the best match.
+	// This seems like less of a hack than browser sniffing.
+	if (dim.x <= ev.offsetX && dim.x+dim.width >= ev.offsetX &&
+		dim.y <= ev.offsetY && dim.y+dim.height >= ev.offsetY)
+		return [ ev.offsetX, ev.offsetY];
+	// Firefox returns a weird value for offset, but layer is correct.
+	// Safari and Chrome return the correct value for offset, but layer is multiplied by the scale (that is, if it were rendered with { scale: 2 })
+	// For instance (if scale is 2):
+	// Firefox: { offsetY: 5, layerY: 335 }
+	// Others: {offsetY: 335, layerY: 670} (there could be a little rounding, so the number might not be exactly 2x)
+	// So, if layerY/scale is approx. offsetY, then use offsetY, otherwise use layerY
+	var epsilon = Math.abs(ev.layerY/scale - ev.offsetY);
+	if (epsilon < 3)
+		return [ ev.offsetX, ev.offsetY];
+	else
+		return  [ ev.layerX, ev.layerY];
+}
+
+function getTarget(target) {
+	// This searches up the dom for the first item containing the attribute "selectable", or stopping at the SVG.
+	if (target.tagName === "svg")
+		return target;
+
+	var found = target.getAttribute("selectable");
+	while (!found) {
+		target = target.parentElement;
+		if (target.tagName === "svg")
+			found = true;
+		else
+			found = target.getAttribute("selectable");
+	}
+	return target;
+}
+
+function getMousePosition(self, ev) {
+	// if the user clicked exactly on an element that we're interested in, then we already have the answer.
+	// This is more reliable than the calculations because firefox returns different coords for offsetX, offsetY
+	var x;
+	var y;
+	var box;
+	var clickedOn = findElementInHistory(self.selectables, getTarget(ev.target));
+	if (clickedOn >= 0) {
+		// There was a direct hit on an element.
+		box = getBestMatchCoordinates(self.selectables[clickedOn].svgEl.getBBox(), ev, self.scale);
+		x = box[0];
+		y = box[1];
+		//console.log("clicked on", clickedOn, x, y, self.selectables[clickedOn].svgEl.getBBox(), ev.target.getBBox());
+	} else {
+		// See if they clicked close to an element.
+		box = getCoord(ev, self.renderer.paper.svg);
+		x = box[0];
+		y = box[1];
+		clickedOn = findElementByCoord(self, x, y);
+		//console.log("clicked near", clickedOn, x, y, printEl(ev.target));
+	}
+	return { x: x, y: y, clickedOn: clickedOn };
+}
+
+function mouseDown(ev) {
+	// "this" is the EngraverController because of the bind(this) when setting the event listener.
+
+	var positioning = getMousePosition(this, ev);
+
+	// Only start dragging if the user clicked close enough to an element and clicked with the main mouse button.
+	if (positioning.clickedOn >= 0 && ev.button === 0) {
+		this.dragTarget = this.selectables[positioning.clickedOn];
+		this.dragIndex = positioning.clickedOn;
 		this.dragMechanism = "mouse";
-		this.dragMouseStart = { x: x, y: y };
+		this.dragMouseStart = { x: positioning.x, y: positioning.y };
 		if (this.dragging && this.dragTarget.isDraggable) {
-			this.renderer.addGlobalClass("abcjs-dragging-in-progress");
+			addGlobalClass(this.renderer.paper, "abcjs-dragging-in-progress");
 			this.dragTarget.absEl.highlight(undefined, this.dragColor);
 		}
 	}
@@ -180,11 +249,9 @@ function mouseMove(ev) {
 	if (!this.dragTarget || !this.dragging || !this.dragTarget.isDraggable || this.dragMechanism !== 'mouse')
 		return;
 
-	var box = getCoord(ev);
-	var x = box[0];
-	var y = box[1];
+	var positioning = getMousePosition(this, ev);
 
-	var yDist = Math.round((y - this.dragMouseStart.y)/spacing.STEP);
+	var yDist = Math.round((positioning.y - this.dragMouseStart.y)/spacing.STEP);
 	if (yDist !== this.dragYStep) {
 		this.dragYStep = yDist;
 		this.dragTarget.svgEl.setAttribute("transform", "translate(0," + (yDist * spacing.STEP) + ")");
@@ -203,23 +270,25 @@ function mouseUp(ev) {
 		this.dragTarget.absEl.highlight(undefined, this.selectionColor);
 	}
 
-	notifySelect.bind(this)(this.dragTarget, this.dragYStep, this.history.length, this.dragIndex);
-	this.dragTarget.svgEl.focus();
-	this.dragTarget = null;
-	this.dragIndex = -1;
-	this.renderer.removeGlobalClass("abcjs-dragging-in-progress");
+	notifySelect.bind(this)(this.dragTarget, this.dragYStep, this.selectables.length, this.dragIndex, ev);
+	if (this.dragTarget.svgEl && this.dragTarget.svgEl.focus) {
+		this.dragTarget.svgEl.focus();
+		this.dragTarget = null;
+		this.dragIndex = -1;
+	}
+	removeGlobalClass(this.renderer.svg, "abcjs-dragging-in-progress");
 }
 
 function setSelection(dragIndex) {
-	if (dragIndex >= 0 && dragIndex < this.history.length) {
-		this.dragTarget = this.history[dragIndex];
+	if (dragIndex >= 0 && dragIndex < this.selectables.length) {
+		this.dragTarget = this.selectables[dragIndex];
 		this.dragIndex = dragIndex;
 		this.dragMechanism = "keyboard";
-		mouseUp.bind(this)();
+		mouseUp.bind(this)({target: this.dragTarget.svgEl});
 	}
 }
 
-function notifySelect(target, dragStep, dragMax, dragIndex) {
+function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
 	var classes = [];
 	if (target.absEl.elemset) {
 		var classObj = {};
@@ -240,9 +309,22 @@ function notifySelect(target, dragStep, dragMax, dragIndex) {
 		findNumber(classes[ii], "abcjs-l", analysis, "line");
 		findNumber(classes[ii], "abcjs-m", analysis, "measure");
 	}
+	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;
+	analysis.selectableElement = target.svgEl;
 
 	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)});
+		this.listeners[i](target.absEl.abcelem, target.absEl.tuneNumber, classes.join(' '), analysis, { step: dragStep, max: dragMax, index: dragIndex, setSelection: setSelection.bind(this)}, ev);
 	}
 }
 
@@ -257,7 +339,7 @@ function findNumber(klass, match, target, name) {
 
 function clearSelection() {
 	for (var i=0;i<this.selected.length;i++) {
-		this.selected[i].unhighlight();
+		this.selected[i].unhighlight(undefined, this.renderer.foregroundColor);
 	}
 	this.selected = [];
 }
@@ -283,4 +365,40 @@ function rangeHighlight(start,end) {
 	}
 }
 
+function getClassSet(el) {
+	var oldClass = el.getAttribute('class');
+	if (!oldClass)
+		oldClass = "";
+	var klasses = oldClass.split(" ");
+	var obj = {};
+	for (var i = 0; i < klasses.length; i++)
+		obj[klasses[i]] = true;
+	return obj;
+}
+
+function setClassSet(el, klassSet) {
+	var klasses = [];
+	for (var key in klassSet) {
+		if (klassSet.hasOwnProperty(key))
+			klasses.push(key);
+	}
+	el.setAttribute('class', klasses.join(' '));
+}
+
+function addGlobalClass(svg, klass) {
+	if (svg) {
+		var obj = getClassSet(svg.svg);
+		obj[klass] = true;
+		setClassSet(svg.svg, obj);
+	}
+}
+
+function removeGlobalClass(svg, klass) {
+	if (svg) {
+		var obj = getClassSet(svg.svg);
+		delete obj[klass];
+		setClassSet(svg.svg, obj);
+	}
+}
+
 module.exports = setupSelection;

package/src/write/separator.js

@@ -0,0 +1,10 @@
+function Separator(spaceAbove, lineLength, spaceBelow) {
+	this.rows = [];
+	if (spaceAbove)
+		this.rows.push({move: spaceAbove});
+	this.rows.push({ separator: lineLength, absElemType: "separator" });
+	if (spaceBelow)
+		this.rows.push({move: spaceBelow});
+}
+
+module.exports = Separator;

package/src/write/set-class.js

@@ -0,0 +1,21 @@
+var setClass = function (elemset, addClass, removeClass, color) {
+	if (!elemset)
+		return;
+	for (var i = 0; i < elemset.length; i++) {
+		var el = elemset[i];
+		var attr = el.getAttribute("highlight");
+		if (!attr) attr = "fill";
+		el.setAttribute(attr, color);
+		var kls = el.getAttribute("class");
+		if (!kls) kls = "";
+		kls = kls.replace(removeClass, "");
+		kls = kls.replace(addClass, "");
+		if (addClass.length > 0) {
+			if (kls.length > 0 && kls.charAt(kls.length - 1) !== ' ') kls += " ";
+			kls += addClass;
+		}
+		el.setAttribute("class", kls);
+	}
+};
+
+module.exports = setClass;

package/src/write/subtitle.js

@@ -0,0 +1,12 @@
+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: 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});
+}
+
+module.exports = Subtitle;

package/src/write/svg.js

@@ -1,18 +1,4 @@
 //    abc_voice_element.js: Definition of the VoiceElement class.
-//    Copyright (C) 2010-2020 Gregory Dyke (gregdyke at gmail dot com) and Paul Rosen
-//
-//    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-//    documentation files (the "Software"), to deal in the Software without restriction, including without limitation
-//    the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
-//    to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-//
-//    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-//
-//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
-//    BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-//    NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-//    DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 /*global module */
 
@@ -20,6 +6,7 @@ var svgNS = "http://www.w3.org/2000/svg";
 
 function Svg(wrapper) {
 	this.svg = createSvg();
+	this.currentGroup = [];
 	wrapper.appendChild(this.svg);
 }
 
@@ -27,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 = "";
@@ -74,14 +62,10 @@ Svg.prototype.setResponsiveWidth = function(w, h) {
 Svg.prototype.setSize = function(w, h) {
 	this.svg.setAttribute('width', w);
 	this.svg.setAttribute('height', h);
-	// TODO-PER: Is this hack still needed?
-	// Correct for IE problem in calculating height
-	// var isIE = /*@cc_on!@*/false;//IE detector
-	// if (isIE) {
-	// 	this.paper.canvas.parentNode.style.width = w + "px";
-	// 	this.paper.canvas.parentNode.style.height = "" + h + "px";
-	// } else
-	// 	this.paper.canvas.parentNode.setAttribute("style", "width:" + w + "px");
+};
+
+Svg.prototype.setAttribute = function(attr, value) {
+	this.svg.setAttribute(attr, value);
 };
 
 Svg.prototype.setScale = function(scale) {
@@ -126,15 +110,19 @@ Svg.prototype.setParentStyles = function(attr) {
 };
 
 function constructHLine(x1, y1, x2) {
-	return "M " + x1 + " " + y1 + " L " + x2 + ' ' + y1 +
-		" L " + x2 + " " + (y1+1) + " " +
-		" L " + x1 + " " + (y1+1) + " " + " z ";
+	var len = x2 - x1;
+	return "M " + x1 + " " + y1 +
+		" l " + len + ' ' + 0 +
+		" l " + 0 + " " + 1 + " " +
+		" l " + (-len) + " " + 0 + " " + " z ";
 }
 
 function constructVLine(x1, y1, y2) {
-	return "M " + x1 + " " + y1 + " L " + x1 + ' ' + y2 +
-		" L " + (x1+1) + " " + y2 + " " +
-		" L " + (x1+1) + " " + y1 + " " + " z ";
+	var len = y2 - y1;
+	return "M " + x1 + " " + y1 +
+		" l " + 0 + ' ' + len +
+		" l " + 1 + " " + 0 + " " +
+		" l " + 0 + " " + (-len) + " " + " z ";
 }
 
 Svg.prototype.rect = function(attr) {
@@ -146,14 +134,43 @@ Svg.prototype.rect = function(attr) {
 	var y2 = attr.y + attr.height;
 	lines.push(constructHLine(x1, y1, x2));
 	lines.push(constructHLine(x1, y2, x2));
-	lines.push(constructVLine(x1, y1, y2));
 	lines.push(constructVLine(x2, y1, y2));
+	lines.push(constructVLine(x1, y2, y1));
+
+	return this.path({ path: lines.join(" "), stroke: "none", "data-name": attr["data-name"] });
+};
 
-	return this.path({ path: lines.join(" "), stroke: "none"});
+Svg.prototype.dottedLine = function(attr) {
+	var el = document.createElementNS(svgNS, 'line');
+	el.setAttribute("x1", attr.x1);
+	el.setAttribute("x2", attr.x2);
+	el.setAttribute("y1", attr.y1);
+	el.setAttribute("y2", attr.y2);
+	el.setAttribute("stroke", attr.stroke);
+	el.setAttribute("stroke-dasharray", "5,5");
+	this.svg.insertBefore(el, this.svg.firstChild);
+};
+
+Svg.prototype.rectBeneath = function(attr) {
+	var el = document.createElementNS(svgNS, 'rect');
+	el.setAttribute("x", attr.x);
+	el.setAttribute("width", attr.width);
+	el.setAttribute("y", attr.y);
+	el.setAttribute("height", attr.height);
+	if (attr.stroke)
+		el.setAttribute("stroke", attr.stroke);
+	if (attr['stroke-opacity'])
+		el.setAttribute("stroke-opacity", attr['stroke-opacity']);
+	if (attr.fill)
+		el.setAttribute("fill", attr.fill);
+	if (attr['fill-opacity'])
+		el.setAttribute("fill-opacity", attr['fill-opacity']);
+	this.svg.insertBefore(el, this.svg.firstChild);
 };
 
 Svg.prototype.text = function(text, attr, target) {
 	var el = document.createElementNS(svgNS, 'text');
+	el.setAttribute("stroke", "none");
 	for (var key in attr) {
 		if (attr.hasOwnProperty(key)) {
 			el.setAttribute(key, attr[key]);
@@ -162,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)
@@ -237,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);
 	}
@@ -256,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;
 };
 
@@ -277,7 +319,9 @@ Svg.prototype.path = function(attr) {
 		if (attr.hasOwnProperty(key)) {
 			if (key === 'path')
 				el.setAttributeNS(null, 'd', attr.path);
-			else
+			else if (key === 'klass')
+				el.setAttributeNS(null, "class", attr[key]);
+			else if (attr[key] !== undefined)
 				el.setAttributeNS(null, key, attr[key]);
 		}
 	}
@@ -291,6 +335,8 @@ Svg.prototype.pathToBack = function(attr) {
 		if (attr.hasOwnProperty(key)) {
 			if (key === 'path')
 				el.setAttributeNS(null, 'd', attr.path);
+			else if (key === 'klass')
+				el.setAttributeNS(null, "class", attr[key]);
 			else
 				el.setAttributeNS(null, key, attr[key]);
 		}
@@ -300,16 +346,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);
 };
@@ -322,10 +368,16 @@ Svg.prototype.setAttributeOnElement = function(el, attr) {
 	}
 };
 
+Svg.prototype.moveElementToChild = function(parent, child) {
+	parent.appendChild(child);
+};
+
 function createSvg() {
 	var svg = document.createElementNS(svgNS, "svg");
 	svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
 	svg.setAttribute('role', 'img');    // for accessibility
+	svg.setAttribute('fill', 'currentColor');    // for automatically picking up dark mode and high contrast
+	svg.setAttribute('stroke', 'currentColor');    // for automatically picking up dark mode and high contrast
 	return svg;
 }