CSS Cursor Pointers

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

example/lib/p5.clickable.js

@@ -10,12 +10,16 @@ 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) {
-		if (cl_lastHovered != cl_clickables[i])
+	for (let i = 0; i < cl_clickables.length; ++i) {
+		if (cl_lastHovered != cl_clickables[i]){
 			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();
 		}
 	}
@@ -55,9 +59,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 +73,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 +186,4 @@ function Clickable() {
 	}
 
 	cl_clickables.push(this);
-}
+}

library/p5.clickable.js

@@ -10,12 +10,16 @@ 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) {
-		if (cl_lastHovered != cl_clickables[i])
+	for (let i = 0; i < cl_clickables.length; ++i) {
+		if (cl_lastHovered != cl_clickables[i]){
 			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();
 		}
 	}
@@ -69,6 +73,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()