|
|
@@ -49,6 +49,9 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
|
|
|
zoom = 1.0,
|
|
|
// HTML Elements in the page
|
|
|
+ divControls,
|
|
|
+ zoomControls,
|
|
|
+ header,
|
|
|
err,
|
|
|
error_tr,
|
|
|
canvas,
|
|
|
@@ -81,10 +84,43 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
var drawPartNamesOptionStashedValue = true;
|
|
|
var drawPartNamesOptionNeedsReset = false;
|
|
|
|
|
|
+ var showControls = true;
|
|
|
+ var showZoomControl = true;
|
|
|
+ var showHeader = true;
|
|
|
// Initialization code
|
|
|
function init() {
|
|
|
var name, option;
|
|
|
|
|
|
+ // Handle window parameter
|
|
|
+ var paramEmbedded = findGetParameter('embedded');
|
|
|
+ var paramShowControls = findGetParameter('showControls');
|
|
|
+ var paramShowZoomControl = findGetParameter('showZoomControl');
|
|
|
+ var paramShowHeader = findGetParameter('showHeader');
|
|
|
+ var paramZoom = findGetParameter('zoom');
|
|
|
+ var paramOverflow = findGetParameter('overflow');
|
|
|
+ var paramOpenUrl = findGetParameter('openUrl');
|
|
|
+
|
|
|
+ if (paramEmbedded !== undefined) {
|
|
|
+ showControls = (paramShowControls === '1');
|
|
|
+ showZoomControl = (paramShowZoomControl === '1');
|
|
|
+ showHeader = (paramShowHeader === '1');
|
|
|
+ }
|
|
|
+ if (paramZoom !== undefined) {
|
|
|
+ if (paramZoom > 0.1 && paramZoom < 5.0) {
|
|
|
+ zoom = paramZoom;
|
|
|
+ console.log('Set zoom to ' + zoom);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (paramOverflow !== undefined && typeof paramOverflow === 'string') {
|
|
|
+ if (paramOverflow === 'hidden' || paramOverflow === 'auto' || paramOverflow === 'scroll' || paramOverflow === 'visible') {
|
|
|
+ document.body.style.overflow = paramOverflow;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ divControls = document.getElementById('divControls');
|
|
|
+ zoomControls = document.getElementById('zoomControls');
|
|
|
+ header = document.getElementById('header');
|
|
|
err = document.getElementById("error-td");
|
|
|
error_tr = document.getElementById("error-tr");
|
|
|
zoomDiv = document.getElementById("zoom-str");
|
|
|
@@ -106,9 +142,30 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
debugReRenderBtn = document.getElementById("debug-re-render-btn");
|
|
|
debugClearBtn = document.getElementById("debug-clear-btn");
|
|
|
|
|
|
+ if (!showControls) {
|
|
|
+ divControls.style.display = 'none';
|
|
|
+ }
|
|
|
+ if (!showHeader) {
|
|
|
+ header.style.display = 'none';
|
|
|
+ }
|
|
|
// Hide error
|
|
|
error();
|
|
|
|
|
|
+ if (!showControls && showZoomControl) {
|
|
|
+ const zoomControlsButtons = document.getElementById('zoomControlsButtons');
|
|
|
+ const zoomControlsString = document.getElementById('zoom-str');
|
|
|
+ const optionalControls = document.getElementById('optionalControls');
|
|
|
+ optionalControls.appendChild(zoomControlsButtons);
|
|
|
+ optionalControls.appendChild(zoomControlsString);
|
|
|
+ optionalControls.style.position = 'absolute';
|
|
|
+ optionalControls.style.zIndex = '10';
|
|
|
+ optionalControls.style.right = '10px';
|
|
|
+ optionalControls.style.padding = '10px';
|
|
|
+
|
|
|
+ zoomControlsString.style.display = 'inline';
|
|
|
+ zoomControlsString.style.padding = '10px';
|
|
|
+ }
|
|
|
+
|
|
|
// Create select
|
|
|
for (name in samples) {
|
|
|
if (samples.hasOwnProperty(name)) {
|
|
|
@@ -138,25 +195,25 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
};
|
|
|
|
|
|
if (skylineDebug) {
|
|
|
- skylineDebug.onclick = function() {
|
|
|
+ skylineDebug.onclick = function () {
|
|
|
openSheetMusicDisplay.DrawSkyLine = !openSheetMusicDisplay.DrawSkyLine;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (bottomlineDebug) {
|
|
|
- bottomlineDebug.onclick = function() {
|
|
|
+ bottomlineDebug.onclick = function () {
|
|
|
openSheetMusicDisplay.DrawBottomLine = !openSheetMusicDisplay.DrawBottomLine;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (debugReRenderBtn) {
|
|
|
- debugReRenderBtn.onclick = function() {
|
|
|
+ debugReRenderBtn.onclick = function () {
|
|
|
rerender();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (debugClearBtn) {
|
|
|
- debugClearBtn.onclick = function() {
|
|
|
+ debugClearBtn.onclick = function () {
|
|
|
openSheetMusicDisplay.clear();
|
|
|
}
|
|
|
}
|
|
|
@@ -198,27 +255,27 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
openSheetMusicDisplay.setLogLevel('info');
|
|
|
document.body.appendChild(canvas);
|
|
|
|
|
|
- window.addEventListener("keydown", function(e) {
|
|
|
+ window.addEventListener("keydown", function (e) {
|
|
|
var event = window.event ? window.event : e;
|
|
|
if (event.keyCode === 39) {
|
|
|
openSheetMusicDisplay.cursor.next();
|
|
|
}
|
|
|
});
|
|
|
- nextCursorBtn.addEventListener("click", function() {
|
|
|
+ nextCursorBtn.addEventListener("click", function () {
|
|
|
openSheetMusicDisplay.cursor.next();
|
|
|
});
|
|
|
- resetCursorBtn.addEventListener("click", function() {
|
|
|
+ resetCursorBtn.addEventListener("click", function () {
|
|
|
openSheetMusicDisplay.cursor.reset();
|
|
|
});
|
|
|
if (followCursorCheckbox) {
|
|
|
- followCursorCheckbox.onclick = function() {
|
|
|
+ followCursorCheckbox.onclick = function () {
|
|
|
openSheetMusicDisplay.FollowCursor = !openSheetMusicDisplay.FollowCursor;
|
|
|
}
|
|
|
}
|
|
|
- hideCursorBtn.addEventListener("click", function() {
|
|
|
+ hideCursorBtn.addEventListener("click", function () {
|
|
|
openSheetMusicDisplay.cursor.hide();
|
|
|
});
|
|
|
- showCursorBtn.addEventListener("click", function() {
|
|
|
+ showCursorBtn.addEventListener("click", function () {
|
|
|
if (openSheetMusicDisplay.cursor) {
|
|
|
openSheetMusicDisplay.cursor.show();
|
|
|
} else {
|
|
|
@@ -226,18 +283,18 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- backendSelect.addEventListener("change", function(e) {
|
|
|
+ backendSelect.addEventListener("change", function (e) {
|
|
|
var value = e.target.value;
|
|
|
var createNewOsmd = true;
|
|
|
|
|
|
if (createNewOsmd) {
|
|
|
// clears the canvas element
|
|
|
canvas.innerHTML = "";
|
|
|
- openSheetMusicDisplay = new OpenSheetMusicDisplay(canvas, {backend: value});
|
|
|
+ openSheetMusicDisplay = new OpenSheetMusicDisplay(canvas, { backend: value });
|
|
|
openSheetMusicDisplay.setLogLevel('info');
|
|
|
} else {
|
|
|
// alternative, doesn't work yet, see setOptions():
|
|
|
- openSheetMusicDisplay.setOptions({backend: value});
|
|
|
+ openSheetMusicDisplay.setOptions({ backend: value });
|
|
|
}
|
|
|
|
|
|
selectSampleOnChange();
|
|
|
@@ -245,6 +302,22 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ function findGetParameter(parameterName) {
|
|
|
+ let result = undefined;
|
|
|
+ let tmp = [];
|
|
|
+ location.search
|
|
|
+ .substr(1)
|
|
|
+ .split('&')
|
|
|
+ .forEach(function (item) {
|
|
|
+ tmp = item.split('=');
|
|
|
+ if (tmp[0] === parameterName) {
|
|
|
+ result = decodeURIComponent(tmp[1]);
|
|
|
+ console.log('Found param:' + parameterName + ' = ' + result);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
function selectBoundingOnChange(evt) {
|
|
|
var value = evt.target.value;
|
|
|
openSheetMusicDisplay.DrawBoundingBox = value;
|
|
|
@@ -257,23 +330,24 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
if (!isCustom) {
|
|
|
str = sampleFolder + selectSample.value;
|
|
|
}
|
|
|
- zoom = 1.0;
|
|
|
+ // zoom = 1.0;
|
|
|
|
|
|
setSampleSpecificOptions(str, isCustom);
|
|
|
-
|
|
|
+
|
|
|
openSheetMusicDisplay.load(str).then(
|
|
|
- function() {
|
|
|
+ function () {
|
|
|
// This gives you access to the osmd object in the console. Do not use in productive code
|
|
|
window.osmd = openSheetMusicDisplay;
|
|
|
+ openSheetMusicDisplay.zoom = zoom;
|
|
|
return openSheetMusicDisplay.render();
|
|
|
},
|
|
|
- function(e) {
|
|
|
+ function (e) {
|
|
|
errorLoadingOrRenderingSheet(e, "rendering");
|
|
|
}
|
|
|
).then(
|
|
|
- function() {
|
|
|
+ function () {
|
|
|
return onLoadingEnd(isCustom);
|
|
|
- }, function(e) {
|
|
|
+ }, function (e) {
|
|
|
errorLoadingOrRenderingSheet(e, "loading");
|
|
|
onLoadingEnd(isCustom);
|
|
|
}
|
|
|
@@ -327,23 +401,24 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
openSheetMusicDisplay.setOptions({ // set default values. better would be to restore to stashed values, but unnecessarily complex for demo
|
|
|
coloringMode: 0,
|
|
|
colorStemsLikeNoteheads: false,
|
|
|
- coloringSetCustom: null});
|
|
|
+ coloringSetCustom: null
|
|
|
+ });
|
|
|
autoCustomColoringOptionNeedsReset = false;
|
|
|
}
|
|
|
if (!isCustom && str.includes("autobeam")) {
|
|
|
autobeamOptionStashedValue = openSheetMusicDisplay.EngravingRules.AutoBeamNotes; // stash previously set value, to restore later
|
|
|
autobeamOptionNeedsReset = true;
|
|
|
- openSheetMusicDisplay.setOptions({autoBeam: true});
|
|
|
+ openSheetMusicDisplay.setOptions({ autoBeam: true });
|
|
|
} else if (autobeamOptionNeedsReset) {
|
|
|
- openSheetMusicDisplay.setOptions({autoBeam: autobeamOptionStashedValue});
|
|
|
+ openSheetMusicDisplay.setOptions({ autoBeam: autobeamOptionStashedValue });
|
|
|
autobeamOptionNeedsReset = false;
|
|
|
}
|
|
|
if (!isCustom && str.includes("Schubert_An_die_Musik")) { // TODO weird layout bug here with part names. but shouldn't be in score anyways
|
|
|
drawPartNamesOptionStashedValue = openSheetMusicDisplay.EngravingRules.RenderPartNames;
|
|
|
- openSheetMusicDisplay.setOptions({drawPartNames: false}); // TODO sets osmd.drawingParameters.DrawPartNames! also check EngravingRules.RenderPartAbbreviations, was false
|
|
|
+ openSheetMusicDisplay.setOptions({ drawPartNames: false }); // TODO sets osmd.drawingParameters.DrawPartNames! also check EngravingRules.RenderPartAbbreviations, was false
|
|
|
drawPartNamesOptionNeedsReset = true;
|
|
|
} else if (drawPartNamesOptionNeedsReset) {
|
|
|
- openSheetMusicDisplay.setOptions({drawPartNames: drawPartNamesOptionStashedValue});
|
|
|
+ openSheetMusicDisplay.setOptions({ drawPartNames: drawPartNamesOptionStashedValue });
|
|
|
drawPartNamesOptionNeedsReset = false;
|
|
|
}
|
|
|
}
|
|
|
@@ -373,7 +448,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
|
|
|
function scale() {
|
|
|
disable();
|
|
|
- window.setTimeout(function(){
|
|
|
+ window.setTimeout(function () {
|
|
|
openSheetMusicDisplay.zoom = zoom;
|
|
|
openSheetMusicDisplay.render();
|
|
|
enable();
|
|
|
@@ -382,7 +457,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
|
|
|
function rerender() {
|
|
|
disable();
|
|
|
- window.setTimeout(function(){
|
|
|
+ window.setTimeout(function () {
|
|
|
if (openSheetMusicDisplay.IsReadyToRender()) {
|
|
|
openSheetMusicDisplay.render();
|
|
|
} else {
|
|
|
@@ -415,21 +490,21 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
}
|
|
|
|
|
|
// Register events: load, drag&drop
|
|
|
- window.addEventListener("load", function() {
|
|
|
+ window.addEventListener("load", function () {
|
|
|
init();
|
|
|
selectSampleOnChange();
|
|
|
});
|
|
|
- window.addEventListener("dragenter", function(event) {
|
|
|
+ window.addEventListener("dragenter", function (event) {
|
|
|
event.preventDefault();
|
|
|
disable();
|
|
|
});
|
|
|
- window.addEventListener("dragover", function(event) {
|
|
|
+ window.addEventListener("dragover", function (event) {
|
|
|
event.preventDefault();
|
|
|
});
|
|
|
- window.addEventListener("dragleave", function(event) {
|
|
|
+ window.addEventListener("dragleave", function (event) {
|
|
|
enable();
|
|
|
});
|
|
|
- window.addEventListener("drop", function(event) {
|
|
|
+ window.addEventListener("drop", function (event) {
|
|
|
event.preventDefault();
|
|
|
if (!event.dataTransfer || !event.dataTransfer.files || event.dataTransfer.files.length === 0) {
|
|
|
return;
|
|
|
@@ -446,7 +521,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
|
|
|
if (filename.toLowerCase().indexOf(".xml") > 0
|
|
|
|| filename.toLowerCase().indexOf(".musicxml") > 0) {
|
|
|
reader.readAsText(event.dataTransfer.files[0]);
|
|
|
- } else if (event.dataTransfer.files[0].name.toLowerCase().indexOf(".mxl") > 0){
|
|
|
+ } else if (event.dataTransfer.files[0].name.toLowerCase().indexOf(".mxl") > 0) {
|
|
|
reader.readAsBinaryString(event.dataTransfer.files[0]);
|
|
|
}
|
|
|
else {
|
Florian Hintermeier