p5.clickable icon indicating copy to clipboard operation
p5.clickable copied to clipboard

[enhancement] CSS Cursor Pointer Support

Open dipamsen opened this issue 4 years ago • 3 comments

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 :-)

dipamsen avatar Aug 02 '20 15:08 dipamsen

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

Samathingamajig avatar Aug 04 '20 19:08 Samathingamajig

I will add this to the library in the next update! Thank you very much!

Lartu avatar Aug 13 '20 06:08 Lartu

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

Demo

dipamsen avatar Aug 17 '20 08:08 dipamsen