From 39678dac09c346b484efad86cf6990162d4af7f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Mon, 11 Mar 2019 23:09:54 +0100 Subject: [PATCH] Platforms: update Emscripten markup for 1.38.27 and up. This took me a while -- the old behavior for all emscripten_*() functions was to take a DOM element ID as an argument, with nullptr acting as a "the element that makes most sense for given operation". The new behavior when -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1 is enabled is to take a CSS selector instead. Presence of this option is not detectable at compile time, so there was no easy way of knowing what's the expected value, whether `"module"` or `"#module"`. After a few failed attempts, I discoverd that using `"#canvas"` would work for both the old and the new version -- in the new version it would be selecting an element with id="canvas", while in the old version it was a special value denoting Module['canvas']. Problem was, however, that the markup was historically using id="module" and not id="canvas", so this had to be changed. This is a breaking change affecting everyone who targets Emscripten. You need to update the HTML markup and, in case you maintain copies or forks of the CSS and JS files, these as well. Details in the changelog. --- doc/changelog.dox | 18 +++++++++++++ doc/platforms-html5.dox | 8 +++--- src/Magnum/Platform/EmscriptenApplication.js | 2 +- src/Magnum/Platform/Sdl2Application.cpp | 25 +++++++++++++------ .../Platform/Test/Sdl2ApplicationTest.html | 4 +-- .../Test/WindowlessEglApplicationTest.html | 2 +- src/Magnum/Platform/WebApplication.css | 8 +++--- .../WindowlessEmscriptenApplication.js | 2 +- 8 files changed, 49 insertions(+), 20 deletions(-) diff --git a/doc/changelog.dox b/doc/changelog.dox index c50d7dbfc..ec9e5223c 100644 --- a/doc/changelog.dox +++ b/doc/changelog.dox @@ -143,6 +143,10 @@ See also: @ref Platform-Sdl2Application-usage-gles for more information. - Replaced uses of `Pointer_stringify()` in @ref Platform::Sdl2Application which was removed in Emscripten 1.38.27 +- @ref Platform::Sdl2Application and all Emscripten markup was updated to + work correctly both with the + [`-s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1`](https://github.com/emscripten-core/emscripten/pull/7977) + option available since Emscripten 1.38.27 and with older versions @subsubsection changelog-latest-changes-text Text library @@ -220,6 +224,20 @@ See also: @ref Text::AbstractFont::openData(Containers::ArrayView, Float) and @ref Text::AbstractFont::setFileCallback() +@subsection changelog-latest-compatibility Potential compatibility breakages, removed APIs + +- In order to be compatible with both Emscripten 1.38.27 and the versions + before, all Emscripten markup is now expected to have the HTML @cb{.html} @ce element identified by @cb{.css} #canvas @ce. You need to: + - update your HTML markup to use + @cb{.html} @ce instead of + @cb{.html} @ce + - in case you have a copy or a fork of the JS driver file, it needs to + define @cb{.js} Module.canvas @ce as + @cb{.js} document.getElementById('canvas') @ce (instead of + @cb{.js} 'module' @ce) + - and for CSS files, all references to @cb{.css} #module @ce need to be + @cb{.css} #canvas @ce now + @section changelog-2019-01 2019.01 Released 2019-02-04, tagged as diff --git a/doc/platforms-html5.dox b/doc/platforms-html5.dox index acec33297..7fbd7d28e 100644 --- a/doc/platforms-html5.dox +++ b/doc/platforms-html5.dox @@ -129,7 +129,7 @@ variables.

Magnum Emscripten Application

- +
Initialization...
@@ -145,7 +145,7 @@ everything can be set up directly from the HTML markup. Replace @cb{.jinja} {{ application }} @ce with the name of your application executable and adapt page title and heading as desired. You can modify all files to your liking, but the HTML file must contain at least -@cb{.html} @ce enclosed in +@cb{.html} @ce enclosed in @cb{.html}
@ce. The JavaScript file contains event listeners that print loading status on the page. The status is displayed in the remaining two @cb{.html}
@ce s, if they are available. The CSS file @@ -229,7 +229,7 @@ and `MAGNUM_WEBAPPLICATION_CSS` CMake variables.

Magnum Windowless Emscripten Application

- + 

       
Initialization...

       

@@ -360,7 +360,7 @@ make it receive keyboard input, you have to add a `tabindex` attribute to it
 like this:
 
 @code{.html}
-
+
 @endcode
 
 After that, the canvas can be focused with a @m_class{m-label m-default} **Tab**
