Merge pull request #1482 from j4m3z0r/touch_handling

Touch handling

4 files changed, 102 insertions, 8 deletions

diff --git a/src/library_browser.js b/src/library_browser.js
index 511e158e..558c9a59 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -452,8 +452,21 @@ mergeInto(LibraryManager.library, {
         // Otherwise, calculate the movement based on the changes
         // in the coordinates.
         var rect = Module["canvas"].getBoundingClientRect();
-        var x = event.pageX - (window.scrollX + rect.left);
-        var y = event.pageY - (window.scrollY + rect.top);
+        var x, y;
+        if (event.type == 'touchstart' ||
+            event.type == 'touchend' ||
+            event.type == 'touchmove') {
+          var t = event.touches.item(0);
+          if (t) {
+            x = t.pageX - (window.scrollX + rect.left);
+            y = t.pageY - (window.scrollY + rect.top);
+          } else {
+            return;
+          }
+        } else {
+          x = event.pageX - (window.scrollX + rect.left);
+          y = event.pageY - (window.scrollY + rect.top);
+        }
 
         // the canvas might be CSS-scaled compared to its backbuffer;
         // SDL-using content will want mouse coordinates in terms
diff --git a/src/library_glut.js b/src/library_glut.js
index 29957e6f..60dc6540 100644
--- a/src/library_glut.js
+++ b/src/library_glut.js
@@ -267,11 +267,19 @@ var LibraryGLUT = {
     // Ignore arguments
     GLUT.initTime = Date.now();
 
+    var isTouchDevice = 'ontouchstart' in document.documentElement;
+
     window.addEventListener("keydown", GLUT.onKeydown, true);
     window.addEventListener("keyup", GLUT.onKeyup, true);
-    window.addEventListener("mousemove", GLUT.onMousemove, true);
-    window.addEventListener("mousedown", GLUT.onMouseButtonDown, true);
-    window.addEventListener("mouseup", GLUT.onMouseButtonUp, true);
+    if (isTouchDevice) {
+      window.addEventListener("touchmove", GLUT.onMousemove, true);
+      window.addEventListener("touchstart", GLUT.onMouseButtonDown, true);
+      window.addEventListener("touchend", GLUT.onMouseButtonUp, true);
+    } else {
+      window.addEventListener("mousemove", GLUT.onMousemove, true);
+      window.addEventListener("mousedown", GLUT.onMouseButtonDown, true);
+      window.addEventListener("mouseup", GLUT.onMouseButtonUp, true);
+    }
     
     Browser.resizeListeners.push(function(width, height) {
       if (GLUT.reshapeFunc) {
@@ -282,9 +290,15 @@ var LibraryGLUT = {
     __ATEXIT__.push({ func: function() {
       window.removeEventListener("keydown", GLUT.onKeydown, true);
       window.removeEventListener("keyup", GLUT.onKeyup, true);
-      window.removeEventListener("mousemove", GLUT.onMousemove, true);
-      window.removeEventListener("mousedown", GLUT.onMouseButtonDown, true);
-      window.removeEventListener("mouseup", GLUT.onMouseButtonUp, true);
+      if (isTouchDevice) {
+        window.removeEventListener("touchmove", GLUT.onMousemove, true);
+        window.removeEventListener("touchstart", GLUT.onMouseButtonDown, true);
+        window.removeEventListener("touchend", GLUT.onMouseButtonUp, true);
+      } else {
+        window.removeEventListener("mousemove", GLUT.onMousemove, true);
+        window.removeEventListener("mousedown", GLUT.onMouseButtonDown, true);
+        window.removeEventListener("mouseup", GLUT.onMouseButtonUp, true);
+      }
       Module["canvas"].width = Module["canvas"].height = 1;
     } });
   },
diff --git a/tests/glut_touchevents.c b/tests/glut_touchevents.c
new file mode 100644
index 00000000..1f097895
--- /dev/null
+++ b/tests/glut_touchevents.c
@@ -0,0 +1,64 @@
+#include <stdio.h>
+#include <stdlib.h>
+#include <GL/glut.h>
+#include <EGL/egl.h>
+#include <emscripten.h>
+
+#define MULTILINE(...) #__VA_ARGS__
+
+int touch_started = 0;
+int touch_ended = 0;
+
+int result = 0;
+
+void mouseCB(int button, int state, int x, int y)
+{
+    if(button == GLUT_LEFT_BUTTON)
+    {
+        if(state == GLUT_DOWN)
+        {
+            touch_started = 1;
+        }
+        else if(state == GLUT_UP)
+        {
+            touch_ended = 1;
+        }
+    }
+}
+
+int main(int argc, char *argv[])
+{
+    emscripten_run_script(MULTILINE(
+        Module.injectEvent = function(eventType, x, y) {
+            // Desktop browsers do not have the event types for touch events,
+            // so we fake them by creating a plain-vanilla UIEvent and then
+            // filling in the fields that we look for with appropriate values.
+            var touch = {
+                pageX: x,
+                pageY: y
+            };
+            var touches = [ touch ];
+            touches.item = function(i) { return this[i]; };
+
+            var event = document.createEvent('UIEvent');
+            event.target = Module['canvas'];
+            event.button = 0;
+            event.touches = touches;
+            event.initUIEvent(eventType, true, true);
+            Module['canvas'].dispatchEvent(event);
+        }
+    ));
+
+    // Fake a touch device so that glut sets up the appropriate event handlers.
+    emscripten_run_script("document.documentElement['ontouchstart'] = 1");
+    glutInit(&argc, argv);
+
+    glutMouseFunc(&mouseCB);
+
+    emscripten_run_script("Module.injectEvent('touchend', 100, 100)");
+    emscripten_run_script("Module.injectEvent('touchstart', 100, 100)");
+    result = touch_started && touch_ended;
+
+    REPORT_RESULT();
+    return 0;
+}
diff --git a/tests/test_browser.py b/tests/test_browser.py
index 2c5d65ee..7c387071 100644
--- a/tests/test_browser.py
+++ b/tests/test_browser.py
@@ -787,6 +787,9 @@ Press any key to continue.'''
     Popen([PYTHON, EMCC, os.path.join(self.get_dir(), 'sdl_mouse.c'), '-O2', '--minify', '0', '-o', 'sdl_mouse.js', '--pre-js', 'pre.js']).communicate()
     self.run_browser('page.html', '', '/report_result?600')
 
+  def test_glut_touchevents(self):
+    self.btest('glut_touchevents.c', '1')
+
   def test_sdl_pumpevents(self):
     # key events should be detected using SDL_PumpEvents
     open(os.path.join(self.get_dir(), 'pre.js'), 'w').write('''