abcjs 6.1.0 → 6.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abcjs",
-  "version": "6.1.0",
+  "version": "6.1.3",
   "description": "Renderer for abc music notation",
   "main": "index.js",
   "types": "types/index.d.ts",

package/src/api/abc_tunebook_svg.js

@@ -59,96 +59,6 @@ function renderOne(div, tune, params, tuneNumber, lineOffset) {
     }
 }
 
-function renderEachLineSeparately(div, tune, params, tuneNumber) {
-    function initializeTuneLine(tune) {
-        var obj = new Tune();
-        obj.formatting = tune.formatting;
-        obj.media = tune.media;
-        obj.version = tune.version;
-        return obj;
-    }
-
-    // Before rendering, chop up the returned tune into an array where each element is a line.
-    // The first element of the array gets the title and other items that go on top, the last element
-    // of the array gets the extra text that goes on bottom. Each element gets any non-music info that comes before it.
-    var tunes = [];
-    var tuneLine;
-    for (var i = 0; i < tune.lines.length; i++) {
-        var line = tune.lines[i];
-        if (!tuneLine)
-            tuneLine = initializeTuneLine(tune);
-
-        if (i === 0) {
-            // These items go on top of the music
-            tuneLine.copyTopInfo(tune);
-        }
-
-        // push the lines until we get to a music line
-        tuneLine.lines.push(line);
-        if (line.staff) {
-            tunes.push(tuneLine);
-            tuneLine = undefined;
-        }
-    }
-    // Add any extra stuff to the last line.
-    if (tuneLine) {
-        var lastLine = tunes[tunes.length-1];
-        for (var j = 0; j < tuneLine.lines.length; j++)
-            lastLine.lines.push(tuneLine.lines[j]);
-    }
-
-    // These items go below the music
-    tuneLine = tunes[tunes.length-1];
-    tuneLine.copyBottomInfo(tune);
-
-    // Now create sub-divs and render each line. Need to copy the params to change the padding for the interior slices.
-    var ep = {};
-    for (var key in params) {
-        if (params.hasOwnProperty(key)) {
-            ep[key] = params[key];
-        }
-    }
-    var origPaddingTop = ep.paddingtop;
-    var origPaddingBottom = ep.paddingbottom;
-    var currentScrollY = div.parentNode.scrollTop; // If there is scrolling it will be lost during the redraw so remember it.
-    var currentScrollX = div.parentNode.scrollLeft;
-    div.innerHTML = "";
-    var lineCount = 0;
-    for (var k = 0; k < tunes.length; k++) {
-        var lineEl = document.createElement("div");
-        div.appendChild(lineEl);
-
-        if (k === 0) {
-	        ep.paddingtop = origPaddingTop;
-	        ep.paddingbottom = 0;
-        } else if (k === tunes.length-1) {
-	        ep.paddingtop = 10;
-	        ep.paddingbottom = origPaddingBottom;
-        } else {
-	        ep.paddingtop = 10;
-	        ep.paddingbottom = 0;
-        }
-        if (k < tunes.length-1) {
-            // If it is not the last line, force stretchlast. If it is, stretchlast might have been set by the input parameters.
-            tunes[k].formatting = parseCommon.clone(tunes[k].formatting);
-            tunes[k].formatting.stretchlast = true;
-        }
-        renderOne(lineEl, tunes[k], ep, tuneNumber, lineCount);
-        lineCount += tunes[k].lines.length;
-        if (k === 0)
-            tune.engraver = tunes[k].engraver;
-        else {
-            if (!tune.engraver.staffgroups)
-                tune.engraver.staffgroups = tunes[k].engraver.staffgroups;
-            else if (tunes[k].engraver.staffgroups.length > 0)
-                tune.engraver.staffgroups.push(tunes[k].engraver.staffgroups[0]);
-        }
-    }
-    if (currentScrollX || currentScrollY) {
-        div.parentNode.scrollTo(currentScrollX, currentScrollY);
-    }
-}
-
 // A quick way to render a tune from javascript when interactivity is not required.
 // This is used when a javascript routine has some abc text that it wants to render
 // in a div or collection of divs. One tune or many can be rendered.
