glyphView. fontEditor. a few more host functions

src/cg/03-ui-components.cg

@@ -247,3 +247,17 @@ textInput = config \
         }
       }
   };
+
+glyphView = config \
+  defaults = { scale = 1, color = "#fff" };
+  c = { ...defaults, ...config };
+  _ = debug! "glyphView" c;
+  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
+  };

src/cg/06-fontEditor.cg

@@ -1,55 +1,71 @@
 fontEditor = config \
-  defaults = { };
+  defaults = {
+    path = "newFont"
+  };
+
   c = { ...defaults, ...config };
 
-  size \ ui.stateful {
-    focusable = True,
-    autoFocus = True,
+  _ = debug! "here" c.path;
+  existing = eval! (c.path);
+  _ = debug! "here2" existing;
 
-    key = "fontEditor-" & c.path,
+  # return app
+  {
+    view = size \ ui.stateful {
+      focusable = True,
+      autoFocus = True,
 
-    init = existing
-      | Value v \ {
-        map = v.map,
-        pixelWidth = 5,
-        pixelHeight = 7,
-        cellSize = 30,
-        selectedRow = 0,
-        selectedCol = 0
+      key = "fontEditor-" & c.path,
+
+      init = existing
+        | Value v \ {
+          glyphs = v.glyphs,
+          height = v.height
+        }
+        | _ \ {
+          glyphs = [],
+          height = 7
+        },
+
+      update = state event \ event
+        | ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
+        | Key { key = " " } \ toggleFocused state
+        | Key { key = "Enter" } \ toggleFocused state
+
+        | Key { key = "ArrowDown" } \ downArrow state
+        | Key { key = "j" } \ downArrow state
+        | Key { key = "ArrowUp" } \ upArrow state
+        | Key { key = "k" } \ upArrow state
+        | Key { key = "ArrowLeft" } \ leftArrow state
+        | Key { key = "h" } \ leftArrow state
+        | Key { key = "ArrowRight" } \ rightArrow state
+        | Key { key = "l" } \ rightArrow state
+
+        | UpdateHeight h \ (
+          newState = state.{ pixelHeight = (int h) };
+          { state = newState, emit = saveGlyph newState })
+
+        | _ \ { state = state, emit = [] },
+
+      view = state emit \
+        tileSize = 50;
+
+        tileView = g \
+          glyph = g.value;
+          scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 2);
+          _ = debug! "scael" scale;
+          ui.clickable {
+            child = ui.stack {
+              children = [
+                ui.rect { w = tileSize, h = tileSize, strokeWidth = 1, strokeColor = "#fff" },
+                glyphView { glyph = glyph, scale = scale }
+              ]
+            }
+          };
+
+        ui.column {
+          gap = 2,
+          children = map tileView (entries state.glyphs)
+        }
       }
-      | _ \ {
-        map = [],
-        pixelWidth = 5,
-        pixelHeight = 7,
-        cellSize = 30,
-        selectedRow = 0,
-        selectedCol = 0
-      },
-
-    update = state event \ event
-      | ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
-      | Key { key = " " } \ toggleFocused state
-      | Key { key = "Enter" } \ toggleFocused state
-
-      | Key { key = "ArrowDown" } \ downArrow state
-      | Key { key = "j" } \ downArrow state
-      | Key { key = "ArrowUp" } \ upArrow state
-      | Key { key = "k" } \ upArrow state
-      | Key { key = "ArrowLeft" } \ leftArrow state
-      | Key { key = "h" } \ leftArrow state
-      | Key { key = "ArrowRight" } \ rightArrow state
-      | Key { key = "l" } \ rightArrow state
-
-      | UpdateWidth w \ (
-        newState = state.{ pixelWidth = (int w) };
-        { state = newState, emit = saveGlyph newState })
-
-      | UpdateHeight h \ (
-        newState = state.{ pixelHeight = (int h) };
-        { state = newState, emit = saveGlyph newState })
-
-      | _ \ { state = state, emit = [] },
-
-    view = state emit \
-      ui.text { content = "testing" }
   };

src/cg/06-pixelEditor.cg

@@ -35,7 +35,6 @@ pixelEditor = config \
     newState = state.{ map = newMap };
     { state = newState, emit = saveGlyph newState });
 
-  _ = debug! "c.path" c.path;
   existing = eval! (c.path);
   _ = debug! "existing" existing;
 

src/runtime-js.ts

@@ -20,6 +20,8 @@ export const _rt = {
     cat: (a: any) => (b: any) => Array.isArray(a) ? [...a, ...b] : a + b,
     max: (a: number) => (b: number) => Math.max(a, b),
     min: (a: number) => (b: number) => Math.min(a, b),
+    floor: (a: number) => Math.floor(a),
+    ceiling: (a: number) => Math.ceil(a),
 
     eq: (a: any) => (b: any) => ({ _tag: deepEqual(a, b) ? 'True' : 'False' }),
     neq: (a: any) => (b: any) => ({ _tag: deepEqual(a, b) ? 'False' : 'True' }),
@@ -94,6 +96,11 @@ 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
+        ? { _tag: 'Some', _0: obj[field] }
+        : { _tag: 'None' },
+    entries: (obj: any) => Object.entries(obj).map(([k, v]) => ({ key: k, value: v })),
+    keys: (obj: any) => Object.keys(obj),
     isFunction: (v: any) => ({ _tag: typeof v === 'function' ? 'True' : 'False' }),
     storeSearch: (query: string) => {
         return Object.keys(store)
@@ -228,6 +235,9 @@ export const _rt = {
             const compiled = compile(defs[0].body);
             const fn = new Function('_rt', 'store', `return ${compiled}`);
             const result = fn(_rt, store);
+            if (result === undefined) {
+                return { _tag: 'None' };
+            }
             return { _tag: 'Value', _0: result };
         } catch (e: any) {
             return { _tag: 'Err', _0: e.message };