text-guitar-chart 0.1.2 → 0.2.0

package/test/fingeringToString.test.js

@@ -958,6 +958,227 @@ describe("fingeringToString", () => {
       assert.equal(result, expected);
     });
 
+    test("grey color outputs O marker (ASCII)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [3, 2, { text: "", color: "#9B9B9B" }],
+          [4, 2, { text: "", color: "#000000" }],
+        ],
+        barres: [],
+        title: "Test",
+      };
+
+      const result = fingeringToString(chord);
+
+      const expected = `  Test
+  ######
+  ------
+  ||||||
+  ||oO||
+  ||||||`;
+
+      assert.equal(result, expected);
+    });
+
+    test("blue color outputs + marker (ASCII)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [3, 2, { text: "", color: "#4A90E2" }],
+          [4, 2, { text: "", color: "#000000" }],
+        ],
+        barres: [],
+        title: "Test",
+      };
+
+      const result = fingeringToString(chord);
+
+      const expected = `  Test
+  ######
+  ------
+  ||||||
+  ||o+||
+  ||||||`;
+
+      assert.equal(result, expected);
+    });
+
+    test("grey color outputs □ marker (Unicode)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [3, 2, { text: "", color: "#9B9B9B" }],
+          [4, 2, { text: "", color: "#000000" }],
+        ],
+        barres: [],
+        title: "Test",
+      };
+
+      const result = fingeringToString(chord, { useUnicode: true });
+
+      const expected = `  Test
+  ‾‾‾‾‾‾‾‾‾‾‾
+  ┌─┬─┬─┬─┬─┐
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ ○ □ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      assert.equal(result, expected);
+    });
+
+    test("blue color outputs ■ marker (Unicode)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [3, 2, { text: "", color: "#4A90E2" }],
+          [4, 2, { text: "", color: "#000000" }],
+        ],
+        barres: [],
+        title: "Test",
+      };
+
+      const result = fingeringToString(chord, { useUnicode: true });
+
+      const expected = `  Test
+  ‾‾‾‾‾‾‾‾‾‾‾
+  ┌─┬─┬─┬─┬─┐
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ ○ ■ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      assert.equal(result, expected);
+    });
+
+    test("grey/blue color ignores text like red does (ASCII)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [3, 2, { text: "R", color: "#9B9B9B" }],
+          [4, 2, { text: "B", color: "#4A90E2" }],
+        ],
+        barres: [],
+        title: "Test",
+      };
+
+      const result = fingeringToString(chord);
+
+      const expected = `  Test
+  ######
+  ------
+  ||||||
+  ||+O||
+  ||||||`;
+
+      assert.equal(result, expected);
+    });
+
+    test("mixed colors chord with all four colors (ASCII)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [6, 1, { text: "", color: "#000000" }],
+          [5, 1, { text: "", color: "#e74c3c" }],
+          [4, 1, { text: "", color: "#9B9B9B" }],
+          [3, 1, { text: "", color: "#4A90E2" }],
+        ],
+        barres: [],
+        title: "Mix",
+      };
+
+      const result = fingeringToString(chord);
+
+      const expected = `  Mix
+  ######
+  ------
+  o*O+||
+  ||||||
+  ||||||`;
+
+      assert.equal(result, expected);
+    });
+
+    test("mixed colors chord with all four colors (Unicode)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [6, 1, { text: "", color: "#000000" }],
+          [5, 1, { text: "", color: "#e74c3c" }],
+          [4, 1, { text: "", color: "#9B9B9B" }],
+          [3, 1, { text: "", color: "#4A90E2" }],
+        ],
+        barres: [],
+        title: "Mix",
+      };
+
+      const result = fingeringToString(chord, { useUnicode: true });
+
+      const expected = `  Mix
+  ‾‾‾‾‾‾‾‾‾‾‾
+  ┌─┬─┬─┬─┬─┐
+  ○ ● □ ■ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      assert.equal(result, expected);
+    });
+
+    test("grey/blue colors ignored for open strings (ASCII)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [6, 0, { text: "", color: "#9B9B9B" }],
+          [5, 0, { text: "", color: "#4A90E2" }],
+          [4, 0, { text: "R", color: "#9B9B9B" }],
+        ],
+        barres: [],
+      };
+
+      const result = fingeringToString(chord);
+
+      const expected = `  ooR
+  ------
+  ||||||
+  ||||||
+  ||||||`;
+
+      assert.equal(result, expected);
+    });
+
+    test("grey/blue colors ignored for open strings (Unicode)", () => {
+      /** @type {import("svguitar").Chord} */
+      const chord = {
+        fingers: [
+          [6, 0, { text: "", color: "#9B9B9B" }],
+          [5, 0, { text: "", color: "#4A90E2" }],
+          [4, 0, { text: "R", color: "#9B9B9B" }],
+        ],
+        barres: [],
+      };
+
+      const result = fingeringToString(chord, { useUnicode: true });
+
+      const expected = `  ○ ○ R
+  ┌─┬─┬─┬─┬─┐
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      assert.equal(result, expected);
+    });
+
     test("empty options object in finger array treated as default", () => {
       /** @type {import("svguitar").Chord} */
       const chord = {

package/test/stringToFingering.test.js

@@ -1494,4 +1494,180 @@ describe("stringToFingering", () => {
       assert.deepEqual(result?.barres, []);
     });
   });
+
+  describe("Grey and blue color markers", () => {
+    test("parses grey marker (O) in ASCII format", () => {
+      const fingeringStr = `  Test
+  ######
+  x
+  ------
+  |||||O
+  ||||||
+  ||||||`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, "x", { text: "", color: "#000000" }],
+          [1, 1, { text: "", color: "#9B9B9B" }],
+        ]),
+        true,
+        "Fingering does not match expected grey marker"
+      );
+    });
+
+    test("parses blue marker (+) in ASCII format", () => {
+      const fingeringStr = `  Test
+  ######
+  x
+  ------
+  |||||+
+  ||||||
+  ||||||`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, "x", { text: "", color: "#000000" }],
+          [1, 1, { text: "", color: "#4A90E2" }],
+        ]),
+        true,
+        "Fingering does not match expected blue marker"
+      );
+    });
+
+    test("parses grey marker (□) in Unicode format", () => {
+      const fingeringStr = `  Test
+  ‾‾‾‾‾‾‾‾‾‾‾
+  ×
+  ┌─┬─┬─┬─┬─┐
+  │ │ │ │ │ □
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, "x", { text: "", color: "#000000" }],
+          [1, 1, { text: "", color: "#9B9B9B" }],
+        ]),
+        true,
+        "Fingering does not match expected grey Unicode marker"
+      );
+    });
+
+    test("parses blue marker (■) in Unicode format", () => {
+      const fingeringStr = `  Test
+  ‾‾‾‾‾‾‾‾‾‾‾
+  ×
+  ┌─┬─┬─┬─┬─┐
+  │ │ │ │ │ ■
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, "x", { text: "", color: "#000000" }],
+          [1, 1, { text: "", color: "#4A90E2" }],
+        ]),
+        true,
+        "Fingering does not match expected blue Unicode marker"
+      );
+    });
+
+    test("parses mixed 4-color chord in ASCII format", () => {
+      const fingeringStr = `  Mixed
+  ######
+  
+  ------
+  o*O+||
+  ||||||
+  ||||||`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, 1, { text: "", color: "#000000" }],
+          [5, 1, { text: "", color: "#e74c3c" }],
+          [4, 1, { text: "", color: "#9B9B9B" }],
+          [3, 1, { text: "", color: "#4A90E2" }],
+        ]),
+        true,
+        "Fingering does not match expected mixed 4-color chord"
+      );
+    });
+
+    test("parses mixed 4-color chord in Unicode format", () => {
+      const fingeringStr = `  Mixed
+  ‾‾‾‾‾‾‾‾‾‾‾
+  
+  ┌─┬─┬─┬─┬─┐
+  ○ ● □ ■ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  ├─┼─┼─┼─┼─┤
+  │ │ │ │ │ │
+  └─┴─┴─┴─┴─┘`;
+
+      const result = stringToFingering(fingeringStr);
+      assert.equal(
+        fingersContains(result, [
+          [6, 1, { text: "", color: "#000000" }],
+          [5, 1, { text: "", color: "#e74c3c" }],
+          [4, 1, { text: "", color: "#9B9B9B" }],
+          [3, 1, { text: "", color: "#4A90E2" }],
+        ]),
+        true,
+        "Fingering does not match expected mixed 4-color Unicode chord"
+      );
+    });
+
+    test("parses custom grey color option", () => {
+      const fingeringStr = `  ------
+  |||||O
+  ||||||
+  ||||||`;
+
+      const result = stringToFingering(fingeringStr, { greyColor: "#AAAAAA" });
+      assert.equal(
+        fingersContains(result, [
+          [1, 1, { text: "", color: "#AAAAAA" }],
+        ]),
+        true,
+        "Should use custom grey color"
+      );
+    });
+
+    test("parses custom blue color option", () => {
+      const fingeringStr = `  ------
+  |||||+
+  ||||||
+  ||||||`;
+
+      const result = stringToFingering(fingeringStr, { blueColor: "#0000FF" });
+      assert.equal(
+        fingersContains(result, [
+          [1, 1, { text: "", color: "#0000FF" }],
+        ]),
+        true,
+        "Should use custom blue color"
+      );
+    });
+
+    test("grey/blue markers detected as Unicode format", () => {
+      // □ alone should trigger Unicode detection
+      const greyStr = "  □";
+      const blueStr = "  ■";
+      // Use a helper to check - these strings contain Unicode markers
+      assert.ok(greyStr.includes("□"), "Should contain grey Unicode marker");
+      assert.ok(blueStr.includes("■"), "Should contain blue Unicode marker");
+    });
+  });
 });

