Changed mouse button to object

src/events/pointer.js

@@ -691,17 +691,22 @@ function pointer(p5, fn){
   fn.pwinMouseY = 0;
 
   /**
-   * A String system variable that contains the value of the last mouse button
-   * pressed.
+   * An object that tracks the current state of mouse buttons, showing which
+   * buttons are pressed at any given moment.
    *
-   * The `mouseButton` variable is either `LEFT`, `RIGHT`, or `CENTER`,
-   * depending on which button was pressed last.
+   * The `mouseButton` object has three properties:
+   * - `left`: A boolean indicating whether the left mouse button is pressed.
+   * - `right`: A boolean indicating whether the right mouse button is pressed.
+   * - `center`: A boolean indicating whether the middle mouse button (scroll wheel button) is pressed.
    *
    * Note: Different browsers may track `mouseButton` differently. See
    * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" target="_blank">MDN</a>
    * for more information.
    *
-   * @property {(LEFT|RIGHT|CENTER)} mouseButton
+   * @property {Object} mouseButton
+   * @property {boolean} mouseButton.left - Whether the left mouse button is pressed.
+   * @property {boolean} mouseButton.right - Whether the right mouse button is pressed.
+   * @property {boolean} mouseButton.center - Whether the middle mouse button is pressed.
    * @readOnly
    *
    * @example
@@ -719,11 +724,11 @@ function pointer(p5, fn){
    *   background(200);
    *
    *   // Style the text.
-   *   textAlign(CENTER);
+   *   textAlign(CENTER, CENTER);
    *   textSize(16);
    *
    *   // Display the mouse button.
-   *   text(mouseButton, 50, 50);
+   *   text(JSON.stringify(mouseButton), 50, 50);
    * }
    * </code>
    * </div>
@@ -742,21 +747,25 @@ function pointer(p5, fn){
    *   background(200);
    *
    *   if (mouseIsPressed === true) {
-   *     if (mouseButton === LEFT) {
+   *     if (mouseButton.left) {
    *       circle(50, 50, 50);
    *     }
-   *     if (mouseButton === RIGHT) {
+   *     if (mouseButton.right) {
    *       square(25, 25, 50);
    *     }
-   *     if (mouseButton === CENTER) {
+   *     if (mouseButton.center) {
    *       triangle(23, 75, 50, 20, 78, 75);
    *     }
    *   }
    * }
    * </code>
    * </div>
    */
-  fn.mouseButton = 0;
+  fn.mouseButton = {
+    left: false,
+    right: false,
+    center: false
+  };
 
    /**
    * An `Array` of all the current touch points on a touchscreen device.
@@ -960,15 +969,10 @@ function pointer(p5, fn){
      id: touch.pointerId,
   };
 }
-
   fn._setMouseButton = function(e) {
-    if (e.button === 1) {
-      this.mouseButton = constants.CENTER;
-    } else if (e.button === 2) {
-      this.mouseButton = constants.RIGHT;
-    } else {
-      this.mouseButton = constants.LEFT;
-    }
+    this.mouseButton.left = (e.buttons & 1) !== 0;   
+    this.mouseButton.center = (e.buttons & 4) !== 0; 
+    this.mouseButton.right = (e.buttons & 2) !== 0;  
   };
 
   /**
@@ -1163,7 +1167,9 @@ function pointer(p5, fn){
         if (executeDefault === false) {
           e.preventDefault();
         }
-      } 
+      } else {
+        this._setMouseButton(e);
+      }
   };
 
   /**
@@ -1479,6 +1485,8 @@ function pointer(p5, fn){
 
     if(e.pointerType == 'touch'){
       this._activeTouches.delete(e.pointerId);
+    } else {
+      this._setMouseButton(e);
     }
 
     this._updatePointerCoords(e);