[gtk+/wip/alexl/broadway4] broadway: Add RoundedClip node

[Alexander Larsson <alexl src gnome org>]

commit 456cc7c05c9f4f30fcbf40a5240824033261c2ac
Author: Alexander Larsson <alexl redhat com>
Date:   Wed Nov 22 10:32:47 2017 +0100

    broadway: Add RoundedClip node

 gdk/broadway/broadway-protocol.h |   13 ++++---
 gdk/broadway/broadway.js         |   71 +++++++++++++++++++++++---------------
 gdk/broadway/broadwayd.c         |    4 ++
 gsk/gskbroadwayrenderer.c        |   14 +++++--
 4 files changed, 64 insertions(+), 38 deletions(-)
---
diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h
index baead88..bc772d9 100644
--- a/gdk/broadway/broadway-protocol.h
+++ b/gdk/broadway/broadway-protocol.h
@@ -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 {
diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index 926f56b..68f7b8a 100644
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -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 ();
diff --git a/gdk/broadway/broadwayd.c b/gdk/broadway/broadwayd.c
index c54f86b..b3ebd4b 100644
--- a/gdk/broadway/broadwayd.c
+++ b/gdk/broadway/broadwayd.c
@@ -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 ();
   }
diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c
index 7a19185..0720369 100644
--- a/gsk/gskbroadwayrenderer.c
+++ b/gsk/gskbroadwayrenderer.c
@@ -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;