@tspro/web-music-score 1.0.0 → 1.1.0

package/dist/index.esm.mjs

@@ -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) */
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 /******/ var __webpack_modules__ = ({
 
@@ -621,6 +621,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; },
@@ -32730,6 +32731,7 @@ var DocumentSettings = {
   NoteHeadWidth: 2,
   NoteHeadHeight: 1.3,
   DiamondNoteHeadSize: 1.8,
+  DotSize: 0.8,
   StemHeight: 7,
   // One octave
   FlagWidth: 1.5,
@@ -32739,7 +32741,8 @@ var DocumentSettings = {
   BeamAngleFactor: 0.5,
   RestDotSpace: 0.5,
   LedgerLineWidth: 3.6,
-  ShortTieLength: 5
+  ShortTieLength: 5,
+  GuitarTabHeight: 20
 };
 ;// ./src/music-score/engine/renderer.ts
 
@@ -32984,8 +32987,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);
     }
@@ -33089,26 +33096,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;
@@ -33116,19 +33130,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 {
@@ -33589,6 +33649,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
 
 
@@ -33599,6 +33699,7 @@ function alterTempoSpeed(tempo, speed) {
 
 
 
+
 ;// ./src/music-score/engine/obj-image.ts
 
 
@@ -33804,6 +33905,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;
     }
@@ -33882,6 +33984,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);
@@ -33921,10 +34031,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);
@@ -33940,9 +34050,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;
     }
@@ -34007,19 +34117,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) {
@@ -34084,7 +34194,8 @@ class ObjSignature extends MusicObject {
       unitSize
     } = renderer;
     var {
-      measure
+      measure,
+      staff
     } = this;
     var {
       row
@@ -34095,7 +34206,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) {
@@ -34107,7 +34218,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);
@@ -34115,38 +34226,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));
@@ -34284,13 +34401,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;
@@ -34382,19 +34505,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() {
@@ -34416,7 +34543,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;
@@ -34425,13 +34556,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;
@@ -34461,8 +34597,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
@@ -34502,30 +34639,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);
@@ -34584,7 +34723,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);
     }
   }
@@ -34598,8 +34737,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;
@@ -34610,7 +34750,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) {
@@ -34623,19 +34762,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;
@@ -34663,17 +34799,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
@@ -34762,25 +34896,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;
@@ -34791,9 +34930,6 @@ class CollectedArcData {
       return false;
     }
   }
-  startsWith(noteGroup) {
-    return this.noteGroups[0] === noteGroup;
-  }
   computeParams() {
     var stemDir = this.noteGroups[0].stemDir;
     if (this.arcPos === ArcPos.StemTip) {
@@ -34812,16 +34948,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,
@@ -34837,10 +34981,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);
             }
           });
         };
@@ -35127,6 +35271,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;
@@ -35134,28 +35308,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() {
@@ -35171,7 +35354,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;
@@ -35180,12 +35367,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];
+          }
         }
       }
     }
@@ -35197,120 +35397,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) {
@@ -35319,26 +35523,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) {
@@ -35366,13 +35573,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];
@@ -35396,6 +35603,7 @@ class ObjNoteGroup extends MusicObject {
     });
   }
   layout(renderer, accState) {
+    var _a, _b;
     var {
       unitSize
     } = renderer;
@@ -35405,102 +35613,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) {
@@ -35519,69 +35782,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) => {
@@ -35616,10 +35885,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;
@@ -35656,7 +35925,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;
@@ -35687,6 +35957,7 @@ class ObjNoteGroup extends MusicObject {
 
 
 
+
 var noteHeadDataCompareFunc = (a, b) => {
   var cmp = Note.compareFunc(a.note, b.note);
   if (cmp === 0) {
@@ -35804,15 +36075,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() {
@@ -35861,6 +36133,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) {
@@ -35915,16 +36192,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 => {
@@ -35937,13 +36211,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()));
@@ -36498,7 +36774,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;
@@ -36779,6 +37055,7 @@ class ObjBarLine extends MusicObject {
     return this.rect.contains(x, y) ? [this] : [];
   }
   layout(renderer) {
+    var _a, _b;
     this.barLineType = this.solveBarLineType();
     var {
       unitSize,
@@ -36794,23 +37071,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) {
@@ -37170,7 +37459,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);
     }
   }
@@ -37216,8 +37505,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;
@@ -37250,6 +37540,9 @@ class ObjMeasure extends MusicObject {
   isPartialMeasure() {
     return this.getConsumedTicks() < this.getMeasureTicks();
   }
+  isUpBeat() {
+    return this === this.doc.getFirstMeasure();
+  }
   resetPassCount() {
     this.passCount = 0;
   }
@@ -37259,6 +37552,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 {
@@ -37271,28 +37587,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)) {
@@ -37672,10 +37987,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);
@@ -37709,16 +38020,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;
   }
@@ -37764,8 +38070,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 => {
@@ -37781,27 +38087,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) {
@@ -37830,7 +38127,7 @@ class ObjMeasure extends MusicObject {
     this.needBeamsUpdate = true;
   }
   updateBeams() {
-    if (!this.needBeamsUpdate) {
+    if (!this.needBeamsUpdate || !this.row.hasStaff) {
       return;
     }
     // Remove old beams/triplets
@@ -37839,34 +38136,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 => {
@@ -37886,19 +38199,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;
@@ -37956,6 +38256,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;
@@ -37979,14 +38282,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;
       });
@@ -38006,6 +38309,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;
@@ -38084,7 +38392,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) {
@@ -38092,12 +38400,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));
@@ -38106,7 +38423,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));
   }
 }
