[gtk/wip/alexl/broadway6] broadway: Use css transforms

[Alexander Larsson <alexl src gnome org>]

commit 9212727f53e7d29f22804d155b87be3702380e57
Author: Alexander Larsson <alexl redhat com>
Date:   Wed Mar 27 19:27:16 2019 +0100

    broadway: Use css transforms
    
    This allows generic transforms nodes to work.

 gdk/broadway/broadway-protocol.h |  2 +-
 gdk/broadway/broadway-server.c   | 14 ++++++++++++--
 gdk/broadway/broadway.js         | 30 +++++++++++++++++++++++++-----
 gsk/gskbroadwayrenderer.c        | 38 ++++++++++++++++++++++++++++----------
 4 files changed, 66 insertions(+), 18 deletions(-)
---
diff --git a/gdk/broadway/broadway-protocol.h b/gdk/broadway/broadway-protocol.h
index 70c5c18522..4f7b812e66 100644
--- a/gdk/broadway/broadway-protocol.h
+++ b/gdk/broadway/broadway-protocol.h
@@ -22,7 +22,7 @@ typedef enum { /* Sync changes with broadway.js */
   BROADWAY_NODE_CLIP = 10,
   BROADWAY_NODE_KEEP_ALL = 11,
   BROADWAY_NODE_KEEP_THIS = 12,
-  BROADWAY_NODE_TRANSLATE = 13,
+  BROADWAY_NODE_TRANSFORM = 13,
   BROADWAY_NODE_DEBUG = 14,
   BROADWAY_NODE_REUSE = 15,
 } BroadwayNodeType;
diff --git a/gdk/broadway/broadway-server.c b/gdk/broadway/broadway-server.c
index ac9c424cf9..70a236ef46 100644
--- a/gdk/broadway/broadway-server.c
+++ b/gdk/broadway/broadway-server.c
@@ -1642,6 +1642,7 @@ broadway_server_has_client (BroadwayServer *server)
 #define NODE_SIZE_COLOR 1
 #define NODE_SIZE_FLOAT 1
 #define NODE_SIZE_POINT 2
+#define NODE_SIZE_MATRIX 16
 #define NODE_SIZE_SIZE 2
 #define NODE_SIZE_RECT (NODE_SIZE_POINT + NODE_SIZE_SIZE)
 #define NODE_SIZE_RRECT (NODE_SIZE_RECT + 4 * NODE_SIZE_SIZE)
