AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-13 04:10:13 +00:00
Code Issues Projects Releases Wiki Activity

broadway: Add outset shadow node

Browse Source
This commit is contained in:
Alexander Larsson 2017-11-22 09:47:47 +01:00
parent 0ad523038c
commit 35ceb8e626
4 changed files with 125 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gdk/broadway/broadway-protocol.h
View File

@ -13,6 +13,7 @@ typedef enum { /* Sync changes with broadway.js */
BROADWAY_NODE_CONTAINER, BROADWAY_NODE_CONTAINER,
BROADWAY_NODE_COLOR, BROADWAY_NODE_COLOR,
BROADWAY_NODE_BORDER, BROADWAY_NODE_BORDER,
BROADWAY_NODE_OUTSET_SHADOW,
} BroadwayNodeType; } BroadwayNodeType;
typedef enum { typedef enum {

161
gdk/broadway/broadway.js
View File

@ -371,82 +371,127 @@ SwapNodes.prototype.decode_rounded_rect = function() {
return r return r
} }
function args() {
var argsLength = arguments.length;
var strings = [];
for (var i = 0; i < argsLength; ++i)
strings[i] = arguments[i];
return strings.join(" ");
}
function px(x) {
return x + "px";
}
function set_rrect_style (div, rrect) {
div.style["left"] = px(rrect.bounds.x);
div.style["top"] = px(rrect.bounds.y);
div.style["width"] = px(rrect.bounds.width);
div.style["height"] = px(rrect.bounds.height);
div.style["border-top-left-radius"] = args(px(rrect.sizes[0].width), px(rrect.sizes[0].height));
div.style["border-top-right-radius"] = args(px(rrect.sizes[1].width), px(rrect.sizes[1].height));
div.style["border-bottom-right-radius"] = args(px(rrect.sizes[2].width), px(rrect.sizes[2].height));
div.style["border-bottom-left-radius"] = args(px(rrect.sizes[3].width), px(rrect.sizes[3].height));
}
SwapNodes.prototype.handle_node = function(parent) SwapNodes.prototype.handle_node = function(parent)
{ {
var type = this.decode_uint32(); var type = this.decode_uint32();
switch (type) switch (type)
{ {
case 0: // TEXTURE case 0: // TEXTURE
var x = this.decode_uint32(); {
var y = this.decode_uint32(); var x = this.decode_uint32();
var width = this.decode_uint32(); var y = this.decode_uint32();
var height = this.decode_uint32(); var width = this.decode_uint32();
var texture_id = this.decode_uint32(); var height = this.decode_uint32();
var image = new Image(); var texture_id = this.decode_uint32();
image.width = width; var image = new Image();
image.height = height; image.width = width;
image.style["position"] = "absolute"; image.height = height;
image.style["left"] = x + "px"; image.style["position"] = "absolute";
image.style["top"] = y + "px"; image.style["left"] = px(x);
var texture_url = textures[texture_id]; image.style["top"] = px(y);
this.add_image(image); var texture_url = textures[texture_id];
image.src = texture_url; this.add_image(image);
parent.appendChild(image); image.src = texture_url;
parent.appendChild(image);
}
break; break;
case 1: // CONTAINER case 1: // CONTAINER
var len = this.decode_uint32(); {
for (var i = 0; i < len; i++) { var len = this.decode_uint32();
this.handle_node(parent); for (var i = 0; i < len; i++) {
this.handle_node(parent);
}
} }
break; break;
case 2: // COLOR case 2: // COLOR
var x = this.decode_uint32(); {
var y = this.decode_uint32(); var x = this.decode_uint32();
var width = this.decode_uint32(); var y = this.decode_uint32();
var height = this.decode_uint32(); var width = this.decode_uint32();
var c = this.decode_color () var height = this.decode_uint32();
var div = document.createElement('div'); var c = this.decode_color ();
div.style["position"] = "absolute"; var div = document.createElement('div');
div.style["left"] = x + "px"; div.style["position"] = "absolute";
div.style["top"] = y + "px"; div.style["left"] = x + "px";
div.style["width"] = width + "px"; div.style["top"] = y + "px";
div.style["height"] = height + "px"; div.style["width"] = width + "px";
div.style["background-color"] = c; div.style["height"] = height + "px";
parent.appendChild(div); div.style["background-color"] = c;
parent.appendChild(div);
}
break; break;
case 3: // BORDER case 3: // BORDER
var rrect = this.decode_rounded_rect(); {
var border_widths = [] var rrect = this.decode_rounded_rect();
for (var i = 0; i < 4; i++) var border_widths = [];
border_widths[i] = this.decode_float(); for (var i = 0; i < 4; i++)
var border_colors = [] border_widths[i] = this.decode_float();
for (var i = 0; i < 4; i++) var border_colors = [];
border_colors[i] = this.decode_color(); for (var i = 0; i < 4; i++)
border_colors[i] = this.decode_color();
var div = document.createElement('div'); var div = document.createElement('div');
div.style["position"] = "absolute"; div.style["position"] = "absolute";
div.style["left"] = rrect.bounds.x + "px"; rrect.bounds.width -= border_widths[1] + border_widths[3];
div.style["top"] = rrect.bounds.y + "px"; rrect.bounds.height -= border_widths[0] + border_widths[2];
div.style["width"] = (rrect.bounds.width - border_widths[1] - border_widths[3]) + "px"; set_rrect_style(div, rrect, border_widths);
div.style["height"] = (rrect.bounds.height - border_widths[0] - border_widths[2]) + "px"; div.style["border-style"] = "solid";
div.style["border-style"] = "solid"; div.style["border-top-color"] = border_colors[0];
div.style["border-top-left-radius"] = rrect.sizes[0].width + "px " + rrect.sizes[0].height + "px"; div.style["border-top-width"] = px(border_widths[0]);
div.style["border-top-right-radius"] = rrect.sizes[1].width + "px " + rrect.sizes[1].height + "px"; div.style["border-right-color"] = border_colors[1];
div.style["border-bottom-right-radius"] = rrect.sizes[2].width + "px " + rrect.sizes[2].height + "px"; div.style["border-right-width"] = px(border_widths[1]);
div.style["border-bottom-left-radius"] = rrect.sizes[3].width + "px " + rrect.sizes[3].height + "px"; div.style["border-bottom-color"] = border_colors[2];
div.style["border-top-color"] = border_colors[0]; div.style["border-bottom-width"] = px(border_widths[2]);
div.style["border-top-width"] = border_widths[0] + "px"; div.style["border-left-color"] = border_colors[3];
div.style["border-right-color"] = border_colors[1]; div.style["border-left-width"] = px(border_widths[3]);
div.style["border-right-width"] = border_widths[1] + "px"; parent.appendChild(div);
div.style["border-bottom-color"] = border_colors[2]; }
div.style["border-bottom-width"] = border_widths[2] + "px";
div.style["border-left-color"] = border_colors[3];
div.style["border-left-width"] = border_widths[3] + "px";
parent.appendChild(div);
break; break;
case 4: // OUTSET_SHADOW
{
var rrect = this.decode_rounded_rect();
var color = this.decode_color();
var dx = this.decode_float();
var dy = this.decode_float();
var spread = this.decode_float();
var blur = this.decode_float();
var div = document.createElement('div');
div.style["position"] = "absolute";
set_rrect_style(div, rrect, null);
div.style["box-shadow"] = args(px(dx), px(dy), px(blur), px(spread), color);
parent.appendChild(div);
}
break;
default: default:
alert("Unexpected node type " + type); alert("Unexpected node type " + type);
} }

3
gdk/broadway/broadwayd.c
View File

@ -239,6 +239,9 @@ rewrite_node_textures (BroadwayClient *client,
case BROADWAY_NODE_BORDER: case BROADWAY_NODE_BORDER:
pos += NODE_SIZE_RRECT + 4 * NODE_SIZE_FLOAT + 4 * NODE_SIZE_COLOR; pos += NODE_SIZE_RRECT + 4 * NODE_SIZE_FLOAT + 4 * NODE_SIZE_COLOR;
break; break;
case BROADWAY_NODE_OUTSET_SHADOW:
pos += NODE_SIZE_RRECT + NODE_SIZE_COLOR + 4 * NODE_SIZE_COLOR;
break;
case BROADWAY_NODE_TEXTURE: case BROADWAY_NODE_TEXTURE:
data[pos+4] = GPOINTER_TO_INT (g_hash_table_lookup (client->textures, data[pos+4] = GPOINTER_TO_INT (g_hash_table_lookup (client->textures,
GINT_TO_POINTER (data[pos+4]))); GINT_TO_POINTER (data[pos+4])));

24
gsk/gskbroadwayrenderer.c
View File

@ -188,13 +188,25 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
case GSK_BORDER_NODE: case GSK_BORDER_NODE:
{ {
int i; int i;
add_uint32 (nodes, BROADWAY_NODE_BORDER); add_uint32 (nodes, BROADWAY_NODE_BORDER);
add_rounded_rect (nodes, gsk_border_node_peek_outline (node)); add_rounded_rect (nodes, gsk_border_node_peek_outline (node));
for (i = 0; i < 4; i++) for (i = 0; i < 4; i++)
add_float (nodes, gsk_border_node_peek_widths (node)[i]); add_float (nodes, gsk_border_node_peek_widths (node)[i]);
for (i = 0; i < 4; i++) for (i = 0; i < 4; i++)
add_rgba (nodes, &gsk_border_node_peek_colors (node)[i]); add_rgba (nodes, &gsk_border_node_peek_colors (node)[i]);
}
return;
case GSK_OUTSET_SHADOW_NODE:
{
add_uint32 (nodes, BROADWAY_NODE_OUTSET_SHADOW);
add_rounded_rect (nodes, gsk_outset_shadow_node_peek_outline (node));
add_rgba (nodes, gsk_outset_shadow_node_peek_color (node));
add_float (nodes, gsk_outset_shadow_node_get_dx (node));
add_float (nodes, gsk_outset_shadow_node_get_dy (node));
add_float (nodes, gsk_outset_shadow_node_get_spread (node));
add_float (nodes, gsk_outset_shadow_node_get_blur_radius (node));
} }
return; return;