Fix the mouse coordinates in pointer lock mode

This patch enables us to trust the mouse movement information that the
browser provides when the pointer lock is active.  It should help with
the mouse movement detection for games in full-screen mode, if they use
the SDL xrel/yrel information.

2 files changed, 21 insertions, 10 deletions

diff --git a/src/library_browser.js b/src/library_browser.js
index 59d37336..9283913f 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -128,20 +128,18 @@ mergeInto(LibraryManager.library, {
       window.requestAnimationFrame(func);
     },
 
-    getMovementX: function(delta, event) {
-      if (!Browser.pointerLock) return delta;
+    getMovementX: function(event) {
       return event['movementX'] ||
              event['mozMovementX'] ||
              event['webkitMovementX'] ||
-             0; // delta;
+             0;
     },
 
-    getMovementY: function(delta, event) {
-      if (!Browser.pointerLock) return delta;
+    getMovementY: function(event) {
       return event['movementY'] ||
              event['mozMovementY'] ||
              event['webkitMovementY'] ||
-             0; // delta;
+             0;
     },
 
     asyncLoad: function(url, callback) {
diff --git a/src/library_sdl.js b/src/library_sdl.js
index 35487e4e..e940cffa 100644
--- a/src/library_sdl.js
+++ b/src/library_sdl.js
@@ -434,8 +434,21 @@ var LibrarySDL = {
           }
           // fall through
         case 'mousemove': {
-          var x = event.pageX - Module['canvas'].offsetLeft;
-          var y = event.pageY - Module['canvas'].offsetTop;
+          if (Browser.pointerLock) {
+            // When the pointer is locked, calculate the coordinates
+            // based on the movement of the mouse.
+            var movementX = Browser.getMovementX(event);
+            var movementY = Browser.getMovementY(event);
+            var x = SDL.mouseX + movementX;
+            var y = SDL.mouseY + movementY;
+          } else {
+            // Otherwise, calculate the movement based on the changes
+            // in the coordinates.
+            var x = event.pageX - Module["canvas"].offsetLeft;
+            var y = event.pageY - Module["canvas"].offsetTop;
+            var movementX = x - SDL.mouseX;
+            var movementY = y - SDL.mouseY;
+          }
           if (event.type != 'mousemove') {
             var down = event.type === 'mousedown';
             {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.type', 'SDL.DOMEventToSDLEvent[event.type]', 'i32') }}};
@@ -448,8 +461,8 @@ var LibrarySDL = {
             {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.state', 'SDL.buttonState', 'i8') }}};
             {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.x', 'x', 'i32') }}};
             {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.y', 'y', 'i32') }}};
-            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.xrel', 'Browser.getMovementX(x - SDL.mouseX, event)', 'i32') }}};
-            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.yrel', 'Browser.getMovementY(y - SDL.mouseY, event)', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.xrel', 'movementX', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.yrel', 'movementY', 'i32') }}};
           }
           SDL.mouseX = x;
           SDL.mouseY = y;