mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-12-26 21:51:08 +00:00
broadway: Add RoundedClip node
This commit is contained in:
parent
0083c084e4
commit
f7ff6dbb66
@ -9,12 +9,13 @@ typedef struct {
|
||||
} BroadwayRect;
|
||||
|
||||
typedef enum { /* Sync changes with broadway.js */
|
||||
BROADWAY_NODE_TEXTURE,
|
||||
BROADWAY_NODE_CONTAINER,
|
||||
BROADWAY_NODE_COLOR,
|
||||
BROADWAY_NODE_BORDER,
|
||||
BROADWAY_NODE_OUTSET_SHADOW,
|
||||
BROADWAY_NODE_INSET_SHADOW,
|
||||
BROADWAY_NODE_TEXTURE = 0,
|
||||
BROADWAY_NODE_CONTAINER = 1,
|
||||
BROADWAY_NODE_COLOR = 2,
|
||||
BROADWAY_NODE_BORDER = 3,
|
||||
BROADWAY_NODE_OUTSET_SHADOW = 4,
|
||||
BROADWAY_NODE_INSET_SHADOW = 5,
|
||||
BROADWAY_NODE_ROUNDED_CLIP = 6,
|
||||
} BroadwayNodeType;
|
||||
|
||||
typedef enum {
|
||||
|
@ -362,6 +362,15 @@ SwapNodes.prototype.decode_rect = function() {
|
||||
return r;
|
||||
}
|
||||
|
||||
SwapNodes.prototype.decode_irect = function() {
|
||||
var r = new Object();
|
||||
r.x = this.decode_int32 ();
|
||||
r.y = this.decode_int32 ();
|
||||
r.width = this.decode_int32 ();
|
||||
r.height = this.decode_int32 ();
|
||||
return r;
|
||||
}
|
||||
|
||||
SwapNodes.prototype.decode_rounded_rect = function() {
|
||||
var r = new Object();
|
||||
r.bounds = this.decode_rect();
|
||||
@ -384,35 +393,35 @@ 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);
|
||||
function set_rect_style (div, rect, offset_x, offset_y) {
|
||||
div.style["left"] = px(rect.x - offset_x);
|
||||
div.style["top"] = px(rect.y - offset_y);
|
||||
div.style["width"] = px(rect.width);
|
||||
div.style["height"] = px(rect.height);
|
||||
}
|
||||
|
||||
function set_rrect_style (div, rrect, offset_x, offset_y) {
|
||||
set_rect_style(div, rrect.bounds, offset_x, offset_y);
|
||||
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, offset_x, offset_y)
|
||||
{
|
||||
var type = this.decode_uint32();
|
||||
switch (type)
|
||||
{
|
||||
case 0: // TEXTURE
|
||||
{
|
||||
var x = this.decode_uint32();
|
||||
var y = this.decode_uint32();
|
||||
var width = this.decode_uint32();
|
||||
var height = this.decode_uint32();
|
||||
var rect = this.decode_irect();
|
||||
var texture_id = this.decode_uint32();
|
||||
var image = new Image();
|
||||
image.width = width;
|
||||
image.height = height;
|
||||
image.width = rect.width;
|
||||
image.height = rect.height;
|
||||
image.style["position"] = "absolute";
|
||||
image.style["left"] = px(x);
|
||||
image.style["top"] = px(y);
|
||||
set_rect_style(image, rect, offset_x, offset_y);
|
||||
var texture_url = textures[texture_id];
|
||||
this.add_image(image);
|
||||
image.src = texture_url;
|
||||
@ -424,27 +433,21 @@ SwapNodes.prototype.handle_node = function(parent)
|
||||
{
|
||||
var len = this.decode_uint32();
|
||||
for (var i = 0; i < len; i++) {
|
||||
this.handle_node(parent);
|
||||
this.handle_node(parent, offset_x, offset_y);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 2: // COLOR
|
||||
{
|
||||
var x = this.decode_uint32();
|
||||
var y = this.decode_uint32();
|
||||
var width = this.decode_uint32();
|
||||
var height = this.decode_uint32();
|
||||
var rect = this.decode_rect();
|
||||
var c = this.decode_color ();
|
||||
var div = document.createElement('div');
|
||||
div.style["position"] = "absolute";
|
||||
div.style["left"] = x + "px";
|
||||
div.style["top"] = y + "px";
|
||||
div.style["width"] = width + "px";
|
||||
div.style["height"] = height + "px";
|
||||
set_rect_style(div, rect, offset_x, offset_y);
|
||||
div.style["background-color"] = c;
|
||||
parent.appendChild(div);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 3: // BORDER
|
||||
@ -461,7 +464,7 @@ SwapNodes.prototype.handle_node = function(parent)
|
||||
div.style["position"] = "absolute";
|
||||
rrect.bounds.width -= border_widths[1] + border_widths[3];
|
||||
rrect.bounds.height -= border_widths[0] + border_widths[2];
|
||||
set_rrect_style(div, rrect, border_widths);
|
||||
set_rrect_style(div, rrect, offset_x, offset_y);
|
||||
div.style["border-style"] = "solid";
|
||||
div.style["border-top-color"] = border_colors[0];
|
||||
div.style["border-top-width"] = px(border_widths[0]);
|
||||
@ -486,7 +489,7 @@ SwapNodes.prototype.handle_node = function(parent)
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style["position"] = "absolute";
|
||||
set_rrect_style(div, rrect, null);
|
||||
set_rrect_style(div, rrect, offset_x, offset_y);
|
||||
div.style["box-shadow"] = args(px(dx), px(dy), px(blur), px(spread), color);
|
||||
parent.appendChild(div);
|
||||
}
|
||||
@ -503,12 +506,24 @@ SwapNodes.prototype.handle_node = function(parent)
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style["position"] = "absolute";
|
||||
set_rrect_style(div, rrect, null);
|
||||
set_rrect_style(div, rrect, offset_x, offset_y);
|
||||
div.style["box-shadow"] = args("inset", px(dx), px(dy), px(blur), px(spread), color);
|
||||
parent.appendChild(div);
|
||||
}
|
||||
break;
|
||||
|
||||
case 6: // ROUNDED_CLIP
|
||||
{
|
||||
var rrect = this.decode_rounded_rect();
|
||||
var div = document.createElement('div');
|
||||
div.style["position"] = "absolute";
|
||||
set_rrect_style(div, rrect, offset_x, offset_y);
|
||||
div.style["overflow"] = "hidden";
|
||||
parent.appendChild(div);
|
||||
this.handle_node(div, rrect.bounds.x, rrect.bounds.y);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
alert("Unexpected node type " + type);
|
||||
}
|
||||
@ -524,7 +539,7 @@ function cmdWindowSetNodes(id, node_data)
|
||||
/* We use a secondary div so that we can remove all previous children in one go */
|
||||
|
||||
var swap = new SwapNodes (node_data, div);
|
||||
swap.handle_node(swap.div2);
|
||||
swap.handle_node(swap.div2, 0, 0);
|
||||
if (swap.data_pos != node_data.length)
|
||||
alert ("Did not consume entire array (len " + node_data.length + " end " + end + ")");
|
||||
swap.did_one ();
|
||||
|
@ -253,6 +253,10 @@ rewrite_node_textures (BroadwayClient *client,
|
||||
for (i = 0; i < n_children; i++)
|
||||
pos = rewrite_node_textures (client, len, data, pos);
|
||||
break;
|
||||
case BROADWAY_NODE_ROUNDED_CLIP:
|
||||
pos += NODE_SIZE_RRECT;
|
||||
pos = rewrite_node_textures (client, len, data, pos);
|
||||
break;
|
||||
default:
|
||||
g_assert_not_reached ();
|
||||
}
|
||||
|
@ -178,10 +178,7 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
|
||||
case GSK_COLOR_NODE:
|
||||
{
|
||||
add_uint32 (nodes, BROADWAY_NODE_COLOR);
|
||||
add_uint32 (nodes, x);
|
||||
add_uint32 (nodes, y);
|
||||
add_uint32 (nodes, width);
|
||||
add_uint32 (nodes, height);
|
||||
add_rect (nodes, &node->bounds);
|
||||
add_rgba (nodes, gsk_color_node_peek_color (node));
|
||||
}
|
||||
return;
|
||||
@ -222,6 +219,15 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
|
||||
}
|
||||
return;
|
||||
|
||||
case GSK_ROUNDED_CLIP_NODE:
|
||||
{
|
||||
add_uint32 (nodes, BROADWAY_NODE_ROUNDED_CLIP);
|
||||
add_rounded_rect (nodes, gsk_rounded_clip_node_peek_clip (node));
|
||||
gsk_broadway_renderer_add_node (self, nodes, node_textures,
|
||||
gsk_rounded_clip_node_get_child (node));
|
||||
}
|
||||
return;
|
||||
|
||||
default:
|
||||
{
|
||||
cairo_surface_t *surface;
|
||||
|
Loading…
Reference in New Issue
Block a user