@guitar-chords/svg - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/guitar-chords.es.js

 /*!
- * @guitar-chords/svg version 0.0.2
+ * @guitar-chords/svg version 0.0.3
  * Author: Capricorncd<[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords
- * Released on: 2024-10-26 13:00:45 (GMT+0900)
+ * Released on: 2024-10-27 00:24:44 (GMT+0900)
  */
-var v = (h) => {
-  throw TypeError(h);
+var I = (c) => {
+  throw TypeError(c);
 };
-var z = (h, t, e) => t.has(h) || v("Cannot " + e);
-var a = (h, t, e) => (z(h, t, "read from private field"), e ? e.call(h) : t.get(h)), N = (h, t, e) => t.has(h) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, e), F = (h, t, e, i) => (z(h, t, "write to private field"), i ? i.call(h, e) : t.set(h, e), e), C = (h, t, e) => (z(h, t, "access private method"), e);
-const P = {
+var E = (c, t, e) => t.has(c) || I("Cannot " + e);
+var a = (c, t, e) => (E(c, t, "read from private field"), e ? e.call(c) : t.get(c)), k = (c, t, e) => t.has(c) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, e), v = (c, t, e, i) => (E(c, t, "write to private field"), i ? i.call(c, e) : t.set(c, e), e), x = (c, t, e) => (E(c, t, "access private method"), e);
+const _ = {
   autoRender: !0,
@@ -33,2 +33,3 @@ defaultColor: "#000",
   fingerNumberTextColor: "#fff",
+  showFingerNumber: !0,
   startFrets: 0,
@@ -40,19 +41,20 @@ // startFretsTextColor: '',
     [0, 0, 0, 0, 0, 0]
-  ]
+  ],
+  mergeFingerCircle: !1
 };
