ascii-tabs 0.11.2 → 0.11.3

package/README.md

@@ -62,7 +62,7 @@ Design notes: [spec](docs/spec-v0.1.md), [glossary](GLOSSARY.md), [ADRs](docs/ad
 ## Usage
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/gh/libasoles/ascii-tabs@0.11.2/ascii-tabs.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/gh/libasoles/ascii-tabs@0.11.3/ascii-tabs.js"></script>
 
 <ascii-tabs></ascii-tabs>
 ```
@@ -409,7 +409,7 @@ E|-----3-|</pre>
 The copy button copies the same plain ASCII. `parse` and `format` are exported as pure functions:
 
 ```js
-import { parse, format } from 'https://cdn.jsdelivr.net/gh/libasoles/ascii-tabs@0.11.2/ascii-tabs.js';
+import { parse, format } from 'https://cdn.jsdelivr.net/gh/libasoles/ascii-tabs@0.11.3/ascii-tabs.js';
 
 const tab = parse('1 -3--5-\n2 ------\n3 ------\n4 ------\n5 ------\n6 ------'); // one Tab: Column[]
 format(tab, { spacing: 2 }); // "1 -3--5-\n2 ------\n..."
@@ -590,10 +590,11 @@ Strings are labelled `1`–`6` by default, on screen and in copied text. `labels
 String labels have no bars by default. Add the boolean `string-bars` attribute
 (or set `element.stringBars = true`) to draw a `|` at the start of each String,
 independently of the labels. The bars also appear in copied ASCII. Remove the
-attribute or set the property to `false` to hide them.
+attribute or set the property to `false` to hide them. With labels, the bar
+replaces the separating space, so `e|` and `1|` occupy two characters.
 
 ```html
-<ascii-tabs labels="notes" string-bars></ascii-tabs> <!-- e |-3--5- -->
+<ascii-tabs labels="notes" string-bars></ascii-tabs> <!-- e|-3--5- -->
 <ascii-tabs labels="none" string-bars></ascii-tabs>  <!-- |-3--5- -->
 ```
 

package/ascii-tabs.js

@@ -23,15 +23,16 @@ const normalizeTuning = value => {
     : [...STANDARD_TUNING];
 };
 const labelStyle = value => (value === 'notes' || value === 'none' ? value : 'numbers');
-const stringLabels = (labels, tuning) => {
+const stringLabels = (labels, tuning, stringBars = false) => {
   if (labelStyle(labels) === 'none') return Array(STRING_COUNT).fill('');
-  if (labelStyle(labels) === 'numbers') return ['1 ', '2 ', '3 ', '4 ', '5 ', '6 '];
-  const names = tuning.map((name, s) => `${s === 0 ? name.toLowerCase() : name} `);
-  const width = Math.max(...names.map(name => name.length));
+  const names = labelStyle(labels) === 'numbers'
+    ? ['1', '2', '3', '4', '5', '6']
+    : tuning.map((name, s) => s === 0 ? name.toLowerCase() : name);
+  const width = Math.max(...names.map(name => name.length)) + (stringBars ? 0 : 1);
   return names.map(name => name.padEnd(width, ' '));
 };
-const labelWidth = (labels, tuning) => stringLabels(labels, tuning)[0].length;
-const prefixWidth = (labels, tuning, stringBars) => labelWidth(labels, tuning) + (stringBars ? 1 : 0);
+const labelWidth = (labels, tuning, stringBars = false) => stringLabels(labels, tuning, stringBars)[0].length;
+const prefixWidth = (labels, tuning, stringBars) => labelWidth(labels, tuning, stringBars) + (stringBars ? 1 : 0);
 const notationStyle = value => (value === 'letters' || value === 'solfege' ? value : 'frets');
 const NOTE_NAMES = {
   letters: ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'],
@@ -180,7 +181,7 @@ function layout(tab, spacing, capacity, notation, tuning, sizes = []) {
 function format(tab, { spacing = DEFAULT_SPACING, labels = 'numbers', stringBars = false, notation = 'frets', tuning = STANDARD_TUNING, width = Infinity, annotations = [], annotationFit = 'overflow' } = {}) {
   tuning = normalizeTuning(tuning);
   annotations = normalizeAnnotations([annotations], [tab])[0] ?? [];
-  const names = stringLabels(labels, tuning);
+  const names = stringLabels(labels, tuning, stringBars);
   const columns = tab.slice(0, lastContent(tab, annotations) + 1);
   if (!columns.length) return '';
   const lead = '-'.repeat(leadingDashes(spacing));
@@ -1183,8 +1184,8 @@ class AsciiTabs extends Base {
     this.#annotationResizeObserver?.disconnect();
     const annotationPositions = [];
     const labels = this.labels, notation = this.notation, tuning = this.tuning;
-    const gutter = labelWidth(labels, tuning);
-    const names = stringLabels(labels, tuning);
+    const gutter = labelWidth(labels, tuning, this.stringBars);
+    const names = stringLabels(labels, tuning, this.stringBars);
     this.#titleEls.forEach((title, t) => {
       title.textContent = this.#tabTitles[t] ?? '';
       title.hidden = !title.textContent && !(this.titlesEditable && !this.readonly);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ascii-tabs",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "A zero-dependency web component to write and show guitar tabs as plain ASCII.",
   "type": "module",
   "main": "./ascii-tabs.js",