allow pitches dialog for tabs

build/styles/dialogs.css

@@ -384,6 +384,16 @@ body.showAttributeDialog .attributeDialog {
     display:flex;
     flex-flow: row wrap;
 }
+.attributeModal .smoControlContainer .smoControl.multiControl.pitch-array-parent {
+  display: flex;
+  flex-flow: column;
+}
+.pitch-array-item {
+  border: 2px #ddd inset;
+}
+.pitch-array-parent .pitch-array-container .multiControl.smoControl.pitchContainer {
+  border: none;
+}
 .attributeModal .smoControl.multiControl {
   flex: 1 1 100%;
   flex-flow: row wrap;
@@ -393,6 +403,12 @@ body.showAttributeDialog .attributeDialog {
 .attributeModal .smoControl.multiControl.textCheckContainer .smoControl {
   margin: 5px;
 }
+.pitchContainer .smoControl input {
+  width: 30px;
+}
+.pitch-array-item {
+  display: flex;
+}
 .attributeModal .smoControl.multiControl.textCheckContainer .text-input.smoControl {
   flex-flow: column-reverse;
   flex: 1 1 70px;

src/application/exports.ts

@@ -81,6 +81,7 @@ import { SuiRockerComponent, SuiRockerComposite } from '../ui/dialogs/components
 import { SuiFontComponent } from '../ui/dialogs/components/fontComponent';
 import { SuiTextBlockComponent } from '../ui/dialogs/components/textInPlace';
 import { SuiTreeComponent } from '../ui/dialogs/components/tree';
+import { SuiPitchArrayComponent, SuiPitchComponent, SuiPitchComposite } from '../ui/dialogs/components/pitch';
 import {
     SuiLyricComponent, SuiChordComponent,
     SuiNoteTextComponent
@@ -200,6 +201,8 @@ export const Smo = {
     SuiNoteTextComponent, SuiTextBlockComponent, SuiTextInputComponent,
     SuiDynamicModifierDialog, CheckboxDropdownComponent, TieMappingComponent, StaffAddRemoveComponent,
     StaffCheckComponent, TextCheckComponent, SuiArpeggioDialog, SuiClefChangeDialog,
+    SuiPitchArrayComponent, SuiPitchComponent,
+  SuiPitchComposite, 
     SuiXhrLoader,PromiseHelpers,
     // Rendering components
     SuiPiano, layoutDebug, SuiScoreView,SuiScroller, SvgHelpers, SuiMapper, SuiScoreRender,

src/smo/data/staffModifiers.ts

@@ -910,6 +910,9 @@ export class SmoTie extends StaffModifierBase {
   // ### checkLines
   // If the note chords have changed, the lines may no longer be valid so update them
   checkLines(fromNote: SmoNote, toNote: SmoNote) {
+    if (this.lines.length < 1) {
+      return;
+    }
     const maxTo = this.lines.map((ll) => ll.to).reduce((a, b) => a > b ? a : b);
     const maxFrom = this.lines.map((ll) => ll.from).reduce((a, b) => a > b ? a : b);
     if (maxTo < toNote.pitches.length && maxFrom < fromNote.pitches.length) {
@@ -930,12 +933,37 @@ export class SmoTie extends StaffModifierBase {
   }
 }
 
+/**
+ * Parameters for SmoTabStave
+ */
 export interface SmoTabStaveParams {
+  /**
+   * start selector, by measure
+   */
   startSelector: SmoSelector,
+  /**
+   * end selector, by measure
+   */
   endSelector: SmoSelector,
+  /**
+   * space between staves, in pixels
+   */
   spacing: number,
+  /**
+   * number of lines
+   */
   numLines: number,
+  /**
+   * Default setting of showing stems
+   */
   showStems: boolean,
+  /**
+   * If true, the score should keep a single tab stave for all measures
+   */
+  allMeasures: boolean,
+  /**
+   * The strings for each line
+   */
   stringPitches?: Pitch[]
 }
 
@@ -952,6 +980,7 @@ export class SmoTabStave extends StaffModifierBase {
   spacing: number = 13;
   numLines: number = 6;
   showStems: boolean = true;
+  allMeasures: boolean = true;
   stringPitches: Pitch[];
   /** The default guitar tuning.  Different instruments could have different tuning */
   static get defaultStringPitches(): Pitch[] {
@@ -975,16 +1004,17 @@ export class SmoTabStave extends StaffModifierBase {
     const pitchInt = SmoMusic.smoPitchToInt(pitch) + (-1 * transposeIndex);
     // if the note is lower than the lowest pitch, there is really no valid string so just
     // pick lowest note.
+    const lastIndex = pitchAr.length - 1;
     if (pitchInt < pitchAr[0]) {
-      return { fret: 0, string: 0 };
+      return { fret: 0, string: 1 };
     }
     // If the note is between this and the next string, count the frets
-    for (var i = 0; i < pitchAr.length - 1; i++) {
+    for (var i = 0; i < lastIndex; i++) {
       if (pitchInt >= pitchAr[i] && pitchInt < pitchAr[i + 1]) {
-        return { string: i, fret: pitchInt - pitchAr[i] };
+        return { string: i + 1, fret: pitchInt - pitchAr[i] };
       }
     }
-    return { string: 5, fret: pitchInt - pitchAr[5] };
+    return { string: lastIndex + 1, fret: pitchInt - pitchAr[lastIndex] };
   }
   /**
    * Find default fret positions for a set of pitches from a note
@@ -1004,10 +1034,12 @@ export class SmoTabStave extends StaffModifierBase {
       endSelector: SmoSelector.default,
       spacing: 13,
       numLines: 6,
-      showStems: true
+      showStems: true,
+      allMeasures: true,
+      stringPitches: SmoTabStave.defaultStringPitches
     }
   }
-  static parameterArray: string[] = ['startSelector', 'endSelector', 'spacing', 'numLines', 'showStems'];
+  static parameterArray: string[] = ['startSelector', 'endSelector', 'spacing', 'numLines', 'showStems', 'allMeasures'];
   static featuresEqual(st1: SmoTabStave, st2: SmoTabStave): boolean {
     if (st1.numLines !== st2.numLines) {
       return false;
@@ -1055,6 +1087,7 @@ export class SmoTabStave extends StaffModifierBase {
     } else {
       this.stringPitches = params.stringPitches;
     }
+    this.stringPitches.sort((pa, pb) => SmoMusic.smoPitchToInt(pa) > SmoMusic.smoPitchToInt(pb) ? 1 : -1);
   }
   serialize():any {
     const params: Partial<SmoTabStaveParamsSer> = { ctor: 'SmoTabStave' };

src/smo/data/systemStaff.ts

@@ -489,6 +489,12 @@ export class SmoSystemStaff implements SmoObjectParams {
     this.tabStaves = newList;
   }
   updateTabStave(ts: SmoTabStave) {
+    if (ts.allMeasures) {
+      ts.startSelector.measure = 0;
+      ts.endSelector.measure = this.measures.length - 1;
+      this.tabStaves = [ts];
+      return;
+    }
     if (!this.tabStaves.length) {
       this.tabStaves.push(ts);
       return;

src/styles/dialogs.css

@@ -384,6 +384,16 @@ body.showAttributeDialog .attributeDialog {
     display:flex;
     flex-flow: row wrap;
 }
+.attributeModal .smoControlContainer .smoControl.multiControl.pitch-array-parent {
+  display: flex;
+  flex-flow: column;
+}
+.pitch-array-item {
+  border: 2px #ddd inset;
+}
+.pitch-array-parent .pitch-array-container .multiControl.smoControl.pitchContainer {
+  border: none;
+}
 .attributeModal .smoControl.multiControl {
   flex: 1 1 100%;
   flex-flow: row wrap;
@@ -393,6 +403,12 @@ body.showAttributeDialog .attributeDialog {
 .attributeModal .smoControl.multiControl.textCheckContainer .smoControl {
   margin: 5px;
 }
+.pitchContainer .smoControl input {
+  width: 30px;
+}
+.pitch-array-item {
+  display: flex;
+}
 .attributeModal .smoControl.multiControl.textCheckContainer .text-input.smoControl {
   flex-flow: column-reverse;
   flex: 1 1 70px;

src/ui/dialogs/components/dropdown.ts

@@ -66,19 +66,6 @@ export class SuiDropdownComponent extends SuiComponentBase {
       b('label').attr('for', id + '-input').text(this.label));
     return r;
   }
-  replaceOptions(options: DialogDefinitionOption[]) {
-    const b = buildDom;
-    const s = b('select');
-    const sel = this._getInputElement();
-    const parent = $(sel).parent();
-    $(sel).remove();
-    this.checkDefault(s, b);
-    options.forEach((option) => {
-      s.append(b('option').attr('value', option.value.toString()).text(option.label));
-    });
-    $(parent).append(s.dom());
-    this.bind();
-  }
 
   unselect() {
     $(this._getInputElement())[0].selectedIndex = -1;