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.

Sign up for GitHub

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

Jump to bottom

Restore v3.0.9 URLs and Fix JSFiddle examples. #1356

Merged
merged 5 commits into from
Apr 25, 2022
Merged

Restore v3.0.9 URLs and Fix JSFiddle examples. #1356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
69990e7
Add "changelog: true" to release-it options in Gruntfile.js to enable…
ronyeh Mar 25, 2022
6c96dcf
Add a grunt script to restore version 3.0.9 to NPM, with a console.wa…
ronyeh Mar 29, 2022
99f3e2c
Fix JSFiddle examples and update URLs.
ronyeh Mar 29, 2022
5e3a1f2
Add JSFiddle examples from the wiki.
ronyeh Mar 30, 2022
cc27e2f
Clean up the script which restores legacy version 3.0.9 during release.
ronyeh Apr 21, 2022
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
42 changes: 39 additions & 3 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,16 +762,19 @@ module.exports = (grunt) => {
verbose: 1, // See the output of each hook.
// verbose: 2, // Only for debugging.
hooks: {
'before:init': ['grunt clean'],
'before:init': ['grunt clean', 'grunt v309:add'],
'after:bump': ['grunt', 'echo Adding build/ folder...', 'git add -f build/'],
'after:npm:release': [],
'after:git:release': [],
'after:github:release': [],
'after:release': ['echo Successfully released ${name} ${version} to https://github.com/${repo.repository}'],
'after:release': [
'grunt v309:remove',
'echo Successfully released ${name} ${version} to https://github.com/${repo.repository}',
],
},
git: {
commitMessage: 'Release VexFlow ${version}',
changelog: false, // After 4.0: set to true to start publishing recent git commit history as a mini changelog.
changelog: true,
requireCleanWorkingDir: false,
commit: true,
tag: true,
Expand All @@ -780,6 +783,7 @@ module.exports = (grunt) => {
},
github: {
release: true,
releaseName: '${version}',
skipChecks: false,
},
npm: { publish: true },
Expand Down Expand Up @@ -831,6 +835,38 @@ module.exports = (grunt) => {
done();
});
});

// VexFlow examples on JSFiddle and other websites broke because VexFlow 4 removed these URLs:
// https://unpkg.com/vexflow/releases/vexflow-debug.js
// https://unpkg.com/vexflow/releases/vexflow-min.js
// This command restores version 3.0.9 to those locations, but adds a console.warn(...) to the JS file to alert developers
// that a new version has been released.
//
// Use this command during the release script to publish version 3.0.9 to npm alongside version 4.x.
// grunt v309:add
// grunt v309:remove
grunt.registerTask('v309', 'Include the legacy version when publishing to npm.', function (command) {
const minifiedFile = 'releases/vexflow-min.js';
const debugFile = 'releases/vexflow-debug.js';

if (command === 'add') {
// Commit ID 00ec15c67ff333ea49f4d3defbd9e22374c03684 is version 3.0.9.
const commitID = '00ec15c67ff333ea49f4d3defbd9e22374c03684';
runCommand('git', 'checkout', commitID, minifiedFile);
runCommand('git', 'checkout', commitID, debugFile);

const message =
'\nconsole.warn("Please upgrade to the newest release of VexFlow.\\n' +
'See: https://github.com/0xfe/vexflow for more information.\\nThis page uses version 3.0.9, which is no longer supported.");\n\n' +
'// YOU ARE LOOKING AT VEXFLOW LEGACY VERSION 3.0.9.\n' +
'// SEE THE `build/` FOLDER FOR THE NEWEST RELEASE.\n';
fs.appendFileSync(minifiedFile, message);
fs.appendFileSync(debugFile, message);
} else {
runCommand('git', 'rm', '-f', minifiedFile);
runCommand('git', 'rm', '-f', debugFile);
}
});
};

// Call tsc programmatically:
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ system
vf.draw();
```

[See a running example of EasyScore here.](https://jsfiddle.net/t1672wza/)
[See a running example of EasyScore here.](https://jsfiddle.net/xure9svb/)

[Learn more about EasyScore here.](https://github.com/0xfe/vexflow/wiki/Using-EasyScore)

## Native API

If you need more control, you can use the low-level VexFlow API. Below, we render a stave using SVG. [See a running example of the low-level API here.](https://jsfiddle.net/vbu1nto7/)
If you need more control, you can use the low-level VexFlow API. Below, we render a stave using SVG. [See a running example of the low-level API here.](https://jsfiddle.net/5zgf03un/)

```javascript
const { Renderer, Stave } = Vex.Flow;
Expand Down
177 changes: 177 additions & 0 deletions demos/jsfiddle/gracenotes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html>
<style>
canvas {
border: 1px solid gray;
}
</style>
<!-- This example is available at: https://jsfiddle.net/smyht3q5/ -->
<body>
<canvas id="output"></canvas>
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script>
const canvas = document.getElementById('output');

