More components. better app interface. more progress on fontEditor

src/cg/03-ui-components.cg

@@ -14,16 +14,86 @@ center = parentW parentH child \
 
 # button : Record -> ui
 button = config \
+  textSize = ui.measureText config.label;
+
+  defaults = {
+    h = 30,
+    w = textSize + 20,
+    strokeWidth = 1,
+    strokeColor = "#fff",
+    textColor = "#fff",
+    label = ""
+  };
+
+  c = { ...defaults, ...config };
+
   ui.clickable {
     onClick = config.event,
     child = ui.stack {
       children = [
-        ui.rect { w = 100, h = 40, color = "#eee" },
+        ui.rect { w = c.w, h = c.h, strokeColor = c.strokeColor, strokeWidth = c.strokeWidth },
-        ui.text { content = config.label, x = 10, y = 25, color = "#222" }
+        ui.positioned {
+          x = 10, y = 8,
+          child = ui.text { content = config.label, color = c.textColor }
+        }
       ]
     }
   };
 
+# inputButton (button that turns into an input)
+inputButton = config \
+  textSize = ui.measureText config.label;
+
+  defaults = {
+    h = 30,
+    w = textSize + 16,
+    strokeWidth = 1,
+    strokeColor = "#fff",
+    textColor = "#fff",
+    backgroundColor = "transparent",
+    label = ""
+  };
+
+  c = { ...defaults, ...config };
+
+  ui.stateful {
+    key = c.key,
+    focusable = True,
+
+    init = { editing = False },
+
+    update = state event \ event
+      | Activate \ { state = state.{ editing = True }, emit = [] }
+      | Submit text \ { state = state.{ editing = False }, emit = [c.onSubmit text] }
+      | Key { key = "Escape" } \ { state = state.{ editing = False }, emit = [] }
+      | _ \ { state = state, emit = [] },
+
+    view = state emit \
+      state.editing
+        | True \ textInput {
+          key = c.key & "-input",
+          autoFocus = True,
+          w = c.w, h = c.h,
+          strokeWidth = 1,
+          strokeColor = "#fff",
+          color = c.textColor,
+          backgroundColor = c.backgroundColor,
+          onSubmit = text \ emit (Submit text)
+        }
+        | False \ ui.clickable {
+          onClick = \ emit Activate,
+          child = ui.stack {
+            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 }
+              }
+            ]
+          }
+        }
+  };
+
 # scrollable
 scrollable = config \
   defaults = {
@@ -111,6 +181,8 @@ textInput = config \
     onChange = _ \ noOp,
     initialValue = "",
     autoFocus = False,
+    strokeWidth = 0,
+    strokeColor = "transparent"
   };
 
   c = { ...defaults, ...config };