-var w, c, f, y, E, T, R, k;
-class O {
+var $, b, l, O, G, M, R, j, B, D;
+class H {
   constructor(t = {}) {
-    N(this, f);
-    N(this, w);
-    N(this, c);
-    F(this, w, {
-      ...P,
+    k(this, l);
+    k(this, $);
+    k(this, b);
+    v(this, $, {
+      ..._,
       ...t
     });
-    const { autoRender: e } = a(this, w);
-    F(this, c, document.createElementNS("http://www.w3.org/2000/svg", "svg")), e && C(this, f, y).call(this);
+    const { autoRender: e } = a(this, $);
+    v(this, b, document.createElementNS("http://www.w3.org/2000/svg", "svg")), e && x(this, l, O).call(this);
   }
   get element() {
-    return a(this, c);
+    return a(this, b);
   }
@@ -64,4 +66,4 @@ get width() {
   get height() {
-    const { nutLineWidth: t, fretsSpacing: e, fretsLineWidth: i, matrix: o, spacing: g, nameFontSize: l } = this.data;
-    return t + (e + i) * o.length + l + g;
+    const { nutLineWidth: t, fretsSpacing: e, fretsLineWidth: i, matrix: n, spacing: u, nameFontSize: s } = this.data;
+    return t + (e + i) * n.length + s + u;
   }
@@ -72,8 +74,8 @@ /**
   get gridRect() {
-    const { nutLineWidth: t, stringSpacing: e, stringLineWidth: i, stringCount: o, matrix: g, spacing: l, fretsSpacing: s, fretsLineWidth: r, nameFontSize: n } = this.data;
+    const { nutLineWidth: t, stringSpacing: e, stringLineWidth: i, stringCount: n, matrix: u, spacing: s, fretsSpacing: r, fretsLineWidth: o, nameFontSize: h } = this.data;
     return {
-      width: e * (o - 1) + i * o,
-      height: t + (s + r) * g.length,
+      width: e * (n - 1) + i * n,
+      height: t + (r + o) * u.length,
       left: e,
-      top: n + l,
+      top: h + s,
       right: this.width - e,
@@ -84,26 +86,32 @@ bottom: this.height
   get data() {
-    const { defaultColor: t, defaultLineWidth: e } = a(this, w), {
+    const { defaultColor: t, defaultLineWidth: e } = a(this, $), {
       nameTextColor: i = t,
-      nutLineWidth: o = e,
-      nutColor: g = t,
-      fretsColor: l = t,
-      fretsLineWidth: s = e,
-      stringColor: r = t,
-      stringLineWidth: n = e,
-      fingerCircleColor: b = t,
-      startFretsTextColor: A = t,
-      transposeTextColor: $ = i
-    } = a(this, w);
+      nutLineWidth: n = e,
+      nutColor: u = t,
+      fretsColor: s = t,
+      fretsLineWidth: r = e,
+      stringColor: o = t,
+      stringLineWidth: h = e,
+      fingerCircleColor: f = t,
+      startFretsTextColor: L = t,
+      transposeTextColor: C = i,
+      notesOutsideOfChords: g = {},
+      crossLineWidth: p = h,
+      crossLineColor: N = t
+    } = a(this, $);
     return {
-      ...a(this, w),
+      ...a(this, $),
       nameTextColor: i,
-      nutLineWidth: o,
-      nutColor: g,
-      fretsColor: l,
-      fretsLineWidth: s,
-      stringColor: r,
-      stringLineWidth: n,
-      fingerCircleColor: b,
-      startFretsTextColor: A,
-      transposeTextColor: $
+      nutLineWidth: n,
+      nutColor: u,
+      fretsColor: s,
+      fretsLineWidth: r,
+      stringColor: o,
+      stringLineWidth: h,
+      fingerCircleColor: f,
+      startFretsTextColor: L,
+      transposeTextColor: C,
+      notesOutsideOfChords: g,
+      crossLineWidth: p,
+      crossLineColor: N
     };
@@ -117,47 +125,70 @@ }
   render(t) {
-    return t && F(this, w, {
-      ...a(this, w),
+    return t && v(this, $, {
+      ...a(this, $),
       ...t
-    }), C(this, f, y).call(this), this;
+    }), x(this, l, O).call(this), this;
   }
 }
-w = new WeakMap(), c = new WeakMap(), f = new WeakSet(), y = function() {
+$ = new WeakMap(), b = new WeakMap(), l = new WeakSet(), O = function() {
   const t = this.data, { width: e, height: i } = this;
-  a(this, c).setAttribute("width", `${e}`), a(this, c).setAttribute("height", `${i}`), a(this, c).setAttribute("viewBox", `0 0 ${e} ${i}`), C(this, f, k).call(this, t), C(this, f, R).call(this, t), C(this, f, T).call(this, t), C(this, f, E).call(this, t);
-}, E = function(t) {
-  const { name: e, nameTextColor: i, nameFontSize: o, transposeTextColor: g, transpose: l } = t, s = document.createElementNS("http://www.w3.org/2000/svg", "text");
-  if (s.setAttribute("x", `${this.width / 2}`), s.setAttribute("y", `${o / 2}`), s.setAttribute("fill", i), s.setAttribute("font-size", `${o}`), s.setAttribute("text-anchor", "middle"), s.setAttribute("dominant-baseline", "middle"), s.textContent = e, a(this, c).appendChild(s), l) {
-    const r = document.createElementNS("http://www.w3.org/2000/svg", "text"), n = o / 2, b = l === 1;
-    r.setAttribute("x", `${this.width / 2 - o * e.length / 2}`), r.setAttribute("y", `${n * 0.5}`), r.setAttribute("fill", g), r.setAttribute("font-size", `${n}`), r.setAttribute("text-anchor", b ? "middle" : "start"), r.setAttribute("dominant-baseline", "middle"), r.textContent = b ? "♯" : "♭", a(this, c).appendChild(r);
+  a(this, b).setAttribute("width", `${e}`), a(this, b).setAttribute("height", `${i}`), a(this, b).setAttribute("viewBox", `0 0 ${e} ${i}`), x(this, l, B).call(this, t), x(this, l, j).call(this, t), x(this, l, M).call(this, t), x(this, l, G).call(this, t), Object.keys(t.notesOutsideOfChords).length > 0 && x(this, l, D).call(this, t);
+}, G = function(t) {
+  const { name: e, nameTextColor: i, nameFontSize: n, transposeTextColor: u, transpose: s } = t, r = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  if (r.setAttribute("x", `${this.width / 2}`), r.setAttribute("y", `${n / 2}`), r.setAttribute("fill", i), r.setAttribute("font-size", `${n}`), r.setAttribute("text-anchor", "middle"), r.setAttribute("dominant-baseline", "middle"), r.textContent = e, a(this, b).appendChild(r), s) {
+    const o = document.createElementNS("http://www.w3.org/2000/svg", "text"), h = n / 2, f = s === 1;
+    o.setAttribute("x", `${this.width / 2 - n * e.length / 2}`), o.setAttribute("y", `${h * 0.5}`), o.setAttribute("fill", u), o.setAttribute("font-size", `${h}`), o.setAttribute("text-anchor", f ? "middle" : "start"), o.setAttribute("dominant-baseline", "middle"), o.textContent = f ? "♯" : "♭", a(this, b).appendChild(o);
   }
-}, T = function(t) {
-  const { stringSpacing: e, fingerCircleColor: i, stringLineWidth: o, fingerRadius: g, spacing: l, matrix: s, fretsSpacing: r, fretsLineWidth: n, nameFontSize: b, nutLineWidth: A, fingerNumberTextColor: $ } = t, L = g * 1.5;
-  for (let x = 0; x < s.length; x++)
-    for (let S = 0; S < s[x].length; S++) {
-      const W = s[x][S];
-      if (W > 0) {
-        const m = S * (e + o) + o / 2 + e, p = (x + 0.5) * (r + n) + n / 2 + b + l + A - n, d = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-        d.setAttribute("cx", `${m}`), d.setAttribute("cy", `${p}`), d.setAttribute("r", `${g}`), d.setAttribute("fill", i), a(this, c).appendChild(d);
-        const u = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        u.setAttribute("x", `${m}`), u.setAttribute("y", `${p + (A > n ? n : A) / 2}`), u.setAttribute("fill", $), u.setAttribute("font-size", `${L}`), u.setAttribute("text-anchor", "middle"), u.setAttribute("dominant-baseline", "middle"), u.textContent = W.toString(), a(this, c).appendChild(u);
+}, M = function(t) {
+  const { stringSpacing: e, fingerCircleColor: i, stringLineWidth: n, fingerRadius: u, spacing: s, matrix: r, fretsSpacing: o, fretsLineWidth: h, nameFontSize: f, nutLineWidth: L, fingerNumberTextColor: C, showFingerNumber: g, mergeFingerCircle: p } = t, N = u * 1.5, y = /* @__PURE__ */ new Map();
+  for (let w = 0; w < r.length; w++)
+    for (let A = 0; A < r[w].length; A++) {
+      const d = r[w][A];
+      if (d > 0) {
+        const m = A * (e + n) + n / 2 + e, W = (w + 0.5) * (o + h) + h / 2 + f + s + L - h;
+        if (p) {
+          y.has(d) || y.set(d, []);
+          const z = y.get(d);
+          if (z.push({ x: m, y: W }), z.length > 1 && A === r[w].lastIndexOf(d)) {
+            const T = z[0], P = { x: m, y: W }, S = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            S.setAttribute("x1", `${T.x}`), S.setAttribute("y1", `${T.y}`), S.setAttribute("x2", `${P.x}`), S.setAttribute("y2", `${P.y}`), S.setAttribute("stroke", i), S.setAttribute("stroke-width", `${u * 2}`), S.setAttribute("stroke-linecap", "round"), a(this, b).appendChild(S), g && x(this, l, R).call(this, m, W, d, C, N);
+            continue;
+          }
+        }
+        const F = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        F.setAttribute("cx", `${m}`), F.setAttribute("cy", `${W}`), F.setAttribute("r", `${u}`), F.setAttribute("fill", i), a(this, b).appendChild(F), g && (!p || A === r[w].lastIndexOf(d)) && x(this, l, R).call(this, m, W, d, C, N);
       }
     }
-}, R = function(t) {
-  const { startFretsTextColor: e, startFrets: i, nameFontSize: o, nutLineWidth: g, fretsLineWidth: l, fretsSpacing: s } = t;
+}, // 新增一个辅助方法来绘制指法编号
+R = function(t, e, i, n, u) {
+  const s = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  s.setAttribute("x", `${t}`), s.setAttribute("y", `${e}`), s.setAttribute("fill", n), s.setAttribute("font-size", `${u}`), s.setAttribute("text-anchor", "middle"), s.setAttribute("dominant-baseline", "central"), s.textContent = i.toString(), a(this, b).appendChild(s);
+}, j = function(t) {
+  const { startFretsTextColor: e, startFrets: i, nameFontSize: n, nutLineWidth: u, fretsLineWidth: s, fretsSpacing: r } = t;
   if (i <= 1) return;
-  const r = o / 2, n = document.createElementNS("http://www.w3.org/2000/svg", "text");
-  n.setAttribute("x", "0"), n.setAttribute("y", `${this.gridRect.top + g + s / 2 + l * 2}`), n.setAttribute("fill", e), n.setAttribute("font-size", `${r}`), n.setAttribute("font-style", "italic"), n.textContent = i.toString(), a(this, c).appendChild(n);
-}, k = function(t) {
-  const { matrix: e, stringLineWidth: i, stringSpacing: o, stringColor: g, stringCount: l, fretsSpacing: s, fretsLineWidth: r, fretsColor: n, nutLineWidth: b, nutColor: A } = t, $ = e.length, { top: L, bottom: x, right: S, left: W } = this.gridRect;
-  for (let m = 0; m < l; m++) {
-    const p = m * (o + i) + i / 2 + o, d = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    d.setAttribute("x1", `${p}`), d.setAttribute("y1", `${L + b}`), d.setAttribute("x2", `${p}`), d.setAttribute("y2", `${x}`), d.setAttribute("stroke", g), d.setAttribute("stroke-width", `${i}`), a(this, c).appendChild(d);
+  const o = n / 2, h = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  h.setAttribute("x", "0"), h.setAttribute("y", `${this.gridRect.top + u + r / 2 + s * 2}`), h.setAttribute("fill", e), h.setAttribute("font-size", `${o}`), h.setAttribute("font-style", "italic"), h.textContent = i.toString(), a(this, b).appendChild(h);
+}, B = function(t) {
+  const { matrix: e, stringLineWidth: i, stringSpacing: n, stringColor: u, stringCount: s, fretsSpacing: r, fretsLineWidth: o, fretsColor: h, nutLineWidth: f, nutColor: L } = t, C = e.length, { top: g, bottom: p, right: N, left: y } = this.gridRect;
+  for (let w = 0; w < s; w++) {
+    const A = w * (n + i) + i / 2 + n, d = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    d.setAttribute("x1", `${A}`), d.setAttribute("y1", `${g + f}`), d.setAttribute("x2", `${A}`), d.setAttribute("y2", `${p}`), d.setAttribute("stroke", u), d.setAttribute("stroke-width", `${i}`), a(this, b).appendChild(d);
   }
-  for (let m = 0; m <= $; m++) {
-    const p = m === 0, d = p ? L + b / 2 : m * (s + r) + L + b - r / 2, u = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    u.setAttribute("x1", `${W}`), u.setAttribute("y1", `${d}`), u.setAttribute("x2", `${S}`), u.setAttribute("y2", `${d}`), u.setAttribute("stroke", p ? A : n), u.setAttribute("stroke-width", `${p ? b : r}`), a(this, c).appendChild(u);
+  for (let w = 0; w <= C; w++) {
+    const A = w === 0, d = A ? g + f / 2 : w * (r + o) + g + f - o / 2, m = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    m.setAttribute("x1", `${y}`), m.setAttribute("y1", `${d}`), m.setAttribute("x2", `${N}`), m.setAttribute("y2", `${d}`), m.setAttribute("stroke", A ? L : h), m.setAttribute("stroke-width", `${A ? f : o}`), a(this, b).appendChild(m);
   }
+}, D = function(t) {
+  const { stringLineWidth: e, stringSpacing: i, stringCount: n, notesOutsideOfChords: u, fingerRadius: s, crossLineColor: r, crossLineWidth: o } = t, h = this.gridRect.top;
+  for (let f = 0; f < n; f++) {
+    if (!u[n - f]) continue;
+    const L = f * (i + e) + e / 2 + i + s / 2, C = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    C.setAttribute("transform", `translate(${L - s}, ${h - s * 1.2})`);
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    g.setAttribute("x1", "0"), g.setAttribute("y1", "0"), g.setAttribute("x2", `${s}`), g.setAttribute("y2", `${s}`), g.setAttribute("stroke", r), g.setAttribute("stroke-width", `${o}`), g.setAttribute("stroke-linecap", "round"), C.appendChild(g);
+    const p = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    p.setAttribute("x1", "0"), p.setAttribute("y1", `${s}`), p.setAttribute("x2", `${s}`), p.setAttribute("y2", "0"), p.setAttribute("stroke", r), p.setAttribute("stroke-width", `${o}`), p.setAttribute("stroke-linecap", "round"), C.appendChild(p), a(this, b).appendChild(C);
+  }
 };
 export {
-  O as GuitarChords
+  H as GuitarChords
 };

dist/guitar-chords.umd.js

 /*!
- * @guitar-chords/svg version 0.0.2
+ * @guitar-chords/svg version 0.0.3
  * Author: Capricorncd<[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords
- * Released on: 2024-10-26 13:00:45 (GMT+0900)
+ * Released on: 2024-10-27 00:24:44 (GMT+0900)
  */
-(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(i=typeof globalThis<"u"?globalThis:i||self,r(i.GuitarChords={}))})(this,function(i){"use strict";var E=i=>{throw TypeError(i)};var T=(i,r,g)=>r.has(i)||E("Cannot "+g);var u=(i,r,g)=>(T(i,r,"read from private field"),g?g.call(i):r.get(i)),F=(i,r,g)=>r.has(i)?E("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(i):r.set(i,g),z=(i,r,g,m)=>(T(i,r,"write to private field"),m?m.call(i,g):r.set(i,g),g),$=(i,r,g)=>(T(i,r,"access private method"),g);var m,l,p,v,R,k,G,P;const r={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,name:"",nameFontSize:50,spacing:10,fretsSpacing:50,stringSpacing:30,stringCount:6,fingerRadius:15,fingerNumberTextColor:"#fff",startFrets:0,matrix:[[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]};class g{constructor(t={}){F(this,p);F(this,m);F(this,l);z(this,m,{...r,...t});const{autoRender:e}=u(this,m);z(this,l,document.createElementNS("http://www.w3.org/2000/svg","svg")),e&&$(this,p,v).call(this)}get element(){return u(this,l)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:n}=this.data;return e*(t+1)+n*t}get height(){const{nutLineWidth:t,fretsSpacing:e,fretsLineWidth:n,matrix:d,spacing:f,nameFontSize:b}=this.data;return t+(e+n)*d.length+b+f}get gridRect(){const{nutLineWidth:t,stringSpacing:e,stringLineWidth:n,stringCount:d,matrix:f,spacing:b,fretsSpacing:o,fretsLineWidth:h,nameFontSize:s}=this.data;return{width:e*(d-1)+n*d,height:t+(o+h)*f.length,left:e,top:s+b,right:this.width-e,bottom:this.height}}get data(){const{defaultColor:t,defaultLineWidth:e}=u(this,m),{nameTextColor:n=t,nutLineWidth:d=e,nutColor:f=t,fretsColor:b=t,fretsLineWidth:o=e,stringColor:h=t,stringLineWidth:s=e,fingerCircleColor:w=t,startFretsTextColor:C=t,transposeTextColor:W=n}=u(this,m);return{...u(this,m),nameTextColor:n,nutLineWidth:d,nutColor:f,fretsColor:b,fretsLineWidth:o,stringColor:h,stringLineWidth:s,fingerCircleColor:w,startFretsTextColor:C,transposeTextColor:W}}render(t){return t&&z(this,m,{...u(this,m),...t}),$(this,p,v).call(this),this}}m=new WeakMap,l=new WeakMap,p=new WeakSet,v=function(){const t=this.data,{width:e,height:n}=this;u(this,l).setAttribute("width",`${e}`),u(this,l).setAttribute("height",`${n}`),u(this,l).setAttribute("viewBox",`0 0 ${e} ${n}`),$(this,p,P).call(this,t),$(this,p,G).call(this,t),$(this,p,k).call(this,t),$(this,p,R).call(this,t)},R=function(t){const{name:e,nameTextColor:n,nameFontSize:d,transposeTextColor:f,transpose:b}=t,o=document.createElementNS("http://www.w3.org/2000/svg","text");if(o.setAttribute("x",`${this.width/2}`),o.setAttribute("y",`${d/2}`),o.setAttribute("fill",n),o.setAttribute("font-size",`${d}`),o.setAttribute("text-anchor","middle"),o.setAttribute("dominant-baseline","middle"),o.textContent=e,u(this,l).appendChild(o),b){const h=document.createElementNS("http://www.w3.org/2000/svg","text"),s=d/2,w=b===1;h.setAttribute("x",`${this.width/2-d*e.length/2}`),h.setAttribute("y",`${s*.5}`),h.setAttribute("fill",f),h.setAttribute("font-size",`${s}`),h.setAttribute("text-anchor",w?"middle":"start"),h.setAttribute("dominant-baseline","middle"),h.textContent=w?"♯":"♭",u(this,l).appendChild(h)}},k=function(t){const{stringSpacing:e,fingerCircleColor:n,stringLineWidth:d,fingerRadius:f,spacing:b,matrix:o,fretsSpacing:h,fretsLineWidth:s,nameFontSize:w,nutLineWidth:C,fingerNumberTextColor:W}=t,y=f*1.5;for(let S=0;S<o.length;S++)for(let L=0;L<o[S].length;L++){const N=o[S][L];if(N>0){const x=L*(e+d)+d/2+e,A=(S+.5)*(h+s)+s/2+w+b+C-s,a=document.createElementNS("http://www.w3.org/2000/svg","circle");a.setAttribute("cx",`${x}`),a.setAttribute("cy",`${A}`),a.setAttribute("r",`${f}`),a.setAttribute("fill",n),u(this,l).appendChild(a);const c=document.createElementNS("http://www.w3.org/2000/svg","text");c.setAttribute("x",`${x}`),c.setAttribute("y",`${A+(C>s?s:C)/2}`),c.setAttribute("fill",W),c.setAttribute("font-size",`${y}`),c.setAttribute("text-anchor","middle"),c.setAttribute("dominant-baseline","middle"),c.textContent=N.toString(),u(this,l).appendChild(c)}}},G=function(t){const{startFretsTextColor:e,startFrets:n,nameFontSize:d,nutLineWidth:f,fretsLineWidth:b,fretsSpacing:o}=t;if(n<=1)return;const h=d/2,s=document.createElementNS("http://www.w3.org/2000/svg","text");s.setAttribute("x","0"),s.setAttribute("y",`${this.gridRect.top+f+o/2+b*2}`),s.setAttribute("fill",e),s.setAttribute("font-size",`${h}`),s.setAttribute("font-style","italic"),s.textContent=n.toString(),u(this,l).appendChild(s)},P=function(t){const{matrix:e,stringLineWidth:n,stringSpacing:d,stringColor:f,stringCount:b,fretsSpacing:o,fretsLineWidth:h,fretsColor:s,nutLineWidth:w,nutColor:C}=t,W=e.length,{top:y,bottom:S,right:L,left:N}=this.gridRect;for(let x=0;x<b;x++){const A=x*(d+n)+n/2+d,a=document.createElementNS("http://www.w3.org/2000/svg","line");a.setAttribute("x1",`${A}`),a.setAttribute("y1",`${y+w}`),a.setAttribute("x2",`${A}`),a.setAttribute("y2",`${S}`),a.setAttribute("stroke",f),a.setAttribute("stroke-width",`${n}`),u(this,l).appendChild(a)}for(let x=0;x<=W;x++){const A=x===0,a=A?y+w/2:x*(o+h)+y+w-h/2,c=document.createElementNS("http://www.w3.org/2000/svg","line");c.setAttribute("x1",`${N}`),c.setAttribute("y1",`${a}`),c.setAttribute("x2",`${L}`),c.setAttribute("y2",`${a}`),c.setAttribute("stroke",A?C:s),c.setAttribute("stroke-width",`${A?w:h}`),u(this,l).appendChild(c)}},i.GuitarChords=g,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(r,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(r=typeof globalThis<"u"?globalThis:r||self,d(r.GuitarChords={}))})(this,function(r){"use strict";var I=r=>{throw TypeError(r)};var T=(r,d,A)=>d.has(r)||I("Cannot "+A);var l=(r,d,A)=>(T(r,d,"read from private field"),A?A.call(r):d.get(r)),O=(r,d,A)=>d.has(r)?I("Cannot add the same private member more than once"):d instanceof WeakSet?d.add(r):d.set(r,A),z=(r,d,A,C)=>(T(r,d,"write to private field"),C?C.call(r,A):d.set(r,A),A),y=(r,d,A)=>(T(r,d,"access private method"),A);var C,f,g,R,M,B,P,D,_,q;const d={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,name:"",nameFontSize:50,spacing:10,fretsSpacing:50,stringSpacing:30,stringCount:6,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};class A{constructor(t={}){O(this,g);O(this,C);O(this,f);z(this,C,{...d,...t});const{autoRender:e}=l(this,C);z(this,f,document.createElementNS("http://www.w3.org/2000/svg","svg")),e&&y(this,g,R).call(this)}get element(){return l(this,f)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:s}=this.data;return e*(t+1)+s*t}get height(){const{nutLineWidth:t,fretsSpacing:e,fretsLineWidth:s,matrix:o,spacing:a,nameFontSize:i}=this.data;return t+(e+s)*o.length+i+a}get gridRect(){const{nutLineWidth:t,stringSpacing:e,stringLineWidth:s,stringCount:o,matrix:a,spacing:i,fretsSpacing:n,fretsLineWidth:u,nameFontSize:h}=this.data;return{width:e*(o-1)+s*o,height:t+(n+u)*a.length,left:e,top:h+i,right:this.width-e,bottom:this.height}}get data(){const{defaultColor:t,defaultLineWidth:e}=l(this,C),{nameTextColor:s=t,nutLineWidth:o=e,nutColor:a=t,fretsColor:i=t,fretsLineWidth:n=e,stringColor:u=t,stringLineWidth:h=e,fingerCircleColor:p=t,startFretsTextColor:N=t,transposeTextColor:S=s,notesOutsideOfChords:b={},crossLineWidth:m=h,crossLineColor:W=t}=l(this,C);return{...l(this,C),nameTextColor:s,nutLineWidth:o,nutColor:a,fretsColor:i,fretsLineWidth:n,stringColor:u,stringLineWidth:h,fingerCircleColor:p,startFretsTextColor:N,transposeTextColor:S,notesOutsideOfChords:b,crossLineWidth:m,crossLineColor:W}}render(t){return t&&z(this,C,{...l(this,C),...t}),y(this,g,R).call(this),this}}C=new WeakMap,f=new WeakMap,g=new WeakSet,R=function(){const t=this.data,{width:e,height:s}=this;l(this,f).setAttribute("width",`${e}`),l(this,f).setAttribute("height",`${s}`),l(this,f).setAttribute("viewBox",`0 0 ${e} ${s}`),y(this,g,_).call(this,t),y(this,g,D).call(this,t),y(this,g,B).call(this,t),y(this,g,M).call(this,t),Object.keys(t.notesOutsideOfChords).length>0&&y(this,g,q).call(this,t)},M=function(t){const{name:e,nameTextColor:s,nameFontSize:o,transposeTextColor:a,transpose:i}=t,n=document.createElementNS("http://www.w3.org/2000/svg","text");if(n.setAttribute("x",`${this.width/2}`),n.setAttribute("y",`${o/2}`),n.setAttribute("fill",s),n.setAttribute("font-size",`${o}`),n.setAttribute("text-anchor","middle"),n.setAttribute("dominant-baseline","middle"),n.textContent=e,l(this,f).appendChild(n),i){const u=document.createElementNS("http://www.w3.org/2000/svg","text"),h=o/2,p=i===1;u.setAttribute("x",`${this.width/2-o*e.length/2}`),u.setAttribute("y",`${h*.5}`),u.setAttribute("fill",a),u.setAttribute("font-size",`${h}`),u.setAttribute("text-anchor",p?"middle":"start"),u.setAttribute("dominant-baseline","middle"),u.textContent=p?"♯":"♭",l(this,f).appendChild(u)}},B=function(t){const{stringSpacing:e,fingerCircleColor:s,stringLineWidth:o,fingerRadius:a,spacing:i,matrix:n,fretsSpacing:u,fretsLineWidth:h,nameFontSize:p,nutLineWidth:N,fingerNumberTextColor:S,showFingerNumber:b,mergeFingerCircle:m}=t,W=a*1.5,F=new Map;for(let w=0;w<n.length;w++)for(let x=0;x<n[w].length;x++){const c=n[w][x];if(c>0){const $=x*(e+o)+o/2+e,v=(w+.5)*(u+h)+h/2+p+i+N-h;if(m){F.has(c)||F.set(c,[]);const E=F.get(c);if(E.push({x:$,y:v}),E.length>1&&x===n[w].lastIndexOf(c)){const G=E[0],j={x:$,y:v},L=document.createElementNS("http://www.w3.org/2000/svg","line");L.setAttribute("x1",`${G.x}`),L.setAttribute("y1",`${G.y}`),L.setAttribute("x2",`${j.x}`),L.setAttribute("y2",`${j.y}`),L.setAttribute("stroke",s),L.setAttribute("stroke-width",`${a*2}`),L.setAttribute("stroke-linecap","round"),l(this,f).appendChild(L),b&&y(this,g,P).call(this,$,v,c,S,W);continue}}const k=document.createElementNS("http://www.w3.org/2000/svg","circle");k.setAttribute("cx",`${$}`),k.setAttribute("cy",`${v}`),k.setAttribute("r",`${a}`),k.setAttribute("fill",s),l(this,f).appendChild(k),b&&(!m||x===n[w].lastIndexOf(c))&&y(this,g,P).call(this,$,v,c,S,W)}}},P=function(t,e,s,o,a){const i=document.createElementNS("http://www.w3.org/2000/svg","text");i.setAttribute("x",`${t}`),i.setAttribute("y",`${e}`),i.setAttribute("fill",o),i.setAttribute("font-size",`${a}`),i.setAttribute("text-anchor","middle"),i.setAttribute("dominant-baseline","central"),i.textContent=s.toString(),l(this,f).appendChild(i)},D=function(t){const{startFretsTextColor:e,startFrets:s,nameFontSize:o,nutLineWidth:a,fretsLineWidth:i,fretsSpacing:n}=t;if(s<=1)return;const u=o/2,h=document.createElementNS("http://www.w3.org/2000/svg","text");h.setAttribute("x","0"),h.setAttribute("y",`${this.gridRect.top+a+n/2+i*2}`),h.setAttribute("fill",e),h.setAttribute("font-size",`${u}`),h.setAttribute("font-style","italic"),h.textContent=s.toString(),l(this,f).appendChild(h)},_=function(t){const{matrix:e,stringLineWidth:s,stringSpacing:o,stringColor:a,stringCount:i,fretsSpacing:n,fretsLineWidth:u,fretsColor:h,nutLineWidth:p,nutColor:N}=t,S=e.length,{top:b,bottom:m,right:W,left:F}=this.gridRect;for(let w=0;w<i;w++){const x=w*(o+s)+s/2+o,c=document.createElementNS("http://www.w3.org/2000/svg","line");c.setAttribute("x1",`${x}`),c.setAttribute("y1",`${b+p}`),c.setAttribute("x2",`${x}`),c.setAttribute("y2",`${m}`),c.setAttribute("stroke",a),c.setAttribute("stroke-width",`${s}`),l(this,f).appendChild(c)}for(let w=0;w<=S;w++){const x=w===0,c=x?b+p/2:w*(n+u)+b+p-u/2,$=document.createElementNS("http://www.w3.org/2000/svg","line");$.setAttribute("x1",`${F}`),$.setAttribute("y1",`${c}`),$.setAttribute("x2",`${W}`),$.setAttribute("y2",`${c}`),$.setAttribute("stroke",x?N:h),$.setAttribute("stroke-width",`${x?p:u}`),l(this,f).appendChild($)}},q=function(t){const{stringLineWidth:e,stringSpacing:s,stringCount:o,notesOutsideOfChords:a,fingerRadius:i,crossLineColor:n,crossLineWidth:u}=t,h=this.gridRect.top;for(let p=0;p<o;p++){if(!a[o-p])continue;const N=p*(s+e)+e/2+s+i/2,S=document.createElementNS("http://www.w3.org/2000/svg","g");S.setAttribute("transform",`translate(${N-i}, ${h-i*1.2})`);const b=document.createElementNS("http://www.w3.org/2000/svg","line");b.setAttribute("x1","0"),b.setAttribute("y1","0"),b.setAttribute("x2",`${i}`),b.setAttribute("y2",`${i}`),b.setAttribute("stroke",n),b.setAttribute("stroke-width",`${u}`),b.setAttribute("stroke-linecap","round"),S.appendChild(b);const m=document.createElementNS("http://www.w3.org/2000/svg","line");m.setAttribute("x1","0"),m.setAttribute("y1",`${i}`),m.setAttribute("x2",`${i}`),m.setAttribute("y2","0"),m.setAttribute("stroke",n),m.setAttribute("stroke-width",`${u}`),m.setAttribute("stroke-linecap","round"),S.appendChild(m),l(this,f).appendChild(S)}},r.GuitarChords=A,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package.json

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

README.md

 # @guitar-chords/svg
 
-Use SVG to generate guitar chords or edit it.
+<p>
+  <a href="https://npmcharts.com/compare/@guitar-chords/svg?minimal=true"><img src="https://img.shields.io/npm/dm/@guitar-chords/svg.svg?sanitize=true" alt="Downloads"></a>
+  <a href="https://www.npmjs.com/package/@guitar-chords/svg"><img src="https://img.shields.io/npm/v/@guitar-chords/svg.svg?sanitize=true" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@guitar-chords/svg"><img src="https://img.shields.io/npm/l/@guitar-chords/svg.svg?sanitize=true" alt="License"></a>
+</p>
 
+Use SVG to generate guitar chords.
+
 ## Install
@@ -27,1 +33,11 @@
 ```
+
+## Options
+
+See [types.d.ts](./src/types.d.ts).
+
+## API
+
+### `render(options?: Partial<GuitarChordsOptions>)`
+
+Re-render the guitar chord.

src/const.ts

@@ -28,2 +28,3 @@ /**
   fingerNumberTextColor: '#fff',
+  showFingerNumber: true,
   startFrets: 0,
@@ -36,2 +37,3 @@ // startFretsTextColor: '',
   ],
+  mergeFingerCircle: false,
 }

src/GuitarChords.ts

@@ -67,3 +67,6 @@ /**
       startFretsTextColor = defaultColor,
-      transposeTextColor = nameTextColor
+      transposeTextColor = nameTextColor,
+      notesOutsideOfChords = {},
+      crossLineWidth = stringLineWidth,
+      crossLineColor = defaultColor,
     } = this.#options
@@ -82,2 +85,5 @@ return {
       transposeTextColor,
+      notesOutsideOfChords,
+      crossLineWidth,
+      crossLineColor,
     }
@@ -113,2 +119,6 @@ }
     this.#drawChordName(data)
+    // 绘制和弦外音符号`x`
+    if (Object.keys(data.notesOutsideOfChords).length > 0) {
+      this.#drawNotesOutsideOfChords(data)
+    }
   }
@@ -145,5 +155,7 @@
   #drawFingerPositions(data: GuitarChordsData) {
-    const { stringSpacing, fingerCircleColor, stringLineWidth, fingerRadius, spacing, matrix, fretsSpacing, fretsLineWidth, nameFontSize, nutLineWidth, fingerNumberTextColor } = data
+    const { stringSpacing, fingerCircleColor, stringLineWidth, fingerRadius, spacing, matrix, fretsSpacing, fretsLineWidth, nameFontSize, nutLineWidth, fingerNumberTextColor, showFingerNumber, mergeFingerCircle } = data
     const fontSize = fingerRadius * 1.5
 
+    const fingerCircleMap = new Map<number, { x: number, y: number }[]>()
+
     for (let fret = 0; fret < matrix.length; fret++) {
@@ -155,2 +167,33 @@ for (let string = 0; string < matrix[fret].length; string++) {
           const y = (fret + 0.5) * (fretsSpacing + fretsLineWidth) + fretsLineWidth / 2 + nameFontSize + spacing + nutLineWidth - fretsLineWidth
+
+          // 大横按/小横按时，合并指法圆点
+          if (mergeFingerCircle) {
+            if (!fingerCircleMap.has(fingerNumber)) {
+              fingerCircleMap.set(fingerNumber, [])
+            }
+            const fingerCircleList = fingerCircleMap.get(fingerNumber)!
+            fingerCircleList.push({ x, y })
+
+            // 相同手指编号的最后一个指法圆点绘制
+            if (fingerCircleList.length > 1 && string === matrix[fret].lastIndexOf(fingerNumber)) {
+              const startPoint = fingerCircleList[0]
+              const endPoint = { x, y }
+              const line = document.createElementNS("http://www.w3.org/2000/svg", "line")
+              line.setAttribute('x1', `${startPoint.x}`)
+              line.setAttribute('y1', `${startPoint.y}`)
+              line.setAttribute('x2', `${endPoint.x}`)
+              line.setAttribute('y2', `${endPoint.y}`)
+              line.setAttribute('stroke', fingerCircleColor)
+              line.setAttribute('stroke-width', `${fingerRadius * 2}`)
+              line.setAttribute('stroke-linecap', 'round')
+              this.#element.appendChild(line)
+
+              // 在横按的最后一个位置绘制指法编号
+              if (showFingerNumber) {
+                this.#drawFingerNumber(x, y, fingerNumber, fingerNumberTextColor, fontSize)
+              }
+              continue
+            }
+          }
+
           const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
@@ -163,11 +206,5 @@ circle.setAttribute('cx', `${x}`)
 
-          const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
-          text.setAttribute('x', `${x}`)
-          text.setAttribute('y', `${y + (nutLineWidth > fretsLineWidth ? fretsLineWidth : nutLineWidth) / 2}`)
-          text.setAttribute('fill', fingerNumberTextColor)
-          text.setAttribute('font-size', `${fontSize}`)
-          text.setAttribute('text-anchor', 'middle')
-          text.setAttribute('dominant-baseline', 'middle')
-          text.textContent = fingerNumber.toString()
-          this.#element.appendChild(text)
+          if (showFingerNumber && (!mergeFingerCircle || string === matrix[fret].lastIndexOf(fingerNumber))) {
+            this.#drawFingerNumber(x, y, fingerNumber, fingerNumberTextColor, fontSize)
+          }
         }
@@ -178,2 +215,15 @@ }
 
+  // 新增一个辅助方法来绘制指法编号
+  #drawFingerNumber(x: number, y: number, fingerNumber: number, color: string, fontSize: number) {
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
+    text.setAttribute('x', `${x}`)
+    text.setAttribute('y', `${y}`)
+    text.setAttribute('fill', color)
+    text.setAttribute('font-size', `${fontSize}`)
+    text.setAttribute('text-anchor', 'middle')
+    text.setAttribute('dominant-baseline', 'central')
+    text.textContent = fingerNumber.toString()
+    this.#element.appendChild(text)
+  }
+
   #drawFretNumbers(data: GuitarChordsData) {
@@ -227,2 +277,40 @@ const { startFretsTextColor, startFrets, nameFontSize, nutLineWidth, fretsLineWidth, fretsSpacing } = data
   }
+
+  #drawNotesOutsideOfChords(data: GuitarChordsData) {
+    const { stringLineWidth, stringSpacing, stringCount, notesOutsideOfChords, fingerRadius, crossLineColor, crossLineWidth } = data
+
+    // 绘制垂直交叉线段，长度为指法圆点直径
+    const y = this.gridRect.top
+    for (let i = 0; i < stringCount; i++) {
+      if (!notesOutsideOfChords[stringCount - i]) continue
+
+      const x = i * (stringSpacing + stringLineWidth) + stringLineWidth / 2 + stringSpacing + fingerRadius / 2
+
+      const group = document.createElementNS("http://www.w3.org/2000/svg", "g")
+      group.setAttribute('transform', `translate(${x - fingerRadius}, ${y - fingerRadius * 1.2})`)
+
+      // 绘制交叉线
+      const line1 = document.createElementNS("http://www.w3.org/2000/svg", "line")
+      line1.setAttribute('x1', '0')
+      line1.setAttribute('y1', '0')
+      line1.setAttribute('x2', `${fingerRadius}`)
+      line1.setAttribute('y2', `${fingerRadius}`)
+      line1.setAttribute('stroke', crossLineColor)
+      line1.setAttribute('stroke-width', `${crossLineWidth}`)
+      line1.setAttribute('stroke-linecap', 'round')
+      group.appendChild(line1)
+
+      const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line")
+      line2.setAttribute('x1', '0')
+      line2.setAttribute('y1', `${fingerRadius}`)
+      line2.setAttribute('x2', `${fingerRadius}`)
+      line2.setAttribute('y2', '0')
+      line2.setAttribute('stroke', crossLineColor)
+      line2.setAttribute('stroke-width', `${crossLineWidth}`)
+      line2.setAttribute('stroke-linecap', 'round')
+      group.appendChild(line2)
+
+      this.#element.appendChild(group)
+    }
+  }
 }

src/types.d.ts

@@ -53,2 +53,4 @@ /**
   fingerNumberTextColor: string
+  // 是否显示手指编号，默认true
+  showFingerNumber: boolean
   // 和弦的起始品位数，默认0
@@ -58,2 +60,11 @@ startFrets: number
   startFretsTextColor: string
+  // 大横按/小横按时，是否合并指法圆点，默认false
+  mergeFingerCircle: boolean
+  // 否显示空弦和弦之外音的选项`{和弦序号（吉他的话为1-6弦）: true | false}`
+  // 用于是否在空弦列头部显示小叉`x`，true表示显示即为和弦之外的音，false则不显示
+  notesOutsideOfChords: Record<number, boolean>
+  // 和弦外音`x`的线条粗细，默认为琴弦线条宽度。其长度为指法圆点直径
+  crossLineWidth: number
+  // 和弦外音`x`的线条颜色
+  crossLineColor: string
   // 和弦指法和品位数量的矩阵（二维数组，行表示弦，列表示品位）
@@ -72,3 +83,3 @@ matrix: number[][]
  */
-export type GuitarChordsOptions = Optional<GuitarChordsData, 'nameTextColor' | 'transposeTextColor' | 'nutLineWidth' | 'nutColor' | 'fretsColor' | 'fretsLineWidth' | 'stringColor' | 'stringLineWidth' | 'fingerCircleColor' | 'startFretsTextColor'>
+export type GuitarChordsOptions = Optional<GuitarChordsData, 'nameTextColor' | 'transposeTextColor' | 'nutLineWidth' | 'nutColor' | 'fretsColor' | 'fretsLineWidth' | 'stringColor' | 'stringLineWidth' | 'fingerCircleColor' | 'startFretsTextColor' | 'notesOutsideOfChords' | 'crossLineWidth' | 'crossLineColor'>
 

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34515

increased by36.52%

Lines of code

622

increased by25.91%

Number of lines in readme file

43

increased by59.26%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes