Fully implement multiple windows on Emscripten

Author: Temdog007

src/test/SDL_test_common.c

@@ -1395,13 +1395,21 @@ bool SDLTest_CommonInit(SDLTest_CommonState *state)
                 }
             }
 
+            props = SDL_CreateProperties();
             if (state->num_windows > 1) {
                 (void)SDL_snprintf(title, SDL_arraysize(title), "%s %d",
                                    state->window_title, i + 1);
+#if SDL_PLATFORM_EMSCRIPTEN
+                if (i != 0) {
+                    char id[64];
+                    SDL_snprintf(id, sizeof(id), "#canvas%d", i + 1);
+                    SDL_SetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_CANVAS_ID, id);
+                    SDL_SetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_KEYBOARD_ELEMENT, id);
+                }
+#endif
             } else {
                 SDL_strlcpy(title, state->window_title, SDL_arraysize(title));
             }
-            props = SDL_CreateProperties();
             SDL_SetStringProperty(props, SDL_PROP_WINDOW_CREATE_TITLE_STRING, title);
             SDL_SetNumberProperty(props, SDL_PROP_WINDOW_CREATE_X_NUMBER, r.x);
             SDL_SetNumberProperty(props, SDL_PROP_WINDOW_CREATE_Y_NUMBER, r.y);

src/video/SDL_video.c

@@ -2646,9 +2646,13 @@ bool SDL_RecreateWindow(SDL_Window *window, SDL_WindowFlags flags)
         SDL_Vulkan_UnloadLibrary();
     }
 
+    // Don't actually recreate the window in Emscripten because the SDL_WindowData's
+    // canvas_id and keyboard_element would be lost if destroyed
+#if !SDL_PLATFORM_EMSCRIPTEN
     if (_this->DestroyWindow && !(flags & SDL_WINDOW_EXTERNAL)) {
         _this->DestroyWindow(_this, window);
     }
+#endif
 
     if (need_gl_load) {
         if (!SDL_GL_LoadLibrary(NULL)) {
@@ -2676,6 +2680,11 @@ bool SDL_RecreateWindow(SDL_Window *window, SDL_WindowFlags flags)
         window->w = window->windowed.w = window->floating.w;
         window->h = window->windowed.h = window->floating.h;
 
+#if SDL_PLATFORM_EMSCRIPTEN
+        // Prevent -Wunused-but-set-variable
+        (void)loaded_opengl;
+        (void)loaded_vulkan;
+#else
         if (!_this->CreateSDLWindow(_this, window, 0)) {
             if (loaded_opengl) {
                 SDL_GL_UnloadLibrary();
@@ -2687,6 +2696,7 @@ bool SDL_RecreateWindow(SDL_Window *window, SDL_WindowFlags flags)
             }
             return false;
         }
+#endif
     }
 
     if (flags & SDL_WINDOW_EXTERNAL) {
@@ -2717,7 +2727,9 @@ bool SDL_RecreateWindow(SDL_Window *window, SDL_WindowFlags flags)
         _this->SetWindowHitTest(window, true);
     }
 
+#if !SDL_PLATFORM_EMSCRIPTEN
     SDL_FinishWindowCreation(window, flags);
+#endif
 
     return true;
 }

src/video/emscripten/SDL_emscriptenframebuffer.c

