Add a draggable resize handle to the JS puzzles.

Rather than design an ersatz 'window frame' surrounding the puzzle
canvas, I've simply overlaid the resize handle on the corner of the
puzzle itself (canvas or status bar, depending on whether the latter
exists), trusting that all games in my collection provide a reasonable
border within their drawing area. (OS X already does this with its
resize handle, so it's not as if there's no precedent.)

Unlike the desktop versions, I control the resize behaviour completely
in this environment, so I can constrain the canvas to only ever be
sensible sizes with no dead space round the edges (and, in particular,
preserve the aspect ratio).

Right-clicking the resize handle will restore the puzzle's default
tile size. I had intended to implement a maximise-to-browser-window
button too, but was annoyingly foiled by scrollbars - if you maximise
to the current window width, and as a result the text below the puzzle
scrolls off the bottom, then a vertical scrollbar appears and eats
into the width you just maximised to. Gah.

[originally from svn r9822]
This commit is contained in:
Simon Tatham
2013-04-07 10:24:37 +00:00
parent 9799ff0e2a
commit c0fff857fd
5 changed files with 111 additions and 8 deletions

32
emcc.c
View File

@ -21,12 +21,6 @@
* by using the DOM File API to ask the user to select a file and
* permit us to see its contents.
*
* - it ought to be possible to make the puzzle canvases resizable,
* by superimposing some kind of draggable resize handle. Also I
* quite like the idea of having a few buttons for standard sizes:
* reset to default size, maximise to the browser window dimensions
* (if we can find those out), and perhaps even go full-screen.
*
* - I should think about whether these webified puzzles can support
* touchscreen-based tablet browsers (assuming there are any that
* can cope with the reasonably modern JS and run it fast enough to
@ -194,10 +188,12 @@ void timer_callback(double tplus)
}
/* ----------------------------------------------------------------------
* Helper function to resize the canvas, and variables to remember its
* size for other functions (e.g. trimming blitter rectangles).
* Helper functions to resize the canvas, and variables to remember
* its size for other functions (e.g. trimming blitter rectangles).
*/
static int canvas_w, canvas_h;
/* Called when we resize as a result of changing puzzle settings */
static void resize(void)
{
int w, h;
@ -208,6 +204,26 @@ static void resize(void)
canvas_h = h;
}
/* Called from JS when the user uses the resize handle */
void resize_puzzle(int w, int h)
{
midend_size(me, &w, &h, TRUE);
if (canvas_w != w || canvas_h != h) {
js_canvas_set_size(w, h);
canvas_w = w;
canvas_h = h;
midend_force_redraw(me);
}
}
/* Called from JS when the user uses the restore button */
void restore_puzzle_size(int w, int h)
{
midend_reset_tilesize(me);
resize();
midend_force_redraw(me);
}
/*
* HTML doesn't give us a default frontend colour of its own, so we
* just make up a lightish grey ourselves.