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 = renderText { content = config.label, color = c.textColor }
+          child = ui.text { content = config.label, color = c.textColor }
         }
       ]
     }
@@ -42,13 +42,11 @@ button = config \
 
 # inputButton (button that turns into an input)
 inputButton = config \
-  label = renderText { content = config.label };
-  labelSize = ui.measure label;
-  labelWidth = labelSize.width;
+  textSize = ui.measureText config.label;
 
   defaults = {
     h = 30,
-    w = labelWidth + 16,
+    w = textSize + 16,
     strokeWidth = 1,
     strokeColor = "#fff",
     textColor = "#fff",
@@ -88,8 +86,8 @@ inputButton = config \
             children = [
               ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
               ui.positioned {
-                x = 8, y = 4,
-                child = label
+                x = 8, y = 8,
+                child = ui.text { content = config.label, color = c.textColor }
               }
             ]
           }
@@ -326,39 +324,11 @@ glyphView = config \
   defaults = { scale = 1, color = "#fff" };
   c = { ...defaults, ...config };
   ui.stack {
-    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
+    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
   };
-
-  # 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-fontEditor.cg

@@ -84,7 +84,7 @@ fontEditor = config \
                 h = headerHeight,
                 key = "new-glyph-button",
                 label = "New Glyph",
-                onSubmit = key \ rebindAt [...c.path, "glyphs", key] { w = 5, h = 12, map = [] }
+                onSubmit = key \ rebindAt [...c.path, "glyphs", key] { w = 7, h = 12, map = [] }
               }
             ]
           };
@@ -103,10 +103,6 @@ fontEditor = config \
             }) (entries state.glyphs)
           };
 
-          ui.column { gap = 2, children = [
-            header,
-            grid,
-            text "testing"
-          ]}
+          ui.column { gap = 2, children = [ header, grid ] }
         }
   };

src/cg/06-tree.cg

@@ -54,8 +54,7 @@ treeNode = config \
 
   simple = path content color onClick \
     selected = (config.selectedPath | Some p \ p == path | None \ False);
-    # inner = ui.text { content = content, color = (selected | True \ "white" | False \ color) };
-    inner = renderText { scale = 1, content = content, color = (selected | True \ "white" | False \ color) };
+    inner = ui.text { content = content, color = (selected | True \ "white" | False \ color) };
     wrapped = (onClick
       | Some handler \ ui.clickable { onClick = handler, child = inner }
       | None \ inner);

src/cg/10-os.cg

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

src/ui.ts

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