abcjs 6.0.4 → 6.1.2

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/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.0.4';
+var version = '6.1.2';
 
 module.exports = version;