vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
111 lines (93 loc) • 3 kB
HTML
<html>
<head>
<title>VexFlow 2 - JavaScript Music Notation and Guitar Tab</title>
<link rel="stylesheet" href="index.css" type="text/css" media="screen" />
<!-- VexFlow Sources -->
<script src="../../build/vexflow-debug.js"></script>
<script src="framestack.js"></script>
<script src="tests.js"></script>
<script>
function defer(fn) {
setTimeout(fn, 0);
}
function message(text, enabled = false) {
const button = document.querySelector('#go');
if (!enabled) {
button.setAttribute('disabled', true);
} else {
button.removeAttribute('disabled');
}
button.innerHTML = text;
}
document.addEventListener('DOMContentLoaded', () => {
const iterations = 100;
VF.Registry.enableDefaultRegistry();
let frameStacks = []
Object.keys(Tests).forEach(t => {
const test = Tests[t];
console.log("Running", t, test.options)
const frameStack = new FrameStack(t, iterations, {
prefix: `test-${t}-`,
...test.options,
});
// Run asynchronously so we don't block the UI thread
defer(() => {
message("Running " + t)
for (let i = 0; i < iterations; i++) {
test.fn(frameStack.get(i), i, { ...test.options });
}
});
// Install after building frames, so that reflows occur correctly
frameStack.install();
frameStacks.push(frameStack);
});
let running = false;
const button = document.querySelector('#go');
button.addEventListener('click', () => {
frameStacks.forEach(f => {
if (running) {
f.stop();
} else {
f.start();
}
});
running = !running;
if (running) {
button.innerHTML = 'STOP';
} else {
button.innerHTML = 'START';
}
});
defer(() => { message("START", true); });
});
</script>
</head>
<body>
<div style="text-align: center;">
<div>
<h1>
Formatter Debugging
</h1>
<div id="container"
style="width: 100%; height: 80%; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;">
<br>
<div id="tuplets" style="position: relative;">
</div>
<div id="subgroup" style="position: relative;">
</div>
<div id="multistave" style="position: relative;">
</div>
</div>
</div>
<p style="position: fixed; bottom: 0; right: 1em;">
[ <a href="http://vexflow.com">home</a> ]
[ <a href="http://github.com/0xfe/vexflow">github</a> ]
[ <a href="http://0xfe.muthanna.com">0xfe</a> ]
</p>
</div>
<div style="position: fixed; top: 1rem; right: 1rem; text-align: center;">
<button id="go" style="background: #9e9; border: 0; padding: 1rem; font-size: 1.2rem;" disabled>RUNNING...</button>
</div>
</body>
</html>