flo_ui

<%= graph font_size: 20 %>

<%= primitive Scenic.Primitive.Rectangle,
    {@frame.width, @frame.height},
    id: :input_capture,
    input: [:cursor_scroll]
%>

<%= component FloUI.Scrollable.ScrollBar,
    %{
        direction: :vertical,
        content_size: {@content.width, @content.height},
        width: @scroll_bars.vertical.thickness,
        height: @frame.height,
        scroll_position: @scroll_position
    },
    id: :vertical_scroll_bar,
    hidden: not @scroll_bars.vertical.show,
    translate: {@frame.width, 0},
    show_buttons: @scroll_bars.vertical.show_buttons,
    theme: @scroll_bars.vertical.theme,
    border: 1,
    radius: 3,
    thickness: @scroll_bars.vertical.thickness
%>

<%= component FloUI.Scrollable.ScrollBar,
    %{
        direction: :horizontal,
        content_size: {@content.width, @content.height},
        width: @frame.width,
        height: @scroll_bars.horizontal.thickness,
        scroll_position: @scroll_position
    },
    id: :horizontal_scroll_bar,
    hidden: not @scroll_bars.horizontal.show,
    translate: {0, @frame.height},
    show_buttons: @scroll_bars.horizontal.show_buttons,
    theme: @scroll_bars.horizontal.theme,
    border: 1,
    radius: 3,
    thickness: @scroll_bars.horizontal.thickness
%>