@guitar-chords/canvas - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/guitar-chords.es.js

 /*!
- * @guitar-chords/canvas version 0.0.9
+ * @guitar-chords/canvas version 0.0.10
  * Author: Capricorncd <[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords#readme
- * Released on: 2024-11-07 21:37:13 (GMT+0900)
+ * Released on: 2024-11-09 10:57:45 (GMT+0900)
  */
@@ -53,3 +53,3 @@ var A = (x) => {
     R(this, u);
-    R(this, k, "0.0.9");
+    R(this, k, "0.0.10");
     b(this, L, {
@@ -56,0 +56,0 @@ ...K,

dist/guitar-chords.umd.js

 /*!
- * @guitar-chords/canvas version 0.0.9
+ * @guitar-chords/canvas version 0.0.10
  * Author: Capricorncd <[e-mail]>
  * Homepage: https://github.com/capricorncd/guitar-chords#readme
- * Released on: 2024-11-07 21:37:13 (GMT+0900)
+ * Released on: 2024-11-09 10:57:45 (GMT+0900)
  */
-(function(d,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(d=typeof globalThis<"u"?globalThis:d||self,m(d.GuitarChords={}))})(this,function(d){"use strict";var _=d=>{throw TypeError(d)};var B=(d,m,y)=>m.has(d)||_("Cannot "+y);var n=(d,m,y)=>(B(d,m,"read from private field"),y?y.call(d):m.get(d)),v=(d,m,y)=>m.has(d)?_("Cannot add the same private member more than once"):m instanceof WeakSet?m.add(d):m.set(d,y),M=(d,m,y,T)=>(B(d,m,"write to private field"),T?T.call(d,y):m.set(d,y),y),w=(d,m,y)=>(B(d,m,"access private method"),y);var T,F,P,x,I,g,A,G,j,D,H,J,V,q,N;const m={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,fontFamily:"Arial",name:"",nameFontSize:60,spacing:20,fretsSpacing:50,stringSpacing:30,fingerRadius:15,showFingerNumber:!0,fingerNumberTextColor:"#fff",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,devicePixelRatio:window.devicePixelRatio||1};class y{constructor(t){v(this,g);v(this,T);v(this,F);v(this,P);v(this,x);v(this,I,"0.0.9");M(this,T,{...m,...t});const{devicePixelRatio:e,autoRender:s}=n(this,T);M(this,F,document.createElement("canvas")),M(this,P,n(this,F).getContext("2d")),M(this,x,e),s&&w(this,g,A).call(this)}get element(){return n(this,F)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:s}=this.data;return(e*(t+1)+s*t)*n(this,x)}get height(){const{nutLineWidth:t,fretsLineWidth:e,fretsSpacing:s,matrix:o,spacing:r,nameFontSize:l}=this.data;return(s*o.length+t+e*o.length+l+r)*n(this,x)}get gridRect(){const{stringLineWidth:t,stringSpacing:e,nutLineWidth:s,fretsSpacing:o,fretsLineWidth:r,stringCount:l,matrix:c,spacing:h,nameFontSize:u}=this.data;return{width:(e*(l-1)+t*l)*n(this,x),height:(o*c.length+s+r*c.length)*n(this,x),left:e*n(this,x),top:(u+h)*n(this,x),right:(this.width-e)*n(this,x),bottom:this.height*n(this,x)}}get version(){return n(this,I)}get data(){const{defaultColor:t,defaultLineWidth:e,fingerRadius:s,matrix:o}=n(this,T),{nameTextColor:r=t,nutLineWidth:l=e,nutColor:c=t,fretsColor:h=t,fretsLineWidth:u=e,stringColor:f=t,stringLineWidth:a=e,fingerCircleColor:p=t,startFretsTextColor:W=t,transposeTextColor:i=r,showNotesOutsideOfChords:L,notesOutsideOfChords:O={},crossLineWidth:C=Math.min(a,u),crossLineColor:S=t,crossRadius:b=s*.75,nameLetterSpacing:R=0}=n(this,T);return{...n(this,T),nameTextColor:r,nutLineWidth:l,nutColor:c,fretsColor:h,fretsLineWidth:u,stringColor:f,stringLineWidth:a,fingerCircleColor:p,startFretsTextColor:W,transposeTextColor:i,notesOutsideOfChords:O,showNotesOutsideOfChords:L||Object.keys(O).length>0,crossLineWidth:C,crossLineColor:S,crossRadius:b,nameLetterSpacing:R,stringCount:o[0].length??6}}render(t){return t&&M(this,T,{...n(this,T),...t}),w(this,g,A).call(this),this}}T=new WeakMap,F=new WeakMap,P=new WeakMap,x=new WeakMap,I=new WeakMap,g=new WeakSet,A=function(){const t=this.data,{width:e,height:s}=this;return n(this,F).width=e,n(this,F).height=s,n(this,F).style.width=`${e/n(this,x)}px`,n(this,F).style.height=`${s/n(this,x)}px`,n(this,P).scale(n(this,x),n(this,x)),n(this,P).clearRect(0,0,e,s),w(this,g,H).call(this,t),w(this,g,D).call(this,t),w(this,g,j).call(this,t),w(this,g,G).call(this,t),t.showNotesOutsideOfChords&&w(this,g,J).call(this,t),this},G=function(t){const{name:e,nameTextColor:s,nameFontSize:o,transpose:r,transposeTextColor:l,fontFamily:c,nameLetterSpacing:h}=t,{width:u}=this.gridRect,f=u/n(this,x),a=n(this,P);a.fillStyle=s,a.font=`${o}px ${c}`,a.textAlign="center",a.textBaseline="middle",a.letterSpacing=`${h}px`,a.fillText(e,this.width/(2*n(this,x)),o/2,f);const p=a.measureText(e);if(a.letterSpacing="0px",r!==0){const W=o/2;a.font=`${W}px ${c}`,a.fillStyle=l,a.textAlign="right",a.fillText(r===1?"♯":"♭",this.width/(2*n(this,x))-Math.min(p.width/2,f/2),W/2)}},j=function(t){const{stringSpacing:e,fretsSpacing:s,stringLineWidth:o,fretsLineWidth:r,fingerRadius:l,matrix:c,nutLineWidth:h,fingerNumberTextColor:u,fingerCircleColor:f,fontFamily:a,showFingerNumber:p,mergeFingerCircle:W}=t,i=n(this,P);i.fillStyle=f;const L=l*1.5,{top:O}=this.gridRect,C=new Map;let S=0;for(let b=0;b<c.length;b++)for(let R=0;R<c[b].length;R++)if(S=c[b][R],S>0){const k=R*(e+o)+o/2+e,$=O/n(this,x)+h+(s+r)*b+s/2;if(i.fillStyle=f,i.beginPath(),i.arc(k,$,l,0,Math.PI*2),i.fill(),W){C.has(S)||C.set(S,[]);const z=C.get(S);z.push({x:k,y:$}),z.length>1&&R===c[b].lastIndexOf(S)&&(i.beginPath(),i.moveTo(z[0].x,z[0].y),i.lineTo(k,$),i.strokeStyle=f,i.lineWidth=l*2,i.stroke())}if(!p||W&&R!==c[b].lastIndexOf(S))continue;i.fillStyle=u,i.font=`${L}px ${a}`,i.textAlign="center",i.textBaseline="middle";const E=String(S),{actualBoundingBoxAscent:K,actualBoundingBoxDescent:Q}=i.measureText(E);i.fillText(E,k,$+Math.abs(K-Q)/2)}},D=function(t){const{nutLineWidth:e,fretsSpacing:s,startFrets:o,nameFontSize:r,startFretsTextColor:l,fontFamily:c}=t;if(o<=1)return;const{top:h}=this.gridRect,u=n(this,P),f=r/2;u.fillStyle=l,u.font=`italic ${f}px ${c}`,u.textAlign="left",u.textBaseline="middle",u.fillText(o.toString(),0,h/n(this,x)+e+s/2)},H=function(t){const{matrix:e,nutLineWidth:s,stringLineWidth:o,fretsLineWidth:r,stringSpacing:l,fretsSpacing:c,nutColor:h,stringColor:u,fretsColor:f,stringCount:a,spacing:p,nameFontSize:W}=t,i=n(this,P),L=W+p,O=e.length;for(let C=0;C<a;C++){const S=C*(l+o)+o/2+l;i.beginPath(),i.moveTo(S,L+Math.abs(s-r)),i.lineTo(S,this.height),i.strokeStyle=u,i.lineWidth=o,i.stroke()}for(let C=0;C<=O;C++){const S=C===0?L+s/2:L+s+C*(c+r)-r/2;i.beginPath(),i.moveTo(l,S),i.lineTo(this.width/n(this,x)-l,S),i.strokeStyle=C===0?h:f,i.lineWidth=C===0?s:r,i.stroke()}},J=function(t){const{stringLineWidth:e,stringSpacing:s,stringCount:o,notesOutsideOfChords:r,devicePixelRatio:l,crossLineColor:c,crossLineWidth:h,crossRadius:u}=t,f=n(this,P),a=this.gridRect.top/l;for(let p=0;p<o;p++){if(!w(this,g,V).call(this,p,t))continue;const W=p*(s+e)+s+e/2;if(r[o-p]){const i=w(this,g,q).call(this,t),L=i.width/l,O=i.height/l;f.drawImage(i,W-L/2,a-O,L,O)}else f.fillStyle=c,f.beginPath(),f.arc(W,a-u-h/2,u,0,Math.PI*2),f.lineWidth=h,f.strokeStyle=c,f.stroke()}},V=function(t,e){const{matrix:s}=e;for(let o=0;o<s.length;o++)if(s[o][t]>0)return!1;return!0},q=function(t){const{crossLineColor:e,crossLineWidth:s,crossRadius:o,devicePixelRatio:r}=t,l=o*2*r,c=document.createElement("canvas"),h=c.getContext("2d");c.width=c.height=l,h.beginPath();const u=w(this,g,N).call(this,o,-Math.PI/4,r),f=w(this,g,N).call(this,o,3*Math.PI/4,r);h.moveTo(u.x,u.y),h.lineTo(f.x,f.y);const a=w(this,g,N).call(this,o,Math.PI/4,r),p=w(this,g,N).call(this,o,-3*Math.PI/4,r);return h.moveTo(a.x,a.y),h.lineTo(p.x,p.y),h.strokeStyle=e,h.lineJoin="round",h.lineWidth=s*r,h.stroke(),[u,f,a,p].forEach(({x:i,y:L})=>{h.fillStyle=e,h.beginPath(),h.arc(i,L,s*r/2,0,Math.PI*2),h.fill()}),c},N=function(t,e,s){const o=t*Math.cos(e),r=t*Math.sin(e);return{x:(o+t)*s,y:(r+t)*s}},d.GuitarChords=y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(d,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(d=typeof globalThis<"u"?globalThis:d||self,m(d.GuitarChords={}))})(this,function(d){"use strict";var _=d=>{throw TypeError(d)};var B=(d,m,y)=>m.has(d)||_("Cannot "+y);var n=(d,m,y)=>(B(d,m,"read from private field"),y?y.call(d):m.get(d)),v=(d,m,y)=>m.has(d)?_("Cannot add the same private member more than once"):m instanceof WeakSet?m.add(d):m.set(d,y),M=(d,m,y,T)=>(B(d,m,"write to private field"),T?T.call(d,y):m.set(d,y),y),w=(d,m,y)=>(B(d,m,"access private method"),y);var T,F,P,x,I,g,A,G,j,D,H,J,V,q,N;const m={autoRender:!0,defaultColor:"#000",defaultLineWidth:4,transpose:0,fontFamily:"Arial",name:"",nameFontSize:60,spacing:20,fretsSpacing:50,stringSpacing:30,fingerRadius:15,showFingerNumber:!0,fingerNumberTextColor:"#fff",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,devicePixelRatio:window.devicePixelRatio||1};class y{constructor(t){v(this,g);v(this,T);v(this,F);v(this,P);v(this,x);v(this,I,"0.0.10");M(this,T,{...m,...t});const{devicePixelRatio:e,autoRender:s}=n(this,T);M(this,F,document.createElement("canvas")),M(this,P,n(this,F).getContext("2d")),M(this,x,e),s&&w(this,g,A).call(this)}get element(){return n(this,F)}get width(){const{stringCount:t,stringSpacing:e,stringLineWidth:s}=this.data;return(e*(t+1)+s*t)*n(this,x)}get height(){const{nutLineWidth:t,fretsLineWidth:e,fretsSpacing:s,matrix:o,spacing:r,nameFontSize:l}=this.data;return(s*o.length+t+e*o.length+l+r)*n(this,x)}get gridRect(){const{stringLineWidth:t,stringSpacing:e,nutLineWidth:s,fretsSpacing:o,fretsLineWidth:r,stringCount:l,matrix:c,spacing:h,nameFontSize:u}=this.data;return{width:(e*(l-1)+t*l)*n(this,x),height:(o*c.length+s+r*c.length)*n(this,x),left:e*n(this,x),top:(u+h)*n(this,x),right:(this.width-e)*n(this,x),bottom:this.height*n(this,x)}}get version(){return n(this,I)}get data(){const{defaultColor:t,defaultLineWidth:e,fingerRadius:s,matrix:o}=n(this,T),{nameTextColor:r=t,nutLineWidth:l=e,nutColor:c=t,fretsColor:h=t,fretsLineWidth:u=e,stringColor:f=t,stringLineWidth:a=e,fingerCircleColor:p=t,startFretsTextColor:W=t,transposeTextColor:i=r,showNotesOutsideOfChords:L,notesOutsideOfChords:O={},crossLineWidth:C=Math.min(a,u),crossLineColor:S=t,crossRadius:b=s*.75,nameLetterSpacing:R=0}=n(this,T);return{...n(this,T),nameTextColor:r,nutLineWidth:l,nutColor:c,fretsColor:h,fretsLineWidth:u,stringColor:f,stringLineWidth:a,fingerCircleColor:p,startFretsTextColor:W,transposeTextColor:i,notesOutsideOfChords:O,showNotesOutsideOfChords:L||Object.keys(O).length>0,crossLineWidth:C,crossLineColor:S,crossRadius:b,nameLetterSpacing:R,stringCount:o[0].length??6}}render(t){return t&&M(this,T,{...n(this,T),...t}),w(this,g,A).call(this),this}}T=new WeakMap,F=new WeakMap,P=new WeakMap,x=new WeakMap,I=new WeakMap,g=new WeakSet,A=function(){const t=this.data,{width:e,height:s}=this;return n(this,F).width=e,n(this,F).height=s,n(this,F).style.width=`${e/n(this,x)}px`,n(this,F).style.height=`${s/n(this,x)}px`,n(this,P).scale(n(this,x),n(this,x)),n(this,P).clearRect(0,0,e,s),w(this,g,H).call(this,t),w(this,g,D).call(this,t),w(this,g,j).call(this,t),w(this,g,G).call(this,t),t.showNotesOutsideOfChords&&w(this,g,J).call(this,t),this},G=function(t){const{name:e,nameTextColor:s,nameFontSize:o,transpose:r,transposeTextColor:l,fontFamily:c,nameLetterSpacing:h}=t,{width:u}=this.gridRect,f=u/n(this,x),a=n(this,P);a.fillStyle=s,a.font=`${o}px ${c}`,a.textAlign="center",a.textBaseline="middle",a.letterSpacing=`${h}px`,a.fillText(e,this.width/(2*n(this,x)),o/2,f);const p=a.measureText(e);if(a.letterSpacing="0px",r!==0){const W=o/2;a.font=`${W}px ${c}`,a.fillStyle=l,a.textAlign="right",a.fillText(r===1?"♯":"♭",this.width/(2*n(this,x))-Math.min(p.width/2,f/2),W/2)}},j=function(t){const{stringSpacing:e,fretsSpacing:s,stringLineWidth:o,fretsLineWidth:r,fingerRadius:l,matrix:c,nutLineWidth:h,fingerNumberTextColor:u,fingerCircleColor:f,fontFamily:a,showFingerNumber:p,mergeFingerCircle:W}=t,i=n(this,P);i.fillStyle=f;const L=l*1.5,{top:O}=this.gridRect,C=new Map;let S=0;for(let b=0;b<c.length;b++)for(let R=0;R<c[b].length;R++)if(S=c[b][R],S>0){const k=R*(e+o)+o/2+e,$=O/n(this,x)+h+(s+r)*b+s/2;if(i.fillStyle=f,i.beginPath(),i.arc(k,$,l,0,Math.PI*2),i.fill(),W){C.has(S)||C.set(S,[]);const z=C.get(S);z.push({x:k,y:$}),z.length>1&&R===c[b].lastIndexOf(S)&&(i.beginPath(),i.moveTo(z[0].x,z[0].y),i.lineTo(k,$),i.strokeStyle=f,i.lineWidth=l*2,i.stroke())}if(!p||W&&R!==c[b].lastIndexOf(S))continue;i.fillStyle=u,i.font=`${L}px ${a}`,i.textAlign="center",i.textBaseline="middle";const E=String(S),{actualBoundingBoxAscent:K,actualBoundingBoxDescent:Q}=i.measureText(E);i.fillText(E,k,$+Math.abs(K-Q)/2)}},D=function(t){const{nutLineWidth:e,fretsSpacing:s,startFrets:o,nameFontSize:r,startFretsTextColor:l,fontFamily:c}=t;if(o<=1)return;const{top:h}=this.gridRect,u=n(this,P),f=r/2;u.fillStyle=l,u.font=`italic ${f}px ${c}`,u.textAlign="left",u.textBaseline="middle",u.fillText(o.toString(),0,h/n(this,x)+e+s/2)},H=function(t){const{matrix:e,nutLineWidth:s,stringLineWidth:o,fretsLineWidth:r,stringSpacing:l,fretsSpacing:c,nutColor:h,stringColor:u,fretsColor:f,stringCount:a,spacing:p,nameFontSize:W}=t,i=n(this,P),L=W+p,O=e.length;for(let C=0;C<a;C++){const S=C*(l+o)+o/2+l;i.beginPath(),i.moveTo(S,L+Math.abs(s-r)),i.lineTo(S,this.height),i.strokeStyle=u,i.lineWidth=o,i.stroke()}for(let C=0;C<=O;C++){const S=C===0?L+s/2:L+s+C*(c+r)-r/2;i.beginPath(),i.moveTo(l,S),i.lineTo(this.width/n(this,x)-l,S),i.strokeStyle=C===0?h:f,i.lineWidth=C===0?s:r,i.stroke()}},J=function(t){const{stringLineWidth:e,stringSpacing:s,stringCount:o,notesOutsideOfChords:r,devicePixelRatio:l,crossLineColor:c,crossLineWidth:h,crossRadius:u}=t,f=n(this,P),a=this.gridRect.top/l;for(let p=0;p<o;p++){if(!w(this,g,V).call(this,p,t))continue;const W=p*(s+e)+s+e/2;if(r[o-p]){const i=w(this,g,q).call(this,t),L=i.width/l,O=i.height/l;f.drawImage(i,W-L/2,a-O,L,O)}else f.fillStyle=c,f.beginPath(),f.arc(W,a-u-h/2,u,0,Math.PI*2),f.lineWidth=h,f.strokeStyle=c,f.stroke()}},V=function(t,e){const{matrix:s}=e;for(let o=0;o<s.length;o++)if(s[o][t]>0)return!1;return!0},q=function(t){const{crossLineColor:e,crossLineWidth:s,crossRadius:o,devicePixelRatio:r}=t,l=o*2*r,c=document.createElement("canvas"),h=c.getContext("2d");c.width=c.height=l,h.beginPath();const u=w(this,g,N).call(this,o,-Math.PI/4,r),f=w(this,g,N).call(this,o,3*Math.PI/4,r);h.moveTo(u.x,u.y),h.lineTo(f.x,f.y);const a=w(this,g,N).call(this,o,Math.PI/4,r),p=w(this,g,N).call(this,o,-3*Math.PI/4,r);return h.moveTo(a.x,a.y),h.lineTo(p.x,p.y),h.strokeStyle=e,h.lineJoin="round",h.lineWidth=s*r,h.stroke(),[u,f,a,p].forEach(({x:i,y:L})=>{h.fillStyle=e,h.beginPath(),h.arc(i,L,s*r/2,0,Math.PI*2),h.fill()}),c},N=function(t,e,s){const o=t*Math.cos(e),r=t*Math.sin(e);return{x:(o+t)*s,y:(r+t)*s}},d.GuitarChords=y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package.json

@@ -5,3 +5,3 @@ {
   "authors": "Capricorncd",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
@@ -23,12 +23,19 @@ "main": "./dist/guitar-chords.umd.js",
   },
-  "keywords": [
-    "guitar-chords",
-    "guitar",
-    "canvas"
-  ],
   "files": [
     "src",
     "dist",
+    "package.json",
     "README.md"
   ],
+  "keywords": [
+    "guitar-chords", 
+    "guitar", 
+    "chords", 
+    "svg", 
+    "canvas", 
+    "Ukulele", 
+    "diagram", 
+    "javascript", 
+    "typescript"
+  ],
   "homepage": "https://github.com/capricorncd/guitar-chords#readme",
@@ -35,0 +42,0 @@ "author": "Capricorncd <[e-mail]>",

README.md

@@ -10,4 +10,6 @@ # @guitar-chords/canvas
 
-Use Canvas to generate guitar chords.
+Use Canvas to generate guitar chords. [View the chord diagrams it generates →](https://capricorncd.github.io/guitar-chords/playground/).
 
+![guitar-chords](https://raw.githubusercontent.com/capricorncd/guitar-chords/main/chords.png)
+
 ## Install
@@ -129,2 +131,3 @@
 stringLineWidth|`number`|yes|String line width
+stringCount|`number`|yes|The number of strings, which is the value of `matrix[i].length` or `6`
 fingerRadius|`number`|yes|Radius of the fingering dot
@@ -151,6 +154,6 @@ fingerCircleColor|`string`|yes|Fingering dot color
 ```ts
-interface GuitarChordsOptions {
+type GuitarChordsOptions = {
   name: string;
   matrix: GuitarChordsData['matrix'];
-}
+} & Omit<GuitarChordsData, 'stringCount'>
 ```
@@ -188,5 +191,1 @@
 ```
-
-## Contributors
-
-70% of the code for `version<=0.0.6` is completed by `Cursor` (The AI ​​Code Editor).

src/GuitarChords.ts

@@ -16,3 +16,3 @@ /**
  *
- * 用于创建一个Canvas吉他和弦实例。
+ * 用于创建一个Canvas吉他和弦实例。查看生成的[和弦图 →](https://capricorncd.github.io/guitar-chords/playground/)。
  *
@@ -37,2 +37,4 @@ * `options`和弦实例化选项，见[GuitarChordsOptions](#GuitarChordsOptions)
  * ```
+ *
+ * ![guitar-chords](https://raw.githubusercontent.com/capricorncd/guitar-chords/main/chords.png)
  */
@@ -39,0 +41,0 @@ export class GuitarChords {

src/types.d.ts

@@ -47,3 +47,3 @@ /**
   stringLineWidth: number
-  // 琴弦数量，默认为6
+  // 琴弦数量，为`matrix[i].length`的值或`6`
   stringCount: number
@@ -50,0 +50,0 @@ // 指法圆点的半径

No alert changes

Improved metrics

Total package byte prevSize

47566

increased by1.19%

Lines of code

1169

increased by0.17%

Worsened metrics

Number of lines in readme file

188

decreased by-0.53%

No dependency changes