@@ -1670,6 +1671,7 @@ decode_nodes (BroadwayServer *server,
   guint32 size, n_children;
   gint32 texture_offset;
   guint32 hash;
+  guint32 transform_type;
 
   g_assert (*pos < len);
 
@@ -1711,8 +1713,16 @@ decode_nodes (BroadwayServer *server,
     size = NODE_SIZE_RECT;
     n_children = 1;
     break;
-  case BROADWAY_NODE_TRANSLATE:
-    size = NODE_SIZE_POINT;
+  case BROADWAY_NODE_TRANSFORM:
+    transform_type = data[(*pos)];
+    size = 1;
+    if (transform_type == 0) {
+      size += NODE_SIZE_POINT;
+    } else if (transform_type == 1) {
+      size += NODE_SIZE_MATRIX;
+    } else {
+      g_assert_not_reached();
+    }
     n_children = 1;
     break;
   case BROADWAY_NODE_LINEAR_GRADIENT:
diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index c6e537c909..ae3d912ea6 100644
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -13,7 +13,7 @@ const BROADWAY_NODE_OPACITY = 9;
 const BROADWAY_NODE_CLIP = 10;
 const BROADWAY_NODE_KEEP_ALL = 11;
 const BROADWAY_NODE_KEEP_THIS = 12;
-const BROADWAY_NODE_TRANSLATE = 13;
+const BROADWAY_NODE_TRANSFORM = 13;
 const BROADWAY_NODE_DEBUG = 14;
 const BROADWAY_NODE_REUSE = 15;
 
@@ -630,12 +630,32 @@ TransformNodes.prototype.insertNode = function(parent, posInParent, oldNode)
 
     /* Bin nodes */
 
-    case BROADWAY_NODE_TRANSLATE:
+    case BROADWAY_NODE_TRANSFORM:
         {
-            var point = this.decode_point();
+            var transform_type = this.decode_uint32();
+            var transform_string;
+
+            if (transform_type == 0) {
+                var point = this.decode_point();
+                transform_string = "translate(" + px(point.x) + "," + px(point.y) + ")";
+            } else if (transform_type == 1) {
+                var m = new Array();
+                for (var i = 0; i < 16; i++) {
+                    m[i] = this.decode_float ();
+                }
+
+                transform_string =
+                    "matrix3d(" +
+                    m[0] + "," + m[1] + "," + m[2] + "," + m[3]+ "," +
+                    m[4] + "," + m[5] + "," + m[6] + "," + m[7] + "," +
+                    m[8] + "," + m[9] + "," + m[10] + "," + m[11] + "," +
+                    m[12] + "," + m[13] + "," + m[14] + "," + m[15] + ")";
+            }
+
             var div = document.createElement('div');
-            div.style["position"] = "absolute";
-            set_point_style(div, point);
+            div.style["transform"] = transform_string;
+            div.style["transform-origin"] = "0px 0px";
+
             this.insertNode(div, -1, oldChildren[0]);
             newNode = div;
         }
diff --git a/gsk/gskbroadwayrenderer.c b/gsk/gskbroadwayrenderer.c
index 0730ca8a73..e8cf1fe347 100644
--- a/gsk/gskbroadwayrenderer.c
+++ b/gsk/gskbroadwayrenderer.c
@@ -155,6 +155,17 @@ add_rounded_rect (GArray *nodes, const GskRoundedRect *rrect, float offset_x, fl
     add_size (nodes, &rrect->corner[i]);
 }
 
+static void
+add_matrix (GArray *nodes, graphene_matrix_t *matrix)
+{
+  float matrix_floats[16];
+  int i;
+
+  graphene_matrix_to_float (matrix, matrix_floats);
+  for (i = 0; i < 16; i++)
+    add_float (nodes, matrix_floats[i]);
+}
+
 static void
 add_color_stop (GArray *nodes, const GskColorStop *stop)
 {
@@ -508,23 +519,30 @@ gsk_broadway_renderer_add_node (GskRenderer *renderer,
         GskTransform *transform = gsk_transform_node_get_transform (node);
         GskTransformCategory category = gsk_transform_get_category (transform);
 
-        if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE)
-          {
-            if (add_new_node (renderer, node, BROADWAY_NODE_TRANSLATE)) {
+        if (add_new_node (renderer, node, BROADWAY_NODE_TRANSFORM)) {
+          if (category >= GSK_TRANSFORM_CATEGORY_2D_TRANSLATE)
+            {
               float dx, dy;
               gsk_transform_to_translate (transform, &dx, &dy);
 
-              add_xy (nodes, dx, dy, offset_x, offset_y);
+              add_uint32 (nodes, 0); // Translate
+              add_xy (nodes, dx, dy, 0, 0);
               gsk_broadway_renderer_add_node (renderer,
                                               gsk_transform_node_get_child (node),
                                               0, 0);
             }
-          }
-        else
-          {
-            /* Fallback to texture for now */
-            break;
-          }
+          else
+            {
+              graphene_matrix_t matrix;
+
+              gsk_transform_to_matrix (transform, &matrix);
+              add_uint32 (nodes, 1); // General transform
+              add_matrix (nodes, &matrix);
+              gsk_broadway_renderer_add_node (renderer,
+                                              gsk_transform_node_get_child (node),
+                                              0, 0);
+            }
+        }
       }
       return;