melonjs 10.2.2 → 10.4.0

package/src/input/pointer.js

@@ -3,6 +3,7 @@ import device from "./../system/device.js";
 import Bounds from "./../physics/bounds.js";
 import { viewport } from "./../game.js";
 import { globalToLocal } from "./input.js";
+import { locked } from "./pointerevent.js";
 
 
 /**
@@ -15,9 +16,7 @@ var tmpVec = new Vector2d();
  * @classdesc
  * a pointer object, representing a single finger on a touch enabled device.
  * @class Pointer
- * @extends me.Bounds
- * @memberOf me
- * @constructor
+ * @augments Bounds
  */
 class Pointer extends Bounds {
 
@@ -37,7 +36,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name LEFT
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.LEFT = 0;
 
@@ -46,7 +45,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name MIDDLE
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.MIDDLE = 1;
 
@@ -55,7 +54,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name RIGHT
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.RIGHT = 2;
 
@@ -67,7 +66,7 @@ class Pointer extends Bounds {
          * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent
          * @see https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
          * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.event = undefined;
 
@@ -77,7 +76,7 @@ class Pointer extends Bounds {
          * @type {string}
          * @name type
          * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/type
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.type = undefined;
 
@@ -88,7 +87,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name button
          * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.button = 0;
 
@@ -98,7 +97,7 @@ class Pointer extends Bounds {
          * @type {boolean}
          * @name isPrimary
          * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.isPrimary = false;
 
@@ -108,7 +107,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name pageX
          * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.pageX = 0;
 
@@ -118,7 +117,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name pageY
          * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.pageY = 0;
 
@@ -128,7 +127,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name clientX
          * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.clientX = 0;
 
@@ -138,17 +137,37 @@ class Pointer extends Bounds {
         * @type {number}
         * @name clientY
         * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY
-        * @memberOf me.Pointer
+        * @memberof Pointer
         */
         this.clientY = 0;
 
+        /**
+         * the difference in the X coordinate of the pointer since the previous move event
+         * @public
+         * @type {number}
+         * @name movementX
+         * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+         * @memberof Pointer
+         */
+        this.movementX = 0;
+
+       /**
+        * the difference in the Y coordinate of the pointer since the previous move event
+        * @public
+        * @type {number}
+        * @name movementY
+        * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
+        * @memberof Pointer
+        */
+        this.movementY = 0;
+
         /**
          * an unsigned long representing the unit of the delta values scroll amount
          * @public
          * @type {number}
          * @name deltaMode
          * @see https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.deltaMode = 0;
 
@@ -158,7 +177,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name deltaX
          * @see https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.deltaX = 0;
 
@@ -168,7 +187,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name deltaY
          * @see https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.deltaY = 0;
 
@@ -178,7 +197,7 @@ class Pointer extends Bounds {
          * @type {number}
          * @name deltaZ
          * @see https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.deltaZ = 0;
 
@@ -188,7 +207,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameX = 0;
 
@@ -198,7 +217,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameY = 0;
 
@@ -207,7 +226,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameScreenX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameScreenX = 0;
 
@@ -216,7 +235,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameScreenY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameScreenY = 0;
 
@@ -225,7 +244,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameWorldX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameWorldX = 0;
 
@@ -234,7 +253,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameWorldY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameWorldY = 0;
 
@@ -243,7 +262,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameLocalX
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameLocalX = 0;
 
@@ -252,7 +271,7 @@ class Pointer extends Bounds {
          * @public
          * @type {number}
          * @name gameLocalY
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.gameLocalY = 0;
 
@@ -261,7 +280,7 @@ class Pointer extends Bounds {
         * @public
         * @type {number}
         * @name pointerId
-        * @memberOf me.Pointer
+        * @memberof Pointer
         * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId
         */
         this.pointerId = undefined;
@@ -271,17 +290,26 @@ class Pointer extends Bounds {
          * @public
          * @type {boolean}
          * @name isNormalized
-         * @memberOf me.Pointer
+         * @memberof Pointer
          */
         this.isNormalized = false;
 
+        /**
+         * true if the pointer is currently locked
+         * @public
+         * @type {boolean}
+         * @name locked
+         * @memberof Pointer
+         */
+        this.locked = false;
+
         // bind list for mouse buttons
         this.bind = [ 0, 0, 0 ];
     }
 
     /**
      * initialize the Pointer object using the given Event Object
-     * @name me.Pointer#set
+     * @name Pointer#set
      * @private
      * @function
      * @param {Event} event the original Event object
@@ -308,6 +336,10 @@ class Pointer extends Bounds {
         // true if not originally a pointer event
         this.isNormalized = !device.PointerEvent || (device.PointerEvent && !(event instanceof window.PointerEvent));
 
+        this.locked = locked;
+        this.movementX = event.movementX || 0;
+        this.movementY = event.movementY || 0;
+
         if (event.type === "wheel") {
             this.deltaMode = event.deltaMode || 0;
             this.deltaX = event.deltaX || 0;

package/src/input/pointerevent.js

@@ -1,20 +1,20 @@
 import {preventDefault} from "./input.js";
 import {getBindingKey, triggerKeyEvent} from "./keyboard.js";
-import { renderer, scaleRatio } from "./../video/video.js";
-import * as fctUtil from "./../utils/function.js";
-import * as arrayUtil from "./../utils/array.js";
+import { renderer, scaleRatio, getParent } from "./../video/video.js";
+import { throttle } from "./../utils/function.js";
+import { remove } from "./../utils/array.js";
 import * as event from "./../system/event.js";
 import timer from "./../system/timer.js";
 import pool from "./../system/pooling.js";
 import device from "./../system/device.js";
 import Pointer from "./pointer.js";
-import Rect from "./../shapes/rectangle.js";
+import Rect from "./../geometries/rectangle.js";
 import Container from "./../renderable/container.js";
 import { world, viewport } from "./../game.js";
 
 /**
  * A pool of `Pointer` objects to cache pointer/touch event coordinates.
- * @type {Array.<me.Vector2d>}
+ * @type {Array.<Vector2d>}
  * @ignore
  */
 var T_POINTERS = [];
@@ -178,7 +178,7 @@ function enablePointerEvent() {
                 if (activeEventList.indexOf(events[i]) !== -1) {
                     pointerEventTarget.addEventListener(
                         events[i],
-                        fctUtil.throttle(
+                        throttle(
                             onMoveEvent,
                             throttlingInterval,
                             false
@@ -191,6 +191,17 @@ function enablePointerEvent() {
         // disable all gesture by default
         setTouchAction(pointerEventTarget);
 
+        // set a on change listener on pointerlock if supported
+        if (device.hasPointerLockSupport) {
+            document.addEventListener("pointerlockchange", () => {
+                // change the locked status accordingly
+                locked = document.pointerLockElement === getParent();
+                // emit the corresponding internal event
+                event.emit(event.POINTERLOCKCHANGE, locked);
+            }, true);
+        }
+
+        // all done !
         pointerInitialized = true;
     }
 }
@@ -492,19 +503,29 @@ function onPointerEvent(e) {
   * @public
   * @type {EventTarget}
   * @name pointerEventTarget
-  * @memberOf me.input
+  * @memberof input
   */
  export var pointerEventTarget = null;
 
 /**
  * Pointer information (current position and size)
  * @public
- * @type {me.Rect}
+ * @type {Rect}
  * @name pointer
- * @memberOf me.input
+ * @memberof input
  */
 export var pointer = new Pointer(0, 0, 1, 1);
 
+
+/**
+ * indicates if the pointer is currently locked
+ * @public
+ * @type {boolean}
+ * @name locked
+ * @memberof input
+ */
+export var locked = false;
+
 /**
  * time interval for event throttling in milliseconds<br>
  * default value : "1000/me.timer.maxfps" ms<br>
@@ -512,7 +533,7 @@ export var pointer = new Pointer(0, 0, 1, 1);
  * @public
  * @type {number}
  * @name throttlingInterval
- * @memberOf me.input
+ * @memberof input
  */
 export var throttlingInterval;
 
@@ -520,13 +541,13 @@ export var throttlingInterval;
  * Translate the specified x and y values from the global (absolute)
  * coordinate to local (viewport) relative coordinate.
  * @name globalToLocal
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
  * @param {number} x the global x coordinate to be translated.
  * @param {number} y the global y coordinate to be translated.
- * @param {me.Vector2d} [v] an optional vector object where to set the translated coordinates
- * @returns {me.Vector2d} A vector object with the corresponding translated coordinates
+ * @param {Vector2d} [v] an optional vector object where to set the translated coordinates
+ * @returns {Vector2d} A vector object with the corresponding translated coordinates
  * @example
  * onMouseEvent : function (pointer) {
  *    // convert the given into local (viewport) relative coordinates
@@ -552,7 +573,7 @@ export function globalToLocal(x, y, v) {
  * enable/disable all gestures on the given element.<br>
  * by default melonJS will disable browser handling of all panning and zooming gestures.
  * @name setTouchAction
- * @memberOf me.input
+ * @memberof input
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
  * @public
  * @function
@@ -569,11 +590,11 @@ export function setTouchAction(element, value) {
  * Middle button – 1
  * Right button – 2
  * @name bindPointer
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
- * @param {number} [button=me.input.pointer.LEFT] (accordingly to W3C values : 0,1,2 for left, middle and right buttons)
- * @param {me.input.KEY} keyCode
+ * @param {number} [button=input.pointer.LEFT] (accordingly to W3C values : 0,1,2 for left, middle and right buttons)
+ * @param {input.KEY} keyCode
  * @example
  * // enable the keyboard
  * me.input.bindKey(me.input.KEY.X, "shoot");
@@ -600,10 +621,10 @@ export function bindPointer() {
 /**
  * unbind the defined keycode
  * @name unbindPointer
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
- * @param {number} [button=me.input.pointer.LEFT] (accordingly to W3C values : 0,1,2 for left, middle and right buttons)
+ * @param {number} [button=input.pointer.LEFT] (accordingly to W3C values : 0,1,2 for left, middle and right buttons)
  * @example
  * me.input.unbindPointer(me.input.pointer.LEFT);
  */
@@ -619,10 +640,10 @@ export function unbindPointer(button) {
 /**
  * allows registration of event listeners on the object target. <br>
  * melonJS will pass a me.Pointer object to the defined callback.
- * @see me.Pointer
+ * @see Pointer
  * @see {@link http://www.w3.org/TR/pointerevents/#list-of-pointer-events|W3C Pointer Event list}
  * @name registerPointerEvent
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
  * @param {string} eventType The event type for which the object is registering <br>
@@ -637,7 +658,7 @@ export function unbindPointer(button) {
  *   <li><code>"pointercancel"</code></li>
  *   <li><code>"wheel"</code></li>
  * </ul>
- * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} region a shape representing the region to register on
+ * @param {Rect|Polygon|Line|Ellipse} region a shape representing the region to register on
  * @param {Function} callback methods to be called when the event occurs.
  * Returning `false` from the defined callback will prevent the event to be propagated to other objects
  * @example
@@ -694,11 +715,11 @@ export function registerPointerEvent(eventType, region, callback) {
  * allows the removal of event listeners from the object target.
  * @see {@link http://www.w3.org/TR/pointerevents/#list-of-pointer-events|W3C Pointer Event list}
  * @name releasePointerEvent
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
- * @param {string} eventType The event type for which the object was registered. See {@link me.input.registerPointerEvent}
- * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} region the registered region to release for this event
+ * @param {string} eventType The event type for which the object was registered. See {@link input.registerPointerEvent}
+ * @param {Rect|Polygon|Line|Ellipse} region the registered region to release for this event
  * @param {Function} [callback="all"] if specified unregister the event only for the specific callback
  * @example
  * // release the registered region on the 'pointerdown' event
@@ -718,7 +739,7 @@ export function releasePointerEvent(eventType, region, callback) {
             eventType = eventTypes[i];
             if (handlers.callbacks[eventType]) {
                 if (typeof (callback) !== "undefined") {
-                    arrayUtil.remove(handlers.callbacks[eventType], callback);
+                    remove(handlers.callbacks[eventType], callback);
                 } else {
                     while (handlers.callbacks[eventType].length > 0) {
                         handlers.callbacks[eventType].pop();
@@ -739,10 +760,10 @@ export function releasePointerEvent(eventType, region, callback) {
 /**
  * allows the removal of all registered event listeners from the object target.
  * @name releaseAllPointerEvents
- * @memberOf me.input
+ * @memberof input
  * @public
  * @function
- * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} region the registered region to release event from
+ * @param {Rect|Polygon|Line|Ellipse} region the registered region to release event from
  * @example
  * // release all registered event on the
  * me.input.releaseAllPointerEvents(this);
@@ -750,7 +771,49 @@ export function releasePointerEvent(eventType, region, callback) {
 export function releaseAllPointerEvents(region) {
     if (eventHandlers.has(region)) {
         for (var i = 0; i < pointerEventList.length; i++) {
-            this.releasePointerEvent(pointerEventList[i], region);
+            releasePointerEvent(pointerEventList[i], region);
         }
     };
 };
+
+/**
+ * request for the pointer to be locked on the parent DOM element.
+ * (Must be called in a click event or an event that requires user interaction)
+ * @name requestPointerLock
+ * @memberof input
+ * @public
+ * @function
+ * @param {Function} [success] callback if the request is successful
+ * @returns {boolean} return true if the request was successfully submitted
+ * @example
+ * // register on the pointer lock change event
+ * event.on(event.POINTERLOCKCHANGE, (locked)=> {
+ *     console.log("pointer lock: " + locked);
+ * });
+ * // request for pointer lock
+ * me.input.requestPointerLock();
+ */
+export function requestPointerLock() {
+    if (device.hasPointerLockSupport) {
+        var element = getParent();
+        element.requestPointerLock();
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Initiates an exit from pointer lock state
+ * @name exitPointerLock
+ * @memberof input
+ * @public
+ * @function
+ * @returns {boolean} return true if the request was successfully submitted
+ */
+export function exitPointerLock() {
+    if (device.hasPointerLockSupport) {
+        document.exitPointerLock();
+        return true;
+    }
+    return false;
+}

package/src/lang/deprecated.js

@@ -1,15 +1,15 @@
+import device from "./../system/device.js";
+import { requestPointerLock, exitPointerLock } from "./../input/input.js";
+import { TextureAtlas } from "./../video/texture.js";
+import Renderer from "./../video/renderer.js";
+
 /**
  * placeholder for all deprecated classes and corresponding alias for backward compatibility
- * @namespace deprecated
- * @memberOf me
  */
 
 /**
  * display a deprecation warning in the console
- * @public
- * @function
- * @memberOf me.deprecated
- * @name warning
+ * @ignore
  * @param {string} deprecated deprecated class,function or property name
  * @param {string} replacement the replacement class, function, or property name
  * @param {string} version the version since when the lass,function or property is deprecated
@@ -42,17 +42,47 @@ export function warning(deprecated, replacement, version) {
     if (console.groupCollapsed) {
         console.groupEnd();
     }
+};
 
-
+/**
+ * @public
+ * @type {Function}
+ * @name turnOnPointerLock
+ * @memberof device
+ * @deprecated since 10.3.0
+ * @see input.requestPointerLock
+ */
+device.turnOnPointerLock = function () {
+    warning("device.turnOnPointerLock()", "input.requestPointerLock()", "10.3.0");
+    return requestPointerLock();
 };
 
+/**
+ * @public
+ * @type {Function}
+ * @name turnOffPointerLock
+ * @memberof device
+ * @deprecated since 10.3.0
+ * @see input.exitPointerLock
+ */
+device.turnOffPointerLock = function () {
+    warning("device.turnOffPointerLock()", "input.exitPointerLock()", "10.3.0");
+    return exitPointerLock();
+};
 
 /**
- * Backward compatibility for deprecated method or properties are automatically
- * applied when automatically generating an UMD bundle (which is the default since version 9.0).
- * @memberof me.deprecated
- * @function apply
+ * @public
+ * @name Texture
+ * @memberof Renderer
+ * @deprecated since 10.4.0
+ * @see TextureAtlas
  */
- export function apply() {
-     ;
- };
+Object.defineProperty(Renderer.prototype, "Texture", {
+    /**
+     * @ignore
+     */
+    get : function () {
+        warning("me.video.renderer.Texture", "me.TextureAtlas", "10.4.0");
+        return TextureAtlas;
+    }
+});