Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic voice rendering #3

Open
wants to merge 23 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -31,11 +32,14 @@ module.exports = (grunt) => {
function webpackConfig(target, preset, mode) {
return {
mode,
entry: MODULE_ENTRY,
entry: {
vexflow: VEXFLOW_MODULE_ENTRY,
webComponents: WEB_COMPONENTS_MODULE_ENTRY,
},
output: {
path: BUILD_DIR,
filename: target,
library: 'Vex',
filename: (mode === 'production') ? '[name]-min.js' : '[name]-debug.js',
justinfagnani marked this conversation as resolved.
Show resolved Hide resolved
library: '[name]',
libraryTarget: 'umd',
libraryExport: 'default',
},
Expand All @@ -49,7 +53,7 @@ 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'],
ywsang marked this conversation as resolved.
Show resolved Hide resolved
},
}],
},
Expand Down
15 changes: 15 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// EasyScore API Example

ywsang marked this conversation as resolved.
Show resolved Hide resolved
import Vex from './src/index.js';
const VF = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
var vf = new VF.Factory({renderer: {elementId: null}});
var score = vf.EasyScore();
var system = vf.System();

system.addStave({
voices: [score.voice(score.notes('C#5/q, B4, A4, G#4'))]
}).addClef('treble').addTimeSignature('4/4');

vf.draw();
24 changes: 24 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<html>
ywsang marked this conversation as resolved.
Show resolved Hide resolved
<head>
<title>Vexflow Component</title>
<script type="module" src='./src/web-components/index.js'></script>
</head>
<body>
<!-- For testing the EasyScore API example
<div id="boo"></div>
<script type="module" src="./app.js"></script> -->

<vf-score height=300>
<vf-system>
<vf-stave clef='treble' timeSig='4/4' keySig='Bb'>
<vf-voice autoBeam>C5/q, (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>
Loading