Emscripten Resize event

[LloydJHowarth]

Emscripten:

Currently the SDL_EVENT_WINDOW_RESIZED event is triggered when the canvas size changes for example using SDL_SetWindowSize

However I think when the document size changes it would also be a good time to call the SDL_EVENT_WINDOW_RESIZED event?

For example:

window.addEventListener("resize", () => 
{
    // Trigger SDL_EVENT_WINDOW_RESIZED event
});

This can be extremely useful for custom scaling or building our own "Fill Document" feature that constantly scales with the document, this will also detect resize on orientation as well making it more convenient to handle canvas / window operations on web.

[slouken]

@icculus, can this go in for 3.4?

[icculus]

The canvas (the thing that maps to SDL_Window) does not resize with the document, so this wouldn't be a correct thing to insert.

Can you explain to me again what doesn't work about SDL's own fill_document functionality? If you want to build your own outside of SDL, you can, but if we can find a way to make the existing stuff work for your needs, that would be less friction for both of us.

[LloydJHowarth]

Fill Document

The fill document functionality works great, however I think because it's a hint and not a toggle option or method to call this limits us. Because we can't have it on or off, if its on we now can't have a "Windowed" mode in the browser for example: (Fill Document hint disabled)

Instead we are just stuck with this: (Fill Document hint enabled)

I think this makes emscripten window handling inconsistent with other platforms such as Desktop Windows, Linux, Mac. I've done my own implementation in my .NET project that only has "Fullscreen" or "Windowed" mode with an option to call a method "Fill Document" I have a strange setup because I'm also detecting what device is currently being used for example:

Mobile:

• Fullscreen: (Enabled Fullscreen & Enable Fill document)
• Windowed (Disable Fullscreen & Enable Fill Document)

Desktop:

• Fullscreen (Enabled Fullscreen & Enabled Fill Document)
• Windowed (Disable Fullscreen & Disable Fill Document)

As you can see it can be useful, This "Fill Document" toggle allows me to handle this different for each device the app is running on and other cases. Note it doesn't use the SDL Fill document hint at all.

Resize

In order to handle this behaviour I've had to manually push events to SDL to trigger SDL_EVENT_WINDOW_RESIZED when the document size has changed which is currently quite 'hacky' on my end. I just think this could be useful to call when the document size has changed as well. We don't have to return the document size as part of the event, it could still return the canvas size but it's just nice to know something to do with the display has changed so we can maybe perform an action to account for that?

This is very useful for example switching to and from mobile view on a desktop browser, the document size changes but no event is fired to handle window resizing. I'm unsure if I'm allowed to attach video files here because I would show you the behaviour

Note

This is already implemented on my end, so I don't need it. However I do think this is the correct setup which has taken quite a bit of hacking to get working since I'm outside the source of SDL using .NET

[LloydJHowarth]

Also.. Something like SDL_MaximizeWindow could fill the document since I don't think it does anything, SDL_RestoreWindow & SDL_MinimizeWindow could set it back to the windowed mode size. This would remove the need for the Fill document hint all together (could still exist) but this gives us much better handling and consistency across all SDL supported platforms.

Would be great to get this kind of support. I've already implemented it on my end but I do wish I didn't have to hack around to get this behaviour only for emscripten specifically :)

[LloydJHowarth]

Sorry for the spam... Feel like I'm completely picking emscripten apart however I'm just trying to suggest genuine improvements. This is the approach I'm currently taking:

Handle the emscripten platform exactly like desktop platforms. Treat the document as if it was a pc's desktop or workspace where the canvas is the window and the document is the desktop workspace. This then supports maximise, minimise, windowed, fullscreen, restore and much more which is applied to the canvas. This gives me complete control of my window and environment just like desktop platforms. I can fill the document using maximise, use restore to go back to windowed mode, support fullscreen, etc.

That way there is complete consistency across all supported platforms without extra emscripten specific features like fill document hints. I'm not saying this needs to be done or trying to give you guys more work to do however if this is something you would like to consider I could definitely draft up a plan on how everything works.

Wish I was comfortable in C because I'd do this myself and propose it.. For now I'll just implement this on my end so there is no need to change anything for you guys.

