Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 1 commit into from
Closed

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions js/gl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,13 +420,14 @@ function _webglGet(name_, p, type) {
var Module;
var wasm_exports;

function resize(canvas, on_resize) {
function resize(canvas, on_resize, force = false) {
var dpr = dpi_scale();
var displayWidth = canvas.clientWidth * dpr;
var displayHeight = canvas.clientHeight * dpr;

if (canvas.width != displayWidth ||
canvas.height != displayHeight) {
canvas.height != displayHeight ||
force) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

canvas.width = displayWidth;
canvas.height = displayHeight;
if (on_resize != undefined)
Expand Down Expand Up @@ -1263,6 +1264,9 @@ var importObject = {
wasm_exports.touch(SAPP_EVENTTYPE_TOUCHES_MOVED, touch.identifier, relative_position.x, relative_position.y);
}
});
new ResizeObserver(function (_entries) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something like yui-915/miniquad@53b457e4

resize(canvas, wasm_exports.resize, true);
}).observe(canvas);

window.onresize = function () {
resize(canvas, wasm_exports.resize);
Expand Down
Loading