Rendering my disgusting font. using it in a few places. wow its hideous

src/cg/03-ui-components.cg

@@ -34,7 +34,7 @@ button = config \
         ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
         ui.positioned {
           x = 10, y = 8,
-          child = ui.text { content = config.label, color = c.textColor }
+          child = renderText { content = config.label, color = c.textColor }
         }
       ]
     }
@@ -42,11 +42,13 @@ button = config \
 
 # inputButton (button that turns into an input)
 inputButton = config \
-  textSize = ui.measureText config.label;
+  label = renderText { content = config.label };
+  labelSize = ui.measure label;
+  labelWidth = labelSize.width;
 
   defaults = {
     h = 30,
-    w = textSize + 16,
+    w = labelWidth + 16,
     strokeWidth = 1,
     strokeColor = "#fff",
     textColor = "#fff",
@@ -86,8 +88,8 @@ inputButton = config \
             children = [
               ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
               ui.positioned {
-                x = 8, y = 8,
-                child = ui.text { content = config.label, color = c.textColor }
+                x = 8, y = 4,
+                child = label
               }
             ]
           }
@@ -324,11 +326,39 @@ glyphView = config \
   defaults = { scale = 1, color = "#fff" };
   c = { ...defaults, ...config };
   ui.stack {
-    children = map (pixel \
-      ui.positioned {
-        x = pixel.x * c.scale,
-        y = pixel.y * c.scale,
-        child = ui.rect { w = c.scale, h = c.scale, color = c.color }
-      }
-    ) c.glyph.map
+    children = [
+      ui.rect { w = c.glyph.w * c.scale, h = c.glyph.h * c.scale, color = "transparent" },
+      ...map (pixel \
+        ui.positioned {
+          x = pixel.x * c.scale,
+          y = pixel.y * c.scale,
+          child = ui.rect { w = c.scale, h = c.scale, color = c.color }
+        }
+      ) c.glyph.map
+    ]
   };
+
+# renderText : TextConfig \ UI
+renderText = config \
+  # get these from system theme at some point
+  defaults = { content = "", scale = 2, color = "#fff" };
+  c = { ...defaults, ...config };
+  chars = split "" c.content;
+  _ = debug! "chars" chars;
+  ui.row {
+    children = map (char \
+      # _ = debug! "here. char" char;
+      getAt ["myFontBackup", "glyphs", char]
+      | Some g \ glyphView { glyph = g, scale = c.scale }
+      | None \ ui.rect { w = 0, h = 0 }
+    ) chars,
+    gap = 4
+  };
+
+  # fold (acc c \
+  #   { pos = acc.pos + 8,
+  #     ui = [...ui, ui.positioned { x }]
+  #   }) { pos = 0, ui = [] } chars;
+
+# text : String \ UI
+text = content \ renderText { content = content };

src/cg/06-font.cg

@@ -1,4 +1,4 @@
-myFontBackup = { glyphs = {
+myFont = { glyphs = {
   "0" = {
     w = 7,
     h = 12,

src/cg/06-fontEditor.cg

@@ -103,6 +103,10 @@ fontEditor = config \
             }) (entries state.glyphs)
           };
 
-          ui.column { gap = 2, children = [ header, grid ] }
+          ui.column { gap = 2, children = [
+            header,
+            grid,
+            text "testing"
+          ]}
         }
   };

src/cg/10-os.cg

@@ -82,7 +82,7 @@ os =
     | None \ openWindow title content width;
 
   renderWindow = window isActive \
-    titleBarHeight = 30;
+    titleBarHeight = 36;
 
     ui.stack {
       children = [
@@ -107,14 +107,15 @@ os =
                         ui.rect { w = titleBarHeight, h = titleBarHeight, color = "rgba(255,255,255,0.2)" },
                         # button text
                         ui.positioned {
-                          x = 9, y = 7, child = ui.text { content = "x" }
+                          x = 10, y = 5, child = text "x"
                         }
                       ]
                     }
                   },
 
                   # title
-                  ui.positioned { x = 8, y = 8, child = ui.text { content = window.title, color = "white" } },
+                  # ui.positioned { x = 8, y = 8, child = ui.text { content = window.title, color = "white" } },
+                  ui.positioned { x = 8, y = 8, child = renderText { content = window.title, color = "white" } },
                 ]
               }
             ]

src/ui.ts

@@ -228,8 +228,13 @@ export function _measure(ui: UIValue): { width: number, height: number } {
             }
         }
 
-        case 'positioned':
-            return measure(ui.child);
+        case 'positioned': {
+            const childSize = measure(ui.child);
+            return {
+                width: ui.x + childSize.width,
+                height: ui.y + childSize.height,
+            };
+        }
 
         case 'stack': {
             let maxWidth = 0;