use button in scrollbar

apps/fontviewer/fontviewer.zig

@@ -56,10 +56,10 @@ pub fn find_next_range(font: *const Font, current: u32, reverse: bool) ?u32 {
     const max = 64 * font.range_masks.len - 1;
     var range: u32 = current + 1;
     while (true) {
-        std.log.info("range={}/{}", .{ range, max });
+        // std.log.info("range={}/{}", .{ range, max });
         if (range > max) return null;
         if (font.range_index(range)) |_| {
-            std.log.info("selected range: {}", .{range});
+            // std.log.info("selected range: {}", .{range});
             return range;
         } else {
             if (reverse) {
@@ -144,12 +144,9 @@ pub fn main() !void {
                 });
                 i += 1;
             }
-            // for (&btns) |*btn| {
-            //     btn.* = layout.add2(.button, .{});
-            // }
             const subflex = layout.add2(.flex, .{ .orientation = .vertical });
 
-            const scrollable = layout.add2(.scrollable, .{ .widget = subflex });
+            const scrollable = layout.add4(.scrollable, .{ .content = subflex });
             layout.set(subflex, .children, btns[0..i]);
             layout.set(scrollable, .flex, 1);
             break :s scrollable;

toolkit/Surface.zig

@@ -159,6 +159,10 @@ pub fn destroy(self: *Surface) void {
     _ = self.app.surfaces.remove(self.wl_surface);
 }
 
+pub fn re_size(surf: *Surface) void {
+    surf.app.layout.set_size(surf.root, Size.Minmax.tight(surf.size));
+}
+
 pub fn schedule_redraw(self: *Surface) void {
     if (!self.frame_done) return;
     const client = self.app.client;

toolkit/paint.zig

@@ -30,10 +30,10 @@ pub fn PaintCtx(comptime Color: type) type {
         };
 
         pub inline fn pixel(self: *const Self, x: u32, y: u32, opts: DrawCharOpts) void {
-            // const actual_y = if (opts.rect) |r| r.y + y else y;
-            // const actual_x = if (opts.rect) |r| r.x + x else x;
-            const actual_y = self.clip.y + y;
-            const actual_x = self.clip.x + x;
+            const actual_y = y;
+            const actual_x = x;
+            // const actual_y = self.clip.y + y;
+            // const actual_x = self.clip.x + x;
             if (opts.scale == 1) {
                 if (!self.clip.contains(actual_x, actual_y)) return;
                 if (actual_x >= self.width or actual_y >= self.height) return;
@@ -74,7 +74,7 @@ pub fn PaintCtx(comptime Color: type) type {
                 for (0..bitmap.width) |_x| {
                     const x: u8 = @intCast(_x);
                     if (bitmap.bitAt(x, y)) {
-                        self.pixel(x, y, .{ .color = opts.color, .scale = opts.scale });
+                        self.pixel(self.clip.x + x, self.clip.y + y, .{ .color = opts.color, .scale = opts.scale });
                     }
                 }
             }

toolkit/widget.zig

@@ -95,6 +95,11 @@ pub const Layout = struct {
         self.widgets.deinit(alloc);
     }
 
+    pub fn add4(self: *Layout, comptime t: WidgetType, opts: WidgetData(t).InitOpts) WidgetIdx {
+        const idx = self.add2(t, undefined);
+        WidgetData(t).init(self, idx, opts);
+        return idx;
+    }
     ///Add with children
     pub fn add3(self: *Layout, comptime t: WidgetType, wdata: WidgetData(t), children: []const WidgetIdx) WidgetIdx {
         const idx = self.add2(t, wdata);

toolkit/widgets/Button.zig

@@ -17,6 +17,7 @@ pub fn draw(layout: *Layout, idx: WidgetIdx, paint_ctx: PaintCtx) bool {
 
     paint_ctx.panel(.{ .hover = hover, .press = pressed });
     // std.log.info("btn {} hover {}", .{ @intFromEnum(idx), hover });
+    std.log.info("paint_ctx.clip={}", .{paint_ctx.clip});
 
     return true;
 }

toolkit/widgets/Flex.zig

@@ -9,6 +9,7 @@ const Point = @import("../paint/Point.zig");
 const w = @import("../widget.zig");
 const Layout = w.Layout;
 const WidgetIdx = w.WidgetIdx;
+const std = @import("std");
 
 orientation: Orientation = .horizontal,
 
@@ -86,6 +87,7 @@ const Orientation = enum {
 pub fn size(layout: *Layout, idx: WidgetIdx, constraints: Size.Minmax) Size {
     const flex_rect = layout.get(idx, .rect);
     _ = flex_rect; // autofix
+    std.log.info("constraints flex={}", .{constraints});
     const children = layout.get(idx, .children);
     const self = layout.data(idx, Flex);
     var minor: u32 = self.orientation.minorLen(constraints.min);
@@ -134,7 +136,7 @@ pub fn size(layout: *Layout, idx: WidgetIdx, constraints: Size.Minmax) Size {
                 px_per_flex * child_flex,
                 self.orientation.minorLen(constraints.min),
             );
-            const child_min = layout.call(child_idx, .size, .{Size.Minmax.ZERO});
+            const child_min = layout.call(child_idx, .size, .{Size.Minmax.loose(child_max)});
 
             layout.set(child_idx, .rect, .{
                 .width = @max(child_min.width, child_max.width),

toolkit/widgets/Scrollable.zig

@@ -6,9 +6,23 @@ const widget = tk.widget;
 const Layout = widget.Layout;
 const WidgetIdx = widget.WidgetIdx;
 
-widget: WidgetIdx,
+const thumb_btn = 0;
+
+content: WidgetIdx,
+children: [1]WidgetIdx,
 offset: u32 = 0,
 
+pub const InitOpts = struct {
+    content: WidgetIdx,
+};
+pub fn init(layout: *Layout, idx: WidgetIdx, opts: InitOpts) void {
+    const self = layout.data(idx, @This());
+    self.offset = 0;
+    self.content = opts.content;
+    self.children[thumb_btn] = layout.add2(.button, .{});
+    layout.set(idx, .children, self.children[0..]);
+}
+
 pub fn draw(layout: *Layout, idx: WidgetIdx, paint_ctx: PaintCtx) bool {
     const font = layout.get_app().font;
     const self = layout.data(idx, @This());
@@ -28,54 +42,61 @@ pub fn draw(layout: *Layout, idx: WidgetIdx, paint_ctx: PaintCtx) bool {
     }
 
     {
-        const scrubber_height: u32 = @intFromFloat(visible_fraction(layout, idx) *
-            @as(f32, @floatFromInt(rect.height)));
-        const scrubber_range = rect.height - scrubber_height;
-        const max_off = max_offset(layout, idx);
-        const scrubber_pos = if (max_off == 0) 0 else scrubber_range * self.offset / max_off;
-
-        const r = .{
-            .x = rect.right() - 16,
-            .y = rect.y + scrubber_pos,
-            .width = 16,
-            .height = scrubber_height,
-        };
-        paint_ctx.with_clip(r).fill(.{ .color = .indianred });
+        // const content_rect = layout.get(self.content, .rect);
+        // var r = thumb_rect(@floatFromInt(paint_ctx.clip.height), @floatFromInt(content_rect.height), self.offset);
+        // r.x = paint_ctx.clip.right() - 16;
+        // r.y += paint_ctx.clip.y;
+        //
+        // paint_ctx.with_clip(r).fill(.{ .color = .indianred });
     }
 
     std.debug.assert(rect.height != 0);
 
-    // _=layout.call(self.widget, .draw, .{rect,paint_ctx});
     const abs_rect = layout.absolute_rect(idx);
-
-    var iter = layout.child_iterator(self.widget);
+    var iter = layout.child_iterator(self.content);
     while (iter.next()) |idxx| {
         const offset_i64: i64 = @intCast(self.offset);
         const rectx = layout.absolute_rect(idxx)
             .translated(abs_rect.x, abs_rect.y)
             .translated(0, -offset_i64);
-        // .intersected(paint_ctx.rect());
+        // .intersected(paint_ctx.clip);
 
         _ = layout.call(idxx, .draw, .{paint_ctx.with_clip(rectx)});
     }
 
     return true;
 }
-pub fn visible_fraction(layout: *Layout, idx: WidgetIdx) f32 {
-    const self = layout.data(idx, @This());
-    const rect = layout.get(idx, .rect);
-    const content_rect = layout.get(self.widget, .rect);
-    const visible: f32 = @floatFromInt(rect.height);
-    const total: f32 = @floatFromInt(content_rect.height);
-    if (visible >= total) return 1;
-
-    return visible / total;
+// pub fn visible_fraction(layout: *Layout, idx: WidgetIdx) f32 {
+//     const self = layout.data(idx, @This());
+//     const rect = layout.get(idx, .rect);
+//     const content_rect = layout.get(self.content, .rect);
+//     const visible: f32 = @floatFromInt(rect.height);
+//     const total: f32 = @floatFromInt(content_rect.height);
+//     if (visible >= total) return 1;
+//
+//     return visible / total;
+// }
+pub fn thumb_rect(visible: f32, total: f32, offset: u32) tk.Rect {
+    const visible_fraction = if (visible >= total) 1 else visible / total;
+    const scrubber_height: u32 = @intFromFloat(visible_fraction *
+        visible);
+    const scrubber_range = @as(u32, @intFromFloat(visible)) - scrubber_height;
+    const max_off: u32 = @intFromFloat(total - visible);
+    const scrubber_pos = if (max_off == 0) 0 else scrubber_range * offset / max_off;
+
+    const r: tk.Rect = .{
+        .x = 0,
+        .y = scrubber_pos,
+        .width = 16,
+        .height = scrubber_height,
+    };
+    return r;
 }
 
 pub fn max_offset(layout: *Layout, idx: WidgetIdx) u32 {
     const self = layout.data(idx, @This());
     const rect = layout.get(idx, .rect);
-    const content_rect = layout.get(self.widget, .rect);
+    const content_rect = layout.get(self.content, .rect);
     const max = content_rect.height -| rect.height;
     return max;
 }
@@ -90,6 +111,7 @@ pub fn handle_event(layout: *Layout, idx: WidgetIdx, event: tk.Event) void {
                     self.offset += @abs(ev2.value);
                     self.offset = @min(self.offset, max_offset(layout, idx));
                 }
+                layout.get_window().re_size();
             },
             else => {},
         },
@@ -99,15 +121,19 @@ pub fn handle_event(layout: *Layout, idx: WidgetIdx, event: tk.Event) void {
 
 pub fn size(layout: *Layout, idx: WidgetIdx, minmax: tk.Size.Minmax) tk.Size {
     const self = layout.data(idx, @This());
-
     self.offset = @min(self.offset, max_offset(layout, idx));
-    const child = self.widget;
-    const c_size = layout.call(child, .size, .{minmax});
-    // _ = c_size; // autofix
-    // layout.set(children[0], .rect, c_size.to_rect());
-    layout.set(child, .rect, c_size.to_rect());
-    // return c_size;
-    // return minmax.max;
+
+    layout.set_size(self.content, minmax);
+
     const min: tk.Size = .{ .width = 60, .height = 20 };
-    return min.unite(minmax.max);
+    const rsize = min.unite(minmax.max);
+    std.log.info("minmax={}", .{minmax});
+    {
+        const content_rect = layout.get(self.content, .rect);
+        const r = thumb_rect(@floatFromInt(rsize.height), @floatFromInt(content_rect.height), self.offset)
+            .translated(rsize.width - 16, 0);
+
+        layout.set(self.children[thumb_btn], .rect, r);
+    }
+    return rsize;
 }