chordsong/dist/SvgDiagram.js

ChordSong is a simple text format for the notation of lyrics with guitar chords, and an application that renders them to portable HTML pages.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SvgDiagram = void 0;
const fs_1 = require("fs");
const path_1 = require("path");
class SvgDiagram {
    constructor(diagram, options) {
        this.diagram = diagram;
    }
    get openStrings() {
        return this.diagram.fretStrings['0'] ?? [];
    }
    get mutedStrings() {
        return this.diagram.fretStrings['-1'] ?? [];
    }
    get playedStrings() {
        const playedStrings = [];
        this.diagram.stringFrets.forEach((fret, string) => {
            if (fret > 0) {
                playedStrings.push(string);
            }
        });
        return playedStrings;
    }
    svg(showVariant) {
        let minFret = this.diagram.minFret;
        if (this.diagram.maxFret - minFret > 4)
            minFret = this.diagram.maxFret - 4;
        if (this.diagram.maxFret <= 5)
            minFret = 1;
        return `
<svg width="64" height="64">
  ${this.svgTitle(showVariant)}
  <g class="chord-chord" transform="translate(8.5,13.5)">
    <use href="#chord-diapason" x="0" y="0" />
    ${this.svgNut(minFret)}
    ${this.svgMinFretText(minFret)}
    ${this.svgFingersOrBarres(minFret)}
    ${this.svgStrings('muted')}
    ${this.svgStrings('open')}
    ${this.svgStrings('played')}
  </g>
</svg>`;
    }
    svgTitle(showVariant) {
        let title = '';
        if (this.diagram.chordName !== undefined) {
            title = this.diagram.chordName;
            if (showVariant === true && this.diagram.chordVariant !== undefined) {
                title = `${title}:${this.diagram.chordVariant}`;
            }
        }
        return (title !== '') ? `<text class="chord-name" x="26" y="0" dominant-baseline="hanging" text-anchor="middle">${title}</text>` : '';
    }
    svgNut(minFret) {
        return (minFret > 1) ? '' : '<use href="#chord-nut" x="0" y="0" />';
    }
    svgMinFretText(minFret) {
        return (minFret > 1)
            ? `<text class="chord-min-fret" x="38" y="6.5" dominant-baseline="middle">${String(minFret)}</text>`
            : '';
    }
    svgFingersOrBarres(minFret) {
        let ret = '';
        this.diagram.fingersAndBarrels.forEach(barre => {
            const barreLength = barre.stringTo - barre.stringFrom + 1;
            ret += `<use href="#chord-barre${barreLength}" x="${barre.stringFrom * 7}" y="${(barre.fret - minFret) * 8}" />`;
        });
        return `<g class="chord-fingers-and-barres" transform="translate(-2,4)">${ret}</g>`;
    }
    svgStrings(stringType) {
        let ret = '';
        const shape = (stringType === 'played') ? 'barre1' : stringType;
        this[`${(stringType)}Strings`].forEach((chordString) => {
            ret += `<use href="#chord-${shape}" x="${chordString * 7}" y="0" />`;
        });
        return `<g class="chord-${stringType}-strings" transform="translate(-2,46)">${ret}</g>`;
    }
}
exports.SvgDiagram = SvgDiagram;
SvgDiagram.svgDefs = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, 'chord-defs.svg'), { encoding: 'utf8' });
//# sourceMappingURL=SvgDiagram.js.map