Bring back old style SDL scroll events represented as mouse buttons; Support newer 'wheel' event to support Chrome; Support vertical as well as horizontal deltas.

2 files changed, 56 insertions, 13 deletions

diff --git a/src/library_browser.js b/src/library_browser.js
index 44e8c473..4593f203 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -478,7 +478,22 @@ mergeInto(LibraryManager.library, {
     },
 
     getMouseWheelDelta: function(event) {
-      return Math.max(-1, Math.min(1, event.type === 'DOMMouseScroll' ? event.detail : -event.wheelDelta));
+      var delta = 0;
+      switch (event.type)
+      {
+        case 'DOMMouseScroll': 
+          delta = event.detail;
+          break;
+        case 'mousewheel': 
+          delta = event.wheelDelta;
+          break;
+        case 'wheel': 
+          delta = event.deltaY;
+          break;
+        default:
+          throw 'unrecognized mouse wheel event: ' + event.type;
+      }
+      return Math.max(-1, Math.min(1, delta));
     },
 
     mouseX: 0,
diff --git a/src/library_sdl.js b/src/library_sdl.js
index 429c3afa..b630ca5c 100644
--- a/src/library_sdl.js
+++ b/src/library_sdl.js
@@ -532,7 +532,7 @@ var LibrarySDL = {
             }
           }
           // fall through
-        case 'keydown': case 'keyup': case 'keypress': case 'mousedown': case 'mouseup': case 'DOMMouseScroll': case 'mousewheel':
+        case 'keydown': case 'keyup': case 'keypress': case 'mousedown': case 'mouseup': case 'DOMMouseScroll': case 'mousewheel': case 'wheel':
           // If we preventDefault on keydown events, the subsequent keypress events
           // won't fire. However, it's fine (and in some cases necessary) to
           // preventDefault for keys that don't generate a character. Otherwise,
@@ -541,12 +541,40 @@ var LibrarySDL = {
             event.preventDefault();
           }
 
-          if (event.type == 'DOMMouseScroll') {
-            SDL.events.push({
-              type: 'mousewheel',
-              wheelDelta: -event.detail,
-            });
-            break;
+          if (event.type == 'DOMMouseScroll' || event.type == 'mousewheel' || event.type == 'wheel') {
+            // Simulate old-style SDL events representing mouse wheel input as buttons
+            var button = Browser.getMouseWheelDelta(event) > 0 ? 4 : 3;
+            var event1 = {
+              type: 'mousedown',
+              button: button,
+              pageX: event.pageX,
+              pageY: event.pageY
+            };
+            SDL.events.push(event1);
+            var event2 = {
+              type: 'mouseup',
+              button: button,
+              pageX: event.pageX,
+              pageY: event.pageY
+            };
+            SDL.events.push(event2);
+
+            // Convert DOMMouseScroll events to wheel events for new style SDL events.
+            if (event.type == 'DOMMouseScroll') {
+              SDL.events.push({
+                type: 'wheel',
+                deltaX: 0,
+                deltaY: -event.detail,
+              });
+              break;
+            } else if (event.type == 'mousewheel') {
+              SDL.events.push({
+                type: 'wheel',
+                deltaX: 0,
+                deltaY: event.wheelDelta,
+              });
+              break;
+            }
           } else if (event.type == 'mousedown') {
             SDL.DOMButtons[event.button] = 1;
             SDL.events.push({
@@ -778,10 +806,10 @@ var LibrarySDL = {
           }
           break;
         }
-        case 'mousewheel': {
+        case 'wheel': {
           {{{ makeSetValue('ptr', C_STRUCTS.SDL_MouseWheelEvent.type, 'SDL.DOMEventToSDLEvent[event.type]', 'i32') }}};
-          {{{ makeSetValue('ptr', C_STRUCTS.SDL_MouseWheelEvent.x, '0', 'i32') }}};
-          {{{ makeSetValue('ptr', C_STRUCTS.SDL_MouseWheelEvent.y, 'Browser.getMouseWheelDelta(event)', 'i32') }}}; 
+          {{{ makeSetValue('ptr', C_STRUCTS.SDL_MouseWheelEvent.x, 'event.deltaX', 'i32') }}};
+          {{{ makeSetValue('ptr', C_STRUCTS.SDL_MouseWheelEvent.y, 'event.deltaY', 'i32') }}}; 
           break;       
         }
         case 'touchstart': case 'touchend': case 'touchmove': {
@@ -1061,7 +1089,7 @@ var LibrarySDL = {
     SDL.DOMEventToSDLEvent['mousedown']  = 0x401  /* SDL_MOUSEBUTTONDOWN */;
     SDL.DOMEventToSDLEvent['mouseup']    = 0x402  /* SDL_MOUSEBUTTONUP */;
     SDL.DOMEventToSDLEvent['mousemove']  = 0x400  /* SDL_MOUSEMOTION */;
-    SDL.DOMEventToSDLEvent['mousewheel'] = 0x403 /* SDL_MOUSEWHEEL */; 
+    SDL.DOMEventToSDLEvent['wheel']      = 0x403  /* SDL_MOUSEWHEEL */; 
     SDL.DOMEventToSDLEvent['touchstart'] = 0x700  /* SDL_FINGERDOWN */;
     SDL.DOMEventToSDLEvent['touchend']   = 0x701  /* SDL_FINGERUP */;
     SDL.DOMEventToSDLEvent['touchmove']  = 0x702  /* SDL_FINGERMOTION */;
@@ -1136,7 +1164,7 @@ var LibrarySDL = {
   },
 
   SDL_SetVideoMode: function(width, height, depth, flags) {
-    ['touchstart', 'touchend', 'touchmove', 'mousedown', 'mouseup', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'mouseout'].forEach(function(event) {
+    ['touchstart', 'touchend', 'touchmove', 'mousedown', 'mouseup', 'mousemove', 'DOMMouseScroll', 'mousewheel', 'wheel', 'mouseout'].forEach(function(event) {
       Module['canvas'].addEventListener(event, SDL.receiveEvent, true);
     });