vector-score 1.2.0 → 1.2.1

package/README.md

@@ -15,7 +15,7 @@ A lightweight, SVG-based TypeScript library for rendering simple musical notatio
 * Supports grand, treble, bass, and alto clefs.
 * Easy to add notes and provides justifying alignment functions.
 * Simple single line staff for display chords, notes, or scales.
-* [**Go to Music Staffs**](#Standard-Music-Staff) 
+* [**Go to Music Staffs**](#Grand-Staff) 
 
 ### Render and Display Guitar Chords
 * Write explicitly which string, fret, and optionally finger to display on the diagram.
@@ -29,22 +29,6 @@ A lightweight, SVG-based TypeScript library for rendering simple musical notatio
 
 <br />
 
-## Notes
-
-* Main targeting class for css is 'vs-svg-renderer-parent'
-  * Could be useful if needing to add in specific colors or styling to any SVG element rendered.
-
-
-<br />
-
-## Installation
-
-```bash
-npm i vector-score
-```
-
-<br />
-
 ## Usage
 
 ### 1. Setup HTML
@@ -71,13 +55,7 @@ const staff = new MusicStaff(container, {
 });
 
 // Draw a C Minor scale (quarter notes)
-// Format: NoteName + Accidental(optional) + Octave + Duration
 staff.drawNote(['C4q', 'D4q', 'Eb4q', 'F4q', 'G4q', 'Ab4q', 'Bb4q', 'C5q']);
-
-// Draw a C Chord
-staff.drawChord(['C4w', 'E4w', 'G4w']);
-
-// Evenly space all notes on the staff
 staff.justifyNotes();
 ```
 
@@ -86,6 +64,29 @@ staff.justifyNotes();
 
 <br/>
 
+## Notes
+
+### CSS Classes
+Listed below will be all the specific classes that can be targeted to change their repsective elements styling. All elements that are designed to be targeted with classes are prefixed with `vs-`.
+
+* `svg.vs-svg-renderer-root`: The actual svg element.
+* `g.vs-svg-renderer-parent`: The main group element.
+* `text.vs-guitar-text-base && text.vs-guitar-text-small`: The \<text\> elements for the labels on the guitar chord diagram.
+* `circle.vs-guitar-fret-dot`: The element for the guitar fret dots.
+* `rect.vs-guitar-barre`: The element for the guitar barre lines.
+* `g.vs-scrolling-notes-layer > g.vs-note-wrapper`: Targeting the scrolling staff's notes, which a transition property can be added for smooth animation.
+
+Example
+
+```css
+/* Target and change the fret dot colors */
+.vs-guitar-fret-dot {
+  fill: oklch(67% 0.05 240.864);
+}
+```
+
+<br />
+
 ## Grand Staff
 
 See [**Note String Syntax**](#Note-String-Syntax) to see how to write notes on music staff (i.e. ['G4q', 'E4h', 'C4w', "A3h", "F3h"] )
@@ -125,10 +126,10 @@ const grandStaff = new GuitarChord(container, {
   fretCount: 5,
   stringCount: 6,
   stringLabels: ["E", "A", "D", "G", "B", "E"],
-  width: 300,
+  inlineChordsAmount: 2, // Choose how many chords are in a single line
   scale: 1,
   color: "var(--font-color)",
-  backgroundColor: "var(--bg-color)"
+  backgroundColor: "white"
 });
 
 // C chord
@@ -137,9 +138,9 @@ guitarChordsSection.addChord("x32010", "032010", {
 });
 
 // Bbmaj7 Barre Chord (Automatically calculates the starting fret and barre positioning)
-const frets = "x13231";
-const fingers = "013241";
-const barres = guitarChordsSection.determineBarreOptions(frets, fingers, [1]);
+const frets = "687766";
+const fingers = "142311";
+const barres = guitarChordsSection.determineBarreOptions(frets, fingers, [6]);
 
 guitarChordsSection.addChord(frets, fingers, {
   label: "Bbmaj7",
@@ -348,10 +349,11 @@ Barre lines can be added dynamically using the built-in helper method, `determin
 * `stringCount`: Amount of strings to show in diagram, default is 6.
 * `fretCount`: Amount of frets to show in diagram, default is 5.
 * `stringLabels`: Labels to show under each string in each chord diagram. Provided string values will display in order of strings in this array value.
-* `width`: Total width of the SVG in pixels.
+* `inlineChordsAmount`: Max amount of chords to display on a single line (default: 2).
 * `scale`: Zoom factor (default: 1).
 * `color`: CSS color string for lines and notes.
 * `backgroundColor`: CSS color string for background.
+* `width`: Total width of the SVG in pixels, overrides inlineChordAmount auto width calculation (default: undefined).
 
 ### RhythmStaffOptions
 * `topNumber`: The top number of the time signature (e.g., 4 for 4/4 time).

package/dist/classes/GuitarChord.d.ts

@@ -1,6 +1,7 @@
 import { GuitarBarreDef, GuitarChordDrawOptions } from '../types';
 export type GuitarChordOptions = {
     width?: number;
+    inlineChordsAmount?: number;
     scale?: number;
     stringCount?: number;
     fretCount?: number;
@@ -26,7 +27,8 @@ export default class GuitarChord {
      * All config options are in the type GuitarChordOptions.
     */
     constructor(rootElementCtx: HTMLElement, options?: GuitarChordOptions);
-    private drawStringDots;
+    private getDotsToHide;
+    private drawFretDots;
     private drawStringLabels;
     private drawBarre;
     private renderChordDiagram;

package/dist/classes/SVGRenderer.d.ts

@@ -18,17 +18,20 @@ type DrawRectOptions = {
     y?: number;
     fill?: string;
     rx?: number;
+    classes?: string | string[];
 };
 type DrawCircleOptions = {
     filled?: boolean;
     fill?: string;
     strokeWidth?: number;
+    classes?: string | string[];
 };
 type DrawTextOptions = {
     fontSize?: number;
     anchor?: "start" | "middle" | "end";
     fill?: string;
     fontWeight?: string;
+    classes?: string | string[];
 };
 export default class SVGRenderer {
     private rootElementRef;
@@ -43,6 +46,7 @@ export default class SVGRenderer {
     private totalHeight;
     constructor(rootElementCtx: HTMLElement, options: SVGRendererOptions);
     private makeGlyphDefs;
+    private addNamespacedClassesToElement;
     createGroup(className?: string): SVGGElement;
     commitElementsToDOM(elements: SVGElement[] | SVGElement, parent?: HTMLElement | SVGElement): void;
     getLayerByName(name: LayerNames): SVGGElement;

package/dist/constants.d.ts

@@ -25,14 +25,14 @@ export declare const GUITAR_DOT_RADIUS = 10;
 export declare const GUITAR_MARKER_RADIUS = 6;
 export declare const GUITAR_STRING_LABEL_OFFSET = 4;
 export declare const GUITAR_STRING_LABEL_HEIGHT: number;
-export declare const GUITAR_DIAGRAM_H_SPACING = 40;
-export declare const GUITAR_DIAGRAM_V_SPACING = 16;
+export declare const GUITAR_DIAGRAM_H_SPACING = 51;
+export declare const GUITAR_DIAGRAM_V_SPACING = 12;
+export declare const GUITAR_DIAGRAM_TOP_PADDING = 4;
 export declare const GUITAR_DIAGRAM_BOTTOM_PADDING = 1;
 export declare const GUITAR_NUT_THICKNESS = 4;
 export declare const GUITAR_NUT_X_OFFSET = 1;
 export declare const GUITAR_NUT_SPACE_ABOVE: number;
-export declare const GUITAR_LABEL_FONT_SIZE = 16;
-export declare const GUITAR_FINGER_FONT_SIZE = 14;
-export declare const GUITAR_FRET_LABEL_FONT_SIZE = 14;
+export declare const GUITAR_FONT_BASE = 16;
+export declare const GUITAR_FONT_SMALL = 12;
 export declare const GUITAR_LABEL_HEIGHT = 16;
-export declare const GUITAR_FRET_LABEL_OFFSET_X: number;
+export declare const GUITAR_FRET_LABEL_OFFSET_X = 2;