@@ -228,7 +300,7 @@ textInput = config \
         h = c.h,
         child = ui.stack {
           children = [
-            ui.rect { w = c.w, h = c.h, color = c.backgroundColor, radius = 0 },
+            ui.rect { w = c.w, h = c.h, color = c.backgroundColor, radius = 0, strokeWidth = c.strokeWidth, strokeColor = c.strokeColor },
 
             ui.positioned {
               x = 8 - state.scrollOffset,
@@ -251,7 +323,6 @@ textInput = config \
 glyphView = config \
   defaults = { scale = 1, color = "#fff" };
   c = { ...defaults, ...config };
-  _ = debug! "glyphView" c;
   ui.stack {
     children = map (pixel \
       ui.positioned {

src/cg/06-fontEditor.cg

@@ -5,67 +5,89 @@ fontEditor = config \
 
   c = { ...defaults, ...config };
 
-  _ = debug! "here" c.path;
   existing = eval! (c.path);
-  _ = debug! "here2" existing;
 
   # return app
   {
-    view = size \ ui.stateful {
+    view = ctx \
-      focusable = True,
+      editGlyph = path \
-      autoFocus = True,
+        app = pixelEditor { path = path };
+        ctx.openApp path app.view app.width;
 
-      key = "fontEditor-" & c.path,
+      ui.stateful {
+        focusable = True,
+        autoFocus = True,
 
-      init = existing
+        key = "fontEditor-" & c.path,
-        | Value v \ {
+
-          glyphs = v.glyphs,
+        init = existing
-          height = v.height
+          | Value v \ {
-        }
+            glyphs = v.glyphs,
-        | _ \ {
+            height = v.height
-          glyphs = [],
+          }
-          height = 7
+          | _ \ {
-        },
+            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
 
-      update = state event \ event
+          | Key { key = "ArrowDown" } \ downArrow state
-        | ClickCell { x = x, y = y } \ toggleFocused state.{ selectedRow = y, selectedCol = x }
+          | Key { key = "j" } \ downArrow state
-        | Key { key = " " } \ toggleFocused state
+          | Key { key = "ArrowUp" } \ upArrow state
-        | Key { key = "Enter" } \ toggleFocused 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
 
-        | Key { key = "ArrowDown" } \ downArrow state
+          | UpdateHeight h \ (
-        | Key { key = "j" } \ downArrow state
+            newState = state.{ pixelHeight = (int h) };
-        | Key { key = "ArrowUp" } \ upArrow state
+            { state = newState, emit = saveGlyph newState })
-        | 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 \ (
+          | _ \ { state = state, emit = [] },
-          newState = state.{ pixelHeight = (int h) };
-          { state = newState, emit = saveGlyph newState })
 
-        | _ \ { state = state, emit = [] },
+        view = state emit \
+          tileSize = 50;
 
-      view = state emit \
+          tileView = g \
-        tileSize = 50;
+            glyph = g.value;
+            key = g.key;
+            scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 2);
+            ui.clickable {
+              onClick = \ editGlyph (c.path & ".glyphs." & key),
+              child = ui.stack {
+                children = [
+                  ui.rect { w = tileSize, h = tileSize, strokeWidth = 1, strokeColor = "#fff" },
+                  # center tileSize tileSize (glyphView { glyph = glyph, scale = scale })
+                  ui.positioned {
+                    x = scale, y = scale,
+                    child = glyphView { glyph = glyph, scale = scale }
+                  }
+                ]
+              }
+            };
 
-        tileView = g \
+          header = ui.row {
-          glyph = g.value;
+            gap = 10,
-          scale = max 1 (floor (min (tileSize / glyph.w) (tileSize / glyph.h)) - 2);
+            children = [
-          _ = debug! "scael" scale;
+              inputButton {
-          ui.clickable {
+                key = "new-glyph-button",
-            child = ui.stack {
+                label = "New Glyph",
-              children = [
+                onSubmit = key \ rebindAt (c.path & ".glyphs." & key) { w = 5, h = 7, map = [] }
-                ui.rect { w = tileSize, h = tileSize, strokeWidth = 1, strokeColor = "#fff" },
+              }
-                glyphView { glyph = glyph, scale = scale }
+            ]
-              ]
-            }
           };
 
-        ui.column {
+          ui.column {
-          gap = 2,
+            gap = 2,
-          children = map tileView (entries state.glyphs)
+            children = [
+              header,
+              ...map tileView (entries state.glyphs)
+            ]
+          }
         }
-      }
   };

src/cg/06-inspector.cg

@@ -1,7 +1,7 @@
 inspector = config \
 {
   width = 600,
-  view = size \
+  view = ctx \
     val = eval! config.name;
 
     reflected = val
@@ -13,7 +13,7 @@ inspector = config \
     tree {
       value = reflected,
       path = config.name,
-      w = size.w,
+      w = ctx.w,
-      h = size.h - textInputHeight
+      h = ctx.h - textInputHeight
     }
 };

src/cg/06-pixelEditor.cg

@@ -36,13 +36,12 @@ pixelEditor = config \
     { state = newState, emit = saveGlyph newState });
 
   existing = eval! (c.path);
-  _ = debug! "existing" existing;
 
   # return App
   {
     width = 600,
 
-    view = size \ ui.stateful {
+    view = ctx \ ui.stateful {
       focusable = True,
       autoFocus = True,
 
@@ -146,7 +145,7 @@ pixelEditor = config \
         ui.column {
           children = [
             header,
-            center size.w size.h grid
+            center ctx.w ctx.h grid
           ]
         }
     }

src/cg/10-os.cg

@@ -76,6 +76,11 @@ os =
     idx = osState.wm.focusedIndex;
     osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
 
+  openOrFocus = title content width \
+    index title (map (w \ w.title) osState.windows)
+    | Some i \ focusWindow i
+    | None \ openWindow title content width;
+
   renderWindow = window isActive \
     titleBarHeight = 30;
 
@@ -122,13 +127,17 @@ os =
           child = ui.clip {
             w = (windowWidth window),
             h = viewport.height - titleBarHeight,
-            child = window.content { w = (windowWidth window), h = viewport.height - titleBarHeight }
+            child = window.content {
+              w = (windowWidth window),
+              h = viewport.height - titleBarHeight,
+              openApp = openOrFocus,
+              close = _ \ closeWindowById window.id
+            }
           }
         }
       ]
     };
 
-
   windowComponent = config \ ui.stateful {
     key = "window-" & (show config.window.id),
     focusable = True,
@@ -172,12 +181,6 @@ os =
       Item { label = q }
     ];
 
-
-  openOrFocus = title content width \
-    index title (map (w \ w.title) osState.windows)
-    | Some i \ focusWindow i
-    | None \ openWindow title content width;
-
   onSelect = input \
     historyEvent = paletteHistory := take 50 [input, ...(filter (e \ e != input) paletteHistory)];
     dw = osState.wm.defaultWindowWidth;