@@ -691,24 +691,29 @@ function pointer(p5, fn){
691
691
fn . pwinMouseY = 0 ;
692
692
693
693
/**
694
- * A String system variable that contains the value of the last mouse button
695
- * pressed.
694
+ * An object that tracks the current state of mouse buttons, showing which
695
+ * buttons are pressed at any given moment .
696
696
*
697
- * The `mouseButton` variable is either `LEFT`, `RIGHT`, or `CENTER`,
698
- * depending on which button was pressed last.
697
+ * The `mouseButton` object has three properties:
698
+ * - `left`: A boolean indicating whether the left mouse button is pressed.
699
+ * - `right`: A boolean indicating whether the right mouse button is pressed.
700
+ * - `center`: A boolean indicating whether the middle mouse button (scroll wheel button) is pressed.
699
701
*
700
702
* Note: Different browsers may track `mouseButton` differently. See
701
703
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" target="_blank">MDN</a>
702
704
* for more information.
703
705
*
704
- * @property {(LEFT|RIGHT|CENTER) } mouseButton
706
+ * @property {Object } mouseButton
707
+ * @property {boolean } mouseButton.left - Whether the left mouse button is pressed.
708
+ * @property {boolean } mouseButton.right - Whether the right mouse button is pressed.
709
+ * @property {boolean } mouseButton.center - Whether the middle mouse button is pressed.
705
710
* @readOnly
706
711
*
707
712
* @example
708
713
* <div>
709
714
* <code>
710
715
* function setup() {
711
- * createCanvas(100, 100 );
716
+ * createCanvas(200, 200 );
712
717
*
713
718
* describe(
714
719
* 'A gray square with black text at its center. The text changes from 0 to either "left" or "right" when the user clicks a mouse button.'
@@ -719,11 +724,13 @@ function pointer(p5, fn){
719
724
* background(200);
720
725
*
721
726
* // Style the text.
722
- * textAlign(CENTER);
727
+ * textAlign(CENTER, CENTER );
723
728
* textSize(16);
724
729
*
725
730
* // Display the mouse button.
726
- * text(mouseButton, 50, 50);
731
+ * text(`Left: ${mouseButton.left}`, width / 2, height / 2 - 20);
732
+ * text(`Right: ${mouseButton.right}`, width / 2, height / 2);
733
+ * text(`Center: ${mouseButton.center}`, width / 2, height / 2 + 20);
727
734
* }
728
735
* </code>
729
736
* </div>
@@ -742,21 +749,25 @@ function pointer(p5, fn){
742
749
* background(200);
743
750
*
744
751
* if (mouseIsPressed === true) {
745
- * if (mouseButton === LEFT ) {
752
+ * if (mouseButton.left ) {
746
753
* circle(50, 50, 50);
747
754
* }
748
- * if (mouseButton === RIGHT ) {
755
+ * if (mouseButton.right ) {
749
756
* square(25, 25, 50);
750
757
* }
751
- * if (mouseButton === CENTER ) {
758
+ * if (mouseButton.center ) {
752
759
* triangle(23, 75, 50, 20, 78, 75);
753
760
* }
754
761
* }
755
762
* }
756
763
* </code>
757
764
* </div>
758
765
*/
759
- fn . mouseButton = 0 ;
766
+ fn . mouseButton = {
767
+ left : false ,
768
+ right : false ,
769
+ center : false
770
+ } ;
760
771
761
772
/**
762
773
* An `Array` of all the current touch points on a touchscreen device.
@@ -842,7 +853,7 @@ function pointer(p5, fn){
842
853
* </div>
843
854
*/
844
855
fn . touches = [ ] ;
845
- fn . _activeTouches = new Map ( ) ;
856
+ fn . _activePointers = new Map ( ) ;
846
857
847
858
/**
848
859
* A `Boolean` system variable that's `true` if the mouse is pressed and
@@ -911,7 +922,7 @@ function pointer(p5, fn){
911
922
912
923
if ( e . pointerType == 'touch' ) {
913
924
const touches = [ ] ;
914
- for ( const touch of this . _activeTouches . values ( ) ) {
925
+ for ( const touch of this . _activePointers . values ( ) ) {
915
926
touches . push ( getTouchInfo ( canvas , sx , sy , touch ) ) ;
916
927
}
917
928
this . touches = touches ;
@@ -961,15 +972,18 @@ function pointer(p5, fn){
961
972
} ;
962
973
}
963
974
964
- fn . _setMouseButton = function ( e ) {
965
- if ( e . button === 1 ) {
966
- this . mouseButton = constants . CENTER ;
967
- } else if ( e . button === 2 ) {
968
- this . mouseButton = constants . RIGHT ;
969
- } else {
970
- this . mouseButton = constants . LEFT ;
971
- }
972
- } ;
975
+ fn . _setMouseButton = function ( e ) {
976
+ // Check all active touches to determine button states
977
+ this . mouseButton . left = Array . from ( this . _activePointers . values ( ) ) . some ( touch =>
978
+ ( touch . buttons & 1 ) !== 0
979
+ ) ;
980
+ this . mouseButton . center = Array . from ( this . _activePointers . values ( ) ) . some ( touch =>
981
+ ( touch . buttons & 4 ) !== 0
982
+ ) ;
983
+ this . mouseButton . right = Array . from ( this . _activePointers . values ( ) ) . some ( touch =>
984
+ ( touch . buttons & 2 ) !== 0
985
+ ) ;
986
+ } ;
973
987
974
988
/**
975
989
* A function that's called when the mouse moves.
@@ -1148,10 +1162,9 @@ function pointer(p5, fn){
1148
1162
const context = this . _isGlobal ? window : this ;
1149
1163
let executeDefault ;
1150
1164
this . _updatePointerCoords ( e ) ;
1151
-
1152
- if ( e . pointerType === 'touch' ) {
1153
- this . _activeTouches . set ( e . pointerId , e ) ;
1154
- }
1165
+ this . _activePointers . set ( e . pointerId , e ) ;
1166
+ this . _setMouseButton ( e ) ;
1167
+
1155
1168
1156
1169
if ( ! this . mouseIsPressed && typeof context . mouseMoved === 'function' ) {
1157
1170
executeDefault = context . mouseMoved ( e ) ;
@@ -1163,7 +1176,7 @@ function pointer(p5, fn){
1163
1176
if ( executeDefault === false ) {
1164
1177
e . preventDefault ( ) ;
1165
1178
}
1166
- }
1179
+ }
1167
1180
} ;
1168
1181
1169
1182
/**
@@ -1313,13 +1326,9 @@ function pointer(p5, fn){
1313
1326
let executeDefault ;
1314
1327
this . mouseIsPressed = true ;
1315
1328
1316
- if ( e . pointerType === 'touch' ) {
1317
- this . _activeTouches . set ( e . pointerId , e ) ;
1318
- } else {
1319
- this . _setMouseButton ( e ) ;
1320
- }
1321
-
1322
- this . _updatePointerCoords ( e ) ;
1329
+ this . _activePointers . set ( e . pointerId , e ) ;
1330
+ this . _setMouseButton ( e ) ;
1331
+ this . _updatePointerCoords ( e ) ;
1323
1332
1324
1333
if ( typeof context . mousePressed === 'function' ) {
1325
1334
executeDefault = context . mousePressed ( e ) ;
@@ -1477,9 +1486,8 @@ function pointer(p5, fn){
1477
1486
let executeDefault ;
1478
1487
this . mouseIsPressed = false ;
1479
1488
1480
- if ( e . pointerType == 'touch' ) {
1481
- this . _activeTouches . delete ( e . pointerId ) ;
1482
- }
1489
+ this . _activePointers . delete ( e . pointerId ) ;
1490
+ this . _setMouseButton ( e ) ;
1483
1491
1484
1492
this . _updatePointerCoords ( e ) ;
1485
1493
0 commit comments