Skip to content

Commit 2ada04a

Browse files
authored
Merge pull request #7404 from diyaayay/mouse-button
Changed mouse button to object
2 parents e9c18e4 + 4a8b81d commit 2ada04a

File tree

2 files changed

+48
-40
lines changed

2 files changed

+48
-40
lines changed

src/events/pointer.js

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -691,24 +691,29 @@ function pointer(p5, fn){
691691
fn.pwinMouseY = 0;
692692

693693
/**
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.
696696
*
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.
699701
*
700702
* Note: Different browsers may track `mouseButton` differently. See
701703
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" target="_blank">MDN</a>
702704
* for more information.
703705
*
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.
705710
* @readOnly
706711
*
707712
* @example
708713
* <div>
709714
* <code>
710715
* function setup() {
711-
* createCanvas(100, 100);
716+
* createCanvas(200, 200);
712717
*
713718
* describe(
714719
* '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){
719724
* background(200);
720725
*
721726
* // Style the text.
722-
* textAlign(CENTER);
727+
* textAlign(CENTER, CENTER);
723728
* textSize(16);
724729
*
725730
* // 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);
727734
* }
728735
* </code>
729736
* </div>
@@ -742,21 +749,25 @@ function pointer(p5, fn){
742749
* background(200);
743750
*
744751
* if (mouseIsPressed === true) {
745-
* if (mouseButton === LEFT) {
752+
* if (mouseButton.left) {
746753
* circle(50, 50, 50);
747754
* }
748-
* if (mouseButton === RIGHT) {
755+
* if (mouseButton.right) {
749756
* square(25, 25, 50);
750757
* }
751-
* if (mouseButton === CENTER) {
758+
* if (mouseButton.center) {
752759
* triangle(23, 75, 50, 20, 78, 75);
753760
* }
754761
* }
755762
* }
756763
* </code>
757764
* </div>
758765
*/
759-
fn.mouseButton = 0;
766+
fn.mouseButton = {
767+
left: false,
768+
right: false,
769+
center: false
770+
};
760771

761772
/**
762773
* An `Array` of all the current touch points on a touchscreen device.
@@ -842,7 +853,7 @@ function pointer(p5, fn){
842853
* </div>
843854
*/
844855
fn.touches = [];
845-
fn._activeTouches = new Map();
856+
fn._activePointers = new Map();
846857

847858
/**
848859
* A `Boolean` system variable that's `true` if the mouse is pressed and
@@ -911,7 +922,7 @@ function pointer(p5, fn){
911922

912923
if (e.pointerType == 'touch') {
913924
const touches = [];
914-
for (const touch of this._activeTouches.values()) {
925+
for (const touch of this._activePointers.values()) {
915926
touches.push(getTouchInfo(canvas, sx, sy, touch));
916927
}
917928
this.touches = touches;
@@ -961,15 +972,18 @@ function pointer(p5, fn){
961972
};
962973
}
963974

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+
};
973987

974988
/**
975989
* A function that's called when the mouse moves.
@@ -1148,10 +1162,9 @@ function pointer(p5, fn){
11481162
const context = this._isGlobal ? window : this;
11491163
let executeDefault;
11501164
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+
11551168

11561169
if (!this.mouseIsPressed && typeof context.mouseMoved === 'function') {
11571170
executeDefault = context.mouseMoved(e);
@@ -1163,7 +1176,7 @@ function pointer(p5, fn){
11631176
if (executeDefault === false) {
11641177
e.preventDefault();
11651178
}
1166-
}
1179+
}
11671180
};
11681181

11691182
/**
@@ -1313,13 +1326,9 @@ function pointer(p5, fn){
13131326
let executeDefault;
13141327
this.mouseIsPressed = true;
13151328

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);
13231332

13241333
if (typeof context.mousePressed === 'function') {
13251334
executeDefault = context.mousePressed(e);
@@ -1477,9 +1486,8 @@ function pointer(p5, fn){
14771486
let executeDefault;
14781487
this.mouseIsPressed = false;
14791488

1480-
if(e.pointerType == 'touch'){
1481-
this._activeTouches.delete(e.pointerId);
1482-
}
1489+
this._activePointers.delete(e.pointerId);
1490+
this._setMouseButton(e);
14831491

14841492
this._updatePointerCoords(e);
14851493

src/webgl/interaction.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,10 +320,10 @@ function interaction(p5, fn){
320320
this._renderer.executeZoom = false;
321321
}
322322
if (this.mouseIsPressed) {
323-
if (this.mouseButton === this.LEFT) {
323+
if (this.mouseButton.left) {
324324
deltaTheta = -sensitivityX * this.movedX / scaleFactor;
325325
deltaPhi = sensitivityY * this.movedY / scaleFactor;
326-
} else if (this.mouseButton === this.RIGHT) {
326+
} else if (this.mouseButton.right) {
327327
moveDeltaX = this.movedX;
328328
moveDeltaY = this.movedY * cam.yScale;
329329
}

0 commit comments

Comments
 (0)