draw

pub fn draw(self: *PanedWidget) void {
    if (self.drawn) return;
    self.drawn = true;
    if (self.collapsed()) return;

    if (dvui.captured(self.data().id)) {
        // we are dragging it, draw it fully
        self.mouse_dist = 0;
    }

    var len_ratio: f32 = 1.0 / 5.0;

    if (self.init_opts.handle_dynamic) |hd| {
        if (self.mouse_dist > self.handle_thick + hd.distance_max) {
            return;
        } else {
            len_ratio *= 1.0 - std.math.clamp((self.mouse_dist - self.handle_thick) / hd.distance_max, 0.0, 1.0);
        }
    } else {
        if (self.mouse_dist > self.handle_thick / 2) return;
    }

    const rs = self.data().contentRectScale();
    var r = rs.r;
    const handle_gap = self.handleGap() * rs.s; // physical
    const thick = self.handle_thick * rs.s; // physical
    const margin = self.init_opts.handle_margin * rs.s; // physical
    switch (self.init_opts.direction) {
        .horizontal => {
            r.x += std.math.clamp(
                (r.w - handle_gap) * self.split_ratio.* + (handle_gap - thick) / 2,
                margin,
                r.w - thick - margin,
            );
            r.w = thick;
            const height = r.h * len_ratio;
            r.y += r.h / 2 - height / 2;
            r.h = height;
        },
        .vertical => {
            r.y += std.math.clamp(
                (r.h - handle_gap) * self.split_ratio.* + (handle_gap - thick) / 2,
                margin,
                r.h - thick - margin,
            );
            r.h = thick;
            const width = r.w * len_ratio;
            r.x += r.w / 2 - width / 2;
            r.w = width;
        },
    }
    const corner = CornerRect.all(thick).finalize(self.data().options.theme).scale(1, CornerRect.Physical);
    r.fill(corner, .{ .color = self.data().options.color(.text).opacity(0.5), .fade = 1.0 });
}