package/types/editableSVGuitar.d.ts

@@ -1,6 +1,8 @@
 export namespace DOT_COLORS {
     let RED: string;
     let BLACK: string;
+    let GREY: string;
+    let BLUE: string;
 }
 /**
  * EditableSVGuitarChord - Wrapper around SVGuitarChord that adds interactive editing capabilities
@@ -51,8 +53,9 @@ export class EditableSVGuitarChord {
     createDialog(): void;
     dialog: HTMLDivElement;
     redRadio: HTMLInputElement;
+    greyRadio: HTMLInputElement;
+    blueRadio: HTMLInputElement;
     blackRadio: HTMLInputElement;
-    textSection: HTMLDivElement;
     textInput: HTMLInputElement;
     backdrop: HTMLDivElement;
     /**
@@ -142,6 +145,24 @@ export class EditableSVGuitarChord {
      * Open the open string edit dialog
      */
     openOpenStringDialog(): void;
+    /**
+     * Calculate absolute position for a dialog relative to a reference element
+     * @param {HTMLElement} dialog - The dialog element to position
+     * @param {Element} referenceElement - The element to position relative to
+     * @param {object} options - Positioning options
+     * @param {'beside'|'below'} [options.placement] - Whether to place beside or below the reference
+     * @param {number} [options.offset] - Distance from reference element
+     * @returns {{x: number, y: number, arrowSide: string, elementCenterY: number}}
+     */
+    calculateDialogPosition(dialog: HTMLElement, referenceElement: Element, options?: {
+        placement?: "beside" | "below";
+        offset?: number;
+    }): {
+        x: number;
+        y: number;
+        arrowSide: string;
+        elementCenterY: number;
+    };
     /**
      * Position dialog relative to the clicked element
      */

package/types/stringToFingering.d.ts

@@ -1,10 +1,12 @@
 /**
  * Parse a string representation of a guitar fingering into internal format
  * @param {string} fingeringStr - The string representation of the fingering
- * @param {{ redColor?: string, blackColor?: string }} [options]
+ * @param {{ redColor?: string, blackColor?: string, greyColor?: string, blueColor?: string }} [options]
  * @returns {import("svguitar").Chord | null} The parsed fingering object
  */
 export default function stringToFingering(fingeringStr: string, options?: {
     redColor?: string;
     blackColor?: string;
+    greyColor?: string;
+    blueColor?: string;
 }): import("svguitar").Chord | null;