More font crap. fixing getField typo.

src/cg/03-ui-components.cg

@@ -14,11 +14,13 @@ center = parentW parentH child \
 
 # button : Record -> ui
 button = config \
-  textSize = ui.measureText config.label;
+  label = renderText { content = config.label };
+  labelSize = ui.measure label;
+  labelWidth = labelSize.width;
 
   defaults = {
     h = 30,
-    w = textSize + 20,
+    w = labelWidth + 20,
     strokeWidth = 1,
     strokeColor = "#fff",
     textColor = "#fff",
@@ -204,7 +206,8 @@ textInput = config \
 
   calcScrollOffset = text cursorPos scrollOffset inputWidth \
     textBeforeCursor = slice text 0 cursorPos;
-    cursorX = ui.measureText textBeforeCursor;
+    # cursorX = ui.measureText textBeforeCursor;
+    cursorX = (measureText { content = textBeforeCursor, scale = 2 }).width;
     (cursorX < scrollOffset
     | True \ max 0 (cursorX - 20)
     | False \
@@ -216,8 +219,10 @@ textInput = config \
     (index >= len text)
     | True \ len text
     | False \ (
-      widthSoFar = ui.measureText (slice text 0 index);
+      # widthSoFar = ui.measureText (slice text 0 index);
-      widthNext = ui.measureText (slice text 0 (index + 1));
+      widthSoFar = (measureText { content = (slice text 0 index), scale = 2 }).width;
+      # widthNext = ui.measureText (slice text 0 (index + 1));
+      widthNext = (measureText { content = (slice text 0 (index + 1)), scale = 2 }).width;
       midpoint = (widthSoFar + widthNext) / 2;
       (targetX < midpoint
       | True \ index
@@ -294,7 +299,8 @@ textInput = config \
       text = (hasField "value" c | True \ c.value | False \ state.text);
       cursorPos = (text == state.text | True \ state.cursorPos | False \ len text);
       textBeforeCursor = slice text 0 cursorPos;
-      cursorX = ui.measureText textBeforeCursor;
+      # cursorX = ui.measureText textBeforeCursor;
+      cursorX = (measureText { content = textBeforeCursor, scale = 2 }).width;
       padding = 8;
 
       ui.clip {
@@ -307,7 +313,8 @@ textInput = config \
             ui.positioned {
               x = 8 - state.scrollOffset,
               y = 0,
-              child = ui.positioned { x = 0, y = 12, child = ui.text { content = text, color = c.color } }
+              # child = ui.positioned { x = 0, y = 12, child = ui.text { content = text, color = c.color } }
+              child = ui.positioned { x = 0, y = 12, child = renderText { content = text, color = c.color } }
             },
 
             (state.focused
@@ -340,25 +347,33 @@ glyphView = config \
 
 # renderText : TextConfig \ UI
 renderText = config \
-  # get these from system theme at some point
+  defaults = { content = "", scale = 2, color = "#fff", font = "myFont2" };
-  defaults = { content = "", scale = 2, color = "#fff" };
   c = { ...defaults, ...config };
+  font = getAt [c.font] | Some f \ f | None \ { glyphs = {} };
+  charW = font.charWidth;
+  gap = c.scale;
   chars = split "" c.content;
-  _ = debug! "chars" chars;
+
   ui.row {
     children = map (char \
-      # _ = debug! "here. char" char;
+      getField char font.glyphs
-      getAt ["myFontBackup", "glyphs", char]
       | Some g \ glyphView { glyph = g, scale = c.scale }
-      | None \ ui.rect { w = 0, h = 0 }
+      | None \ ui.rect { w = charW * c.scale, h = 12 * c.scale }
     ) chars,
-    gap = 4
+    gap = gap
   };
 
-  # fold (acc c \
-  #   { pos = acc.pos + 8,
-  #     ui = [...ui, ui.positioned { x }]
-  #   }) { pos = 0, ui = [] } chars;
-
 # text : String \ UI
 text = content \ renderText { content = content };
+
+measureText = config \
+  defaults = { content = "", scale = 2, font = "myFont2" };
+  c = { ...defaults, ...config };
+  font = getAt [c.font] | Some f \ f | None \ { charWidth = 5 };
+  charW = font.charWidth;
+  gap = c.scale;
+  strLen = len config.content;
+  {
+    width = strLen * charW * c.scale + max 0 (strLen - 1) * gap,
+    height = 12 * c.scale
+  };

src/cg/10-os.cg

@@ -114,7 +114,6 @@ os =
                   },
 
                   # 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" } },
                 ]
               }
@@ -194,7 +193,7 @@ os =
       | Value v \ (hasField "view" v
         | True \ openOrFocus input v.view (appWidth v)
         | False \ (getSource input == ""
-          | True \ openOrFocus input (_ \ ui.text { content = show v, color = "white" }) dw
+          | True \ openOrFocus input (_ \ renderText { content = show v, color = "white" }) dw
           | False \ (
             app = inspector { name = input };
             openOrFocus input app.view (appWidth app))))

src/runtime-js.ts

@@ -96,7 +96,7 @@ export const _rt = {
     hasField: (field: string) => (obj: any) => ({
         _tag: (typeof obj === 'object' && obj !== null && field in obj) ? 'True' : 'False'
     }),
-    getfield: (field: string) => (obj: any) => obj[field] !== undefined
+    getField: (field: string) => (obj: any) => obj[field] !== undefined
         ? { _tag: 'Some', _0: obj[field] }
         : { _tag: 'None' },
     entries: (obj: any) => Object.entries(obj).map(([k, v]) => ({ key: k, value: v })),