Add/implement pc.EVENT_MOUSEOUT

Author: kungfooman

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.
  *

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 {

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