zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-20 23:51:29 -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

46
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) {
document.documentElement.style.setProperty("--puzzle-background",
UTF8ToString(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",
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';