broadway: Use css transforms

This allows generic transforms nodes to work.
This commit is contained in:
Alexander Larsson 2019-03-27 19:27:16 +01:00
parent 411dc7e138
commit 9212727f53
4 changed files with 66 additions and 18 deletions

View File

@ -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;

View File

@ -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:

View File

@ -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;
}

View File

@ -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;