Merge pull request #474 from ehsan/mouselockmovement

Fix the mouse coordinates in pointer lock mode

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 6575c334..41898056 100644
--- a/src/library_sdl.js
+++ b/src/library_sdl.js
@@ -439,8 +439,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') }}};
@@ -453,8 +466,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;