p5.clickable
p5.clickable copied to clipboard
[enhancement] CSS Cursor Pointer Support
cursor should change to pointer during hover
(can be also a pointerOnHover
property)
Demonstration: https://editor.p5js.org/dipam2006/sketches/X5H7oqSjB
P.S. not related to this, but #9 can be a function :-)
You can make a pull request for this.
Here's some things I would do for this:
this.pointerOnHover = "default";
have the default cursor be "default" since that's what it already is
Instead of:
if (mouseX >= this.x && mouseY >= this.y
&& mouseX < this.x + this.width && mouseY < this.y + this.height) {
cl_lastHovered = this;
if (mouseIsPressed && !cl_mouseWasPressed)
cl_lastClicked = this;
}
Have this:
select("#defaultCanvas0").style("cursor", "default"); // To make a default cursor the normal
if (mouseX >= this.x && mouseY >= this.y
&& mouseX < this.x + this.width && mouseY < this.y + this.height) {
select("#defaultCanvas0").style("cursor", this.pointerOnHover);
cl_lastHovered = this;
if (mouseIsPressed && !cl_mouseWasPressed)
cl_lastClicked = this;
}
Important!!
You'll need to fix the bug that I can already see now of having multiple clickables and the first one is hovered and makes a cursor change, but the second clickable is not hovered so it sets it to the default cursor
I will add this to the library in the next update! Thank you very much!
I did something similar to @Samathingamajig and came up with this. The problem is that the the cursor will have to be set back to default at the start of every draw loop, but p5.Clickable doesn't have access to start of draw loop