diff --git a/src/Magnum/Platform/EmscriptenApplication.js b/src/Magnum/Platform/EmscriptenApplication.js
index 0fabff51a..98d4463d5 100644
--- a/src/Magnum/Platform/EmscriptenApplication.js
+++ b/src/Magnum/Platform/EmscriptenApplication.js
@@ -46,7 +46,7 @@ var Module = {
         Module.setStatusDescription("The app crashed. Refresh the page or check the browser console for details.");
     },
 
-    canvas: document.getElementById('module'),
+    canvas: document.getElementById('canvas'),
 
     setStatus: function(message) {
         var status = document.getElementById('status');
diff --git a/src/Magnum/Platform/Sdl2Application.cpp b/src/Magnum/Platform/Sdl2Application.cpp
index 2d1b557e9..f16fe5d3d 100644
--- a/src/Magnum/Platform/Sdl2Application.cpp
+++ b/src/Magnum/Platform/Sdl2Application.cpp
@@ -477,10 +477,17 @@ bool Sdl2Application::tryCreate(const Configuration& configuration, const GLConf
     /* Get CSS canvas size. This is used later to detect canvas resizes and
        fire viewport events, because Emscripten doesn't do that. Related info:
        https://github.com/kripken/emscripten/issues/1731 */
-    /** @todo don't hardcode "module" here, make it configurable from outside */
+    /** @todo don't hardcode "#canvas" here, make it configurable from outside */
     {
         Vector2d canvasSize;
-        emscripten_get_element_css_size("module", &canvasSize.x(), &canvasSize.y());
+        /* Emscripten 1.38.27 changed to generic CSS selectors from element
+           IDs depending on -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1
+           being set (which we can't detect at compile time). Fortunately,
+           using #canvas works the same way both in the previous versions and
+           the current one. Unfortunately, this is also the only value that
+           works the same way for both. Further details at
+           https://github.com/emscripten-core/emscripten/pull/7977 */
+        emscripten_get_element_css_size("#canvas", &canvasSize.x(), &canvasSize.y());
         _lastKnownCanvasSize = Vector2i{canvasSize};
     }
 
@@ -542,7 +549,7 @@ Vector2i Sdl2Application::windowSize() const {
     SDL_GetWindowSize(_window, &size.x(), &size.y());
     #else
     CORRADE_ASSERT(_glContext, "Platform::Sdl2Application::windowSize(): no window opened", {});
-    emscripten_get_canvas_element_size(nullptr, &size.x(), &size.y());
+    emscripten_get_canvas_element_size("#canvas", &size.x(), &size.y());
     #endif
     return size;
 }
@@ -555,7 +562,7 @@ Vector2i Sdl2Application::framebufferSize() const {
     SDL_GL_GetDrawableSize(_window, &size.x(), &size.y());
     #else
     CORRADE_ASSERT(_glContext, "Platform::Sdl2Application::framebufferSize(): no window opened", {});
-    emscripten_get_canvas_element_size(nullptr, &size.x(), &size.y());
+    emscripten_get_canvas_element_size("#canvas", &size.x(), &size.y());
     #endif
     return size;
 }
@@ -646,14 +653,18 @@ void Sdl2Application::mainLoopIteration() {
        avoid resizing the canvas when the user doesn't want that. Related
        issue: https://github.com/kripken/emscripten/issues/1731 */
     if(_flags & Flag::Resizable) {
-        /** @todo don't hardcode "module" here, make it configurable from outside */
         Vector2d canvasSize;
-        emscripten_get_element_css_size("module", &canvasSize.x(), &canvasSize.y());
+        /* Emscripten 1.38.27 changed to generic CSS selectors from element
+           IDs depending on -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1
+           being set (which we can't detect at compile time). See above for the
+           reason why we hardcode #canvas here. */
+        emscripten_get_element_css_size("#canvas", &canvasSize.x(), &canvasSize.y());
+
         const Vector2i canvasSizei{canvasSize};
         if(canvasSizei != _lastKnownCanvasSize) {
             _lastKnownCanvasSize = canvasSizei;
             const Vector2i size = _dpiScaling*canvasSizei;
-            emscripten_set_canvas_element_size(nullptr, size.x(), size.y());
+            emscripten_set_canvas_element_size("#canvas", size.x(), size.y());
             ViewportEvent e{size, size, _dpiScaling};
             viewportEvent(e);
             _flags |= Flag::Redraw;
diff --git a/src/Magnum/Platform/Test/Sdl2ApplicationTest.html b/src/Magnum/Platform/Test/Sdl2ApplicationTest.html
index 38db474e9..e8086785a 100644
--- a/src/Magnum/Platform/Test/Sdl2ApplicationTest.html
+++ b/src/Magnum/Platform/Test/Sdl2ApplicationTest.html
@@ -10,14 +10,14 @@
   
Magnum Sdl2Application Test

   

     

-      
+      
       
Initialization...