From e573414837fc2c33c1acf48e7934f5c47cedcabf Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 17:16:46 +0200 Subject: [PATCH 01/15] fix(demo): extend sample name box length to not cut off sample titles --- demo/demo.css | 8 +++++++- demo/index.html | 2 +- demo/index.js | 40 ++++++++++++++++++++-------------------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index f12ad1a63..8a9262dc7 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -2,8 +2,14 @@ p { margin: 0px 8px 8px 8px; } +/* the select widths are not used for some reason, even if we don't set the style in index.html */ select { - margin: 0px 8px 8px 8px; + width: 100px; + margin: 2px 8px 8px 8px; +} + +#selectSample { + width: 250px; } .bignum { diff --git a/demo/index.html b/demo/index.html index cd20ad707..208f0bd14 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,7 +21,7 @@

Select a sample:

- +

Render backend:

diff --git a/demo/index.js b/demo/index.js index 2188dc20d..b309d66f3 100644 --- a/demo/index.js +++ b/demo/index.js @@ -4,10 +4,10 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus (function () { "use strict"; var openSheetMusicDisplay; - // The folder of the demo files + // folder of the sample files var folder = process.env.STATIC_FILES_SUBFOLDER ? process.env.STATIC_FILES_SUBFOLDER + "/" : "", - // The available demos - demos = { + // demo sample files + samples = { "L.v. Beethoven - An die ferne Geliebte": "Beethoven_AnDieFerneGeliebte.xml", "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1.xml", "M. Clementi - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml", @@ -41,7 +41,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus err, error_tr, canvas, - select, + selectSample, selectBounding, skylineDebug, bottomlineDebug, @@ -63,7 +63,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus error_tr = document.getElementById("error-tr"); zoomDiv = document.getElementById("zoom-str"); custom = document.createElement("option"); - select = document.getElementById("select"); + selectSample = document.getElementById("selectSample"); selectBounding = document.getElementById("selectBounding"); skylineDebug = document.getElementById("skylineDebug"); bottomlineDebug = document.getElementById("bottomlineDebug"); @@ -80,15 +80,15 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus error(); // Create select - for (name in demos) { - if (demos.hasOwnProperty(name)) { + for (name in samples) { + if (samples.hasOwnProperty(name)) { option = document.createElement("option"); - option.value = demos[name]; + option.value = samples[name]; option.textContent = name; } - select.appendChild(option); + selectSample.appendChild(option); } - select.onchange = selectOnChange; + selectSample.onchange = selectSampleOnChange; selectBounding.onchange = selectBoundingOnChange; // Pre-select default music piece @@ -158,7 +158,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus canvas.innerHTML = ""; openSheetMusicDisplay = new OpenSheetMusicDisplay(canvas, false, value); openSheetMusicDisplay.setLogLevel('info'); - selectOnChange(); + selectSampleOnChange(); }); } @@ -196,12 +196,12 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus openSheetMusicDisplay.DrawBoundingBox = value; } - function selectOnChange(str) { + function selectSampleOnChange(str) { error(); disable(); var isCustom = typeof str === "string"; if (!isCustom) { - str = folder + select.value; + str = folder + selectSample.value; } zoom = 1.0; openSheetMusicDisplay.load(str).then( @@ -225,8 +225,8 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus function onLoadingEnd(isCustom) { // Remove option from select - if (!isCustom && custom.parentElement === select) { - select.removeChild(custom); + if (!isCustom && custom.parentElement === selectSample) { + selectSample.removeChild(custom); } // Enable controls again enable(); @@ -259,18 +259,18 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus // Enable/Disable Controls function disable() { document.body.style.opacity = 0.3; - select.disabled = zoomIn.disabled = zoomOut.disabled = "disabled"; + selectSample.disabled = zoomIn.disabled = zoomOut.disabled = "disabled"; } function enable() { document.body.style.opacity = 1; - select.disabled = zoomIn.disabled = zoomOut.disabled = ""; + selectSample.disabled = zoomIn.disabled = zoomOut.disabled = ""; logCanvasSize(); } // Register events: load, drag&drop window.addEventListener("load", function() { init(); - selectOnChange(); + selectSampleOnChange(); }); window.addEventListener("dragenter", function(event) { event.preventDefault(); @@ -288,12 +288,12 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus return; } // Add "Custom..." score - select.appendChild(custom); + selectSample.appendChild(custom); custom.selected = "selected"; // Read dragged file var reader = new FileReader(); reader.onload = function (res) { - selectOnChange(res.target.result); + selectSampleOnChange(res.target.result); }; var filename = event.dataTransfer.files[0].name; if (filename.toLowerCase().indexOf(".xml") > 0 From 8fc4a39465013f48048e5c338a0c398228096098 Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 17:43:04 +0200 Subject: [PATCH 02/15] fix(demo): sample names: last name first, then first names --- demo/index.js | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/demo/index.js b/demo/index.js index b309d66f3..20d1f44d4 100644 --- a/demo/index.js +++ b/demo/index.js @@ -5,35 +5,34 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus "use strict"; var openSheetMusicDisplay; // folder of the sample files - var folder = process.env.STATIC_FILES_SUBFOLDER ? process.env.STATIC_FILES_SUBFOLDER + "/" : "", - // demo sample files + var sampleFolder = process.env.STATIC_FILES_SUBFOLDER ? process.env.STATIC_FILES_SUBFOLDER + "/" : "", samples = { - "L.v. Beethoven - An die ferne Geliebte": "Beethoven_AnDieFerneGeliebte.xml", - "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1.xml", - "M. Clementi - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml", - "M. Clementi - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1.xml", - "M. Clementi - Sonatina Op.36 No.3 Pt.2": "MuzioClementi_SonatinaOpus36No3_Part2.xml", - "J.S. Bach - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1.xml", - "J.S. Bach - Air": "JohannSebastianBach_Air.xml", - "C. Gounod - Meditation": "CharlesGounod_Meditation.xml", - "J. Haydn - Concertante Cello": "JosephHaydn_ConcertanteCello.xml", - "S. Joplin - Elite Syncopations": "ScottJoplin_EliteSyncopations.xml", - "S. Joplin - The Entertainer": "ScottJoplin_The_Entertainer.xml", - "W.A. Mozart - An Chloe": "Mozart_AnChloe.xml", - "W.A. Mozart - Das Veilchen": "Mozart_DasVeilchen.xml", - "W.A. Mozart - Clarinet Quintet (Excerpt)": "Mozart_Clarinet_Quintet_Excerpt.mxl", + "Beethoven, L.v. - An die ferne Geliebte": "Beethoven_AnDieFerneGeliebte.xml", + "Clementi, M. - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1.xml", + "Clementi, M. - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml", + "Clementi, M. - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1.xml", + "Clementi, M. - Sonatina Op.36 No.3 Pt.2": "MuzioClementi_SonatinaOpus36No3_Part2.xml", + "Bach, J.S. - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1.xml", + "Bach, J.S. - Air": "JohannSebastianBach_Air.xml", + "Gounod, C. - Meditation": "CharlesGounod_Meditation.xml", + "Haydn, J. - Concertante Cello": "JosephHaydn_ConcertanteCello.xml", + "Joplin, S. - Elite Syncopations": "ScottJoplin_EliteSyncopations.xml", + "Joplin, S. - The Entertainer": "ScottJoplin_The_Entertainer.xml", + "Mozart, W.A. - An Chloe": "Mozart_AnChloe.xml", + "Mozart, W.A. - Das Veilchen": "Mozart_DasVeilchen.xml", + "Mozart, W.A.- Clarinet Quintet (Excerpt)": "Mozart_Clarinet_Quintet_Excerpt.mxl", "OSMD Function Test - All": "OSMD_function_test_all.xml", "OSMD Function Test - Grace Notes": "OSMD_function_test_GraceNotes.xml", "OSMD Function Test - Ornaments": "OSMD_function_test_Ornaments.xml", "OSMD Function Test - Accidentals": "OSMD_function_test_accidentals.musicxml", - "F. Schubert - An Die Musik (Multiple Verses)": "Schubert_An_die_Musik.xml", - "L. Actor - Prelude (Sample)": "ActorPreludeSample.xml", + "Schubert, F. - An Die Musik": "Schubert_An_die_Musik.xml", + "Actor, L. - Prelude (Sample)": "ActorPreludeSample.xml", "Anonymous - Saltarello": "Saltarello.mxl", - "C. Debussy - Mandoline": "Debussy_Mandoline.xml", - "France Levasseur - Parlez Mois": "Parlez-moi.mxl", - "R. Schumann - Dichterliebe": "Dichterliebe01.xml", - "Telemann - Sonate-Nr.1.1-Dolce": "TelemannWV40.102_Sonate-Nr.1.1-Dolce.xml", - "Telemann - Sonate-Nr.1.2-Allegro": "TelemannWV40.102_Sonate-Nr.1.2-Allegro-F-Dur.xml", + "Debussy, C. - Mandoline": "Debussy_Mandoline.xml", + "Levasseur, F. - Parlez Mois": "Parlez-moi.mxl", + "Schumann, R. - Dichterliebe": "Dichterliebe01.xml", + "Telemann, G.P. - Sonate-Nr.1.1-Dolce": "TelemannWV40.102_Sonate-Nr.1.1-Dolce.xml", + "Telemann, G.P. - Sonate-Nr.1.2-Allegro": "TelemannWV40.102_Sonate-Nr.1.2-Allegro-F-Dur.xml", }, zoom = 1.0, @@ -201,7 +200,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus disable(); var isCustom = typeof str === "string"; if (!isCustom) { - str = folder + selectSample.value; + str = sampleFolder + selectSample.value; } zoom = 1.0; openSheetMusicDisplay.load(str).then( From e2c37c62fa66c3417f818ae9c415c0c75fe0ff6c Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 17:59:09 +0200 Subject: [PATCH 03/15] fix(demo): sample list: prevent comma cut-off, align height with backend selector --- demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index 208f0bd14..1f4e0bee2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,11 +21,11 @@

Select a sample:

- +

Render backend:

- > From 65d1d304e085ec6c674e08d8a5db7bae7dad286e Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 18:16:30 +0200 Subject: [PATCH 04/15] fix(demo): fix css desired sample width --- demo/demo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/demo.css b/demo/demo.css index 8a9262dc7..7020e74a3 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -9,7 +9,7 @@ select { } #selectSample { - width: 250px; + width: 310px; } .bignum { From c62fb028da1f91b586693c341c36eb3b12b2ae2e Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 18:39:43 +0200 Subject: [PATCH 05/15] fix(demo): Bach "C Dur" -> "C-Dur" --- demo/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/index.js b/demo/index.js index 20d1f44d4..f60004d45 100644 --- a/demo/index.js +++ b/demo/index.js @@ -12,7 +12,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus "Clementi, M. - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml", "Clementi, M. - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1.xml", "Clementi, M. - Sonatina Op.36 No.3 Pt.2": "MuzioClementi_SonatinaOpus36No3_Part2.xml", - "Bach, J.S. - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1.xml", + "Bach, J.S. - Praeludium in C-Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1.xml", "Bach, J.S. - Air": "JohannSebastianBach_Air.xml", "Gounod, C. - Meditation": "CharlesGounod_Meditation.xml", "Haydn, J. - Concertante Cello": "JosephHaydn_ConcertanteCello.xml", From 41ee64f25a3709d0afbdfc1a8e3b186952a67aa5 Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 26 Jul 2018 21:19:56 +0200 Subject: [PATCH 06/15] fix(in-measure clef): add as NoteSubGroup instead of ClefNote directly. placement still bugged part of #307 --- external/vexflow/vexflow.d.ts | 5 +++++ .../Graphical/VexFlow/VexFlowConverter.ts | 3 ++- src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts | 12 ++++++++---- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/external/vexflow/vexflow.d.ts b/external/vexflow/vexflow.d.ts index 74a40aa2c..b14e8b661 100644 --- a/external/vexflow/vexflow.d.ts +++ b/external/vexflow/vexflow.d.ts @@ -203,6 +203,9 @@ declare namespace Vex { public setPosition(position: number): Modifier; } + export class NoteSubGroup extends Modifier { + constructor(notes: Object); + } export class StaveModifier extends Modifier { public static get Position() { @@ -240,6 +243,8 @@ declare namespace Vex { export class ClefNote extends Note { constructor(type: string, size: string, annotation: string); + + public type: string; } export class Renderer { diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts index 949907380..582f02a68 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts @@ -218,8 +218,9 @@ export class VexFlowConverter { clef: vfClefType, duration: duration, keys: keys, - slash: gve.parentVoiceEntry.GraceNoteSlash + slash: gve.parentVoiceEntry.GraceNoteSlash, }; + if (!gve.parentVoiceEntry.IsGrace) { vfnote = new Vex.Flow.StaveNote(vfnoteStruct); } else { diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts index 49269a1c5..0221a513e 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts @@ -15,6 +15,7 @@ import {GraphicalStaffEntry} from "../GraphicalStaffEntry"; import StaveConnector = Vex.Flow.StaveConnector; import StaveNote = Vex.Flow.StaveNote; import StemmableNote = Vex.Flow.StemmableNote; +import NoteSubGroup = Vex.Flow.NoteSubGroup; import * as log from "loglevel"; import {unitInPixels} from "./VexFlowMusicSheetDrawer"; import {Tuplet} from "../../VoiceData/Tuplet"; @@ -650,7 +651,6 @@ export class VexFlowMeasure extends GraphicalMeasure { const restFilledEntries: GraphicalVoiceEntry[] = this.getRestFilledVexFlowStaveNotesPerVoice(voice); // create vex flow voices and add tickables to it: - // let graceGVoiceEntriesBefore: GraphicalVoiceEntry[] = []; for (const voiceEntry of restFilledEntries) { if (!voiceEntry.parentVoiceEntry) { continue; @@ -663,10 +663,14 @@ export class VexFlowMeasure extends GraphicalMeasure { // check for in-measure clefs: // only add clefs in main voice (to not add them twice) if (isMainVoice) { - const vfse: VexFlowStaffEntry = vexFlowVoiceEntry.parentStaffEntry as VexFlowStaffEntry; + const vfse: VexFlowStaffEntry = voiceEntry.parentStaffEntry as VexFlowStaffEntry; if (vfse.vfClefBefore !== undefined) { - // add the clef as Vex.Flow.ClefNote - this.vfVoices[voice.VoiceId].addTickable(vfse.vfClefBefore); + const graphicalVoiceEntries: GraphicalVoiceEntry[] = vfse.graphicalVoiceEntries; + if (graphicalVoiceEntries.length > 0) { + // add clef as NoteSubGroup instead of note directly to get modifier layouting + const clefModifier: NoteSubGroup = new NoteSubGroup( [vfse.vfClefBefore] ); + (graphicalVoiceEntries[0] as VexFlowVoiceEntry).vfStaveNote.addModifier(0, clefModifier); + } } } this.vfVoices[voice.VoiceId].addTickable(vexFlowVoiceEntry.vfStaveNote); From 27a17ed86ed626ec330f358cb06246bee61c495b Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 27 Jul 2018 12:15:44 +0200 Subject: [PATCH 07/15] in-measure clef: simplified adding modifier --- src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts index 0221a513e..9101a4c8e 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts @@ -663,14 +663,11 @@ export class VexFlowMeasure extends GraphicalMeasure { // check for in-measure clefs: // only add clefs in main voice (to not add them twice) if (isMainVoice) { - const vfse: VexFlowStaffEntry = voiceEntry.parentStaffEntry as VexFlowStaffEntry; + const vfse: VexFlowStaffEntry = vexFlowVoiceEntry.parentStaffEntry as VexFlowStaffEntry; if (vfse.vfClefBefore !== undefined) { - const graphicalVoiceEntries: GraphicalVoiceEntry[] = vfse.graphicalVoiceEntries; - if (graphicalVoiceEntries.length > 0) { - // add clef as NoteSubGroup instead of note directly to get modifier layouting - const clefModifier: NoteSubGroup = new NoteSubGroup( [vfse.vfClefBefore] ); - (graphicalVoiceEntries[0] as VexFlowVoiceEntry).vfStaveNote.addModifier(0, clefModifier); - } + // add clef as NoteSubGroup so that we get modifier layouting + const clefModifier: NoteSubGroup = new NoteSubGroup( [vfse.vfClefBefore] ); + vexFlowVoiceEntry.vfStaveNote.addModifier(0, clefModifier); } } this.vfVoices[voice.VoiceId].addTickable(vexFlowVoiceEntry.vfStaveNote); From deca5919ecfe6fe9e5d790b2309bcafc6415e2cb Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 27 Jul 2018 17:14:50 +0200 Subject: [PATCH 08/15] fix indentation --- src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts index 9101a4c8e..6bf3d44a1 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts @@ -618,15 +618,15 @@ export class VexFlowMeasure extends GraphicalMeasure { graceGVoiceEntriesBefore.push(gve); if (!graceSlur) { graceSlur = gve.parentVoiceEntry.GraceSlur; - } + } continue; - } + } (gve as VexFlowVoiceEntry).vfStaveNote = VexFlowConverter.StaveNote(gve); if (graceGVoiceEntriesBefore.length > 0) { const graceNotes: Vex.Flow.GraceNote[] = []; for (let i: number = 0; i < graceGVoiceEntriesBefore.length; i++) { graceNotes.push(VexFlowConverter.StaveNote(graceGVoiceEntriesBefore[i])); - } + } const graceNoteGroup: Vex.Flow.GraceNoteGroup = new Vex.Flow.GraceNoteGroup(graceNotes, graceSlur); (gve as VexFlowVoiceEntry).vfStaveNote.addModifier(0, graceNoteGroup.beamNotes()); graceGVoiceEntriesBefore = []; From 82a0a342cd78e9707c21d2d2cf05233183bdf34d Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 27 Jul 2018 19:30:11 +0200 Subject: [PATCH 09/15] add in-measure clefs to function test --- test/data/OSMD_function_test_all.xml | 299 +++++++++++++++++---------- 1 file changed, 186 insertions(+), 113 deletions(-) diff --git a/test/data/OSMD_function_test_all.xml b/test/data/OSMD_function_test_all.xml index 9f91fceca..deba53ffe 100644 --- a/test/data/OSMD_function_test_all.xml +++ b/test/data/OSMD_function_test_all.xml @@ -7,7 +7,7 @@ MuseScore 2.3.1 - 2018-07-19 + 2018-07-27 @@ -59,12 +59,12 @@ - + 0.00 - 0.00 + -0.00 195.00 @@ -83,7 +83,7 @@ 2 - + C 5 @@ -91,13 +91,13 @@ 16 1 whole - + single Ornaments: - + Ornaments @@ -127,7 +127,7 @@ Trill - + C 5 @@ -147,14 +147,14 @@ - + 16 1 - + E @@ -181,7 +181,7 @@ half - + E @@ -208,7 +208,7 @@ half - + D @@ -235,14 +235,14 @@ half - + 16 1 - + B @@ -340,17 +340,17 @@ quarter - + 0.00 - 0.00 + -0.00 94.25 - + C 5 @@ -358,13 +358,13 @@ 16 1 whole - + single Articulations: - + Articulations @@ -390,7 +390,7 @@ Upbow - + E 5 @@ -412,7 +412,7 @@ 1 quarter - + F 5 @@ -430,7 +430,7 @@ Fermata - + E 5 @@ -448,7 +448,7 @@ quarter - + G @@ -485,7 +485,7 @@ - + A 4 @@ -496,7 +496,7 @@ up continue - + D 4 @@ -507,7 +507,7 @@ up end - + E 5 @@ -527,7 +527,7 @@ SnapPizz - + F 4 @@ -543,7 +543,7 @@ - + D 4 @@ -554,7 +554,7 @@ down continue - + C 5 @@ -1410,12 +1410,85 @@ - + 0.00 - -0.00 + 0.00 + + 94.25 + + + + + E + 4 + + 4 + 1 + quarter + up + + single + InMeasureClefs + + + + + F + 4 + + + + + B + 3 + + 4 + 1 + quarter + down + + + + G + 2 + + + + + G + 4 + + 4 + 1 + quarter + up + + + + F + 4 + + + + + C + 4 + + 4 + 1 + quarter + down + + + + + + + 0.00 + 0.00 94.25 @@ -1426,13 +1499,13 @@ 1 - + Slurs - + E 4 @@ -1449,7 +1522,7 @@ Slurs - + A 4 @@ -1459,7 +1532,7 @@ quarter up - + G 4 @@ -1472,7 +1545,7 @@ - + D 5 @@ -1483,8 +1556,8 @@ down - - + + C 5 @@ -1494,7 +1567,7 @@ quarter down - + A 4 @@ -1504,7 +1577,7 @@ quarter up - + F 4 @@ -1514,7 +1587,7 @@ quarter up - + B 3 @@ -1528,8 +1601,8 @@ - - + + G 4 @@ -1539,7 +1612,7 @@ quarter up - + D 5 @@ -1552,7 +1625,7 @@ - + B 4 @@ -1565,7 +1638,7 @@ - + F 4 @@ -1576,8 +1649,8 @@ up - - + + G 4 @@ -1587,7 +1660,7 @@ quarter up - + C 5 @@ -1597,7 +1670,7 @@ quarter down - + F 4 @@ -1610,7 +1683,7 @@ - + C 5 @@ -1621,17 +1694,17 @@ down - + 0.00 - 0.00 + -0.00 94.25 - + C 4 @@ -1641,7 +1714,7 @@ quarter up - + G 4 @@ -1651,7 +1724,7 @@ quarter up - + B 3 @@ -1661,7 +1734,7 @@ quarter up - + C @@ -1672,7 +1745,7 @@ quarter up - + C 4 @@ -1685,7 +1758,7 @@ - + G @@ -1697,8 +1770,8 @@ up - - + + A 4 @@ -1711,7 +1784,7 @@ - + C 4 @@ -1721,7 +1794,7 @@ quarter up - + G @@ -1732,7 +1805,7 @@ quarter up - + C 5 @@ -1742,7 +1815,7 @@ quarter down - + G 4 @@ -1753,8 +1826,8 @@ up - - + + C 5 @@ -1764,7 +1837,7 @@ quarter down - + F 4 @@ -1777,7 +1850,7 @@ - + A 4 @@ -1787,7 +1860,7 @@ quarter up - + G 4 @@ -1798,8 +1871,8 @@ up - - + + B 4 @@ -1812,7 +1885,7 @@ - + B 4 @@ -1822,7 +1895,7 @@ quarter down - + A 4 @@ -1835,7 +1908,7 @@ - + A 4 @@ -1846,17 +1919,17 @@ up - + 0.00 - 0.00 + -0.00 94.25 - + B 4 @@ -1866,7 +1939,7 @@ quarter down - + E 4 @@ -1880,7 +1953,7 @@ - + B @@ -1891,7 +1964,7 @@ quarter down - + F @@ -1902,7 +1975,7 @@ quarter down - + C 4 @@ -1915,7 +1988,7 @@ - + F @@ -1926,7 +1999,7 @@ quarter up - + A @@ -1937,7 +2010,7 @@ quarter up - + D @@ -1948,7 +2021,7 @@ quarter up - + G 4 @@ -1959,8 +2032,8 @@ up - - + + A 4 @@ -1974,7 +2047,7 @@ - + G 4 @@ -1988,7 +2061,7 @@ - + C @@ -1999,7 +2072,7 @@ quarter down - + F @@ -2010,7 +2083,7 @@ quarter down - + C 5 @@ -2023,7 +2096,7 @@ - + E @@ -2034,7 +2107,7 @@ quarter down - + A @@ -2045,7 +2118,7 @@ quarter down - + A 4 @@ -2059,7 +2132,7 @@ - + D @@ -2071,8 +2144,8 @@ down - - + + E 4 @@ -2082,7 +2155,7 @@ quarter up - + A 4 @@ -2095,7 +2168,7 @@ - + A 4 @@ -2105,7 +2178,7 @@ quarter up - + G 4 @@ -2115,7 +2188,7 @@ quarter down - + D @@ -2127,8 +2200,8 @@ down - - + + B 4 @@ -2141,7 +2214,7 @@ - + G 4 @@ -2154,7 +2227,7 @@ - + C 5 @@ -2164,7 +2237,7 @@ quarter down - + F 4 @@ -2175,14 +2248,14 @@ up - - + + 0.00 - 626.14 + 624.99 - 94.25 + 70.00 @@ -2191,21 +2264,21 @@ 1 - + 16 1 - + 16 1 - + 16 From 3ab11baec60e1c561e52d4e0ee12255fe1c444e0 Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Tue, 31 Jul 2018 13:50:11 +0200 Subject: [PATCH 10/15] attempt to fix canvas image having a transparent background when saving (should be white). setting backgroundFillStyle doesn't solve the problem for some reason. attempt at #312 --- external/vexflow/vexflow.d.ts | 17 ++++++++++++++++- src/MusicalScore/Graphical/DrawingEnums.ts | 4 +++- .../Graphical/VexFlow/CanvasVexFlowBackend.ts | 6 ++++++ .../Graphical/VexFlow/SvgVexFlowBackend.ts | 2 +- 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/external/vexflow/vexflow.d.ts b/external/vexflow/vexflow.d.ts index b14e8b661..8f0c8a222 100644 --- a/external/vexflow/vexflow.d.ts +++ b/external/vexflow/vexflow.d.ts @@ -320,13 +320,28 @@ declare namespace Vex { } export class CanvasContext extends RenderContext { - public vexFlowCanvasContext: CanvasRenderingContext2D; + public vexFlowCanvasContext: any; + public background_fillStyle: { fill: string }; + public setBackgroundFillStyle(style: string); + } + + export class CanvasRenderingContext2D { + public setBackgroundFillStyle(style: string): void; + public canvas: HTMLElement; + public fillStyle: Object; + public font: Object; + public globalAlpha: Object; + public globalCompositeOperation: Object; + public imageSmoothingEnabled: boolean; + public lineCap: Object; + public lineDashOffset: Object; } export class SVGContext extends RenderContext { public svg: SVGElement; public attributes: any; public state: any; + public setBackgroundFillStyle(style: string): void; } export class StaveConnector { diff --git a/src/MusicalScore/Graphical/DrawingEnums.ts b/src/MusicalScore/Graphical/DrawingEnums.ts index 9ff1d0b91..e56033bab 100644 --- a/src/MusicalScore/Graphical/DrawingEnums.ts +++ b/src/MusicalScore/Graphical/DrawingEnums.ts @@ -36,7 +36,8 @@ export enum OutlineAndFillStyleEnum { Comment7, Comment8, Comment9, - Comment10 + Comment10, + BackgroundWhite, } // tslint:disable-next-line:max-line-length A linebreak would be more confusing here @@ -74,6 +75,7 @@ OUTLINE_AND_FILL_STYLE_DICT.setValue(OutlineAndFillStyleEnum.Comment7, "Blanched OUTLINE_AND_FILL_STYLE_DICT.setValue(OutlineAndFillStyleEnum.Comment8, "CornflowerBlue"); OUTLINE_AND_FILL_STYLE_DICT.setValue(OutlineAndFillStyleEnum.Comment9, "Cornsilk"); OUTLINE_AND_FILL_STYLE_DICT.setValue(OutlineAndFillStyleEnum.Comment10, "DarkGrey"); +OUTLINE_AND_FILL_STYLE_DICT.setValue(OutlineAndFillStyleEnum.BackgroundWhite, "White"); export enum StyleSets { MarkedArea, diff --git a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts index edbb4e91b..5c80f2852 100644 --- a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts @@ -22,7 +22,10 @@ export class CanvasVexFlowBackend extends VexFlowBackend { container.appendChild(this.inner); this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); + this.ctx.setBackgroundFillStyle("#eed"); this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext; + (this.canvasRenderingCtx as any).setBackgroundFillStyle("#eed"); + // ((this.ctx as any).background_attributes as any)['stroke-width'] = 1; } /** @@ -36,7 +39,9 @@ export class CanvasVexFlowBackend extends VexFlowBackend { (this.canvas as any).height = height; this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); + this.ctx.setBackgroundFillStyle("#eed"); this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext; + (this.canvasRenderingCtx as any).setBackgroundFillStyle("#eed"); } public getContext(): Vex.Flow.CanvasContext { @@ -44,6 +49,7 @@ export class CanvasVexFlowBackend extends VexFlowBackend { } public clear(): void { + this.ctx.setBackgroundFillStyle("#eed"); (this.ctx).clearRect(0, 0, (this.canvas).width, (this.canvas).height); } diff --git a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts index 8a920a2a4..27caa1402 100644 --- a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts @@ -21,7 +21,7 @@ export class SvgVexFlowBackend extends VexFlowBackend { container.appendChild(this.inner); this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); - + this.ctx.setBackgroundFillStyle("#eed"); } public getContext(): Vex.Flow.SVGContext { From 73cdb2b25fe9744abf38ff002cae18c9d47ff61a Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Thu, 2 Aug 2018 16:33:36 +0200 Subject: [PATCH 11/15] experimental code for background color. works for SVG, not for Canvas. probably bug in vexflow. --- demo/index.html | 4 ++-- external/vexflow/vexflow.d.ts | 6 ++++-- .../Graphical/VexFlow/CanvasVexFlowBackend.ts | 19 +++++++++++++------ .../Graphical/VexFlow/SvgVexFlowBackend.ts | 6 ++++-- .../Graphical/VexFlow/VexFlowBackend.ts | 2 +- .../VexFlow/VexFlowMusicSheetDrawer.ts | 4 ++-- .../OpenSheetMusicDisplay.ts | 8 +++++++- 7 files changed, 33 insertions(+), 16 deletions(-) diff --git a/demo/index.html b/demo/index.html index 1f4e0bee2..96090fba1 100644 --- a/demo/index.html +++ b/demo/index.html @@ -25,9 +25,9 @@

Select a sample:

Render backend:

- > +
diff --git a/external/vexflow/vexflow.d.ts b/external/vexflow/vexflow.d.ts index 8f0c8a222..0b4612300 100644 --- a/external/vexflow/vexflow.d.ts +++ b/external/vexflow/vexflow.d.ts @@ -322,10 +322,12 @@ declare namespace Vex { export class CanvasContext extends RenderContext { public vexFlowCanvasContext: any; public background_fillStyle: { fill: string }; - public setBackgroundFillStyle(style: string); + public setBackgroundFillStyle(style: string): void; + public clearRect(x: number, y: number, width: number, height: number): void; } - export class CanvasRenderingContext2D { + export class CanvasRenderingContext2D { + public clearRect(x: number, y: number, width: number, height: number): void; public setBackgroundFillStyle(style: string): void; public canvas: HTMLElement; public fillStyle: Object; diff --git a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts index 5c80f2852..2cef99d55 100644 --- a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts @@ -22,9 +22,10 @@ export class CanvasVexFlowBackend extends VexFlowBackend { container.appendChild(this.inner); this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); - this.ctx.setBackgroundFillStyle("#eed"); + // (this.ctx as any).setBackgroundFillStyle("#eed"); this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext; - (this.canvasRenderingCtx as any).setBackgroundFillStyle("#eed"); + this.ctx.setBackgroundFillStyle("green"); + (this.canvasRenderingCtx as any).setBackgroundFillStyle("red"); // ((this.ctx as any).background_attributes as any)['stroke-width'] = 1; } @@ -39,7 +40,7 @@ export class CanvasVexFlowBackend extends VexFlowBackend { (this.canvas as any).height = height; this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); - this.ctx.setBackgroundFillStyle("#eed"); + this.ctx.setBackgroundFillStyle("green"); this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext; (this.canvasRenderingCtx as any).setBackgroundFillStyle("#eed"); } @@ -48,9 +49,15 @@ export class CanvasVexFlowBackend extends VexFlowBackend { return this.ctx; } - public clear(): void { - this.ctx.setBackgroundFillStyle("#eed"); - (this.ctx).clearRect(0, 0, (this.canvas).width, (this.canvas).height); + public clear(x: number, y: number, width: number, height: number): void { + if (width !== undefined) { + this.ctx.setBackgroundFillStyle("green"); + (this.canvasRenderingCtx as any).setBackgroundFillStyle("red"); + + (this.canvasRenderingCtx as any).clearRect(x, y, width, height); + (this.ctx as any).clearRect(x, y, width, height); + // (this.canvasRenderingCtx as any).clear(); + } } public scale(k: number): void { diff --git a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts index 27caa1402..c4405048e 100644 --- a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts @@ -21,14 +21,15 @@ export class SvgVexFlowBackend extends VexFlowBackend { container.appendChild(this.inner); this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType()); this.ctx = this.renderer.getContext(); - this.ctx.setBackgroundFillStyle("#eed"); + this.ctx.setBackgroundFillStyle("brown"); + // (this.ctx as any).background_fillStyle = "green"; } public getContext(): Vex.Flow.SVGContext { return this.ctx; } - public clear(): void { + public clear(x: number, y: number, width: number, height: number): void { const { svg } = this.ctx; if (!svg) { return; @@ -38,6 +39,7 @@ export class SvgVexFlowBackend extends VexFlowBackend { while (svg.lastChild) { svg.removeChild(svg.lastChild); } + (this.ctx as any).clearRect(x, y, width, height); } public scale(k: number): void { diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts index 44a6c48c9..c6a6ebd9f 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts @@ -39,7 +39,7 @@ export abstract class VexFlowBackend { this.renderer.resize(x, y); } - public abstract clear(): void; + public abstract clear(x: number, y: number, width: number, height: number): void; public abstract translate(x: number, y: number): void; public abstract renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string, diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts index 676bfe3e8..7b99c17c3 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts @@ -33,8 +33,8 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer { this.backend = backend; } - public clear(): void { - this.backend.clear(); + public clear(x: number, y: number, width: number, height: number): void { + this.backend.clear(x, y, width, height); } /** diff --git a/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts b/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts index 2610e320f..18e7b8199 100644 --- a/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts +++ b/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts @@ -158,11 +158,17 @@ export class OpenSheetMusicDisplay { this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(7, 4), OutlineAndFillStyleEnum.PlaybackCursor));*/ // Update Sheet Page const height: number = this.graphic.MusicPages[0].PositionAndShape.BorderBottom * 10.0 * this.zoom; - this.drawer.clear(); + // this.drawer.clear(); this.drawer.resize(width, height); this.drawer.scale(this.zoom); + + (this.drawer as any).clear(0, 0, width, height); + // Finally, draw this.drawer.drawSheet(this.graphic); + + // (this.drawer as any).clear(0, 0, width, height); // creates transparent rectangle + // Update the cursor position this.cursor.update(); } From b1d1deeca3b4071df3d863b867c463b88dee0040 Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 3 Aug 2018 10:46:51 +0200 Subject: [PATCH 12/15] fix(canvasBackground): draw white background rectangle --- package.json | 2 +- .../Graphical/VexFlow/CanvasVexFlowBackend.ts | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index f7f143cb6..c0f069b71 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "loglevel": "^1.5.0", "shortid": "^2.2.6", "typescript-collections": "^1.1.2", - "vexflow": "^1.2.84" + "vexflow": "^1.2.85" }, "devDependencies": { "@types/chai": "^4.0.3", diff --git a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts index 2cef99d55..2a9c0513c 100644 --- a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts @@ -51,12 +51,9 @@ export class CanvasVexFlowBackend extends VexFlowBackend { public clear(x: number, y: number, width: number, height: number): void { if (width !== undefined) { - this.ctx.setBackgroundFillStyle("green"); - (this.canvasRenderingCtx as any).setBackgroundFillStyle("red"); - - (this.canvasRenderingCtx as any).clearRect(x, y, width, height); - (this.ctx as any).clearRect(x, y, width, height); - // (this.canvasRenderingCtx as any).clear(); + (this.canvasRenderingCtx as any).setFillStyle("white"); + (this.canvasRenderingCtx as any).fillRect(x, y, width, height); + (this.canvasRenderingCtx as any).setFillStyle("black"); } } From 9b5e60226aa8c522b55170775d54ce7b66f038cd Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 3 Aug 2018 14:00:44 +0200 Subject: [PATCH 13/15] add ability to set background color, also to transparent --- .../Graphical/VexFlow/CanvasVexFlowBackend.ts | 9 ++++++++- .../Graphical/VexFlow/SvgVexFlowBackend.ts | 10 +++++++++- src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts | 8 ++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts index 9f53b6711..19ebbb9c0 100644 --- a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts @@ -50,7 +50,7 @@ export class CanvasVexFlowBackend extends VexFlowBackend { } public clear(x: number = -1, y: number = -1, width: number = -1, height: number = -1): void { - if (x !== -1) { + if (x !== -1 && this.backgroundFillStyle !== "transparent") { const renderCtx: any = this.canvasRenderingCtx; // fill canvas with background color renderCtx.setFillStyle(this.backgroundFillStyle); @@ -63,6 +63,13 @@ export class CanvasVexFlowBackend extends VexFlowBackend { } } + public getBackgroundColor(): string { + return this.backgroundFillStyle; + } + public setBackgroundColor(colorOrStyle: string): void { + this.backgroundFillStyle = colorOrStyle; + } + public scale(k: number): void { this.ctx.scale(k, k); } diff --git a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts index 92520911d..d07bc1c66 100644 --- a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts @@ -41,11 +41,19 @@ export class SvgVexFlowBackend extends VexFlowBackend { svg.removeChild(svg.lastChild); } - if (x !== -1) { + if (x !== -1 && this.backgroundFillStyle !== "transparent") { (this.ctx as any).clearRect(x, y, width, height); // fill canvas with background color } } + public getBackgroundColor(): string { + return this.backgroundFillStyle; + } + + public setBackgroundColor(colorOrStyle: string): void { + this.backgroundFillStyle = colorOrStyle; + } + public scale(k: number): void { this.ctx.scale(k, k); } diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts index c6a6ebd9f..e480fb288 100644 --- a/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts @@ -40,6 +40,14 @@ export abstract class VexFlowBackend { } public abstract clear(x: number, y: number, width: number, height: number): void; + public abstract getBackgroundColor(): string; + + /** sets background color. + * does not fill the background immediately, need rerender for that. + * setting color to "transparent" will skip drawing a background in clear(). + * @param colorOrStyle color name (e.g. "white") or Vexflow style ("#FFF") + */ + public abstract setBackgroundColor(colorOrStyle: string): void; public abstract translate(x: number, y: number): void; public abstract renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string, From f2107c1ee682c41121d7bfff2bf7f186c15eb696 Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 3 Aug 2018 14:40:04 +0200 Subject: [PATCH 14/15] try to fix cursor not showing --- .../Graphical/VexFlow/SvgVexFlowBackend.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts index d07bc1c66..0b96764bc 100644 --- a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts @@ -41,8 +41,15 @@ export class SvgVexFlowBackend extends VexFlowBackend { svg.removeChild(svg.lastChild); } - if (x !== -1 && this.backgroundFillStyle !== "transparent") { - (this.ctx as any).clearRect(x, y, width, height); // fill canvas with background color + if (x !== -1) { + if (this.backgroundFillStyle === "transparent") { + (this.ctx as any).clearRect(x, y, width, height); + // should in theory fill with transparency + // currently fills with bgcolor in vexflow + } else { + const backgroundRectangle: RectangleF2D = new RectangleF2D(x, y, width, height); + this.renderRectangleByStyle(backgroundRectangle, this.backgroundFillStyle, 1); + } } } @@ -52,6 +59,7 @@ export class SvgVexFlowBackend extends VexFlowBackend { public setBackgroundColor(colorOrStyle: string): void { this.backgroundFillStyle = colorOrStyle; + this.ctx.setBackgroundFillStyle(colorOrStyle); } public scale(k: number): void { @@ -73,10 +81,16 @@ export class SvgVexFlowBackend extends VexFlowBackend { this.ctx.restore(); } public renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number = 1): void { + const style: string = VexFlowConverter.style(styleId); + this.renderRectangleByStyle(rectangle, style, alpha); + } + private renderRectangleByStyle(rectangle: RectangleF2D, style: string, alpha: number = 1): void { this.ctx.save(); - this.ctx.attributes.fill = VexFlowConverter.style(styleId); + this.ctx.attributes.fill = style; this.ctx.attributes["fill-opacity"] = alpha; + // this.ctx.attributes["stroke-width"] = 0; this.ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height); + // (this.ctx).rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height, this.ctx.attributes); this.ctx.restore(); this.ctx.attributes["fill-opacity"] = 1; } From ada473e67eb672a47580263cbd00550ecd810e9a Mon Sep 17 00:00:00 2001 From: sschmidTU Date: Fri, 3 Aug 2018 16:54:24 +0200 Subject: [PATCH 15/15] fix background color with cursor, but cursor is less transparent (on z=0 layer) --- external/vexflow/vexflow.d.ts | 1 + .../Graphical/VexFlow/CanvasVexFlowBackend.ts | 24 +++++++++++-------- .../Graphical/VexFlow/SvgVexFlowBackend.ts | 12 ++++++++-- src/OpenSheetMusicDisplay/Cursor.ts | 4 ++-- .../OpenSheetMusicDisplay.ts | 2 +- 5 files changed, 28 insertions(+), 15 deletions(-) diff --git a/external/vexflow/vexflow.d.ts b/external/vexflow/vexflow.d.ts index 52bae6015..655103af6 100644 --- a/external/vexflow/vexflow.d.ts +++ b/external/vexflow/vexflow.d.ts @@ -333,6 +333,7 @@ declare namespace Vex { public attributes: any; public state: any; public setBackgroundFillStyle(style: string): void; + public background_attributes: any; public clear(x: number, y: number, width: number, height: number): void; } diff --git a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts index 19ebbb9c0..1a6d06e31 100644 --- a/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts @@ -50,16 +50,20 @@ export class CanvasVexFlowBackend extends VexFlowBackend { } public clear(x: number = -1, y: number = -1, width: number = -1, height: number = -1): void { - if (x !== -1 && this.backgroundFillStyle !== "transparent") { - const renderCtx: any = this.canvasRenderingCtx; - // fill canvas with background color - renderCtx.setFillStyle(this.backgroundFillStyle); - renderCtx.fillRect(x, y, width, height); - renderCtx.setFillStyle("black"); // there's no getFillStyle() right now. - } else { - // (this.ctx).clearRect(0, 0, (this.canvas).width, (this.canvas).height); - // TODO this currently doesn't do anything in Vexflow. - // Also, canvas width and height are often very small, smaller than sheet.pageWidth + if (x !== -1) { + if (this.backgroundFillStyle === "transparent") { + // (this.ctx).clearRect(0, 0, (this.canvas).width, (this.canvas).height); + // TODO clearRect currently doesn't do anything in Vexflow for Canvas. + // Also, canvas width and height are often very small, smaller than sheet.pageWidth + } else { + // fill canvas with background color + // TODO currently this prevents the cursor from showing if it's on z=-1 + const renderCtx: any = this.canvasRenderingCtx; + renderCtx.save(); + renderCtx.setFillStyle(this.backgroundFillStyle); + renderCtx.fillRect(x, y, width, height); + renderCtx.restore(); // there's no getFillStyle() right now. + } } } diff --git a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts index 0b96764bc..ce8e1c6ab 100644 --- a/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts +++ b/src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts @@ -47,8 +47,16 @@ export class SvgVexFlowBackend extends VexFlowBackend { // should in theory fill with transparency // currently fills with bgcolor in vexflow } else { - const backgroundRectangle: RectangleF2D = new RectangleF2D(x, y, width, height); - this.renderRectangleByStyle(backgroundRectangle, this.backgroundFillStyle, 1); + // filling with background color currently prevents cursor showing if on z=-1 + // note that rect works like canvascontext.fillRect right now + (this.ctx as any).rect(x, y, width, height, this.ctx.background_attributes); + + // could also use clearRect for now + // (this.ctx as any).clearRect(x, y, width, height); + + // this alternative prevents the cursor from showing (unless alpha<1) + // const backgroundRectangle: RectangleF2D = new RectangleF2D(x, y, width, height); + // this.renderRectangleByStyle(backgroundRectangle, this.backgroundFillStyle, 1); } } } diff --git a/src/OpenSheetMusicDisplay/Cursor.ts b/src/OpenSheetMusicDisplay/Cursor.ts index a4f4d0d5c..4ac093c49 100644 --- a/src/OpenSheetMusicDisplay/Cursor.ts +++ b/src/OpenSheetMusicDisplay/Cursor.ts @@ -15,7 +15,7 @@ export class Cursor { this.openSheetMusicDisplay = openSheetMusicDisplay; const curs: HTMLElement = document.createElement("img"); curs.style.position = "absolute"; - curs.style.zIndex = "-1"; + curs.style.zIndex = "0"; this.cursorElement = curs; this.container.appendChild(curs); } @@ -144,7 +144,7 @@ export class Cursor { c.width = this.cursorElement.width; c.height = 1; const ctx: CanvasRenderingContext2D = c.getContext("2d"); - ctx.globalAlpha = 0.5; + ctx.globalAlpha = 0.3; // Generate the gradient const gradient: CanvasGradient = ctx.createLinearGradient(0, 0, this.cursorElement.width, 0); gradient.addColorStop(0, "white"); // it was: "transparent" diff --git a/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts b/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts index 0593e55a9..325e84bb5 100644 --- a/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts +++ b/src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts @@ -158,10 +158,10 @@ export class OpenSheetMusicDisplay { this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(7, 4), OutlineAndFillStyleEnum.PlaybackCursor));*/ // Update Sheet Page const height: number = this.graphic.MusicPages[0].PositionAndShape.BorderBottom * 10.0 * this.zoom; + this.drawer.clear(); this.drawer.resize(width, height); this.drawer.scale(this.zoom); - // clear and fill with background color this.drawer.clear(0, 0, width, height);