It's just improvements and suggestions that I believe to be a solid foundation for emscripten.

[icculus]

We talked about mapping our fill_document thing to SDL_MaximizeWindow, but there were two issues stopping us:

• while a desktop's dimensions can change while a window is maximized, generally they don't, whereas a web browser document might resize multiple times per second.
• if we were going to promise maximization, we'd have to get into the business of trying to make everything work like a normal desktop windowing system does. Some of it maps, but sooner or later the metaphor breaks down, and we don't really want to build a simulated desktop when most browser apps wouldn't need it.

So the FILL_DOCUMENT hint was the compromise: "I need this feature in my app, but I understand I'm not getting a full desktop metaphor out of this."

That being said: it sounds like what you could most benefit from in SDL is that hint being able to toggle (so if you call SDL_SetHint() it'll change the existing SDL_Window). I think that's doable, if that'll solve your problem and let you throw out all the custom code.

[LloydJHowarth]

while a desktop's dimensions can change while a window is maximized, generally they don't, whereas a web browser document might resize multiple times per second.

Fill document is already document size change aware, it scales constantly with whatever document we have. If the user resizes the browser it will still be maximized inside that document which makes sense.

if we were going to promise maximization, we'd have to get into the business of trying to make everything work like a normal desktop windowing system does. Some of it maps, but sooner or later the metaphor breaks down, and we don't really want to build a simulated desktop when most browser apps wouldn't need it.

Sure, I understand that as I've hit some roadblocks myself implementing this. I've had to build a custom Restore, Maximize, Minimize, Fullscreen then abstract it away so everything seems to work the same at face value.

it sounds like what you could most benefit from in SDL is that hint being able to toggle

100% this would reduce a massive amount of code. I could even remove the custom resize event firing since its already aware of document size changes. I think many people could benefit from this in the future.

Right now my emscripten app is treated like a desktop app as mentioned before. But it's quite tricky to handle since WindowFlags such as Maximize, Minimize, don't get added to WindowFlags (obviously because they do nothing on emscripten) then my flags keep falling out of sync. Going to look into this properly and see about syncing flags.. But again this is just for emscripten while every other platform shares the same logic, but then this goes down the road of:

we don't really want to build a simulated desktop when most browser apps wouldn't need it.

Let me know if you make any change or not, it's fine if not as I've already done this. But it would be nice to undo a lot of custom code if possible.

Thanks @icculus

[icculus]

Okay, here you go. #14591 makes the hint able to toggle.

Here it is in practice:

https://icculus.org/~icculus/emscripten/sdl3-testsprite-filldoc-toggle/testsprite.html

Click the canvas with left mouse button (or tap on a phone) to toggle fill_doc on and off.

Changes to testsprite to catch those taps, if you want to reproduce it:

diff --git a/test/testsprite.c b/test/testsprite.c
index 36f0d0f12..f4ccfb210 100644
--- a/test/testsprite.c
+++ b/test/testsprite.c
@@ -38,6 +38,7 @@ static Uint32 frames;
 static const int fps_check_delay = 5000;
 static int use_rendergeometry = 0;
 static bool suspend_when_occluded;
+static bool fill_document = false;
 
 /* Number of iterations to move sprites - used for visual tests. */
 /* -1: infinite random moves (default); >=0: enables N deterministic moves */
@@ -564,6 +565,9 @@ SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
 {
     if (event->type == SDL_EVENT_RENDER_DEVICE_RESET) {
         LoadSprite(icon);
+    } else if ((event->type == SDL_EVENT_MOUSE_BUTTON_DOWN) && (event->button.button == 1)) {
+        fill_document = !fill_document;
+        SDL_SetHintWithPriority(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT, fill_document ? "1" : "0", SDL_HINT_OVERRIDE);
     }
     return SDLTest_CommonEventMainCallbacks(state, event);
 }

[LloydJHowarth]

Oh nice.. I appreciate the quick implementation!

I've just tested on my phone seems to work great. I'll be back on the computer soon to implement and try out! This should remove the need for a lot of unnecessary code now such as events and my own fill document JS glue

I'll give you feedback ASAP