Port Hufnagel font switching to production Verovio worker by zih-syuan · Pull Request #1376 · DDMAL/Neon

zih-syuan · 2026-07-07T17:03:23Z

Related issues

Related to #1367 (font switching implemented; dropdown-freeze and switch-warning behavior still open for discussion, not closed by this PR)
Closes #1368

What this does

Ports the Hufnagel/Bravura(Square notation) font-switching logic (fetchHufnagelBase64, setFont case) from VerovioWorker-dev.js to the production worker VerovioWorker.js, so the feature actually works once live on neon.simssa.ca.
INSERT panel icons now render dynamically instead of using static PNGs.

Testing

yarn cypress:test: all passing (44 passing, 6 pending — unrelated to this change)
Manual local test: confirmed via browser DevTools Network/Console that VerovioWorker.js (not the dev version) loads, and Hufnagel font renders correctly

diva.js#master no longer exists; pin to last known good commit. See #1365. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Adds assets/Hufnagel.zip for Verovio fontAddCustom integration. Font source files live in zih-syuan/hufnagel-font; this branch only tracks the packaged artifact. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Adds a Square/Hufnagel selector below Display Options. Clicking updates the label and logs to console; engine wiring (setFont / setNotationType) is the next step. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- VerovioWorker: add setFont handler (lazy-loads Hufnagel.zip as base64, calls toolkit.setOptions with full options) - NeonCore: add setNotationFont() — sends setFont to worker, clears lastPageLoaded to bypass cache on next render - NeonView: add setNotationType() — calls setNotationFont then re-renders - DisplayControls/DisplayPanel: thread neonView through setDisplayListeners → initDisplayControls → setNotationTypeControls so dropdown is wired - Interfaces/SingleView/DivaView: update setDisplayListeners signature Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…fallback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

E99F is absent from Hufnagel.zip so Bravura fallback showed a square notation glyph. Generate a two-diamond icon via Verovio and use it as pngFallback for the distropha button in Hufnagel mode. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…back Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Verovio segfaults on staffDef notationtype="neume.hufnagel" (and "neume.square" is unverified) and doesn't render @con, so canonical Hufnagel connections (@con="e") and the real notationtype must never reach the Verovio worker directly. Add a temporary conversion shim in ConvertMei.ts (stripHufnagelForVerovio / restoreHufnagelForStorage) applied unconditionally at the two real boundaries - NeonCore.loadData() before anything reaches Verovio, and NeonCore.updateDatabase()/save()/ export() before anything is persisted or downloaded - so every load path (fresh fetch, cache hit, undo, redo) and every persistence path (save, export, download) stays consistent. See issues #1360, #1366. Co-Authored-By: Claude <noreply@anthropic.com>

Drop the hufnagel liquescent down primitive and the alternate F clef variant (fClefHufnagel) from the Insert panel, leaving one F clef button shared with square notation.

Nudge virga, virgaReversed, and custos icon offsets in the Insert panel so they align visually with the rest of the hufnagel primitives.

…handling - Upload modal now has a Notation Type choice, written into the MEI and synced to the Editing page dropdown. - Removed the auto con->ligated conversion before Verovio; it was corrupting real content. @con now passes through untouched. - Save no longer converts @ligated back to @con (only Download does), so a manually toggled connection survives a reload. Co-Authored-By: Claude <noreply@anthropic.com>

lpugin · 2026-07-08T07:28:51Z

Is this still using the Verovio version from RISM Digital with no modification?

zih-syuan · 2026-07-08T13:46:36Z

Yes, this still uses the unmodified Verovio build from RISM Digital. This PR only changes how Neon configures the toolkit: for Hufnagel, it loads the custom font through Verovio's existing fontAddCustom option.

For @con, Neon currently uses a temporary workaround: it maps Hufnagel connections to @ligated before sending the MEI to Verovio, then maps them back to @con before saving/exporting. The saved MEI should still be correct, but the Verovio-facing path is still a shortcut, and I am going to replace it with proper @con handling.

yinanazhou · 2026-07-16T02:13:14Z

+// 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.


Can you not set staffDef@notationtype here?

Yes. staffDef@notationtype is now set in ConvertMei.ts.

yinanazhou · 2026-07-16T02:23:36Z

