auto scrolling to focused windows

src/cg/10-os.cg

@@ -107,13 +107,35 @@ windowComponent = config \ ui.stateful {
 };
 
 renderWindows = _ \
+  _ = debug "renderWindows, scrollOffset" osState.wm.scrollOffset;
   windows = osState.windows;
   focused = osState.wm.focusedIndex;
-  ui.row {
+  scrollable {
+    w = viewport.width,
+    h = viewport.height,
+    scrollX = osState.wm.scrollOffset,
+    scrollY = 0,
+    child = ui.row {
       gap = 1,
       children = mapWithIndex (w i \ windowComponent { window = w, index = i, isActive = (i == focused) }) windows
+    }
   };
 
+scrollToWindow = index \
+  windows = osState.windows;
+  widths = map (w \ w.width) windows;
+  gap = 1;
+  windowX = (sum (take index widths)) + (index * gap);
+  windowW = unwrapOr 400 (nth index widths);
+  scrollOffset = osState.wm.scrollOffset;
+  vw = viewport.width;
+  _ = debug "in scrollToWindow" [windowX, windowW, scrollOffset, vw];
+  (windowX < scrollOffset
+  | True \ windowX
+  | False \ ((windowX + windowW) > (scrollOffset + vw)
+    | True \ windowX + windowW - vw
+    | False \ scrollOffset));
+
 os = ui.stateful {
   key = "os",
   autoFocus = True,
@@ -124,9 +146,23 @@ os = ui.stateful {
     | Key { key = "p", meta = True } \
       { state = state, emit = [osState.palette.visible := not (osState.palette.visible)] }
     | Key { key = "ArrowLeft", meta = True } \
-      { state = state, emit = [osState.wm.focusedIndex := max 0 (osState.wm.focusedIndex - 1)] }
+      (
+      newIndex = max 0 (osState.wm.focusedIndex - 1);
+      { state = state, emit = [
+        osState.wm.focusedIndex := newIndex,
+        osState.wm.scrollOffset := scrollToWindow newIndex
+      ] }
+      )
     | Key { key = "ArrowRight", meta = True } \
-      { state = state, emit = [osState.wm.focusedIndex := min (len osState.windows - 1) (osState.wm.focusedIndex + 1)] }
+      (
+      newIndex = min (len osState.windows - 1) (osState.wm.focusedIndex + 1);
+      newScrollOffset = scrollToWindow newIndex;
+      _ = debug "new scroll offset in key event handler" newScrollOffset;
+      { state = state, emit = [
+        osState.wm.focusedIndex := newIndex,
+        osState.wm.scrollOffset := scrollToWindow newIndex
+      ] }
+      )
     | Key { key = "d", meta = True } \
       { state = state, emit = [closeFocusedWindow 0] }
     | _ \ { state = state, emit = [] },

src/ui.ts

@@ -89,7 +89,6 @@ function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: numb
             let offsetX = 0;
             for (const child of ui.children) {
                 const size = measure(child);
-                console.log("row child: ", child.kind, "width: ", size.width)
                 renderUI(child, ctx, x + offsetX, y);
                 offsetX += measure(child).width + (ui.gap || 0);
             }