Add basic voice rendering

Gruntfile.js

@@ -12,7 +12,8 @@ module.exports = (grunt) => {
   const BASE_DIR = __dirname;
   const BUILD_DIR = path.join(BASE_DIR, 'build');
   const RELEASE_DIR = path.join(BASE_DIR, 'releases');
-  const MODULE_ENTRY = path.join(BASE_DIR, 'src/index.js');
+  const VEXFLOW_MODULE_ENTRY = path.join(BASE_DIR, 'src/index.js');
+  const WEB_COMPONENTS_MODULE_ENTRY = path.join(BASE_DIR, 'src/web-components/index.js');
   const TARGET_RAW = 'vexflow-debug.js';
   const TARGET_MIN = 'vexflow-min.js';
 
@@ -28,13 +29,16 @@ module.exports = (grunt) => {
     'tests/run.js',
   ];
 
-  function webpackConfig(target, preset, mode) {
+  function webpackConfig(preset, mode) {
     return {
       mode,
-      entry: MODULE_ENTRY,
+      entry: {
+        vexflow: VEXFLOW_MODULE_ENTRY,
+        webComponents: WEB_COMPONENTS_MODULE_ENTRY,
+      },
       output: {
         path: BUILD_DIR,
-        filename: target,
+        filename: (mode === 'production') ? '[name]-min.js' : '[name]-debug.js',
         library: 'Vex',
         libraryTarget: 'umd',
         libraryExport: 'default',
@@ -49,7 +53,8 @@ module.exports = (grunt) => {
               loader: 'babel-loader',
               options: {
                 presets: [preset],
-                plugins: ['@babel/plugin-transform-object-assign'],
+                plugins: ['@babel/plugin-transform-object-assign', 
+                          '@babel/plugin-proposal-class-properties'],
               },
             }],
           },
@@ -58,8 +63,8 @@ module.exports = (grunt) => {
     };
   }
 
-  const webpackProd = webpackConfig(TARGET_MIN, ['@babel/preset-env'], 'production');
-  const webpackDev = webpackConfig(TARGET_RAW, ['@babel/preset-env'], 'development');
+  const webpackProd = webpackConfig(['@babel/preset-env'], 'production');
+  const webpackDev = webpackConfig(['@babel/preset-env'], 'development');
 
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),

package.json

@@ -20,10 +20,12 @@
     "@babel/core": "^7.8.4",
     "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
+    "@webcomponents/webcomponentsjs": "^2.4.3",
     "babel-loader": "^8.0.6",
     "browserify": "^16.5.0",
     "canvas": "^2.6.1",
     "docco": "^0.8.0",
+    "es-dev-server": "^1.54.1",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-import": "^2.20.1",
@@ -43,7 +45,7 @@
     "grunt-webpack": "^3.1.3",
     "jquery": "^3.4.1",
     "jscs": "^3.0.7",
-    "jsdom": "^16.1.0",
+    "jsdom": "^16.3.0",
     "npm": "^6.13.7",
     "opentype.js": "^1.1.0",
     "qunit": "^2.9.3",
@@ -52,6 +54,7 @@
     "webpack-dev-server": "^3.10.3"
   },
   "scripts": {
+    "web-component": "es-dev-server --node-resolve --watch --open /src/web-components/demo/index.html",
     "start": "grunt stage",
     "lint": "grunt eslint",
     "qunit": "grunt test",

src/beam.js

@@ -336,7 +336,6 @@ export class Beam extends Element {
       return uniqueTuplets;
     }
 
-
     // Using closures to store the variables throughout the various functions
     // IMO Keeps it this process lot cleaner - but not super consistent with
     // the rest of the API's style - Silverwolf90 (Cyril)

src/chordsymbol.js

@@ -39,7 +39,6 @@ export class ChordSymbol extends Modifier {
     };
   }
 
