Refactor Flow.renderGlyph() to be a static fn in Glyph itself

Fihra · Jun 16, 2016 · bd905b1 · bd905b1
1 parent fdc06ad
commit bd905b1
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 53 deletions.
diff --git a/src/accidental.js b/src/accidental.js
@@ -14,7 +14,7 @@ import { Flow } from './tables';
 import { Fraction } from './fraction';
 import { Music } from './music';
 import { Modifier } from './modifier';
-import './glyph';
+import { Glyph } from './glyph';
 export var Accidental = (function(){
   function Accidental(type) {
     if (arguments.length > 0) this.init(type);
@@ -371,19 +371,19 @@ export var Accidental = (function(){
 
       if (!this.cautionary) {
         // Render the accidental alone.
-        Flow.renderGlyph(this.context, acc_x, acc_y,
+        Glyph.renderGlyph(this.context, acc_x, acc_y,
                              this.render_options.font_scale, this.accidental.code);
       } else {
         // Render the accidental in parentheses.
         acc_x += 3;
-        Flow.renderGlyph(this.context, acc_x, acc_y,
+        Glyph.renderGlyph(this.context, acc_x, acc_y,
                              this.render_options.font_scale, this.paren_left.code);
         acc_x += 2;
-        Flow.renderGlyph(this.context, acc_x, acc_y,
+        Glyph.renderGlyph(this.context, acc_x, acc_y,
                              this.render_options.font_scale, this.accidental.code);
         acc_x += this.accidental.width - 2;
         if (this.type == "##" || this.type == "bb") acc_x -= 2;
-        Flow.renderGlyph(this.context, acc_x, acc_y,
+        Glyph.renderGlyph(this.context, acc_x, acc_y,
                              this.render_options.font_scale, this.paren_right.code);
       }
     }

diff --git a/src/articulation.js b/src/articulation.js
@@ -13,7 +13,7 @@ import { Vex } from './vex';
 import { Flow } from './tables';
 import { Modifier } from './modifier';
 import { StaveNote } from './stavenote';
-import './glyph';
+import { Glyph } from './glyph';
 export var Articulation = (function() {
   function Articulation(type) {
     if (arguments.length > 0) this.init(type);
@@ -176,7 +176,7 @@ export var Articulation = (function() {
       glyph_y += shiftY + this.y_shift;
 
       L("Rendering articulation: ", this.articulation, glyph_x, glyph_y);
-      Flow.renderGlyph(this.context, glyph_x, glyph_y,
+      Glyph.renderGlyph(this.context, glyph_x, glyph_y,
                            this.render_options.font_scale, this.articulation.code);
     }
   });

diff --git a/src/glyph.js b/src/glyph.js
@@ -8,22 +8,6 @@
 import { Vex } from './vex';
 import { Flow } from './tables';
 import { Font } from './fonts/vexflow_font';
-/**
- * A quick and dirty static glyph renderer. Renders glyphs from the default
- * font defined in Vex.Flow.Font.
- *
- * @param {!Object} ctx The canvas context.
- * @param {number} x_pos X coordinate.
- * @param {number} y_pos Y coordinate.
- * @param {number} point The point size to use.
- * @param {string} val The glyph code in Vex.Flow.Font.
- * @param {boolean} nocache If set, disables caching of font outline.
- */
-Flow.renderGlyph = function(ctx, x_pos, y_pos, point, val, nocache) {
-  var scale = point * 72.0 / (Font.resolution * 100.0);
-  var metrics = Glyph.loadMetrics(Font, val, !nocache);
-  Glyph.renderOutline(ctx, metrics.outline, scale, x_pos, y_pos);
-};
 
 /**
  * @constructor
@@ -185,5 +169,22 @@ export var Glyph = (function() {
     ctx.fill();
   };
 
+  /**
+   * A quick and dirty static glyph renderer. Renders glyphs from the default
+   * font defined in Vex.Flow.Font.
+   *
+   * @param {!Object} ctx The canvas context.
+   * @param {number} x_pos X coordinate.
+   * @param {number} y_pos Y coordinate.
+   * @param {number} point The point size to use.
+   * @param {string} val The glyph code in Vex.Flow.Font.
+   * @param {boolean} nocache If set, disables caching of font outline.
+   */
+  Glyph.renderGlyph = function(ctx, x_pos, y_pos, point, val, nocache) {
+    var scale = point * 72.0 / (Font.resolution * 100.0);
+    var metrics = Glyph.loadMetrics(Font, val, !nocache);
+    Glyph.renderOutline(ctx, metrics.outline, scale, x_pos, y_pos);
+  };
+
   return Glyph;
 }());
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import { Fraction } from './fraction';
 import { Renderer } from './renderer';
 import { Formatter } from './formatter';
 import { Music } from './music';
+import { Glyph } from './glyph';
 import { Stave } from './stave';
 import { StaveNote } from './stavenote';
 import { Voice } from './voice';
@@ -59,6 +60,7 @@ Vex.Flow.Fraction = Fraction;
 Vex.Flow.Renderer = Renderer;
 Vex.Flow.Formatter = Formatter;
 Vex.Flow.Music = Music;
+Vex.Flow.Glyph = Glyph;
 Vex.Flow.Stave = Stave;
 Vex.Flow.StaveNote = StaveNote;
 Vex.Flow.Voice = Voice;

diff --git a/src/notehead.js b/src/notehead.js
@@ -10,7 +10,7 @@ import { Vex } from './vex';
 import { Flow } from './tables';
 import { Note } from './note';
 import { StaveNote } from './stavenote';
-import './glyph';
+import { Glyph } from './glyph';
 export var NoteHead = (function() {
   var NoteHead = function(head_options) {
     if (arguments.length > 0) this.init(head_options);
@@ -242,10 +242,10 @@ export var NoteHead = (function() {
         if (this.style) {
           ctx.save();
           this.applyStyle(ctx);
-          Flow.renderGlyph(ctx, head_x, y, glyph_font_scale, this.glyph_code);
+          Glyph.renderGlyph(ctx, head_x, y, glyph_font_scale, this.glyph_code);
           ctx.restore();
         } else {
-          Flow.renderGlyph(ctx, head_x, y, glyph_font_scale, this.glyph_code);
+          Glyph.renderGlyph(ctx, head_x, y, glyph_font_scale, this.glyph_code);
         }
       }
     }

diff --git a/src/ornament.js b/src/ornament.js
@@ -14,7 +14,7 @@ import { Flow } from './tables';
 import { Modifier } from './modifier';
 import { TickContext } from './tickcontext';
 import { StaveNote } from './stavenote';
-import './glyph';
+import { Glyph } from './glyph';
 export var Ornament = (function() {
   function Ornament(type) {
     if (arguments.length > 0) this.init(type);
@@ -275,7 +275,7 @@ export var Ornament = (function() {
 
         // Render the glyph
         var scale = ornament.render_options.font_scale/1.3;
-        Flow.renderGlyph(ctx, acc_x, acc_y, scale, accidental.code);
+        Glyph.renderGlyph(ctx, acc_x, acc_y, scale, accidental.code);
 
         // If rendered a bottom accidental, increase the y value by the
         // accidental height so that the ornament's glyph is shifted up
@@ -290,7 +290,7 @@ export var Ornament = (function() {
       }
 
       L("Rendering ornament: ", this.ornament, glyph_x, glyph_y);
-      Flow.renderGlyph(ctx, glyph_x, glyph_y,
+      Glyph.renderGlyph(ctx, glyph_x, glyph_y,
                            this.render_options.font_scale, this.ornament.code);
 
       // Draw upper accidental for ornament

diff --git a/src/staveconnector.js b/src/staveconnector.js
@@ -7,7 +7,7 @@
 
 import { Vex } from './vex';
 import { Flow } from './tables';
-import './glyph';
+import { Glyph } from './glyph';
 /** @constructor */
 export var StaveConnector = (function() {
   function StaveConnector(top_stave, bottom_stave) {
@@ -152,8 +152,8 @@ export var StaveConnector = (function() {
           topY -= 4;
           botY += 4;
           attachment_height = botY - topY;
-          Flow.renderGlyph(this.ctx, topX - 5, topY - 3, 40, "v1b", true);
-          Flow.renderGlyph(this.ctx, topX - 5, botY + 3, 40, "v10", true);
+          Glyph.renderGlyph(this.ctx, topX - 5, topY - 3, 40, "v1b", true);
+          Glyph.renderGlyph(this.ctx, topX - 5, botY + 3, 40, "v10", true);
           topX -= (this.width + 2);
           break;
         case StaveConnector.type.BOLD_DOUBLE_LEFT:

diff --git a/src/stavenote.js b/src/stavenote.js
@@ -17,7 +17,7 @@ import { NoteHead } from './notehead';
 import { StemmableNote } from './stemmablenote';
 import { Modifier } from './modifier';
 import { Dot } from './dot';
-import './glyph';
+import { Glyph } from './glyph';
 export var StaveNote = (function() {
   var StaveNote = function(note_struct) {
     if (arguments.length > 0) this.init(note_struct);
@@ -914,7 +914,7 @@ export var StaveNote = (function() {
 
         // Draw the Flag
         this.context.openGroup("flag", null, {pointerBBox: true});
-        Flow.renderGlyph(ctx, flag_x, flag_y,
+        Glyph.renderGlyph(ctx, flag_x, flag_y,
             this.render_options.glyph_font_scale, flag_code);
         this.context.closeGroup();
       }

diff --git a/src/staverepetition.js b/src/staverepetition.js
@@ -7,7 +7,7 @@
 import { Vex } from './vex';
 import { Flow } from './tables';
 import { StaveModifier } from './stavemodifier';
-import './glyph';
+import { Glyph } from './glyph';
 export var Repetition = (function() {
   function Repetition(type, x, y_shift) {
     if (arguments.length > 0) this.init(type, x, y_shift);
@@ -94,7 +94,7 @@ export var Repetition = (function() {
           "Can't draw stave without canvas context.");
 
       var y = stave.getYForTopText(stave.options.num_lines) + this.y_shift;
-      Flow.renderGlyph(stave.context, this.x + x + this.x_shift,
+      Glyph.renderGlyph(stave.context, this.x + x + this.x_shift,
                            y + 25, 40, "v4d", true);
       return this;
     },
@@ -103,7 +103,7 @@ export var Repetition = (function() {
       if (!stave.context) throw new Vex.RERR("NoCanvasContext",
           "Can't draw stave without canvas context.");
       var y = stave.getYForTopText(stave.options.num_lines) + this.y_shift;
-      Flow.renderGlyph(stave.context, this.x + x + this.x_shift,
+      Glyph.renderGlyph(stave.context, this.x + x + this.x_shift,
                            y + 25, 30, "v8c", true);
       return this;
     },
@@ -129,7 +129,7 @@ export var Repetition = (function() {
       }
       var y = stave.getYForTopText(stave.options.num_lines) + this.y_shift;
       if (draw_coda) {
-        Flow.renderGlyph(ctx, symbol_x, y, 40, "v4d", true);
+        Glyph.renderGlyph(ctx, symbol_x, y, 40, "v4d", true);
       }
 
       ctx.fillText(text, text_x, y + 5);

diff --git a/src/stavetempo.js b/src/stavetempo.js
@@ -7,7 +7,7 @@ import { Vex } from './vex';
 import { Flow } from './tables';
 import { Modifier } from './modifier';
 import { StaveModifier } from './stavemodifier';
-import './glyph';
+import { Glyph } from './glyph';
 /**
  * @constructor
  * @param {Object} tempo Tempo parameters: { name, duration, dots, bpm }
@@ -76,7 +76,7 @@ export var StaveTempo = (function() {
         var code = Flow.durationToGlyph(duration);
 
         x += 3 * scale;
-        Flow.renderGlyph(ctx, x, y, options.glyph_font_scale, code.code_head);
+        Glyph.renderGlyph(ctx, x, y, options.glyph_font_scale, code.code_head);
         x += code.head_width * scale;
 
         // Draw stem and flags
@@ -91,7 +91,7 @@ export var StaveTempo = (function() {
           ctx.fillRect(x, y_top, scale, stem_height);
 
           if (code.flag) {
-            Flow.renderGlyph(ctx, x + scale, y_top, options.glyph_font_scale,
+            Glyph.renderGlyph(ctx, x + scale, y_top, options.glyph_font_scale,
                                  code.code_flag_upstem);
 
             if (!dots) x += 6 * scale;

diff --git a/src/strokes.js b/src/strokes.js
@@ -10,7 +10,7 @@ import { Vex } from './vex';
 import { Flow } from './tables';
 import { Modifier } from './modifier';
 import { StaveNote } from './stavenote';
-import './glyph';
+import { Glyph } from './glyph';
 export var Stroke = (function() {
   function Stroke(type, options) {
     if (arguments.length > 0) this.init(type, options);
@@ -192,13 +192,13 @@ export var Stroke = (function() {
       } else {
         if (this.note instanceof StaveNote) {
           for (i = topY; i <= botY; i += line_space) {
-            Flow.renderGlyph(this.context, x + this.x_shift - 4,
+            Glyph.renderGlyph(this.context, x + this.x_shift - 4,
                                  i,
                                  this.render_options.font_scale, "va3");
           }
         } else {
           for (i = topY; i <= botY; i+= 10) {
-            Flow.renderGlyph(this.context, x + this.x_shift - 4,
+            Glyph.renderGlyph(this.context, x + this.x_shift - 4,
                                  i,
                                  this.render_options.font_scale, "va3");
           }
@@ -208,7 +208,7 @@ export var Stroke = (function() {
       }
 
       // Draw the arrow head
-      Flow.renderGlyph(this.context, x + this.x_shift + arrow_shift_x, arrow_y,
+      Glyph.renderGlyph(this.context, x + this.x_shift + arrow_shift_x, arrow_y,
                            this.render_options.font_scale, arrow);
 
       // Draw the rasquedo "R"

diff --git a/src/tabnote.js b/src/tabnote.js
@@ -12,7 +12,7 @@ import { Modifier } from './modifier';
 import { Stem } from './stem';
 import { StemmableNote } from './stemmablenote';
 import { Dot } from './dot';
-import './glyph';
+import { Glyph } from './glyph';
 export var TabNote = (function() {
   function TabNote(tab_struct, draw_stem) {
     if (arguments.length > 0) this.init(tab_struct, draw_stem);
@@ -257,7 +257,7 @@ export var TabNote = (function() {
         }
 
         // Draw the Flag
-        Flow.renderGlyph(this.context, flag_x, flag_y,
+        Glyph.renderGlyph(this.context, flag_x, flag_y,
             this.render_options.glyph_font_scale, flag_code);
       }
     },
@@ -331,7 +331,7 @@ export var TabNote = (function() {
         ctx.clearRect(tab_x - 2, y - 3, glyph.width + 4, 6);
 
         if (glyph.code) {
-          Flow.renderGlyph(ctx, tab_x, y + 5 + glyph.shift_y,
+          Glyph.renderGlyph(ctx, tab_x, y + 5 + glyph.shift_y,
               this.render_options.glyph_font_scale, glyph.code);
         } else {
           var text = glyph.text.toString();

diff --git a/src/transform.html b/src/transform.html
@@ -54,8 +54,8 @@
         "v0": true, "v1": true, "v2": true, "v3": true,
         "v4": true, "v5": true, "v6": true, "v7": true,
         "v8": true, "v9": true, "va": true, "vb": true, "vf": true,
-        "vc": true, "v10": true, "v11": true, "v18": true, "v1b": true, 
-        "v1d": true, "v1e": true, "v1f": true, "v22": true, 
+        "vc": true, "v10": true, "v11": true, "v18": true, "v1b": true,
+        "v1d": true, "v1e": true, "v1f": true, "v22": true,
         "v23": true, "v25": true, "v26": true, "v27": true,
         "v28": true, "v2a": true, "v2d": true, "v2f": true,
         "v30": true, "v33": true, "v38": true, "v3b": true, "v3c": true, "v3e": true, "v3f": true,
@@ -162,7 +162,7 @@
         ctx.stroke()
 
         ctx.fillStyle = "green";
-        Vex.Flow.renderGlyph(ctx, x, y, 40, glyph, true);
+        Vex.Flow.Glyph.renderGlyph(ctx, x, y, 40, glyph, true);
         x += 60;
 
         if (x >= 800) {

diff --git a/src/tremolo.js b/src/tremolo.js
@@ -6,7 +6,7 @@
 import { Vex } from './vex';
 import { Flow } from './tables';
 import { Modifier } from './modifier';
-import './glyph';
+import { Glyph } from './glyph';
 /**
  * @constructor
  */
@@ -54,7 +54,7 @@ export var Tremolo = (function() {
 
       x += this.shift_right;
       for (var i = 0; i < this.num; ++i) {
-        Flow.renderGlyph(this.context, x, y,
+        Glyph.renderGlyph(this.context, x, y,
                              this.render_options.font_scale, this.code);
         y += this.y_spacing;
       }