[IMPROVEMENT] Score rendering

Classes/Controller/PageViewController.php

@@ -185,6 +185,7 @@ protected function getMeasures(int $page): array
                     $i = 0;
                     foreach ($musicalStruct as $measureData) {
                         if (isset($measureData['files'])
+                            && isset($measureData['files']['DEFAULT'])
                             && $defaultFileId == $measureData['files']['DEFAULT']['fileid']) {
                             $measureCoordsFromCurrentSite[$measureData['files']['SCORE']['begin']] = $measureData['files']['DEFAULT']['coords'];
                             $measureCounterToMeasureId[$i] = $measureData['files']['SCORE']['begin'];

Configuration/TypoScript/setup.typoscript

@@ -40,7 +40,7 @@ page {
     kitodo-validationForm = EXT:dlf/Resources/Public/JavaScript/ValidationForm/ValidationForm.js
 
     # Verovio plugin
-    kitodo-verovio = EXT:dlf/Resources/Public/JavaScript/Verovio/verovio-toolkit.js
+    kitodo-verovio = EXT:dlf/Resources/Public/JavaScript/Verovio/verovio-toolkit-wasm.js
     kitodo-svgtopdfkit = EXT:dlf/Resources/Public/JavaScript/Verovio/svgtopdfkit.js
     kitodo-saveas = EXT:dlf/Resources/Public/JavaScript/Verovio/saveas.js
     kitodo-pdf= EXT:dlf/Resources/Public/JavaScript/Verovio/pdfkit.js

Resources/Public/JavaScript/PageView/PageView.js

@@ -339,7 +339,7 @@ dlfViewer.prototype.countPages = function () {
  * Methods inits and binds the custom controls to the dlfViewer. Right now that are the
  * fulltext, score, and the image manipulation control
  */
-dlfViewer.prototype.addCustomControls = function() {
+dlfViewer.prototype.addCustomControls = function(image) {
     var fulltextControl = undefined,
         fulltextDownloadControl = undefined,
         annotationControl = undefined,
@@ -483,7 +483,7 @@ dlfViewer.prototype.addCustomControls = function() {
         var context = this;
         const scoreControl = new dlfViewerScoreControl(this, this.pagebeginning, this.imageUrls.length);
         this.scoresLoaded_.then(function (scoreData) {
-            scoreControl.loadScoreData(scoreData, tk);
+            scoreControl.loadScoreData(image, scoreData, context.tk);
 
             // Add synchronisation control
             context.syncControl = new dlfViewerSyncControl(context);
@@ -846,10 +846,10 @@ dlfViewer.prototype.init = function(controlNames) {
             // Initiate loading fulltexts
             this.initLoadFulltexts();
 
-            if (this.score !== '') {
-                // Initiate loading scores
-                this.initLoadScores();
-            }
+          if (this.score !== '') {
+            // Initiate loading scores
+            this.initLoadScores(this.images[0]);
+          }
 
             var controls = controlNames.length > 0 || controlNames[0] === ""
                 ? this.createControls_(controlNames, layers)
@@ -896,7 +896,8 @@ dlfViewer.prototype.init = function(controlNames) {
                 }
             }
 
-            this.addCustomControls();
+
+          this.addCustomControls(this.images[0]);
 
             // highlight word in case a highlight field is registered
             this.displayHighlightWord();
@@ -972,10 +973,10 @@ dlfViewer.prototype.initLayer = function(imageSourceObjs) {
  *
  * @private
  */
-dlfViewer.prototype.initLoadScores = function () {
-  this.config = dlfScoreUtil.fetchScoreDataFromServer(this.score, this.pagebeginning);
-  this.scoresLoaded_ = this.config[0];
-  this.tk = this.config[1];
+dlfViewer.prototype.initLoadScores = function (image) {
+  this.config = dlfScoreUtil.fetchScoreDataFromServer(image, this.score, this.pagebeginning);
+  this.scoresLoaded_ = this.config.promise;
+  this.tk = this.config.toolkit;
 };
 
 /**

Resources/Public/JavaScript/PageView/ScoreControl.js

@@ -39,18 +39,24 @@
 let dlfScoreUtil;
 dlfScoreUtil = dlfScoreUtil || {};
 
-
-
-dlfScoreUtil.fetchScoreDataFromServer = function (url, pagebeginning) {
+dlfScoreUtil.fetchScoreDataFromServer = function (image, scoreUrl, pagebeginning) {
   const result = new $.Deferred();
-  tk = new verovio.toolkit();
+  const tk = new verovio.toolkit();
+  options = {
+    pageHeight: image.height,
+    pageWidth: image.width,
+    adjustPageHeight: true,
+    adjustPageWidth: true,
+    scale: image.width > image.height ? 40 : 80
+  };
+  tk.setOptions(options);
 
-  if (url === '') {
+  if (scoreUrl === '') {
     result.reject();
     return result;
   }
 
-  $.ajax({url}).done(function (data, status, jqXHR) {
+  $.ajax({url: scoreUrl}).done(function (data, status, jqXHR) {
     try {
       tk.renderData(jqXHR.responseText, verovioSettings);
       const pageToShow = tk.getPageWithElement(pagebeginning);
@@ -99,14 +105,13 @@
         result.resolve(score);
       }
 
-
     } catch (e) {
       console.error(e); // eslint-disable-line no-console
       result.reject();
     }
   });
 
-  return [result, tk];
+  return {promise: result, toolkit: tk};
 };
 
 
@@ -163,14 +168,13 @@
     return el;
   }
 
-  this.showMeasures = function() {
+  this.drawMeasureBoxes = function() {
     //
     // Draw boxes for each measure
     //
     var dlfViewer = this.dlfViewer;
     var measureCoords = dlfViewer.measureCoords;
     if (!this.measuresLoaded) {
-      setTimeout(function() {
         $.each(measureCoords, function (key, value) {
 
           var bbox = $('#tx-dlf-score-' + dlfViewer.counter + ' #' + key)[0].getBBox();
@@ -181,7 +185,7 @@
             width: bbox.width,
             height: bbox.height,
             stroke: 'none',
-            'stroke-width': 20,
+            'stroke-width': 0,
             fill: 'red',
             'fill-opacity': '0'
           });
@@ -257,23 +261,23 @@
           }
         });
         this.measuresLoaded = true;
-      }, 2000);
     }
   };
 
-
-
   this.changeActiveBehaviour();
 };
 
 /**
  * @param {ScoreFeature} scoreData
  */
-dlfViewerScoreControl.prototype.loadScoreData = function (scoreData, tk) {
+dlfViewerScoreControl.prototype.loadScoreData = function (image, scoreData, tk) {
   var target = document.getElementById('tx-dlf-score-' + this.dlfViewer.counter);
   // Const target = document.getElementById('tx-dlf-score');
 
-  var extent = [-2100, -2970, 2100, 2970];
+  const width = image.width;
+  const height = image.height;
+
+  var extent = [-width, -height, width, height];
   // [offsetWidth, -imageSourceObj.height, imageSourceObj.width + offsetWidth, 0]
 
   var proj = new ol.proj.Projection({
@@ -308,42 +312,43 @@
   var svgContainer = document.createElement('div');
   svgContainer.innerHTML = scoreData;
 
-  const width = 2100;
-  const height = 2970;
+
   svgContainer.style.width = width + 'px';
   svgContainer.style.height = height + 'px';
   svgContainer.style.transformOrigin = 'top left';
   svgContainer.className = 'svg-layer';
 
-  map.addLayer(
-    new ol.layer.Layer({
-      render: function (frameState) {
-
-        const svgResolution = 1;
-        const scale = svgResolution / frameState.viewState.resolution;
-        const center = frameState.viewState.center;
-        const size = frameState.size;
-        const cssTransform = ol.transform.composeCssTransform(
-          size[0] / 2,
-          size[1] / 2,
-          scale,
-          scale,
-          frameState.viewState.rotation,
-          -center[0] / svgResolution - width / 2,
-          center[1] / svgResolution - height / 2
-        );
-
-        svgContainer.style.transform = cssTransform;
-        svgContainer.style.opacity = this.getOpacity();
-        return svgContainer;
-      },
-    })
-  );
+  const svgLayer = new ol.layer.Layer({
+    render: function (frameState) {
+
+      const svgResolution = 1;
+      const scale = svgResolution / frameState.viewState.resolution;
+      const center = frameState.viewState.center;
+      const size = frameState.size;
+      const cssTransform = ol.transform.composeCssTransform(
+        size[0] / 2,
+        size[1] / 2,
+        scale,
+        scale,
+        frameState.viewState.rotation,
+        -center[0] / svgResolution - width / 2,
+        center[1] / svgResolution - height / 2
+      );
+
+      svgContainer.style.transform = cssTransform;
+      svgContainer.style.opacity = this.getOpacity();
+      return svgContainer;
+    },
+  });
+  map.addLayer(svgLayer);
+
+  map.once('rendercomplete', () => {
+    this.drawMeasureBoxes();
+  });
 
   $("#tx-dlf-score-download").click(function () {
     if (typeof pdfBlob !== 'undefined') {
       saveAs(pdfBlob, getMeiTitle(tk));
-
       return;
     }
 
@@ -355,7 +360,7 @@
       pdfSize = [2500, 3530];
     }
 
-    var pdfOrientation = $("#pdfOrientation").val();
+    var pdfOrientation = width > height ? 'landscape' : '';
     var pdfLandscape = pdfOrientation === 'landscape';
     var pdfHeight = pdfLandscape ? pdfSize[0] : pdfSize[1];
     var pdfWidth = pdfLandscape ? pdfSize[1] : pdfSize[0];
@@ -405,11 +410,12 @@
       adjustPageHeight: false,
       adjustPageWidth: false,
       breaks: "auto",
+      mdivAll: true,
       mmOutput: true,
       footer: "auto",
       pageHeight: pdfHeight,
       pageWidth: pdfWidth,
-      scale: 100
+      scale: pdfOrientation === 'landscape' ? 80 : 100
     };
 
     const pdf_tk = new verovio.toolkit();
@@ -578,7 +584,6 @@
   if (this.dlfViewer.measureLayer) {
     this.dlfViewer.measureLayer.setVisible(true);
   }
-  this.showMeasures();
 };
 
 /**