make mouse events relative to canvas, and at right frequency

3 files changed, 36 insertions, 28 deletions

diff --git a/src/library_sdl.js b/src/library_sdl.js
index aafa1df8..63d6c9da 100644
--- a/src/library_sdl.js
+++ b/src/library_sdl.js
@@ -269,7 +269,7 @@ mergeInto(LibraryManager.library, {
 
     receiveEvent: function(event) {
       switch(event.type) {
-        case 'keydown': case 'keyup': case 'mousedown': case 'mouseup': case 'mouseover':
+        case 'keydown': case 'keyup': case 'mousedown': case 'mouseup': case 'mousemove':
           SDL.events.push(event);
           break;
       }
@@ -305,25 +305,27 @@ mergeInto(LibraryManager.library, {
 
           break;
         }
-        case 'mousedown': case 'mouseup': {
-          var down = event.type === 'mousedown';
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.type', 'down ? 0x401 : 0x402', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.button', 'event.button', 'i8') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.state', 'down ? 1 : 0', 'i8') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.x', 'event.clientX', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.y', 'event.clientY', 'i32') }}};
-          break;
-        }
-        case 'mouseover': {
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.type', '0x400', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.button', 'event.button', 'i8') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.state', 'down ? 1 : 0', 'i8') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.x', 'event.clientX', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.y', 'event.clientY', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.xrel', 'event.clientX - SDL.mouseX', 'i32') }}};
-          {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.yrel', 'event.clientY - SDL.mouseY', 'i32') }}};
-          SDL.mouseX = event.clientX;
-          SDL.mouseY = event.clientY;
+        case 'mousedown': case 'mouseup': case 'mousemove': {
+          var x = event.pageX - Module['canvas'].offsetLeft;
+          var y = event.pageY - Module['canvas'].offsetTop;
+          if (event.type != 'mousemove') {
+            var down = event.type === 'mousedown';
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.type', 'down ? 0x401 : 0x402', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.button', 'event.button', 'i8') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.state', 'down ? 1 : 0', 'i8') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.x', 'x', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseButtonEvent.y', 'y', 'i32') }}};
+          } else {
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.type', '0x400', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.button', 'event.button', 'i8') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.state', 'down ? 1 : 0', 'i8') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.x', 'x', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.y', 'y', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.xrel', 'x - SDL.mouseX', 'i32') }}};
+            {{{ makeSetValue('ptr', 'SDL.structs.MouseMotionEvent.yrel', 'y - SDL.mouseY', 'i32') }}};
+          }
+          SDL.mouseX = x;
+          SDL.mouseY = y;
           break;
         }
       default:
@@ -359,7 +361,7 @@ mergeInto(LibraryManager.library, {
   SDL_Init__deps: ['$SDL'],
   SDL_Init: function(what) {
     SDL.startTime = Date.now();
-    ['keydown', 'keyup', 'mousedown', 'mouseup', 'mouseover'].forEach(function(event) {
+    ['keydown', 'keyup'].forEach(function(event) {
       addEventListener(event, SDL.receiveEvent, true);
     });
     SDL.keyboardState = _malloc(0x10000);
@@ -389,6 +391,9 @@ mergeInto(LibraryManager.library, {
   },
 
   SDL_SetVideoMode: function(width, height, depth, flags) {
+    ['mousedown', 'mouseup', 'mousemove'].forEach(function(event) {
+      Module['canvas'].addEventListener(event, SDL.receiveEvent, true);
+    });
     Module['canvas'].width = width;
     Module['canvas'].height = height;
     return SDL.screen = SDL.makeSurface(width, height, flags, true, 'screen');
diff --git a/tests/runner.py b/tests/runner.py
index fa566c33..0106df5d 100755
--- a/tests/runner.py
+++ b/tests/runner.py
@@ -6416,23 +6416,23 @@ f.close()
           if (button) {
             var event1 = document.createEvent("MouseEvents");
             event1.initMouseEvent('mousedown', true, true, window,
-                       1, x, y, x, y,
+                       1, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y,
                        0, 0, 0, 0,
                        button, null);
-            dispatchEvent(event1);
+            Module['canvas'].dispatchEvent(event1);
             var event2 = document.createEvent("MouseEvents");
             event2.initMouseEvent('mouseup', true, true, window,
-                       1, x, y, x, y,
+                       1, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y,
                        0, 0, 0, 0,
                        button, null);
-            dispatchEvent(event2);
+            Module['canvas'].dispatchEvent(event2);
           } else {
             var event1 = document.createEvent("MouseEvents");
-            event1.initMouseEvent('mouseover', true, true, window,
-                       0, x, y, x, y,
+            event1.initMouseEvent('mousemove', true, true, window,
+                       0, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y, Module['canvas'].offsetLeft + x, Module['canvas'].offsetTop + y,
                        0, 0, 0, 0,
                        0, null);
-            dispatchEvent(event1);
+            Module['canvas'].dispatchEvent(event1);
           }
         }
       ''')
diff --git a/tests/sdl_mouse.c b/tests/sdl_mouse.c
index 87619ef2..eb731186 100644
--- a/tests/sdl_mouse.c
+++ b/tests/sdl_mouse.c
@@ -43,6 +43,9 @@ int main() {
   SDL_Init(SDL_INIT_VIDEO);
   SDL_Surface *screen = SDL_SetVideoMode(600, 450, 32, SDL_HWSURFACE);
 
+  SDL_Rect rect = { 0, 0, 600, 450 };
+  SDL_FillRect(screen, &rect, 0x2244ff00);
+
   emscripten_run_script("simulateMouseEvent(10, 20, 0)"); // move from 0,0 to 10,20
   emscripten_run_script("simulateMouseEvent(10, 20, 1)"); // click
   emscripten_run_script("simulateMouseEvent(30, 77, 0)"); // move some more