zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 16:05:44 -07:00
Code Issues Packages Projects Releases Wiki Activity

js: keep colour strings in JavaScript rather than in C

Browse Source 
The drawing routines in JavaScript used to take pointers to a C string
containing a CSS colour name.  That meant that JavaScript had to create
a new JavaScript string on ever call to a drawing function, which seemed
ugly.

So now we instead pass colour numbers all the way down into JavaScript
and keep an array of JavaScript strings there that can be re-used.  The
conversion from RGB triples to strings is still done in C, though.

This doesn't seem to have fixed either of the bugs I hoped it would, but
it does measurably improve drawing performance so I think it's worth
doing.
This commit is contained in:
Ben Harris
2023-07-29 16:06:19 +01:00
parent 3e7a6adce5
commit 76da6ec140
3 changed files with 40 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
emcc.c
View File

@ -54,7 +54,7 @@ extern int js_add_preset_submenu(int menuid, const char *name);
extern int js_get_selected_preset(void);
extern void js_select_preset(int n);
extern void js_default_colour(float *output);
extern void js_set_background_colour(const char *bg);
extern void js_set_colour(int colour_number, const char *colour_string);
extern void js_get_date_64(unsigned *p);
extern void js_update_permalinks(const char *desc, const char *seed);
extern void js_enable_undo_redo(bool undo, bool redo);
@ -64,21 +64,18 @@ extern void js_deactivate_timer(void);
extern void js_canvas_start_draw(void);
extern void js_canvas_draw_update(int x, int y, int w, int h);
extern void js_canvas_end_draw(void);
extern void js_canvas_draw_rect(int x, int y, int w, int h,
const char *colour);
extern void js_canvas_draw_rect(int x, int y, int w, int h, int colour);
extern void js_canvas_clip_rect(int x, int y, int w, int h);
extern void js_canvas_unclip(void);
extern void js_canvas_draw_line(float x1, float y1, float x2, float y2,
int width, const char *colour);
int width, int colour);
extern void js_canvas_draw_poly(const int *points, int npoints,
const char *fillcolour,
const char *outlinecolour);
int fillcolour, int outlinecolour);
extern void js_canvas_draw_circle(int x, int y, int r,
const char *fillcolour,
const char *outlinecolour);
int fillcolour, int outlinecolour);
extern int js_canvas_find_font_midpoint(int height, bool monospaced);
extern void js_canvas_draw_text(int x, int y, int halign,
const char *colptr, int height,
int colour, int height,
bool monospaced, const char *text);
extern int js_canvas_new_blitter(int w, int h);
extern void js_canvas_free_blitter(int id);
@ -184,12 +181,6 @@ static int strnullcmp(const char *a, const char *b)
return strcmp(a, b);
}
/*
* HTMLish names for the colours allocated by the puzzle.
*/
static char **colour_strings;
static int ncolours;
/*
* The global midend object.
*/
@ -497,42 +488,38 @@ static void js_draw_text(void *handle, int x, int y, int fonttype,
else
halign = 0;
js_canvas_draw_text(x, y, halign, colour_strings[colour],
js_canvas_draw_text(x, y, halign, colour,
fontsize, fonttype == FONT_FIXED, text);
}
static void js_draw_rect(void *handle, int x, int y, int w, int h, int colour)
{
js_canvas_draw_rect(x, y, w, h, colour_strings[colour]);
js_canvas_draw_rect(x, y, w, h, colour);
}
static void js_draw_line(void *handle, int x1, int y1, int x2, int y2,
int colour)
{
js_canvas_draw_line(x1, y1, x2, y2, 1, colour_strings[colour]);
js_canvas_draw_line(x1, y1, x2, y2, 1, colour);
}
static void js_draw_thick_line(void *handle, float thickness,
float x1, float y1, float x2, float y2,
int colour)
{
js_canvas_draw_line(x1, y1, x2, y2, thickness, colour_strings[colour]);
js_canvas_draw_line(x1, y1, x2, y2, thickness, colour);
}
static void js_draw_poly(void *handle, const int *coords, int npoints,
int fillcolour, int outlinecolour)
{
js_canvas_draw_poly(coords, npoints,
fillcolour >= 0 ? colour_strings[fillcolour] : NULL,
colour_strings[outlinecolour]);
js_canvas_draw_poly(coords, npoints, fillcolour, outlinecolour);
}
static void js_draw_circle(void *handle, int cx, int cy, int radius,
int fillcolour, int outlinecolour)
{
js_canvas_draw_circle(cx, cy, radius,
fillcolour >= 0 ? colour_strings[fillcolour] : NULL,
colour_strings[outlinecolour]);
js_canvas_draw_circle(cx, cy, radius, fillcolour, outlinecolour);
}
struct blitter {
@ -1035,7 +1022,7 @@ int main(int argc, char **argv)
{
const char *param_err;
float *colours;
int i;
int i, ncolours;
/*
* Initialise JavaScript event handlers.
@ -1118,17 +1105,14 @@ int main(int argc, char **argv)
* hex ID strings.
*/
colours = midend_colours(me, &ncolours);
colour_strings = snewn(ncolours, char *);
for (i = 0; i < ncolours; i++) {
char col[40];
sprintf(col, "#%02x%02x%02x",
(unsigned)(0.5F + 255 * colours[i*3+0]),
(unsigned)(0.5F + 255 * colours[i*3+1]),
(unsigned)(0.5F + 255 * colours[i*3+2]));
colour_strings[i] = dupstr(col);
js_set_colour(i, col);
}
/* Put the background colour in a CSS variable. */
js_set_background_colour(colour_strings[0]);
/*
* Request notification when the game ids change (e.g. if the user

44
emcclib.js
View File

@ -181,14 +181,15 @@ mergeInto(LibraryManager.library, {
},
/*
* void js_set_background_colour(const char *bg);
* void js_set_colour(int colour_number, char const *colour_string);
*
* Record the puzzle background colour in a CSS variable so
* the style sheet can use it if it wants.
* Record a colour string used by the puzzle.
*/
js_set_background_colour: function(bgptr) {
js_set_colour: function(colour_number, colour_string) {
colours[colour_number] = UTF8ToString(colour_string);
if (colour_number == 0)
document.documentElement.style.setProperty("--puzzle-background",
UTF8ToString(bgptr));
colours[colour_number]);
},
/*
@ -332,13 +333,12 @@ mergeInto(LibraryManager.library, {
},
/*
* void js_canvas_draw_rect(int x, int y, int w, int h,
* const char *colour);
* void js_canvas_draw_rect(int x, int y, int w, int h, int colour);
*
* Draw a rectangle.
*/
js_canvas_draw_rect: function(x, y, w, h, colptr) {
ctx.fillStyle = UTF8ToString(colptr);
js_canvas_draw_rect: function(x, y, w, h, colour) {
ctx.fillStyle = colours[colour];
ctx.fillRect(x, y, w, h);
},
@ -365,7 +365,7 @@ mergeInto(LibraryManager.library, {
/*
* void js_canvas_draw_line(float x1, float y1, float x2, float y2,
* int width, const char *colour);
* int width, int colour);
*
* Draw a line. We must adjust the coordinates by 0.5 because
* Javascript's canvas coordinates appear to be pixel corners,
@ -375,7 +375,7 @@ mergeInto(LibraryManager.library, {
* Postscriptish drawing frameworks).
*/
js_canvas_draw_line: function(x1, y1, x2, y2, width, colour) {
colour = UTF8ToString(colour);
colour = colours[colour];
ctx.beginPath();
ctx.moveTo(x1 + 0.5, y1 + 0.5);
@ -392,8 +392,7 @@ mergeInto(LibraryManager.library, {
/*
* void js_canvas_draw_poly(int *points, int npoints,
* const char *fillcolour,
* const char *outlinecolour);
* int fillcolour, int outlinecolour);
*
* Draw a polygon.
*/
@ -405,35 +404,34 @@ mergeInto(LibraryManager.library, {
ctx.lineTo(getValue(pointptr+8*i , 'i32') + 0.5,
getValue(pointptr+8*i+4, 'i32') + 0.5);
ctx.closePath();
if (fill != 0) {
ctx.fillStyle = UTF8ToString(fill);
if (fill >= 0) {
ctx.fillStyle = colours[fill];
ctx.fill();
}
ctx.lineWidth = '1';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = UTF8ToString(outline);
ctx.strokeStyle = colours[outline];
ctx.stroke();
},
/*
* void js_canvas_draw_circle(int x, int y, int r,
* const char *fillcolour,
* const char *outlinecolour);
* int fillcolour, int outlinecolour);
*
* Draw a circle.
*/
js_canvas_draw_circle: function(x, y, r, fill, outline) {
ctx.beginPath();
ctx.arc(x + 0.5, y + 0.5, r, 0, 2*Math.PI);
if (fill != 0) {
ctx.fillStyle = UTF8ToString(fill);
if (fill >= 0) {
ctx.fillStyle = colours[fill];
ctx.fill();
}
ctx.lineWidth = '1';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = UTF8ToString(outline);
ctx.strokeStyle = colours[outline];
ctx.stroke();
},
@ -518,10 +516,10 @@ mergeInto(LibraryManager.library, {
* alignment is handled here, since we can get the canvas draw
* function to do it for us with almost no extra effort.
*/
js_canvas_draw_text: function(x, y, halign, colptr, fontsize, monospaced,
js_canvas_draw_text: function(x, y, halign, colour, fontsize, monospaced,
text) {
canvas_set_font(ctx, fontsize, monospaced);
ctx.fillStyle = UTF8ToString(colptr);
ctx.fillStyle = colours[colour];
ctx.textAlign = (halign == 0 ? 'left' :
halign == 1 ? 'center' : 'right');
ctx.textBaseline = 'alphabetic';

4
emccpre.js
View File

@ -41,6 +41,10 @@ var ctx;
// by js_canvas_end_draw.
var update_xmin, update_xmax, update_ymin, update_ymax;
// Colour strings to use when drawing, to save converting them from C
// every time.
var colours = [];
// Module object for Emscripten. We fill in these parameters to ensure
// that when main() returns nothing will get cleaned up so we remain
// able to call the puzzle's various callbacks.