@tspro/web-music-score 1.0.0 → 1.1.0

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-/*! WebMusicScore v1.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/*! WebMusicScore v1.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -538,7 +538,7 @@ __webpack_require__.d(__webpack_exports__, {
   "default": function() { return /* binding */ index_full; }
 });
 
-// UNUSED EXPORTS: Annotation, ArcPos, Arpeggio, Audio, CellData, Chord, CircleOfFifthsComponent, DefaultGuitarNoteLabel, DefaultHandedness, DefaultPitchNotation, DefaultTuningName, DivRect, Fermata, GuitarComponent, GuitarContext, GuitarNote, GuitarNoteLabel, GuitarNoteLabelList, Interval, InvalidChordException, KeySignature, Label, MAccidental, MArc, MArpeggio, MBarLineLeft, MBarLineRight, MBeamGroup, MDocument, MEnding, MExtensionLine, MFermata, MHeader, MImage, MMeasure, MNoteGroup, MPlaybackButtons, MPlayer, MRenderer, MRest, MRhythmColumn, MScoreRow, MSignature, MSpecialText, MText, MaxNoteLength, MinNoteLength, MusicError, MusicInterface, MusicScoreView, Navigation, Note, NoteLength, PitchNotation, PitchNotationList, PlayState, PlaybackButtons, PlaybackButtonsLayout, RhythmProps, SamplePieces, Scale, ScaleFactory, ScaleType, StaffKind, Stem, SymbolSet, TieLength, TimeSignature, TuningNameList, alterTempoSpeed, getDefaultKeySignature, getDefaultScale, getDefaultTempo, getDefaultTimeSignature, getScale, getScaleFactory, getScaleFactoryList, getTempoString, validateGuitarNoteLabel, validateHandedness, validateIntervalQuality, validateNoteLength, validatePitchNotation, validateScaleType, validateTuningName
+// UNUSED EXPORTS: Annotation, ArcPos, Arpeggio, Audio, CellData, Chord, CircleOfFifthsComponent, DefaultGuitarNoteLabel, DefaultHandedness, DefaultPitchNotation, DefaultTuningName, DivRect, Fermata, GuitarComponent, GuitarContext, GuitarNote, GuitarNoteLabel, GuitarNoteLabelList, Interval, InvalidChordException, KeySignature, Label, MAccidental, MArc, MArpeggio, MBarLineLeft, MBarLineRight, MBeamGroup, MDocument, MEnding, MExtensionLine, MFermata, MHeader, MImage, MMeasure, MNoteGroup, MPlaybackButtons, MPlayer, MRenderer, MRest, MRhythmColumn, MScoreRow, MSignature, MSpecialText, MText, MaxNoteLength, MinNoteLength, MusicError, MusicInterface, MusicScoreView, Navigation, Note, NoteLength, PitchNotation, PitchNotationList, PlayState, PlaybackButtons, PlaybackButtonsLayout, RhythmProps, SamplePieces, Scale, ScaleFactory, ScaleType, StaffKind, Stem, SymbolSet, TieLength, TimeSignature, TuningNameList, alterTempoSpeed, getDefaultKeySignature, getDefaultScale, getDefaultTempo, getDefaultTimeSignature, getScale, getScaleFactory, getScaleFactoryList, getTempoString, getTuningStrings, validateGuitarNoteLabel, validateHandedness, validateIntervalQuality, validateNoteLength, validatePitchNotation, validateScaleType, validateTuningName
 
 // NAMESPACE OBJECT: ./src/sample-pieces/exports.ts
 var exports_namespaceObject = {};
