fix(Layout): update Vexflow to 1.2.91, fixing time signature yPos. adapt vexflow import. #706

Vexflow changed the "main" property in the npm package,
requiring "esModuleInterop": true in tsconfig.json,
and a different import syntax for vexflow.

unfortunately, this configuration breaks OSMD console output piping to the generateImages script.
i couldn't find a way to show OSMD console.log (by loglevel log.info) in nodejs,
other than maybe inputting the whole script as HTML to jsdom, which would be ugly,
and may not support file system writing with fs.

package.json

@@ -64,10 +64,10 @@
     "es6-promise": "^4.2.5",
     "jspdf-yworks": "^2.1.1",
     "jszip": "^3.0.0",
-    "loglevel": "^1.5.0",
+    "loglevel": "^1.6.8",
     "svg2pdf.js": "^1.5.0",
     "typescript-collections": "^1.3.3",
-    "vexflow": "1.2.90"
+    "vexflow": "1.2.91"
   },
   "devDependencies": {
     "@types/chai": "^4.2.11",

src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 
 import {VexFlowBackend} from "./VexFlowBackend";
 import {FontStyles} from "../../../Common/Enums/FontStyles";

src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 
 import {VexFlowBackend} from "./VexFlowBackend";
 import {VexFlowConverter} from "./VexFlowConverter";

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import {ClefEnum} from "../../VoiceData/Instructions/ClefInstruction";
 import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";
 import {Pitch} from "../../../Common/DataObjects/Pitch";

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalNote.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import {GraphicalNote} from "../GraphicalNote";
 import {Note} from "../../VoiceData/Note";
 import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalSymbolFactory.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import {IGraphicalSymbolFactory} from "../../Interfaces/IGraphicalSymbolFactory";
 import {MusicSystem} from "../MusicSystem";
 import {VexFlowMusicSystem} from "./VexFlowMusicSystem";

src/MusicalScore/Graphical/VexFlow/VexFlowInstrumentBrace.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { VexFlowInstrumentBracket } from "./VexFlowInstrumentBracket";
 import { VexFlowStaffLine } from "./VexFlowStaffLine";
 

src/MusicalScore/Graphical/VexFlow/VexFlowInstrumentBracket.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { GraphicalObject } from "../GraphicalObject";
 import { VexFlowStaffLine } from "./VexFlowStaffLine";
 import { BoundingBox } from "../BoundingBox";

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -1,4 +1,7 @@
-import Vex = require("vexflow");
+// import Vex from "vexflow";
+// import * as Vex from "vexflow";
+// import {NoteSubGroup} from "vexflow";
+import Vex from "vexflow";
 import {GraphicalMeasure} from "../GraphicalMeasure";
 import {SourceMeasure} from "../../VoiceData/SourceMeasure";
 import {Staff} from "../../VoiceData/Staff";
@@ -35,6 +38,8 @@ import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 import {AutoBeamOptions} from "../../../OpenSheetMusicDisplay/OSMDOptions";
 import {NoteType, Arpeggio} from "../../VoiceData";
 
+// type StemmableNote = Vex.Flow.StemmableNote;
+
 export class VexFlowMeasure extends GraphicalMeasure {
     constructor(staff: Staff, sourceMeasure: SourceMeasure = undefined, staffLine: StaffLine = undefined) {
         super(staff, sourceMeasure, staffLine);

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -20,7 +20,7 @@ import { ArticulationEnum } from "../../VoiceData/VoiceEntry";
 import { Tuplet } from "../../VoiceData/Tuplet";
 import { VexFlowMeasure } from "./VexFlowMeasure";
 import { VexFlowTextMeasurer } from "./VexFlowTextMeasurer";
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import * as log from "loglevel";
 import { unitInPixels } from "./VexFlowMusicSheetDrawer";
 import { VexFlowGraphicalNote } from "./VexFlowGraphicalNote";

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { MusicSheetDrawer } from "../MusicSheetDrawer";
 import { RectangleF2D } from "../../../Common/DataObjects/RectangleF2D";
 import { VexFlowMeasure } from "./VexFlowMeasure";

src/MusicalScore/Graphical/VexFlow/VexFlowOctaveShift.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { GraphicalOctaveShift } from "../GraphicalOctaveShift";
 import { OctaveShift, OctaveEnum } from "../../VoiceData/Expressions/ContinuousExpressions/OctaveShift";
 import { BoundingBox } from "../BoundingBox";

src/MusicalScore/Graphical/VexFlow/VexFlowSlur.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { Slur } from "../../VoiceData/Expressions/ContinuousExpressions/Slur";
 
 export interface ICurveOptions {

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { GraphicalStaffEntry } from "../GraphicalStaffEntry";
 import { VexFlowMeasure } from "./VexFlowMeasure";
 import { SourceStaffEntry } from "../../VoiceData/SourceStaffEntry";

src/MusicalScore/Graphical/VexFlow/VexFlowTabMeasure.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { Staff } from "../../VoiceData/Staff";
 import { SourceMeasure } from "../../VoiceData/SourceMeasure";
 import { VexFlowMeasure } from "./VexFlowMeasure";

src/MusicalScore/Graphical/VexFlow/VexFlowVoiceEntry.ts

@@ -1,4 +1,4 @@
-import Vex = require("vexflow");
+import Vex from "vexflow";
 import { VoiceEntry } from "../../VoiceData/VoiceEntry";
 import { GraphicalVoiceEntry } from "../GraphicalVoiceEntry";
 import { GraphicalStaffEntry } from "../GraphicalStaffEntry";

test/Util/generateImages_browserless.js

@@ -60,17 +60,29 @@ async function init () {
     }
 
     // ---- hacks to fake Browser elements OSMD and Vexflow need, like window, document, and a canvas HTMLElement ----
-    const { JSDOM } = require('jsdom')
-    const dom = new JSDOM('<!DOCTYPE html></html>')
+    var jsdom = require('jsdom')
+    const dom = new jsdom.JSDOM('<!DOCTYPE html></html>')
     // eslint-disable-next-line no-global-assign
     window = dom.window
     // eslint-disable-next-line no-global-assign
     document = dom.window.document
 
+    // OSMD console output in nodejs broke after using "esModuleInterop": true in tsconfig to update Vexflow to 1.2.91.
+    // the virtualConsole could be used to get logs from OSMD, but then we need to pass our whole script in HTML to JSDOM.
+    // it would probably be cleaner to implement a more powerful logging system in OSMD you can hook into.
+    // var virtualConsole = new jsdom.VirtualConsole()
+    // virtualConsole.sendTo(console);
+    // var dom = global.document = new jsdom.JSDOM('', {
+    //     features: {
+    //         virtualConsole: virtualConsole
+    //     }
+    // })
+
     // eslint-disable-next-line no-global-assign
     global.window = dom.window
     // eslint-disable-next-line no-global-assign
     global.document = window.document
+    window.console = console // probably does nothing
     global.HTMLElement = window.HTMLElement
     global.HTMLAnchorElement = window.HTMLAnchorElement
     global.XMLHttpRequest = window.XMLHttpRequest
@@ -108,8 +120,8 @@ async function init () {
     div.setAttribute('width', width)
     div.setAttribute('height', height)
     div.setAttribute('offsetWidth', width)
-    debug('div.offsetWidth: ' + div.offsetWidth, DEBUG)
-    debug('div.height: ' + div.height, DEBUG)
+    // debug('div.offsetWidth: ' + div.offsetWidth, DEBUG) // 0 here, set correctly later
+    // debug('div.height: ' + div.height, DEBUG)
 
     // hack: set offsetWidth reliably
     Object.defineProperties(window.HTMLElement.prototype, {
@@ -128,10 +140,6 @@ async function init () {
     })
     debug('div.offsetWidth: ' + div.offsetWidth, DEBUG)
     debug('div.height: ' + div.height, DEBUG)
-    if (!DEBUG) {
-        // deactivate console logs (mostly)
-        console.log = (msg) => {}
-    }
     // ---- end browser hacks (hopefully) ----
 
     const OSMD = require(`${osmdBuildDir}/opensheetmusicdisplay.min.js`)
@@ -199,7 +207,7 @@ async function init () {
         osmdInstance.setLogLevel('info') // doesn't seem to work, log.debug still logs
     }
 
-    debug('generateImages', DEBUG)
+    debug('[OSMD.generateImages] starting loop over samples, saving images to ' + imageDir, DEBUG)
     for (let i = 0; i < samplesToProcess.length; i++) {
         var sampleFilename = samplesToProcess[i]
         debug('sampleFilename: ' + sampleFilename, DEBUG)

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2017",
+    "esModuleInterop": true,
     "module": "commonjs",
     "moduleResolution": "node",
     "noUnusedLocals": true,