1use std::{
2 collections::{
3 HashMap,
4 HashSet,
5 },
6 sync::Arc,
7 time::Duration,
8};
9
10use freya::prelude::*;
11use freya_core::integration::NodeId;
12use freya_devtools::{
13 IncomingMessage,
14 IncomingMessageAction,
15 OutgoingMessage,
16 OutgoingMessageAction,
17};
18use freya_radio::prelude::*;
19use freya_router::prelude::*;
20use futures_util::StreamExt;
21use smol::{
22 Timer,
23 net::TcpStream,
24};
25use state::{
26 DevtoolsChannel,
27 DevtoolsState,
28};
29
30mod components;
31mod hooks;
32mod node;
33mod property;
34mod state;
35mod tabs;
36
37use async_tungstenite::tungstenite::protocol::Message;
38use tabs::{
39 computed_layout::*,
40 layout::*,
41 misc::*,
42 style::*,
43 text_style::*,
44 tree::*,
45};
46
47fn main() {
48 launch(
49 LaunchConfig::new().with_window(
50 WindowConfig::new(app)
51 .with_title("Freya Devtools")
52 .with_size(1200., 700.),
53 ),
54 )
55}
56
57pub fn app() -> impl IntoElement {
58 use_init_theme(|| DARK_THEME);
59 use_init_radio_station::<DevtoolsState, DevtoolsChannel>(|| DevtoolsState {
60 nodes: HashMap::new(),
61 expanded_nodes: HashSet::default(),
62 client: Arc::default(),
63 animation_speed: AnimationClock::DEFAULT_SPEED / AnimationClock::MAX_SPEED * 100.,
64 });
65 let mut radio = use_radio(DevtoolsChannel::Global);
66
67 use_hook(move || {
68 spawn(async move {
69 async fn connect(
70 mut radio: Radio<DevtoolsState, DevtoolsChannel>,
71 ) -> Result<(), tungstenite::Error> {
72 let tcp_stream = TcpStream::connect("[::1]:7354").await?;
73 let (ws_stream, _response) =
74 async_tungstenite::client_async("ws://[::1]:7354", tcp_stream).await?;
75
76 let (write, read) = ws_stream.split();
77
78 radio.write_silently().client.lock().await.replace(write);
79
80 read.for_each(move |message| async move {
81 if let Ok(message) = message
82 && let Ok(text) = message.into_text()
83 && let Ok(outgoing) = serde_json::from_str::<OutgoingMessage>(&text)
84 {
85 match outgoing.action {
86 OutgoingMessageAction::Update { window_id, nodes } => {
87 radio
88 .write_channel(DevtoolsChannel::UpdatedTree)
89 .nodes
90 .insert(window_id, nodes);
91 }
92 }
93 }
94 })
95 .await;
96
97 Ok(())
98 }
99
100 loop {
101 println!("Connecting to server...");
102 connect(radio).await.ok();
103 radio
104 .write_channel(DevtoolsChannel::UpdatedTree)
105 .nodes
106 .clear();
107 Timer::after(Duration::from_secs(2)).await;
108 }
109 })
110 });
111
112 rect()
113 .width(Size::fill())
114 .height(Size::fill())
115 .color(Color::WHITE)
116 .background((15, 15, 15))
117 .child(router(|| {
118 RouterConfig::<Route>::default().with_initial_path(Route::TreeInspector {})
119 }))
120}
121
122#[derive(PartialEq)]
123struct NavBar;
124impl Render for NavBar {
125 fn render(&self) -> impl IntoElement {
126 SideBar::new()
127 .width(Size::px(100.))
128 .bar(
129 rect()
130 .child(ActivableRoute::new(
131 Route::TreeInspector {},
132 Link::new(Route::TreeInspector {}).child(SideBarItem::new().child("Tree")),
133 ))
134 .child(ActivableRoute::new(
135 Route::Misc {},
136 Link::new(Route::Misc {}).child(SideBarItem::new().child("Misc")),
137 )),
138 )
139 .content(rect().padding(Gaps::new_all(8.)).child(outlet::<Route>()))
140 }
141}
142#[derive(Routable, Clone, PartialEq, Debug)]
143#[rustfmt::skip]
144pub enum Route {
145 #[layout(NavBar)]
146 #[route("/misc")]
147 Misc {},
148 #[layout(LayoutForTreeInspector)]
149 #[nest("/inspector")]
150 #[route("/")]
151 TreeInspector {},
152 #[nest("/node/:node_id/:window_id")]
153 #[layout(LayoutForNodeInspector)]
154 #[route("/style")]
155 NodeInspectorStyle { node_id: NodeId, window_id: u64 },
156 #[route("/layout")]
157 NodeInspectorLayout { node_id: NodeId, window_id: u64 },
158 #[route("/computed-layout")]
159 NodeInspectorComputedLayout { node_id: NodeId, window_id: u64 },
160 #[route("/text-style")]
161 NodeInspectorTextStyle { node_id: NodeId, window_id: u64 },
162}
163
164impl Route {
165 pub fn node_id(&self) -> Option<NodeId> {
166 match self {
167 Self::NodeInspectorStyle { node_id, .. }
168 | Self::NodeInspectorComputedLayout { node_id, .. }
169 | Self::NodeInspectorLayout { node_id, .. }
170 | Self::NodeInspectorTextStyle { node_id, .. } => Some(*node_id),
171 _ => None,
172 }
173 }
174
175 pub fn window_id(&self) -> Option<u64> {
176 match self {
177 Self::NodeInspectorStyle { window_id, .. }
178 | Self::NodeInspectorComputedLayout { window_id, .. }
179 | Self::NodeInspectorLayout { window_id, .. }
180 | Self::NodeInspectorTextStyle { window_id, .. } => Some(*window_id),
181 _ => None,
182 }
183 }
184}
185
186#[derive(PartialEq, Clone, Copy)]
187struct LayoutForNodeInspector {
188 window_id: u64,
189 node_id: NodeId,
190}
191
192impl Render for LayoutForNodeInspector {
193 fn render(&self) -> impl IntoElement {
194 let LayoutForNodeInspector { window_id, node_id } = *self;
195
196 rect()
197 .expanded()
198 .child(
199 ScrollView::new().height(Size::auto()).child(
200 rect()
201 .direction(Direction::Horizontal)
202 .padding((0., 4.))
203 .child(ActivableRoute::new(
204 Route::NodeInspectorStyle { node_id, window_id },
205 Link::new(Route::NodeInspectorStyle { node_id, window_id }).child(
206 FloatingTab::new().child(label().text("Style").max_lines(1)),
207 ),
208 ))
209 .child(ActivableRoute::new(
210 Route::NodeInspectorLayout { node_id, window_id },
211 Link::new(Route::NodeInspectorLayout { node_id, window_id }).child(
212 FloatingTab::new().child(label().text("Layout").max_lines(1)),
213 ),
214 ))
215 .child(ActivableRoute::new(
216 Route::NodeInspectorTextStyle { node_id, window_id },
217 Link::new(Route::NodeInspectorTextStyle { node_id, window_id }).child(
218 FloatingTab::new().child(label().text("Text Style").max_lines(1)),
219 ),
220 ))
221 .child(ActivableRoute::new(
222 Route::NodeInspectorComputedLayout { node_id, window_id },
223 Link::new(Route::NodeInspectorComputedLayout { node_id, window_id })
224 .child(
225 FloatingTab::new()
226 .child(label().text("Computed Layout").max_lines(1)),
227 ),
228 )),
229 ),
230 )
231 .child(rect().padding((6., 0.)).child(outlet::<Route>()))
232 }
233}
234
235#[derive(PartialEq)]
236struct LayoutForTreeInspector;
237
238impl Render for LayoutForTreeInspector {
239 fn render(&self) -> impl IntoElement {
240 let route = use_route::<Route>();
241 let radio = use_radio(DevtoolsChannel::Global);
242
243 let selected_node_id = route.node_id();
244 let selected_window_id = route.window_id();
245
246 let is_expanded_vertical = selected_node_id.is_some();
247
248 ResizableContainer::new()
249 .direction(Direction::Horizontal)
250 .panel(
251 ResizablePanel::new(60.).child(rect().padding(10.).child(NodesTree {
252 selected_node_id,
253 selected_window_id,
254 on_selected: EventHandler::new(move |(window_id, node_id)| {
255 let message = Message::Text(
256 serde_json::to_string(&IncomingMessage {
257 action: IncomingMessageAction::HighlightNode { window_id, node_id },
258 })
259 .unwrap()
260 .into(),
261 );
262 let client = radio.read().client.clone();
263 spawn(async move {
264 client
265 .lock()
266 .await
267 .as_mut()
268 .unwrap()
269 .send(message)
270 .await
271 .ok();
272 });
273 }),
274 })),
275 )
276 .panel(is_expanded_vertical.then(|| ResizablePanel::new(40.).child(outlet::<Route>())))
277 }
278}
279
280#[derive(PartialEq)]
281struct TreeInspector;
282
283impl Render for TreeInspector {
284 fn render(&self) -> impl IntoElement {
285 rect()
286 }
287}