@@ -214,10 +124,7 @@ var renderAbc = function(output, abc, parserParams, engraverParams, renderParams
 	        tune = doLineWrapping(div, tune, tuneNumber, abcString, params);
 	        return tune;
         }
-        else if (removeDiv || !params.oneSvgPerLine || tune.lines.length < 2)
-            renderOne(div, tune, params, tuneNumber, 0);
-        else
-            renderEachLineSeparately(div, tune, params, tuneNumber);
+        renderOne(div, tune, params, tuneNumber, 0);
         if (removeDiv)
             div.parentNode.removeChild(div);
         return null;
@@ -239,10 +146,7 @@ function doLineWrapping(div, tune, tuneNumber, abcString, params) {
         if (warnings)
             tune.warnings = warnings;
     }
-    if (!params.oneSvgPerLine || tune.lines.length < 2)
-        renderOne(div, tune, ret.revisedParams, tuneNumber, 0);
-    else
-        renderEachLineSeparately(div, tune, ret.revisedParams, tuneNumber);
+    renderOne(div, tune, ret.revisedParams, tuneNumber, 0);
 	tune.explanation = ret.explanation;
 	return tune;
 }

package/src/tablatures/tab-renderer.js

@@ -198,7 +198,7 @@ TabRenderer.prototype.doLayout = function () {
   var padd = 3;
   var prevIndex = this.staffIndex;
   var previousStaff = staffGroup.staffs[prevIndex];
-  var tabTop = previousStaff.top + padd + lyricsHeight;
+  var tabTop = this.tabSize + padd - previousStaff.bottom - lyricsHeight;
   if (previousStaff.isTabStaff) {
     tabTop = previousStaff.top;
   }

package/src/write/abc_engraver_controller.js

@@ -32,6 +32,7 @@ var tablatures = require('../api/abc_tablatures');
  */
 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;
@@ -246,9 +247,79 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
 	this.staffgroups = ret.staffgroups;
 	this.selectables = ret.selectables;
 
-	setupSelection(this);
+	if (this.oneSvgPerLine) {
+		var div = this.renderer.paper.svg.parentNode
+		this.svgs = splitSvgIntoLines(div, abcTune.metaText.title, this.responsive)
+	} else {
+		this.svgs = [this.renderer.paper.svg];
+	}
+	setupSelection(this, this.svgs);
 };
 