const { Renderer, Stave, StaveNote, Accidental, GraceNote, GraceNoteGroup, Voice, Formatter, Beam, Stem } =
Vex.Flow;

const renderer = new Renderer(canvas, Renderer.Backends.CANVAS);
const context = renderer.getContext();
renderer.resize(520, 210);

const TIME4_4 = {
num_beats: 4,
beat_value: 4,
resolution: Vex.Flow.RESOLUTION,
};

// Create and draw the tablature stave
const stave = new Stave(10, 40, 500);
stave.setContext(context).draw();

function note(params) {
return new StaveNote(params);
}

const notesA = [
note({
keys: ['f/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['f/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['d/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['c/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['c/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['d/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['f/5'],
stem_direction: Stem.UP,
duration: '16',
}),
note({
keys: ['e/5'],
stem_direction: Stem.UP,
duration: '16',
}),
];

const notesB = [
note({
keys: ['f/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['e/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['d/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['c/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['c/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['d/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['f/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
note({
keys: ['e/4'],
stem_direction: Stem.DOWN,
duration: '16',
}),
];

const graceNotes1 = [
new GraceNote({
keys: ['b/4'],
duration: '8',
slash: true,
}),
];
const graceNotes2 = [
new GraceNote({
keys: ['f/4'],
duration: '8',
slash: true,
}),
];
const graceNotes3 = [
new GraceNote({
keys: ['f/4'],
duration: '32',
stem_direction: Stem.DOWN,
}),
new GraceNote({
keys: ['e/4'],
duration: '32',
stem_direction: Stem.DOWN,
}),
];

graceNotes2[0].setStemDirection(-1);
graceNotes2[0].addModifier(new Accidental('#'));

notesA[3].addModifier(new GraceNoteGroup(graceNotes1));
notesB[1].addModifier(new GraceNoteGroup(graceNotes2).beamNotes());
notesB[5].addModifier(new GraceNoteGroup(graceNotes3).beamNotes());

const voiceA = new Voice(TIME4_4).setStrict(false);
const voiceB = new Voice(TIME4_4).setStrict(false);
voiceA.addTickables(notesA);
voiceB.addTickables(notesB);

const formatter = new Formatter().joinVoices([voiceA, voiceB]).formatToStave([voiceA, voiceB], stave);
const beam1_1 = new Beam(notesA.slice(0, 4));
const beam1_2 = new Beam(notesA.slice(4, 8));

const beam2_1 = new Beam(notesB.slice(0, 4));
const beam2_2 = new Beam(notesB.slice(4, 8));

voiceA.draw(context, stave);
voiceB.draw(context, stave);
beam1_1.setContext(context).draw();
beam1_2.setContext(context).draw();

beam2_1.setContext(context).draw();
beam2_2.setContext(context).draw();
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions demos/jsfiddle/sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE >
<!--
This example is available at:
https://jsfiddle.net/wjm3t5su/ -->
<html>
<style>
body {
font-family: Arial, 'sans-serif';
}
</style>
<body>
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script>
const { Renderer, Stave } = Vex.Flow;

// Vex.Flow.setMusicFont('Bravura');
// Vex.Flow.setMusicFont('Gonville');
Vex.Flow.setMusicFont('Petaluma');

// Create an SVG renderer and attach it to the DIV element with id="output".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(800, 500);
const context = renderer.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();
</script>
</body>
</html>
40 changes: 40 additions & 0 deletions demos/jsfiddle/tutorial/step1_basics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE >
<!--
This example is available at: https://jsfiddle.net/cwnsrep9/
It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial
-->
<html>
<style>
body {
font-family: Arial, 'sans-serif';
}
</style>
<body>
<div id="output"></div>
<!--
On JSFiddle.net, we pin the dependency to an exact version number,
to prevent a future release from accidentally breaking the example.
-->
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script>
const { Renderer, Stave } = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();
</script>
</body>
</html>
Loading