Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add/implement pc.EVENT_MOUSEOUT and pc.EVENT_MOUSEENTER #4920

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Add/implement pc.EVENT_MOUSEOUT and pc.EVENT_MOUSEENTER #4920

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7c582ab
Add/implement pc.EVENT_MOUSEOUT
kungfooman Dec 10, 2022
d8adc32
Update src/platform/input/constants.js: making it clear that we aren'…
kungfooman Dec 13, 2022
10d3655
Add EVENT_MOUSEENTER and rework to use Mouse#_target
kungfooman Dec 14, 2022
a2c8c28
Fix types
kungfooman Dec 14, 2022
3faf2ba
Fix lint
kungfooman Dec 14, 2022
6386212
Mouse#detach: fix mousein -> mouseenter ("opposite" of Mouse#attach)
kungfooman May 11, 2023
3ba5cc3
Update src/platform/input/constants.js
kungfooman May 11, 2023
2395405
@yaustar's suggestion with < 100 chars, GitHub is 500'ing
kungfooman May 11, 2023
6875316
Update src/platform/input/constants.js
kungfooman Jul 7, 2023
f7dbb3b
JSDoc retexting
kungfooman Jul 7, 2023
d7233cb
Fix lint
kungfooman Jul 8, 2023
5912854
Merge branch 'main' into eventMouseOut
mvaligursky Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/platform/input/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@ export const EVENT_MOUSEUP = 'mouseup';
*/
export const EVENT_MOUSEWHEEL = 'mousewheel';

/**
* Name of event fired when the mouse moves out or enters another element.
kungfooman marked this conversation as resolved.
Show resolved Hide resolved
*
* @type {string}
*/
export const EVENT_MOUSEOUT = 'mouseout';

/**
* Name of event fired when a new touch occurs. For example, a finger is placed on the device.
*
Expand Down
2 changes: 1 addition & 1 deletion src/platform/input/mouse-event.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class MouseEvent {
* @type {number}
*/
this.y = coords.y;
} else if (isMousePointerLocked()) {
} else if (isMousePointerLocked() || event.type === 'mouseout') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this necessary?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the same note, what values are coords.x/y on a mouse out event?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this necessary?

coords = mouse._getTargetCoords(event); returns null and then the constructor just ends here:

engine/src/platform/input/mouse-event.js

Lines 56 to 58 in 7c582ab

} else {
return;
}

Resulting in the entire event being "uninitialized".

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the same note, what values are coords.x/y on a mouse out event?

@yaustar There are two cases:

  1. When mouse is inside the canvas while entering another DOM element, mouseout is fired and then its the normal x/y
  2. When mouse leaves the window, _getTargetCoords returns null and x/y sticks to 0 (because _getTargetCoords returns some proper values).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see 🤔 This seems fine to me

this.x = 0;
this.y = 0;
} else {
Expand Down
12 changes: 11 additions & 1 deletion src/platform/input/mouse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { platform } from '../../core/platform.js';
import { EventHandler } from '../../core/event-handler.js';

import { EVENT_MOUSEDOWN, EVENT_MOUSEMOVE, EVENT_MOUSEUP, EVENT_MOUSEWHEEL } from './constants.js';
import { EVENT_MOUSEDOWN, EVENT_MOUSEMOVE, EVENT_MOUSEOUT, EVENT_MOUSEUP, EVENT_MOUSEWHEEL } from './constants.js';
import { isMousePointerLocked, MouseEvent } from './mouse-event.js';

/**
Expand Down Expand Up @@ -36,6 +36,7 @@ class Mouse extends EventHandler {
this._downHandler = this._handleDown.bind(this);
this._moveHandler = this._handleMove.bind(this);
this._wheelHandler = this._handleWheel.bind(this);
this._outHandler = this._handleOut.bind(this);
this._contextMenuHandler = (event) => {
event.preventDefault();
};
Expand Down Expand Up @@ -98,6 +99,7 @@ class Mouse extends EventHandler {
window.addEventListener('mouseup', this._upHandler, opts);
window.addEventListener('mousedown', this._downHandler, opts);
window.addEventListener('mousemove', this._moveHandler, opts);
window.addEventListener('mouseout', this._outHandler, opts);
window.addEventListener('wheel', this._wheelHandler, opts);
}

Expand All @@ -113,6 +115,7 @@ class Mouse extends EventHandler {
window.removeEventListener('mouseup', this._upHandler, opts);
window.removeEventListener('mousedown', this._downHandler, opts);
window.removeEventListener('mousemove', this._moveHandler, opts);
window.removeEventListener('mouseout', this._outHandler, opts);
window.removeEventListener('wheel', this._wheelHandler, opts);
}

Expand Down Expand Up @@ -289,6 +292,13 @@ class Mouse extends EventHandler {
this.fire(EVENT_MOUSEWHEEL, e);
}

_handleOut(event) {
const e = new MouseEvent(this, event);
if (!e.event) return;

this.fire(EVENT_MOUSEOUT, e);
}

_getTargetCoords(event) {
const rect = this._target.getBoundingClientRect();
const left = Math.floor(rect.left);
Expand Down