+function splitSvgIntoLines(output, title, responsive) {
+	// Each line is a top level <g> in the svg. To split it into separate
+	// svgs iterate through each of those and put them in a new svg. Since
+	// they are placed absolutely, the viewBox needs to be manipulated to
+	// get the correct vertical positioning.
+	// We copy all the attributes from the original svg except for the aria-label
+	// since we want that to include a count. And the height is now a fraction of the original svg.
+	if (!title) title = "Untitled"
+	var source = output.querySelector("svg")
+	if (responsive === 'resize')
+		output.style.paddingBottom = ''
+	var style = source.querySelector("style")
+	var width = responsive === 'resize' ? source.viewBox.baseVal.width : source.getAttribute("width")
+	var sections = output.querySelectorAll("svg > g") // each section is a line, or the top matter or the bottom matter, or text that has been inserted.
+	var nextTop = 0 // There are often gaps between the elements for spacing, so the actual top and height needs to be inferred.
+	var wrappers = [] // Create all the elements and place them at once because we use the current svg to get data. It would disappear after placing the first line.
+	var svgs = []
+	for (var i = 0; i < sections.length; i++) {
+		var section = sections[i]
+		var box = section.getBBox()
+		var gapBetweenLines = box.y - nextTop // take the margin into account
+		var height = box.height + gapBetweenLines;
+		var wrapper = document.createElement("div");
+		var divStyles = "overflow: hidden;"
+		if (responsive !== 'resize')
+			divStyles += "height:"+height+"px;"
+		wrapper.setAttribute("style", divStyles)
+		var svg = duplicateSvg(source)
+		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.appendChild(style.cloneNode(true))
+		var titleEl = document.createElement("title")
+		titleEl.innerText = fullTitle
+		svg.appendChild(titleEl)
+		svg.appendChild(section)
+
+		wrapper.appendChild(svg)
+		svgs.push(svg)
+		output.appendChild(wrapper)
+		//wrappers.push(wrapper)
+		nextTop = box.y+box.height
+	}
+	// for (i = 0; i < wrappers.length; i++)
+	// 	output.appendChild(wrappers[i])
+	output.removeChild(source)
+	return svgs;
+}
+
+function duplicateSvg(source) {
+	var svgNS = "http://www.w3.org/2000/svg";
+	var svg = document.createElementNS(svgNS, "svg");
+	for (var i = 0; i < source.attributes.length; i++) {
+		var attr = source.attributes[i];
+		if (attr.name !== "height" && attr.name != "aria-label")
+			svg.setAttribute(attr.name, attr.value)
+	}
+	return svg;
+}
+
 EngraverController.prototype.getDim = function(historyEl) {
 	// Get the dimensions on demand because the getBBox call is expensive.
 	if (!historyEl.dim) {

package/src/write/draw/draw.js

@@ -6,14 +6,17 @@ var Selectables = require('./selectables');
 
 function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
 	var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
+	renderer.paper.openGroup()
 	renderer.moveY(renderer.padding.top);
 	nonMusic(renderer, abcTune.topText, selectables);
+	renderer.paper.closeGroup()
 	renderer.moveY(renderer.spacing.music);
 	var staffgroups = [];
 	for (var line = 0; line < abcTune.lines.length; line++) {
 		classes.incrLine();
 		var abcLine = abcTune.lines[line];
 		if (abcLine.staff) {
+			renderer.paper.openGroup()
 			if (abcLine.vskip) {
 				renderer.moveY(abcLine.vskip);
 			}
@@ -22,15 +25,20 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 			var staffgroup = engraveStaffLine(renderer, abcLine.staffGroup, selectables,line);
 			staffgroup.line = lineOffset+line; // If there are non-music lines then the staffgroup array won't line up with the line array, so this keeps track.
 			staffgroups.push(staffgroup);
+			renderer.paper.closeGroup()
 		} else if (abcLine.nonMusic) {
+			renderer.paper.openGroup()
 			nonMusic(renderer, abcLine.nonMusic, selectables);
+			renderer.paper.closeGroup()
 		}
 	}
 
 	classes.reset();
 	if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
+		renderer.paper.openGroup()
 		renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
 		nonMusic(renderer, abcTune.bottomText, selectables);
+		renderer.paper.closeGroup()
 	}
 	setPaperSize(renderer, maxWidth, scale, responsive);
 	return { staffgroups: staffgroups, selectables: selectables.getElements() };

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

@@ -15,7 +15,7 @@ function drawStaffGroup(renderer, params, selectables,lineNumber) {
 	var colorIndex;
 
 	// An invisible marker is useful to be able to find where each system starts.
-	addInvisibleMarker(renderer, "abcjs-top-of-system");
+	//addInvisibleMarker(renderer, "abcjs-top-of-system");
 
 	var startY = renderer.y; // So that it can be restored after we're done.
 	// Set the absolute Y position for each staff here, so the voice drawing below can just use if.
@@ -177,10 +177,10 @@ function printBrace(renderer, absoluteY, brace, index, selectables) {
 	}
 }
 
-function addInvisibleMarker(renderer, className) {
-	var y = Math.round(renderer.y);
-	renderer.paper.pathToBack({path:"M 0 " + y + " L 0 0", stroke:"none", fill:"none", "stroke-opacity": 0, "fill-opacity": 0, 'class': renderer.controller.classes.generate(className), 'data-vertical': y });
-}
+// function addInvisibleMarker(renderer, className) {
+// 	var y = Math.round(renderer.y);
+// 	renderer.paper.pathToBack({path:"M 0 " + y + " L 0 0", stroke:"none", fill:"none", "stroke-opacity": 0, "fill-opacity": 0, 'class': renderer.controller.classes.generate(className), 'data-vertical': y });
+// }
 
 function boxAllElements(renderer, voices, which) {
 	for (var i = 0; i < which.length; i++) {

package/src/write/selection.js

@@ -1,6 +1,6 @@
 var spacing = require('./abc_spacing');
 
-function setupSelection(engraver) {
+function setupSelection(engraver, svgs) {
 	engraver.rangeHighlight = rangeHighlight;
 	if (engraver.dragging) {
 		for (var h = 0; h < engraver.selectables.length; h++) {
@@ -14,14 +14,21 @@ function setupSelection(engraver) {
 			}
 		}
 	}
-	engraver.renderer.paper.svg.addEventListener('mousedown', mouseDown.bind(engraver));
-	engraver.renderer.paper.svg.addEventListener('mousemove', mouseMove.bind(engraver));
-	engraver.renderer.paper.svg.addEventListener('mouseup', mouseUp.bind(engraver));
+	for (var i = 0; i < svgs.length; i++) {
+		svgs[i].addEventListener('touchstart', mouseDown.bind(engraver));
+		svgs[i].addEventListener('touchmove', mouseMove.bind(engraver));
+		svgs[i].addEventListener('touchend', mouseUp.bind(engraver));
+		svgs[i].addEventListener('mousedown', mouseDown.bind(engraver));
+		svgs[i].addEventListener('mousemove', mouseMove.bind(engraver));
+		svgs[i].addEventListener('mouseup', mouseUp.bind(engraver));
+	}
 }
 
-function getCoord(ev, svg) {
+function getCoord(ev) {
 	var scaleX = 1;
 	var scaleY = 1;
+	var svg = ev.target.closest('svg')
+	var yOffset = 0
 
 	// when renderer.options.responsive === 'resize' the click coords are in relation to the HTML
 	// element, we need to convert to the SVG viewBox coords
@@ -31,6 +38,7 @@ function getCoord(ev, svg) {
 			scaleX = svg.viewBox.baseVal.width / svg.clientWidth
 		if (svg.viewBox.baseVal.height !== 0)
 			scaleY = svg.viewBox.baseVal.height / svg.clientHeight
+		yOffset = svg.viewBox.baseVal.y
 	}
 
 	var svgClicked = ev.target.tagName === "svg";
@@ -48,7 +56,7 @@ function getCoord(ev, svg) {
 	y = y * scaleY;
 	//console.log(x, y)
 
-	return [x, y];
+	return [x, y+yOffset];
 }
 
 function elementFocused(ev) {
@@ -120,7 +128,7 @@ function keyboardSelection(ev) {
 
 function findElementInHistory(selectables, el) {
 	for (var i = 0; i < selectables.length; i++) {
-		if (el === selectables[i].svgEl)
+		if (el.dataset.index === selectables[i].svgEl.dataset.index)
 			return i;
 	}
 	return -1;
@@ -216,7 +224,7 @@ function getMousePosition(self, ev) {
 		//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);
+		box = getCoord(ev);
 		x = box[0];
 		y = box[1];
 		clickedOn = findElementByCoord(self, x, y);
@@ -225,13 +233,30 @@ function getMousePosition(self, ev) {
 	return { x: x, y: y, clickedOn: clickedOn };
 }
 
+function attachMissingTouchEventAttributes(touchEv) {
+	var rect = touchEv.target.getBoundingClientRect();
+	var offsetX = touchEv.touches[0].pageX - rect.left;
+	var offsetY = touchEv.touches[0].pageY - rect.top;
+
+	touchEv.touches[0].offsetX = offsetX;
+	touchEv.touches[0].offsetY = offsetY;
+
+	touchEv.touches[0].layerX = touchEv.touches[0].pageX;
+	touchEv.touches[0].layerY = touchEv.touches[0].pageY;
+}
+
 function mouseDown(ev) {
 	// "this" is the EngraverController because of the bind(this) when setting the event listener.
+	var _ev = ev;
+	if (ev.type === 'touchstart') {
+		attachMissingTouchEventAttributes(ev);
+		_ev = ev.touches[0];
+	}
 
-	var positioning = getMousePosition(this, ev);
+	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) {
+	if (positioning.clickedOn >= 0 && (ev.type === 'touchstart' || ev.button === 0)) {
 		this.dragTarget = this.selectables[positioning.clickedOn];
 		this.dragIndex = positioning.clickedOn;
 		this.dragMechanism = "mouse";
@@ -244,12 +269,18 @@ function mouseDown(ev) {
 }
 
 function mouseMove(ev) {
+	var _ev = ev;
+	if (ev.type === 'touchmove') {
+		attachMissingTouchEventAttributes(ev);
+		_ev = ev.touches[0];
+	}
+	this.lastTouchMove = ev;
 	// "this" is the EngraverController because of the bind(this) when setting the event listener.
 
 	if (!this.dragTarget || !this.dragging || !this.dragTarget.isDraggable || this.dragMechanism !== 'mouse')
 		return;
 
-	var positioning = getMousePosition(this, ev);
+	var positioning = getMousePosition(this, _ev);
 
 	var yDist = Math.round((positioning.y - this.dragMouseStart.y)/spacing.STEP);
 	if (yDist !== this.dragYStep) {
@@ -260,6 +291,11 @@ function mouseMove(ev) {
 
 function mouseUp(ev) {
 	// "this" is the EngraverController because of the bind(this) when setting the event listener.
+	var _ev = ev;
+	if (ev.type === 'touchend') {
+		attachMissingTouchEventAttributes(this.lastTouchMove);
+		_ev = this.lastTouchMove.touches[0];
+	}
 
 	if (!this.dragTarget)
 		return;
@@ -270,7 +306,7 @@ function mouseUp(ev) {
 		this.dragTarget.absEl.highlight(undefined, this.selectionColor);
 	}
 
-	notifySelect.bind(this)(this.dragTarget, this.dragYStep, this.selectables.length, this.dragIndex, ev);
+	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;

package/src/write/svg.js

@@ -307,7 +307,7 @@ Svg.prototype.closeGroup = function() {
 	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);
+		g.parentElement.removeChild(g);
 		return null;
 	}
 	return g;

package/types/index.d.ts

@@ -171,6 +171,8 @@ declare module 'abcjs' {
 
 	export type AbsoluteElement = any; // TODO
 
+	export type AbstractEngraver = any;
+
 	export type NoteProperties = any; // TODO
 
 	export type AudioTrackCommand = 'program' | 'text' | 'note';
@@ -504,6 +506,34 @@ declare module 'abcjs' {
 		wordsfont: Font;
 	}
 
+	export interface EngraverController {
+		classes: any;
+		dragColor: string;
+		dragIndex: number;
+		dragMouseStart: { x: number, y: number; };
+		dragTarget: null | any;
+		dragYStep: number;
+		dragging: boolean;
+		engraver: AbstractEngraver;
+		getFontAndAttr: any;
+		getTextSize: any;
+		listeners: [ClickListener];
+		rangeHighlight: any;
+		renderer: any;
+		responsive?: boolean;
+		scale: number;
+		initialClef?: any;
+		selectTypes: boolean | Array<DragTypes>;
+		selectables: Array<Selectable>;
+		selected: Array<any>;
+		selectionColor: string;
+		space: number;
+		staffgroups: [any];
+		staffwidthPrint: number;
+		staffwidthScreen: number;
+		width: number;
+	}
+
 	export interface MetaText {
 		"abc-copyright"?: string;
 		"abc-creator"?: string;
@@ -712,6 +742,7 @@ declare module 'abcjs' {
 
 	export interface TuneObject {
 		formatting: Formatting;
+		engraver?: EngraverController;
 		lines: Array<TuneLine>;
 		media: Media;
 		metaText: MetaText;
@@ -732,12 +763,23 @@ declare module 'abcjs' {
 		millisecondsPerMeasure: NumberFunction;
 		setTiming: (bpm?: number, measuresOfDelay? : number) => void;
 		setUpAudio: (options: SynthOptions) => AudioTracks;
+		makeVoicesArray: () => Array<Selectable[]>
 		lineBreaks?: Array<number>;
 		visualTranspose?: number;
 	}
 
 	export type TuneObjectArray = [TuneObject]
 
+	export interface Selectable {
+		absEl: AbsoluteElement;
+		isDraggable: boolean;
+		staffPos: {
+			height: number;
+			top: number;
+			zero: number;
+		}
+	}
+
 	export interface AbcElem {
 		el_type: string //TODO enumerate these
 		abselem: any;
@@ -1091,6 +1133,8 @@ declare module 'abcjs' {
 
 	export function numberOfTunes(abc: string) : number;
 	export function extractMeasures(abc: string) : Array<MeasureList>;
+	
+	export function strTranspose(originalAbc: string, visualObj: TuneObject, steps: number): string;
 
 	//
 	// Glyph

package/version.js

@@ -1,3 +1,3 @@
-var version = '6.1.0';
+var version = '6.1.3';
 
 module.exports = version;