@@ -631,6 +631,7 @@ __webpack_require__.d(exports_full_namespaceObject, {
   getScaleFactory: function() { return getScaleFactory; },
   getScaleFactoryList: function() { return getScaleFactoryList; },
   getTempoString: function() { return getTempoString; },
+  getTuningStrings: function() { return getTuningStrings; },
   validateGuitarNoteLabel: function() { return validateGuitarNoteLabel; },
   validateHandedness: function() { return validateHandedness; },
   validateIntervalQuality: function() { return validateIntervalQuality; },
@@ -32740,6 +32741,7 @@ var DocumentSettings = {
   NoteHeadWidth: 2,
   NoteHeadHeight: 1.3,
   DiamondNoteHeadSize: 1.8,
+  DotSize: 0.8,
   StemHeight: 7,
   // One octave
   FlagWidth: 1.5,
@@ -32749,7 +32751,8 @@ var DocumentSettings = {
   BeamAngleFactor: 0.5,
   RestDotSpace: 0.5,
   LedgerLineWidth: 3.6,
-  ShortTieLength: 5
+  ShortTieLength: 5,
+  GuitarTabHeight: 20
 };
 ;// ./src/music-score/engine/renderer.ts
 
@@ -32994,8 +32997,12 @@ class Renderer {
     var {
       row
     } = measure.getMusicObject();
+    var staff = row.getStaff(pitch);
+    if (!staff) {
+      return;
+    }
     ctx.fillStyle = HilightPitchRectColor;
-    ctx.fillRect(0, row.getPitchY(pitch) - unitSize, ctx.canvas.width, 2 * unitSize);
+    ctx.fillRect(0, staff.getPitchY(pitch) - unitSize, ctx.canvas.width, 2 * unitSize);
     if (mousePos !== undefined) {
       this.drawLedgerLines(row, pitch, mousePos.x);
     }
@@ -33099,26 +33106,33 @@ class Renderer {
     }
   }
   drawLedgerLines(row, pitch, x) {
+    var staff = row.getStaff(pitch);
+    if (!staff) {
+      return;
+    }
     var {
       unitSize
     } = this;
-    var staffLine = row.getClosestStaffLine(pitch);
     var ledgerLineWidth = unitSize * DocumentSettings.LedgerLineWidth;
-    if (pitch >= staffLine.topLinePitch + 2) {
-      for (var linePitch = staffLine.topLinePitch + 2; linePitch <= pitch; linePitch += 2) {
-        var y = row.getPitchY(linePitch);
-        this.drawLine(x - ledgerLineWidth / 2, y, x + ledgerLineWidth / 2, y);
+    if (pitch >= staff.topLinePitch + 2) {
+      for (var linePitch = staff.topLinePitch + 2; linePitch <= pitch; linePitch += 2) {
+        if (staff.containsPitch(linePitch)) {
+          var y = staff.getPitchY(linePitch);
+          this.drawLine(x - ledgerLineWidth / 2, y, x + ledgerLineWidth / 2, y);
+        }
       }
-    } else if (pitch <= staffLine.bottomLinePitch - 2) {
-      for (var _linePitch = staffLine.bottomLinePitch - 2; _linePitch >= pitch; _linePitch -= 2) {
-        var _y = row.getPitchY(_linePitch);
-        this.drawLine(x - ledgerLineWidth / 2, _y, x + ledgerLineWidth / 2, _y);
+    } else if (pitch <= staff.bottomLinePitch - 2) {
+      for (var _linePitch = staff.bottomLinePitch - 2; _linePitch >= pitch; _linePitch -= 2) {
+        if (staff.containsPitch(_linePitch)) {
+          var _y = staff.getPitchY(_linePitch);
+          this.drawLine(x - ledgerLineWidth / 2, _y, x + ledgerLineWidth / 2, _y);
+        }
       }
     }
   }
 }
-Renderer.DotSize = 0.8;
-;// ./src/music-score/engine/staff-line.ts
+;// ./src/music-score/engine/staff-and-tab.ts
+
 
 
 var ClefKind;
@@ -33126,19 +33140,65 @@ var ClefKind;
   ClefKind[ClefKind["Treble"] = 0] = "Treble";
   ClefKind[ClefKind["Bass"] = 1] = "Bass";
 })(ClefKind || (ClefKind = {}));
-class StaffLine {
-  constructor(clefKind, clefLinePitch, middleLinePitch, middleLineOffset, minPitch, maxPitch) {
+class MusicStaff {
+  constructor(clefKind, clefLinePitch, middleLinePitch, minPitch, maxPitch) {
     this.clefKind = clefKind;
     this.clefLinePitch = clefLinePitch;
     this.middleLinePitch = middleLinePitch;
-    this.middleLineOffset = middleLineOffset;
     this.minPitch = minPitch;
     this.maxPitch = maxPitch;
+    this.topLineY = 0;
+    this.bottomLineY = 0;
     this.clefImageAsset = clefKind === ClefKind.Treble ? ImageAsset.TrebleClefPng : ImageAsset.BassClefPng;
     this.topLinePitch = this.middleLinePitch + 4;
     this.bottomLinePitch = this.middleLinePitch - 4;
     this.octaveLower = this.clefLinePitch === Note.getNote("G3").pitch; // Guitar is played octave lower
   }
+  get middleLineY() {
+    return (this.topLineY + this.bottomLineY) / 2;
+  }
+  offset(dx, dy) {
+    this.topLineY += dy;
+    this.bottomLineY += dy;
+  }
+  getLineSpacing() {
+    return (this.bottomLineY - this.topLineY) / 4;
+  }
+  getPitchSpacing() {
+    return this.getLineSpacing() / 2;
+  }
+  containsPitch(pitch) {
+    Note.validatePitch(pitch);
+    return pitch >= this.minPitch && pitch <= this.maxPitch;
+  }
+  getPitchY(pitch) {
+    Assert.assert(this.containsPitch(pitch), "getPitchY: staff does not contain pitch " + pitch);
+    return this.bottomLineY + (this.bottomLinePitch - pitch) * this.getPitchSpacing();
+  }
+  getPitchAt(y) {
+    var pitch = Math.round(this.bottomLinePitch - (y - this.bottomLineY) / this.getPitchSpacing());
+    return this.containsPitch(pitch) ? pitch : undefined;
+  }
+  isPitchLine(pitch) {
+    return pitch % 2 === this.middleLinePitch % 2;
+  }
+  isPitchSpace(pitch) {
+    return pitch % 2 !== this.middleLinePitch % 2;
+  }
+}
+class GuitarTab {
+  constructor() {
+    this.top = 0;
+    this.bottom = 0;
+  }
+  /** Return Y coordinate of string. */
+  getStringY(stringId) {
+    return this.top + (this.bottom - this.top) / 6 * (stringId + 0.5);
+  }
+  offset(dx, dy) {
+    this.top += dy;
+    this.bottom += dy;
+  }
 }
 ;// ./src/music-score/engine/acc-state.ts
 class AccidentalState {
@@ -33599,6 +33659,46 @@ function alterTempoSpeed(tempo, speed) {
     }
   };
 }
+;// ./src/music-theory/assets/tunings.json
+var tunings_namespaceObject = /*#__PURE__*/JSON.parse('{"p":[{"name":"Standard","strings":["E2","A2","D3","G3","B3","E4"]},{"name":"B Standard","strings":["B1","E2","A2","D3","F#3","B3"]},{"name":"C Standard","strings":["C2","F2","A#2","D#3","G3","C4"]},{"name":"D Modal","strings":["D2","A2","D3","G3","A3","D4"]},{"name":"D Standard","strings":["D2","G2","C3","F3","A3","D4"]},{"name":"D# Standard","strings":["D#2","G#2","C#3","F#3","A#3","D#4"]},{"name":"Double Drop D","strings":["D2","A2","D3","G3","B3","D4"]},{"name":"Drop B","strings":["B1","F#2","B2","E3","G#3","C#4"]},{"name":"Drop C","strings":["C2","G2","C3","F3","A3","D4"]},{"name":"Drop D","strings":["D2","A2","D3","G3","B3","E4"]},{"name":"Low C","strings":["C2","G2","D3","G3","A3","D4"]},{"name":"New Standard","strings":["C2","G2","D3","A3","E4","G4"]},{"name":"Open A","strings":["E2","A2","C#3","E3","A3","E4"]},{"name":"Open A Minor","strings":["E2","A2","E3","A3","C4","E4"]},{"name":"Open C","strings":["C2","G2","C3","G3","C4","E4"]},{"name":"Open C Minor","strings":["C2","G2","C3","G3","C4","D#4"]},{"name":"Open D","strings":["D2","A2","D3","F#3","A3","D4"]},{"name":"Open D Minor","strings":["D2","A2","D3","F3","A3","D4"]},{"name":"Open E","strings":["E2","B2","E3","G#3","B3","E4"]},{"name":"Open E Minor","strings":["E2","B2","E3","G3","B3","E4"]},{"name":"Open G","strings":["D2","G2","D3","G3","B3","D4"]},{"name":"Open G Minor","strings":["D2","G2","D3","G3","A#3","D4"]}]}');
+;// ./src/music-theory/tuning.ts
+
+
+
+/*
+ * | string | stringId | freq    | fretboard (RH) | on tab        |
+ * |--------|----------|---------|----------------|---------------|
+ * |   1    |    0     | highest | bottom string  | top string    |
+ * |   6    |    5     | lowest  | top string     | bottom string |
+ * |--------|----------|---------|----------------|---------------|
+ */
+/** @public */
+var TuningNameList = tunings_namespaceObject.p.map(data => data.name);
+/** @public */
+var DefaultTuningName = TuningNameList[0];
+/** @public */
+function validateTuningName(tuningName) {
+  if (TuningNameList.indexOf(tuningName) >= 0) {
+    return tuningName;
+  } else {
+    return Assert.interrupt("Invalid tuning name: " + tuningName);
+  }
+}
+var TuningStringsCache = new LRUCache(100);
+/**
+ * @public
+ * @returns Array of open string notes, note for each string.
+ */
+function getTuningStrings(tuningName) {
+  var tuningStrings = TuningStringsCache.get(tuningName);
+  if (!tuningStrings) {
+    var tuningData = Assert.require(tunings_namespaceObject.p.find(data => data.name === tuningName), "Invalid tuning name: " + tuningName);
+    tuningStrings = tuningData.strings.slice().reverse().map(noteName => Note.getNote(noteName));
+    Assert.int_eq(tuningStrings.length, 6, "Tuning should have 6 strings but has " + tuningStrings.length + " strings.");
+    TuningStringsCache.set(tuningName, tuningStrings);
+  }
+  return tuningStrings;
+}
 ;// ./src/music-theory/index.ts
 
 
@@ -33609,6 +33709,7 @@ function alterTempoSpeed(tempo, speed) {
 
 
 
+
 ;// ./src/music-score/engine/obj-image.ts
 
 
@@ -33814,6 +33915,7 @@ class ObjText extends MusicObject {
     this.italic = (_d = textProps.italic) !== null && _d !== void 0 ? _d : false;
     this.boxed = (_e = textProps.boxed) !== null && _e !== void 0 ? _e : false;
     this.padding = (_f = textProps.padding) !== null && _f !== void 0 ? _f : this.boxed ? DefaultBoxedPadding : 0;
+    this.bgcolor = textProps.bgcolor;
     if (!isFinite(this.padding) || this.padding < 0) {
       this.padding = 0;
     }
@@ -33892,6 +33994,14 @@ class ObjText extends MusicObject {
       anchorY,
       italic
     } = this;
+    if (this.bgcolor !== undefined) {
+      ctx.save();
+      ctx.fillStyle = this.bgcolor;
+      ctx.beginPath();
+      ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
+      ctx.fill();
+      ctx.restore();
+    }
     var lineCount = this.textLines.length;
     var textHeight = lineCount * lineHeight;
     var fixY = -lineHeight * (italic ? 0.25 : 0.175);
@@ -33931,10 +34041,10 @@ class ObjText extends MusicObject {
 
 
 class ObjSignature extends MusicObject {
-  constructor(measure, staffLine) {
+  constructor(measure, staff) {
     super(measure);
     this.measure = measure;
-    this.staffLine = staffLine;
+    this.staff = staff;
     this.ksNeutralizeAccidentals = [];
     this.ksNewAccidentals = [];
     this.mi = new MSignature(this);
@@ -33950,9 +34060,9 @@ class ObjSignature extends MusicObject {
   }
   updateClefImage(renderer, showClef) {
     if (showClef) {
-      var img = renderer.getImageAsset(this.staffLine.clefImageAsset);
+      var img = renderer.getImageAsset(this.staff.clefImageAsset);
       this.clefImage = img ? new ObjImage(this, img, 0, 0.5, 0.1) : undefined;
-      this.eightBelowClef = this.clefImage && this.staffLine.octaveLower ? new ObjText(this, "8", 0.5, 0) : undefined;
+      this.eightBelowClef = this.clefImage && this.staff.octaveLower ? new ObjText(this, "8", 0.5, 0) : undefined;
     } else {
       this.clefImage = undefined;
     }
@@ -34017,19 +34127,19 @@ class ObjSignature extends MusicObject {
     }
   }
   getAccidentalPitch(accNote) {
-    var clefKind = this.staffLine.clefKind;
+    var clefKind = this.staff.clefKind;
     var lowestAccidentalPitch = undefined;
     if (clefKind === ClefKind.Treble) {
       if (accNote.accidental > 0) {
-        lowestAccidentalPitch = this.staffLine.bottomLinePitch + 3;
+        lowestAccidentalPitch = this.staff.bottomLinePitch + 3;
       } else if (accNote.accidental < 0) {
-        lowestAccidentalPitch = this.staffLine.bottomLinePitch + 1;
+        lowestAccidentalPitch = this.staff.bottomLinePitch + 1;
       }
     } else if (clefKind === ClefKind.Bass) {
       if (accNote.accidental > 0) {
-        lowestAccidentalPitch = this.staffLine.bottomLinePitch + 1;
+        lowestAccidentalPitch = this.staff.bottomLinePitch + 1;
       } else if (accNote.accidental < 0) {
-        lowestAccidentalPitch = this.staffLine.bottomLinePitch - 1;
+        lowestAccidentalPitch = this.staff.bottomLinePitch - 1;
       }
     }
     if (lowestAccidentalPitch !== undefined) {
@@ -34094,7 +34204,8 @@ class ObjSignature extends MusicObject {
       unitSize
     } = renderer;
     var {
-      measure
+      measure,
+      staff
     } = this;
     var {
       row
@@ -34105,7 +34216,7 @@ class ObjSignature extends MusicObject {
     if (this.clefImage) {
       x += paddingX;
       this.clefImage.layout(renderer);
-      this.clefImage.offset(x, row.getPitchY(this.staffLine.clefLinePitch));
+      this.clefImage.offset(x, staff.getPitchY(staff.clefLinePitch));
       this.rect.expandInPlace(this.clefImage.getRect());
       x = this.rect.right;
       if (this.eightBelowClef) {
@@ -34117,7 +34228,7 @@ class ObjSignature extends MusicObject {
     }
     if (this.measureNumber) {
       this.measureNumber.layout(renderer);
-      var y = this.clefImage ? this.clefImage.getRect().top : row.getPitchY(this.staffLine.topLinePitch);
+      var y = this.clefImage ? this.clefImage.getRect().top : staff.topLineY;
       this.measureNumber.offset(0, y);
       this.rect.expandInPlace(this.measureNumber.getRect());
       x = Math.max(x, this.rect.right);
@@ -34125,38 +34236,44 @@ class ObjSignature extends MusicObject {
     if (this.ksNeutralizeAccidentals.length > 0) {
       x += paddingX;
       this.ksNeutralizeAccidentals.forEach(acc => {
-        acc.obj.layout(renderer);
-        acc.obj.offset(x + acc.obj.getRect().leftw, row.getPitchY(acc.pitch));
-        this.rect.expandInPlace(acc.obj.getRect());
-        x = this.rect.right;
+        var accStaff = row.getStaff(acc.pitch);
+        if (accStaff) {
+          acc.obj.layout(renderer);
+          acc.obj.offset(x + acc.obj.getRect().leftw, accStaff.getPitchY(acc.pitch));
+          this.rect.expandInPlace(acc.obj.getRect());
+          x = this.rect.right;
+        }
       });
     }
     if (this.ksNewAccidentals) {
       x += paddingX;
       this.ksNewAccidentals.forEach(acc => {
-        acc.obj.layout(renderer);
-        acc.obj.offset(x + acc.obj.getRect().leftw, row.getPitchY(acc.pitch));
-        this.rect.expandInPlace(acc.obj.getRect());
-        x = this.rect.right;
+        var accStaff = row.getStaff(acc.pitch);
+        if (accStaff) {
+          acc.obj.layout(renderer);
+          acc.obj.offset(x + acc.obj.getRect().leftw, accStaff.getPitchY(acc.pitch));
+          this.rect.expandInPlace(acc.obj.getRect());
+          x = this.rect.right;
+        }
       });
     }
     var right = x;
     if (this.beatCountText) {
       this.beatCountText.layout(renderer);
-      this.beatCountText.offset(x + paddingX, row.getPitchY(this.staffLine.middleLinePitch + 2));
+      this.beatCountText.offset(x + paddingX, staff.getPitchY(staff.middleLinePitch + 2));
       this.rect.expandInPlace(this.beatCountText.getRect());
       right = Math.max(right, this.rect.right);
     }
     if (this.beatSizeText) {
       this.beatSizeText.layout(renderer);
-      this.beatSizeText.offset(x + paddingX, row.getPitchY(this.staffLine.bottomLinePitch + 2));
+      this.beatSizeText.offset(x + paddingX, staff.getPitchY(staff.bottomLinePitch + 2));
       this.rect.expandInPlace(this.beatSizeText.getRect());
       right = Math.max(right, this.rect.right);
     }
     x = right;
     if (this.tempoText) {
       this.tempoText.layout(renderer);
-      this.tempoText.offset(x, Math.min(this.rect.top, row.getPitchY(this.staffLine.topLinePitch)));
+      this.tempoText.offset(x, Math.min(this.rect.top, staff.topLineY));
       this.rect.expandInPlace(this.tempoText.getRect());
     }
     this.rect.expandInPlace(new DivRect(this.rect.left, this.rect.right + paddingX, this.rect.centerY, this.rect.centerY));
@@ -34294,13 +34411,19 @@ ObjArpeggio.NumCycles = 5;
 var StaffKind;
 (function (StaffKind) {
   /** Treble staff has treble (G-) clef. */
-  StaffKind[StaffKind["Treble"] = 0] = "Treble";
-  /** TrebleForGuitar has treble clef but is one octave lower. */
-  StaffKind[StaffKind["TrebleForGuitar"] = 1] = "TrebleForGuitar";
+  StaffKind[StaffKind["Treble"] = 1] = "Treble";
   /** Bass staff has bass (F-) clef. */
   StaffKind[StaffKind["Bass"] = 2] = "Bass";
   /** Grand staff has both treble and bass clefs. */
   StaffKind[StaffKind["Grand"] = 3] = "Grand";
+  /** GuitarTreble has treble clef but is one octave lower. */
+  StaffKind[StaffKind["GuitarTreble"] = 4] = "GuitarTreble";
+  // /** GuitarTab has tab for guitar. */
+  StaffKind[StaffKind["GuitarTab"] = 8] = "GuitarTab";
+  // /** GuitarTrebleAndTab has treble clef and tab for guitar. */
+  StaffKind[StaffKind["GuitarTrebleAndTab"] = 12] = "GuitarTrebleAndTab";
+  /** @deprecated TrebleForGuitar was replaced by GuitarTreble. */
+  StaffKind[StaffKind["TrebleForGuitar"] = 4] = "TrebleForGuitar";
 })(StaffKind || (StaffKind = {}));
 /** @public */
 var Stem;
@@ -34392,19 +34515,23 @@ var Label;
 
 
 
-
+class RestStaffObjects {
+  constructor() {
+    this.dotRect = new DivRect();
+  }
+}
 class ObjRest extends MusicObject {
   constructor(col, voiceId, noteLength, options) {
     var _a, _b;
     super(col);
     this.col = col;
     this.voiceId = voiceId;
-    this.dotRect = new DivRect();
     this.ownAvgPitch = this.measure.updateOwnAvgPitch(voiceId, options === null || options === void 0 ? void 0 : options.pitch);
     this.ownStemDir = this.measure.updateOwnStemDir(this /*, options?.stem*/);
     this.color = (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : "black";
     this.hide = (_b = options === null || options === void 0 ? void 0 : options.hide) !== null && _b !== void 0 ? _b : false;
     this.rhythmProps = new RhythmProps(noteLength, options === null || options === void 0 ? void 0 : options.dotted, options === null || options === void 0 ? void 0 : options.triplet);
+    this.staffObjs = this.row.hasStaff ? new RestStaffObjects() : undefined;
     this.mi = new MRest(this);
   }
   getMusicInterface() {
@@ -34426,7 +34553,11 @@ class ObjRest extends MusicObject {
     return this.rhythmProps.dotted;
   }
   get stemDir() {
-    return this.beamGroup ? this.beamGroup.stemDir : this.ownStemDir;
+    if (this.staffObjs) {
+      return this.staffObjs.beamGroup ? this.staffObjs.beamGroup.stemDir : this.ownStemDir;
+    } else {
+      return Stem.Up;
+    }
   }
   get triplet() {
     return this.rhythmProps.triplet;
@@ -34435,13 +34566,18 @@ class ObjRest extends MusicObject {
     return this.rect.contains(x, y) ? [this] : [];
   }
   getBeamGroup() {
-    return this.beamGroup;
+    var _a;
+    return (_a = this.staffObjs) === null || _a === void 0 ? void 0 : _a.beamGroup;
   }
   setBeamGroup(beam) {
-    this.beamGroup = beam;
+    if (this.staffObjs) {
+      this.staffObjs.beamGroup = beam;
+    }
   }
   resetBeamGroup() {
-    this.beamGroup = undefined;
+    if (this.staffObjs) {
+      this.staffObjs.beamGroup = undefined;
+    }
   }
   getBeamX() {
     return this.rect.centerX;
@@ -34471,8 +34607,9 @@ class ObjRest extends MusicObject {
   }
   updateAccidentalState(accState) {}
   layout(renderer, accState) {
-    if (this.hide) {
+    if (this.hide || !this.staffObjs) {
       this.rect = new DivRect();
+      return;
     }
     var {
       unitSize
@@ -34512,30 +34649,32 @@ class ObjRest extends MusicObject {
       bottomh = unitSize * (1 + flagCount + adj);
     }
     if (dotted) {
-      var dotWidth = Renderer.DotSize * unitSize;
-      var dotX = rightw + (DocumentSettings.RestDotSpace + Renderer.DotSize / 2) * unitSize;
+      var dotWidth = DocumentSettings.DotSize * unitSize;
+      var dotX = rightw + (DocumentSettings.RestDotSpace + DocumentSettings.DotSize / 2) * unitSize;
       var dotY = this.getRestDotVerticalDisplacement(noteLength) * unitSize;
-      this.dotRect = DivRect.createCentered(dotX, dotY, dotWidth, dotWidth);
-      toph = Math.max(toph, this.dotRect.toph);
-      bottomh = Math.max(bottomh, this.dotRect.bottomh);
-      rightw += (DocumentSettings.RestDotSpace + Renderer.DotSize) * unitSize;
+      this.staffObjs.dotRect = DivRect.createCentered(dotX, dotY, dotWidth, dotWidth);
+      toph = Math.max(toph, this.staffObjs.dotRect.toph);
+      bottomh = Math.max(bottomh, this.staffObjs.dotRect.bottomh);
+      rightw += (DocumentSettings.RestDotSpace + DocumentSettings.DotSize) * unitSize;
     }
     this.rect = new DivRect(-leftw, 0, rightw, -toph, 0, bottomh);
     var restPitch = ownAvgPitch;
     // Make sure restPitch is line, not space
-    if (this.row.isPitchSpace(restPitch)) {
-      var staffLine = this.row.getClosestStaffLine(restPitch);
-      restPitch += restPitch >= staffLine.middleLinePitch ? 1 : -1;
+    var staff = this.row.getStaff(restPitch);
+    if (staff && staff.isPitchSpace(restPitch)) {
+      restPitch += restPitch >= staff.middleLinePitch ? 1 : -1;
+      this.offset(0, staff.getPitchY(restPitch));
     }
-    this.offset(0, this.row.getPitchY(restPitch));
   }
   offset(dx, dy) {
-    this.dotRect.offsetInPlace(dx, dy);
+    if (this.staffObjs) {
+      this.staffObjs.dotRect.offsetInPlace(dx, dy);
+    }
     this.rect.offsetInPlace(dx, dy);
   }
   draw(renderer) {
     var ctx = renderer.getCanvasContext();
-    if (!ctx || this.hide) {
+    if (!ctx || this.hide || !this.staffObjs) {
       return;
     }
     renderer.drawDebugRect(this.rect);
@@ -34594,7 +34733,7 @@ class ObjRest extends MusicObject {
       }
     }
     if (dotted) {
-      var r = this.dotRect;
+      var r = this.staffObjs.dotRect;
       renderer.fillCircle(r.centerX, r.centerY, r.width / 2);
     }
   }
@@ -34608,8 +34747,9 @@ class ObjRest extends MusicObject {
 
 
 class ObjArc extends MusicObject {
-  constructor(arcData, measure, leftNoteGroup, leftNote) {
+  constructor(arcProps, measure, leftNoteGroup, leftNote) {
     super(measure);
+    this.arcProps = arcProps;
     this.lx = 0;
     this.ly = 0;
     this.rx = 0;
@@ -34620,7 +34760,6 @@ class ObjArc extends MusicObject {
     this.cp2y = 0;
     this.arcHeight = 0;
     this.measure = measure;
-    this.arcData = arcData;
     this.leftNoteGroup = leftNoteGroup;
     this.leftNote = leftNote;
     if ((arguments.length <= 4 ? undefined : arguments[4]) instanceof ObjNoteGroup && (arguments.length <= 5 ? undefined : arguments[5]) instanceof Note) {
@@ -34633,19 +34772,16 @@ class ObjArc extends MusicObject {
       this.tieLength = arguments.length <= 4 ? undefined : arguments[4];
     }
     this.mi = new MArc(this);
-    this.measure.addArc(this);
+    this.measure.addArcObject(this);
   }
   getMusicInterface() {
     return this.mi;
   }
-  getArcData() {
-    return this.arcData;
-  }
   isTie() {
-    return this.arcData.arcType === "tie";
+    return this.arcProps.arcType === "tie";
   }
   isSlur() {
-    return this.arcData.arcType === "slur";
+    return this.arcProps.arcType === "slur";
   }
   isInsideMeasure() {
     return this.rightNoteGroup === undefined || this.leftNoteGroup.measure === this.rightNoteGroup.measure;
@@ -34673,17 +34809,15 @@ class ObjArc extends MusicObject {
     var {
       arcPos,
       arcDir
-    } = this.arcData;
-    var leftPos = leftNoteGroup.getArcAnchorPoint(renderer, leftNoteGroup, leftNote, arcPos, "left");
-    leftPos = Assert.require(leftPos, "Left arc anchor point is required!");
-    var rightPos = rightNoteGroup !== undefined && rightNote !== undefined ? rightNoteGroup.getArcAnchorPoint(renderer, rightNoteGroup, rightNote, arcPos, "right") : this.tieLength === TieLength.ToMeasureEnd ? {
+    } = this.arcProps;
+    var leftPos = leftNoteGroup.getArcAnchorPoint(leftNote, arcPos, "left");
+    var rightPos = rightNoteGroup !== undefined && rightNote !== undefined ? rightNoteGroup.getArcAnchorPoint(rightNote, arcPos, "right") : this.tieLength === TieLength.ToMeasureEnd ? {
       x: measure.getColumnsContentRect().right,
       y: leftPos.y
     } : {
       x: leftPos.x + unitSize * DocumentSettings.ShortTieLength,
       y: leftPos.y
     };
-    rightPos = Assert.require(rightPos, "Right arc anchor point is required!");
     var lx, ly, rx, ry;
     if (rightNoteGroup === undefined) {
       // TieLength.Short | TieLength.ToMeasureEnd
@@ -34772,25 +34906,30 @@ class ObjArc extends MusicObject {
     ctx.fill();
   }
 }
-;// ./src/music-score/engine/arc-data.ts
+;// ./src/music-score/engine/arc-props.ts
 
 
 
-class CollectedArcData {
+class ArcProps {
   constructor(arcType, arcSpan, arcPos, startNoteGroup) {
     this.arcType = arcType;
     this.arcSpan = arcSpan;
     this.arcPos = arcPos;
-    this.noteGroups = [];
     this.arcDir = "down";
-    this.noteGroups.push(startNoteGroup);
+    this.noteGroups = [startNoteGroup];
+  }
+  getStartNoteGroup() {
+    return this.noteGroups[0];
+  }
+  startsWith(noteGroup) {
+    return this.noteGroups[0] === noteGroup;
   }
   /**
    *
    * @param noteGroup -
    * @returns true if noteGroup was added, false if not.
    */
-  add(noteGroup) {
+  addNoteGroup(noteGroup) {
     if (this.arcSpan === TieLength.Short || this.arcSpan === TieLength.ToMeasureEnd) {
       // Contains already 1 NoteGroup
       return false;
@@ -34801,9 +34940,6 @@ class CollectedArcData {
       return false;
     }
   }
-  startsWith(noteGroup) {
-    return this.noteGroups[0] === noteGroup;
-  }
   computeParams() {
     var stemDir = this.noteGroups[0].stemDir;
     if (this.arcPos === ArcPos.StemTip) {
@@ -34822,16 +34958,24 @@ class CollectedArcData {
         row
       } = this.noteGroups[0].measure;
       var notePitch = this.noteGroups[0].ownAvgPitch;
-      var staffLine = row.getClosestStaffLine(notePitch);
-      this.arcDir = notePitch < staffLine.middleLinePitch ? "down" : "up";
+      var staff = row.getStaff(notePitch);
+      this.arcDir = !staff || notePitch < staff.middleLinePitch ? "down" : "up";
     } else if (this.arcPos === ArcPos.Above) {
       this.arcDir = "up";
     } else if (this.arcPos === ArcPos.Below) {
       this.arcDir = "down";
     }
   }
-  createObjArcs() {
+  removeArcs() {
+    this.noteGroups.forEach(n => {
+      n.measure.removeArcObjects();
+      n.removeArcProps();
+    });
+    this.noteGroups.length = 1;
+  }
+  createArcs() {
     var _this = this;
+    this.getStartNoteGroup().collectArcProps();
     this.computeParams();
     var {
       arcSpan,
@@ -34847,10 +34991,10 @@ class CollectedArcData {
         var _loop = function _loop() {
           var leftNoteGroup = _this.noteGroups[i];
           var rightNoteGroup = _this.noteGroups[i + 1];
-          leftNoteGroup.notes.forEach(note => {
-            // Create arc from left to right only if note is found in all note-groups so far.
-            if (_this.noteGroups.every(noteGroup => noteGroup.notes.some(n => n.equals(note)))) {
-              _this.createObjArc(leftNoteGroup, note, rightNoteGroup, note);
+          leftNoteGroup.notes.forEach(leftNote => {
+            var rightNote = rightNoteGroup.notes.find(rightNote => rightNote.equals(leftNote));
+            if (rightNote) {
+              _this.createObjArc(leftNoteGroup, leftNote, rightNoteGroup, leftNote);
             }
           });
         };
@@ -35137,6 +35281,36 @@ class ObjBeamGroup extends MusicObject {
 
 
 
+function sortNoteStringData(notes, strings) {
+  var stringArr = Utils.Arr.isArray(strings) ? strings : strings !== undefined ? [strings] : [];
+  var noteStringData = notes.map((note, i) => {
+    return {
+      note,
+      string: stringArr[i]
+    };
+  });
+  noteStringData = Utils.Arr.removeDuplicatesCmp(noteStringData, (a, b) => a.note.equals(b.note)).sort((a, b) => Note.compareFunc(a.note, b.note));
+  return {
+    notes: noteStringData.map(e => e.note),
+    strings: noteStringData.every(e => e.string === undefined) ? undefined : noteStringData.map(e => e.string)
+  };
+}
+function solveArpeggio(a) {
+  return a === true || a === Arpeggio.Up ? Arpeggio.Up : a === Arpeggio.Down ? Arpeggio.Down : undefined;
+}
+class NoteStaffObjects {
+  constructor() {
+    this.noteHeadRects = [];
+    this.dotRects = [];
+    this.accidentals = [];
+    this.flagRects = [];
+  }
+}
+class NoteTabObjects {
+  constructor() {
+    this.fretNumbers = [];
+  }
+}
 class ObjNoteGroup extends MusicObject {
   constructor(col, voiceId, notes, noteLength, options) {
     var _a, _b, _c, _d, _e;
@@ -35144,28 +35318,37 @@ class ObjNoteGroup extends MusicObject {
     this.col = col;
     this.voiceId = voiceId;
     this.notes = notes;
-    this.tieDatas = [];
-    this.slurDatas = [];
-    this.noteHeadRects = [];
-    this.dotRects = [];
-    this.accidentals = [];
-    this.flagRects = [];
+    this.tieProps = [];
+    this.slurProps = [];
     this.leftBeamCount = 0;
     this.rightBeamCount = 0;
     Assert.int_gte(notes.length, 1, "Cannot create note group object because notes array is empty.");
-    this.notes = Note.sort(Note.removeDuplicates(notes));
+    var noteStringData = sortNoteStringData(notes, options === null || options === void 0 ? void 0 : options.string);
+    this.notes = noteStringData.notes;
     this.minPitch = this.notes[0].pitch;
     this.maxPitch = this.notes[this.notes.length - 1].pitch;
     this.ownAvgPitch = this.measure.updateOwnAvgPitch(voiceId, Math.round((this.minPitch + this.maxPitch) / 2));
     this.ownStemDir = this.measure.updateOwnStemDir(this, options === null || options === void 0 ? void 0 : options.stem);
+    this.ownString = this.measure.updateOwnString(this, noteStringData.strings);
     this.color = (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : "black";
     this.staccato = (_b = options === null || options === void 0 ? void 0 : options.staccato) !== null && _b !== void 0 ? _b : false;
     this.diamond = (_c = options === null || options === void 0 ? void 0 : options.diamond) !== null && _c !== void 0 ? _c : false;
-    this.arpeggio = options === null || options === void 0 ? void 0 : options.arpeggio;
-    this.tieSpan = options === null || options === void 0 ? void 0 : options.tieSpan;
-    this.slurSpan = options === null || options === void 0 ? void 0 : options.slurSpan;
-    this.arcPos = (_e = (_d = options === null || options === void 0 ? void 0 : options.tiePos) !== null && _d !== void 0 ? _d : options === null || options === void 0 ? void 0 : options.slurPos) !== null && _e !== void 0 ? _e : ArcPos.Auto;
+    this.arpeggio = solveArpeggio(options === null || options === void 0 ? void 0 : options.arpeggio);
     this.rhythmProps = new RhythmProps(noteLength, options === null || options === void 0 ? void 0 : options.dotted, options === null || options === void 0 ? void 0 : options.triplet);
+    if ((options === null || options === void 0 ? void 0 : options.tieSpan) !== undefined) {
+      this.startTie = new ArcProps("tie", options.tieSpan, (_d = options.tiePos) !== null && _d !== void 0 ? _d : ArcPos.Auto, this);
+      this.doc.addArcProps(this.startTie);
+    }
+    if ((options === null || options === void 0 ? void 0 : options.slurSpan) !== undefined) {
+      this.startSlur = new ArcProps("slur", options.slurSpan, (_e = options.slurPos) !== null && _e !== void 0 ? _e : ArcPos.Auto, this);
+      this.doc.addArcProps(this.startSlur);
+    }
+    if (!this.row.hasStaff) {
+      Assert.assert(this.startTie === undefined, "Ties not implemented for guitar tabs alone, staff is required!");
+      Assert.assert(this.startSlur === undefined, "Slurs not implemented for guitar tabs alone, staff is required!");
+    }
+    this.staffObjs = this.row.hasStaff ? new NoteStaffObjects() : undefined;
+    this.tabObjs = this.row.hasTab ? new NoteTabObjects() : undefined;
     this.mi = new MNoteGroup(this);
   }
   getMusicInterface() {
@@ -35181,7 +35364,11 @@ class ObjNoteGroup extends MusicObject {
     return this.col.row;
   }
   get stemDir() {
-    return this.beamGroup ? this.beamGroup.stemDir : this.ownStemDir;
+    if (this.staffObjs) {
+      return this.staffObjs.beamGroup ? this.staffObjs.beamGroup.stemDir : this.ownStemDir;
+    } else {
+      return Stem.Up;
+    }
   }
   get triplet() {
     return this.rhythmProps.triplet;
@@ -35190,12 +35377,25 @@ class ObjNoteGroup extends MusicObject {
     if (!this.rect.contains(x, y)) {
       return [];
     }
-    for (var i = 0; i < this.accidentals.length; i++) {
-      var acc = this.accidentals[i];
-      if (acc) {
-        var arr = acc.pick(x, y);
-        if (arr.length > 0) {
-          return [this, ...arr];
+    if (this.staffObjs) {
+      for (var i = 0; i < this.staffObjs.accidentals.length; i++) {
+        var acc = this.staffObjs.accidentals[i];
+        if (acc) {
+          var arr = acc.pick(x, y);
+          if (arr.length > 0) {
+            return [this, ...arr];
+          }
+        }
+      }
+    }
+    if (this.tabObjs) {
+      for (var _i = 0; _i < this.tabObjs.fretNumbers.length; _i++) {
+        var fn = this.tabObjs.fretNumbers[_i];
+        if (fn) {
+          var _arr = fn.pick(x, y);
+          if (_arr.length > 0) {
+            return [this, ..._arr];
+          }
         }
       }
     }
@@ -35207,120 +35407,124 @@ class ObjNoteGroup extends MusicObject {
   getBottomNote() {
     return this.notes[0];
   }
-  getArcAnchorPoint(renderer, noteGroup, note, arcPos, side) {
-    if (arcPos === ArcPos.Auto) {
-      arcPos = ArcPos.Below;
-    }
-    var hasStem = !!this.stemRect;
-    var stemSide = !hasStem ? undefined : this.stemDir === Stem.Up ? "right" : "left";
-    var stemDir = this.stemDir;
+  getArcAnchorPoint(note, arcPos, side) {
     var noteId = this.notes.findIndex(note2 => note2.equals(note));
-    if (noteId < 0) {
-      return undefined;
-    }
-    var r = this.noteHeadRects[noteId];
-    if (!r) {
-      return undefined;
-    }
-    var {
-      unitSize
-    } = renderer;
-    if (arcPos === ArcPos.StemTip && !hasStem) {
-      arcPos = this.stemDir === Stem.Up ? ArcPos.Above : ArcPos.Below;
-    }
-    var centerX = r.centerX;
-    var centerY = r.centerY;
-    var leftX = centerX - unitSize * 1.5;
-    var rightX = centerX + unitSize * 1.5;
-    var aboveY = centerY - unitSize * 1.5;
-    var belowY = centerY + unitSize * 1.5;
-    if (arcPos === ArcPos.Middle) {
-      return side === "left" ? {
-        x: rightX,
-        y: centerY
-      } : {
-        x: leftX,
-        y: centerY
+    if (!this.staffObjs || noteId < 0 || noteId >= this.staffObjs.noteHeadRects.length) {
+      var r = this.getRect();
+      return {
+        x: r.centerX,
+        y: r.bottom
       };
-    } else if (arcPos === ArcPos.Above) {
-      if (!hasStem || stemDir === Stem.Down) {
-        return {
-          x: centerX,
-          y: aboveY
-        };
-      } else {
-        return {
-          x: side === "left" && stemSide === "right" ? rightX : side === "right" && stemSide === "left" ? leftX : centerX,
-          y: aboveY
-        };
-      }
-    } else if (arcPos === ArcPos.Below) {
-      if (!hasStem || stemDir === Stem.Up) {
-        return {
-          x: centerX,
-          y: belowY
-        };
-      } else {
-        return {
-          x: side === "left" && stemSide === "right" ? rightX : side === "right" && stemSide === "left" ? leftX : centerX,
-          y: belowY
-        };
-      }
-    } else if (arcPos === ArcPos.StemTip) {
-      var stemRect = Assert.require(this.stemRect, "Cannot get stem tip arc anchort point because this note group has no stem.");
-      if (noteGroup.stemDir === Stem.Up) {
-        return {
-          x: centerX,
-          y: stemRect.top - unitSize
-        };
-      } else if (noteGroup.stemDir === Stem.Down) {
-        return {
-          x: centerX,
-          y: stemRect.bottom + unitSize
+    }
+    var noteHeadRect = this.staffObjs.noteHeadRects[noteId];
+    var stemRect = this.staffObjs.stemRect;
+    var stemDir = this.stemDir;
+    var hasStem = stemRect !== undefined;
+    var stemSide = !hasStem ? undefined : stemDir === Stem.Up ? "right" : "left";
+    var padding = noteHeadRect.height / 2;
+    var centerX = noteHeadRect.centerX;
+    var centerY = noteHeadRect.centerY;
+    var leftX = noteHeadRect.left - padding;
+    var rightX = noteHeadRect.right + padding;
+    var aboveY = noteHeadRect.top - padding;
+    var belowY = noteHeadRect.bottom + padding;
+    if (arcPos === ArcPos.Auto) {
+      arcPos = ArcPos.Below;
+    } else if (arcPos === ArcPos.StemTip && !hasStem) {
+      arcPos = stemDir === Stem.Up ? ArcPos.Above : ArcPos.Below;
+    }
+    switch (arcPos) {
+      case ArcPos.Middle:
+        return side === "left" ? {
+          x: rightX,
+          y: centerY
+        } : {
+          x: leftX,
+          y: centerY
         };
-      }
+      case ArcPos.Above:
+        if (!hasStem || stemDir === Stem.Down) {
+          return {
+            x: centerX,
+            y: aboveY
+          };
+        } else {
+          return {
+            x: side === "left" && stemSide === "right" ? rightX : side === "right" && stemSide === "left" ? leftX : centerX,
+            y: aboveY
+          };
+        }
+      case ArcPos.Below:
+        if (!hasStem || stemDir === Stem.Up) {
+          return {
+            x: centerX,
+            y: belowY
+          };
+        } else {
+          return {
+            x: side === "left" && stemSide === "right" ? rightX : side === "right" && stemSide === "left" ? leftX : centerX,
+            y: belowY
+          };
+        }
+      case ArcPos.StemTip:
+        // stemRect is defined.
+        if (stemDir === Stem.Up) {
+          return {
+            x: centerX,
+            y: stemRect.top - padding
+          };
+        } else if (stemDir === Stem.Down) {
+          return {
+            x: centerX,
+            y: stemRect.bottom + padding
+          };
+        }
+      default:
+        Assert.interrupt("Invalid arcPos: " + arcPos);
     }
-    return undefined;
   }
-  getPrevNoteGroup() {
+  getNextNoteGroup() {
     var voiceNoteGroups = this.measure.getVoiceSymbols(this.voiceId).filter(s => s instanceof ObjNoteGroup);
     var i = voiceNoteGroups.indexOf(this);
-    if (i > 0) {
-      return voiceNoteGroups[i - 1];
+    if (i < 0) {
+      return undefined;
+    } else if (i < voiceNoteGroups.length - 1) {
+      return voiceNoteGroups[i + 1];
     }
-    var m = this.measure.getPrevMeasure();
+    var m = this.measure.getNextMeasure();
     while (m) {
       var _voiceNoteGroups = m.getVoiceSymbols(this.voiceId).filter(s => s instanceof ObjNoteGroup);
       if (_voiceNoteGroups.length > 0) {
-        return _voiceNoteGroups[_voiceNoteGroups.length - 1];
+        return _voiceNoteGroups[0];
       }
-      m = m.getPrevMeasure();
+      m = m.getNextMeasure();
     }
     return undefined;
   }
-  collectArcDatas() {
-    if (this.tieSpan !== undefined) {
-      this.tieDatas.push(new CollectedArcData("tie", this.tieSpan, this.arcPos, this));
-    }
-    if (this.slurSpan !== undefined) {
-      this.slurDatas.push(new CollectedArcData("slur", this.slurSpan, this.arcPos, this));
+  collectArcProps() {
+    if (this.startTie) {
+      this.tieProps.push(this.startTie);
+      var next = this.getNextNoteGroup();
+      while (next && this.startTie.addNoteGroup(next)) {
+        next.tieProps.push(this.startTie);
+        next = next.getNextNoteGroup();
+      }
     }
-    var prevNoteGroup = this.getPrevNoteGroup();
-    if (prevNoteGroup) {
-      prevNoteGroup.tieDatas.forEach(tieData => {
-        if (tieData.add(this)) {
-          this.tieDatas.push(tieData);
-        }
-      });
-      prevNoteGroup.slurDatas.forEach(slurData => {
-        if (slurData.add(this)) {
-          this.slurDatas.push(slurData);
-        }
-      });
+    if (this.startSlur) {
+      this.slurProps.push(this.startSlur);
+      var _next = this.getNextNoteGroup();
+      while (_next && this.startSlur.addNoteGroup(_next)) {
+        _next.slurProps.push(this.startSlur);
+        _next = _next.getNextNoteGroup();
+      }
     }
   }
+  removeArcProps() {
+    this.tieProps = [];
+    this.slurProps = [];
+  }
   getPlaySlur() {
-    var slurs = this.slurDatas.map(slurData => slurData.startsWith(this) ? "first" : "slurred");
+    var slurs = this.slurProps.map(slur => slur.startsWith(this) ? "first" : "slurred");
     if (slurs.indexOf("first") >= 0) {
       return "first";
     } else if (slurs.indexOf("slurred") >= 0) {
@@ -35329,26 +35533,29 @@ class ObjNoteGroup extends MusicObject {
       return undefined;
     }
   }
-  createObjArcs() {
-    this.tieDatas.forEach(tieData => tieData.createObjArcs());
-    this.slurDatas.forEach(slurData => slurData.createObjArcs());
-  }
   getBeamGroup() {
-    return this.beamGroup;
+    var _a;
+    return (_a = this.staffObjs) === null || _a === void 0 ? void 0 : _a.beamGroup;
   }
   setBeamGroup(beam) {
-    this.beamGroup = beam;
+    if (this.staffObjs) {
+      this.staffObjs.beamGroup = beam;
+    }
   }
   resetBeamGroup() {
-    this.leftBeamCount = this.rightBeamCount = 0;
-    this.beamGroup = undefined;
+    if (this.staffObjs) {
+      this.leftBeamCount = this.rightBeamCount = 0;
+      this.staffObjs.beamGroup = undefined;
+    }
   }
   getBeamX() {
-    var stemRect = Assert.require(this.stemRect, "Cannot get beam x-coordinate because this note group has no stem.");
+    var _a;
+    var stemRect = Assert.require((_a = this.staffObjs) === null || _a === void 0 ? void 0 : _a.stemRect, "Cannot get beam x-coordinate because this note group has no stem.");
     return stemRect.centerX;
   }
   getBeamY() {
-    var stemRect = Assert.require(this.stemRect, "Cannot get beam y-coordinate because this note group has no stem.");
+    var _a;
+    var stemRect = Assert.require((_a = this.staffObjs) === null || _a === void 0 ? void 0 : _a.stemRect, "Cannot get beam y-coordinate because this note group has no stem.");
     return this.stemDir === Stem.Up ? stemRect.top : stemRect.bottom;
   }
   getStemHeight(renderer) {
@@ -35376,13 +35583,13 @@ class ObjNoteGroup extends MusicObject {
     return this.rightBeamCount;
   }
   getPlayTicks(note) {
-    var tiedTicks = this.tieDatas.map(tieData => {
-      var tieNoteGroups = tieData.noteGroups;
+    var tiedTicks = this.tieProps.map(tie => {
+      var tieNoteGroups = tie.noteGroups;
       var j = tieNoteGroups.indexOf(this);
       if (j < 0) {
         return 0;
       }
-      if (tieData.arcSpan === TieLength.Short || tieData.arcSpan === TieLength.ToMeasureEnd) {
+      if (tie.arcSpan === TieLength.Short || tie.arcSpan === TieLength.ToMeasureEnd) {
         return Math.max(this.rhythmProps.ticks, this.measure.getMeasureTicks() - this.col.positionTicks);
       }
       var prev = tieNoteGroups[j - 1];
@@ -35406,6 +35613,7 @@ class ObjNoteGroup extends MusicObject {
     });
   }
   layout(renderer, accState) {
+    var _a, _b;
     var {
       unitSize
     } = renderer;
@@ -35415,102 +35623,157 @@ class ObjNoteGroup extends MusicObject {
     } = this;
     var {
       dotted,
-      flagCount,
-      noteLength
+      flagCount
     } = this.rhythmProps;
-    this.noteHeadRects = [];
-    this.dotRects = [];
-    this.accidentals = [];
-    this.stemRect = undefined;
-    var dotWidth = Renderer.DotSize * unitSize;
+    if (this.staffObjs) {
+      this.staffObjs.noteHeadRects = [];
+      this.staffObjs.dotRects = [];
+      this.staffObjs.accidentals = [];
+      this.staffObjs.stemRect = undefined;
+    }
+    if (this.tabObjs) {
+      this.tabObjs.fretNumbers = [];
+    }
+    var dotWidth = DocumentSettings.DotSize * unitSize;
     var noteHeadWidth = (this.diamond ? DocumentSettings.DiamondNoteHeadSize : DocumentSettings.NoteHeadWidth) * unitSize;
     var noteHeadHeight = (this.diamond ? DocumentSettings.DiamondNoteHeadSize : DocumentSettings.NoteHeadHeight) * unitSize;
     this.notes.forEach((note, noteId) => {
-      var noteX = this.col.getNoteHeadDisplacement(this, note) * noteHeadWidth;
-      var noteY = this.row.getPitchY(note.pitch);
-      // Setup note head
-      var noteHeadRect = this.noteHeadRects[noteId] = DivRect.createCentered(noteX, noteY, noteHeadWidth, noteHeadHeight);
-      if (accState.needAccidental(note)) {
-        var acc = this.accidentals[noteId] = new ObjAccidental(this, note.accidental, this.color);
-        if (acc) {
-          acc.layout(renderer);
-          acc.offset(-noteHeadRect.leftw - unitSize * DocumentSettings.NoteAccSpace - acc.getRect().rightw, noteY);
+      var staff = row.getStaff(note.pitch);
+      if (this.staffObjs && staff) {
+        var noteX = this.col.getNoteHeadDisplacement(this, note) * noteHeadWidth;
+        var noteY = staff.getPitchY(note.pitch);
+        // Setup note head
+        var noteHeadRect = this.staffObjs.noteHeadRects[noteId] = DivRect.createCentered(noteX, noteY, noteHeadWidth, noteHeadHeight);
+        // Setup accidental
+        if (accState.needAccidental(note)) {
+          var acc = this.staffObjs.accidentals[noteId] = new ObjAccidental(this, note.accidental, this.color);
+          if (acc) {
+            acc.layout(renderer);
+            acc.offset(-noteHeadRect.leftw - unitSize * DocumentSettings.NoteAccSpace - acc.getRect().rightw, noteY);
+          }
+        }
+        // Setup dot
+        if (dotted) {
+          var dotX = noteHeadRect.right + DocumentSettings.NoteDotSpace * unitSize + dotWidth / 2;
+          var dotY = noteY + this.getDotVerticalDisplacement(note.pitch, stemDir) * unitSize;
+          this.staffObjs.dotRects[noteId] = DivRect.createCentered(dotX, dotY, dotWidth, dotWidth);
         }
-      }
-      // Set dot
-      if (dotted) {
-        var dotX = noteHeadRect.right + DocumentSettings.NoteDotSpace * unitSize + dotWidth / 2;
-        var dotY = noteY + this.getDotVerticalDisplacement(note.pitch, stemDir) * unitSize;
-        this.dotRects[noteId] = DivRect.createCentered(dotX, dotY, dotWidth, dotWidth);
       }
     });
     // Add staccato dot
-    if (this.staccato) {
-      var dotX = this.noteHeadRects[0].centerX;
-      var dotY = 0;
+    if (this.staccato && this.staffObjs) {
+      var dotX = this.staffObjs.noteHeadRects[0].centerX;
       if (stemDir === Stem.Up) {
-        var pitch = this.notes[0].pitch;
-        dotY = this.row.getPitchY(pitch) + unitSize * (row.isPitchLine(pitch) ? 3 : 2);
+        var pitch = this.getBottomNote().pitch;
+        var staff = row.getStaff(pitch);
+        if (staff) {
+          var dotY = staff.getPitchY(pitch) + unitSize * (staff.isPitchLine(pitch) ? 3 : 2);
+          this.staffObjs.dotRects.push(DivRect.createCentered(dotX, dotY, dotWidth, dotWidth));
+        }
       } else {
-        var _pitch = this.notes[this.notes.length - 1].pitch;
-        dotY = this.row.getPitchY(_pitch) - unitSize * (row.isPitchLine(_pitch) ? 3 : 2);
-      }
-      this.dotRects.push(DivRect.createCentered(dotX, dotY, dotWidth, dotWidth));
-    }
-    // Calculate stem
-    var bottomNoteY = this.row.getPitchY(this.getBottomNote().pitch);
-    var topNoteY = this.row.getPitchY(this.getTopNote().pitch);
-    var stemX = stemDir === Stem.Up ? noteHeadWidth / 2 : -noteHeadWidth / 2;
-    var stemHeight = this.getStemHeight(renderer);
-    var stemTipY = stemDir === Stem.Up ? topNoteY - stemHeight : bottomNoteY + stemHeight;
-    var stemBaseY = stemDir === Stem.Up ? bottomNoteY : topNoteY;
-    if (this.rhythmProps.hasStem()) {
-      this.stemRect = new DivRect(stemX, stemX, Math.min(stemBaseY, stemTipY), Math.max(stemBaseY, stemTipY));
-    }
-    // Setup flag rects
-    this.flagRects = [];
-    if (!this.hasBeamCount()) {
-      var flagWidth = flagCount === 0 ? 0 : DocumentSettings.FlagWidth * unitSize;
-      var flagHeight = flagCount === 0 ? 0 : DocumentSettings.FlagHeight * unitSize;
-      for (var i = 0; i < flagCount; i++) {
-        var flagAddY = i * unitSize * DocumentSettings.FlagSeparation;
-        this.flagRects[i] = stemDir === Stem.Up ? new DivRect(stemX, stemX + flagWidth, stemTipY + flagAddY, stemTipY + flagHeight + flagAddY) : new DivRect(stemX, stemX + flagWidth, stemTipY - flagHeight - flagAddY, stemTipY - flagAddY);
+        var _pitch = this.getTopNote().pitch;
+        var _staff = row.getStaff(_pitch);
+        if (_staff) {
+          var _dotY = _staff.getPitchY(_pitch) - unitSize * (_staff.isPitchLine(_pitch) ? 3 : 2);
+          this.staffObjs.dotRects.push(DivRect.createCentered(dotX, _dotY, dotWidth, dotWidth));
+        }
       }
     }
+    if (this.staffObjs) {
+      // Calculate stem
+      var bottomNoteY = (_a = row.getStaff(this.getBottomNote().pitch)) === null || _a === void 0 ? void 0 : _a.getPitchY(this.getBottomNote().pitch);
+      var topNoteY = (_b = row.getStaff(this.getTopNote().pitch)) === null || _b === void 0 ? void 0 : _b.getPitchY(this.getTopNote().pitch);
+      if (bottomNoteY === undefined || topNoteY === undefined) {
+        Assert.interrupt("Top or bottom note is undefined!");
+      }
+      var stemX = stemDir === Stem.Up ? noteHeadWidth / 2 : -noteHeadWidth / 2;
+      var stemHeight = this.getStemHeight(renderer);
+      var stemTipY = stemDir === Stem.Up ? topNoteY - stemHeight : bottomNoteY + stemHeight;
+      var stemBaseY = stemDir === Stem.Up ? bottomNoteY : topNoteY;
+      if (this.rhythmProps.hasStem()) {
+        this.staffObjs.stemRect = new DivRect(stemX, stemX, Math.min(stemBaseY, stemTipY), Math.max(stemBaseY, stemTipY));
+      }
+      // Setup flag rects
+      this.staffObjs.flagRects = [];
+      if (!this.hasBeamCount()) {
+        var flagWidth = flagCount === 0 ? 0 : DocumentSettings.FlagWidth * unitSize;
+        var flagHeight = flagCount === 0 ? 0 : DocumentSettings.FlagHeight * unitSize;
+        for (var i = 0; i < flagCount; i++) {
+          var flagAddY = i * unitSize * DocumentSettings.FlagSeparation;
+          this.staffObjs.flagRects[i] = stemDir === Stem.Up ? new DivRect(stemX, stemX + flagWidth, stemTipY + flagAddY, stemTipY + flagHeight + flagAddY) : new DivRect(stemX, stemX + flagWidth, stemTipY - flagHeight - flagAddY, stemTipY - flagAddY);
+        }
+      }
+    }
+    var tab = row.getTab();
+    this.notes.forEach((note, noteId) => {
+      var _a;
+      // Add tab fret numbers
+      if (tab && this.tabObjs && this.ownString[noteId] !== undefined) {
+        var stringId = this.ownString[noteId] - 1;
+        var fretId = note.noteId - this.doc.tuningStrings[stringId].noteId;
+        var color = fretId < 0 ? "red" : "black";
+        var fretNumber = new ObjText(this, {
+          text: String(fretId),
+          color,
+          bgcolor: "white"
+        }, 0.5, 0.5);
+        this.tabObjs.fretNumbers.push(fretNumber);
+        fretNumber.layout(renderer);
+        var noteX = this.col.getNoteHeadDisplacement(this, note) * noteHeadWidth;
+        var _stemX = ((_a = this.staffObjs) === null || _a === void 0 ? void 0 : _a.stemRect) ? this.staffObjs.stemRect.centerX : undefined;
+        var x = _stemX !== null && _stemX !== void 0 ? _stemX : noteX;
+        var y = tab.getStringY(stringId);
+        fretNumber.offset(x, y);
+      }
+    });
     this.updateRect();
   }
   updateRect() {
-    this.rect = this.noteHeadRects[0].copy();
-    this.noteHeadRects.forEach(r => this.rect.expandInPlace(r));
-    if (this.stemRect) {
-      this.rect.expandInPlace(this.stemRect);
+    if (this.staffObjs) {
+      this.rect = this.staffObjs.noteHeadRects[0].copy();
+      this.staffObjs.noteHeadRects.forEach(r => this.rect.expandInPlace(r));
+      if (this.staffObjs.stemRect) {
+        this.rect.expandInPlace(this.staffObjs.stemRect);
+      }
+      this.staffObjs.dotRects.forEach(r => this.rect.expandInPlace(r));
+      this.staffObjs.flagRects.forEach(r => this.rect.expandInPlace(r));
+      this.staffObjs.accidentals.forEach(a => this.rect.expandInPlace(a.getRect()));
+    } else if (this.tabObjs && this.tabObjs.fretNumbers.length > 0) {
+      this.rect = this.tabObjs.fretNumbers[0].getRect().copy();
+    } else {
+      this.rect = new DivRect();
+    }
+    if (this.tabObjs) {
+      this.tabObjs.fretNumbers.forEach(fn => this.rect.expandInPlace(fn.getRect()));
     }
-    this.dotRects.forEach(r => this.rect.expandInPlace(r));
-    this.flagRects.forEach(r => this.rect.expandInPlace(r));
-    this.accidentals.forEach(acc => this.rect.expandInPlace(acc.getRect()));
   }
   setStemTipY(stemTipY) {
-    if (!this.stemRect) {
+    if (!this.staffObjs || !this.staffObjs.stemRect) {
       return;
     }
-    var oldStemTipY = this.stemDir === Stem.Up ? this.stemRect.top : this.stemRect.bottom;
+    var oldStemTipY = this.stemDir === Stem.Up ? this.staffObjs.stemRect.top : this.staffObjs.stemRect.bottom;
     if (stemTipY === oldStemTipY) {
       return;
     }
-    var r = this.stemRect;
+    var r = this.staffObjs.stemRect;
     var top = this.stemDir === Stem.Up ? stemTipY : r.top;
     var bottom = this.stemDir === Stem.Up ? r.bottom : stemTipY;
-    this.stemRect = new DivRect(r.left, r.right, top, bottom);
+    this.staffObjs.stemRect = new DivRect(r.left, r.right, top, bottom);
     this.updateRect();
   }
   offset(dx, dy) {
-    this.noteHeadRects.forEach(r => r.offsetInPlace(dx, dy));
-    this.dotRects.forEach(r => r.offsetInPlace(dx, dy));
-    this.accidentals.forEach(d => d.offset(dx, dy));
-    if (this.stemRect) {
-      this.stemRect.offsetInPlace(dx, dy);
+    if (this.staffObjs) {
+      this.staffObjs.noteHeadRects.forEach(r => r.offsetInPlace(dx, dy));
+      this.staffObjs.dotRects.forEach(r => r.offsetInPlace(dx, dy));
+      this.staffObjs.accidentals.forEach(d => d.offset(dx, dy));
+      if (this.staffObjs.stemRect) {
+        this.staffObjs.stemRect.offsetInPlace(dx, dy);
+      }
+      this.staffObjs.flagRects.forEach(r => r.offsetInPlace(dx, dy));
+    }
+    if (this.tabObjs) {
+      this.tabObjs.fretNumbers.forEach(fn => fn.offset(dx, dy));
     }
-    this.flagRects.forEach(r => r.offsetInPlace(dx, dy));
     this.rect.offsetInPlace(dx, dy);
   }
   draw(renderer) {
@@ -35529,69 +35792,75 @@ class ObjNoteGroup extends MusicObject {
     var {
       noteLength
     } = this.rhythmProps;
-    // Draw accidentals
-    this.accidentals.forEach(d => d.draw(renderer));
-    ctx.strokeStyle = ctx.fillStyle = color;
-    ctx.lineWidth = lineWidth;
-    // Draw note heads
-    this.noteHeadRects.forEach(r => {
-      var outlinedNoteHead = noteLength >= NoteLength.Half;
-      if (this.diamond) {
-        if (outlinedNoteHead) {
-          ctx.beginPath();
-          ctx.lineWidth = lineWidth * 2.5;
-          ctx.moveTo(r.centerX, r.top);
-          ctx.lineTo(r.right, r.centerY);
-          ctx.moveTo(r.left, r.centerY);
-          ctx.lineTo(r.centerX, r.bottom);
-          ctx.stroke();
-          ctx.beginPath();
-          ctx.lineWidth = lineWidth;
-          ctx.moveTo(r.right, r.centerY);
-          ctx.lineTo(r.centerX, r.bottom);
-          ctx.moveTo(r.centerX, r.top);
-          ctx.lineTo(r.left, r.centerY);
-          ctx.stroke();
+    if (this.staffObjs) {
+      // Draw accidentals
+      this.staffObjs.accidentals.forEach(d => d.draw(renderer));
+      ctx.strokeStyle = ctx.fillStyle = color;
+      ctx.lineWidth = lineWidth;
+      // Draw note heads
+      this.staffObjs.noteHeadRects.forEach(r => {
+        var outlinedNoteHead = noteLength >= NoteLength.Half;
+        if (this.diamond) {
+          if (outlinedNoteHead) {
+            ctx.beginPath();
+            ctx.lineWidth = lineWidth * 2.5;
+            ctx.moveTo(r.centerX, r.top);
+            ctx.lineTo(r.right, r.centerY);
+            ctx.moveTo(r.left, r.centerY);
+            ctx.lineTo(r.centerX, r.bottom);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.lineWidth = lineWidth;
+            ctx.moveTo(r.right, r.centerY);
+            ctx.lineTo(r.centerX, r.bottom);
+            ctx.moveTo(r.centerX, r.top);
+            ctx.lineTo(r.left, r.centerY);
+            ctx.stroke();
+          } else {
+            ctx.beginPath();
+            ctx.moveTo(r.centerX, r.top);
+            ctx.lineTo(r.right, r.centerY);
+            ctx.lineTo(r.centerX, r.bottom);
+            ctx.lineTo(r.left, r.centerY);
+            ctx.lineTo(r.centerX, r.top);
+            ctx.fill();
+          }
         } else {
           ctx.beginPath();
-          ctx.moveTo(r.centerX, r.top);
-          ctx.lineTo(r.right, r.centerY);
-          ctx.lineTo(r.centerX, r.bottom);
-          ctx.lineTo(r.left, r.centerY);
-          ctx.lineTo(r.centerX, r.top);
-          ctx.fill();
+          ctx.ellipse(r.centerX, r.centerY, r.leftw, r.toph, -0.3, 0, Math.PI * 2);
+          if (outlinedNoteHead) {
+            ctx.stroke();
+          } else {
+            ctx.fill();
+          }
         }
-      } else {
+      });
+      // Draw dots
+      this.staffObjs.dotRects.forEach(r => renderer.fillCircle(r.centerX, r.centerY, r.width / 2));
+      // Draw stem
+      if (this.staffObjs.stemRect) {
         ctx.beginPath();
-        ctx.ellipse(r.centerX, r.centerY, r.leftw, r.toph, -0.3, 0, Math.PI * 2);
-        if (outlinedNoteHead) {
-          ctx.stroke();
-        } else {
-          ctx.fill();
-        }
+        ctx.moveTo(this.staffObjs.stemRect.centerX, this.staffObjs.stemRect.bottom);
+        ctx.lineTo(this.staffObjs.stemRect.centerX, this.staffObjs.stemRect.top);
+        ctx.stroke();
       }
-    });
-    // Draw dots
-    this.dotRects.forEach(r => renderer.fillCircle(r.centerX, r.centerY, r.width / 2));
-    // Draw stem
-    if (this.stemRect) {
-      ctx.beginPath();
-      ctx.moveTo(this.stemRect.centerX, this.stemRect.bottom);
-      ctx.lineTo(this.stemRect.centerX, this.stemRect.top);
-      ctx.stroke();
+      // Draw flags
+      this.staffObjs.flagRects.forEach(rect => {
+        var left = rect.left;
+        var right = rect.right;
+        var width = right - left;
+        var top = stemDir === Stem.Up ? rect.top : rect.bottom;
+        var bottom = stemDir === Stem.Up ? rect.bottom : rect.top;
+        ctx.beginPath();
+        ctx.moveTo(left, top);
+        ctx.bezierCurveTo(left, top * 0.75 + bottom * 0.25, left + width * 1.5, top * 0.5 + bottom * 0.5, left + width * 0.5, bottom);
+        ctx.stroke();
+      });
+    }
+    if (this.tabObjs) {
+      // Draw tab fret numbers
+      this.tabObjs.fretNumbers.forEach(fn => fn.draw(renderer));
     }
-    // Draw flags
-    this.flagRects.forEach(rect => {
-      var left = rect.left;
-      var right = rect.right;
-      var width = right - left;
-      var top = stemDir === Stem.Up ? rect.top : rect.bottom;
-      var bottom = stemDir === Stem.Up ? rect.bottom : rect.top;
-      ctx.beginPath();
-      ctx.moveTo(left, top);
-      ctx.bezierCurveTo(left, top * 0.75 + bottom * 0.25, left + width * 1.5, top * 0.5 + bottom * 0.5, left + width * 0.5, bottom);
-      ctx.stroke();
-    });
   }
   static setBeamCounts(groupNotes) {
     var isADottedBHalf = (a, b) => {
@@ -35626,10 +35895,10 @@ class ObjNoteGroup extends MusicObject {
     var fixAgain;
     do {
       fixAgain = false;
-      for (var _i = 0; _i < groupNotes.length; _i++) {
-        var _center = groupNotes[_i];
-        var _left = groupNotes[_i - 1];
-        var _right = groupNotes[_i + 1];
+      for (var _i2 = 0; _i2 < groupNotes.length; _i2++) {
+        var _center = groupNotes[_i2];
+        var _left = groupNotes[_i2 - 1];
+        var _right = groupNotes[_i2 + 1];
         // If neither left or right beam count equals flag count, then reset beam counts.
         if (_center && _center.leftBeamCount !== _center.rhythmProps.flagCount && _center.rightBeamCount !== _center.rhythmProps.flagCount) {
           _center.leftBeamCount = _center.rightBeamCount = 0;
@@ -35666,7 +35935,8 @@ class ObjNoteGroup extends MusicObject {
     }
   }
   getDotVerticalDisplacement(pitch, stemDir) {
-    if (this.row.isPitchLine(pitch)) {
+    var staff = this.row.getStaff(pitch);
+    if (staff && staff.isPitchLine(pitch)) {
       return stemDir === Stem.Up ? -1 : 1;
     } else {
       return 0;
@@ -35697,6 +35967,7 @@ class ObjNoteGroup extends MusicObject {
 
 
 
+
 var noteHeadDataCompareFunc = (a, b) => {
   var cmp = Note.compareFunc(a.note, b.note);
   if (cmp === 0) {
@@ -35814,15 +36085,16 @@ class ObjRhythmColumn extends MusicObject {
   }
   getMinWidth() {
     var maxNoteLength = Math.max(...this.voiceSymbol.map(s => s.rhythmProps.noteLength));
+    var w = DocumentSettings.NoteHeadWidth;
     switch (maxNoteLength) {
       case NoteLength.Whole:
-        return 5;
+        return w * 5;
       case NoteLength.Half:
-        return 4;
+        return w * 3;
       case NoteLength.Quarter:
-        return 3;
+        return w * 2;
       default:
-        return 2;
+        return w;
     }
   }
   setupNoteHeadDisplacements() {
@@ -35871,6 +36143,11 @@ class ObjRhythmColumn extends MusicObject {
       return 0;
     }
   }
+  getLowestNotePitch(pitch) {
+    return Math.min(pitch, ...this.voiceSymbol.map(s => {
+      return s instanceof ObjNoteGroup ? Math.min(...s.notes.map(n => n.pitch)) : s.ownAvgPitch;
+    }));
+  }
   getPlayerNotes() {
     var playerNotes = [];
     function addNote(note, ticks, staccato, slur) {
@@ -35925,16 +36202,13 @@ class ObjRhythmColumn extends MusicObject {
       return;
     }
     var {
-      row,
-      doc
+      row
     } = this;
     var {
       unitSize
     } = renderer;
     // Set initially column's min width
     var halfMinWidth = this.getMinWidth() * unitSize / 2;
-    var staffTop = row.getTopStaffLineTop();
-    var staffBottom = row.getBottomStaffLineBottom();
     var initRect = true;
     // Layout voice symbols
     this.voiceSymbol.forEach(symbol => {
@@ -35947,13 +36221,15 @@ class ObjRhythmColumn extends MusicObject {
       this.rect.expandInPlace(r);
     });
     if (initRect) {
+      var staffTop = row.hasStaff ? row.getTopStaff().topLineY : 0;
+      var staffBottom = row.hasStaff ? row.getBottomStaff().bottomLineY : 0;
       this.rect = new DivRect(-halfMinWidth, 0, halfMinWidth, (staffTop + staffBottom) / 2, 0, (staffTop + staffBottom) / 2);
     }
     if (this.arpeggioDir !== undefined) {
-      this.arpeggios = row.getStaffLines().map(staffLine => {
+      this.arpeggios = row.getStaves().map(staff => {
         var arpeggio = new ObjArpeggio(this, this.getArpeggioDir());
         arpeggio.layout(renderer);
-        arpeggio.offset(this.rect.left - arpeggio.getRect().width, staffLine.middleLineOffset * row.getLineSpacing());
+        arpeggio.offset(this.rect.left - arpeggio.getRect().width, staff.middleLineY - arpeggio.getRect().centerY);
         return arpeggio;
       });
       this.arpeggios.forEach(arpeggio => this.rect.expandInPlace(arpeggio.getRect()));
@@ -36508,7 +36784,7 @@ class player_Player {
         curMeasure = segnoMeasure;
       } else if (curMeasure.hasNavigation(Navigation.EndRepeat)) {
         var _passage = curMeasure.getPassCount();
-        var repeatCount = curMeasure === null || curMeasure === void 0 ? void 0 : curMeasure.getEndRepeatCount();
+        var repeatCount = (curMeasure === null || curMeasure === void 0 ? void 0 : curMeasure.getEndRepeatCount()) - 1;
         var cannotPassThrough = ((_a = curMeasure.getNextMeasure()) === null || _a === void 0 ? void 0 : _a.hasNavigation(Navigation.Ending)) === true;
         if (_passage <= repeatCount || cannotPassThrough) {
           curMeasure = startRepeatMeasure;
@@ -36789,6 +37065,7 @@ class ObjBarLine extends MusicObject {
     return this.rect.contains(x, y) ? [this] : [];
   }
   layout(renderer) {
+    var _a, _b;
     this.barLineType = this.solveBarLineType();
     var {
       unitSize,
@@ -36804,23 +37081,35 @@ class ObjBarLine extends MusicObject {
     var thinW = lineWidth;
     var thicW = 0.7 * unitSize;
     var spaceW = 0.7 * unitSize;
-    var dotW = Renderer.DotSize * unitSize;
-    var lineSpacing = row.getLineSpacing();
+    var dotW = DocumentSettings.DotSize * unitSize;
     var dotRadius = dotW / 2;
-    var dotOffset = this.measure.row.getPitchSpacing();
-    var top = (row.getTopStaffLine().middleLineOffset - 2) * lineSpacing;
-    var bottom = (row.getBottomStaffLine().middleLineOffset + 2) * lineSpacing;
+    var lineCenterYs = row.getStaves().map(staff => staff.middleLineY);
+    var lineDotOffs = row.getStaves().map(staff => staff.getPitchSpacing());
+    var tab = row.getTab();
+    if (tab) {
+      lineCenterYs.push((tab.bottom + tab.top) / 2);
+      lineDotOffs.push((tab.bottom - tab.top) / 6);
+    }
+    var top, bottom;
+    if (row.hasStaff) {
+      top = row.getTopStaff().topLineY;
+      bottom = tab ? tab.getStringY(5) : row.getBottomStaff().bottomLineY;
+    } else {
+      // hasTab is true
+      top = (_a = tab === null || tab === void 0 ? void 0 : tab.getStringY(0)) !== null && _a !== void 0 ? _a : 0;
+      bottom = (_b = tab === null || tab === void 0 ? void 0 : tab.getStringY(5)) !== null && _b !== void 0 ? _b : 0;
+    }
     this.lineRects = [];
     this.dotRects = [];
     var addRect = (left, width) => {
       this.lineRects.push(new DivRect(left, left + width / 2, left + width, top, 0, bottom));
     };
     var addDots = cx => {
-      row.getStaffLines().forEach(staffLine => {
-        var cy = staffLine.middleLineOffset * lineSpacing - dotOffset;
-        this.dotRects.push(new DivRect(cx - dotRadius, cx, cx + dotRadius, cy - dotRadius, cy, cy + dotRadius));
-        cy += 2 * dotOffset;
-        this.dotRects.push(new DivRect(cx - dotRadius, cx, cx + dotRadius, cy - dotRadius, cy, cy + dotRadius));
+      lineCenterYs.forEach((cy, id) => {
+        for (var i = -1; i <= 1; i += 2) {
+          var y = cy + i * lineDotOffs[id];
+          this.dotRects.push(new DivRect(cx - dotRadius, cx, cx + dotRadius, y - dotRadius, y, y + dotRadius));
+        }
       });
     };
     switch (barLineType) {
@@ -37180,7 +37469,7 @@ class ObjExtensionLine extends MusicObject {
     // Draw tip end of last line
     var tails = this.extension.getTails();
     if (tails.length > 0 && this === tails[tails.length - 1]) {
-      var tipH = rect.centerY > this.measure.row.getBottomStaffLineBottom() ? -renderer.unitSize : renderer.unitSize;
+      var tipH = rect.centerY > this.measure.row.getRect().centerY ? -renderer.unitSize : renderer.unitSize;
       renderer.drawLine(rect.right, rect.centerY, rect.right, rect.centerY + tipH, "black", renderer.lineWidth);
     }
   }
@@ -37226,8 +37515,9 @@ class ObjMeasure extends MusicObject {
     this.leftSolidAreaWidth = 0;
     this.minColumnsAreaWidth = 0;
     this.rightSolidAreaWidth = 0;
-    this.useStemDir = [];
     this.usePitch = [];
+    this.useStemDir = [];
+    this.useString = [];
     this.voiceSymbols = [];
     this.layoutObjects = [];
     this.postMeasureBreakWidth = 0;
@@ -37260,6 +37550,9 @@ class ObjMeasure extends MusicObject {
   isPartialMeasure() {
     return this.getConsumedTicks() < this.getMeasureTicks();
   }
+  isUpBeat() {
+    return this === this.doc.getFirstMeasure();
+  }
   resetPassCount() {
     this.passCount = 0;
   }
@@ -37269,6 +37562,29 @@ class ObjMeasure extends MusicObject {
   getPassCount() {
     return this.passCount;
   }
+  updateOwnAvgPitch(voiceId, setPitch) {
+    if (typeof setPitch == "string") {
+      this.usePitch[voiceId] = Note.getNote(setPitch).pitch;
+    } else if (typeof setPitch == "number") {
+      this.usePitch[voiceId] = setPitch;
+    } else if (setPitch instanceof Note) {
+      this.usePitch[voiceId] = setPitch.pitch;
+    } else if (this.usePitch[voiceId] === undefined) {
+      var prevMeasure = this.getPrevMeasure();
+      if (prevMeasure && prevMeasure.usePitch[voiceId] !== undefined) {
+        this.usePitch[voiceId] = prevMeasure.usePitch[voiceId];
+      }
+    }
+    var pitch = this.usePitch[voiceId];
+    if (pitch === undefined) {
+      if (this.row.hasStaff) {
+        pitch = this.row.getTopStaff().middleLinePitch;
+      } else {
+        pitch = Note.getNote("C4").pitch;
+      }
+    }
+    return this.usePitch[voiceId] = Note.validatePitch(pitch);
+  }
   updateOwnStemDir(symbol, setStemDir) {
     var _a, _b;
     var {
@@ -37281,28 +37597,27 @@ class ObjMeasure extends MusicObject {
     }
     var stemDir = this.useStemDir[voiceId];
     if (stemDir === Stem.Auto || stemDir === undefined) {
-      var staffLine = this.row.getClosestStaffLine(symbol.ownAvgPitch);
-      return symbol.ownAvgPitch > staffLine.middleLinePitch ? Stem.Down : Stem.Up;
+      var staff = this.row.getStaff(symbol.ownAvgPitch);
+      if (staff) {
+        return symbol.ownAvgPitch > staff.middleLinePitch ? Stem.Down : Stem.Up;
+      } else {
+        return Stem.Up;
+      }
     } else {
       return stemDir;
     }
   }
-  updateOwnAvgPitch(voiceId, setPitch) {
-    var _a;
-    if (typeof setPitch == "string") {
-      this.usePitch[voiceId] = Note.getNote(setPitch).pitch;
-    } else if (typeof setPitch == "number") {
-      this.usePitch[voiceId] = setPitch;
-    } else if (setPitch instanceof Note) {
-      this.usePitch[voiceId] = setPitch.pitch;
-    } else if (this.usePitch[voiceId] === undefined) {
-      var prevMeasure = this.getPrevMeasure();
-      if (prevMeasure && prevMeasure.usePitch[voiceId] !== undefined) {
-        this.usePitch[voiceId] = prevMeasure.usePitch[voiceId];
-      }
+  updateOwnString(symbol, setString) {
+    var _a, _b;
+    var {
+      voiceId
+    } = symbol;
+    if (setString !== undefined) {
+      this.useString[voiceId] = setString;
+    } else if (this.useString[voiceId] === undefined) {
+      this.useString[voiceId] = (_b = (_a = this.getPrevMeasure()) === null || _a === void 0 ? void 0 : _a.useString[voiceId]) !== null && _b !== void 0 ? _b : [];
     }
-    var pitch = (_a = this.usePitch[voiceId]) !== null && _a !== void 0 ? _a : this.row.getTopStaffLine().middleLinePitch;
-    return this.usePitch[voiceId] = Note.validatePitch(pitch);
+    return this.useString[voiceId];
   }
   pick(x, y) {
     if (!this.rect.contains(x, y)) {
@@ -37682,10 +37997,6 @@ class ObjMeasure extends MusicObject {
     this.voiceSymbols[voiceId].push(symbol);
     this.requestBeamsUpdate();
     this.lastAddedRhythmColumn = col;
-    // Collect arc data now that symbol is set
-    if (symbol instanceof ObjNoteGroup) {
-      this.onAddNoteGroup(symbol);
-    }
   }
   addNoteGroup(voiceId, notes, noteLength, options) {
     var notes2 = notes.map(note => typeof note === "string" ? Note.getNote(note) : note);
@@ -37719,16 +38030,11 @@ class ObjMeasure extends MusicObject {
       } else if (!_col || _col.positionTicks > positionTicks) {
         var _col2 = new ObjRhythmColumn(this, positionTicks);
         this.columns.splice(_i5, 0, _col2);
-        this.onAddRhythmColumn(_col2);
         return _col2;
       }
     }
     Assert.interrupt("Error in rhythm column. Should never get here.");
   }
-  onAddRhythmColumn(col) {}
-  onAddNoteGroup(noteGroup) {
-    noteGroup.collectArcDatas();
-  }
   getMeasureTicks() {
     return this.getTimeSignature().measureTicks;
   }
@@ -37774,8 +38080,8 @@ class ObjMeasure extends MusicObject {
   getStaffLineRight() {
     return this.barLineRight.getRect().centerX;
   }
-  forEachLayoutObject(fn) {
-    this.layoutObjects.forEach(layoutObj => fn(layoutObj));
+  getStaticObjects() {
+    return [...this.getColumns(), ...this.layoutObjects.filter(layoutObj => layoutObj.isPositionResolved()).map(layoutObj => layoutObj.musicObj)];
   }
   removeLayoutObjects(musicObj) {
     this.layoutObjects = this.layoutObjects.filter(layoutObj => {
@@ -37791,27 +38097,18 @@ class ObjMeasure extends MusicObject {
       }
     });
   }
-  addArc(arc) {
+  addArcObject(arc) {
     this.arcs.push(arc);
     this.requestLayout();
   }
-  updateArcs() {
-    // Remove arcs
+  removeArcObjects() {
     if (this.arcs.length > 0) {
       this.arcs = [];
       this.requestLayout();
     }
-    // Recreate arcs
-    ObjMeasure.VoiceIdList.forEach(voiceId => {
-      this.getVoiceSymbols(voiceId).forEach(symbol => {
-        if (symbol instanceof ObjNoteGroup) {
-          symbol.createObjArcs();
-        }
-      });
-    });
   }
   updateExtensions() {
-    this.forEachLayoutObject(layoutObj => {
+    this.layoutObjects.forEach(layoutObj => {
       if (layoutObj.musicObj.getLink() instanceof Extension) {
         var extension = layoutObj.musicObj.getLink();
         if (extension.getHead() === layoutObj.musicObj) {
@@ -37840,7 +38137,7 @@ class ObjMeasure extends MusicObject {
     this.needBeamsUpdate = true;
   }
   updateBeams() {
-    if (!this.needBeamsUpdate) {
+    if (!this.needBeamsUpdate || !this.row.hasStaff) {
       return;
     }
     // Remove old beams/triplets
@@ -37849,34 +38146,50 @@ class ObjMeasure extends MusicObject {
     });
     this.beamGroups = [];
     // Recreate beams/triplets
-    var ts = this.getTimeSignature();
     ObjMeasure.VoiceIdList.forEach(voiceId => {
       var symbols = this.getVoiceSymbols(voiceId);
-      ObjMeasure.createTriplets(symbols);
-      ObjMeasure.createBeams(symbols, ts);
-    });
-    this.needBeamsUpdate = false;
-    this.requestLayout();
-  }
-  static createBeams(symbols, ts) {
-    if (DebugSettings.DisableBeams || symbols.length < 2) {
-      return;
-    }
-    var groupSymbols = [];
-    var groupStartTicks = 0;
-    var groupEndTicks = 0;
-    symbols.forEach(symbol => {
-      groupSymbols.push(symbol);
-      groupEndTicks += symbol.rhythmProps.ticks;
-      if (groupStartTicks === 0 && groupEndTicks === ts.beamGroupLength) {
-        // Perfect group, setup beams
-        ObjMeasure.setupBeamGroup(groupSymbols);
+      if (symbols.length <= 2) {
+        return;
       }
-      while (groupEndTicks >= ts.beamGroupLength) {
-        groupSymbols = [];
-        groupStartTicks = groupEndTicks = groupEndTicks - ts.beamGroupLength;
+      // Create triplets
+      for (var i = 0; i < symbols.length;) {
+        var s2 = symbols.slice(i, i + 2);
+        var s3 = symbols.slice(i, i + 3);
+        if (s2.length === 2 && ObjBeamGroup.createTriplet(s2)) {
+          i += 2;
+        } else if (s3.length === 3 && ObjBeamGroup.createTriplet(s3)) {
+          i += 3;
+        } else {
+          i++;
+        }
+      }
+      // Create beams
+      if (!DebugSettings.DisableBeams) {
+        var groupSymbols = [];
+        var groupStartTicks = 0;
+        var groupEndTicks = 0;
+        // Is upbeat? Set starting ticks position.
+        if (this.isUpBeat()) {
+          var startTicks = Math.max(0, this.getMeasureTicks() - this.getConsumedTicks());
+          groupStartTicks = groupEndTicks = startTicks;
+        }
+        var ts = this.getTimeSignature();
+        symbols.forEach(symbol => {
+          groupSymbols.push(symbol);
+          groupEndTicks += symbol.rhythmProps.ticks;
+          if (groupStartTicks === 0 && groupEndTicks === ts.beamGroupLength) {
+            // Perfect group, setup beams
+            ObjMeasure.setupBeamGroup(groupSymbols);
+          }
+          while (groupEndTicks >= ts.beamGroupLength) {
+            groupSymbols = [];
+            groupStartTicks = groupEndTicks = groupEndTicks - ts.beamGroupLength;
+          }
+        });
       }
     });
+    this.needBeamsUpdate = false;
+    this.requestLayout();
   }
   static setupBeamGroup(groupSymbols) {
     var groupNotes = groupSymbols.map(s => {
@@ -37896,19 +38209,6 @@ class ObjMeasure extends MusicObject {
     });
     ObjBeamGroup.createBeam(beamNotes);
   }
-  static createTriplets(symbols) {
-    for (var i = 0; i < symbols.length;) {
-      var s2 = symbols.slice(i, i + 2);
-      var s3 = symbols.slice(i, i + 3);
-      if (s2.length === 2 && ObjBeamGroup.createTriplet(s2)) {
-        i += 2;
-      } else if (s3.length === 3 && ObjBeamGroup.createTriplet(s3)) {
-        i += 3;
-      } else {
-        i++;
-      }
-    }
-  }
   static validateVoiceId(voiceId) {
     Assert.in_group(voiceId, ObjMeasure.VoiceIdList, "Invalid voice id: " + voiceId);
     return voiceId;
@@ -37966,6 +38266,9 @@ class ObjMeasure extends MusicObject {
       dotted: rest.dotted
     }));
   }
+  getLowestNotePitch(pitch) {
+    return Math.min(pitch, ...this.columns.map(c => c.getLowestNotePitch(pitch)));
+  }
   requestLayout() {
     if (!this.needLayout) {
       this.needLayout = true;
@@ -37989,14 +38292,14 @@ class ObjMeasure extends MusicObject {
     var showTimeSignature = !!this.alterTimeSignature;
     var showTempo = !!this.alterTempo;
     if (showClef || showMeasureNumber || showKeySignature || showTimeSignature || showTempo) {
-      this.signatures = this.row.getStaffLines().map((staffLine, staffLineId) => {
+      this.signatures = this.row.getStaves().map((staff, staffId) => {
         var _a;
-        var signature = (_a = this.signatures[staffLineId]) !== null && _a !== void 0 ? _a : new ObjSignature(this, staffLine);
+        var signature = (_a = this.signatures[staffId]) !== null && _a !== void 0 ? _a : new ObjSignature(this, staff);
         signature.updateClefImage(renderer, showClef);
-        signature.updateMeasureNumber(showMeasureNumber && staffLineId === 0);
+        signature.updateMeasureNumber(showMeasureNumber && staffId === 0);
         signature.updateKeySignature(showKeySignature);
         signature.updateTimeSignature(showTimeSignature);
-        signature.updateTempo(showTempo && staffLineId === 0);
+        signature.updateTempo(showTempo && staffId === 0);
         signature.layout(renderer);
         return signature;
       });
@@ -38016,6 +38319,11 @@ class ObjMeasure extends MusicObject {
     // Calc top and bottom
     var top = Math.min(...this.signatures.map(signature => signature.getRect().top), this.barLineLeft.getRect().top, ...this.columns.map(col => col.getRect().top), this.barLineRight.getRect().top);
     var bottom = Math.max(...this.signatures.map(signature => signature.getRect().bottom), this.barLineLeft.getRect().bottom, ...this.columns.map(col => col.getRect().bottom), this.barLineRight.getRect().bottom);
+    var tab = this.row.getTab();
+    if (tab) {
+      top = Math.min(top, tab.top);
+      bottom = Math.max(bottom, tab.bottom);
+    }
     // Set rect toph and bottomh
     this.rect = new DivRect(0, 0, 0, top, 0, bottom);
     var padding = renderer.unitSize;
@@ -38094,7 +38402,7 @@ class ObjMeasure extends MusicObject {
     }
     this.arcs.forEach(arc => arc.offset(dx, dy));
     this.beamGroups.forEach(beam => beam.offset(dx, dy));
-    this.forEachLayoutObject(layoutObj => layoutObj.musicObj.offset(dx, dy));
+    this.layoutObjects.forEach(layoutObj => layoutObj.musicObj.offset(dx, dy));
     this.rect.offsetInPlace(dx, dy);
   }
   draw(renderer) {
@@ -38102,12 +38410,21 @@ class ObjMeasure extends MusicObject {
     // Draw staff lines
     var left = this.getStaffLineLeft();
     var right = this.getStaffLineRight();
-    this.row.getStaffLines().forEach(staffLine => {
-      for (var p = staffLine.bottomLinePitch; p <= staffLine.topLinePitch; p += 2) {
-        var y = this.row.getPitchY(p);
-        renderer.drawLine(left, y, right, y);
+    var drawLine = y => renderer.drawLine(left, y, right, y);
+    var {
+      row
+    } = this;
+    row.getStaves().forEach(staff => {
+      for (var p = staff.bottomLinePitch; p <= staff.topLinePitch; p += 2) {
+        drawLine(staff.getPitchY(p));
       }
     });
+    var tab = row.getTab();
+    if (tab) {
+      for (var stringId = 0; stringId < 6; stringId++) {
+        drawLine(tab.getStringY(stringId));
+      }
+    }
     this.signatures.forEach(signature => signature.draw(renderer));
     this.barLineLeft.draw(renderer);
     this.columns.forEach(col => col.draw(renderer));
@@ -38116,7 +38433,7 @@ class ObjMeasure extends MusicObject {
       this.endRepeatCountText.draw(renderer);
     }
     this.arcs.forEach(arc => arc.draw(renderer));
-    this.forEachLayoutObject(layoutObj => layoutObj.musicObj.draw(renderer));
+    this.layoutObjects.forEach(layoutObj => layoutObj.musicObj.draw(renderer));
     this.beamGroups.forEach(beam => beam.draw(renderer));
   }
 }
@@ -38182,16 +38499,14 @@ class LayoutObjectWrapper {
       measure,
       verticalPos
     } = this;
-    var staffTop = measure.row.getTopStaffLineTop();
-    var staffBottom = measure.row.getBottomStaffLineBottom();
+    var {
+      row
+    } = measure;
+    var staffTop = row.hasStaff ? row.getTopStaff().topLineY : row.getRect().centerY;
+    var staffBottom = row.hasStaff ? row.getBottomStaff().bottomLineY : row.getRect().centerY;
     var staffPadding = renderer.unitSize * 2;
     var y = verticalPos === VerticalPos.BelowStaff ? staffBottom + staffPadding + musicObj.getRect().toph : staffTop - staffPadding - musicObj.getRect().bottomh;
-    var staticObjects = [...measure.getColumns()];
-    measure.forEachLayoutObject(layoutObj => {
-      if (layoutObj.isPositionResolved()) {
-        staticObjects.push(layoutObj.musicObj);
-      }
-    });
+    var staticObjects = measure.getStaticObjects();
     var objShapeRects = musicObj.getShapeRects();
     staticObjects.forEach(resolveObj => {
       var staticShapeRects = resolveObj.getShapeRects();
@@ -38253,40 +38568,46 @@ class LayoutGroup {
 
 
 
+
+
 var p = noteName => Note.getNote(noteName).pitch;
-var StaffLine_Treble = new StaffLine(ClefKind.Treble, p("G4"), p("B4"), 0, p("C3"), p("C7"));
-var StaffLine_TrebleForGuitar = new StaffLine(ClefKind.Treble, p("G3"), p("B3"), 0, p("C2"), p("C6"));
-var StaffLine_Bass = new StaffLine(ClefKind.Bass, p("F3"), p("D3"), 0, p("C1"), p("C5"));
-var StaffLine_Grand_Treble = new StaffLine(ClefKind.Treble, p("G4"), p("B4"), -4, p("C4"), p("C7"));
-var StaffLine_Grand_Bass = new StaffLine(ClefKind.Bass, p("F3"), p("D3"), 4, p("C1"), p("C4") - 1);
+var createStaff_Treble = () => new MusicStaff(ClefKind.Treble, p("G4"), p("B4"), p("C3"), p("C7"));
+var createStaff_GuitarTreble = () => new MusicStaff(ClefKind.Treble, p("G3"), p("B3"), p("C2"), p("C6"));
+var createStaff_Bass = () => new MusicStaff(ClefKind.Bass, p("F3"), p("D3"), p("C1"), p("C5"));
+var createStaff_Grand_Treble = () => new MusicStaff(ClefKind.Treble, p("G4"), p("B4"), p("C4"), p("C7"));
+var createStaff_Grand_Bass = () => new MusicStaff(ClefKind.Bass, p("F3"), p("D3"), p("C1"), p("C4") - 1);
 class ObjScoreRow extends MusicObject {
   constructor(doc) {
     super(doc);
     this.doc = doc;
-    this.pitchSpacing = 0;
-    this.lineSpacing = 0;
     this.minWidth = 0;
-    this.staffLines = [];
+    this.staves = [];
     this.measures = [];
-    this.closestStaffLineCache = [];
-    this.cachedPitchY = [];
     this.needLayout = true;
     this.staffKind = doc.staffKind;
     switch (this.staffKind) {
-      case StaffKind.TrebleForGuitar:
-        this.staffLines[0] = StaffLine_TrebleForGuitar;
-        break;
       case StaffKind.Treble:
-      default:
-        this.staffLines[0] = StaffLine_Treble;
+        this.staves[0] = createStaff_Treble();
         break;
       case StaffKind.Bass:
-        this.staffLines[0] = StaffLine_Bass;
+        this.staves[0] = createStaff_Bass();
         break;
       case StaffKind.Grand:
-        this.staffLines[0] = StaffLine_Grand_Treble;
-        this.staffLines[1] = StaffLine_Grand_Bass;
+        this.staves[0] = createStaff_Grand_Treble();
+        this.staves[1] = createStaff_Grand_Bass();
+        break;
+      case StaffKind.GuitarTreble:
+        this.staves[0] = createStaff_GuitarTreble();
+        break;
+      case StaffKind.GuitarTab:
+        this.tab = new GuitarTab();
+        break;
+      case StaffKind.GuitarTrebleAndTab:
+        this.staves[0] = createStaff_GuitarTreble();
+        this.tab = new GuitarTab();
         break;
+      default:
+        Assert.assert("Invalid staffKind = " + this.staffKind);
     }
     // Set prevRow
     this.prevRow = doc.getLastRow();
@@ -38299,42 +38620,43 @@ class ObjScoreRow extends MusicObject {
   getMusicInterface() {
     return this.mi;
   }
-  get minPitch() {
-    return this.getBottomStaffLine().minPitch;
+  get hasStaff() {
+    return this.staves[0] !== undefined;
+  }
+  get hasTab() {
+    return this.tab !== undefined;
   }
-  get maxPitch() {
-    return this.getTopStaffLine().maxPitch;
+  getTab() {
+    return this.tab;
   }
-  getStaffLines() {
-    return this.staffLines;
+  getStaves() {
+    return this.staves;
   }
-  getTopStaffLine() {
-    return this.staffLines[0];
+  getTopStaff() {
+    return Assert.require(this.staves[0], "Top staff line is required!");
   }
-  getBottomStaffLine() {
-    return this.staffLines[this.staffLines.length - 1];
+  getBottomStaff() {
+    return Assert.require(this.staves[this.staves.length - 1], "Bottom staff line is required!");
   }
-  getClosestStaffLine(pitch) {
+  getStaff(pitch) {
     Note.validatePitch(pitch);
-    if (this.closestStaffLineCache[pitch] === undefined) {
-      var closestDistToPitch = Math.abs(pitch - this.staffLines[0].middleLinePitch);
-      var closestStaffLine = this.staffLines[0];
-      for (var i = 1; i < this.staffLines.length; i++) {
-        var dist = Math.abs(pitch - this.staffLines[i].middleLinePitch);
-        if (dist < closestDistToPitch) {
-          closestDistToPitch = dist;
-          closestStaffLine = this.staffLines[i];
-        }
+    for (var i = 0; i < this.staves.length; i++) {
+      var staff = this.staves[i];
+      if (staff.containsPitch(pitch)) {
+        return staff;
       }
-      this.closestStaffLineCache[pitch] = closestStaffLine;
     }
-    return this.closestStaffLineCache[pitch];
-  }
-  isPitchLine(pitch) {
-    return pitch % 2 === this.staffLines[0].middleLinePitch % 2;
+    return undefined;
   }
-  isPitchSpace(pitch) {
-    return pitch % 2 !== this.staffLines[0].middleLinePitch % 2;
+  getLowestNotePitch() {
+    if (!this.hasStaff) {
+      return undefined;
+    } else if (this.doc.needFullPitchRange()) {
+      return this.getBottomStaff().minPitch;
+    } else {
+      var pitch = this.getBottomStaff().bottomLinePitch;
+      return Math.min(pitch, ...this.measures.map(m => m.getLowestNotePitch(pitch)));
+    }
   }
   pick(x, y) {
     if (!this.rect.contains(x, y)) {
@@ -38354,35 +38676,10 @@ class ObjScoreRow extends MusicObject {
     var left = firstMeasure ? firstMeasure.getColumnsContentRect().left : r.left;
     return new DivRect(left, (left + r.right) / 2, r.right, r.top, r.centerY, r.bottom);
   }
-  getPitchSpacing() {
-    return this.pitchSpacing;
-  }
-  getLineSpacing() {
-    return this.lineSpacing;
-  }
-  getPitchY(pitch) {
-    Note.validatePitch(pitch);
-    if (this.cachedPitchY[pitch] === undefined) {
-      var staffLine = this.staffLines.length === 1 || pitch >= this.staffLines[0].minPitch ? this.staffLines[0] : this.staffLines[1];
-      var {
-        pitchSpacing,
-        lineSpacing
-      } = this;
-      var offsetY = staffLine.middleLineOffset * lineSpacing;
-      this.cachedPitchY[pitch] = offsetY - (pitch - staffLine.middleLinePitch) * pitchSpacing;
-    }
-    return this.cachedPitchY[pitch] + this.rect.centerY;
-  }
   getPitchAt(y) {
-    var {
-      pitchSpacing,
-      lineSpacing
-    } = this;
-    for (var i = 0; i < this.staffLines.length; i++) {
-      var staffLine = this.staffLines[i];
-      var offsetY = staffLine.middleLineOffset * lineSpacing;
-      var pitch = Math.round(staffLine.middleLinePitch - (y - this.rect.centerY - offsetY) / pitchSpacing);
-      if (pitch >= staffLine.minPitch && pitch <= staffLine.maxPitch) {
+    for (var i = 0; i < this.staves.length; i++) {
+      var pitch = this.staves[i].getPitchAt(y);
+      if (pitch !== undefined) {
         return pitch;
       }
     }
@@ -38415,12 +38712,6 @@ class ObjScoreRow extends MusicObject {
   getMinWidth() {
     return this.minWidth;
   }
-  getTopStaffLineTop() {
-    return this.getPitchY(this.getTopStaffLine().topLinePitch);
-  }
-  getBottomStaffLineBottom() {
-    return this.getPitchY(this.getBottomStaffLine().bottomLinePitch);
-  }
   requestLayout() {
     if (!this.needLayout) {
       this.needLayout = true;
@@ -38428,6 +38719,7 @@ class ObjScoreRow extends MusicObject {
     }
   }
   layout(renderer) {
+    var _a;
     if (!this.needLayout) {
       return;
     }
@@ -38435,32 +38727,45 @@ class ObjScoreRow extends MusicObject {
       unitSize
     } = renderer;
     this.rect = new DivRect();
-    if (this.pitchSpacing !== unitSize) {
-      this.pitchSpacing = unitSize;
-      this.lineSpacing = this.pitchSpacing * 2;
-      // pitch spacing changed, clear pitch y cache.
-      this.cachedPitchY.length = 0;
+    var lineSpacing = unitSize * 2;
+    // Compute staff top/bottom line y
+    this.staves.forEach(staff => {
+      staff.topLineY = -lineSpacing * 2;
+      staff.bottomLineY = lineSpacing * 2;
+    });
+    if (this.staves.length === 2) {
+      this.staves[0].topLineY -= lineSpacing * 4;
+      this.staves[0].bottomLineY -= lineSpacing * 4;
+      this.staves[1].topLineY += lineSpacing * 4;
+      this.staves[1].bottomLineY += lineSpacing * 4;
     }
-    // Layout measures
-    this.measures.forEach(m => m.layout(renderer));
     // Compute toph and bottomh
-    var toph = 0,
-      bottomh = 0;
-    if (this.doc.needFullPitchRange()) {
-      toph = -this.getPitchY(this.maxPitch + 1);
-      bottomh = this.getPitchY(this.minPitch - 1);
-    } else {
-      toph = -this.getPitchY(this.getTopStaffLine().topLinePitch + 1);
-      bottomh = this.getPitchY(this.getBottomStaffLine().bottomLinePitch - 1);
+    var rect = new DivRect();
+    this.staves.forEach(staff => rect.expandInPlace(new DivRect(0, 0, staff.topLineY, staff.bottomLineY)));
+    if (this.hasStaff && this.doc.needFullPitchRange()) {
+      this.staves.forEach(staff => {
+        var top = staff.getPitchY(staff.maxPitch) - staff.getLineSpacing();
+        var bottom = staff.getPitchY(staff.minPitch) + staff.getLineSpacing();
+        rect.expandInPlace(new DivRect(0, 0, top, bottom));
+      });
+    }
+    if (this.tab) {
+      var lowestPitch = this.getLowestNotePitch();
+      var lowestY = lowestPitch !== undefined ? (_a = this.getStaff(lowestPitch)) === null || _a === void 0 ? void 0 : _a.getPitchY(lowestPitch) : undefined;
+      this.tab.top = lowestY !== undefined ? lowestY + unitSize * 8 : 0;
+      this.tab.bottom = this.tab.top + unitSize * DocumentSettings.GuitarTabHeight;
+      rect.expandInPlace(new DivRect(0, 0, this.tab.top, this.tab.bottom));
     }
+    // Calc min width
     this.minWidth = 0;
+    // Layout measures
     this.measures.forEach(m => {
-      toph = Math.max(toph, m.getRect().toph);
-      bottomh = Math.max(bottomh, m.getRect().bottomh);
+      m.layout(renderer);
+      rect.expandInPlace(new DivRect(0, 0, m.getRect().top, m.getRect().bottom));
       this.minWidth += m.getMinWidth();
       this.minWidth += m.getPostMeasureBreakWidth();
     });
-    this.rect = new DivRect(0, 0, 0, -toph, 0, bottomh);
+    this.rect = rect;
   }
   layoutWidth(renderer, width) {
     if (!this.needLayout) {
@@ -38572,6 +38877,10 @@ class ObjScoreRow extends MusicObject {
   offset(dx, dy) {
     this.measures.forEach(m => m.offset(dx, dy));
     this.rect.offsetInPlace(dx, dy);
+    this.staves.forEach(s => s.offset(dx, dy));
+    if (this.tab) {
+      this.tab.offset(dx, dy);
+    }
   }
   draw(renderer) {
     var ctx = renderer.getCanvasContext();
@@ -38584,10 +38893,18 @@ class ObjScoreRow extends MusicObject {
     ctx.rect(this.rect.left, this.rect.top, this.rect.width, this.rect.height);
     ctx.clip();
     // For multiple staff lines draw vertical start line (which is not drawn by measures)
-    if (this.getFirstMeasure() && this.staffLines.length > 1) {
+    if (this.getFirstMeasure() && (this.staves.length > 1 || this.tab)) {
       var left = this.getFirstMeasure().getStaffLineLeft();
-      var top = this.getPitchY(this.getTopStaffLine().topLinePitch);
-      var bottom = this.getPitchY(this.getBottomStaffLine().bottomLinePitch);
+      var top, bottom;
+      if (this.hasStaff) {
+        top = this.getTopStaff().topLineY;
+        bottom = this.tab ? this.tab.getStringY(5) : this.getBottomStaff().bottomLineY;
+      } else if (this.tab) {
+        top = this.tab.getStringY(0);
+        bottom = this.tab.getStringY(5);
+      } else {
+        top = bottom = 0;
+      }
       renderer.drawLine(left, top, left, bottom);
     }
     // Draw measures
@@ -38601,6 +38918,7 @@ class ObjScoreRow extends MusicObject {
 
 class ObjHeader extends MusicObject {
   constructor(doc, title, composer, arranger) {
+    var _a;
     super(doc);
     this.title = title;
     this.composer = composer;
@@ -38612,6 +38930,7 @@ class ObjHeader extends MusicObject {
     }, 0.5, 0) : undefined;
     this.composerText = this.composer ? new ObjText(this, this.composer, 1, 0) : undefined;
     this.arrangerText = this.arranger ? new ObjText(this, "Arr.: " + this.arranger, 1, 0) : undefined;
+    this.tuningText = ((_a = doc.getFirstRow()) === null || _a === void 0 ? void 0 : _a.hasTab) === true ? new ObjText(this, doc.tuningName + " tuning:\n" + doc.tuningLabel, 0, 0) : undefined;
   }
   getMusicInterface() {
     return this.mi;
@@ -38638,15 +38957,23 @@ class ObjHeader extends MusicObject {
         return [this, ..._arr2];
       }
     }
+    if (this.tuningText) {
+      var _arr3 = this.tuningText.pick(x, y);
+      if (_arr3) {
+        return [this, ..._arr3];
+      }
+    }
     return [this];
   }
   layoutWidth(renderer, width) {
     var top = 0;
+    var tuningTop = 0;
     this.rect = new DivRect(0, width, 0, 0);
     if (this.titleText) {
       this.titleText.layout(renderer);
       this.titleText.offset(width / 2, top);
       top += this.titleText.getRect().height;
+      tuningTop = top;
       this.rect.expandInPlace(this.titleText.getRect());
     }
     if (this.composerText) {
@@ -38661,6 +38988,11 @@ class ObjHeader extends MusicObject {
       top += this.arrangerText.getRect().height;
       this.rect.expandInPlace(this.arrangerText.getRect());
     }
+    if (this.tuningText) {
+      this.tuningText.layout(renderer);
+      this.tuningText.offset(0, tuningTop);
+      this.rect.expandInPlace(this.tuningText.getRect());
+    }
   }
   offset(dx, dy) {
     if (this.titleText) {
@@ -38672,6 +39004,9 @@ class ObjHeader extends MusicObject {
     if (this.arrangerText) {
       this.arrangerText.offset(dx, dy);
     }
+    if (this.tuningText) {
+      this.tuningText.offset(dx, dy);
+    }
     this.rect.offsetInPlace(dx, dy);
   }
   draw(renderer) {
@@ -38684,6 +39019,9 @@ class ObjHeader extends MusicObject {
     if (this.arrangerText) {
       this.arrangerText.draw(renderer);
     }
+    if (this.tuningText) {
+      this.tuningText.draw(renderer);
+    }
   }
 }
 ;// ./src/music-score/engine/obj-document.ts
@@ -38695,24 +39033,37 @@ class ObjHeader extends MusicObject {
 
 
 
+
 class ObjDocument extends MusicObject {
-  constructor(mi, staffKind, measuresPerRow) {
+  constructor(mi, staffKind, options) {
+    var _a;
     super(undefined);
     this.mi = mi;
     this.staffKind = staffKind;
-    this.measuresPerRow = measuresPerRow;
+    this.options = options;
     this.needLayout = true;
     this.needUpdate = true;
     this.rows = [];
     this.measures = [];
     this.layoutGroups = [];
     this.newRowRequested = false;
+    this.allArcsProps = [];
+    this.measuresPerRow = options === null || options === void 0 ? void 0 : options.measuresPerRow;
+    if (this.measuresPerRow !== undefined) {
+      Assert.int_gte(this.measuresPerRow, 1, "Invalid measuresPerRow = " + this.measuresPerRow);
+    }
+    this.tuningName = validateTuningName((_a = options === null || options === void 0 ? void 0 : options.tuning) !== null && _a !== void 0 ? _a : DefaultTuningName);
+    this.tuningStrings = getTuningStrings(this.tuningName);
+    this.tuningLabel = this.tuningStrings.slice().reverse().map(n => n.formatOmitOctave(SymbolSet.Ascii)).join("-");
     // There is always row
     this.rows.push(new ObjScoreRow(this));
   }
   getMusicInterface() {
     return this.mi;
   }
+  addArcProps(arc) {
+    this.allArcsProps.push(arc);
+  }
   getLayoutGroup(lauoutGroupId) {
     var layoutGroup = this.layoutGroups[lauoutGroupId];
     if (!layoutGroup) {
@@ -38801,7 +39152,8 @@ class ObjDocument extends MusicObject {
     // Update extensions.
     this.forEachMeasure(m => m.updateExtensions());
     // Update arcs.
-    this.forEachMeasure(m => m.updateArcs());
+    this.allArcsProps.forEach(arc => arc.removeArcs());
+    this.allArcsProps.forEach(arc => arc.createArcs());
     this.needUpdate = false;
   }
   forEachMeasure(func) {
@@ -38899,6 +39251,11 @@ class ObjDocument extends MusicObject {
     }
     for (var ri = 0; ri < this.rows.length; ri++) {
       var row = this.rows[ri];
+      if (!row.hasStaff) {
+        continue;
+      }
+      var minPitch = row.getBottomStaff().minPitch;
+      var maxPitch = row.getTopStaff().maxPitch;
       if (!row.getRect().contains(x, y)) {
         continue;
       }
@@ -38907,7 +39264,7 @@ class ObjDocument extends MusicObject {
         var rect = measure.getMusicObject().getRect();
         if (x >= rect.left && x <= rect.right) {
           var pitch = row.getPitchAt(y);
-          if (pitch !== undefined && pitch >= row.minPitch && pitch <= row.maxPitch) {
+          if (pitch !== undefined && pitch >= minPitch && pitch <= maxPitch) {
             return {
               measure,
               pitch
@@ -39013,11 +39370,15 @@ class MBeamGroup extends MusicInterface {
 MBeamGroup.Name = "BeamGroup";
 /** @public */
 class MDocument extends MusicInterface {
-  constructor(staffKind, measuresPerRow) {
+  constructor(staffKind, options) {
     super(MDocument.Name);
-    this.obj = new ObjDocument(this, staffKind, measuresPerRow);
-    if (measuresPerRow !== undefined) {
-      Assert.int_gte(measuresPerRow, 1, "Cannot create music document because invalid measures per row value: " + measuresPerRow);
+    if (typeof options === "number") {
+      // Deprecated: second argument was measuresPerRow.
+      this.obj = new ObjDocument(this, staffKind, {
+        measuresPerRow: options
+      });
+    } else {
+      this.obj = new ObjDocument(this, staffKind, options);
     }
   }
   /** @internal */
@@ -40112,26 +40473,11 @@ class GuitarComponent extends external_react_namespaceObject.Component {
     }, components);
   }
 }
-;// ./src/react-components/assets/tuning.json
-var tuning_namespaceObject = /*#__PURE__*/JSON.parse('{"p":[{"name":"Standard","strings":["E2","A2","D3","G3","B3","E4"]},{"name":"B Standard","strings":["B1","E2","A2","D3","F#3","B3"]},{"name":"C Standard","strings":["C2","F2","A#2","D#3","G3","C4"]},{"name":"D Modal","strings":["D2","A2","D3","G3","A3","D4"]},{"name":"D Standard","strings":["D2","G2","C3","F3","A3","D4"]},{"name":"D# Standard","strings":["D#2","G#2","C#3","F#3","A#3","D#4"]},{"name":"Double Drop D","strings":["D2","A2","D3","G3","B3","D4"]},{"name":"Drop B","strings":["B1","F#2","B2","E3","G#3","C#4"]},{"name":"Drop C","strings":["C2","G2","C3","F3","A3","D4"]},{"name":"Drop D","strings":["D2","A2","D3","G3","B3","E4"]},{"name":"Low C","strings":["C2","G2","D3","G3","A3","D4"]},{"name":"New Standard","strings":["C2","G2","D3","A3","E4","G4"]},{"name":"Open A","strings":["E2","A2","C#3","E3","A3","E4"]},{"name":"Open A Minor","strings":["E2","A2","E3","A3","C4","E4"]},{"name":"Open C","strings":["C2","G2","C3","G3","C4","E4"]},{"name":"Open C Minor","strings":["C2","G2","C3","G3","C4","D#4"]},{"name":"Open D","strings":["D2","A2","D3","F#3","A3","D4"]},{"name":"Open D Minor","strings":["D2","A2","D3","F3","A3","D4"]},{"name":"Open E","strings":["E2","B2","E3","G#3","B3","E4"]},{"name":"Open E Minor","strings":["E2","B2","E3","G3","B3","E4"]},{"name":"Open G","strings":["D2","G2","D3","G3","B3","D4"]},{"name":"Open G Minor","strings":["D2","G2","D3","G3","A#3","D4"]}]}');
 ;// ./src/react-components/guitar-context.ts
 
 
 
 
-
-/** @public */
-var TuningNameList = tuning_namespaceObject.p.map(data => data.name);
-/** @public */
-var DefaultTuningName = TuningNameList[0];
-/** @public */
-function validateTuningName(tuningName) {
-  if (TuningNameList.indexOf(tuningName) >= 0) {
-    return tuningName;
-  } else {
-    return Assert.interrupt("Invalid tuning name: " + tuningName);
-  }
-}
 /** @public */
 var DefaultHandedness = "rh";
 /** @public */
@@ -40209,11 +40555,10 @@ class GuitarContext {
     this.guitarNoteLabel = guitarNoteLabel;
     // Nut = fret0, FretCount = maxFret + 1
     this.maxFretId = guitar_namespaceObject.kl;
-    var tuningData = Assert.require(tuning_namespaceObject.p.find(data => data.name === tuningName), "Invalid tuning name: " + tuningName);
-    this.stringTunings = tuningData.strings.slice().reverse().map(noteName => Note.getNote(noteName));
+    this.tuningStrings = getTuningStrings(tuningName);
     this.guitarNoteTable = [[], [], [], [], [], []];
     for (var stringId = 0; stringId < 6; stringId++) {
-      var openStringNoteId = this.stringTunings[stringId].noteId;
+      var openStringNoteId = this.tuningStrings[stringId].noteId;
       for (var fretId = 0; fretId <= this.maxFretId; fretId++) {
         var noteId = openStringNoteId + fretId;
         this.guitarNoteTable[stringId][fretId] = new GuitarNote(this, stringId, fretId, noteId);
@@ -40226,10 +40571,10 @@ class GuitarContext {
     return this.guitarNoteTable[stringId][fretId];
   }
   getStringTuning(stringId) {
-    return this.stringTunings[stringId];
+    return this.tuningStrings[stringId];
   }
   getTuningOverview() {
-    return this.stringTunings.slice().reverse().map(note => note.format(this.pitchNotation, SymbolSet.Unicode)).join(" - ");
+    return this.tuningStrings.slice().reverse().map(note => note.format(this.pitchNotation, SymbolSet.Unicode)).join(" - ");
   }
   alterTuningName(tuningName) {
     return tuningName === this.tuningName ? this : new GuitarContext(tuningName, this.scale, this.handedness, this.pitchNotation, this.guitarNoteLabel);
@@ -40403,7 +40748,7 @@ class PlaybackButtons extends external_react_namespaceObject.Component {
 
 /** @public */
 function createFrereJacques() {
-  var doc = new MDocument(StaffKind.TrebleForGuitar);
+  var doc = new MDocument(StaffKind.GuitarTreble);
   doc.setHeader("Frere Jacques");
   doc.addMeasure().setKeySignature("G", ScaleType.Major).setTimeSignature("4/4").addNote(0, "G3", NoteLength.Quarter).addNote(0, "A3", NoteLength.Quarter).addNote(0, "B3", NoteLength.Quarter).addNote(0, "G3", NoteLength.Quarter);
   doc.addMeasure().addNote(0, "G3", NoteLength.Quarter).addNote(0, "A3", NoteLength.Quarter).addNote(0, "B3", NoteLength.Quarter).addNote(0, "G3", NoteLength.Quarter);
@@ -40422,7 +40767,7 @@ function createFrereJacques() {
 // Greensleeves (https://musescore.com/aaron_dc/scores/6167495)
 /** @public */
 function createGreensleeves() {
-  var doc = new MDocument(StaffKind.TrebleForGuitar);
+  var doc = new MDocument(StaffKind.GuitarTreble);
   doc.setHeader("Greensleeves");
   doc.addMeasure().setKeySignature("C", ScaleType.Major).setTimeSignature("6/8").setTempo(140).addNote(0, "A3", NoteLength.Eighth);
   doc.addMeasure().addNavigation(Navigation.StartRepeat).addNote(0, "C4", NoteLength.Quarter, {
@@ -40565,7 +40910,7 @@ function createGreensleeves() {
 
 /** @public */
 function createAndanteByDiabelli() {
-  var doc = new MDocument(StaffKind.TrebleForGuitar);
+  var doc = new MDocument(StaffKind.GuitarTreble);
   doc.setHeader("Andante", "A. Diabelli");
   doc.addMeasure().setKeySignature("D", ScaleType.Major).setTimeSignature("3/4").setTempo(80).addRest(0, NoteLength.Eighth, {
     pitch: "G4"
@@ -40701,7 +41046,7 @@ function createAndanteByDiabelli() {
 
 /* harmony default export */ var index_full = (exports_full_namespaceObject);
 // Log lib loaded message.
-console.log("%c" + "WebMusicScore v1.0.0 (cjs)", "background: black; color: white; padding: 2px 4px;");
+console.log("%c" + "WebMusicScore v1.1.0 (cjs)", "background: black; color: white; padding: 2px 4px;");
 }();
 module.exports = __webpack_exports__["default"];
 /******/ })()