[gtk+/wip/alexl/broadway4: 82/96] broadway: Add outset shadow node

[Alexander Larsson <alexl src gnome org>]

commit 35ceb8e626577baaaa04985455d23b54b12072d6
Author: Alexander Larsson <alexl redhat com>
Date:   Wed Nov 22 09:47:47 2017 +0100

    broadway: Add outset shadow node

 gdk/broadway/broadway-protocol.h |    1 +
 gdk/broadway/broadway.js         |  163 ++++++++++++++++++++++++--------------
 gdk/broadway/broadwayd.c         |    3 +
 gsk/gskbroadwayrenderer.c        |   24 ++++--
 4 files changed, 126 insertions(+), 65 deletions(-)
---
diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h
index cb2c68f..4d99417 100644
--- a/gdk/broadway/broadway-protocol.h
+++ b/gdk/broadway/broadway-protocol.h
@@ -13,6 +13,7 @@ typedef enum { /* Sync changes with broadway.js */
   BROADWAY_NODE_CONTAINER,
   BROADWAY_NODE_COLOR,
   BROADWAY_NODE_BORDER,
+  BROADWAY_NODE_OUTSET_SHADOW,
 } BroadwayNodeType;
 
 typedef enum {
diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index d28f66a..89e4e9d 100644
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -371,82 +371,127 @@ SwapNodes.prototype.decode_rounded_rect = function() {
     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)
 {
     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 texture_id = this.decode_uint32();
-        var image = new Image();
-        image.width = width;
-        image.height = height;
-        image.style["position"] = "absolute";
-        image.style["left"] = x + "px";
-        image.style["top"] = y + "px";
-        var texture_url = textures[texture_id];
-        this.add_image(image);
-        image.src = texture_url;
-        parent.appendChild(image);
+        {
+            var x = this.decode_uint32();
+            var y = this.decode_uint32();
+            var width = this.decode_uint32();
+            var height = this.decode_uint32();
+            var texture_id = this.decode_uint32();
+            var image = new Image();
+            image.width = width;
+            image.height = height;
+            image.style["position"] = "absolute";
+            image.style["left"] = px(x);
+            image.style["top"] = px(y);
+            var texture_url = textures[texture_id];
+            this.add_image(image);
+            image.src = texture_url;
+            parent.appendChild(image);
+        }
         break;
 
     case 1: // CONTAINER
-        var len = this.decode_uint32();
-        for (var i = 0; i < len; i++) {
-            this.handle_node(parent);
+        {
+            var len = this.decode_uint32();
+            for (var i = 0; i < len; i++) {
+                this.handle_node(parent);
+            }
         }
         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 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";
-        div.style["background-color"] = c;
-        parent.appendChild(div);
+        {
+            var x = this.decode_uint32();
+            var y = this.decode_uint32();
+            var width = this.decode_uint32();
+            var height = this.decode_uint32();
+            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";
+            div.style["background-color"] = c;
+            parent.appendChild(div);
+}
         break;
 
     case 3:  // BORDER
-        var rrect = this.decode_rounded_rect();
-        var border_widths = []
-        for (var i = 0; i < 4; i++)
-            border_widths[i] = this.decode_float();
-        var border_colors = []
-        for (var i = 0; i < 4; i++)
-            border_colors[i] = this.decode_color();
-
-        var div = document.createElement('div');
-        div.style["position"] = "absolute";
-        div.style["left"] = rrect.bounds.x + "px";
-        div.style["top"] = rrect.bounds.y + "px";
-        div.style["width"] = (rrect.bounds.width - border_widths[1] - border_widths[3]) + "px";
-        div.style["height"] = (rrect.bounds.height - border_widths[0] - border_widths[2]) + "px";
-        div.style["border-style"] = "solid";
-        div.style["border-top-left-radius"] = rrect.sizes[0].width + "px " + rrect.sizes[0].height + "px";
-        div.style["border-top-right-radius"] = rrect.sizes[1].width + "px " + rrect.sizes[1].height + "px";
-        div.style["border-bottom-right-radius"] = rrect.sizes[2].width + "px " + rrect.sizes[2].height + 
"px";
-        div.style["border-bottom-left-radius"] = rrect.sizes[3].width + "px " + rrect.sizes[3].height + "px";
-        div.style["border-top-color"] = border_colors[0];
-        div.style["border-top-width"] = border_widths[0] + "px";
-        div.style["border-right-color"] = border_colors[1];
-        div.style["border-right-width"] = border_widths[1] + "px";
-        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);
+        {
+            var rrect = this.decode_rounded_rect();
+            var border_widths = [];
+            for (var i = 0; i < 4; i++)
+                border_widths[i] = this.decode_float();
+            var border_colors = [];
+            for (var i = 0; i < 4; i++)
+                border_colors[i] = this.decode_color();
+
+            var div = document.createElement('div');
+            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);
+            div.style["border-style"] = "solid";
+            div.style["border-top-color"] = border_colors[0];
+            div.style["border-top-width"] = px(border_widths[0]);
+            div.style["border-right-color"] = border_colors[1];
+            div.style["border-right-width"] = px(border_widths[1]);
+            div.style["border-bottom-color"] = border_colors[2];
+            div.style["border-bottom-width"] = px(border_widths[2]);
+            div.style["border-left-color"] = border_colors[3];
+            div.style["border-left-width"] = px(border_widths[3]);
+            parent.appendChild(div);
+        }
         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:
         alert("Unexpected node type " + type);
     }
diff --git a/gdk/broadway/broadwayd.c b/gdk/broadway/broadwayd.c
index a26fc5a..de3d628 100644
--- a/gdk/broadway/broadwayd.c
+++ b/gdk/broadway/broadwayd.c
@@ -239,6 +239,9 @@ rewrite_node_textures (BroadwayClient *client,
   case BROADWAY_NODE_BORDER:
     pos += NODE_SIZE_RRECT + 4 * NODE_SIZE_FLOAT + 4 * NODE_SIZE_COLOR;
     break;
+  case BROADWAY_NODE_OUTSET_SHADOW:
+    pos += NODE_SIZE_RRECT + NODE_SIZE_COLOR + 4 * NODE_SIZE_COLOR;
+    break;
   case BROADWAY_NODE_TEXTURE:
     data[pos+4] = GPOINTER_TO_INT (g_hash_table_lookup (client->textures,
                                                         GINT_TO_POINTER (data[pos+4])));
diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c
index 9269312..c89f184 100644
--- a/gsk/gskbroadwayrenderer.c
+++ b/gsk/gskbroadwayrenderer.c
@@ -188,13 +188,25 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
 
     case GSK_BORDER_NODE:
       {
-       int i;
+        int i;
         add_uint32 (nodes, BROADWAY_NODE_BORDER);
-       add_rounded_rect (nodes, gsk_border_node_peek_outline (node));
-       for (i = 0; i < 4; i++)
-         add_float (nodes, gsk_border_node_peek_widths (node)[i]);
-       for (i = 0; i < 4; i++)
-         add_rgba (nodes, &gsk_border_node_peek_colors (node)[i]);
+        add_rounded_rect (nodes, gsk_border_node_peek_outline (node));
+        for (i = 0; i < 4; i++)
+          add_float (nodes, gsk_border_node_peek_widths (node)[i]);
+        for (i = 0; i < 4; 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;