boltz-ui 0.2.6

High-level reusable GPUI UI components (Label, Button, Input, etc.).
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

//! [`ResizablePanel`]/[`ResizableHandle`]: the reusable divider-drag
//! primitives shared by the standalone [`group::ResizablePanelGroup`] and by
//! [`crate::PaneGroup`]'s recursive split rendering.
//!
//! Divider drag reuses the pointer-delta + clamp pattern from column resize
//! (`redistributable_columns.rs` / `data_table.rs`).

mod group;

use gpui::{AnyElement, Axis, Div, Stateful};
use smallvec::SmallVec;

pub use group::{ResizablePanelGroup, ResizablePreview};

use crate::prelude::*;

/// A panel inside a [`ResizablePanelGroup`] (or, via [`Self::axis`], a
/// [`crate::PaneGroup`] split).
#[derive(IntoElement)]
pub struct ResizablePanel {
    children: SmallVec<[AnyElement; 2]>,
    fraction: f32,
    axis: Axis,
}

impl ResizablePanel {
    /// Defaults to [`Axis::Horizontal`] — every existing caller
    /// (`ResizablePanelGroup`) keeps its current row-of-panels behavior
    /// unless it opts into [`Self::axis`].
    pub fn new() -> Self {
        Self {
            children: SmallVec::new(),
            fraction: 1.0,
            axis: Axis::Horizontal,
        }
    }

    pub(crate) fn fraction(mut self, fraction: f32) -> Self {
        self.fraction = fraction;
        self
    }

    /// Lays this panel out along `axis`: sized by width (`Horizontal`) or
    /// height (`Vertical`).
    pub fn axis(mut self, axis: Axis) -> Self {
        self.axis = axis;
        self
    }
}

impl Default for ResizablePanel {
    fn default() -> Self {
        Self::new()
    }
}

impl ParentElement for ResizablePanel {
    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
        self.children.extend(elements);
    }
}

impl RenderOnce for ResizablePanel {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let is_horizontal = self.axis == Axis::Horizontal;
        div()
            .when(is_horizontal, |this| this.h_full())
            .when(!is_horizontal, |this| this.w_full())
            .overflow_hidden()
            .when(self.fraction >= 1.0, |this| this.flex_grow())
            .when(self.fraction < 1.0 && is_horizontal, |this| {
                this.flex_shrink_0().w(relative(self.fraction))
            })
            .when(self.fraction < 1.0 && !is_horizontal, |this| {
                this.flex_shrink_0().h(relative(self.fraction))
            })
            .bg(semantic::surface(cx))
            .children(self.children)
    }
}

/// Draggable divider between two [`ResizablePanel`]s: a wide invisible hit
/// area (with the axis-appropriate resize cursor) centered on a thin
/// visible line.
#[derive(IntoElement)]
pub struct ResizableHandle {
    div: Stateful<Div>,
    axis: Axis,
}

impl ResizableHandle {
    /// Defaults to [`Axis::Horizontal`] (vertical line, `col-resize`
    /// cursor) — call [`Self::axis`] for a horizontal divider.
    pub fn new(id: impl Into<ElementId>) -> Self {
        Self {
            div: div().id(id),
            axis: Axis::Horizontal,
        }
    }

    /// Orients this divider along `axis`: `Horizontal` renders a vertical
    /// line with a `col-resize` cursor (splits panels side by side);
    /// `Vertical` renders a horizontal line with a `row-resize` cursor
    /// (splits panels top/bottom).
    pub fn axis(mut self, axis: Axis) -> Self {
        self.axis = axis;
        self
    }
}

impl InteractiveElement for ResizableHandle {
    fn interactivity(&mut self) -> &mut gpui::Interactivity {
        self.div.interactivity()
    }
}

impl StatefulInteractiveElement for ResizableHandle {}

impl RenderOnce for ResizableHandle {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let is_horizontal = self.axis == Axis::Horizontal;
        let line = div()
            .when(is_horizontal, |this| this.w(px(1.)).h_full())
            .when(!is_horizontal, |this| this.h(px(1.)).w_full())
            .bg(semantic::border(cx));

        // Flush panels: negative margins collapse the handle's net layout size
        // to ~1px (the visible line) so adjacent panels sit edge-to-edge, while
        // the handle itself stays a 7px grab target (resize on hover) centered
        // on the seam.
        self.div
            .relative()
            .flex_shrink_0()
            .flex()
            .items_center()
            .justify_center()
            .when(is_horizontal, |this| {
                this.w(px(7.)).mx(px(-3.)).h_full().cursor_col_resize()
            })
            .when(!is_horizontal, |this| {
                this.h(px(7.)).my(px(-3.)).w_full().cursor_row_resize()
            })
            .child(line)
    }
}