abcjs 6.0.0-beta.7 → 6.0.0

package/src/test/rendering-lint.js

@@ -13,10 +13,7 @@ function lintOne(history, abcString) {
 	var originalText = "``";
 	if (history.absEl && history.absEl.abcelem && history.absEl.abcelem.startChar >= 0)
 		originalText = '`' + abcString.substring(history.absEl.abcelem.startChar, history.absEl.abcelem.endChar) + '`';
-	if (history.selectable)
-		originalText += " selectable";
-	else
-		originalText += " not-selectable";
+	originalText += " selectable";
 	if (history.isDraggable)
 		originalText += " draggable";
 	else
@@ -105,6 +102,8 @@ function listAbsElement(absEl, indent) {
 		var item = absEl[keys[i]];
 		switch(keys[i]) {
 			case "abcelem":
+			case "highlight":
+			case "unhighlight":
 				break;
 			case "elemset":
 				// List this at the bottom
@@ -134,6 +133,24 @@ function listAbsElement(absEl, indent) {
 					}
 				}
 				break;
+			case "tuneNumber":
+			case "bottom":
+			case "duration":
+			case "durationClass":
+			case "extraw":
+			case "minspacing":
+			case "top":
+			case "type":
+			case "w":
+			case "x":
+				output.push(keys[i] + ": " + item);
+				break;
+			case "invisible":
+			case "isClef":
+				// Don't clutter with false items
+				if (item)
+					output.push(keys[i] + ": " + item);
+				break;
 			default:
 				if (item !== undefined)
 					output.push(keys[i] + ": " + item);
@@ -150,7 +167,6 @@ function listAbsElement(absEl, indent) {
 }
 
 function listRelativeElement(relativeElement, indent) {
-	var tab = createIndent(indent);
 	var tab2 = createIndent(indent+1);
 	var output = [];
 	output.push("relative element: " + relativeElement.type);
@@ -161,6 +177,9 @@ function listRelativeElement(relativeElement, indent) {
 			case "parent":
 			case "part":
 				break;
+			case "dim":
+				output.push(keys[i] +": "+JSON.stringify(item.attr));
+				break;
 			case "graphelem":
 				if (item) {
 					output.push(keys[i] +": ");
@@ -169,6 +188,20 @@ function listRelativeElement(relativeElement, indent) {
 					output.push(svg);
 				}
 				break;
+			case "note":
+				break;
+			case "tempo":
+				var tempoDetails = [];
+				if (item.preString)
+					tempoDetails.push("preString: " + item.preString);
+				if (item.duration && item.duration.length)
+					tempoDetails.push("duration: " + item.duration.join(","));
+				if (item.bpm)
+					tempoDetails.push("bpm: " + item.bpm);
+				if (item.postString)
+					tempoDetails.push("postString: " + item.postString);
+				output.push(keys[i] + ": " + tempoDetails.join(", "));
+				break;
 			default:
 				if (item !== undefined)
 					output.push(keys[i] + ": " + (''+item).replace(/\n/g, "\\n"));

package/src/write/abc_absolute_element.js

@@ -1,26 +1,38 @@
 //    abc_absolute_element.js: Definition of the AbsoluteElement 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:
+
+var setClass = require('./set-class');
+var highlight = require("./highlight");
+var unhighlight = require("./unhighlight");
+
+// Everything that is placed in the SVG is first created as an absolute element. This is one unit of graphic information.
+// That is, it embodies a concept: a clef, a time signature, a bar line,etc. or most complexly:
+// a note with its accidental, grace note, chord symbol, trill, stem, eighth flags, etc.
+// In the largest sense, these are placed on the page at a particular place that is determined during the layout phase.
+// This object doesn't contain any of the drawing information, though. That information is contained in an array of
+// RelativeElements as the "children" of this class.
+// During the layout phase, the width of all the children is calculated and the X coordinate of the absolute element is set.
 //
-//    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+// So, after the AbsoluteElement is placed, then its children can be placed relative to that. There are different types of
+// relative elements that are placed with different rules:
+// 1) Fixed - these elements don't move relative to the absolute element's coordinates. These are things like the notehead,
+// any ledger lines, accidentals, etc.
+// 2) Slotted - these elements can move vertically and don't get Y coordinates until after the absolute element is placed.
+// These are things like the chord symbol, many decorations, the lyrics, etc.
 //
-//    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');
+// Relative elements are also classified by how they are related. This could be:
+// 1) Increases the absolute element's width to the left. This doesn't change the center point of
+// the absolute element, so adding a sharp to the note won't move it to the right. However, if the elements
+// are close together then this enforces a minimum distance.
+// 2) Has no effect on the width. Annotations and the tempo act like this. No matter how long they are the width doesn't change.
+// 3) Increases the absolute element's width to the right. This doesn't change the center point,
+// but it will increase the minimum distance.
+// 4) Sets the width on both sides. This is the note heads. They are centered on both sides of the absolute element's X coordinate.
 
 // duration - actual musical duration - different from notehead duration in triplets. refer to abcelem to get the notehead duration
 // minspacing - spacing which must be taken on top of the width defined by the duration
 // type is a meta-type for the element. It is not necessary for drawing, but it is useful to make semantic sense of the element. For instance, it can be used in the element's class name.
 var AbsoluteElement = function AbsoluteElement(abcelem, duration, minspacing, type, tuneNumber, options) {
-	//console.log("Absolute:",abcelem, type);
+//	console.log("Absolute:",abcelem, duration, minspacing, type, tuneNumber, options);
 	if (!options)
 		options = {};
 	this.tuneNumber = tuneNumber;
@@ -33,13 +45,17 @@ var AbsoluteElement = function AbsoluteElement(abcelem, duration, minspacing, ty
 	this.heads = [];
 	this.extra = [];
 	this.extraw = 0;
-	//this.decs = [];
 	this.w = 0;
 	this.right = [];
 	this.invisible = false;
 	this.bottom = undefined;
 	this.top = undefined;
 	this.type = type;
+
+	// The following are the dimensions of the fixed part of the element.
+	// That is, the chord text will be a different height depending on lot of factors, but the 8th flag will always be in the same place.
+	this.fixed = { w: 0, t: undefined, b: undefined }; // there is no x-coord here, because that is set later.
+
 	// these are the heights of all of the vertical elements that can't be placed until the end of the line.
 	// the vertical order of elements that are above is: tempo, part, volume/dynamic, ending/chord, lyric
 	// the vertical order of elements that are below is: lyric, chord, volume/dynamic
@@ -59,41 +75,29 @@ var AbsoluteElement = function AbsoluteElement(abcelem, duration, minspacing, ty
 	};
 };
 
-// For each of the relative elements that can't be placed in advance (because their vertical placement depends on everything
-// else on the line), this iterates through them and sets their pitch. By the time this is called, specialYResolved contains a
-// hash with the vertical placement (in pitch units) for each type.
-// TODO-PER: I think this needs to be separated by "above" and "below". How do we know that for dynamics at the point where they are being defined, though? We need a pass through all the relative elements to set "above" and "below".
-AbsoluteElement.prototype.setUpperAndLowerElements = function(specialYResolved) {
-	// specialYResolved contains the actual pitch for each of the classes of elements.
-	for (var i = 0; i < this.children.length; i++) {
-		var child = this.children[i];
-		for (var key in this.specialY) { // for each class of element that needs to be placed vertically
-			if (this.specialY.hasOwnProperty(key)) {
-				if (child[key]) { // If this relative element has defined a height for this class of element
-					child.pitch = specialYResolved[key];
-					if (child.top === undefined) { // TODO-PER: HACK! Not sure this is the right place to do this.
-						child.setUpperAndLowerElements(specialYResolved);
-						this.pushTop(child.top);
-						this.pushBottom(child.bottom);
-					}
-				}
-			}
-		}
-	}
-};
-
-AbsoluteElement.prototype.getMinWidth = function () { // absolute space taken to the right of the note
-	return this.w;
-};
-
-AbsoluteElement.prototype.getExtraWidth = function () { // space needed to the left of the note
-	return -this.extraw;
+AbsoluteElement.prototype.getFixedCoords = function () {
+	return { x: this.x, w: this.fixed.w, t: this.fixed.t, b: this.fixed.b };
 };
 
 AbsoluteElement.prototype.addExtra = function (extra) {
+	// used for accidentals, multi-measure rest text,
+	// left-side decorations, gracenote heads,
+	// left annotations, gracenote stems.
+	// if (!(extra.c && extra.c.indexOf("accidentals") >= 0) &&
+	// 	!(extra.c && extra.c.indexOf("arpeggio") >= 0) &&
+	// 	extra.type !== "multimeasure-text" &&
+	// 	!(extra.c === "noteheads.quarter" && (extra.scalex === 0.6 || extra.scalex === 0.36)) &&
+	// 	!(extra.type === "stem" && extra.linewidth === -0.6) &&
+	// 	extra.position !== "left"
+	// )
+	// 	console.log("extra", extra);
+
+	this.fixed.w = Math.max(this.fixed.w, extra.dx+extra.w);
+	if (this.fixed.t === undefined) this.fixed.t = extra.top; else this.fixed.t = Math.max(this.fixed.t, extra.top);
+	if (this.fixed.b === undefined) this.fixed.b = extra.bottom; else this.fixed.b = Math.min(this.fixed.b, extra.bottom);
 	if (extra.dx<this.extraw) this.extraw = extra.dx;
 	this.extra[this.extra.length] = extra;
-	this.addChild(extra);
+	this._addChild(extra);
 };
 
 AbsoluteElement.prototype.addHead = function (head) {
@@ -103,18 +107,66 @@ AbsoluteElement.prototype.addHead = function (head) {
 };
 
 AbsoluteElement.prototype.addRight = function (right) {
+	// // used for clefs, note heads, bar lines, stems, key-signature accidentals, non-beamed flags, dots
+	// if (!(right.c && right.c.indexOf("clefs") >= 0) &&
+	// 	!(right.c && right.c.indexOf("noteheads") >= 0) &&
+	// 	!(right.c && right.c.indexOf("flags") >= 0) &&
+	// 	!(right.c && right.c.indexOf("rests") >= 0) &&
+	// 	!(right.c && right.c.indexOf("dots.dot") >= 0) &&
+	// 	right.type !== "stem" &&
+	// 	right.type !== "bar" &&
+	// 	right.type !== "none" && // used when an invisible anchor is needed.
+	// 	!(this.type.indexOf("clef") >= -1 && right.c === "8") &&
+	// 	this.type.indexOf("key-signature") === -1 &&
+	// 	this.type.indexOf("time-signature") === -1 &&
+	// 	!(this.abcelem && this.abcelem.rest && this.abcelem.rest.type === "spacer") &&
+	// 	!(this.abcelem && this.abcelem.rest && this.abcelem.rest.type === "invisible") &&
+	// 	!(right.type === "text" && right.position === "relative") &&
+	// 	!(right.type === "text" && right.position === "right") &&
+	// 	!(right.type === "text" && right.position === "above") &&
+	// 	!(right.type === "text" && right.position === "below")
+	// )
+	// 	console.log("right", right);
+	// These are the elements that are the fixed part.
+	this.fixed.w = Math.max(this.fixed.w, right.dx+right.w);
+	if (right.top !== undefined) {
+		if (this.fixed.t === undefined) this.fixed.t = right.top; else this.fixed.t = Math.max(this.fixed.t, right.top);
+	}
+	if (right.bottom !== undefined) {
+		if (this.fixed.b === undefined) this.fixed.b = right.bottom; else this.fixed.b = Math.min(this.fixed.b, right.bottom);
+	}
+	// if (isNaN(this.fixed.t) || isNaN(this.fixed.b))
+	// 	debugger;
 	if (right.dx+right.w>this.w) this.w = right.dx+right.w;
 	this.right[this.right.length] = right;
-	this.addChild(right);
+	this._addChild(right);
+};
+
+AbsoluteElement.prototype.addFixed = function (elem) {
+	// used for elements that can't move relative to other elements after they have been placed.
+	// used for ledger lines, bar numbers, debug msgs, clef, key sigs, time sigs
+	this._addChild(elem);
+};
+
+AbsoluteElement.prototype.addFixedX = function (elem) {
+	// used for elements that can't move horizontally relative to other elements after they have been placed.
+	// used for parts, tempo, decorations
+	this._addChild(elem);
 };
 
 AbsoluteElement.prototype.addCentered = function (elem) {
+	// // used for chord labels, lyrics
+	// if (!(elem.type === "chord" && elem.position === "above") &&
+	// 	!(elem.type === "chord" && elem.position === "below") &&
+	// 	elem.type !== 'lyric'
+	// )
+	// 	console.log("centered", elem);
 	var half = elem.w/2;
 	if (-half<this.extraw) this.extraw = -half;
 	this.extra[this.extra.length] = elem;
 	if (elem.dx+half>this.w) this.w = elem.dx+half;
 	this.right[this.right.length] = elem;
-	this.addChild(elem);
+	this._addChild(elem);
 };
 
 AbsoluteElement.prototype.setLimit = function(member, child) {
@@ -125,8 +177,8 @@ AbsoluteElement.prototype.setLimit = function(member, child) {
 		this.specialY[member] = Math.max(this.specialY[member], child[member]);
 };
 
-AbsoluteElement.prototype.addChild = function (child) {
-	//console.log("Relative:",child);
+AbsoluteElement.prototype._addChild = function (child) {
+//	console.log("Relative:",child);
 	child.parent = this;
 	this.children[this.children.length] = child;
 	this.pushTop(child.top);
@@ -168,84 +220,24 @@ AbsoluteElement.prototype.setX = function (x) {
 		this.children[i].setX(x);
 };
 
-AbsoluteElement.prototype.setHint = function () {
-	this.hint = true;
+AbsoluteElement.prototype.center = function (before, after) {
+	// Used to center whole rests
+	var midpoint = (after.x - before.x) / 2 + before.x;
+	this.x = midpoint - this.w / 2;
+	for (var k = 0; k < this.children.length; k++)
+		this.children[k].setX(this.x);
 };
 
-AbsoluteElement.prototype.draw = function (renderer, bartop) {
-	if (this.invisible) return;
-	this.elemset = [];
-	renderer.beginGroup();
-	for (var i=0; i<this.children.length; i++) {
-		if (/*ABCJS.write.debugPlacement*/false) {
-			if (this.children[i].klass === 'ornament')
-				renderer.printShadedBox(this.x, renderer.calcY(this.children[i].top), this.w, renderer.calcY(this.children[i].bottom)-renderer.calcY(this.children[i].top), "rgb(0,0,200)", 0.3);
-		}
-		var el = this.children[i].draw(renderer,bartop);
-		if (el)
-			this.elemset.push(el);
-	}
-	var klass = this.type;
-	if (this.type === 'note' || this.type === 'rest') {
-		klass += ' d' + Math.round(this.durationClass*1000)/1000;
-		klass = klass.replace(/\./g, '-');
-		if (this.abcelem.pitches) {
-			for (var j = 0; j < this.abcelem.pitches.length; j++) {
-				klass += ' p' + this.abcelem.pitches[j].pitch;
-			}
-		}
-	}
-	var g = renderer.endGroup(klass);
-	if (g)
-		this.elemset.push(g);
-	if (klass === "tempo" && this.children.length > 0) {
-		renderer.controller.currentAbsEl.elemset[0] = this.elemset[0];
-		// Combine any tempo elements that are in a row. TODO-PER: this is a hack because the tempo note is an AbsoluteElement so there are nested AbsoluteElements here.
-		this.children[0].adjustElements(renderer);
-	}
-	if (this.klass)
-		this.setClass("mark", "", "#00ff00");
-	if (this.hint)
-		this.setClass("abcjs-hint", "", null);
-	this.abcelem.abselem = this;
-
-	var step = spacing.STEP;
-};
-
-AbsoluteElement.prototype.isIE=/*@cc_on!@*/false;//IE detector
-
-AbsoluteElement.prototype.setClass = function (addClass, removeClass, color) {
-	if (!this.elemset)
-		return;
-	for (var i = 0; i < this.elemset.length; i++) {
-		var el = this.elemset[i];
-		el.setAttribute("fill", 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);
-	}
+AbsoluteElement.prototype.setHint = function () {
+	this.hint = true;
 };
 
 AbsoluteElement.prototype.highlight = function (klass, color) {
-	if (klass === undefined)
-		klass = "abcjs-note_selected";
-	if (color === undefined)
-		color = "#ff0000";
-	this.setClass(klass, "", color);
+	highlight.bind(this)(klass, color);
 };
 
 AbsoluteElement.prototype.unhighlight = function (klass, color) {
-	if (klass === undefined)
-		klass = "abcjs-note_selected";
-	if (color === undefined)
-		color = "#000000";
-	this.setClass("", klass, color);
+	unhighlight.bind(this)(klass, color);
 };
 
 module.exports = AbsoluteElement;