pixelEditor coming along

src/cg/06-pixelEditor.cg

@@ -1,6 +1,28 @@
 pixelEditor = config \
-  downArrow = state \
+  upArrow = state \ (
-    { state = state, emit = [] };
+    newRow = max 0 (state.selectedRow - 1);
+    { state = state.{ selectedRow = newRow }, emit = [] });
+
+  downArrow = state \ (
+    newRow = min (state.pixelHeight - 1) (state.selectedRow + 1);
+    { state = state.{ selectedRow = newRow }, emit = [] });
+
+  leftArrow = state \ (
+    newCol = max 0 (state.selectedCol - 1);
+    { state = state.{ selectedCol = newCol }, emit = [] });
+
+  rightArrow = state \ (
+    newCol = min (state.pixelWidth - 1) (state.selectedCol + 1);
+    { state = state.{ selectedCol = newCol }, emit = [] });
+
+  toggleFocused = state \ (
+    _ = debug! "Toggling" state;
+    row = state.selectedRow;
+    col = state.selectedCol;
+    newMap = contains { x = col, y = row } state.map
+      | True \ filter (e \ e != { x = col, y = row }) state.map
+      | False \ [...state.map, { x = col, y = row }];
+    { state = state.{ map = newMap }, emit = [] });
 
   ui.stateful {
     focusable = True,
@@ -9,17 +31,18 @@ pixelEditor = config \
     key = "pixelEditor-" & config.path,
 
     init = {
-      expanded = [], # loadMap from store
+      map = [], # loadMap from store
       pixelWidth = 5,
       pixelHeight = 7,
-      zoomMultiplier = 10,
+      zoomMultiplier = 5,
-      selectedCords = { x = 0, y = 0 },
+      selectedRow = 0,
-      editing = None
+      selectedCol = 0
     },
 
     update = state event \ event
       # | Toggle pixel \ (\ toggleFocused)
-      | Key { key = "Space" } \ (\ toggleFocused)
+      | Key { key = " " } \ toggleFocused state
+      | Key { key = "Enter" } \ toggleFocused state
 
       | Key { key = "ArrowDown" } \ downArrow state
       | Key { key = "j" } \ downArrow state
@@ -35,12 +58,22 @@ pixelEditor = config \
     view = state emit \
       # onToggle = path \ emit (Toggle path);
 
-      cellWidth = state.pixelWidth * zoomMultiplier;
+      cellWidth = state.pixelWidth * state.zoomMultiplier;
-      cellHeight = state.pixelHeight * zoomMultiplier;
+      cellHeight = state.pixelHeight * state.zoomMultiplier;
-      rows = range 0 pixelHeight;
-      columns = range 0 pixelWidth;
 
-      center {
+      ui.column {
-        child = mapWidthIndex (rect) rows
+        children = map (rIdx \
+          ui.row {
+            children = map (cIdx \
+              on = contains { x = cIdx, y = rIdx } state.map;
+              color = (on |True\ "#000" |False\ "rgba(255,255,255,0.2)");
+
+              selected = and (rIdx == state.selectedRow) (cIdx == state.selectedCol);
+              strokeColor = (selected | True \ "#f00" | False \ "transparent");
+
+              ui.rect { w = cellWidth, h = cellHeight, color = color, strokeWidth = 1, strokeColor = strokeColor }
+            ) (range 0 state.pixelWidth)
+          }
+        ) (range 0 state.pixelHeight)
       }
   };

src/cg/10-os.cg

@@ -130,7 +130,6 @@ os =
 
 
   windowComponent = config \ ui.stateful {
-    a = debug! "window id" config.window,
     key = "window-" & (show config.window.id),
     focusable = True,
     init = {},

src/runtime-js.ts

@@ -96,7 +96,9 @@ export const _rt = {
         _tag: (typeof obj === 'object' && obj !== null && field in obj) ? 'True' : 'False'
     }),
     storeSearch: (query: string) => {
-        return Object.keys(store).filter(name => _rt.fuzzyMatch(query)(name)._tag === 'True');
+        return Object.keys(store)
+            .filter(name => _rt.fuzzyMatch(query)(name)._tag === 'True')
+            .sort((a, b) => a.length - b.length);
     },
     getSource: (name: string) => {
         const ast = definitions.get(name);