From 7c582ab58e69ae21291771b586910a9e52bf4b62 Mon Sep 17 00:00:00 2001 From: kungfooman Date: Sat, 10 Dec 2022 11:42:09 +0100 Subject: [PATCH 01/11] Add/implement pc.EVENT_MOUSEOUT --- src/platform/input/constants.js | 7 +++++++ src/platform/input/mouse-event.js | 2 +- src/platform/input/mouse.js | 12 +++++++++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 0a5849d40a8..3bd6118a80c 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -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. + * + * @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. * diff --git a/src/platform/input/mouse-event.js b/src/platform/input/mouse-event.js index 1123dea1d82..233ce7c7841 100644 --- a/src/platform/input/mouse-event.js +++ b/src/platform/input/mouse-event.js @@ -50,7 +50,7 @@ class MouseEvent { * @type {number} */ this.y = coords.y; - } else if (isMousePointerLocked()) { + } else if (isMousePointerLocked() || event.type === 'mouseout') { this.x = 0; this.y = 0; } else { diff --git a/src/platform/input/mouse.js b/src/platform/input/mouse.js index 0275e0852c2..b68016dcfff 100644 --- a/src/platform/input/mouse.js +++ b/src/platform/input/mouse.js @@ -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'; /** @@ -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(); }; @@ -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); } @@ -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); } @@ -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); From d8adc329e49b428decd638e5b79f2a1128e072d9 Mon Sep 17 00:00:00 2001 From: Hermann Rolfes Date: Tue, 13 Dec 2022 14:43:45 +0100 Subject: [PATCH 02/11] Update src/platform/input/constants.js: making it clear that we aren't talking about pc Elements Co-authored-by: Steven --- src/platform/input/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 3bd6118a80c..38b9215acf3 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -53,7 +53,7 @@ export const EVENT_MOUSEUP = 'mouseup'; export const EVENT_MOUSEWHEEL = 'mousewheel'; /** - * Name of event fired when the mouse moves out or enters another element. + * Name of event fired when the mouse moves out or enters another DOM element. * * @type {string} */ From 10d36551c1fdc6d25480589caba278741212813d Mon Sep 17 00:00:00 2001 From: kungfooman Date: Wed, 14 Dec 2022 12:26:53 +0100 Subject: [PATCH 03/11] Add EVENT_MOUSEENTER and rework to use Mouse#_target --- src/platform/input/constants.js | 7 +++++++ src/platform/input/mouse.js | 18 ++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 38b9215acf3..ece9b74657e 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -59,6 +59,13 @@ export const EVENT_MOUSEWHEEL = 'mousewheel'; */ export const EVENT_MOUSEOUT = 'mouseout'; +/** + * Name of event fired when the mouse moves out or enters another DOM element. + * + * @type {string} + */ +export const EVENT_MOUSEENTER = 'mouseenter'; + /** * Name of event fired when a new touch occurs. For example, a finger is placed on the device. * diff --git a/src/platform/input/mouse.js b/src/platform/input/mouse.js index b68016dcfff..412515c5fbb 100644 --- a/src/platform/input/mouse.js +++ b/src/platform/input/mouse.js @@ -1,7 +1,7 @@ import { platform } from '../../core/platform.js'; import { EventHandler } from '../../core/event-handler.js'; -import { EVENT_MOUSEDOWN, EVENT_MOUSEMOVE, EVENT_MOUSEOUT, EVENT_MOUSEUP, EVENT_MOUSEWHEEL } from './constants.js'; +import { EVENT_MOUSEDOWN, EVENT_MOUSEENTER, EVENT_MOUSEMOVE, EVENT_MOUSEOUT, EVENT_MOUSEUP, EVENT_MOUSEWHEEL } from './constants.js'; import { isMousePointerLocked, MouseEvent } from './mouse-event.js'; /** @@ -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._enterHandler = this._handleEnter.bind(this); this._outHandler = this._handleOut.bind(this); this._contextMenuHandler = (event) => { event.preventDefault(); @@ -99,8 +100,9 @@ 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); + element.addEventListener('mouseenter', this._enterHandler, opts); + element.addEventListener('mouseout', this._outHandler, opts); } /** @@ -109,14 +111,15 @@ class Mouse extends EventHandler { detach() { if (!this._attached) return; this._attached = false; - this._target = null; const opts = platform.passiveEvents ? { passive: false } : false; 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); + this._target.removeEventListener('mousein', this._enterHandler, opts); + this._target.removeEventListener('mouseout', this._outHandler, opts); + this._target = null; } /** @@ -292,6 +295,13 @@ class Mouse extends EventHandler { this.fire(EVENT_MOUSEWHEEL, e); } + _handleEnter(event) { + const e = new MouseEvent(this, event); + if (!e.event) return; + + this.fire(EVENT_MOUSEENTER, e); + } + _handleOut(event) { const e = new MouseEvent(this, event); if (!e.event) return; From a2c8c288c4944ce889c337977a52025a62d356ba Mon Sep 17 00:00:00 2001 From: kungfooman Date: Wed, 14 Dec 2022 17:27:44 +0100 Subject: [PATCH 04/11] Fix types --- src/platform/input/mouse.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/platform/input/mouse.js b/src/platform/input/mouse.js index 412515c5fbb..fd05d8d6b19 100644 --- a/src/platform/input/mouse.js +++ b/src/platform/input/mouse.js @@ -16,6 +16,11 @@ import { isMousePointerLocked, MouseEvent } from './mouse-event.js'; * @augments EventHandler */ class Mouse extends EventHandler { + /** + * @type {Element|null} + * @private + */ + _target; /** * Create a new Mouse instance. * @@ -88,7 +93,7 @@ class Mouse extends EventHandler { /** * Attach mouse events to an Element. * - * @param {Element} element - The DOM element to attach the mouse to. + * @param {Element} [element] - The DOM element to attach the mouse to. */ attach(element) { this._target = element; @@ -101,8 +106,10 @@ class Mouse extends EventHandler { window.addEventListener('mousedown', this._downHandler, opts); window.addEventListener('mousemove', this._moveHandler, opts); window.addEventListener('wheel', this._wheelHandler, opts); - element.addEventListener('mouseenter', this._enterHandler, opts); - element.addEventListener('mouseout', this._outHandler, opts); + if (element) { + element.addEventListener('mouseenter', this._enterHandler, opts); + element.addEventListener('mouseout', this._outHandler, opts); + } } /** @@ -117,9 +124,11 @@ class Mouse extends EventHandler { window.removeEventListener('mousedown', this._downHandler, opts); window.removeEventListener('mousemove', this._moveHandler, opts); window.removeEventListener('wheel', this._wheelHandler, opts); - this._target.removeEventListener('mousein', this._enterHandler, opts); - this._target.removeEventListener('mouseout', this._outHandler, opts); - this._target = null; + if (this._target) { + this._target.removeEventListener('mousein', this._enterHandler, opts); + this._target.removeEventListener('mouseout', this._outHandler, opts); + this._target = null; + } } /** From 3faf2ba98f3b6217e9567529c74fbdd253881b06 Mon Sep 17 00:00:00 2001 From: kungfooman Date: Wed, 14 Dec 2022 17:36:53 +0100 Subject: [PATCH 05/11] Fix lint --- src/platform/input/mouse.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/input/mouse.js b/src/platform/input/mouse.js index fd05d8d6b19..2c90dcd9df9 100644 --- a/src/platform/input/mouse.js +++ b/src/platform/input/mouse.js @@ -21,6 +21,7 @@ class Mouse extends EventHandler { * @private */ _target; + /** * Create a new Mouse instance. * From 63862126daecf49caebdf59be5497843958e5160 Mon Sep 17 00:00:00 2001 From: kungfooman Date: Thu, 11 May 2023 15:13:04 +0200 Subject: [PATCH 06/11] Mouse#detach: fix mousein -> mouseenter ("opposite" of Mouse#attach) --- src/platform/input/mouse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/input/mouse.js b/src/platform/input/mouse.js index 2c90dcd9df9..d5cdb4f98cc 100644 --- a/src/platform/input/mouse.js +++ b/src/platform/input/mouse.js @@ -126,7 +126,7 @@ class Mouse extends EventHandler { window.removeEventListener('mousemove', this._moveHandler, opts); window.removeEventListener('wheel', this._wheelHandler, opts); if (this._target) { - this._target.removeEventListener('mousein', this._enterHandler, opts); + this._target.removeEventListener('mouseenter', this._enterHandler, opts); this._target.removeEventListener('mouseout', this._outHandler, opts); this._target = null; } From 3ba5cc363c6d41261711b1e133d9a81bbda85b62 Mon Sep 17 00:00:00 2001 From: Hermann Rolfes Date: Thu, 11 May 2023 15:43:05 +0200 Subject: [PATCH 07/11] Update src/platform/input/constants.js Co-authored-by: Steven --- src/platform/input/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index ece9b74657e..85a90b1309e 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -53,7 +53,7 @@ export const EVENT_MOUSEUP = 'mouseup'; export const EVENT_MOUSEWHEEL = 'mousewheel'; /** - * Name of event fired when the mouse moves out or enters another DOM element. + * Name of event fired when the mouse moves out or enters another DOM element. This can fire on entering a defocused PlayCanvas browser window so you may want to check for focus with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. * * @type {string} */ From 2395405363c03e4b753e7e26fd8f06e3b76544a9 Mon Sep 17 00:00:00 2001 From: kungfooman Date: Thu, 11 May 2023 15:56:20 +0200 Subject: [PATCH 08/11] @yaustar's suggestion with < 100 chars, GitHub is 500'ing --- src/platform/input/constants.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 85a90b1309e..a2965f479c9 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -53,7 +53,9 @@ export const EVENT_MOUSEUP = 'mouseup'; export const EVENT_MOUSEWHEEL = 'mousewheel'; /** - * Name of event fired when the mouse moves out or enters another DOM element. This can fire on entering a defocused PlayCanvas browser window so you may want to check for focus with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. + * Name of event fired when the mouse moves out or enters another DOM element. This can + * fire on entering an unfocused PlayCanvas browser window so you may want to check for focus + * with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. * * @type {string} */ From 68753167dbcaed58b3b1ec337e2f1774d06c041e Mon Sep 17 00:00:00 2001 From: Hermann Rolfes Date: Fri, 7 Jul 2023 17:39:05 +0200 Subject: [PATCH 09/11] Update src/platform/input/constants.js Co-authored-by: Will Eastcott --- src/platform/input/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index a2965f479c9..3de7bb461c2 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -54,7 +54,7 @@ export const EVENT_MOUSEWHEEL = 'mousewheel'; /** * Name of event fired when the mouse moves out or enters another DOM element. This can - * fire on entering an unfocused PlayCanvas browser window so you may want to check for focus + * fires on entering an unfocused PlayCanvas browser window so you may want to check for focus * with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. * * @type {string} From f7dbb3b8f755e7a18993d6589def541fcb36974c Mon Sep 17 00:00:00 2001 From: kungfooman Date: Fri, 7 Jul 2023 18:06:14 +0200 Subject: [PATCH 10/11] JSDoc retexting --- src/platform/input/constants.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 3de7bb461c2..77e9f05417e 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -53,16 +53,22 @@ export const EVENT_MOUSEUP = 'mouseup'; export const EVENT_MOUSEWHEEL = 'mousewheel'; /** - * Name of event fired when the mouse moves out or enters another DOM element. This can - * fires on entering an unfocused PlayCanvas browser window so you may want to check for focus - * with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. + * Name of event fired when the mouse moves out of `Mouse#_target`. + * + * This also fires upon: + * - entering DOM elements on top of `Mouse#_target` + * - moving out of an unfocused PlayCanvas browser window so you may want to check for focus + * with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. * * @type {string} */ export const EVENT_MOUSEOUT = 'mouseout'; /** - * Name of event fired when the mouse moves out or enters another DOM element. + * Name of event fired when the mouse enters `Mouse#_target`. + * + * This also fires upon entering an unfocused PlayCanvas browser window so you may want to check for focus + * with {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus document.hasFocus()}. * * @type {string} */ From d7233cbc1f0985848e2caa02edfb0cacd2fa9c2e Mon Sep 17 00:00:00 2001 From: kungfooman Date: Sat, 8 Jul 2023 15:37:58 +0200 Subject: [PATCH 11/11] Fix lint --- src/platform/input/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/input/constants.js b/src/platform/input/constants.js index 77e9f05417e..fbad25ebf0e 100644 --- a/src/platform/input/constants.js +++ b/src/platform/input/constants.js @@ -54,7 +54,7 @@ export const EVENT_MOUSEWHEEL = 'mousewheel'; /** * Name of event fired when the mouse moves out of `Mouse#_target`. - * + * * This also fires upon: * - entering DOM elements on top of `Mouse#_target` * - moving out of an unfocused PlayCanvas browser window so you may want to check for focus