Skip to content

Commit 374cc96

Browse files
ksen0ksen0
authored
Merge pull request #8030 from processing/8022
mouse offscreen behaviors bugfix
2 parents c2343ba + 852162b commit 374cc96

File tree

4 files changed

+84
-13
lines changed

4 files changed

+84
-13
lines changed

‎src/accessibility/outputs.js

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -579,19 +579,17 @@ p5.prototype._getPos = function (x, y) {
579579
function _canvasLocator(args, canvasWidth, canvasHeight) {
580580
const noRows = 10;
581581
const noCols = 10;
582+
582583
let x = args[0];
583584
let y = args[1];
584-
if (x < 0 || x >= canvasWidth || y < 0 || y >= canvasHeight) {
585-
return null;
586-
}
585+
587586
let locX = Math.floor(x / canvasWidth * noRows);
588587
let locY = Math.floor(y / canvasHeight * noCols);
589-
if (locX === noRows) {
590-
locX = locX - 1;
591-
}
592-
if (locY === noCols) {
593-
locY = locY - 1;
594-
}
588+
589+
// clamp out of bounds values
590+
locX = Math.min(Math.max(locX, 0), noRows - 1);
591+
locY = Math.min(Math.max(locY, 0), noCols - 1);
592+
595593
return {
596594
locX,
597595
locY

‎src/events/mouse.js

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ import * as constants from '../core/constants';
1919
*
2020
* Note: `movedX` continues updating even when
2121
* <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
22+
* But keep in mind that during an active pointer lock, mouseX and pmouseX
23+
* are locked, so `movedX` is based on
24+
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX value</a>
25+
* (which may behave differently in different browsers when the user
26+
* is zoomed in or out).
2227
*
2328
* @property {Number} movedX
2429
* @readOnly
@@ -64,6 +69,11 @@ p5.prototype.movedX = 0;
6469
*
6570
* Note: `movedY` continues updating even when
6671
* <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
72+
* But keep in mind that during an active pointer lock, mouseX and pmouseX
73+
* are locked, so `movedX` is based on
74+
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX value</a>
75+
* (which may behave differently in different browsers when the user
76+
* is zoomed in or out).
6777
*
6878
* @property {Number} movedY
6979
* @readOnly
@@ -810,15 +820,31 @@ p5.prototype._updateNextMouseCoords = function(e) {
810820
e
811821
);
812822

823+
813824
this._setProperty('mouseX', mousePos.x);
814825
this._setProperty('mouseY', mousePos.y);
815826
this._setProperty('winMouseX', mousePos.winX);
816827
this._setProperty('winMouseY', mousePos.winY);
817828

818-
const deltaX = this.mouseX - this.pmouseX;
819-
const deltaY = this.mouseY - this.pmouseY;
820-
this._setProperty('movedX', deltaX);
821-
this._setProperty('movedY', deltaY);
829+
if (document.pointerLockElement === null) {
830+
// https://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
831+
// "The pointerLockElement ... is null if lock is pending, pointer is unlocked,
832+
// or the target is in another document."
833+
// In this case, we use mouseX/Y and pmouseX/Y to calculate the distance,
834+
// which allows movedX/Y to look consistent at different zoom levels across
835+
// browsers.
836+
const deltaX = this.mouseX - this.pmouseX;
837+
const deltaY = this.mouseY - this.pmouseY;
838+
this._setProperty('movedX', deltaX);
839+
this._setProperty('movedY', deltaY);
840+
}
841+
else {
842+
// Because mouseX/Y and pmouseX/Y are locked, the elements movementX/Y
843+
// is used for movedX/Y - this may behave differently on different
844+
// browsers at different zoom levels.
845+
this._setProperty('movedX', e.movementX);
846+
this._setProperty('movedY', e.movementY);
847+
}
822848
}
823849

824850
if (!this._hasMouseInteracted) {

‎test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
5+
</head>
6+
7+
<body>
8+
<h1>Manual test for movedX/Y with/without zoom and with/without pointer lock</h1>
9+
<ul>
10+
<li>If you move the mouse around, you should see 1 moving circle and 1 still. While <strong>dragging mouse</strong>, they should move at the same rate.</li>
11+
<li>After zooming in/out, on all browsers, the circles should still move visually a constant distance relative to each other.</li>
12+
<li>Press any key to request pointer lock. Background will be pink if and only if pointer is locked. Now, if you <strong>drag the mouse</strong>, the small circle should be static (because mouseX/Y are locked) and the big circle should move unsurprisingly.</li>
13+
</ul>
14+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
15+
</body>
16+
</html>

‎test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
function setup() {
2+
createCanvas(400, 400);
3+
}
4+
5+
let x = 200;
6+
let y = 200;
7+
function draw() {
8+
if (document.pointerLockElement === null){
9+
background(220);
10+
} else{
11+
background(200,0,200);
12+
}
13+
14+
text(movedX, 20, 20);
15+
text(movedY, 20, 40);
16+
text(mouseX, 50, 20);
17+
text(mouseY, 50, 40);
18+
circle(mouseX, mouseY, 30);
19+
20+
//https://editor.p5js.org/SableRaf/sketches/zAXl3tNm5
21+
if(mouseIsPressed){
22+
x += movedX;
23+
y += movedY;
24+
}
25+
26+
circle(x, y, 50);
27+
28+
}
29+
function keyPressed() {
30+
requestPointerLock();
31+
}

0 commit comments

Comments
 (0)