Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@guitar-chords/svg

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@guitar-chords/svg

Use SVG to generate guitar chords or edit it.

  • 0.0.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7
decreased by-96.82%
Maintainers
1
Weekly downloads
 
Created
Source

@guitar-chords/svg

Downloads Version License

Use SVG to generate guitar chords.

Install

npm install @guitar-chords/svg

Usage

options GuitarChords Instantiation Options, See GuitarChordsOptions.

import { GuitarChords } from '@guitar-chords/svg'

const guitarChords = new GuitarChords({
  name: 'C',
  matrix: [
    [0, 0, 0, 0, 1, 0],
    [0, 0, 2, 0, 0, 0],
    [3, 4, 0, 0, 0, 0],
  ],
})
// get canvas element and append to body
document.querySelect('body').append(guitarChords.element)
// get data
console.log(guitarChords.data)

Property

data

Get the chord data.

  • @returns GuitarChordsData See GuitarChordsData

element

Get the Svg element of the GuitarChords

  • @returns SvgElement

gridRect

Get the size and position information of the chord grid.

height

Get the height of the chord

  • @returns number

version

Get the version of the chord

  • @returns string version 1.0.0

width

Get the width of the chord

  • @returns number

Methods

render(options)

Re-render the chord.

ParamTypesRequiredDescription
optionsPartial<GuitarChordsOptions>noChord instantiation options, see GuitarChordsOptions
  • @returns GuitarChords

Types

GridRect

Grid size and position information.

PropTypesRequiredDescription
widthnumberyesGrid Width
heightnumberyesGrid Height
topnumberyesThe position of the top of the grid in the entire chord diagram
rightnumberyesThe position of the right of the grid in the entire chord diagram
bottomnumberyesThe position of the bottom of the grid in the entire chord diagram
leftnumberyesThe position of the left of the grid in the entire chord diagram

GuitarChordsData

Guitar Chords All Options (Configuration Data).

PropTypesRequiredDescription
autoRenderbooleanyesWhether to automatically render when instantiated, the default is true
defaultColorstringyesDefault colors (except for the color of the finger number text)
defaultLineWidthnumberyesDefault line width
transposenumberyesChord transposition value, 1 is a sharp semitone, -1 is a flat semitone, default is 0
transposeTextColorstringyesThe font color of the chord transposition symbol is the same as the chord name font color by default
namestringyesChord Name
nameFontSizenumberyesChord name font size
nameTextColorstringyesChord Name Color
nameLetterSpacingnumberyesThe spacing between chord name letters, default is 0
spacingnumberyesSpacing between chord names and the chord grid
nutLineWidthnumberyesThe width of the nut line (default is the value of lineWidth)
nutColorstringyesNut Line Color
fretsSpacingnumberyesFret Line Spacing
fretsColorstringyesFret Line Color
fretsLineWidthnumberyesFret Line Width
stringSpacingnumberyesString line spacing
stringColorstringyesString line color
stringLineWidthnumberyesString line width
fingerRadiusnumberyesRadius of the fingering dot
fingerCircleColorstringyesFingering dot color
showFingerNumberbooleanyesWhether to display the finger number, the default is true
fingerNumberTextColorstringyesFinger number font color, default #fff
startFretsnumberyesThe starting fret of the chord, default is 0
startFretsTextColorstringyesStarting grade font color
matrixnumber[][]yesMatrix of chord fingerings and number of frets (2D array with rows representing chords and columns representing frets)
mergeFingerCirclebooleanyesWhether to merge fingering dots when playing barre/barre, default is false
showNotesOutsideOfChordsbooleanyesUsed to configure whether to display a small cross x/o at the head of the empty string column, the default is false
notesOutsideOfChordsRecord<number, boolean>yesWhether to display open strings as notes outside of chords option {chord number (strings 1-6 for guitar): true or false}
crossLineWidthnumberyesThe line thickness of the notes x/o outside the chord is the default string line width. Its length is the diameter of the fingering dot
crossLineColorstringyesLine color for the non-chord tones x/o
crossRadiusnumberyesThe radius of the chord outside the tone x/o, the default is fingerRadius * 0.75

GuitarChordsOptions

Required configuration options for chord strength, see GuitarChordsData

interface GuitarChordsOptions {
  name: string;
  matrix: GuitarChordsData['matrix'];
}

Constants

Chord Default Options

{
  autoRender: true,
  defaultColor: '#000',
  defaultLineWidth: 4,
  transpose: 0,
  nameFontSize: 60,
  spacing: 20,
  fretsSpacing: 50,
  stringSpacing: 30,
  fingerRadius: 15,
  showFingerNumber: true,
  fingerNumberTextColor: '#fff',
  startFrets: 0,
  matrix: [
    [0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0],
  ],
  mergeFingerCircle: false,
  showNotesOutsideOfChords: false,
}

Contributors

90% of the code for version<=0.0.4 is completed by Cursor (The AI ​​Code Editor)

FAQs

Package last updated on 07 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc