Port Hufnagel font switching to production Verovio worker

.gitignore

@@ -13,3 +13,5 @@
 /cypress/downloads
 
 .idea
+
+scripts/gen-hufnagel-grouping/

assets/style.css

@@ -807,6 +807,23 @@ input[type='checkbox'].debug-mode-toggle:checked + label:before {
   width: 42px;
   height: 42px;
 }
+.glyph-icon {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  line-height: 0;
+  pointer-events: none;
+  width: 24px;
+}
+.glyph-icon svg {
+  display: block;
+  fill: currentColor;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  width: 100%;
+}
 .longel {
   width: 100px;
   height: 42px;

deployment/server/css/dashboard.css

@@ -617,7 +617,7 @@ input.filename-input, select.file-input, textarea.file-input {
 }
 
 .folio_list {
-  height: 80%;
+  height: 65%;
   width: 100%;
   overflow: scroll;
 }
@@ -647,6 +647,39 @@ input.filename-input, select.file-input, textarea.file-input {
   opacity: 0.4;
 }
 
+#notation_type_container {
+  height: 15%;
+  width: 100%;
+  border-top: 1px solid #dfdfdf;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* .file-container-title normally sizes to 10% of a much taller panel;
+   inside this short container that shrinks it below its own text height,
+   so it visually overlaps the radio row underneath. Override to auto. */
+#notation_type_container .file-container-title {
+  height: auto;
+  border-bottom: none;
+  margin-bottom: 4px;
+}
+
+.notation_type_options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.notation_type_option {
+  font-size: 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  margin: 0 6px;
+}
+
 #upload_button_container {
   float: right;
   height: 10%;

package.json

@@ -54,9 +54,10 @@
   },
   "dependencies": {
     "d3": "^5.11.0",
-    "diva.js": "github:DDMAL/diva.js#master",
+    "diva.js": "github:DDMAL/diva.js#5f530483f653db68af1cbb92bc8cc967b51763c3",
     "http-server": "^14.1.1",
     "jsonschema": "^1.2.4",
+    "jszip": "^3.10.1",
     "pouchdb": "^7.1.1",
     "vkbeautify": "^0.99.3"
   },
@@ -66,6 +67,7 @@
     "@types/elementtree": "^0.1.0",
     "@types/fs-extra": "^9.0.1",
     "@types/jest": "^26.0.8",
+    "@types/jszip": "^3.4.1",
     "@types/pouchdb": "^6.4.0",
     "@types/request": "^2.48.2",
     "@types/selenium-webdriver": "^4.0.2",

src/Dashboard/DashboardContent.ts

