diff --git a/README.md b/README.md index 8f0971f..856a3f4 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,9 @@ myButton.text = "Press Me"; //Text of the clickable (string) myButton.textColor = "#000000"; //Color of the text (hex number as a string) myButton.textSize = 12; //Size of the text (integer) myButton.textFont = "sans-serif"; //Font of the text (string) -myButton.textScaled = false; //Whether to scale the text with the clickable (boolean) +myButton.textScaled = false; //Whether to scale the text with the clickable (boolean) +myButton.textAlign = CENTER; //The Horizontal alignment of the text (LEFT, RIGHT, CENTER) +myButton.textPadding = 10; //The space between the border and left or right aligned text in px (integer) ``` ### Clickable Events diff --git a/library/p5.clickable.js b/library/p5.clickable.js index 525fd35..43a31ee 100644 --- a/library/p5.clickable.js +++ b/library/p5.clickable.js @@ -69,6 +69,8 @@ function Clickable(x,y) { this.textSize = 12; //Size for the text shown this.textFont = "sans-serif"; //Font for the text shown this.textScaled = false; //Scale the text with the size of the clickable + this.textAlign = CENTER; + this.textPadding = 10; // image options this.image = null; // image object from p5loadimage() @@ -167,10 +169,21 @@ function Clickable(x,y) { if(this.image){ this.drawImage(); } - textAlign(CENTER, CENTER); + textAlign(this.textAlign, CENTER); textSize(this.textSize); textFont(this.textFont); - text(this.text, this.x + this.width / 2, this.y + this.height / 2); + + switch (this.textAlign) { + case LEFT: + text(this.text, this.x + this.textPadding, this.y + this.height / 2); + break; + case RIGHT: + text(this.text, this.x + this.width - this.textPadding, this.y + this.height / 2); + break; + default: + text(this.text, this.x + this.width / 2, this.y + this.height / 2); + } + if (mouseX >= this.x && mouseY >= this.y && mouseX < this.x + this.width && mouseY < this.y + this.height) { cl_lastHovered = this; diff --git a/library/p5.clickable.min.js b/library/p5.clickable.min.js index 25f4768..dd5e92b 100644 --- a/library/p5.clickable.min.js +++ b/library/p5.clickable.min.js @@ -1 +1 @@ -var cl_mouseWasPressed=!1,cl_lastHovered=null,cl_lastClicked=null,cl_clickables=[];function getTextBounds(t,i,e){let s=document.createElement("span");document.body.appendChild(s),s.style.font=i,s.style.fontSize=e+"px",s.style.height="auto",s.style.width="auto",s.style.position="absolute",s.style.whiteSpace="no-wrap",s.innerHTML=t;let h=Math.ceil(s.clientWidth),l=Math.ceil(s.clientHeight);return document.body.removeChild(s),[h,l]}function Clickable(){this.x=0,this.y=0,this.width=100,this.height=50,this.color="#FFFFFF",this.cornerRadius=10,this.strokeWeight=2,this.stroke="#000000",this.text="Press Me",this.textColor="#000000",this.textSize=12,this.textFont="sans-serif",this.textScaled=!1,this.image=null,this.fitImage=!1,this.imageScale=1,this.tint=null,this.noTint=!0,this.filter=null,this.updateTextSize=function(){if(this.textScaled)for(let t=this.height;t>0;t--)if(getTextBounds(this.text,this.textFont,t)[0]<=this.width&&getTextBounds(this.text,this.textFont,t)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,t)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=t/2;break}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(t,i){this.x=t,this.y=i},this.resize=function(t,i){this.width=t,this.height=i,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let t=this.x+this.width/2,i=this.y+this.height/2,e=this.width,s=this.height;if(this.fitImage){let t=this.image.width/this.image.height,i=this.width/this.height;t>i?(e=this.width,s=this.height*(i/t)):(e=this.width*(t/i),s=this.height)}image(this.image,t,i,e*this.imageScale,s*this.imageScale),this.tint&&!this.noTint?tint(this.tint):noTint(),this.filter&&filter(this.filter),pop()},this.draw=function(){push(),fill(this.color),stroke(this.stroke),strokeWeight(this.strokeWeight),rect(this.x,this.y,this.width,this.height,this.cornerRadius),fill(this.textColor),noStroke(),this.image&&this.drawImage(),textAlign(CENTER,CENTER),textSize(this.textSize),textFont(this.textFont),text(this.text,this.x+this.width/2,this.y+this.height/2),mouseX>=this.x&&mouseY>=this.y&&mouseX0;t--)if(getTextBounds(this.text,this.textFont,t)[0]<=this.width&&getTextBounds(this.text,this.textFont,t)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,t)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=t/2;break}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(t,i){this.x=t,this.y=i},this.resize=function(t,i){this.width=t,this.height=i,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let t=this.x+this.width/2,i=this.y+this.height/2,e=this.width,s=this.height;if(this.fitImage){let t=this.image.width/this.image.height,i=this.width/this.height;t>i?(e=this.width,s=this.height*(i/t)):(e=this.width*(t/i),s=this.height)}image(this.image,t,i,e*this.imageScale,s*this.imageScale),this.tint&&!this.noTint?tint(this.tint):noTint(),this.filter&&filter(this.filter),pop()},this.draw=function(){switch(push(),fill(this.color),stroke(this.stroke),strokeWeight(this.strokeWeight),rect(this.x,this.y,this.width,this.height,this.cornerRadius),fill(this.textColor),noStroke(),this.image&&this.drawImage(),textAlign(this.textAlign,CENTER),textSize(this.textSize),textFont(this.textFont),this.textAlign){case LEFT:text(this.text,this.x+this.textPadding,this.y+this.height/2);break;case RIGHT:text(this.text,this.x+this.width-this.textPadding,this.y+this.height/2);break;default:text(this.text,this.x+this.width/2,this.y+this.height/2)}mouseX>=this.x&&mouseY>=this.y&&mouseX