-
   static get verticalJustify() {
     return {
       TOP: 1,
@@ -288,7 +287,6 @@ export class ChordSymbol extends Modifier {
     const prevSymbol = j > 0 ? this.symbolBlocks[j - 1] : null;
     let rv = 0;
 
-
     // Move things into the '/' over bar
     if (symbol.symbolType === ChordSymbol.symbolTypes.GLYPH &&
       symbol.glyph.code === ChordSymbol.glyphs.over.code) {

src/easyscore.js

@@ -279,7 +279,6 @@ function setId({ id }, note) {
   note.setAttribute('id', id);
 }
 
-
 function setClass(options, note) {
   if (!options.class) return;
 

src/formatter.js

@@ -488,7 +488,6 @@ export class Formatter {
     // No justification needed. End formatting.
     if (justifyWidth <= 0) return this.evaluate();
 
-
     // Start justification. Subtract the right extra pixels of the final context because the formatter
     // justifies based on the context's X position, which is the left-most part of the note head.
     const firstContext = contextMap[contextList[0]];

src/glyph.js

@@ -78,7 +78,6 @@ export class Glyph extends Element {
     return { glyph, font };
   }
 
-
   static loadMetrics(fontStack, code, category = null) {
     const { glyph, font } = Glyph.lookupGlyph(fontStack, code);
 

src/note.js

@@ -94,7 +94,6 @@ export class Note extends Tickable {
     let type = noteStruct.type;
     if (type && !Flow.getGlyphProps.validTypes[type]) { return null; }
 
-
     // If no type specified, check duration or custom types
     if (!type) {
       type = durationProps.type || 'n';
@@ -135,7 +134,6 @@ export class Note extends Tickable {
     };
   }
 
-
   // Every note is a tickable, i.e., it can be mutated by the `Formatter` class for
   // positioning and layout.
   // To create a new note you need to provide a `noteStruct`, which consists

src/staveline.js

@@ -275,7 +275,6 @@ export class StaveLine extends Element {
       start_position.x += first_note.getMetrics().modRightPx + render_options.padding_left;
       end_position.x -= last_note.getMetrics().modLeftPx + render_options.padding_right;
 
-
       // Adjust first `x` coordinates for displacements
       const notehead_width = first_note.getGlyph().getWidth();
       const first_displaced = first_note.getKeyProps()[first_index].displaced;

src/tables.js

@@ -31,7 +31,6 @@ const Flow = {
   IsKerned: true,
 };
 
-
 Flow.clefProperties = clef => {
   if (!clef) throw new Vex.RERR('BadArgument', 'Invalid clef: ' + clef);
 
@@ -178,7 +177,6 @@ Flow.keyProperties.note_values = {
   },
 };
 
-
 Flow.integerToNote = integer => {
   if (typeof (integer) === 'undefined') {
     throw new Vex.RERR('BadArguments', 'Undefined integer for integerToNote');
@@ -427,7 +425,6 @@ Flow.keySignature.accidentalList = (acc) => {
   return patterns[acc];
 };
 
-
 // Used to convert duration aliases to the number based duration.
 // If the input isn't an alias, simply return the input.
 //

src/tickable.js

@@ -93,7 +93,6 @@ export class Tickable extends Element {
     return this.tickContext.getX() + this.x_shift;
   }
 
-
   getFormatterMetrics() { return this.formatterMetrics; }
 
   getCenterXShift() {

src/web-components/demo/index.html

@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <title>Vexflow Component</title>
+    <script type="module" src='../index.js'></script>
+  </head>
+  <body>
+
+    <vf-score x=0 height=300 renderer='canvas'>
+      <vf-system>
+        <vf-stave clef='treble' timeSig='4/4' keySig='Bb'>
+          <vf-voice autoBeam>C5/q[id='hello'], (C4 Eb4 G4)/q, A4, G4/16, A4, B4, C5</vf-voice>
+          <vf-voice stem='up'>C#4/h, C#4</vf-voice>
+        </vf-stave>
+        <vf-stave clef='bass' timeSig='4/4' keySig='Bb'>
+          <vf-voice autoBeam>C3/q, (C3 Eb3 G3)/q, A2/q, B2</vf-voice>
+        </vf-stave>
+      </vf-system>
+    </vf-score>
+
+  </body>
+</html>

src/web-components/events/elementAddedEvent.js

@@ -0,0 +1,14 @@
+// ## Description
+// 
+// This file implements `ElementAddedEvent`, the event that child elements 
+// dispatch when they've been added to the DOM in order to get the Factory 
+// instance used by all elements of the overall components. vf-score listens 
+// to this event and sets the vf property of the event target.  
+
+export default class ElementAddedEvent extends Event {
+  static eventName = 'vf-element-added';
+
+  constructor() {
+    super(ElementAddedEvent.eventName, { bubbles: true });
+  }
+}

src/web-components/events/staveAddedEvent.js

@@ -0,0 +1,14 @@
+// ## Description
+// 
+// This file implements `StaveAddedEvent`, the event that vf-stave elements 
+// dispatch in order to get the Registry instance shared by all elements of the 
+// overall component. vf-score listens to this event and sets the registry 
+// property of the vf-stave that dispatched the event.  
+
+export default class StaveAddedEvent extends Event {
+  static eventName = 'vf-stave-added';
+
+  constructor() {
+    super(StaveAddedEvent.eventName, { bubbles: true });
+  }
+}

src/web-components/events/staveReadyEvent.js

@@ -0,0 +1,13 @@
+// ## Description
+// 
+// This file implements `StaveReadyEvent`, the event that vf-stave dispatches 
+// to its parent (vf-system) when it has finished creating its voices and 
+// is ready to be added to the system.
+
+export default class StaveReadyEvent extends Event {
+  static eventName = 'vf-stave-ready';
+
+  constructor() {
+    super(StaveReadyEvent.eventName, { bubbles: true });
+  }
+}

src/web-components/events/systemReadyEvent.js

@@ -0,0 +1,13 @@
+// ## Description
+// 
+// This file implements `SystemReadyEvent`, the event that vf-system dispatches 
+// to its parent (vf-score) when it has finished added its staves and 
+// is ready to be drawn.
+
+export default class SystemReadyEvent extends Event {
+  static eventName = 'vf-system-ready';
+
+  constructor() {
+    super(SystemReadyEvent.eventName, { bubbles: true });
+  }
+}

src/web-components/events/voiceReadyEvent.js

@@ -0,0 +1,13 @@
+// ## Description
+// 
+// This file implements `VoiceReadyEvent`, the event that vf-voice dispatches 
+// to its parent (vf-stave) when it has finished creating its notes & beams and 
+// is ready to be added to the stave.
+
+export default class VoiceReadyEvent extends Event {
+  static eventName = 'vf-voice-ready';
+
+  constructor() {
+    super(VoiceReadyEvent.eventName, { bubbles: true });
+  }
+}

src/web-components/index.js

@@ -0,0 +1,4 @@
+export { VFScore } from './vf-score';
+export { VFSystem } from './vf-system';
+export { VFStave } from './vf-stave';
+export { VFVoice } from './vf-voice';