Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added ability to align annotations to underneath the stave

  • Loading branch information...
commit fe0492d4e3d5dd7974cd6319eaa8f2f19a99136a 1 parent d3621e2
Clinton Forbes authored
Showing with 47 additions and 3 deletions.
  1. +10 −2 src/annotation.js
  2. +8 −1 src/stave.js
  3. +29 −0 tests/annotation_tests.js
12 src/annotation.js
View
@@ -37,6 +37,10 @@ Vex.Flow.Annotation.prototype.setFont = function(family, size, weight) {
this.font = { family: family, size: size, weight: weight };
return this;
}
+Vex.Flow.Annotation.prototype.setBottom = function(bottom) {
+ this.bottom = bottom;
+ return this;
+}
Vex.Flow.Annotation.prototype.draw = function() {
if (!this.context) throw new Vex.RERR("NoContext",
@@ -46,8 +50,12 @@ Vex.Flow.Annotation.prototype.draw = function() {
var start = this.note.getModifierStartXY(Vex.Flow.Modifier.Position.LEFT,
this.index);
- var x = start.x - (this.getWidth() / 2) + 2;
- var y = this.note.getYForTopText(this.text_line) - 1;
+ var x = start.x - (this.getWidth() / 2) + 10;
+ if(this.bottom) {
+ var y = this.note.stave.getYForBottomText(this.text_line);
+ } else {
+ var y = this.note.getYForTopText(this.text_line) - 1;
+ }
this.context.save();
this.context.setFont(this.font.family, this.font.size, this.font.weight);
9 src/stave.js
View
@@ -23,7 +23,8 @@ Vex.Flow.Stave.prototype.init = function(x, y, width, options) {
spacing_between_lines_px: 10, // in pixels
space_above_staff_ln: 4, // in staff lines
space_below_staff_ln: 4, // in staff lines
- top_text_position: 1 // in staff lines
+ top_text_position: 1, // in staff lines
+ bottom_text_position: 7 // in staff lines
};
Vex.Merge(this.options, options);
@@ -83,6 +84,11 @@ Vex.Flow.Stave.prototype.getYForTopText = function(line) {
return this.getYForLine(-l - this.options.top_text_position);
}
+Vex.Flow.Stave.prototype.getYForBottomText = function(line) {
+ var l = line || 0;
+ return this.getYForLine(this.options.bottom_text_position + l);
+}
+
Vex.Flow.Stave.prototype.getYForNote = function(line) {
var options = this.options;
var spacing = options.spacing_between_lines_px;
@@ -96,6 +102,7 @@ Vex.Flow.Stave.prototype.getYForGlyphs = function() {
return this.getYForLine(3);
}
+
Vex.Flow.Stave.prototype.addGlyph = function(glyph) {
glyph.setStave(this);
this.glyphs.push(glyph);
29 tests/annotation_tests.js
View
@@ -17,6 +17,8 @@ Vex.Flow.Test.Annotation.Start = function() {
Vex.Flow.Test.runTest("Fingerpicking", Vex.Flow.Test.Annotation.picking);
Vex.Flow.Test.runRaphaelTest("Fingerpicking (Raphael)",
Vex.Flow.Test.Annotation.picking);
+ Vex.Flow.Test.runTest("Bottom Annotation",
+ Vex.Flow.Test.Annotation.bottom);
}
Vex.Flow.Test.Annotation.simple = function(options, contextBuilder) {
@@ -131,3 +133,30 @@ Vex.Flow.Test.Annotation.picking = function(options, contextBuilder) {
Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes, 200);
ok(true, "Fingerpicking");
}
+
+Vex.Flow.Test.Annotation.bottom = function(options, contextBuilder) {
+ var ctx = contextBuilder(options.canvas_sel, 500, 240);
+ ctx.scale(1.5, 1.5); ctx.fillStyle = "#221"; ctx.strokeStyle = "#221";
+ var stave = new Vex.Flow.Stave(10, 10, 300).
+ addClef("treble").setContext(ctx).draw();
+
+ function newNote(note_struct) { return new Vex.Flow.StaveNote(note_struct); }
+ function newAnnotation(text) {
+ return (new Vex.Flow.Annotation(text)).setFont("Times",
+ Vex.Flow.Test.Font.size).setBottom(true); }
+
+ var notes = [
+ newNote({ keys: ["f/4"], duration: "w"}).
+ addAnnotation(0, newAnnotation("F")),
+ newNote({ keys: ["a/4"], duration: "w"}).
+ addAnnotation(0, newAnnotation("A")),
+ newNote({ keys: ["c/5"], duration: "w"}).
+ addAnnotation(0, newAnnotation("C")),
+ newNote({ keys: ["e/5"], duration: "w"}).
+ addAnnotation(0, newAnnotation("E"))
+ ];
+
+ Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes, 100);
+ ok(true, "Bottom Annotation");
+}
+

1 comment on commit fe0492d

0xFE

LGTM. Thanks for the changes. I'll merge this.

Please sign in to comment.
Something went wrong with that request. Please try again.