From b316a0ffe6f9d9cc356aff86ead0b18ab3b68184 Mon Sep 17 00:00:00 2001 From: ArztKlein <52363453+ArztKlein@users.noreply.github.com> Date: Mon, 27 Jun 2022 15:55:55 +1200 Subject: [PATCH 1/6] Add cursor styling resolves #14 --- library/p5.clickable.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/library/p5.clickable.js b/library/p5.clickable.js index 525fd35..12d5fc6 100644 --- a/library/p5.clickable.js +++ b/library/p5.clickable.js @@ -11,11 +11,14 @@ var cl_clickables = []; //each draw cycle. p5.prototype.runGUI = function () { for (i = 0; i < cl_clickables.length; ++i) { - if (cl_lastHovered != cl_clickables[i]) + if (cl_lastHovered != cl_clickables[i]){ + cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. cl_clickables[i].onOutside(); + } } if (cl_lastHovered != null) { if (cl_lastClicked != cl_lastHovered) { + cursor(cl_lastHovered.hoverCursorStyle); cl_lastHovered.onHover(); } } @@ -69,6 +72,7 @@ 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.hoverCursorStyle = "pointer" //The cursor style when clickable is hovered // image options this.image = null; // image object from p5loadimage() From 754ccdf032adfd0f6ec3eaad277bbfe9282d8118 Mon Sep 17 00:00:00 2001 From: ArztKlein <52363453+ArztKlein@users.noreply.github.com> Date: Mon, 27 Jun 2022 16:00:46 +1200 Subject: [PATCH 2/6] add cursor style to documentation --- README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 8f0971f..d43c432 100644 --- a/README.md +++ b/README.md @@ -106,15 +106,16 @@ myButton.resize(250, 100); Clickables contain properties that can be changed to alter their appearance: ```javascript -myButton.color = "#FFFFFF"; //Background color of the clickable (hex number as a string) -myButton.cornerRadius = 10; //Corner radius of the clickable (float) -myButton.strokeWeight = 2; //Stroke width of the clickable (float) -myButton.stroke = "#000000"; //Border color of the clickable (hex number as a string) -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.color = "#FFFFFF"; //Background color of the clickable (hex number as a string) +myButton.cornerRadius = 10; //Corner radius of the clickable (float) +myButton.strokeWeight = 2; //Stroke width of the clickable (float) +myButton.stroke = "#000000"; //Border color of the clickable (hex number as a string) +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.hoverCursorStyle = "pointer"; //The cursor style when clickable is hovered ``` ### Clickable Events From f8a155e5caa9f0c8af1cc6bf354561785dd6b5e3 Mon Sep 17 00:00:00 2001 From: ArztKlein <52363453+ArztKlein@users.noreply.github.com> Date: Mon, 27 Jun 2022 17:22:15 +1200 Subject: [PATCH 3/6] copy to other files --- example/lib/p5.clickable.js | 14 +++++++++----- library/p5.clickable.min.js | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/example/lib/p5.clickable.js b/example/lib/p5.clickable.js index dd339a9..12d5fc6 100644 --- a/example/lib/p5.clickable.js +++ b/example/lib/p5.clickable.js @@ -11,11 +11,14 @@ var cl_clickables = []; //each draw cycle. p5.prototype.runGUI = function () { for (i = 0; i < cl_clickables.length; ++i) { - if (cl_lastHovered != cl_clickables[i]) + if (cl_lastHovered != cl_clickables[i]){ + cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. cl_clickables[i].onOutside(); + } } if (cl_lastHovered != null) { if (cl_lastClicked != cl_lastHovered) { + cursor(cl_lastHovered.hoverCursorStyle); cl_lastHovered.onHover(); } } @@ -55,9 +58,9 @@ function getTextBounds(m, font, size) { } //Button Class -function Clickable() { - this.x = 0; //X position of the clickable - this.y = 0; //Y position of the clickable +function Clickable(x,y) { + this.x = x; //X position of the clickable + this.y = y; //Y position of the clickable this.width = 100; //Width of the clickable this.height = 50; //Height of the clickable this.color = "#FFFFFF"; //Background color of the clickable @@ -69,6 +72,7 @@ function Clickable() { 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.hoverCursorStyle = "pointer" //The cursor style when clickable is hovered // image options this.image = null; // image object from p5loadimage() @@ -181,4 +185,4 @@ function Clickable() { } cl_clickables.push(this); -} \ No newline at end of file +} diff --git a/library/p5.clickable.min.js b/library/p5.clickable.min.js index 25f4768..09474e2 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;a--)if(getTextBounds(this.text,this.textFont,a)[0]<=this.width&&getTextBounds(this.text,this.textFont,a)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,a)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=a/2;break}}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(a,b){this.x=a,this.y=b},this.resize=function(a,b){this.width=a,this.height=b,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let e=this.x+this.width/2,f=this.y+this.height/2,a=this.width,b=this.height;if(this.fitImage){let c=this.image.width/this.image.height,d=this.width/this.height;c>d?(a=this.width,b=this.height*(d/c)):(a=this.width*(c/d),b=this.height)}image(this.image,e,f,a*this.imageScale,b*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&&mouseX Date: Tue, 28 Jun 2022 11:22:00 +1200 Subject: [PATCH 4/6] fix mouse hold reset cursor style bug --- example/lib/p5.clickable.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/example/lib/p5.clickable.js b/example/lib/p5.clickable.js index 12d5fc6..029600b 100644 --- a/example/lib/p5.clickable.js +++ b/example/lib/p5.clickable.js @@ -12,11 +12,12 @@ var cl_clickables = []; p5.prototype.runGUI = function () { for (i = 0; i < cl_clickables.length; ++i) { if (cl_lastHovered != cl_clickables[i]){ - cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. cl_clickables[i].onOutside(); } } - if (cl_lastHovered != null) { + if(cl_lastHovered == null){ + cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. + }else { if (cl_lastClicked != cl_lastHovered) { cursor(cl_lastHovered.hoverCursorStyle); cl_lastHovered.onHover(); From b377be93317d241bb3981c449e958e3f06852db1 Mon Sep 17 00:00:00 2001 From: ArztKlein <52363453+ArztKlein@users.noreply.github.com> Date: Tue, 28 Jun 2022 12:51:06 +1200 Subject: [PATCH 5/6] update the other files. --- library/p5.clickable.js | 5 +++-- library/p5.clickable.min.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/library/p5.clickable.js b/library/p5.clickable.js index 12d5fc6..029600b 100644 --- a/library/p5.clickable.js +++ b/library/p5.clickable.js @@ -12,11 +12,12 @@ var cl_clickables = []; p5.prototype.runGUI = function () { for (i = 0; i < cl_clickables.length; ++i) { if (cl_lastHovered != cl_clickables[i]){ - cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. cl_clickables[i].onOutside(); } } - if (cl_lastHovered != null) { + if(cl_lastHovered == null){ + cursor("initial"); // Reset the cursor as it is no longer hovering the clickable. + }else { if (cl_lastClicked != cl_lastHovered) { cursor(cl_lastHovered.hoverCursorStyle); cl_lastHovered.onHover(); diff --git a/library/p5.clickable.min.js b/library/p5.clickable.min.js index 09474e2..d0eb4fd 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(b,c,d){let a=document.createElement("span");document.body.appendChild(a),a.style.font=c,a.style.fontSize=d+"px",a.style.height="auto",a.style.width="auto",a.style.position="absolute",a.style.whiteSpace="no-wrap",a.innerHTML=b;let e=Math.ceil(a.clientWidth),f=Math.ceil(a.clientHeight);return document.body.removeChild(a),[e,f]}function Clickable(a,b){this.x=a,this.y=b,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.hoverCursorStyle="pointer",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 a=this.height;a>0;a--)if(getTextBounds(this.text,this.textFont,a)[0]<=this.width&&getTextBounds(this.text,this.textFont,a)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,a)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=a/2;break}}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(a,b){this.x=a,this.y=b},this.resize=function(a,b){this.width=a,this.height=b,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let e=this.x+this.width/2,f=this.y+this.height/2,a=this.width,b=this.height;if(this.fitImage){let c=this.image.width/this.image.height,d=this.width/this.height;c>d?(a=this.width,b=this.height*(d/c)):(a=this.width*(c/d),b=this.height)}image(this.image,e,f,a*this.imageScale,b*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;a--)if(getTextBounds(this.text,this.textFont,a)[0]<=this.width&&getTextBounds(this.text,this.textFont,a)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,a)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=a/2;break}}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(a,b){this.x=a,this.y=b},this.resize=function(a,b){this.width=a,this.height=b,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let e=this.x+this.width/2,f=this.y+this.height/2,a=this.width,b=this.height;if(this.fitImage){let c=this.image.width/this.image.height,d=this.width/this.height;c>d?(a=this.width,b=this.height*(d/c)):(a=this.width*(c/d),b=this.height)}image(this.image,e,f,a*this.imageScale,b*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&&mouseX Date: Tue, 28 Jun 2022 13:33:21 +1200 Subject: [PATCH 6/6] fixed global i --- example/lib/p5.clickable.js | 2 +- library/p5.clickable.js | 2 +- library/p5.clickable.min.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/example/lib/p5.clickable.js b/example/lib/p5.clickable.js index 029600b..e397859 100644 --- a/example/lib/p5.clickable.js +++ b/example/lib/p5.clickable.js @@ -10,7 +10,7 @@ var cl_clickables = []; //This function is what makes the magic happen and should be ran after //each draw cycle. p5.prototype.runGUI = function () { - for (i = 0; i < cl_clickables.length; ++i) { + for (let i = 0; i < cl_clickables.length; ++i) { if (cl_lastHovered != cl_clickables[i]){ cl_clickables[i].onOutside(); } diff --git a/library/p5.clickable.js b/library/p5.clickable.js index 029600b..e397859 100644 --- a/library/p5.clickable.js +++ b/library/p5.clickable.js @@ -10,7 +10,7 @@ var cl_clickables = []; //This function is what makes the magic happen and should be ran after //each draw cycle. p5.prototype.runGUI = function () { - for (i = 0; i < cl_clickables.length; ++i) { + for (let i = 0; i < cl_clickables.length; ++i) { if (cl_lastHovered != cl_clickables[i]){ cl_clickables[i].onOutside(); } diff --git a/library/p5.clickable.min.js b/library/p5.clickable.min.js index d0eb4fd..f41f1b0 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(b,c,d){let a=document.createElement("span");document.body.appendChild(a),a.style.font=c,a.style.fontSize=d+"px",a.style.height="auto",a.style.width="auto",a.style.position="absolute",a.style.whiteSpace="no-wrap",a.innerHTML=b;let e=Math.ceil(a.clientWidth),f=Math.ceil(a.clientHeight);return document.body.removeChild(a),[e,f]}function Clickable(a,b){this.x=a,this.y=b,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.hoverCursorStyle="pointer",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 a=this.height;a>0;a--)if(getTextBounds(this.text,this.textFont,a)[0]<=this.width&&getTextBounds(this.text,this.textFont,a)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,a)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=a/2;break}}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(a,b){this.x=a,this.y=b},this.resize=function(a,b){this.width=a,this.height=b,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let e=this.x+this.width/2,f=this.y+this.height/2,a=this.width,b=this.height;if(this.fitImage){let c=this.image.width/this.image.height,d=this.width/this.height;c>d?(a=this.width,b=this.height*(d/c)):(a=this.width*(c/d),b=this.height)}image(this.image,e,f,a*this.imageScale,b*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;a--)if(getTextBounds(this.text,this.textFont,a)[0]<=this.width&&getTextBounds(this.text,this.textFont,a)[1]<=this.height){console.log("textbounds: "+getTextBounds(this.text,this.font,a)),console.log("boxsize: "+this.width+", "+this.height),this.textSize=a/2;break}}},this.updateTextSize(),this.onHover=function(){},this.onOutside=function(){},this.onPress=function(){},this.onRelease=function(){},this.locate=function(a,b){this.x=a,this.y=b},this.resize=function(a,b){this.width=a,this.height=b,this.updateTextSize()},this.drawImage=function(){push(),imageMode(CENTER);let e=this.x+this.width/2,f=this.y+this.height/2,a=this.width,b=this.height;if(this.fitImage){let c=this.image.width/this.image.height,d=this.width/this.height;c>d?(a=this.width,b=this.height*(d/c)):(a=this.width*(c/d),b=this.height)}image(this.image,e,f,a*this.imageScale,b*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&&mouseX