@guitar-chords/svg - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/guitar-chords.es.js

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

dist/guitar-chords.umd.js

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

package.json

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

src/const.ts

@@ -15,3 +15,3 @@ /**
   // nameTextColor: '',
-  spacing: 10,
+  spacing: 12,
   // nutLineWidth: LINE_WIDTH,
@@ -38,2 +38,3 @@ // nutColor: '',
   mergeFingerCircle: false,
+  showNotesOutsideOfChords: false,
 }

src/GuitarChords.ts

@@ -117,4 +117,4 @@ /**
     this.#drawChordName(data)
-    // 绘制和弦外音符号`x`
-    if (Object.keys(data.notesOutsideOfChords).length > 0) {
+    // 绘制和弦外音符号`x/o`
+    if (data.showNotesOutsideOfChords) {
       this.#drawNotesOutsideOfChords(data)
@@ -278,33 +278,52 @@ }
     for (let i = 0; i < stringCount; i++) {
-      if (!notesOutsideOfChords[stringCount - i]) continue
+      if (!this.#isOpenString(i, data)) continue
+      const x = i * (stringSpacing + stringLineWidth) + stringLineWidth / 2 + stringSpacing
+      if (notesOutsideOfChords[stringCount - i]) {
+        const group = document.createElementNS("http://www.w3.org/2000/svg", "g")
+        group.setAttribute('transform', `translate(${x - fingerRadius / 2}, ${y - fingerRadius * 1.2})`)
 
-      const x = i * (stringSpacing + stringLineWidth) + stringLineWidth / 2 + stringSpacing + fingerRadius / 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 group = document.createElementNS("http://www.w3.org/2000/svg", "g")
-      group.setAttribute('transform', `translate(${x - fingerRadius}, ${y - fingerRadius * 1.2})`)
+        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)
 
-      // 绘制交叉线
-      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)
+        this.#element.appendChild(group)
+      } else {
+        const radius = fingerRadius * 0.75
+        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle")
+        circle.setAttribute('cx', `${x}`)
+        circle.setAttribute('cy', `${y - radius * 1.1}`)
+        circle.setAttribute('r', `${radius}`)
+        circle.setAttribute('fill', 'transparent')
+        circle.setAttribute('stroke', crossLineColor)
+        circle.setAttribute('stroke-width', `${crossLineWidth}`)
+        this.#element.appendChild(circle)
+      }
+    }
+  }
 
-      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)
+  /** 是否为空弦 */
+  #isOpenString(index: number, data: GuitarChordsData) {
+    const { matrix } = data
+    for (let i = 0; i < matrix.length; i++) {
+      if (matrix[i][index] > 0) return false
     }
+    return true
   }
 }

src/types.d.ts

@@ -61,4 +61,5 @@ /**
   mergeFingerCircle: boolean
-  // 否显示空弦和弦之外音的选项`{和弦序号（吉他的话为1-6弦）: true | false}`
-  // 用于是否在空弦列头部显示小叉`x`，true表示显示即为和弦之外的音，false则不显示
+  // 用于是否在空弦列头部显示小叉`x/o`，默认为false
+  showNotesOutsideOfChords: boolean
+  // 空弦音是否显示为和弦之外的音选项`{和弦序号（吉他的话为1-6弦）: true | false}`
   notesOutsideOfChords: Record<number, boolean>
@@ -65,0 +66,0 @@ // 和弦外音`x`的线条粗细，默认为琴弦线条宽度。其长度为指法圆点直径

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

36368

increased by5.37%

Lines of code

659

increased by5.95%

No dependency changes