js: Distinguish manual resizes from device pixel ratio changes

This adds a new callback, rescale_puzzle(), that's called when the
device pixel ratio changes.  This means that resize_puzzle() can safely
set the nominal canvas size, which means that manual resizing of the
puzzle now sticks.

Still missing: paying attention to the device pixel ratio when choosing
the initial (or reset) size.
This commit is contained in:
Ben Harris
2022-10-27 14:30:23 +01:00
parent 9783bbfbc0
commit fa58dd85b7
3 changed files with 14 additions and 3 deletions

View File

@ -26,6 +26,8 @@ set(emcc_export_list
# Callbacks when the resizing controls are used # Callbacks when the resizing controls are used
_resize_puzzle _resize_puzzle
_restore_puzzle_size _restore_puzzle_size
# Callback when device pixel ratio changes
_rescale_puzzle
# Main program, run at initialisation time # Main program, run at initialisation time
_main) _main)

11
emcc.c
View File

@ -195,8 +195,8 @@ static void resize(void)
canvas_h = h; canvas_h = h;
} }
/* Called from JS when the user uses the resize handle */ /* Called from JS when the device pixel ratio changes */
void resize_puzzle(int w, int h) void rescale_puzzle(int w, int h)
{ {
midend_size(me, &w, &h, true); midend_size(me, &w, &h, true);
if (canvas_w != w || canvas_h != h) { if (canvas_w != w || canvas_h != h) {
@ -207,6 +207,13 @@ void resize_puzzle(int w, int h)
} }
} }
/* Called from JS when the user uses the resize handle */
void resize_puzzle(int w, int h)
{
rescale_puzzle(w, h);
js_canvas_set_nominal_size();
}
/* Called from JS when the user uses the restore button */ /* Called from JS when the user uses the restore button */
void restore_puzzle_size(int w, int h) void restore_puzzle_size(int w, int h)
{ {

View File

@ -535,12 +535,14 @@ function initPuzzle() {
* <https://developer.mozilla.org/en-US/docs/Web/API/Window/ * <https://developer.mozilla.org/en-US/docs/Web/API/Window/
* devicePixelRatio> (CC0) to work on older browsers. * devicePixelRatio> (CC0) to work on older browsers.
*/ */
var rescale_puzzle = Module.cwrap('rescale_puzzle',
'void', ['number', 'number']);
var mql = null; var mql = null;
var update_pixel_ratio = function() { var update_pixel_ratio = function() {
var dpr = window.devicePixelRatio; var dpr = window.devicePixelRatio;
if (mql !== null) if (mql !== null)
mql.removeListener(update_pixel_ratio); mql.removeListener(update_pixel_ratio);
resize_puzzle(nominal_width * dpr, nominal_height * dpr); rescale_puzzle(nominal_width * dpr, nominal_height * dpr);
mql = window.matchMedia(`(resolution: ${dpr}dppx)`); mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
mql.addListener(update_pixel_ratio); mql.addListener(update_pixel_ratio);
} }