Fixing some bugs. fixing some scroll issues

src/cg/03-ui-components.cg

@@ -28,7 +28,8 @@ button = config \
 scrollable = config \
   defaults = {
     scrollX = 0,
-    scrollY = 0
+    scrollY = 0,
+    onScroll = _ \ noOp
   };
   c = { ...defaults, ...config };
 

src/cg/06-inspector.cg

@@ -1,6 +1,5 @@
 inspector = config \
   val = eval config.name;
-  _ = debug "val" val;
 
   reflected = val
     | Value v \ reflect v

src/cg/06-tree.cg

@@ -1,5 +1,6 @@
 treeNodeHeight = value path expanded \
   lineH = 20;
+
   valueLabel = v \ v
   | NumberValue n \ Some n
   | StringValue n \ Some n
@@ -8,22 +9,22 @@ treeNodeHeight = value path expanded \
   | _ \ None;
 
   value
-  | RecordValue entries \
+  | RecordValue entries \ (
     (contains path expanded)
     | True \ lineH + (sum (map (entry \
         (valueLabel entry.value)
         | Some _ \ lineH
         | None \ lineH + (treeNodeHeight entry.value (path & "." & entry.key) expanded)
       ) entries))
-    | False \ lineH
-  | ListValue items \
+    | False \ lineH)
+  | ListValue items \ (
     (contains path expanded)
     | True \ lineH + (sum (mapWithIndex (item i \
         (valueLabel item)
         | Some _ \ lineH
         | None \ lineH + (treeNodeHeight item (path & "." & (show i)) expanded)
       ) items))
-    | False \ lineH
+    | False \ lineH)
   | _ \ lineH;
 
 treeNode = config \
@@ -94,12 +95,18 @@ treeNode = config \
 tree = config \
   ui.stateful {
     key = "tree-" & config.path,
-    init = { expanded = [] },
+    init = { expanded = [], scrollY = 0 },
 
     update = state event \ event
       | Toggle path \ ((contains path state.expanded)
         | True \ { state = state.{ expanded = filter (p \ p != path) state.expanded }, emit = [] }
         | False \ { state = state.{ expanded = [path, ...state.expanded] }, emit = [] })
+
+      | Scrolled delta \ (
+        totalH = treeNodeHeight config.value config.path state.expanded;
+        newY = max 0 (min (totalH - config.h) (state.scrollY + delta.deltaY));
+        { state = state.{ scrollY = newY }, emit = [] })
+
       | _ \ { state = state, emit = [] },
 
     view = state emit \
@@ -111,7 +118,9 @@ tree = config \
         h = config.h,
         totalWidth = config.w,
         totalHeight = totalH,
-        onScroll = _ \ noOp,
+        scrollX = 0,
+        scrollY = state.scrollY,
+        onScroll = delta \ emit (Scrolled delta),
         child = treeNode { value = config.value, path = config.path, depth = 0, expanded = state.expanded, onToggle = onToggle }
       }
   };

src/cg/10-os.cg

@@ -16,8 +16,6 @@ os =
     | True \ viewport.width
     | False \ window.width;
 
-  totalWidth = (sum (map windowWidth osState.windows)) + (len osState.windows - 1);
-
   scrollToWindow = index \
     windows = osState.windows;
     widths = map windowWidth windows;
@@ -140,6 +138,10 @@ os =
     view = state emit \ renderWindow config.window config.isActive
   };
 
+  onScroll = delta \
+    totalWidth = (sum (map windowWidth osState.windows)) + (max 0 (len osState.windows - 1));
+    osState.wm.scrollOffset := max 0 (min (totalWidth - viewport.width) (osState.wm.scrollOffset + delta.deltaX));
+
   renderWindows = _ \
     windows = osState.windows;
     focused = osState.wm.focusedIndex;
@@ -165,9 +167,6 @@ os =
       Item { label = q }
     ];
 
-  onScroll = delta \
-    osState.wm.scrollOffset := max 0 (min (totalWidth - viewport.width) (osState.wm.scrollOffset + delta.deltaX));
-
   onSelect = input \
     result = eval input;
     _ = debug "onSelect eval result" result;

src/runtime-compiled.ts

@@ -269,7 +269,7 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
         const y = e.clientY - rect.top;
 
         const hit = scrollHitTest(x, y);
-        if (hit) {
+        if (hit && typeof hit.onScroll === 'function') {
             const delta = { deltaX: Math.round(e.deltaX), deltaY: Math.round(e.deltaY) };
             handleEvent(hit.onScroll(delta));
         }

src/ui.ts

@@ -128,9 +128,10 @@ function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: numb
             ctx.beginPath();
             ctx.rect(x, y, ui.w, ui.h);
             ctx.clip();
-            renderUI(ui.child, ctx, x - ui.scrollX, y - ui.scrollY);
-            ctx.restore();
             scrollRegions.push({ x, y, width: ui.w, height: ui.h, onScroll: ui.onScroll })
+            renderUI(ui.child, ctx, x - ui.scrollX, y - ui.scrollY);
+            // console.log("scrollable onScroll after render:", ui.onScroll, ui.w, ui.h)
+            ctx.restore();
             break;
         }