+function stripStaffDefNotationTypeSuffix(mei: Element): void {
+  const staffDef = mei.querySelector('staffDef');
+  const value = staffDef?.getAttribute('notationtype');
+  if (value === HUFNAGEL_NOTATIONTYPE || value === SQUARE_NOTATIONTYPE) {
+    staffDef.setAttribute('notationtype', 'neume');
+  }
+}


This is only called once. I don't see why make this a function.

Fixed. I removed the function and inlined the logic in stripHufnagelForVerovio().

yinanazhou · 2026-07-16T02:24:47Z

+// Restores a bare staffDef notationtype back to "neume.hufnagel"/"neume.square"
+// given the notation type Neon already knows it's displaying.
+function restoreStaffDefNotationTypeSuffix(
+  mei: Element,
+  notationType?: string,
+): void {
+  if (notationType !== 'hufnagel' && notationType !== 'square') return;
+  mei
+    .querySelector('staffDef')
+    ?.setAttribute(
+      'notationtype',
+      notationType === 'hufnagel' ? HUFNAGEL_NOTATIONTYPE : SQUARE_NOTATIONTYPE,
+    );
+}


I don't see why making this a function as well. you can just append 'neume.' when setting it.

I removed the helper and now set notationtype directly as neume.${notationType}.

yinanazhou · 2026-07-16T02:34:44Z

