textEditor is happening

src/cg/03-ui-components.cg

@@ -112,8 +112,8 @@ scrollable = config \
   vBarY = c.scrollY * c.h / c.totalHeight;
 
   showHBar = c.totalWidth > c.w;
-  vBarWidth = max 20 (c.w * c.w / c.totalWidth);
-  vBarX = c.scrollX * c.w / c.totalWidth;
+  hBarWidth = max 20 (c.w * c.w / c.totalWidth);
+  hBarX = c.scrollX * c.w / c.totalWidth;
 
   ui.stack {
     children = [

src/cg/06-pixelEditor.cg

@@ -1,6 +1,6 @@
 pixelEditor = config \
   defaults = {
-    path = "newGlyph"
+    path = ["newGlyph"]
   };
 
   c = { ...defaults, ...config };

src/cg/06-textEditor.cg

@@ -0,0 +1,103 @@
+textEditor = name \
+  # defaults = {};
+
+  # c = { ...defaults, ...config };
+
+  source = getSource name;
+  lines = split "\n" source;
+
+  # clampCursor : State -> State
+  clampCursor = state \
+    line = nth state.cursorRow lines ~ unwrapOr "";
+
+    newRow = max 0 state.cursorRow;
+    newRow2 = min (len state.lines - 1) (state.cursorRow);
+
+    newCol = max 0 (state.cursorCol);
+    newCol2 = min (len line - 1) (state.cursorCol);
+
+    state.{ cursorRow = newRow2, cursorCol = newCol2 };
+
+  upArrow = state \ (
+    newState = clampCursor state.{ cursorRow = state.cursorRow - 1 };
+    { state = newState, emit = [] });
+
+  downArrow = state \ (
+    newState = clampCursor state.{ cursorRow = state.cursorRow + 1 };
+    { state = newState, emit = [] });
+
+  leftArrow = state \ (
+    newState = clampCursor state.{ cursorCol = state.cursorCol - 1 };
+    { state = newState, emit = [] });
+
+  rightArrow = state \ (
+    newState = clampCursor state.{ cursorCol = state.cursorCol + 1 };
+    { state = newState, emit = [] });
+
+  {
+    view = ctx \ ui.stateful {
+      focusable = True,
+      autoFocus = True,
+
+      key = "textEditor-" & name,
+
+      init = {
+        lines = lines,
+        cursorRow = 0,
+        cursorCol = 0,
+        scrollX = 0,
+        scrollY = 0,
+        mode = Normal # Normal | Insert | Visual
+      },
+
+      update = state event \ event
+        # | 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
+
+        | _ \ { state = state, emit = [] },
+
+      view = state emit \
+        _ = debug! "view" state;
+
+        buffer = map (l \ text l) state.lines;
+
+        scale = 2;
+        charH = 12;
+        charW = 5;
+        lineGap = 1;
+        charGap = 2;
+
+        cursor = ui.positioned {
+          x = state.cursorCol * charW * scale + charGap * state.cursorCol,
+          y = state.cursorRow * charH * scale + lineGap * state.cursorRow,
+          child = ui.rect { w = charW * scale, h = charH * scale, color = "rgba(255,255,255,0.5)" }
+        };
+
+        scrollable {
+          w = ctx.w,
+          h = ctx.h,
+          totalWidth = 1000,
+          totalHeight = 1000,
+          scrollX = state.scrollX,
+          scrollY = state.scrollY,
+          child = ui.stack {
+            children = [
+              ui.column {
+                gap = 1,
+                children = buffer
+              },
+              cursor
+            ]
+          }
+        }
+    }
+  };