mirror of
https://github.com/status-im/codimd.git
synced 2025-02-04 18:44:19 +00:00
init ascii fretboard
Signed-off-by: Ca Chen <kiancaca@gmail.com>
This commit is contained in:
Ca Chen
parent
7b148457a7
commit
2ea3e59842
@ -23,6 +23,8 @@ import markdownitContainer from 'markdown-it-container'
|
||||
/* Defined regex markdown it plugins */
|
||||
import Plugin from 'markdown-it-regexp'
|
||||
|
||||
import { renderFretBoard } from '../vendor/fretboard/fretboard.js'
|
||||
|
||||
require('prismjs/themes/prism.css')
|
||||
require('prismjs/components/prism-wiki')
|
||||
require('prismjs/components/prism-haskell')
|
||||
@ -483,6 +485,20 @@ export function finishView (view) {
|
||||
console.warn(err)
|
||||
}
|
||||
})
|
||||
// fretboard
|
||||
const fretboard = view.find('div.fretboard_instance.raw').removeClass('raw')
|
||||
fretboard.each((key, value) => {
|
||||
const $value = $(value)
|
||||
|
||||
try {
|
||||
const $ele = $(value).parent().parent()
|
||||
$ele.html(renderFretBoard($value.text()))
|
||||
} catch (err) {
|
||||
$value.unwrap()
|
||||
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
|
||||
console.warn(err)
|
||||
}
|
||||
})
|
||||
|
||||
// image href new window(emoji not included)
|
||||
const images = view.find('img.raw[src]').removeClass('raw')
|
||||
|
||||
@ -102,7 +102,7 @@ var cursorActivityDebounce = 50
|
||||
var cursorAnimatePeriod = 100
|
||||
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
|
||||
var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
|
||||
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
|
||||
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo', 'fretboard']
|
||||
var supportHeaders = [
|
||||
{
|
||||
text: '# h1',
|
||||
|
||||
112
public/vendor/fretboard/fretboard.js
vendored
Normal file
112
public/vendor/fretboard/fretboard.js
vendored
Normal file
@ -0,0 +1,112 @@
|
||||
import {
|
||||
dotEmpty,
|
||||
dotEmpty_h,
|
||||
dot,
|
||||
dot_h,
|
||||
dotWideLeft,
|
||||
dotWideRight,
|
||||
dotWideMiddle,
|
||||
string_o,
|
||||
string_x,
|
||||
fretb_vert_4,
|
||||
fretb_vert_5,
|
||||
fretb_vert_7,
|
||||
fretb_vert_9,
|
||||
fretb_vert_12,
|
||||
fretb_vert_15,
|
||||
fretb_horiz_5,
|
||||
fretb_horiz_6,
|
||||
fretb_horiz_7,
|
||||
} from './fretboardSVG.js'
|
||||
|
||||
const switchList_v = {
|
||||
'o': `<div class='cell dot'>${dot}</div>`,
|
||||
'*': `<div class='cell dot faded'>${dot}</div>`,
|
||||
'(': `<div class='cell'>${dotWideLeft}</div>`,
|
||||
')': `<div class='cell'>${dotWideRight}</div>`,
|
||||
'=': `<div class='cell'>${dotWideMiddle}</div>`,
|
||||
'^': `<div class='cell'>${string_o}</div>`,
|
||||
'x': `<div class='cell'>${string_x}</div>`,
|
||||
'|': `<div class='cell empty'>${dotEmpty}</div>`,
|
||||
' ': `<div class='cell empty'>${dotEmpty}</div>`
|
||||
}
|
||||
const switchList_h = {
|
||||
'o': `<div class='cell dot'>${dot_h}</div>`,
|
||||
'*': `<div class='cell dot faded'>${dot_h}</div>`,
|
||||
'O': `<div class='cell dot root'>${dot_h}</div>`,
|
||||
'-': `<div class='cell empty'>${dotEmpty_h}</div>`,
|
||||
' ': `<div class='cell empty'>${dotEmpty_h}</div>`
|
||||
}
|
||||
|
||||
export const renderFretBoard = (content) => {
|
||||
|
||||
let fretboardHTML = $('<div class="fretboard_instance"></div>')
|
||||
if (content.includes('title:')) {
|
||||
const getTitle = content.split('\n', 1)[0].split('title:')[1].trim()
|
||||
$(fretboardHTML).append($(`<div class="title">${getTitle}</div>`))
|
||||
content = content.split('\n').slice(1).join('\n')
|
||||
}
|
||||
|
||||
let fretType = ''
|
||||
if (content.startsWith('type:')) {
|
||||
fretType = content.split('\n', 1)[0].split('type:')[1].trim().split(' ')
|
||||
content = content.split('\n').slice(1).join('\n')
|
||||
}
|
||||
|
||||
let fretb_orientation = fretType[0].startsWith('v') ? 'vert' : 'horiz'
|
||||
let fretb_len = fretType[0].substring(1)
|
||||
|
||||
// TODO: to get svg dynamically
|
||||
let fretb_bg = ''
|
||||
switch (fretb_len) {
|
||||
case '4':
|
||||
fretb_bg = fretb_vert_4
|
||||
break
|
||||
case '5':
|
||||
if (fretb_orientation === 'vert')
|
||||
fretb_bg = fretb_vert_5
|
||||
else
|
||||
fretb_bg = fretb_horiz_5
|
||||
break
|
||||
case '6':
|
||||
fretb_bg = fretb_horiz_6
|
||||
break
|
||||
case '7':
|
||||
if (fretb_orientation === 'vert')
|
||||
fretb_bg = fretb_vert_7
|
||||
else
|
||||
fretb_bg = fretb_horiz_7
|
||||
break
|
||||
case '9':
|
||||
fretb_bg = fretb_vert_9
|
||||
break
|
||||
case '12':
|
||||
fretb_bg = fretb_vert_12
|
||||
break
|
||||
case '15':
|
||||
fretb_bg = fretb_vert_15
|
||||
break
|
||||
}
|
||||
|
||||
// create fretboard background HTML
|
||||
let fretb_class = fretType[0][0] + ' ' + fretType[0]
|
||||
let nut = (fretType[1] && fretType[1] === 'noNut')?'noNut':''
|
||||
let svgHTML = $(`<div class="svg_wrapper ${fretb_class} ${nut}"></div>`)
|
||||
$(svgHTML).append($(fretb_bg))
|
||||
|
||||
// create cells HTML
|
||||
let cellsHTML = $('<div class="cells"></div>')
|
||||
let switchList = fretb_orientation === 'vert' ? switchList_v : switchList_h
|
||||
let contentCell = content.split('')
|
||||
// Go through each ASCII character...
|
||||
contentCell.forEach(char => {
|
||||
if (switchList[char] !== undefined) {
|
||||
cellsHTML.append($(switchList[char]));
|
||||
}
|
||||
})
|
||||
|
||||
$(svgHTML).append($(cellsHTML))
|
||||
$(fretboardHTML).append($(svgHTML))
|
||||
|
||||
return fretboardHTML[0].outerHTML
|
||||
}
|
||||
306
public/vendor/fretboard/fretboardSVG.js
vendored
Normal file
306
public/vendor/fretboard/fretboardSVG.js
vendored
Normal file
@ -0,0 +1,306 @@
|
||||
const dotEmpty = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<circle class="fretb_dot_empty" fill="none" cx="36" cy="44" r="32"/>\
|
||||
</svg>';
|
||||
|
||||
const dotEmpty_h = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">\
|
||||
<circle class="fretb_dot_empty" fill="none" cx="48" cy="36" r="32"/>\
|
||||
</svg>';
|
||||
|
||||
const dot = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<circle class="fretb_dot" fill="#27AAE1" cx="36" cy="44" r="32"/>\
|
||||
</svg>';
|
||||
|
||||
const dot_h = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">\
|
||||
<circle class="fretb_dot dot_h" fill="#27AAE1" cx="48" cy="36" r="32"/>\
|
||||
</svg>';
|
||||
|
||||
const dotWideLeft = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<path fill="#27AAE1" d="M36,16C20.537,16,8,28.537,8,44s12.537,28,28,28v0.125h36V16H36z"/>\
|
||||
</svg>';
|
||||
|
||||
const dotWideRight = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<path fill="#27AAE1" d="M36,72.125c15.463,0,28-12.537,28-28s-12.537-28-28-28V16H0l0,56.125H36z"/>\
|
||||
</svg>';
|
||||
|
||||
const dotWideMiddle = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<rect y="16" fill="#27AAE1" width="72" height="56"/>\
|
||||
</svg>';
|
||||
|
||||
const string_o = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<path fill="#27AAE1" d="M36,21c6.065,0,11,4.935,11,11s-4.935,11-11,11s-11-4.935-11-11S29.935,21,36,21 M36,14c-9.94,0-18,8.06-18,18s8.06,18,18,18s18-8.06,18-18S45.94,14,36,14L36,14z"/>\
|
||||
</svg>';
|
||||
|
||||
const string_x = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">\
|
||||
<path fill="#27AAE1" d="M51.067,41.831L41.236,32l9.831-9.831c-1.365-2.087-3.149-3.871-5.236-5.236L36,26.764l-9.831-9.831c-2.087,1.365-3.871,3.149-5.236,5.236L30.764,32l-9.831,9.831c1.365,2.087,3.149,3.871,5.236,5.236L36,37.236l9.831,9.831C47.918,45.702,49.702,43.918,51.067,41.831z"/>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_4 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 528" enable-background="new 0 0 576 528" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="72" fill="#FFFFFF" width="372" height="384"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="384"/>\
|
||||
<rect x="174" y="72" width="12" height="384"/>\
|
||||
<rect x="246" y="72" width="12" height="384"/>\
|
||||
<rect x="318" y="72" width="12" height="384"/>\
|
||||
<rect x="390" y="72" width="12" height="384"/>\
|
||||
<rect x="462" y="72" width="12" height="384"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="102" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_5 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 616" enable-background="new 0 0 576 616" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="72" fill="#FFFFFF" width="372" height="472"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="472"/>\
|
||||
<rect x="174" y="72" width="12" height="472"/>\
|
||||
<rect x="246" y="72" width="12" height="472"/>\
|
||||
<rect x="318" y="72" width="12" height="472"/>\
|
||||
<rect x="390" y="72" width="12" height="472"/>\
|
||||
<rect x="462" y="72" width="12" height="472"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="102" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_7 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 792" enable-background="new 0 0 576 792" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="71" fill="#FFFFFF" width="372" height="649"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="648"/>\
|
||||
<rect x="174" y="72" width="12" height="648"/>\
|
||||
<rect x="246" y="72" width="12" height="648"/>\
|
||||
<rect x="318" y="72" width="12" height="648"/>\
|
||||
<rect x="390" y="72" width="12" height="648"/>\
|
||||
<rect x="462" y="72" width="12" height="648"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="102" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_9 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 968" enable-background="new 0 0 576 968" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="72" fill="#FFFFFF" width="372" height="824"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="824"/>\
|
||||
<rect x="174" y="72" width="12" height="824"/>\
|
||||
<rect x="246" y="72" width="12" height="824"/>\
|
||||
<rect x="318" y="72" width="12" height="824"/>\
|
||||
<rect x="390" y="72" width="12" height="824"/>\
|
||||
<rect x="462" y="72" width="12" height="824"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="102" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_12 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1232" enable-background="new 0 0 576 1232" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1088"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="1088"/>\
|
||||
<rect x="174" y="72" width="12" height="1088"/>\
|
||||
<rect x="246" y="72" width="12" height="1088"/>\
|
||||
<rect x="318" y="72" width="12" height="1088"/>\
|
||||
<rect x="390" y="72" width="12" height="1088"/>\
|
||||
<rect x="462" y="72" width="12" height="1088"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="104" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_vert_15 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1496" enable-background="new 0 0 576 1496" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="102" y="72" fill="#FFFFFF" width="372" height="1352"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1228" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1316" fill="#C7C8CA" width="360" height="8"/>\
|
||||
<rect x="108" y="1404" fill="#C7C8CA" width="360" height="8"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="102" y="72" width="12" height="1352"/>\
|
||||
<rect x="174" y="72" width="12" height="1352"/>\
|
||||
<rect x="246" y="72" width="12" height="1352"/>\
|
||||
<rect x="318" y="72" width="12" height="1352"/>\
|
||||
<rect x="390" y="72" width="12" height="1352"/>\
|
||||
<rect x="462" y="72" width="12" height="1352"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="104" y="72" width="368" height="20"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_horiz_5 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 672 576" enable-background="new 0 0 672 576" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="78" y="102" fill="#FFFFFF" width="512" height="372"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="78" y="102" width="512" height="12"/>\
|
||||
<rect x="78" y="174" width="512" height="12"/>\
|
||||
<rect x="78" y="246" width="512" height="12"/>\
|
||||
<rect x="78" y="318" width="512" height="12"/>\
|
||||
<rect x="78" y="390" width="512" height="12"/>\
|
||||
<rect x="78" y="462" width="512" height="12"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="78" y="102" width="22" height="372"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
const fretb_horiz_6 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 768 576" enable-background="new 0 0 768 576" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="78" y="102" fill="#FFFFFF" width="608" height="372"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="668" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="78" y="102" width="608" height="12"/>\
|
||||
<rect x="78" y="174" width="608" height="12"/>\
|
||||
<rect x="78" y="246" width="608" height="12"/>\
|
||||
<rect x="78" y="318" width="608" height="12"/>\
|
||||
<rect x="78" y="390" width="608" height="12"/>\
|
||||
<rect x="78" y="462" width="608" height="12"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="78" y="102" width="22" height="372"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
var fretb_horiz_7 = '<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 576" enable-background="new 0 0 792 576" xml:space="preserve">\
|
||||
<g class="fret_bg">\
|
||||
<rect x="72" y="102" fill="#FFFFFF" width="648" height="372"/>\
|
||||
</g>\
|
||||
<g class="frets">\
|
||||
<rect x="84" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="172" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="260" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="348" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="436" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="524" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="612" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
<rect x="700" y="108" fill="#C7C8CA" width="8" height="360"/>\
|
||||
</g>\
|
||||
<g class="strings">\
|
||||
<rect x="72" y="462" width="648" height="12"/>\
|
||||
<rect x="72" y="390" width="648" height="12"/>\
|
||||
<rect x="72" y="318" width="648" height="12"/>\
|
||||
<rect x="72" y="246" width="648" height="12"/>\
|
||||
<rect x="72" y="174" width="648" height="12"/>\
|
||||
<rect x="72" y="102" width="648" height="12"/>\
|
||||
</g>\
|
||||
<g class="nut">\
|
||||
<rect x="72" y="106" width="20" height="368"/>\
|
||||
</g>\
|
||||
</svg>';
|
||||
|
||||
module.exports = {
|
||||
dotEmpty,
|
||||
dotEmpty_h,
|
||||
dot,
|
||||
dot_h,
|
||||
dotWideLeft,
|
||||
dotWideRight,
|
||||
dotWideMiddle,
|
||||
string_o,
|
||||
string_x,
|
||||
fretb_vert_4,
|
||||
fretb_vert_5,
|
||||
fretb_vert_7,
|
||||
fretb_vert_9,
|
||||
fretb_vert_12,
|
||||
fretb_vert_15,
|
||||
fretb_horiz_5,
|
||||
fretb_horiz_6,
|
||||
fretb_horiz_7,
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user