initial support for string in c

src/Layout-test-utils.js

@@ -239,6 +239,26 @@ var layoutTestUtils = (function() {
     text: function(text) {
       var body = iframeText.contentDocument.body;
       var fn = function(width) {
+        // Constants for testing purposes between C/JS and other platforms
+        // Comment this block of code if you want to use the browser to
+        // generate proper sizes
+        if (text === 'small') {
+          if (width === 'grow' || width === 'shrink') {
+            return {width: 33, height: 18}
+          }
+          return {width: width, height: 18};
+        }
+        if (text === 'loooooooooong with space') {
+          if (width === 'grow') {
+            return {width: 171, height: 18};
+          }
+          if (width === 'shrink') {
+            return {width: 100, height: 36};
+          }
+          return {width: width, height: width >= 171 ? 18 : 36};
+        }
+        return;
+
         var div = document.createElement('div');
         var span = document.createElement('span');
         span.style.display = 'flex';

src/Layout.c

@@ -2,7 +2,6 @@
 #include <stdio.h>
 #include <stdlib.h>
 #include <string.h>
-#include <math.h>
 #include <stdbool.h>
 
 #include "Layout.h"
@@ -329,6 +328,34 @@ void layoutNode(css_node_t *node) {
   node->layout.position[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
     getRelativePosition(node, crossAxis);
 
+  if (node->style.measure) {
+    float width = CSS_UNDEFINED;
+    css_measure_type_t type = CSS_MEASURE_VALUE;
+
+    if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
+      width = node->style.dimensions[CSS_WIDTH];
+    } else if (getPositionType(node) == CSS_POSITION_ABSOLUTE) {
+      type = CSS_MEASURE_SHRINK;
+    } else {
+      type = CSS_MEASURE_GROW;
+    }
+
+    css_dim_t dim = node->style.measure(
+      node->style.measure_context,
+      type,
+      width
+    );
+    if (!isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
+      node->layout.dimensions[CSS_WIDTH] = dim.dimensions[CSS_WIDTH] +
+        getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_ROW);
+    }
+    if (!isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
+      node->layout.dimensions[CSS_HEIGHT] = dim.dimensions[CSS_HEIGHT] +
+        getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
+    }
+    return;
+  }
+
 
   // <Loop A> Layout non flexible children and count children by type
 

src/Layout.h

@@ -1,6 +1,7 @@
 #ifndef __LAYOUT_H
 #define __LAYOUT_H
 
+#include <math.h>
 #define CSS_UNDEFINED NAN
 
 typedef enum {
@@ -50,12 +51,22 @@ typedef enum {
   CSS_HEIGHT
 } css_dimension_t;
 
-
 typedef struct {
   float position[2];
   float dimensions[2];
 } css_layout_t;
 
+
+typedef enum {
+  CSS_MEASURE_GROW = 0,
+  CSS_MEASURE_SHRINK,
+  CSS_MEASURE_VALUE
+} css_measure_type_t;
+
+typedef struct {
+  float dimensions[2];
+} css_dim_t;
+
 typedef struct {
   css_flex_direction_t flex_direction;
   css_justify_t justify_content;
@@ -78,6 +89,9 @@ typedef struct {
   float padding[4];
   float border[4];
   float dimensions[2];
+
+  css_dim_t (*measure)(void *context, css_measure_type_t type, float width);
+  void *measure_context;
 } css_style_t;
 
 typedef struct css_node {

src/Layout.js

@@ -208,7 +208,7 @@ var computeLayout = (function() {
       var width;
       if (isDimDefined(node, CSS_FLEX_DIRECTION_ROW)) {
         width = node.style.width;
-      } else if (node.style.position === CSS_POSITION_ABSOLUTE) {
+      } else if (getPositionType(node) === CSS_POSITION_ABSOLUTE) {
         width = 'shrink';
       } else {
         width = 'grow';

src/__tests__/Layout-test.js

@@ -747,32 +747,32 @@ describe('Layout', function() {
 
   it('should layout node with just text', function() {
     testLayout(
-      {style: {measure: text('kikoo')}},
+      {style: {measure: text('small')}},
-      {width: 36, height: 18, top: 0, left: 0}
+      {width: 33, height: 18, top: 0, left: 0}
     )
   });
 
   it('should layout node with text and width', function() {
     testLayout(
-      {style: {measure: text('kikoo loool'), width: 10}},
+      {style: {measure: text('small'), width: 10}},
-      {width: 10, height: 36, top: 0, left: 0}
+      {width: 10, height: 18, top: 0, left: 0}
     )
   });
 
   it('should layout node with text, padding and margin', function() {
     testLayout(
-      {style: {measure: text('kikoo loool'), padding: 5, margin: 5}},
+      {style: {measure: text('loooooooooong with space'), padding: 5, margin: 5}},
-      {width: 82, height: 28, top: 5, left: 5}
+      {width: 181, height: 28, top: 5, left: 5}
     )
   });
 
   it('should layout node with text and position absolute', function() {
     testLayout(
       {style: {}, children: [
-        {style: {measure: text('kikoo loool'), position: 'absolute'}}
+        {style: {measure: text('loooooooooong with space'), position: 'absolute'}}
       ]},
       {width: 0, height: 0, top: 0, left: 0, children: [
-        {width: 36, height: 36, top: 0, left: 0}
+        {width: 100, height: 36, top: 0, left: 0}
       ]}
     )
   });
@@ -835,7 +835,7 @@ describe('Layout', function() {
       randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']);
       randEnum(node, 0.5, 'flex', ['none', 1]);
       randEnum(node, 0.5, 'position', ['relative', 'absolute']);
-      randEnum(node, 0.5, 'measure', [text('kikoo'), text('kikooooooooooooo looool')]);
+      randEnum(node, 0.5, 'measure', [text('small'), text('loooooooooong with space')]);
       randChildren(node, 0.2);
       return node;
     }

src/transpile.html

@@ -13,7 +13,7 @@ textarea {
 <h1>layoutCode</h1>
 <textarea id="layout_code" onclick="this.select()"></textarea>
 <script>
-document.getElementById('layout_code').value = computeLayout.layoutNode.toString()
+document.getElementById('layout_code').value = computeLayout.toString()
   .replace(/\.children\.length/g, '.children_count')
   .replace(/layout\[dim/g, 'layout.dimensions[dim')
   .replace(/layout\[pos/g, 'layout.position[pos')
@@ -36,6 +36,7 @@ var allTests = [];
 var computeDOMLayout = layoutTestUtils.computeDOMLayout;
 var computeLayout = layoutTestUtils.computeLayout;
 var reduceTest = layoutTestUtils.reduceTest;
+var text = layoutTestUtils.text;
 var layoutTestUtils = {
   testLayout: function(node, expectedLayout) {
     allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout});
@@ -45,7 +46,8 @@ var layoutTestUtils = {
   },
   computeLayout: computeLayout,
   computeDOMLayout: computeDOMLayout,
-  reduceTest: reduceTest
+  reduceTest: reduceTest,
+  text: text
 };
 function describe(name, cb) { cb(); }
 function it(name, cb) { currentTest = name; cb(); }
@@ -97,6 +99,13 @@ function printLayout(test) {
     addFloat(positive, node, spacing + 'Bottom' + suffix, spacing + '[CSS_BOTTOM]');
   }
 
+  function addMeasure(node) {
+    if ('measure' in node.style) {
+      add('node->style.measure = measure;');
+      add('node->style.measure_context = "' + node.style.measure.toString() + '";');
+    }
+  }
+
   add('{');
   level++;
 
@@ -146,6 +155,7 @@ function printLayout(test) {
     addFloat('all', node, 'top', 'position[CSS_TOP]');
     addFloat('all', node, 'right', 'position[CSS_RIGHT]');
     addFloat('all', node, 'bottom', 'position[CSS_BOTTOM]');
+    addMeasure(node);
 
     if (node.children) {
       add('init_css_node_children(node, ' + node.children.length + ');');