Resizing the canvas using js/css now triggers the resize event

[yui-915]

fixes macroquad#787 (I assume)

[InnocentusLime]

As the tagged issue creator, I have done some local tests and now the application DOES seem to be responding to me changing the canvas size in the browser! :D

I have tested this on both Chrome and Firefox. But I have no way to test it on Safari

[not-fl3]

I am concerned about this force flag. Why do we need to send a resize message if size is still the same?

[lenscas]

haven't looked at the code so I might be wrong

but perhaps it is a way to update the size if the CSS or similar changes?

[not-fl3]

Maybe I am missing something, but I can't see how any sort of resize can be meaningful if canvas.width/height is still the same?

[yui-915]

as far as my tests went

when forcing the canvas to be "fullscreen"
resizing the browser window will change canvas.clientWidth, but not canvas.width

but when removing width: 100% and height: 100% from the canvas css
manually updating the canvas width using js (for example by doing canvas.width += 10;)
will change both canvas.width and canvas.clientWidth
so the condition evaluates to false, and on_resize method doesn't get called

same applies for height

[not-fl3]

if we use both onresize and ResizeObserver, wouldn't it generate resize message twice?

[yui-915]

yes .... especially that ResizeObserver is triggered after window.onresize, and it has that force flag

simply removing window.onresize would solve it
but it'll cause the canvas to blink black when resizing the window, probably due to the order things are done in the browser's event loop and the fact that updating the canvas size clears it

the best solution I found was changing ResizeObserver to the following:

new ResizeObserver(() => {
    let dpr = dpi_scale();
    let displayWidth = Math.floor(canvas.clientWidth * dpr);
    let displayHeight = Math.floor(canvas.clientHeight * dpr);
    if (wasm_exports.resize)
        wasm_exports.resize(displayWidth, displayHeight);
}).observe(canvas);

and removing the on_resize callback from the resize function
(also the force flag as it's no longer needed)

[yui-915]

something like yui-915/miniquad@53b457e4