gpuikit 0.8.0

A UI toolkit for GPUI applications
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

//! Dialog Example - Demonstrates the Dialog component.
//!
//! This example shows how to use the Dialog component for modal interactions.

#![allow(missing_docs)]

use gpui::{
    div, prelude::*, px, size, App, Application, Bounds, Context, Entity, FocusHandle, Focusable,
    ParentElement, Render, Styled, Window, WindowBounds, WindowOptions,
};
use gpuikit::elements::button::button;
use gpuikit::elements::dialog::{dialog, DialogClosed, DialogOpened, DialogState};
use gpuikit::layout::h_stack;
use gpuikit::theme::{ActiveTheme, Themeable};

struct DialogExample {
    focus_handle: FocusHandle,
    simple_dialog: Entity<DialogState>,
    _subscriptions: Vec<gpui::Subscription>,
}

impl DialogExample {
    fn new(_window: &mut Window, cx: &mut Context<Self>) -> Self {
        // Create a simple dialog with just title and description
        let simple_dialog = cx.new(|_cx| {
            DialogState::new(
                dialog("simple-dialog")
                    .title("Welcome!")
                    .description("This is a simple dialog with a title and description. Press Escape or click the X button to close it. You can also click the backdrop to dismiss.")
            )
        });

        let mut subscriptions = Vec::new();

        // Track dialog open/close events
        subscriptions.push(
            cx.subscribe(&simple_dialog, |_this, _, _event: &DialogOpened, _cx| {
                println!("Simple dialog opened");
            }),
        );
        subscriptions.push(
            cx.subscribe(&simple_dialog, |_this, _, _event: &DialogClosed, _cx| {
                println!("Simple dialog closed");
            }),
        );

        Self {
            focus_handle: cx.focus_handle(),
            simple_dialog,
            _subscriptions: subscriptions,
        }
    }
}

impl Focusable for DialogExample {
    fn focus_handle(&self, _cx: &App) -> FocusHandle {
        self.focus_handle.clone()
    }
}

impl Render for DialogExample {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();

        div()
            .id("dialog-example")
            .track_focus(&self.focus_handle)
            .size_full()
            .relative()
            .bg(theme.bg())
            .text_color(theme.fg())
            .flex()
            .flex_col()
            .items_center()
            .justify_center()
            .gap_6()
            // Title
            .child(
                div()
                    .text_xl()
                    .font_weight(gpui::FontWeight::BOLD)
                    .child("Dialog Component Demo"),
            )
            // Description
            .child(
                div()
                    .text_sm()
                    .text_color(theme.fg_muted())
                    .child("Click the button below to open a dialog."),
            )
            // Button
            .child(
                h_stack()
                    .gap_4()
                    .child(button("open-simple", "Open Dialog").on_click(cx.listener(
                        |this, _, window, cx| {
                            this.simple_dialog.update(cx, |dialog, cx| {
                                dialog.open(window, cx);
                            });
                        },
                    ))),
            )
            // Dialog - rendered on top using deferred()
            .child(self.simple_dialog.clone())
    }
}

fn main() {
    Application::with_platform(gpui_platform::current_platform(false))
        .with_assets(gpuikit::assets())
        .run(|cx: &mut App| {
            gpuikit::init(cx);

            let bounds = Bounds::centered(None, size(px(800.), px(600.)), cx);
            cx.open_window(
                WindowOptions {
                    window_bounds: Some(WindowBounds::Windowed(bounds)),
                    ..Default::default()
                },
                |window, cx| {
                    let view = cx.new(|cx| DialogExample::new(window, cx));
                    let focus_handle = view.read(cx).focus_handle.clone();
                    window.focus(&focus_handle, cx);
                    view
                },
            )
            .unwrap();

            cx.activate(true);
        });
}