@guitar-chords/svg - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/guitar-chords.es.js

 /*!
- * @guitar-chords/svg version 0.0.8
+ * @guitar-chords/svg version 0.0.9
  * Author: Capricorncd<[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords
- * Released on: 2024-11-09 10:58:05 (GMT+0900)
+ * Released on: 2024-11-10 23:37:43 (GMT+0900)
  */
-var E = (h) => {
-  throw TypeError(h);
+var E = (d) => {
+  throw TypeError(d);
 };
-var T = (h, t, e) => t.has(h) || E("Cannot " + e);
-var o = (h, t, e) => (T(h, t, "read from private field"), e ? e.call(h) : t.get(h)), k = (h, t, e) => t.has(h) ? E("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, e), N = (h, t, e, i) => (T(h, t, "write to private field"), i ? i.call(h, e) : t.set(h, e), e), S = (h, t, e) => (T(h, t, "access private method"), e);
+var A = (d, t, e) => t.has(d) || E("Cannot " + e);
+var p = (d, t, e) => (A(d, t, "read from private field"), e ? e.call(d) : t.get(d)), T = (d, t, e) => t.has(d) ? E("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(d) : t.set(d, e), z = (d, t, e, i) => (A(d, t, "write to private field"), i ? i.call(d, e) : t.set(d, e), e), L = (d, t, e) => (A(d, t, "access private method"), e);
 const q = {
@@ -42,4 +42,4 @@ autoRender: !0,
   showNotesOutsideOfChords: !1
-}, $ = (h, t = {}, e) => {
-  const i = document.createElementNS("http://www.w3.org/2000/svg", h);
+}, l = (d, t = {}, e) => {
+  const i = document.createElementNS("http://www.w3.org/2000/svg", d);
   for (const [n, r] of Object.entries(t))
@@ -49,15 +49,15 @@ !r && r !== 0 || i.setAttribute(n, String(r));
 };
-var L, p, z, a, A, I, P, v, j, B, G, D;
+var b, x, R, a, v, I, P, G, j, B, D, H;
 class K {
   constructor(t = {}) {
-    k(this, a);
-    k(this, L);
-    k(this, p);
-    k(this, z, "0.0.8");
-    N(this, L, {
+    T(this, a);
+    T(this, b);
+    T(this, x);
+    T(this, R, "0.0.9");
+    z(this, b, {
       ...q,
       ...t
     });
-    const { autoRender: e } = o(this, L);
-    N(this, p, $("svg")), e && S(this, a, A).call(this);
+    const { autoRender: e } = p(this, b);
+    z(this, x, l("svg")), e && L(this, a, v).call(this);
   }
@@ -70,3 +70,3 @@ /**
   get element() {
-    return o(this, p);
+    return p(this, x);
   }
@@ -111,11 +111,11 @@ /**
       spacing: s,
-      fretsSpacing: d,
-      fretsLineWidth: l,
-      nameFontSize: c
+      fretsSpacing: c,
+      fretsLineWidth: g,
+      nameFontSize: o
     } = this.data;
     return {
       width: e * (n - 1) + i * n,
-      height: t + (d + l) * r.length,
+      height: t + (c + g) * r.length,
       left: e,
-      top: c + s,
+      top: o + s,
       right: this.width - e,
@@ -131,3 +131,3 @@ bottom: this.height
   get version() {
-    return o(this, z);
+    return p(this, R);
   }
@@ -140,38 +140,38 @@ /**
   get data() {
-    const { defaultColor: t, defaultLineWidth: e, fingerRadius: i, matrix: n } = o(this, L), {
+    const { defaultColor: t, defaultLineWidth: e, fingerRadius: i, matrix: n } = p(this, b), {
       nameTextColor: r = t,
       nutLineWidth: s = e,
-      nutColor: d = t,
-      fretsColor: l = t,
-      fretsLineWidth: c = e,
-      stringColor: g = t,
-      stringLineWidth: m = e,
-      fingerCircleColor: u = t,
-      startFretsTextColor: w = t,
+      nutColor: c = t,
+      fretsColor: g = t,
+      fretsLineWidth: o = e,
+      stringColor: u = t,
+      stringLineWidth: f = e,
+      fingerCircleColor: $ = t,
+      startFretsTextColor: C = t,
       transposeTextColor: W = r,
-      notesOutsideOfChords: b = {},
-      showNotesOutsideOfChords: O,
-      crossLineWidth: f = Math.min(m, c),
-      crossLineColor: x = t,
-      crossRadius: C = i * 0.75,
-      nameLetterSpacing: y = 0
-    } = o(this, L);
+      notesOutsideOfChords: O = {},
+      showNotesOutsideOfChords: F,
+      crossLineWidth: k = Math.min(f, o),
+      crossLineColor: m = t,
+      crossRadius: S = i * 0.75,
+      nameLetterSpacing: h = 0
+    } = p(this, b);
     return {
-      ...o(this, L),
+      ...p(this, b),
       nameTextColor: r,
       nutLineWidth: s,
-      nutColor: d,
-      fretsColor: l,
-      fretsLineWidth: c,
-      stringColor: g,
-      stringLineWidth: m,
-      fingerCircleColor: u,
-      startFretsTextColor: w,
+      nutColor: c,
+      fretsColor: g,
+      fretsLineWidth: o,
+      stringColor: u,
+      stringLineWidth: f,
+      fingerCircleColor: $,
+      startFretsTextColor: C,
       transposeTextColor: W,
-      notesOutsideOfChords: b,
-      showNotesOutsideOfChords: O || Object.keys(b).length > 0,
-      crossLineWidth: f,
-      crossLineColor: x,
-      crossRadius: C,
-      nameLetterSpacing: y,
+      notesOutsideOfChords: O,
+      showNotesOutsideOfChords: F || Object.keys(O).length > 0,
+      crossLineWidth: k,
+      crossLineColor: m,
+      crossRadius: S,
+      nameLetterSpacing: h,
       stringCount: n[0].length ?? 6
@@ -187,11 +187,11 @@ };
   render(t) {
-    return t && N(this, L, {
-      ...o(this, L),
+    return t && z(this, b, {
+      ...p(this, b),
       ...t
-    }), o(this, p).innerHTML = "", S(this, a, A).call(this), this;
+    }), p(this, x).innerHTML = "", L(this, a, v).call(this), this;
   }
 }
-L = new WeakMap(), p = new WeakMap(), z = new WeakMap(), a = new WeakSet(), A = function() {
+b = new WeakMap(), x = new WeakMap(), R = new WeakMap(), a = new WeakSet(), v = function() {
   const t = this.data, { width: e, height: i } = this;
-  o(this, p).setAttribute("width", `${e}`), o(this, p).setAttribute("height", `${i}`), o(this, p).setAttribute("viewBox", `0 0 ${e} ${i}`), S(this, a, B).call(this, t), S(this, a, j).call(this, t), S(this, a, P).call(this, t), S(this, a, I).call(this, t), t.showNotesOutsideOfChords && S(this, a, G).call(this, t);
+  p(this, x).setAttribute("width", `${e}`), p(this, x).setAttribute("height", `${i}`), p(this, x).setAttribute("viewBox", `0 0 ${e} ${i}`), L(this, a, B).call(this, t), L(this, a, j).call(this, t), L(this, a, P).call(this, t), L(this, a, I).call(this, t), t.showNotesOutsideOfChords && L(this, a, D).call(this, t);
 }, I = function(t) {
@@ -204,8 +204,9 @@ const {
     transpose: s,
-    nameLetterSpacing: d
-  } = t, l = !!s, c = n / 2, g = $("text", {
+    nameLetterSpacing: c
+  } = t, g = !!s, o = n / 2, u = l("text", {
+    id: "gc-name",
     // 变调时，x向左偏移1/4文字大小(1/2变调符号字体大小)
-    x: this.width / 2 - (l ? c / 2 : 0),
+    x: this.width / 2 - (g ? o / 2 : 0),
     // y偏移字体大小的20%，使变调符号可以全部显示
-    y: n / 2 + c * 0.2,
+    y: n / 2 + o * 0.2,
     fill: i,
@@ -216,8 +217,8 @@ "font-size": n,
   });
-  o(this, p).appendChild(g), l && g.append(
-    $(
+  p(this, x).appendChild(u), g && u.append(
+    l(
       "tspan",
       {
         fill: r,
-        style: `font-size: ${c}px;`,
+        style: `font-size: ${o}px;`,
         "alignment-baseline": "middle",
@@ -229,6 +230,6 @@ "baseline-shift": "super"
   );
-  const m = $(
+  const f = l(
     "tspan",
     {
-      style: `letter-spacing:${d}px;`,
+      style: `letter-spacing:${c}px;`,
       "alignment-baseline": "middle"
@@ -238,5 +239,5 @@ },
   );
-  g.append(m), setTimeout(() => {
-    const u = this.gridRect.width, { width: w } = m.getBBox();
-    w > u && (m.setAttribute("textLength", String(u)), m.setAttribute("lengthAdjust", "spacingAndGlyphs"));
+  u.append(f), setTimeout(() => {
+    const $ = this.gridRect.width, { width: C } = f.getBBox();
+    C > $ && (f.setAttribute("textLength", String($)), f.setAttribute("lengthAdjust", "spacingAndGlyphs"));
   }, 0);
@@ -250,21 +251,23 @@ }, P = function(t) {
     spacing: s,
-    matrix: d,
-    fretsSpacing: l,
-    fretsLineWidth: c,
-    nameFontSize: g,
-    nutLineWidth: m,
-    fingerNumberTextColor: u,
-    showFingerNumber: w,
+    matrix: c,
+    fretsSpacing: g,
+    fretsLineWidth: o,
+    nameFontSize: u,
+    nutLineWidth: f,
+    fingerNumberTextColor: $,
+    showFingerNumber: C,
     mergeFingerCircle: W
-  } = t, b = r * 1.5, O = /* @__PURE__ */ new Map();
-  for (let f = 0; f < d.length; f++)
-    for (let x = 0; x < d[f].length; x++) {
-      const C = d[f][x];
-      if (C > 0) {
-        const y = x * (e + n) + n / 2 + e, F = (f + 0.5) * (l + c) + c / 2 + g + s + m - c;
+  } = t, O = r * 1.5, F = l("g", {
+    id: "gc-finger"
+  }), k = /* @__PURE__ */ new Map();
+  for (let m = 0; m < c.length; m++)
+    for (let S = 0; S < c[m].length; S++) {
+      const h = c[m][S];
+      if (h > 0) {
+        const w = S * (e + n) + n / 2 + e, y = (m + 0.5) * (g + o) + o / 2 + u + s + f - o;
         if (W) {
-          O.has(C) || O.set(C, []);
-          const R = O.get(C);
-          if (R.push({ x: y, y: F }), R.length > 1 && x === d[f].lastIndexOf(C)) {
-            const M = R[0], _ = { x: y, y: F }, V = $("line", {
+          k.has(h) || k.set(h, []);
+          const N = k.get(h);
+          if (N.push({ x: w, y }), N.length > 1 && S === c[m].lastIndexOf(h)) {
+            const M = N[0], _ = { x: w, y }, V = l("line", {
               x1: `${M.x}`,
@@ -278,18 +281,26 @@ y1: `${M.y}`,
             });
-            o(this, p).appendChild(V), w && S(this, a, v).call(this, y, F, C, u, b);
+            F.appendChild(V), C && F.appendChild(
+              L(this, a, G).call(this, w, y, h, $, O)
+            );
             continue;
           }
         }
-        const H = $("circle", {
-          cx: `${y}`,
-          cy: `${F}`,
-          r: `${r}`,
-          fill: i
-        });
-        o(this, p).appendChild(H), w && (!W || x === d[f].lastIndexOf(C)) && S(this, a, v).call(this, y, F, C, u, b);
+        if (!W || c[m].filter((N) => N === h).length === 1) {
+          const N = l("circle", {
+            cx: `${w}`,
+            cy: `${y}`,
+            r: `${r}`,
+            fill: i
+          });
+          F.appendChild(N);
+        }
+        C && (!W || S === c[m].lastIndexOf(h)) && F.appendChild(
+          L(this, a, G).call(this, w, y, h, $, O)
+        );
       }
     }
+  p(this, x).appendChild(F);
 }, // 新增一个辅助方法来绘制指法编号
-v = function(t, e, i, n, r) {
-  const s = $(
+G = function(t, e, i, n, r) {
+  return l(
     "text",
@@ -306,3 +317,2 @@ {
   );
-  o(this, p).appendChild(s);
 }, j = function(t) {
@@ -315,12 +325,13 @@ const {
     fretsLineWidth: s,
-    fretsSpacing: d
+    fretsSpacing: c
   } = t;
   if (i <= 1) return;
-  const l = n / 2, c = $(
+  const g = n / 2, o = l(
     "text",
     {
+      id: "gc-fret-number",
       x: "0",
-      y: `${this.gridRect.top + r + d / 2 + s * 2}`,
+      y: `${this.gridRect.top + r + c / 2 + s * 2}`,
       fill: e,
-      "font-size": `${l}`,
+      "font-size": `${g}`,
       "font-style": "italic"
@@ -330,3 +341,3 @@ },
   );
-  o(this, p).appendChild(c);
+  p(this, x).appendChild(o);
 }, B = function(t) {
@@ -339,32 +350,41 @@ const {
     stringCount: s,
-    fretsSpacing: d,
-    fretsLineWidth: l,
-    fretsColor: c,
-    nutLineWidth: g,
-    nutColor: m
-  } = t, u = e.length, { top: w, bottom: W, right: b, left: O } = this.gridRect;
-  for (let f = 0; f < s; f++) {
-    const x = f * (n + i) + i / 2 + n, C = $("line", {
-      x1: `${x}`,
+    fretsSpacing: c,
+    fretsLineWidth: g,
+    fretsColor: o,
+    nutLineWidth: u,
+    nutColor: f
+  } = t, $ = e.length, { top: C, bottom: W, right: O, left: F } = this.gridRect, k = l("g", { id: "gc-grid" }), m = l("g", {
+    id: "gc-grid-string",
+    stroke: r,
+    "stroke-width": i
+  });
+  for (let h = 0; h < s; h++) {
+    const w = h * (n + i) + i / 2 + n, y = l("line", {
+      x1: `${w}`,
       // 从琴枕横线下方 1/2 琴枕宽度开始
-      y1: `${w + g}`,
-      x2: `${x}`,
-      y2: `${W}`,
-      stroke: r,
-      "stroke-width": `${i}`
+      y1: `${C + u}`,
+      x2: `${w}`,
+      y2: `${W}`
     });
-    o(this, p).appendChild(C);
+    m.appendChild(y);
   }
-  for (let f = 0; f <= u; f++) {
-    const x = f === 0, C = x ? w + g / 2 : f * (d + l) + w + g - l / 2, y = $("line", {
-      x1: `${O}`,
-      y1: `${C}`,
-      x2: `${b}`,
-      y2: `${C}`,
-      stroke: x ? m : c,
-      "stroke-width": `${x ? g : l}`
+  const S = l("g", {
+    id: "gc-grid-fret",
+    stroke: o,
+    "stroke-width": g
+  });
+  for (let h = 0; h <= $; h++) {
+    const w = h === 0, y = w ? C + u / 2 : h * (c + g) + C + u - g / 2, N = l("line", {
+      x1: `${F}`,
+      y1: `${y}`,
+      x2: `${O}`,
+      y2: `${y}`,
+      stroke: w && f !== o ? f : null,
+      "stroke-width": w && u !== g ? u : null
     });
-    o(this, p).appendChild(y);
+    S.appendChild(N);
   }
-}, G = function(t) {
+  k.append(m, S), p(this, x).appendChild(k);
+}, /** 空弦时的音是否为和弦之外的音，`是`显示`x`，`否`显示`o` */
+D = function(t) {
   const {
@@ -376,12 +396,16 @@ stringLineWidth: e,
     crossRadius: s,
-    crossLineColor: d,
-    crossLineWidth: l
-  } = t, c = this.gridRect.top;
-  for (let g = 0; g < n; g++) {
-    if (!S(this, a, D).call(this, g, t)) continue;
-    const m = g * (i + e) + e / 2 + i;
-    if (r[n - g]) {
-      const u = $("g", {
-        transform: `translate(${m - s}, ${c - s * 2}) rotate(45 ${s} ${s})`
-      }), w = $("line", {
+    crossLineColor: c,
+    crossLineWidth: g
+  } = t, o = l("g", {
+    id: "gc-chord-tone",
+    stroke: c,
+    "stroke-width": g
+  }), u = this.gridRect.top;
+  for (let f = 0; f < n; f++) {
+    if (!L(this, a, H).call(this, f, t)) continue;
+    const $ = f * (i + e) + e / 2 + i;
+    if (r[n - f]) {
+      const C = l("g", {
+        transform: `translate(${$ - s}, ${u - s * 2}) rotate(45 ${s} ${s})`
+      }), W = l("line", {
         x1: 0,
@@ -391,8 +415,6 @@ y1: s,
         y2: s,
-        stroke: d,
-        "stroke-width": `${l}`,
         "stroke-linecap": "round"
       });
-      u.appendChild(w);
-      const W = $("line", {
+      C.appendChild(W);
+      const O = l("line", {
         x1: s,
@@ -402,21 +424,18 @@ y1: 0,
         y2: s * 2,
-        stroke: d,
-        "stroke-width": `${l}`,
         "stroke-linecap": "round"
       });
-      u.appendChild(W), o(this, p).appendChild(u);
+      C.appendChild(O), o.appendChild(C);
     } else {
-      const u = $("circle", {
-        cx: `${m}`,
-        cy: `${c - s - l / 2}`,
+      const C = l("circle", {
+        cx: `${$}`,
+        cy: `${u - s - g / 2}`,
         r: `${s}`,
-        fill: "transparent",
-        stroke: d,
-        "stroke-width": `${l}`
+        fill: "transparent"
       });
-      o(this, p).appendChild(u);
+      o.appendChild(C);
     }
   }
+  p(this, x).appendChild(o);
 }, /** 是否为空弦 */
-D = function(t, e) {
+H = function(t, e) {
   const { matrix: i } = e;
@@ -423,0 +442,0 @@ for (let n = 0; n < i.length; n++)

dist/guitar-chords.umd.js

 /*!
- * @guitar-chords/svg version 0.0.8
+ * @guitar-chords/svg version 0.0.9
  * Author: Capricorncd<[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords
- * Released on: 2024-11-09 10:58:05 (GMT+0900)
+ * Released on: 2024-11-10 23:37:43 (GMT+0900)
  */
-(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.GuitarChords={}))})(this,function(o){"use strict";var E=o=>{throw TypeError(o)};var A=(o,a,r)=>a.has(o)||E("Cannot "+r);var d=(o,a,r)=>(A(o,a,"read from private field"),r?r.call(o):a.get(o)),N=(o,a,r)=>a.has(o)?E("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(o):a.set(o,r),R=(o,a,r,T)=>(A(o,a,"write to private field"),T?T.call(o,r):a.set(o,r),r),y=(o,a,r)=>(A(o,a,"access private method"),r);var L,u,z,l,M,I,B,j,D,H,V,q;const a={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,name:"",nameFontSize:60,spacing:20,fretsSpacing:50,stringSpacing:30,fingerRadius:15,fingerNumberTextColor:"#fff",showFingerNumber:!0,startFrets:0,matrix:[[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]],mergeFingerCircle:!1,showNotesOutsideOfChords:!1},r=(G,t={},e)=>{const i=document.createElementNS("http://www.w3.org/2000/svg",G);for(const[n,h]of Object.entries(t))!h&&h!==0||i.setAttribute(n,String(h));return e&&(i.textContent=String(e)),i};class T{constructor(t={}){N(this,l);N(this,L);N(this,u);N(this,z,"0.0.8");R(this,L,{...a,...t});const{autoRender:e}=d(this,L);R(this,u,r("svg")),e&&y(this,l,M).call(this)}get element(){return d(this,u)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:i}=this.data;return e*(t+1)+i*t}get height(){const{nutLineWidth:t,fretsSpacing:e,fretsLineWidth:i,matrix:n,spacing:h,nameFontSize:s}=this.data;return t+(e+i)*n.length+s+h}get gridRect(){const{nutLineWidth:t,stringSpacing:e,stringLineWidth:i,stringCount:n,matrix:h,spacing:s,fretsSpacing:c,fretsLineWidth:g,nameFontSize:f}=this.data;return{width:e*(n-1)+i*n,height:t+(c+g)*h.length,left:e,top:f+s,right:this.width-e,bottom:this.height}}get version(){return d(this,z)}get data(){const{defaultColor:t,defaultLineWidth:e,fingerRadius:i,matrix:n}=d(this,L),{nameTextColor:h=t,nutLineWidth:s=e,nutColor:c=t,fretsColor:g=t,fretsLineWidth:f=e,stringColor:p=t,stringLineWidth:w=e,fingerCircleColor:x=t,startFretsTextColor:S=t,transposeTextColor:O=h,notesOutsideOfChords:W={},showNotesOutsideOfChords:F,crossLineWidth:C=Math.min(w,f),crossLineColor:m=t,crossRadius:$=i*.75,nameLetterSpacing:b=0}=d(this,L);return{...d(this,L),nameTextColor:h,nutLineWidth:s,nutColor:c,fretsColor:g,fretsLineWidth:f,stringColor:p,stringLineWidth:w,fingerCircleColor:x,startFretsTextColor:S,transposeTextColor:O,notesOutsideOfChords:W,showNotesOutsideOfChords:F||Object.keys(W).length>0,crossLineWidth:C,crossLineColor:m,crossRadius:$,nameLetterSpacing:b,stringCount:n[0].length??6}}render(t){return t&&R(this,L,{...d(this,L),...t}),d(this,u).innerHTML="",y(this,l,M).call(this),this}}L=new WeakMap,u=new WeakMap,z=new WeakMap,l=new WeakSet,M=function(){const t=this.data,{width:e,height:i}=this;d(this,u).setAttribute("width",`${e}`),d(this,u).setAttribute("height",`${i}`),d(this,u).setAttribute("viewBox",`0 0 ${e} ${i}`),y(this,l,H).call(this,t),y(this,l,D).call(this,t),y(this,l,B).call(this,t),y(this,l,I).call(this,t),t.showNotesOutsideOfChords&&y(this,l,V).call(this,t)},I=function(t){const{name:e,nameTextColor:i,nameFontSize:n,transposeTextColor:h,transpose:s,nameLetterSpacing:c}=t,g=!!s,f=n/2,p=r("text",{x:this.width/2-(g?f/2:0),y:n/2+f*.2,fill:i,"font-size":n,"text-anchor":"middle","dominant-baseline":"middle"});d(this,u).appendChild(p),g&&p.append(r("tspan",{fill:h,style:`font-size: ${f}px;`,"alignment-baseline":"middle","baseline-shift":"super"},s===1?"♯":"♭"));const w=r("tspan",{style:`letter-spacing:${c}px;`,"alignment-baseline":"middle"},e);p.append(w),setTimeout(()=>{const x=this.gridRect.width,{width:S}=w.getBBox();S>x&&(w.setAttribute("textLength",String(x)),w.setAttribute("lengthAdjust","spacingAndGlyphs"))},0)},B=function(t){const{stringSpacing:e,fingerCircleColor:i,stringLineWidth:n,fingerRadius:h,spacing:s,matrix:c,fretsSpacing:g,fretsLineWidth:f,nameFontSize:p,nutLineWidth:w,fingerNumberTextColor:x,showFingerNumber:S,mergeFingerCircle:O}=t,W=h*1.5,F=new Map;for(let C=0;C<c.length;C++)for(let m=0;m<c[C].length;m++){const $=c[C][m];if($>0){const b=m*(e+n)+n/2+e,k=(C+.5)*(g+f)+f/2+p+s+w-f;if(O){F.has($)||F.set($,[]);const v=F.get($);if(v.push({x:b,y:k}),v.length>1&&m===c[C].lastIndexOf($)){const P=v[0],_={x:b,y:k},K=r("line",{x1:`${P.x}`,y1:`${P.y}`,x2:`${_.x}`,y2:`${_.y}`,stroke:i,"stroke-width":`${h*2}`,"stroke-linecap":"round"});d(this,u).appendChild(K),S&&y(this,l,j).call(this,b,k,$,x,W);continue}}const J=r("circle",{cx:`${b}`,cy:`${k}`,r:`${h}`,fill:i});d(this,u).appendChild(J),S&&(!O||m===c[C].lastIndexOf($))&&y(this,l,j).call(this,b,k,$,x,W)}}},j=function(t,e,i,n,h){const s=r("text",{x:`${t}`,y:`${e}`,fill:n,"font-size":`${h}`,"text-anchor":"middle","dominant-baseline":"central"},i);d(this,u).appendChild(s)},D=function(t){const{startFretsTextColor:e,startFrets:i,nameFontSize:n,nutLineWidth:h,fretsLineWidth:s,fretsSpacing:c}=t;if(i<=1)return;const g=n/2,f=r("text",{x:"0",y:`${this.gridRect.top+h+c/2+s*2}`,fill:e,"font-size":`${g}`,"font-style":"italic"},i);d(this,u).appendChild(f)},H=function(t){const{matrix:e,stringLineWidth:i,stringSpacing:n,stringColor:h,stringCount:s,fretsSpacing:c,fretsLineWidth:g,fretsColor:f,nutLineWidth:p,nutColor:w}=t,x=e.length,{top:S,bottom:O,right:W,left:F}=this.gridRect;for(let C=0;C<s;C++){const m=C*(n+i)+i/2+n,$=r("line",{x1:`${m}`,y1:`${S+p}`,x2:`${m}`,y2:`${O}`,stroke:h,"stroke-width":`${i}`});d(this,u).appendChild($)}for(let C=0;C<=x;C++){const m=C===0,$=m?S+p/2:C*(c+g)+S+p-g/2,b=r("line",{x1:`${F}`,y1:`${$}`,x2:`${W}`,y2:`${$}`,stroke:m?w:f,"stroke-width":`${m?p:g}`});d(this,u).appendChild(b)}},V=function(t){const{stringLineWidth:e,stringSpacing:i,stringCount:n,notesOutsideOfChords:h,crossRadius:s,crossLineColor:c,crossLineWidth:g}=t,f=this.gridRect.top;for(let p=0;p<n;p++){if(!y(this,l,q).call(this,p,t))continue;const w=p*(i+e)+e/2+i;if(h[n-p]){const x=r("g",{transform:`translate(${w-s}, ${f-s*2}) rotate(45 ${s} ${s})`}),S=r("line",{x1:0,y1:s,x2:s*2,y2:s,stroke:c,"stroke-width":`${g}`,"stroke-linecap":"round"});x.appendChild(S);const O=r("line",{x1:s,y1:0,x2:s,y2:s*2,stroke:c,"stroke-width":`${g}`,"stroke-linecap":"round"});x.appendChild(O),d(this,u).appendChild(x)}else{const x=r("circle",{cx:`${w}`,cy:`${f-s-g/2}`,r:`${s}`,fill:"transparent",stroke:c,"stroke-width":`${g}`});d(this,u).appendChild(x)}}},q=function(t,e){const{matrix:i}=e;for(let n=0;n<i.length;n++)if(i[n][t]>0)return!1;return!0},o.GuitarChords=T,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.GuitarChords={}))})(this,function(o){"use strict";var I=o=>{throw TypeError(o)};var G=(o,a,n)=>a.has(o)||I("Cannot "+n);var u=(o,a,n)=>(G(o,a,"read from private field"),n?n.call(o):a.get(o)),z=(o,a,n)=>a.has(o)?I("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(o):a.set(o,n),A=(o,a,n,R)=>(G(o,a,"write to private field"),R?R.call(o,n):a.set(o,n),n),L=(o,a,n)=>(G(o,a,"access private method"),n);var b,x,v,l,M,B,D,j,H,V,q,J;const a={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,name:"",nameFontSize:60,spacing:20,fretsSpacing:50,stringSpacing:30,fingerRadius:15,fingerNumberTextColor:"#fff",showFingerNumber:!0,startFrets:0,matrix:[[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]],mergeFingerCircle:!1,showNotesOutsideOfChords:!1},n=(P,t={},e)=>{const i=document.createElementNS("http://www.w3.org/2000/svg",P);for(const[s,d]of Object.entries(t))!d&&d!==0||i.setAttribute(s,String(d));return e&&(i.textContent=String(e)),i};class R{constructor(t={}){z(this,l);z(this,b);z(this,x);z(this,v,"0.0.9");A(this,b,{...a,...t});const{autoRender:e}=u(this,b);A(this,x,n("svg")),e&&L(this,l,M).call(this)}get element(){return u(this,x)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:i}=this.data;return e*(t+1)+i*t}get height(){const{nutLineWidth:t,fretsSpacing:e,fretsLineWidth:i,matrix:s,spacing:d,nameFontSize:r}=this.data;return t+(e+i)*s.length+r+d}get gridRect(){const{nutLineWidth:t,stringSpacing:e,stringLineWidth:i,stringCount:s,matrix:d,spacing:r,fretsSpacing:g,fretsLineWidth:f,nameFontSize:h}=this.data;return{width:e*(s-1)+i*s,height:t+(g+f)*d.length,left:e,top:h+r,right:this.width-e,bottom:this.height}}get version(){return u(this,v)}get data(){const{defaultColor:t,defaultLineWidth:e,fingerRadius:i,matrix:s}=u(this,b),{nameTextColor:d=t,nutLineWidth:r=e,nutColor:g=t,fretsColor:f=t,fretsLineWidth:h=e,stringColor:C=t,stringLineWidth:p=e,fingerCircleColor:S=t,startFretsTextColor:m=t,transposeTextColor:W=d,notesOutsideOfChords:F={},showNotesOutsideOfChords:N,crossLineWidth:k=Math.min(p,h),crossLineColor:$=t,crossRadius:y=i*.75,nameLetterSpacing:c=0}=u(this,b);return{...u(this,b),nameTextColor:d,nutLineWidth:r,nutColor:g,fretsColor:f,fretsLineWidth:h,stringColor:C,stringLineWidth:p,fingerCircleColor:S,startFretsTextColor:m,transposeTextColor:W,notesOutsideOfChords:F,showNotesOutsideOfChords:N||Object.keys(F).length>0,crossLineWidth:k,crossLineColor:$,crossRadius:y,nameLetterSpacing:c,stringCount:s[0].length??6}}render(t){return t&&A(this,b,{...u(this,b),...t}),u(this,x).innerHTML="",L(this,l,M).call(this),this}}b=new WeakMap,x=new WeakMap,v=new WeakMap,l=new WeakSet,M=function(){const t=this.data,{width:e,height:i}=this;u(this,x).setAttribute("width",`${e}`),u(this,x).setAttribute("height",`${i}`),u(this,x).setAttribute("viewBox",`0 0 ${e} ${i}`),L(this,l,V).call(this,t),L(this,l,H).call(this,t),L(this,l,D).call(this,t),L(this,l,B).call(this,t),t.showNotesOutsideOfChords&&L(this,l,q).call(this,t)},B=function(t){const{name:e,nameTextColor:i,nameFontSize:s,transposeTextColor:d,transpose:r,nameLetterSpacing:g}=t,f=!!r,h=s/2,C=n("text",{id:"gc-name",x:this.width/2-(f?h/2:0),y:s/2+h*.2,fill:i,"font-size":s,"text-anchor":"middle","dominant-baseline":"middle"});u(this,x).appendChild(C),f&&C.append(n("tspan",{fill:d,style:`font-size: ${h}px;`,"alignment-baseline":"middle","baseline-shift":"super"},r===1?"♯":"♭"));const p=n("tspan",{style:`letter-spacing:${g}px;`,"alignment-baseline":"middle"},e);C.append(p),setTimeout(()=>{const S=this.gridRect.width,{width:m}=p.getBBox();m>S&&(p.setAttribute("textLength",String(S)),p.setAttribute("lengthAdjust","spacingAndGlyphs"))},0)},D=function(t){const{stringSpacing:e,fingerCircleColor:i,stringLineWidth:s,fingerRadius:d,spacing:r,matrix:g,fretsSpacing:f,fretsLineWidth:h,nameFontSize:C,nutLineWidth:p,fingerNumberTextColor:S,showFingerNumber:m,mergeFingerCircle:W}=t,F=d*1.5,N=n("g",{id:"gc-finger"}),k=new Map;for(let $=0;$<g.length;$++)for(let y=0;y<g[$].length;y++){const c=g[$][y];if(c>0){const w=y*(e+s)+s/2+e,O=($+.5)*(f+h)+h/2+C+r+p-h;if(W){k.has(c)||k.set(c,[]);const T=k.get(c);if(T.push({x:w,y:O}),T.length>1&&y===g[$].lastIndexOf(c)){const _=T[0],E={x:w,y:O},K=n("line",{x1:`${_.x}`,y1:`${_.y}`,x2:`${E.x}`,y2:`${E.y}`,stroke:i,"stroke-width":`${d*2}`,"stroke-linecap":"round"});N.appendChild(K),m&&N.appendChild(L(this,l,j).call(this,w,O,c,S,F));continue}}if(!W||g[$].filter(T=>T===c).length===1){const T=n("circle",{cx:`${w}`,cy:`${O}`,r:`${d}`,fill:i});N.appendChild(T)}m&&(!W||y===g[$].lastIndexOf(c))&&N.appendChild(L(this,l,j).call(this,w,O,c,S,F))}}u(this,x).appendChild(N)},j=function(t,e,i,s,d){return n("text",{x:`${t}`,y:`${e}`,fill:s,"font-size":`${d}`,"text-anchor":"middle","dominant-baseline":"central"},i)},H=function(t){const{startFretsTextColor:e,startFrets:i,nameFontSize:s,nutLineWidth:d,fretsLineWidth:r,fretsSpacing:g}=t;if(i<=1)return;const f=s/2,h=n("text",{id:"gc-fret-number",x:"0",y:`${this.gridRect.top+d+g/2+r*2}`,fill:e,"font-size":`${f}`,"font-style":"italic"},i);u(this,x).appendChild(h)},V=function(t){const{matrix:e,stringLineWidth:i,stringSpacing:s,stringColor:d,stringCount:r,fretsSpacing:g,fretsLineWidth:f,fretsColor:h,nutLineWidth:C,nutColor:p}=t,S=e.length,{top:m,bottom:W,right:F,left:N}=this.gridRect,k=n("g",{id:"gc-grid"}),$=n("g",{id:"gc-grid-string",stroke:d,"stroke-width":i});for(let c=0;c<r;c++){const w=c*(s+i)+i/2+s,O=n("line",{x1:`${w}`,y1:`${m+C}`,x2:`${w}`,y2:`${W}`});$.appendChild(O)}const y=n("g",{id:"gc-grid-fret",stroke:h,"stroke-width":f});for(let c=0;c<=S;c++){const w=c===0,O=w?m+C/2:c*(g+f)+m+C-f/2,T=n("line",{x1:`${N}`,y1:`${O}`,x2:`${F}`,y2:`${O}`,stroke:w&&p!==h?p:null,"stroke-width":w&&C!==f?C:null});y.appendChild(T)}k.append($,y),u(this,x).appendChild(k)},q=function(t){const{stringLineWidth:e,stringSpacing:i,stringCount:s,notesOutsideOfChords:d,crossRadius:r,crossLineColor:g,crossLineWidth:f}=t,h=n("g",{id:"gc-chord-tone",stroke:g,"stroke-width":f}),C=this.gridRect.top;for(let p=0;p<s;p++){if(!L(this,l,J).call(this,p,t))continue;const S=p*(i+e)+e/2+i;if(d[s-p]){const m=n("g",{transform:`translate(${S-r}, ${C-r*2}) rotate(45 ${r} ${r})`}),W=n("line",{x1:0,y1:r,x2:r*2,y2:r,"stroke-linecap":"round"});m.appendChild(W);const F=n("line",{x1:r,y1:0,x2:r,y2:r*2,"stroke-linecap":"round"});m.appendChild(F),h.appendChild(m)}else{const m=n("circle",{cx:`${S}`,cy:`${C-r-f/2}`,r:`${r}`,fill:"transparent"});h.appendChild(m)}}u(this,x).appendChild(h)},J=function(t,e){const{matrix:i}=e;for(let s=0;s<i.length;s++)if(i[s][t]>0)return!1;return!0},o.GuitarChords=R,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package.json

@@ -5,3 +5,3 @@ {
   "authors": "Capricorncd",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
@@ -8,0 +8,0 @@ "main": "./dist/guitar-chords.umd.js",

src/GuitarChords.ts

@@ -233,2 +233,3 @@ /**
     const text = createSvgElement('text', {
+      id: 'gc-name',
       // 变调时，x向左偏移1/4文字大小(1/2变调符号字体大小)
@@ -302,2 +303,6 @@ x: this.width / 2 - (hasTranspose ? transposeFontSize / 2 : 0),
 
+    const group = createSvgElement('g', {
+      id: 'gc-finger',
+    })
+
     const fingerCircleMap = new Map<number, { x: number; y: number }[]>()
@@ -345,12 +350,14 @@
               })
-              this.#element.appendChild(line)
+              group.appendChild(line)
 
               // 在横按的最后一个位置绘制指法编号
               if (showFingerNumber) {
-                this.#drawFingerNumber(
-                  x,
-                  y,
-                  fingerNumber,
-                  fingerNumberTextColor,
-                  fontSize
+                group.appendChild(
+                  this.#drawFingerNumber(
+                    x,
+                    y,
+                    fingerNumber,
+                    fingerNumberTextColor,
+                    fontSize
+                  )
                 )
@@ -362,9 +369,15 @@ }
 
-          const circle = createSvgElement('circle', {
-            cx: `${x}`,
-            cy: `${y}`,
-            r: `${fingerRadius}`,
-            fill: fingerCircleColor,
-          })
-          this.#element.appendChild(circle)
+          // 非大横按或小横按，或者同一行中相同的手指编号的圆点只有1个
+          if (
+            !mergeFingerCircle ||
+            matrix[fret].filter((v) => v === fingerNumber).length === 1
+          ) {
+            const circle = createSvgElement('circle', {
+              cx: `${x}`,
+              cy: `${y}`,
+              r: `${fingerRadius}`,
+              fill: fingerCircleColor,
+            })
+            group.appendChild(circle)
+          }
 
@@ -376,8 +389,10 @@ if (
           ) {
-            this.#drawFingerNumber(
-              x,
-              y,
-              fingerNumber,
-              fingerNumberTextColor,
-              fontSize
+            group.appendChild(
+              this.#drawFingerNumber(
+                x,
+                y,
+                fingerNumber,
+                fingerNumberTextColor,
+                fontSize
+              )
             )
@@ -388,2 +403,3 @@ }
     }
+    this.#element.appendChild(group)
   }
@@ -411,3 +427,3 @@
     )
-    this.#element.appendChild(text)
+    return text
   }
@@ -430,2 +446,3 @@
       {
+        id: 'gc-fret-number',
         x: '0',
@@ -459,2 +476,9 @@ y: `${this.gridRect.top + nutLineWidth + fretsSpacing / 2 + fretsLineWidth * 2}`,
 
+    const group = createSvgElement('g', { id: 'gc-grid' })
+
+    const stringGroup = createSvgElement('g', {
+      id: 'gc-grid-string',
+      stroke: stringColor,
+      'stroke-width': stringLineWidth,
+    })
     // 绘制竖线（代表琴弦）
@@ -472,8 +496,11 @@ for (let i = 0; i < stringCount; i++) {
         y2: `${bottom}`,
-        stroke: stringColor,
-        'stroke-width': `${stringLineWidth}`,
       })
-      this.#element.appendChild(line)
+      stringGroup.appendChild(line)
     }
 
+    const fretGroup = createSvgElement('g', {
+      id: 'gc-grid-fret',
+      stroke: fretsColor,
+      'stroke-width': fretsLineWidth,
+    })
     // 绘制横线（代表品位）
@@ -493,9 +520,13 @@ for (let i = 0; i <= fretCount; i++) {
         y2: `${y}`,
-        stroke: isNut ? nutColor : fretsColor,
-        'stroke-width': `${isNut ? nutLineWidth : fretsLineWidth}`,
+        stroke: isNut && nutColor !== fretsColor ? nutColor : null,
+        'stroke-width':
+          isNut && nutLineWidth !== fretsLineWidth ? nutLineWidth : null,
       })
-      this.#element.appendChild(line)
+      fretGroup.appendChild(line)
     }
+    group.append(stringGroup, fretGroup)
+    this.#element.appendChild(group)
   }
 
+  /** 空弦时的音是否为和弦之外的音，`是`显示`x`，`否`显示`o` */
   #drawNotesOutsideOfChords(data: GuitarChordsData) {
@@ -512,2 +543,8 @@ const {
 
+    const chordToneGroup = createSvgElement('g', {
+      id: 'gc-chord-tone',
+      stroke: crossLineColor,
+      'stroke-width': crossLineWidth,
+    })
+
     // 绘制垂直交叉线段，长度为指法圆点直径
@@ -532,4 +569,2 @@ const y = this.gridRect.top
           y2: crossRadius,
-          stroke: crossLineColor,
-          'stroke-width': `${crossLineWidth}`,
           'stroke-linecap': 'round',
@@ -544,4 +579,2 @@ })
           y2: crossRadius * 2,
-          stroke: crossLineColor,
-          'stroke-width': `${crossLineWidth}`,
           'stroke-linecap': 'round',
@@ -551,3 +584,3 @@ })
 
-        this.#element.appendChild(group)
+        chordToneGroup.appendChild(group)
       } else {
@@ -559,8 +592,8 @@ const circle = createSvgElement('circle', {
           fill: 'transparent',
-          stroke: crossLineColor,
-          'stroke-width': `${crossLineWidth}`,
         })
-        this.#element.appendChild(circle)
+        chordToneGroup.appendChild(circle)
       }
     }
+
+    this.#element.appendChild(chordToneGroup)
   }
@@ -567,0 +600,0 @@

src/helpers.ts

@@ -1,2 +0,2 @@
-export type SvgElementAttrs = Record<string, string | number>
+export type SvgElementAttrs = Record<string, string | number | null>
 
@@ -3,0 +3,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46729

increased by3.67%

Lines of code

1212

increased by4.21%

No dependency changes