Rectangle

// modified from // https://github.com/hackmdio/codimd/tree/e00eaa82a98423b9eeb904b9c9fc8fc939f9f6e6/public/js/lib/renderer/fretboard import { escapeHtml } from './utils' const dotEmpty = `` const dotEmptyH = `` const dot = `` const dotH = `` const dotWideLeft = `` const dotWideRight = `` const dotWideMiddle = `` const stringO = `` const stringX = `` const numberSVG = [ // 1 ``, // 2 ` `, // 3 ` `, // 4 ` `, // 5 ` `, // 6 ` `, // 7 ` `, // 8 ` `, // 9 ` ` ] const numberHSVG = [ // 1 ` `, // 2 ` `, // 3 ` `, // 4 ` `, // 5 ` `, // 6 ` `, // 7 ` `, // 8 ` `, // 9 ` ` ] const fretbHoriz = { 5: ``, 6: ``, 7: `` } const fretbVert = { 4: ``, 5: ``, 7: ``, 9: ``, 12: ``, 15: `` } const switchListV = { o: `

${dot}

`, '*': `

${dot}

`, '(': `

${dotWideLeft}

`, ')': `

${dotWideRight}

`, '=': `

${dotWideMiddle}

`, '^': `

${stringO}

`, x: `

${stringX}

`, '|': `

${dotEmpty}

`, ' ': `

${dotEmpty}

`, '\n': `

${dotEmpty}

` } const switchListH = { o: `

${dotH}

`, '*': `

${dotH}

`, O: `

${dotH}

`, '-': `

${dotEmptyH}

`, ' ': `

${dotEmptyH}

`, '\n': `

${dotEmptyH}

` } export const renderFretBoard = (content: string, { title: fretTitle = '', type = '' }): string => { const isVertical = !(typeof type[0] === 'string' && type[0].startsWith('h')) const containerClass = isVertical ? 'fretContainer' : 'fretContainer_h' const [fretType, nutOption] = type.split(' ') // create fretboard background HTML // const fretbOrientation = isVertical ? 'vert' : 'horiz' const fretbLen = parseInt(fretType && fretType.substring(1) || "") const fretbClass = fretType && fretType[0] + ' ' + fretType const nut = nutOption === 'noNut' ? 'noNut' : '' // eslint-disable-next-line @typescript-eslint/no-explicit-any const fretb: any = isVertical ? fretbVert : fretbHoriz const fretbBg = fretb[fretbLen] // create cells HTML let cellsHTML = '

' // eslint-disable-next-line @typescript-eslint/no-explicit-any let switchList: any = switchListV if (!isVertical) { // calculate position const emptyFill = new Array(Number(fretbLen) + 3).fill(' ').join('') content = `${emptyFill}${content}` switchList = switchListH } const contentCell = content && content.split('') // Go through each ASCII character... const numArray = [...Array(10).keys()].slice(1) if (contentCell) { contentCell.forEach(char => { if (numArray.toString().indexOf(char) !== -1) { const num = parseInt(char) - 1 if (num >= 0 && num <= 8) { cellsHTML += `

` cellsHTML += isVertical ? numberSVG[num] : numberHSVG[num] cellsHTML += `

` } } else if (typeof switchList[char] !== 'undefined') { cellsHTML += switchList[char] } }) } cellsHTML += '

' const svgHTML = `

` + fretbBg + cellsHTML + `

` let ret = `

` if (fretTitle) { ret += `

${escapeHtml(fretTitle)}

` } ret += svgHTML + '

' return ret }