gpui-ui-kit 0.5.10

A reusable UI component library for GPUI applications
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

//! Port component for workflow nodes

use super::theme::WorkflowTheme;
use gpui::prelude::*;
use gpui::*;

/// Port direction
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum PortDirection {
    Input,
    Output,
}

/// A connection port on a workflow node
#[derive(IntoElement)]
pub struct Port {
    id: ElementId,
    direction: PortDirection,
    index: usize,
    connected: bool,
    valid_target: Option<bool>,
    theme: Option<WorkflowTheme>,
    on_mouse_down: Option<Box<dyn Fn(PortDirection, usize, &mut Window, &mut App) + 'static>>,
    on_mouse_up: Option<Box<dyn Fn(PortDirection, usize, &mut Window, &mut App) + 'static>>,
}

impl Port {
    pub fn new(id: impl Into<ElementId>, direction: PortDirection, index: usize) -> Self {
        Self {
            id: id.into(),
            direction,
            index,
            connected: false,
            valid_target: None,
            theme: None,
            on_mouse_down: None,
            on_mouse_up: None,
        }
    }

    /// Set whether this port is connected
    pub fn connected(mut self, connected: bool) -> Self {
        self.connected = connected;
        self
    }

    /// Set whether this is a valid target for the current connection drag
    pub fn valid_target(mut self, valid: Option<bool>) -> Self {
        self.valid_target = valid;
        self
    }

    /// Set custom theme
    pub fn theme(mut self, theme: WorkflowTheme) -> Self {
        self.theme = Some(theme);
        self
    }

    /// Set mouse down handler
    pub fn on_mouse_down(
        mut self,
        handler: impl Fn(PortDirection, usize, &mut Window, &mut App) + 'static,
    ) -> Self {
        self.on_mouse_down = Some(Box::new(handler));
        self
    }

    /// Set mouse up handler
    pub fn on_mouse_up(
        mut self,
        handler: impl Fn(PortDirection, usize, &mut Window, &mut App) + 'static,
    ) -> Self {
        self.on_mouse_up = Some(Box::new(handler));
        self
    }

    fn get_color(&self, theme: &WorkflowTheme) -> Rgba {
        // Priority: valid_target > connected > default
        if let Some(valid) = self.valid_target {
            if valid {
                return theme.port_valid;
            } else {
                return theme.port_invalid;
            }
        }

        match self.direction {
            PortDirection::Input => theme.port_input,
            PortDirection::Output => theme.port_output,
        }
    }
}

impl RenderOnce for Port {
    fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let theme = self.theme.clone().unwrap_or_default();
        let color = self.get_color(&theme);
        let hover_color = theme.port_hover;
        let radius = theme.port_radius;
        let size = radius * 2.0;

        let direction = self.direction;
        let index = self.index;

        let on_mouse_down = self.on_mouse_down;
        let on_mouse_up = self.on_mouse_up;

        let border_color = if self.connected {
            gpui::white()
        } else {
            gpui::transparent_black()
        };

        let mut result = div()
            .id(self.id)
            .size(px(size))
            .rounded_full()
            .bg(color)
            .border_1()
            .border_color(border_color)
            .cursor_pointer()
            .hover(move |s| s.bg(hover_color).border_color(gpui::white()));

        if let Some(handler) = on_mouse_down {
            result = result.on_mouse_down(MouseButton::Left, move |_event, window, cx| {
                handler(direction, index, window, cx);
            });
        }

        if let Some(handler) = on_mouse_up {
            result = result.on_mouse_up(MouseButton::Left, move |_event, window, cx| {
                handler(direction, index, window, cx);
            });
        }

        result
    }
}