Starting on the pixelEditor. Fixing state reset issue when moving stateful components in the store path. adding hasField host function

src/cg/06-pixelEditor.cg

@@ -0,0 +1,46 @@
+pixelEditor = config \
+  downArrow = state \
+    { state = state, emit = [] };
+
+  ui.stateful {
+    focusable = True,
+    autoFocus = True,
+
+    key = "pixelEditor-" & config.path,
+
+    init = {
+      expanded = [], # loadMap from store
+      pixelWidth = 5,
+      pixelHeight = 7,
+      zoomMultiplier = 10,
+      selectedCords = { x = 0, y = 0 },
+      editing = None
+    },
+
+    update = state event \ event
+      # | Toggle pixel \ (\ toggleFocused)
+      | Key { key = "Space" } \ (\ toggleFocused)
+
+      | 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 \
+      # onToggle = path \ emit (Toggle path);
+
+      cellWidth = state.pixelWidth * zoomMultiplier;
+      cellHeight = state.pixelHeight * zoomMultiplier;
+      rows = range 0 pixelHeight;
+      columns = range 0 pixelWidth;
+
+      center {
+        child = mapWidthIndex (rect) rows
+      }
+  };

src/cg/10-os.cg

@@ -128,8 +128,10 @@ os =
       ]
     };
 
+
   windowComponent = config \ ui.stateful {
-    key = "window-" & (show config.index),
+    a = debug! "window id" config.window,
+    key = "window-" & (show config.window.id),
     focusable = True,
     init = {},
     update = state event \ event
@@ -168,6 +170,8 @@ os =
       Item { label = q }
     ];
 
+  isUI = v \ hasField "kind" v;
+
   openOrFocus = title content \
     index title (map (w \ w.title) osState.windows)
     | Some i \ focusWindow i
@@ -178,9 +182,11 @@ os =
     result
     | Defined name \ openOrFocus name (size \ inspector { name = name, w = size.w, h = size.h })
 
-    | Value v \ (getSource input == ""
-      | True \ openOrFocus input (_ \ ui.text { content = show v, color = "white" })
-      | False \ openOrFocus input (size \ inspector { name = input, w = size.w, h = size.h }))
+    | Value v \ (isUI v
+      | True \ openOrFocus input (_ \ v)
+      | False \ (getSource input == ""
+        | True \ openOrFocus input (_ \ ui.text { content = show v, color = "white" })
+        | False \ openOrFocus input (size \ inspector { name = input, w = size.w, h = size.h })))
     | Err msg \ (_ = debug! "Error" msg; noOp);
 
   handleFocusLeftEvent = state \

src/runtime-compiled.ts

@@ -70,7 +70,8 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
     function expandStateful(ui: UIValue, path: number[], renderedKeys: Set<string>): UIValue {
         switch (ui.kind) {
             case 'stateful': {
-                const fullKey = [...path, ui.key].join('.');
+                // const fullKey = [...path, ui.key].join('.');
+                const fullKey = [...path.filter((p: any) => typeof p === 'string'), ui.key].join('.');
                 renderedKeys.add(fullKey);
 
                 let instance = componentInstances.get(fullKey);

src/runtime-js.ts

@@ -92,6 +92,9 @@ export const _rt = {
         }
         return { _tag: qi === q.length ? 'True' : 'False' };
     },
+    hasField: (field: string) => (obj: any) => ({
+        _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');
     },