@@ -38172,16 +38489,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();
@@ -38243,40 +38558,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();
@@ -38289,42 +38610,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)) {
@@ -38344,35 +38666,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;
       }
     }
@@ -38405,12 +38702,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;
@@ -38418,6 +38709,7 @@ class ObjScoreRow extends MusicObject {
     }
   }
   layout(renderer) {
+    var _a;
     if (!this.needLayout) {
       return;
     }
@@ -38425,32 +38717,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) {
@@ -38562,6 +38867,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();
@@ -38574,10 +38883,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
@@ -38591,6 +38908,7 @@ class ObjScoreRow extends MusicObject {
 
 class ObjHeader extends MusicObject {
   constructor(doc, title, composer, arranger) {
+    var _a;
     super(doc);
     this.title = title;
     this.composer = composer;
@@ -38602,6 +38920,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;
@@ -38628,15 +38947,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) {
@@ -38651,6 +38978,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) {
@@ -38662,6 +38994,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) {
@@ -38674,6 +39009,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
@@ -38685,24 +39023,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) {
@@ -38791,7 +39142,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) {
@@ -38889,6 +39241,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;
       }
@@ -38897,7 +39254,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
@@ -39003,11 +39360,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 */
@@ -40106,26 +40467,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 */
@@ -40203,11 +40549,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);
@@ -40220,10 +40565,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);
@@ -40397,7 +40742,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);
@@ -40416,7 +40761,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, {
@@ -40559,7 +40904,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"
@@ -40695,5 +41040,5 @@ function createAndanteByDiabelli() {
 
 /* harmony default export */ var index_full = (exports_full_namespaceObject);
 // Log lib loaded message.
-console.log("%c" + "WebMusicScore v1.0.0 (esm)", "background: black; color: white; padding: 2px 4px;");
-export { types_Annotation as 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, exports_namespaceObject as SamplePieces, Scale, ScaleFactory, ScaleType, StaffKind, Stem, SymbolSet, TieLength, TimeSignature, TuningNameList, alterTempoSpeed, index_full as default, getDefaultKeySignature, getDefaultScale, getDefaultTempo, getDefaultTimeSignature, getScale, getScaleFactory, getScaleFactoryList, getTempoString, validateGuitarNoteLabel, validateHandedness, validateIntervalQuality, validateNoteLength, validatePitchNotation, validateScaleType, validateTuningName };
+console.log("%c" + "WebMusicScore v1.1.0 (esm)", "background: black; color: white; padding: 2px 4px;");
+export { types_Annotation as 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, exports_namespaceObject as SamplePieces, Scale, ScaleFactory, ScaleType, StaffKind, Stem, SymbolSet, TieLength, TimeSignature, TuningNameList, alterTempoSpeed, index_full as default, getDefaultKeySignature, getDefaultScale, getDefaultTempo, getDefaultTimeSignature, getScale, getScaleFactory, getScaleFactoryList, getTempoString, getTuningStrings, validateGuitarNoteLabel, validateHandedness, validateIntervalQuality, validateNoteLength, validatePitchNotation, validateScaleType, validateTuningName };