From 3cf4cc3363a24fe072efb25ef1281fe6a283c3f0 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Fri, 21 Jun 2024 05:11:30 -0400
Subject: [PATCH] Color more types of elements

---
 site/src/components/Vexml.tsx | 71 +++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/site/src/components/Vexml.tsx b/site/src/components/Vexml.tsx
index 4d44a332..9979f42f 100644
--- a/site/src/components/Vexml.tsx
+++ b/site/src/components/Vexml.tsx
@@ -60,21 +60,76 @@ export const Vexml = (props: VexmlProps) => {
       const onEnter: vexml.EnterEventListener = (event) => {
         container.style.cursor = 'pointer';
 
+        // TODO: Create official wrapper around vexml Rendering* objects that allows users to color the notes.
         const value = event.target.value;
-        if (value.type === 'stavenote') {
-          value.vexflow.staveNote.getSVGElement()?.remove();
-          value.vexflow.staveNote.setLedgerLineStyle({ strokeStyle: STRINGSYNC_RED });
-          value.vexflow.staveNote.setStyle({ fillStyle: STRINGSYNC_RED, strokeStyle: STRINGSYNC_RED }).draw();
+        switch (value.type) {
+          case 'stavenote':
+            const vfStaveNote = value.vexflow.staveNote;
+            vfStaveNote.getSVGElement()?.remove();
+            vfStaveNote.setLedgerLineStyle({ strokeStyle: STRINGSYNC_RED });
+            vfStaveNote.setStyle({ fillStyle: STRINGSYNC_RED, strokeStyle: STRINGSYNC_RED }).draw();
+            break;
+          case 'stavechord':
+            value.notes.forEach((note) => {
+              const vfStaveNote = note.vexflow.staveNote;
+              vfStaveNote.getSVGElement()?.remove();
+              vfStaveNote.setLedgerLineStyle({ strokeStyle: STRINGSYNC_RED });
+              vfStaveNote.setStyle({ fillStyle: STRINGSYNC_RED, strokeStyle: STRINGSYNC_RED }).draw();
+            });
+            break;
+          case 'tabnote':
+            const vfTabNote = value.vexflow.tabNote;
+            vfTabNote.getSVGElement()?.remove();
+            vfTabNote.setStyle({ fillStyle: STRINGSYNC_RED, strokeStyle: STRINGSYNC_RED }).draw();
+            break;
+          case 'tabchord':
+            value.tabNotes.forEach((tabNote) => {
+              const vfTabNote = tabNote.vexflow.tabNote;
+              vfTabNote.getSVGElement()?.remove();
+              vfTabNote.setStyle({ fillStyle: STRINGSYNC_RED, strokeStyle: STRINGSYNC_RED }).draw();
+            });
+            break;
+          case 'rest':
+            value.vexflow.note.getSVGElement()?.remove();
+            value.vexflow.note.setStyle({ fillStyle: STRINGSYNC_RED }).draw();
+            break;
         }
       };
       const onExit: vexml.ExitEventListener = (event) => {
         container.style.cursor = 'default';
 
         const value = event.target.value;
-        if (value.type === 'stavenote') {
-          value.vexflow.staveNote.getSVGElement()?.remove();
-          value.vexflow.staveNote.setLedgerLineStyle({ strokeStyle: 'black' });
-          value.vexflow.staveNote.setStyle({ fillStyle: 'black' }).draw();
+        switch (value.type) {
+          case 'stavenote':
+            const vfStaveNote = value.vexflow.staveNote;
+            vfStaveNote.getSVGElement()?.remove();
+            vfStaveNote.setLedgerLineStyle({ strokeStyle: 'black' });
+            vfStaveNote.setStyle({ fillStyle: 'black', strokeStyle: 'black' }).draw();
+            break;
+          case 'stavechord':
+            value.notes.forEach((note) => {
+              const vfStaveNote = note.vexflow.staveNote;
+              vfStaveNote.getSVGElement()?.remove();
+              vfStaveNote.setLedgerLineStyle({ strokeStyle: 'black' });
+              vfStaveNote.setStyle({ fillStyle: 'black', strokeStyle: 'black' }).draw();
+            });
+            break;
+          case 'tabnote':
+            const vfTabNote = value.vexflow.tabNote;
+            vfTabNote.getSVGElement()?.remove();
+            vfTabNote.setStyle({ fillStyle: 'black', strokeStyle: 'black' }).draw();
+            break;
+          case 'tabchord':
+            value.tabNotes.forEach((tabNote) => {
+              const vfTabNote = tabNote.vexflow.tabNote;
+              vfTabNote.getSVGElement()?.remove();
+              vfTabNote.setStyle({ fillStyle: 'black', strokeStyle: 'black' }).draw();
+            });
+            break;
+          case 'rest':
+            value.vexflow.note.getSVGElement()?.remove();
+            value.vexflow.note.setStyle({ fillStyle: 'black' }).draw();
+            break;
         }
       };
       handles.push(rendering.addEventListener('enter', onEnter));