broadway: Use css transforms

This allows generic transforms nodes to work.

3 files changed, 38 insertions, 8 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;
         }