Collapsible tree view working. separating out ClickOnly events for non-focusable stateful components

src/cg/06-inspector.cg

@@ -32,7 +32,7 @@ inspector = config \
         # totalHeight = (len sourceLines) * lineHeight,
         totalHeight = 1000,
         onScroll = _ \ noOp,
-        child = tree { value = reflected, depth = 0 },
+        child = tree { value = reflected, depth = 0, path = config.name },
         # child = ui.column {
         #   gap = 0,
         #   children = map (line \

src/cg/06-tree.cg

@@ -20,16 +20,34 @@ tree = config \
   | ConstructorValue { tag = tag } \ simple tag "#fc6"
   | FunctionValue _ \ simple "<fn>" "#888"
   | RecordValue entries \
-    ui.column {
-      gap = 0,
-      children = map (entry \
-        (valueLabel entry.value)
-        | Some label \ simple (entry.key & " = " & label) "#aaa"
-        | None \ ui.column { gap = 0, children = [
-            simple entry.key "#aaa",
-            tree { value = entry.value, depth = depth + 1 }
-          ]}
-      ) entries
+    ui.stateful {
+      key = "tree-" & config.path,
+      init = { collapsed = True },
+
+      update = state event \ event
+        | Clicked _ \ (
+        _ = debug "clicked on node" [];
+        { state = state.{ collapsed = (not state.collapsed) }, emit = [] }
+        )
+        | _ \ { state = state, emit = [] },
+
+      view = state \
+        ui.column {
+          gap = 0,
+          children = [
+            simple ((state.collapsed | True \ "▶ " | False \ "▼ ") & (show (len entries)) & " fields") "#888",
+            ...(state.collapsed
+              | True \ []
+              | False \ map (entry \
+                (valueLabel entry.value)
+                | Some label \ simple (entry.key & " = " & label) "#aaa"
+                | None \ ui.column { gap = 0, children = [
+                    simple entry.key "#aaa",
+                    tree { value = entry.value, depth = depth + 1, path = config.path & "." & entry.key }
+                  ]}
+              ) entries)
+          ]
+        }
     }
   | ListValue items \
     ui.column {

src/runtime-compiled.ts

@@ -93,15 +93,13 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
                 }
 
                 const viewResult = instance.view(instance.state);
-                let viewUI = viewResult;
-
-                if (ui.focusable) {
-                    viewUI = {
-                        kind: 'clickable',
-                        child: viewUI,
-                        onClick: (coords: any) => ({ _tag: 'FocusAndClick', _0: fullKey, _1: coords })
-                    };
-                }
+                const viewUI = {
+                    kind: 'clickable',
+                    child: viewResult,
+                    onClick: ui.focusable
+                        ? (coords: any) => ({ _tag: 'FocusAndClick', _0: fullKey, _1: coords })
+                        : (coords: any) => ({ _tag: 'ClickOnly', _0: fullKey, _1: coords })
+                };
                 return expandStateful(viewUI, [...path, ui.key], renderedKeys);
             }
 
@@ -191,6 +189,13 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
             return;
         }
 
+        if (event._tag === 'ClickOnly') {
+            const componentKey = event._0;
+            const coords = event._1;
+            handleComponentEvent(componentKey, { _tag: 'Clicked', _0: coords });
+            return;
+        }
+
         if (event._tag === 'Rebind') {
             store.rebind(event._0, event._1, event._2);
             return;