+ * 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 {


You do not need NeonView here. You can dispatch the notationtypechange event (already happening below) and have DivaView/SingleView listen for it and call setNotationType themselves, since they already hold a neonView reference. That avoids threading the param through initDisplayControls, setDisplayListeners, DivaView.didLoad, and SingleView.onSVGLoad.

Fixed. DisplayControls now only dispatches notationtypechange. DivaView and SingleView listen for the event and call setNotationType() through their own neonView references, so the neonView parameter is no longer threaded through the display controls

yinanazhou · 2026-07-16T02:38:46Z


 .idea
+
+scripts/gen-hufnagel-grouping/


What is this for?

Removed. It was only for a local glyph-generation scratch directory and is not needed by Neon.

yinanazhou · 2026-07-16T02:39:20Z

+    "diva.js": "github:DDMAL/diva.js#5f530483f653db68af1cbb92bc8cc967b51763c3",
    "http-server": "^14.1.1",
    "jsonschema": "^1.2.4",
+    "jszip": "^3.10.1",


This can be dropped. See comments above.

Dropped. jszip and @types/jszip have been removed as direct dependencies.

yinanazhou · 2026-07-16T02:39:33Z

  "dependencies": {
    "d3": "^5.11.0",
-    "diva.js": "github:DDMAL/diva.js#master",
+    "diva.js": "github:DDMAL/diva.js#5f530483f653db68af1cbb92bc8cc967b51763c3",


Why this specific version?

package.json referenced #master, but that branch no longer exists, so installs that resolve the dependency afresh fail. The existing yarn.lock pointed to commit 5f530483, which was already known to work with Neon, so I pinned package.json to that commit as the temporary workaround described in issue #1365 .

yinanazhou · 2026-07-16T02:41:07Z

+
+const cache = new Map<string, Promise<FontData>>();
+
+async function loadFontData(zipUrl: string): Promise<FontData> {


You do not need jszip here. You can ship Hufnagel.woff as a flat asset instead of a zip and fetch + base64-encode it directly, since this only ever pulls out the font bytes. That drops the JSZip dependency and the unzip step from the worker, and since the font is static, you could even precompute the base64 at build time instead of re-fetching/encoding it every session. Also duplicated verbatim in VerovioWorker-dev.js, worth sharing one helper.

Updated. GlyphIcons.ts now loads flat .woff2 and bounding-box XML assets, so it no longer uses JSZip. I kept Hufnagel.zip in the Verovio workers because fontAddCustom expects the complete custom-font ZIP rather than only the font bytes. The production and dev workers now share a single base64-loading helper.

coderabbitai · 2026-07-21T14:43:30Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 46733732-a877-4f2e-8ebb-ea3df151fcf3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch zih-syuan/hufnagel-ui

_{Comment @coderabbitai help to get the list of available commands.}

yinanazhou · 2026-07-23T02:00:48Z

  title: string,
  mei: File,
  bg: File,
+  notationType: string,


Why do you still need notationType here? I don't think you need to touch this file.

yinanazhou · 2026-07-23T02:01:34Z

+  );
+  const notationType = selectedNotationType?.value ?? 'square';
+
+  handleUploadAllDocuments(currentFolder, notationType)


Why do you need notation type during upload?

yinanazhou · 2026-07-23T02:02:13Z

  );
  return (
-    createManifest(id, newName, mei, image)
+    createManifest(id, newName, mei, image, notationType)


Same as above. Why do you need notation type in manifest?

yinanazhou · 2026-07-23T02:04:57Z

+    }
+  });
+
+  ['square', 'hufnagel'].forEach((type) => {


This looks weird. I recommend you make notation type a type.

yinanazhou · 2026-07-23T02:09:33Z

 * HTML for each insert tab (neume, grouping, clef, system, and division).
 */
 export const insertTabHtml: Record<string, string> = {
  primitiveTab: `<p class="insert-element-container">


Is this still used? Is it better for buildPrimitiveTabHtml to handle this as well?

yinanazhou · 2026-07-23T02:10:57Z

+  }
+}
+
+function activateCurrentOrFirst(insertHandler: InsertHandler): void {


Is this a better naming for this function? It's not clear from the naming what it does. Also add a docstring maybe?

yinanazhou · 2026-07-23T02:16:38Z

   * only entries marked as dirty will be updated.
   */
-  async updateDatabase(): Promise<void> {
+  async updateDatabase(notationType?: string): Promise<void> {


I don't think this is necessary. You can store the converted MEI in the database. You only need to restore it when exporting MEI.

zih-syuan and others added 22 commits June 12, 2026 12:47

fix: pin diva.js to stable commit to fix fresh installs

55a5367

diva.js#master no longer exists; pin to last known good commit. See #1365. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chore: add Hufnagel font zip at default location

807715c

Adds assets/Hufnagel.zip for Verovio fontAddCustom integration. Font source files live in zih-syuan/hufnagel-font; this branch only tracks the packaged artifact. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chore: sync Hufnagel zip with neume glyphs from font branch

f01c66f

feat: add Notation Type dropdown UI scaffold to Display panel

8cfa1a8

Adds a Square/Hufnagel selector below Display Options. Clicking updates the label and logs to console; engine wiring (setFont / setNotationType) is the next step. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style(display-panel): tweak notation dropdown tooltip text

5fc7449

feat: render insert glyph icons dynamically

5602d3a

fix: align dynamic insert glyph icons

7e8da31

feat(insert): add Hufnagel primitives and fClef variant with Bravura …

b373d5f

…fallback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(insert): add Hufnagel grouping tab with font-specific preview icons

d114fa1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(insert): refresh grouping tab icons on notation type change

4190021

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(insert): prioritize hufnagel PNG override over Bravura glyph fall…

12ff298

…back Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(verovio): set fontFallback to Bravura for Hufnagel mode

82a1841

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(display): update Hufnagel tooltip to reflect Bravura fallback

2545e1a

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(insert): remove hufnagel liquescent down and duplicate F clef

a1ce921

Drop the hufnagel liquescent down primitive and the alternate F clef variant (fClefHufnagel) from the Insert panel, leaving one F clef button shared with square notation.

fix(insert): adjust hufnagel primitive icon vertical alignment

063e038

Nudge virga, virgaReversed, and custos icon offsets in the Insert panel so they align visually with the rest of the hufnagel primitives.

chore: sync Hufnagel zip with latest font branch update

4e52519

Update hufnagel font (custos)

3028e60

feat(verovio): port Hufnagel font-switching to production worker

e7887ad

zih-syuan requested a review from kyrieb-ekat July 7, 2026 17:03

zih-syuan requested a review from yinanazhou July 15, 2026 14:19

yinanazhou requested changes Jul 16, 2026

View reviewed changes

refactor(mei): simplify notation type handling

1e40fb5

refactor(display): decouple notation controls from NeonView

44e3334

refactor(font): simplify custom font loading

4717177

zih-syuan requested a review from yinanazhou July 21, 2026 18:05

yinanazhou requested changes Jul 23, 2026

View reviewed changes


		const cache = new Map<string, Promise<FontData>>();

		async function loadFontData(zipUrl: string): Promise<FontData> {


		.idea

		scripts/gen-hufnagel-grouping/

Uh oh!

Conversation

zih-syuan commented Jul 7, 2026

Related issues

What this does

Testing

Uh oh!

lpugin commented Jul 8, 2026

Uh oh!

zih-syuan commented Jul 8, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coderabbitai Bot commented Jul 21, 2026 •

edited

Loading