@@ -56,6 +56,20 @@ export const uploadAreaHTML = `<div id="document-upload-container">
         </div>
         <div class="folio_list" id="paired_list"></div>
 
+        <div id="notation_type_container">
+          <div class="file-container-title">Notation Type</div>
+          <div class="notation_type_options">
+            <label class="notation_type_option">
+              <input type="radio" name="upload_notation_type" value="square" checked>
+              Square
+            </label>
+            <label class="notation_type_option">
+              <input type="radio" name="upload_notation_type" value="hufnagel">
+              Hufnagel
+            </label>
+          </div>
+        </div>
+
         <div id="upload_button_container">
           <div class="action_button" id="upload_button">
             Upload

src/Dashboard/Storage.ts

@@ -26,24 +26,39 @@ export async function fetchUploads(): Promise<uploadsInfo> {
   }
 }
 
+// Sets <staffDef notationtype="neume.square"/"neume.hufnagel"> on the given
+// MEI text. This is the only place a freshly-uploaded/created MEI file gets
+// its notation type recorded - the Edit page's notation type dropdown does
+// not lock or otherwise depend on this; it can still be changed afterward.
+function setMeiNotationType(meiText: string, notationType: string): string {
+  const parser = new DOMParser();
+  const serializer = new XMLSerializer();
+  const meiDoc = parser.parseFromString(meiText, 'text/xml');
+  meiDoc.documentElement
+    .querySelector('staffDef')
+    ?.setAttribute('notationtype', `neume.${notationType}`);
+  return serializer.serializeToString(meiDoc);
+}
+
 export function createManifest(
   id: string,
   title: string,
   mei: File,
   bg: File,
+  notationType: string,
 ): Promise<string> {
   return new Promise(async (resolve) => {
     const manifest = JSON.parse(JSON.stringify(localManifest));
     manifest['@id'] = id;
     manifest['title'] = title;
     manifest['timestamp'] = new Date().toISOString();
 
-    const meiPromise = new Promise((resolve) => {
+    const meiTextPromise = new Promise<string>((resolve) => {
       const meiReader = new FileReader();
       meiReader.addEventListener('load', () => {
-        resolve(meiReader.result);
+        resolve(meiReader.result as string);
       });
-      meiReader.readAsDataURL(mei);
+      meiReader.readAsText(mei);
     });
 
     const bgPromise = new Promise((resolve) => {
@@ -54,9 +69,22 @@ export function createManifest(
       bgReader.readAsDataURL(bg);
     });
 
-    const meiUri = await meiPromise;
+    const meiText = await meiTextPromise;
+    const meiUri =
+      'data:application/mei+xml;base64,' +
+      window.btoa(setMeiNotationType(meiText, notationType));
     const bgUri = await bgPromise;
 
+    // Pre-seed this folio's LocalSettings entry (keyed by id, same format
+    // LocalSettings itself writes) so the Editing page's notation type
+    // dropdown reflects this choice on first open. The Editing page never
+    // reads @notationtype back out of the MEI to initialize the dropdown -
+    // it relies solely on this per-folio localStorage entry - and by the
+    // time it's loaded there, the MEI's real notationtype has already been
+    // stripped to a generic value for Verovio (see ConvertMei.ts), so it
+    // can't be recovered from the MEI at that point either.
+    window.localStorage.setItem(id, JSON.stringify({ notationType }));
+
     manifest['image'] = bgUri;
     manifest['mei_annotations'] = [
       {

src/Dashboard/UploadArea.ts

@@ -15,7 +15,12 @@ async function handleUploadUpdate(
   const spinner = document.querySelector('#uploading_spinner');
   spinner.classList.add('visible');
 
-  handleUploadAllDocuments(currentFolder)
+  const selectedNotationType: HTMLInputElement = document.querySelector(
+    'input[name="upload_notation_type"]:checked',
+  );
+  const notationType = selectedNotationType?.value ?? 'square';
+
+  handleUploadAllDocuments(currentFolder, notationType)
     .then((results) => {
       setTimeout(async () => {
         await updateDashboard();

src/Dashboard/UploadTools.ts

@@ -178,12 +178,13 @@ function createPairedFolio(
 
 export async function handleUploadAllDocuments(
   currentFolder: IFolder,
+  notationType: string,
 ): Promise<{ status: string; value?: string; reason?: any }[]> {
   const folioPromises = fm
     .getFolios()
     .map(async ([name, mei, image]: [string, File, File]) => {
       const id = uuidv4();
-      return await uploadFolio(id, name, mei, image, currentFolder);
+      return await uploadFolio(id, name, mei, image, currentFolder, notationType);
     });
 
   const manuscriptPromises = []; //fm.getManuscripts()
@@ -208,13 +209,14 @@ async function uploadFolio(
   mei: File,
   image: File,
   currentFolder: IFolder,
+  notationType: string,
 ): Promise<string | null> {
   const newName = fnConflictHandler(
     name,
     FileSystemTools.getAllNames(currentFolder),
   );
   return (
-    createManifest(id, newName, mei, image)
+    createManifest(id, newName, mei, image, notationType)
       .then((manifest) => {
         const manifestBlob = new Blob([JSON.stringify(manifest, null, 2)], {
           type: 'application/ld+json',

src/DisplayPanel/DisplayControls.ts

@@ -5,6 +5,7 @@ import ZoomHandler from '../SingleView/Zoom';
 import { GroupingType } from '../Types';
 import { getSettings, setSettings } from '../utils/LocalSettings';
 import * as d3 from 'd3';
+import NeonView from '../NeonView';
 
 let lastGlyphOpacity: number, lastImageOpacity: number, lastCircleSize: number;
 
@@ -491,6 +492,47 @@ function setBurgerControls(): void {
   });
 }
 
+/**
+ * Set click listeners for Notation Type dropdown (Square / Hufnagel).
+ * Currently only updates the label and logs to console; engine wiring is next.
+ */
+export function setNotationTypeControls(neonView: NeonView): void {
+  const dropdown = document.getElementById('notation-type-dropdown');
+  const label = document.getElementById('notation-type-label');
+
+  function applyNotationType(type: string): void {
+    label.textContent = `\xA0- ${type[0].toUpperCase() + type.slice(1)}`;
+    setSettings({ notationType: type });
+    neonView.setNotationType(type);
+    document.dispatchEvent(new CustomEvent('notationtypechange', { detail: { type } }));
+  }
+
+  function notationTypeClickaway(): void {
+    document.body.removeEventListener('click', notationTypeClickaway);
+    dropdown.classList.remove('is-active');
+  }
+
+  document.getElementById('notation-type-button').addEventListener('click', (evt) => {
+    evt.stopPropagation();
+    dropdown.classList.toggle('is-active');
+    if (dropdown.classList.contains('is-active')) {
+      document.body.addEventListener('click', notationTypeClickaway);
+    } else {
+      document.body.removeEventListener('click', notationTypeClickaway);
+    }
+  });
+
+  ['square', 'hufnagel'].forEach((type) => {
+    document.getElementById(`notation-type-${type}`).addEventListener('click', () => {
+      dropdown.classList.remove('is-active');
+      document.body.removeEventListener('click', notationTypeClickaway);
+      applyNotationType(type);
+    });
+  });
+
+  applyNotationType(getSettings().notationType ?? 'square');
+}
+
 /**
  * Set listener for "Display All" button in Display panel.
  */
@@ -575,6 +617,7 @@ export function loadHighlightSettings(): void {
 export function initDisplayControls(
   meiClassName: string,
   background: string,
+  neonView: NeonView,
 ): void {
   setGlyphOpacityControls(meiClassName);
   setBgOpacityControls(background);
@@ -583,6 +626,7 @@ export function initDisplayControls(
   setHighlightKeyControls();
   setDisplayAllListener();
   loadHighlightSettings();
+  setNotationTypeControls(neonView);
 
   const displayContents = document.getElementById('displayContents');
   const toggleDisplay = document.getElementById('toggleDisplay');

src/DisplayPanel/DisplayPanel.ts

@@ -2,6 +2,7 @@ import * as DisplayControls from './DisplayControls';
 import ZoomHandler from '../SingleView/Zoom';
 import { DisplayInterface, ViewInterface } from '../Interfaces';
 import { getSettings } from '../utils/LocalSettings';
+import NeonView from '../NeonView';
 
 /**
  * Return the HTML for the display panel.
@@ -135,7 +136,30 @@ function displayControlsPanel(handleZoom: ZoomHandler): string {
 
         </div>
       </div>
-
+
+      <div class="panel-content-subsection">
+        <div id="notation-type-options-title" class="panel-sub-title">Notation Type:</div>
+        <div class="dropdown" id="notation-type-dropdown">
+          <div class="dropdown-trigger">
+            <button class="side-panel-btn" id="notation-type-button" aria-haspopup="true" aria-controls="notation-type-menu" style="width: auto">
+              <span>Type</span>
+              <span id="notation-type-label">&nbsp;- Square</span>
+              <svg class="icon">
+                <use xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use>
+              </svg>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="notation-type-menu" role="menu">
+            <div class="dropdown-content">
+              <a aria-role="menuitem" class="dropdown-item" id="notation-type-square"
+                title="Font: Bravura. Fallback: Leipzig.">Square</a>
+              <a aria-role="menuitem" class="dropdown-item" id="notation-type-hufnagel"
+                title="Font: Hufnagel (custom). Fallback: Bravura.">Hufnagel</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>`;
 
   return contents;
@@ -180,12 +204,12 @@ class DisplayPanel implements DisplayInterface {
   /**
    * Apply event listeners related to the DisplayPanel.
    */
-  setDisplayListeners(): void {
+  setDisplayListeners(neonView: NeonView): void {
     if (this.zoomHandler) {
       // Zoom handler stuff
       DisplayControls.setZoomControls(this.zoomHandler);
     }
-    DisplayControls.initDisplayControls(this.meiClass, this.background);
+    DisplayControls.initDisplayControls(this.meiClass, this.background, neonView);
   }
 
   /**

src/DivaView.ts

@@ -220,7 +220,7 @@ class DivaView implements ViewInterface {
    */
   didLoad(): void {
     this.divaReady = true;
-    this.displayPanel.setDisplayListeners();
+    this.displayPanel.setDisplayListeners(this.neonView);
     document.getElementById('loading').style.display = 'none';
   }
 

src/Interfaces.ts

@@ -17,7 +17,7 @@ export interface DisplayInterface {
   meiClass: string;
   background: string;
   zoomHandler: ZoomHandler;
-  setDisplayListeners(): void;
+  setDisplayListeners(neonView: NeonView): void;
   updateVisualization(): void;
   loadSettings(): void;
 }