More layout fun.

src/cg/03-ui-components.cg

@@ -380,13 +380,19 @@ measureText = config \
     height = 12 * c.scale
   };
 
+sizedText = content \
+  size = measureText { content = content };
+  { ui = renderText { content = content }, w = size.width, h = size.height };
+
 # new CG layout
 
 LayoutChild = Fixed Int (Int \ Int \ UI) | Flex Int (Int \ Int \ UI);
 Alignment = Start | Center | End;
 Direction = Col | Row;
 
-layoutDir = dir constraints children \
+layoutDir
+  : Direction \ { w : Int, h : Int } \ List LayoutChild \ { ui : UI, w : Int, h : Int }
+  = dir constraints children \
   mainSize = dir | Col \ constraints.h | Row \ constraints.w;
   crossSize = dir | Col \ constraints.w | Row \ constraints.h;
 
@@ -399,7 +405,7 @@ layoutDir = dir constraints children \
    remaining = mainSize - info.fixedMain;
 
    # Pass 2
-   fold (acc child \
+   result = fold (acc child \
      allocated = (child
        | Fixed s view \ { s = s, view = view }
        | Flex n view \ { s = remaining * n / info.totalFlex, view = view });
@@ -415,12 +421,23 @@ layoutDir = dir constraints children \
       };
 
     acc.{ pos = acc.pos + allocated.s, children = [...acc.children, rendered] }
-  ) { pos = 0, children = [] } children
+  ) { pos = 0, children = [] } children;
-  ~ (r \ r.children)
+
-  ~ (c \ ui.stack { children = c });
+  { ui = ui.stack { children = result.children }, w = constraints.w, h = constraints.h };
 
 col = layoutDir Col;
-rol = layoutDir Row;
+row = layoutDir Row;
+
+align = hAlign vAlign w h child \
+  x = hAlign
+    | Start \ 0
+    | Center \ (w - child.w) / 2
+    | End \ w - child.w;
+  y = vAlign
+    | Start \ 0
+    | Center \ (h - child.h) / 2
+    | End \ h - child.h;
+  { ui = ui.positioned { x = x, y = y, child = child.ui }, w = w, h = h };
 
 testApp = name \
   { view = ctx \
@@ -429,4 +446,18 @@ testApp = name \
       Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main content" }),
       Fixed 30 (w h \ box { w = w, h = h, color = "blue", child = text "Footer" }),
     ]
+    ~ (e \ e.ui)
+  };
+
+testApp2 = _ \
+  { view = ctx \
+    col { w = ctx.w, h = ctx.h } [
+      Fixed 40 (w h \ (align Center Center w h (sizedText "Header")).ui),
+      Flex 1 (w h \ (row { w = w, h = h } [
+        Fixed 200 (w h \ box { w = w, h = h, color = "#2a2a3e", child = text "Sidebar" }),
+        Flex 1 (w h \ box { w = w, h = h, color = "#1a1a2e", child = text "Main" }),
+      ]).ui),
+      Fixed 30 (w h \ (align Center Center w h (sizedText "Footer")).ui),
+    ]
+    ~ (e \ e.ui)
   };

src/cg/06-font.cg

@@ -1,4 +1,5 @@
-myFont = { glyphs = {
+myFont = {
+  charWidth = 7, glyphs = {
   "0" = {
     w = 7,
     h = 12,
@@ -5836,7 +5837,7 @@ myFont = { glyphs = {
   }
 } };
 
-myFont2 = { glyphs = {
+myFont2 = { charWidth = 5, glyphs = {
     "0" = {
       w = 5,
       h = 12,