scrollable now supports horizontal scrolling. using it in os wm. putting all os stuff in os namespace

src/cg/03-ui-components.cg

@@ -26,25 +26,36 @@ button = config \
 
 # scrollable
 scrollable = config \
-  barHeight = max 20 (config.h * config.h / config.totalHeight);
+  showVBar = config.totalHeight > config.h;
-  barY = config.scrollY * config.h / config.totalHeight;
+  vBarHeight = max 20 (config.h * config.h / config.totalHeight);
-  showBar = config.totalHeight > config.h;
+  vBarY = config.scrollY * config.h / config.totalHeight;
+
+  showHBar = config.totalWidth > config.w;
+  vBarWidth = max 20 (config.w * config.w / config.totalWidth);
+  vBarX = config.scrollX * config.w / config.totalWidth;
 
   ui.stack {
     children = [
       ui.scrollable {
         w = config.w,
         h = config.h,
-        scrollX = 0,
+        scrollX = config.scrollX,
         scrollY = config.scrollY,
         onScroll = config.onScroll,
         child = config.child
       },
-      ...(showBar
+      ...(showVBar
         | True \ [ui.positioned {
             x = config.w - 4,
-            y = barY,
+            y = vBarY,
-            child = ui.rect { w = 4, h = barHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
+            child = ui.rect { w = 4, h = vBarHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
+          }]
+        | False \ []),
+      ...(showHBar
+        | True \ [ui.positioned {
+            x = config.h - 4,
+            y = hBarX,
+            child = ui.rect { h = 4, w = hBarWidth, color = "rgba(255,255,255,0.3)", radius = 2 }
           }]
         | False \ [])
     ]

src/cg/05-palette.cg

@@ -126,6 +126,7 @@ palette = config \
                     w = contentWidth,
                     h = listHeight,
                     totalHeight = totalHeight,
+                    totalWidth = contentWidth,
                     scrollX = 0,
                     scrollY = paletteState.scrollOffset,
                     onScroll = onScroll,

src/cg/10-os.cg

@@ -9,13 +9,36 @@ osState = {
   nextId = 0
 };
 
-openPalette = _ \ osState.palette.visible := not (osState.palette.visible);
+os =
+  openPalette = _ \ osState.palette.visible := not (osState.palette.visible);
 
-windowWidth = window \ window.fullWidth
+  windowWidth = window \ window.fullWidth
     | True \ viewport.width
     | False \ window.width;
 
-openWindow = title content \
+  totalWidth = (sum (map windowWidth osState.windows)) + (len osState.windows - 1);
+
+  scrollToWindow = index \
+    windows = osState.windows;
+    widths = map windowWidth windows;
+    gap = 1;
+    windowX = (sum (take index widths)) + (index * gap);
+    windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
+    scrollOffset = osState.wm.scrollOffset;
+    vw = viewport.width;
+    (windowX < scrollOffset
+    | True \ windowX
+    | False \ (windowX + windowW > scrollOffset + vw
+      | True \ windowX + windowW - vw
+      | False \ scrollOffset));
+
+  focusWindow = index \
+    batch [
+      osState.wm.focusedIndex := index,
+      osState.wm.scrollOffset := scrollToWindow index
+    ];
+
+  openWindow = title content \
     id = osState.nextId;
     batch [
       osState.nextId := id + 1,
@@ -30,7 +53,7 @@ openWindow = title content \
       focusWindow (len osState.windows)
     ];
 
-closeWindowByIndex = i \
+  closeWindowByIndex = i \
     focused = osState.wm.focusedIndex;
     newFocused = (i < focused
       | True \ focused - 1
@@ -44,44 +67,17 @@ closeWindowByIndex = i \
       # osState.wm.focusedIndex := min newFocused (len osState.windows - 2)
     ];
 
-closeFocusedWindow = _ \ closeWindowByIndex osState.wm.focusedIndex;
+  closeFocusedWindow = _ \ closeWindowByIndex osState.wm.focusedIndex;
 
-closeWindowById = id \
+  closeWindowById = id \
     i = index id (map (w \ w.id) osState.windows);
     closeWindowByIndex (unwrapOr 0 i);
 
-toggleMaximizeFocusedWindow = _ \
+  toggleMaximizeFocusedWindow = _ \
     idx = osState.wm.focusedIndex;
     osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
 
-scrollToWindow = index \
+  renderWindow = window isActive \
-  windows = osState.windows;
-  widths = map windowWidth windows;
-  gap = 1;
-  windowX = (sum (take index widths)) + (index * gap);
-  windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
-  scrollOffset = osState.wm.scrollOffset;
-  vw = viewport.width;
-  (windowX < scrollOffset
-  | True \ windowX
-  | False \ (windowX + windowW > scrollOffset + vw
-    | True \ windowX + windowW - vw
-    | False \ scrollOffset));
-
-focusWindow = index \
-  batch [
-    osState.wm.focusedIndex := index,
-    osState.wm.scrollOffset := scrollToWindow index
-  ];
-
-onSelect = input \
-  result = eval input;
-  result
-  | Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
-  | Defined name \ openWindow name (_ \ inspector { name = name })
-  | Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
-
-renderWindow = window isActive \
     titleBarHeight = 30;
 
     ui.stack {
@@ -133,7 +129,7 @@ renderWindow = window isActive \
       ]
     };
 
-windowComponent = config \ ui.stateful {
+  windowComponent = config \ ui.stateful {
     key = "window-" & (show config.index),
     focusable = True,
     init = {},
@@ -142,23 +138,25 @@ windowComponent = config \ ui.stateful {
       | ChildFocused \ { state = state, emit = [focusWindow config.index] }
       | _ \ { state = state, emit = [] },
     view = state \ renderWindow config.window config.isActive
-};
+  };
 
-renderWindows = _ \
+  renderWindows = _ \
     windows = osState.windows;
     focused = osState.wm.focusedIndex;
+    totalHeight = viewport.height;
     scrollable {
       w = viewport.width,
       h = viewport.height,
       scrollX = osState.wm.scrollOffset,
       scrollY = 0,
+      onScroll = onScroll,
       child = ui.row {
         gap = 1,
         children = mapWithIndex (w i \ windowComponent { window = w, index = i, isActive = (i == focused) }) windows
-    }
+      },
     };
 
-search = q \
+  search = q \
     storeRes = storeSearch q;
     [
       Section "STORE",
@@ -167,7 +165,17 @@ search = q \
       Item { label = q }
     ];
 
-os = ui.stateful {
+  onScroll = delta \
+    osState.wm.scrollOffset := max 0 (min (totalWidth - viewport.width) (osState.wm.scrollOffset + delta.deltaX));
+
+  onSelect = input \
+    result = eval input;
+    result
+    | Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
+    | Defined name \ openWindow name (_ \ inspector { name = name })
+    | Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
+
+  ui.stateful {
     key = "os",
     autoFocus = True,