text-guitar-chart 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +18 -0
- package/FORMAT.md +277 -0
- package/LICENSE +21 -0
- package/README.md +41 -0
- package/docs/app.js +172 -0
- package/docs/bundle.js +8712 -0
- package/docs/bundle.js.map +7 -0
- package/docs/index.html +93 -0
- package/index.js +7 -0
- package/lib/editableSVGuitar.js +1050 -0
- package/lib/fingeringToString.js +261 -0
- package/lib/layoutChordStrings.js +92 -0
- package/lib/splitStringInRectangles.js +132 -0
- package/lib/stringToFingering.js +435 -0
- package/package.json +43 -0
- package/scripts/build.js +30 -0
- package/test/editableSVGuitar.test.js +444 -0
- package/test/fingeringToString.test.js +705 -0
- package/test/layoutChordStrings.test.js +193 -0
- package/test/splitStringInRectangles.test.js +98 -0
- package/test/stringToFingering.test.js +1086 -0
- package/tsconfig.json +25 -0
- package/types/editableSVGuitar.d.ts +209 -0
- package/types/fingeringToString.d.ts +10 -0
- package/types/layoutChordStrings.d.ts +10 -0
- package/types/splitStringInRectangles.d.ts +18 -0
- package/types/stringToFingering.d.ts +10 -0
package/docs/index.html
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Text Guitar Chart</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
7
|
+
<style>
|
|
8
|
+
body { font-family: system-ui, Arial, sans-serif; margin:20px; line-height:1.4; }
|
|
9
|
+
h1 { margin-top:0; font-size:1.35rem; }
|
|
10
|
+
.split { display:flex; gap:32px; flex-wrap:wrap; }
|
|
11
|
+
.panel { flex:1 1 340px; min-width:300px; }
|
|
12
|
+
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
|
|
13
|
+
button { padding:6px 12px; border:1px solid #444; background:#f5f5f5; border-radius:4px; cursor:pointer; font-size:14px; }
|
|
14
|
+
button.primary { background:#0d6efd; color:#fff; border-color:#0d6efd; }
|
|
15
|
+
button.danger { background:#dc3545; color:#fff; border-color:#dc3545; }
|
|
16
|
+
button:disabled { opacity:.55; cursor:not-allowed; }
|
|
17
|
+
#output, #output-ascii, #output-unicode { font-family:monospace; background:#111; color:#0f0; padding:10px; border-radius:4px; font-size:12px; white-space:pre; max-height:220px; overflow:auto; line-height: 1; }
|
|
18
|
+
.note { font-size:13px; color:#555; }
|
|
19
|
+
.footer { margin-top:40px; font-size:12px; color:#666; }
|
|
20
|
+
.tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid #ddd; }
|
|
21
|
+
.tabs button { border-radius:4px 4px 0 0; border-bottom:none; background:#f5f5f5; padding:8px 16px; }
|
|
22
|
+
.tabs button.active { background:#fff; border-bottom:2px solid #fff; margin-bottom:-2px; font-weight:600; }
|
|
23
|
+
#batch-converter, #interactive-editor { display:none; }
|
|
24
|
+
#batch-converter.active , #interactive-editor.active { display:block; }
|
|
25
|
+
#batch-input { width:100%; min-width:800px; height:300px; font-family:monospace; font-size:13px; line-height:1; padding:10px; border:1px solid #ccc; border-radius:4px; resize:vertical; }
|
|
26
|
+
#chord-grid { display:flex; flex-wrap:wrap; gap:24px; margin-top:20px; }
|
|
27
|
+
.chord-container { width:220px; }
|
|
28
|
+
</style>
|
|
29
|
+
<script type="module" src="./bundle.js"></script>
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<h1>Text Guitar Chart</h1>
|
|
33
|
+
|
|
34
|
+
<div class="tabs">
|
|
35
|
+
<button type="button" id="tab-editor" class="active">Interactive Editor</button>
|
|
36
|
+
<button type="button" id="tab-batch">Batch Converter</button>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div id="interactive-editor" class="active">
|
|
40
|
+
<p class="note">
|
|
41
|
+
Click empty fretboard positions to add dots; click existing dots to edit or remove them.
|
|
42
|
+
The fretboard automatically adjusts to show all dots with one extra fret.
|
|
43
|
+
</p>
|
|
44
|
+
<div class="split">
|
|
45
|
+
<div class="panel">
|
|
46
|
+
<div id="editor"></div>
|
|
47
|
+
<div class="toolbar">
|
|
48
|
+
<button id="clear" type="button" class="danger">Clear</button>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="panel">
|
|
52
|
+
<h2 style="margin-top:0;font-size:1.05rem;">Current Chord JSON</h2>
|
|
53
|
+
<div id="output" aria-live="polite">{}</div>
|
|
54
|
+
<div class="toolbar">
|
|
55
|
+
<button id="copy-json" type="button">Copy JSON</button>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="panel">
|
|
59
|
+
<h2 style="margin-top:0;font-size:1.05rem;">Current Chord ASCII</h2>
|
|
60
|
+
<div id="output-ascii" aria-live="polite">{}</div>
|
|
61
|
+
<div class="toolbar">
|
|
62
|
+
<button id="copy-ascii" type="button">Copy ASCII</button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="panel">
|
|
66
|
+
<h2 style="margin-top:0;font-size:1.05rem;">Current Chord Unicode</h2>
|
|
67
|
+
<div id="output-unicode" aria-live="polite">{}</div>
|
|
68
|
+
<div class="toolbar">
|
|
69
|
+
<button id="copy-unicode" type="button">Copy Unicode</button>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div id="batch-converter">
|
|
76
|
+
<p class="note">
|
|
77
|
+
Paste multiple chord diagrams in ASCII or Unicode format below. The converter will automatically split them and render each as an SVG chord diagram.
|
|
78
|
+
</p>
|
|
79
|
+
<textarea id="batch-input" placeholder="Paste chord diagrams here (ASCII or Unicode format)..."></textarea>
|
|
80
|
+
<div class="toolbar">
|
|
81
|
+
<button id="convert-btn" type="button" class="primary">Convert to SVG</button>
|
|
82
|
+
<button id="layout-2-btn" type="button" class="secondary">Layout in 2 columns</button>
|
|
83
|
+
<button id="layout-3-btn" type="button" class="secondary">Layout in 3 columns</button>
|
|
84
|
+
<button id="layout-4-btn" type="button" class="secondary">Layout in 4 columns</button>
|
|
85
|
+
</div>
|
|
86
|
+
<div id="chord-grid"></div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="footer">
|
|
90
|
+
© 2026 Text Guitar Chart. Created by Maurizio Lupo
|
|
91
|
+
</div>
|
|
92
|
+
</body>
|
|
93
|
+
</html>
|
package/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { EditableSVGuitarChord } from "./lib/editableSVGuitar";
|
|
2
|
+
import fingeringToString from "./lib/fingeringToString";
|
|
3
|
+
import stringToFingering from "./lib/stringToFingering";
|
|
4
|
+
import layoutChordStrings from "./lib/layoutChordStrings";
|
|
5
|
+
import splitStringInRectangles from "./lib/splitStringInRectangles";
|
|
6
|
+
|
|
7
|
+
export { EditableSVGuitarChord, fingeringToString, stringToFingering, layoutChordStrings, splitStringInRectangles };
|