@@ -35,6 +35,10 @@ bool Emscripten_CreateWindowFramebuffer(SDL_VideoDevice *_this, SDL_Window *wind
 
     // Free the old framebuffer surface
     SDL_WindowData *data = window->internal;
+    if (!data) {
+        // No framebuffer needed for this window
+        return true;
+    }
     surface = data->surface;
     SDL_DestroySurface(surface);
 
@@ -166,9 +170,10 @@ bool Emscripten_UpdateWindowFramebuffer(SDL_VideoDevice *_this, SDL_Window *wind
 void Emscripten_DestroyWindowFramebuffer(SDL_VideoDevice *_this, SDL_Window *window)
 {
     SDL_WindowData *data = window->internal;
-
-    SDL_DestroySurface(data->surface);
-    data->surface = NULL;
+    if (data) {
+        SDL_DestroySurface(data->surface);
+        data->surface = NULL;
+    }
 }
 
 #endif // SDL_VIDEO_DRIVER_EMSCRIPTEN

src/video/emscripten/SDL_emscriptenopengles.c

@@ -151,6 +151,30 @@ bool Emscripten_GLES_MakeCurrent(SDL_VideoDevice *_this, SDL_Window *window, SDL
         if (context != window_data->gl_context) {
             return SDL_SetError("Cannot make context current to another window");
         }
+
+        // Emscripten only applies WebGL rendering to the canvas: Module['canvas']
+        // So, the canvas in the Module object will be updated to the one associated to this window
+        const int canvas_set = MAIN_THREAD_EM_ASM_INT({
+            try
+            {
+                var id = UTF8ToString($0);
+                var canvas = document.querySelector(id);
+                if (!canvas) {
+                    return false;
+                }
+                Module['canvas'] = canvas;
+                return true;
+            }
+            catch(e)
+            {
+                // querySelector throws if id isn't a valid selector
+            }
+            return false;
+        }, window_data->canvas_id);
+        if (!canvas_set) {
+            SDL_SetError("Canvas '%s' is not present in DOM", window_data->canvas_id);
+            return false;
+        }
     }
 
     if (emscripten_webgl_make_context_current((EMSCRIPTEN_WEBGL_CONTEXT_HANDLE)context) != EMSCRIPTEN_RESULT_SUCCESS) {

src/video/emscripten/SDL_emscriptenvideo.c

@@ -47,6 +47,9 @@ static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window)
 static SDL_FullscreenResult Emscripten_SetWindowFullscreen(SDL_VideoDevice *_this, SDL_Window *window, SDL_VideoDisplay *display, SDL_FullscreenOp fullscreen);
 static void Emscripten_PumpEvents(SDL_VideoDevice *_this);
 static void Emscripten_SetWindowTitle(SDL_VideoDevice *_this, SDL_Window *window);
+static bool Emscripten_SetWindowPosition(SDL_VideoDevice *_this, SDL_Window *window);
+static void Emscripten_ShowWindow(SDL_VideoDevice *_this, SDL_Window *window);
+static void Emscripten_HideWindow(SDL_VideoDevice *_this, SDL_Window *window);
 
 static bool pumpevents_has_run = false;
 static int pending_swap_interval = -1;
@@ -166,12 +169,12 @@ static SDL_VideoDevice *Emscripten_CreateDevice(void)
 
     device->CreateSDLWindow = Emscripten_CreateWindow;
     device->SetWindowTitle = Emscripten_SetWindowTitle;
-    /*device->SetWindowIcon = Emscripten_SetWindowIcon;
-    device->SetWindowPosition = Emscripten_SetWindowPosition;*/
+    /*device->SetWindowIcon = Emscripten_SetWindowIcon;*/
+    device->SetWindowPosition = Emscripten_SetWindowPosition;
     device->SetWindowSize = Emscripten_SetWindowSize;
-    /*device->ShowWindow = Emscripten_ShowWindow;
+    device->ShowWindow = Emscripten_ShowWindow;
     device->HideWindow = Emscripten_HideWindow;
-    device->RaiseWindow = Emscripten_RaiseWindow;
+    /*device->RaiseWindow = Emscripten_RaiseWindow;
     device->MaximizeWindow = Emscripten_MaximizeWindow;
     device->MinimizeWindow = Emscripten_MinimizeWindow;
     device->RestoreWindow = Emscripten_RestoreWindow;
@@ -480,8 +483,7 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
         selector = SDL_GetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_CANVAS_ID, "#canvas");
     }
 
-    // Since SDL3 doesn't create the canvas element in the DOM, it should be verified
-    // that the canvas ID refers to an HTML5CanvasElement.
+    // If an element with this id already exists, it should be verified that it is to an HTML5CanvasElement
     canvas_exists = MAIN_THREAD_EM_ASM_INT({
         var id = UTF8ToString($0);
         try
@@ -498,8 +500,75 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
         return false;
     }, selector);
 
+    // Create the canvas if it doesn't exist. Assign a class to the element to signal that it was created by SDL3
     if (!canvas_exists) {
-        SDL_SetError("Element '%s' is either not a HTMLCanvasElement or doesn't exist", selector);
+        int x = SDL_GetNumberProperty(props, SDL_PROP_WINDOW_CREATE_X_NUMBER, SDL_WINDOWPOS_UNDEFINED);
+        if (SDL_WINDOWPOS_ISUNDEFINED(x)) {
+            x = 0;
+        }
+        int y = SDL_GetNumberProperty(props, SDL_PROP_WINDOW_CREATE_Y_NUMBER, SDL_WINDOWPOS_UNDEFINED);
+        if (SDL_WINDOWPOS_ISUNDEFINED(y)) {
+            y = 0;
+        }
+        const int w = SDL_GetNumberProperty(props, SDL_PROP_WINDOW_CREATE_WIDTH_NUMBER, 0);
+        const int h = SDL_GetNumberProperty(props, SDL_PROP_WINDOW_CREATE_HEIGHT_NUMBER, 0);
+        SDL_Window *parent = SDL_GetPointerProperty(props, SDL_PROP_WINDOW_CREATE_PARENT_POINTER, NULL);
+        const char *parent_id;
+        if (parent) {
+            SDL_WindowData *parent_window_data = parent->internal;
+            parent_id = parent_window_data->canvas_id;
+        } else {
+            parent_id = "body";
+        }
+        canvas_exists = MAIN_THREAD_EM_ASM_INT({
+            try
+            {
+                var id = UTF8ToString($0);
+                var x = $1;
+                var y = $2;
+                var w = $3;
+                var h = $4;
+                var parent_id = UTF8ToString($5);
+                var x_centered = $6;
+                var y_centered = $7;
+                if (x_centered) {
+                    x = window.innerWidth / 2 - w / 2;
+                }
+                if (y_centered) {
+                    y = window.innerHeight / 2 - h / 2;
+                }
+                var canvas = document.querySelector(id);
+                if (canvas) {
+                    // Element with this id is not a canvas
+                    return false;
+                }
+                canvas = document.createElement("canvas");
+                canvas.classList.add("SDL3_canvas");
+                canvas.id = id.replace("#", "");
+                canvas.oncontextmenu = (e) => { e.preventDefault(); };
+                canvas.style.position = "absolute";
+                canvas.style.left = `${x}px`;
+                canvas.style.top = `${y}px`;
+                canvas.width = w;
+                canvas.height = h;
+                var parent = document.querySelector(parent_id);
+                if (parent_id !== "body" && parent) {
+                    parent.parentNode.append(canvas);
+                } else {
+                    document.body.append(canvas);
+                }
+                return true;
+            }
+            catch(e)
+            {
+                // querySelector throws if id isn't a valid selector
+            }
+            return false;
+        }, selector, x, y, w, h, parent_id, SDL_WINDOWPOS_CENTERED_DISPLAY(x), SDL_WINDOWPOS_CENTERED_DISPLAY(y));
+    }
+
+    if (!canvas_exists) {
+        SDL_SetError("'%s' is not a valid selector or doesn't refer to an HTMLCanvasElement", selector);
         return false;
     }
 
@@ -617,8 +686,20 @@ static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window)
 
         Emscripten_UnregisterEventHandlers(data);
 
-        // We can't destroy the canvas, so resize it to zero instead
-        emscripten_set_canvas_element_size(data->canvas_id, 0, 0);
+        MAIN_THREAD_EM_ASM({
+            var id = UTF8ToString($0);
+            var canvas = document.querySelector(id);
+            if (canvas) {
+                if (canvas.classList.contains("SDL3_canvas")) {
+                    canvas.remove();
+                } else {
+                    // Since the canvas wasn't created by SDL3, just resize it to zero instead.
+                    // TODO: Is this necessary?
+                    canvas.width = 0;
+                    canvas.height = 0;
+                }
+            }
+        }, data->canvas_id);
 
         vdata = _this->internal;
         SDL_SetBooleanProperty(vdata->window_map, data->canvas_id, false);
@@ -685,4 +766,57 @@ static void Emscripten_SetWindowTitle(SDL_VideoDevice *_this, SDL_Window *window
     emscripten_set_window_title(window->title);
 }
 
+static bool Emscripten_SetWindowPosition(SDL_VideoDevice *_this, SDL_Window *window)
+{
+    SDL_WindowData *window_data = window->internal;
+    return MAIN_THREAD_EM_ASM_INT({
+        try
+        {
+            var id = UTF8ToString($0);
+            var x = $1;
+            var y = $2;
+            var canvas = document.querySelector(id);
+            if (canvas && canvas.style.position && canvas.style.position !== 'static') {
+                canvas.style.left = `${x}px`;
+                canvas.style.top = `${y}px`;
+                return true;
+            }
+        }
+        catch(e)
+        {
+            // querySelector throws if id is not a valid selector
+        }
+        return false;
+    }, window_data->canvas_id, window->pending.x, window->pending.y);
+}
+
+static void Emscripten_SetWindowDisplay(SDL_Window *window, const char *display)
+{
+    SDL_WindowData *window_data = window->internal;
+    MAIN_THREAD_EM_ASM({
+        var id = UTF8ToString($0);
+        var display = UTF8ToString($1);
+        try
+        {
+            let canvas = document.querySelector(id);
+            if (canvas) {
+                canvas.style.display = display;
+            }
+        }
+        catch(e)
+        {
+            // querySelector throws if id is not a valid selector
+        }
+    }, window_data->canvas_id, display);
+}
+
+static void Emscripten_ShowWindow(SDL_VideoDevice *_this, SDL_Window *window)
+{
+    Emscripten_SetWindowDisplay(window, "");
+}
+
+static void Emscripten_HideWindow(SDL_VideoDevice *_this, SDL_Window *window)
+{
+    Emscripten_SetWindowDisplay(window, "none");
+}
 #endif // SDL_VIDEO_DRIVER_EMSCRIPTEN

test/testmouse.c

@@ -326,6 +326,9 @@ int main(int argc, char *argv[])
         return 0;
     }
 
+    /* Window won't show on Emscripten without this */
+    SDL_ShowWindow(window);
+
     /* Main render loop */
 #ifdef SDL_PLATFORM_EMSCRIPTEN
     emscripten_set_main_loop_arg(loop, &loop_data, 0, 1);