UI fixes

fix bugs with microtones, add text messages for hotkeys, styling changes for buttons that share icon and text.
AaronDavidNewman · Sep 15, 2024 · a1ef3d5 · a1ef3d5
1 parent 039906a
commit a1ef3d5
Show file tree

Hide file tree

Showing 17 changed files with 216 additions and 174 deletions.
diff --git a/build/styles/dialogs.css b/build/styles/dialogs.css
@@ -234,7 +234,10 @@ button.nav-link {
   font-size: 0.8em;
   font-style: italic;
   flex: 4 1 220px;
-  width: 120px;
+}
+.smoControlContainer .button-array-buttons button.repetext .icon-bravura .button-text {
+  font-size: 12px;
+  min-width: 35px;
 }
 .attributeModal.tempoTextMode #dialog-tempo-duration,
 .attributeModal.tempoTextMode #dialog-tempo-bpm ,
@@ -276,6 +279,10 @@ button.nav-link {
     margin-left:15px;
 }
 
+.smoControlContainer .text-input.hide-input input {
+  display: none;
+}
+
 .smoControl.toggleControl {
     display:flex;
     align-items:center;
@@ -367,22 +374,34 @@ button.nav-link {
 .button-array-buttons {
   display: flex;
   align-items: center;
+  flex: 1 2 auto;
+}
+.button-row-container {
+  display:flex;
+  flex-flow: column;
+  flex: 1 1 auto;
 }
 .button-array-label {
   display: flex;
+  flex: 0 0 100px;
+  min-width: 100px;
 }
 .nav-item {
   border-bottom: 1px solid #eee;
 }
 .attributeModal .smoControl.buttonArray .icon-bravura {
-  left:8px;
+  left:calc(50% - 12px);
 }
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-mid {
   top: 0;
   left:8px;
 }
+.attributeModal .smoControl.buttonArray .icon-bravura.icon-transparent {
+  color: #333333aa;
+}
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-lg {
   font-size: 24px;
+  top:inherit;
 }
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-top {
   left:8px;

diff --git a/src/application/exports.ts b/src/application/exports.ts
@@ -18,7 +18,6 @@ import { CollapseRibbonControl, ExtendedCollapseParent } from '../ui/buttons/col
 import { DisplaySettings } from '../ui/buttons/display';
 import { DurationButtons } from '../ui/buttons/duration';
 import { MeasureButtons } from '../ui/buttons/measure';
-import { MicrotoneButtons } from '../ui/buttons/microtone';
 import { NavigationButtons } from '../ui/buttons/navigation';
 import { NoteButtons } from '../ui/buttons/note';
 import { PlayerButtons } from '../ui/buttons/player';
@@ -48,7 +47,7 @@ import { SuiInsertMeasures } from '../ui/dialogs/addMeasure';
 import { SuiInstrumentDialog } from '../ui/dialogs/instrument';
 import { SuiTimeSignatureDialog } from '../ui/dialogs/timeSignature';
 import { SuiTempoDialog } from '../ui/dialogs/tempo';
-import { SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiNoteHeadButtonComponent } from '../ui/dialogs/noteHead';
+import { SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiNoteHeadButtonComponent, SuiStemButtonComponent } from '../ui/dialogs/noteHead';
 import { SuiEndingsAdapter, SuiEndingsDialog, 
   SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent } from '../ui/dialogs/endings';
 import { SuiScoreIdentificationDialog } from '../ui/dialogs/scoreId';
@@ -179,7 +178,7 @@ export const Smo = {
     Qwerty, SuiHelp, SmoTranslationEditor, SimpleEventHandler, ModalEventHandler,
     // Ribbon buttons
     simpleRibbonLayout,
-    RibbonButtons, NoteButtons, TextButtons, ChordButtons, MicrotoneButtons,
+    RibbonButtons, NoteButtons, TextButtons, ChordButtons,
     StaveButtons, BeamButtons, MeasureButtons, DurationButtons,
     VoiceButtons, PlayerButtons, ArticulationButtons,  NavigationButtons,
     DisplaySettings,  ExtendedCollapseParent, CollapseRibbonControl,
@@ -201,9 +200,9 @@ export const Smo = {
     SuiPartInfoDialog, SuiOrnamentDialog, SuiOrnamentButtonComponent, 
     SuiArticulationDialog, SuiArticulationButtonComponent, SuiArticulationAdapter,
     SuiMicrotoneAdapter, SuiMicrotoneButtonComponent, SuiMicrotoneDialog,
-    SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiEndingsAdapter, SuiEndingsDialog, 
-    SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent,
-    SuiNoteHeadButtonComponent,    
+    SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiStemButtonComponent, SuiNoteHeadButtonComponent,    
+    SuiEndingsAdapter, SuiEndingsDialog, 
+    SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent,    
     /* SuiLoadActionsDialog, SuiSaveActionsDialog, */
     SuiPrintFileDialog, SuiSaveFileDialog, SuiSaveXmlDialog, SuiSaveVexDialog,
     SuiSaveMidiDialog, SuiDialogBase,

diff --git a/src/common/vex.ts b/src/common/vex.ts
@@ -145,7 +145,7 @@ export function getGlyphWidth(smoGlyph: GlyphInfo) {
  */
 export function getSlashGlyph() {
         // vexNote = new VF.GlyphNote('\uE504', { duration });
-       return new VF.GlyphNote(new VF.Glyph('repeat1Bar', 38), { duration: 'w' }, { line: 2 });
+       return new VF.GlyphNote(new VF.Glyph('repeatBarSlash', 38), { duration: 'w' }, { line: 2 });
 }
 export function getRepeatBar() {
   return new VF.GlyphNote(new VF.Glyph('repeat1Bar', 38), { duration: 'w' }, { line: 2 });

diff --git a/src/render/sui/scoreViewOperations.ts b/src/render/sui/scoreViewOperations.ts
@@ -240,17 +240,6 @@ export class SuiScoreViewOperations extends SuiScoreView {
     this.storeScore.scoreInfo = JSON.parse(JSON.stringify(scoreInfo));
     return this.renderer.updatePromise()
   }
-
-  /**
-   * Add a specific microtone modifier to the selected notes
-   * @param tone 
-   * @returns 
-   */
-  async addRemoveMicrotone(tone: SmoMicrotone) {
-    await this.modifyCurrentSelections('add/remove microtone', (score, selections) => {
-      SmoOperation.addRemoveMicrotone(null, selections, tone);
-    })
-  }
   async addRemoveArpeggio(code: SmoArpeggioType) {
     await this.modifyCurrentSelections('add/remove addRemoveArpeggio',
       (score, selections) => {

diff --git a/src/smo/data/note.ts b/src/smo/data/note.ts
@@ -713,16 +713,17 @@ export class SmoNote implements Transposable {
     return typeof(this.tupletId) !== 'undefined' && this.tupletId !== null &&  this.tupletId.length > 0;
   }
 
+  /**
+   * we only support a single microtone, not sure if vex supports multiple
+   * @param tone 
+   */
   addMicrotone(tone: SmoMicrotone) {
     const ar = this.tones.filter((tn: SmoMicrotone) => tn.pitchIndex !== tone.pitchIndex);
     ar.push(tone);
     this.tones = ar;
   }
-  removeMicrotone(tone: SmoMicrotone) {
-    const ar = this.tones.filter((tn) => tn.pitchIndex !== tone.pitchIndex
-      && tn.pitchIndex <= this.pitches.length // also remove tones for removed pitches
-      && tone.tone !== tn.tone);
-    this.tones = ar;
+  removeMicrotone() {
+    this.tones = [];
   }
   getMicrotone(toneIndex: number) {
     return this.tones.find((tn) => tn.pitchIndex === toneIndex);

diff --git a/src/smo/xform/operations.ts b/src/smo/xform/operations.ts
@@ -82,21 +82,6 @@ export class SmoOperation {
       });
     });
   }
-
-  static addRemoveMicrotone(ignore: any, selections: SmoSelection[], tone: SmoMicrotone) {
-    selections.forEach((sel) => {
-      const note = sel.note;
-      if (note) {
-        const oldTone = note.getMicrotone(tone.pitchIndex);
-        if (oldTone) {
-          note.removeMicrotone(oldTone);
-        } else {
-          note.addMicrotone(tone);
-        }
-      }
-    });
-  }
-
   static moveStaffUpDown(score: SmoScore, selection: SmoSelection, index: number) {
     const index1 = selection.selector.staff;
     const index2 = selection.selector.staff + index;

diff --git a/src/styles/dialogs.css b/src/styles/dialogs.css
@@ -234,7 +234,10 @@ button.nav-link {
   font-size: 0.8em;
   font-style: italic;
   flex: 4 1 220px;
-  width: 120px;
+}
+.smoControlContainer .button-array-buttons button.repetext .icon-bravura .button-text {
+  font-size: 12px;
+  min-width: 35px;
 }
 .attributeModal.tempoTextMode #dialog-tempo-duration,
 .attributeModal.tempoTextMode #dialog-tempo-bpm ,
@@ -276,6 +279,10 @@ button.nav-link {
     margin-left:15px;
 }
 
+.smoControlContainer .text-input.hide-input input {
+  display: none;
+}
+
 .smoControl.toggleControl {
     display:flex;
     align-items:center;
@@ -367,22 +374,34 @@ button.nav-link {
 .button-array-buttons {
   display: flex;
   align-items: center;
+  flex: 1 2 auto;
+}
+.button-row-container {
+  display:flex;
+  flex-flow: column;
+  flex: 1 1 auto;
 }
 .button-array-label {
   display: flex;
+  flex: 0 0 100px;
+  min-width: 100px;
 }
 .nav-item {
   border-bottom: 1px solid #eee;
 }
 .attributeModal .smoControl.buttonArray .icon-bravura {
-  left:8px;
+  left:calc(50% - 12px);
 }
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-mid {
   top: 0;
   left:8px;
 }
+.attributeModal .smoControl.buttonArray .icon-bravura.icon-transparent {
+  color: #333333aa;
+}
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-lg {
   font-size: 24px;
+  top:inherit;
 }
 .attributeModal .smoControl.buttonArray .icon-bravura.icon-top {
   left:8px;

diff --git a/src/ui/buttons/microtone.ts b/src/ui/buttons/microtone.ts
diff --git a/src/ui/dialogs/articulation.ts b/src/ui/dialogs/articulation.ts
@@ -193,6 +193,12 @@ export class SuiArticulationAdapter extends SuiComponentAdapter {
       });
     });
   }
+  get textMessage() {
+    return '';
+  }
+  set textMessage(value: string) {
+    // ignore
+  }
   async commit() {    
   }
   async cancel() {
@@ -233,6 +239,11 @@ export class SuiArticulationDialog extends SuiDialogAdapterBase<SuiArticulationA
               label: 'Auto'
             } 
           ]
+        }, {
+          smoName: 'textMessage',
+          control: 'SuiTextInputComponent',
+          label: 'Use keys h,i,j,k,l to toggle common articulations.',
+          classes: 'hide-input'
         }],
       staticText: []
     };

diff --git a/src/ui/dialogs/components/button.ts b/src/ui/dialogs/components/button.ts
@@ -10,6 +10,7 @@ export interface SuiButtonComponentParams {
   classes: string,
   type?: string,
   increment?: number,
+  text?: string,
   label: string,
   smoName: string,
   control: string,

diff --git a/src/ui/dialogs/components/buttonArray.ts b/src/ui/dialogs/components/buttonArray.ts
@@ -22,6 +22,7 @@ export class SuiButtonArrayButton extends SuiComponentBase {
   icon: string;
   classes: string;
   position?: string;
+  text?: string;
   iButtonState: number = SuiButtonArrayButton.buttonState.initial;
   parentControl: SuiComponentParent;
   static buttonStateString: string[] = ['initial', 'pushed', 'disabled'];
@@ -32,6 +33,7 @@ export class SuiButtonArrayButton extends SuiComponentBase {
     super(dialog, parameters);
     this.id = `${dialog.getId()}-${parameters.id}`;
     this.dialog = dialog;
+    this.text = parameters.text;
     this.icon = parameters.icon;
     this.classes = parameters.classes;
     this.parentControl = parameters.parentControl;    
@@ -62,14 +64,16 @@ export class SuiButtonArrayButton extends SuiComponentBase {
   get textHtml() {
     const b = buildDom;
     const state: string = SuiButtonArrayButton.buttonStateString[this.iButtonState];
+    const text = this.text ?? '';
     const classes = `${this.classes} ${state}`;
     const q = b('button').attr('id', this.id).classes(classes).append(
-      b('span').classes(this.icon).attr('aria-label',this.label).text(this.label)
+      b('span').classes(this.icon).attr('aria-label',this.label)).append(
+        b('span').classes('button-text').text(text)
     );
     return q;
   }
   get html() {
-    const q = this.icon.length ? this.iconHtml : this.textHtml;
+    const q = this.text?.length ? this.textHtml : this.iconHtml;
     return q;
   }
   updateControls() {
@@ -129,12 +133,12 @@ export abstract class SuiButtonArrayBase extends SuiComponentParent {
   get html() {
     const b = buildDom;
     if (!this.shellCreated) {
-      const q = b('div').classes(this.makeClasses('multiControl smoControl pitchContainer buttonArray'))
+      const q = b('div').classes(this.makeClasses('multiControl smoControl buttonArray'))
       .attr('id', this.parameterId);
       this.shellCreated = true;
       return q;
     }
-    const q = b('div');
+    const q = b('div').classes('button-row-container');
     for (let i = 0; i < this.buttonRows.length; ++i) {
       const buttonRow = this.buttonRows[i];
       const r = b('div').classes(`button-array-row`);
@@ -158,6 +162,7 @@ export abstract class SuiButtonArrayBase extends SuiComponentParent {
 export class SuiButtonArrayComponent extends SuiButtonArrayBase {
   pressed: string = '';
   shellCreated: boolean = false;
+  initialValue: boolean = true;
 
   constructor(dialog: SuiDialogNotifier, parameter: SuiBaseComponentParams, buttonFactory: getButtonsFcn) {
     super(dialog, parameter, buttonFactory);
@@ -170,9 +175,21 @@ export class SuiButtonArrayComponent extends SuiButtonArrayBase {
     for (let i = 0; i < rowKeys.length; ++i) {
       const buttonRow = this.buttonRows[i];
       buttonRow.buttons.forEach((bb) => {
+        // If the button is being pressed by the user
         if (bb.changeFlag) {
-          this.pressed = bb.smoName;
-          bb.buttonState = SuiButtonArrayButton.buttonState.pushed;
+          // toggle button state.
+          if (bb.buttonState === SuiButtonArrayButton.buttonState.pushed) {
+            bb.buttonState = SuiButtonArrayButton.buttonState.initial;
+            this.pressed = '';
+          } else {
+            this.pressed = bb.smoName;
+            bb.buttonState = SuiButtonArrayButton.buttonState.pushed;
+          }
+        } else if (this.initialValue) {
+          // if the condition was met when the dialog was created
+          if (this.pressed === bb.smoName) {
+            bb.buttonState = SuiButtonArrayButton.buttonState.pushed;
+          }
         } else {
           bb.buttonState = SuiButtonArrayButton.buttonState.initial;
         }
@@ -183,6 +200,7 @@ export class SuiButtonArrayComponent extends SuiButtonArrayBase {
     this.pressed = val;
     this.updateValues();
     this.updateControls();
+    this.initialValue = false;
   }
   changed() {
     this.changeFlag = true;