zng_wgt_inspector/
debug.rs

1//! Debug inspection properties.
2
3use std::{cell::RefCell, fmt, rc::Rc};
4
5use zng_ext_input::{
6    focus::WidgetInfoFocusExt as _,
7    mouse::{MOUSE_HOVERED_EVENT, MOUSE_MOVE_EVENT},
8};
9use zng_ext_window::WINDOW_Ext as _;
10use zng_layout::unit::Orientation2D;
11use zng_view_api::display_list::FrameValue;
12use zng_wgt::prelude::*;
13
14/// Target of inspection properties.
15#[derive(Default, Clone, Copy, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
16pub enum InspectMode {
17    /// Just the widget where the inspector property is set.
18    Widget,
19    /// The widget where the inspector property is set and all descendants.
20    ///
21    /// The `true` value converts to this.
22    WidgetAndDescendants,
23    /// Disable inspection.
24    ///
25    /// The `false` value converts to this.
26    #[default]
27    Disabled,
28}
29impl fmt::Debug for InspectMode {
30    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
31        if f.alternate() {
32            write!(f, "InspectMode::")?;
33        }
34        match self {
35            Self::Widget => write!(f, "Widget"),
36            Self::WidgetAndDescendants => write!(f, "WidgetAndDescendants"),
37            Self::Disabled => write!(f, "Disabled"),
38        }
39    }
40}
41impl_from_and_into_var! {
42    fn from(widget_and_descendants: bool) -> InspectMode {
43        if widget_and_descendants {
44            InspectMode::WidgetAndDescendants
45        } else {
46            InspectMode::Disabled
47        }
48    }
49}
50
51/// Draws a debug dot in target widget's [center point].
52///
53/// [center point]: zng_wgt::prelude::WidgetInfo::center
54#[property(CONTEXT, default(false))]
55pub fn show_center_points(child: impl IntoUiNode, mode: impl IntoVar<InspectMode>) -> UiNode {
56    show_widget_tree(
57        child,
58        |_, wgt, frame| {
59            frame.push_debug_dot(wgt.center(), colors::GREEN);
60        },
61        mode,
62    )
63}
64
65/// Draws a border for every target widget's outer and inner bounds.
66///
67/// The outer bounds is drawn dotted and in pink, the inner bounds is drawn solid and in blue.
68#[property(CONTEXT, default(false))]
69pub fn show_bounds(child: impl IntoUiNode, mode: impl IntoVar<InspectMode>) -> UiNode {
70    show_widget_tree(
71        child,
72        |_, wgt, frame| {
73            let p = Dip::new(1).to_px(frame.scale_factor());
74
75            let outer_bounds = wgt.outer_bounds();
76            let inner_bounds = wgt.inner_bounds();
77
78            if outer_bounds != inner_bounds && !outer_bounds.is_empty() {
79                frame.push_border(
80                    wgt.outer_bounds(),
81                    PxSideOffsets::new_all_same(p),
82                    BorderSides::dotted(web_colors::PINK),
83                    PxCornerRadius::zero(),
84                );
85            }
86
87            if !inner_bounds.size.is_empty() {
88                frame.push_border(
89                    inner_bounds,
90                    PxSideOffsets::new_all_same(p),
91                    BorderSides::solid(web_colors::ROYAL_BLUE),
92                    PxCornerRadius::zero(),
93                );
94            }
95        },
96        mode,
97    )
98}
99
100/// Draws a border over every inlined widget row in the window.
101#[property(CONTEXT, default(false))]
102pub fn show_rows(child: impl IntoUiNode, mode: impl IntoVar<InspectMode>) -> UiNode {
103    let spatial_id = SpatialFrameId::new_unique();
104    show_widget_tree(
105        child,
106        move |i, wgt, frame| {
107            let p = Dip::new(1).to_px(frame.scale_factor());
108
109            let wgt = wgt.bounds_info();
110            let transform = wgt.inner_transform();
111            if let Some(inline) = wgt.inline() {
112                frame.push_reference_frame((spatial_id, i as u32).into(), FrameValue::Value(transform), false, false, |frame| {
113                    for row in &inline.rows {
114                        if !row.size.is_empty() {
115                            frame.push_border(
116                                *row,
117                                PxSideOffsets::new_all_same(p),
118                                BorderSides::dotted(web_colors::LIGHT_SALMON),
119                                PxCornerRadius::zero(),
120                            );
121                        }
122                    }
123                })
124            };
125        },
126        mode,
127    )
128}
129
130fn show_widget_tree(
131    child: impl IntoUiNode,
132    mut render: impl FnMut(usize, WidgetInfo, &mut FrameBuilder) + Send + 'static,
133    mode: impl IntoVar<InspectMode>,
134) -> UiNode {
135    let mode = mode.into_var();
136    let cancel_space = SpatialFrameId::new_unique();
137    match_node(child, move |child, op| match op {
138        UiNodeOp::Init => {
139            WIDGET.sub_var_render(&mode);
140        }
141        UiNodeOp::Render { frame } => {
142            child.render(frame);
143
144            let mut r = |render: &mut dyn FnMut(WidgetInfo, &mut FrameBuilder)| {
145                let tree = WINDOW.info();
146                if let Some(wgt) = tree.get(WIDGET.id()) {
147                    if WIDGET.parent_id().is_none() {
148                        render(wgt, frame);
149                    } else if let Some(t) = frame.transform().inverse() {
150                        // cancel current transform
151                        frame.push_reference_frame(cancel_space.into(), t.into(), false, false, |frame| {
152                            render(wgt, frame);
153                        })
154                    } else {
155                        tracing::error!("cannot inspect from `{:?}`, non-invertible transform", WIDGET.id())
156                    }
157                }
158            };
159
160            match mode.get() {
161                InspectMode::Widget => {
162                    r(&mut |wgt, frame| {
163                        render(0, wgt, frame);
164                    });
165                }
166                InspectMode::WidgetAndDescendants => {
167                    r(&mut |wgt, frame| {
168                        for (i, wgt) in wgt.self_and_descendants().enumerate() {
169                            render(i, wgt, frame);
170                        }
171                    });
172                }
173                InspectMode::Disabled => {}
174            }
175        }
176        _ => {}
177    })
178}
179
180/// Draws the inner bounds that where tested for the mouse point.
181///
182/// # Window Only
183///
184/// This property only works if set in a window, if set in another widget it will log an error and not render anything.
185#[property(CONTEXT, default(false))]
186pub fn show_hit_test(child: impl IntoUiNode, enabled: impl IntoVar<bool>) -> UiNode {
187    let enabled = enabled.into_var();
188    let mut handles = EventHandles::default();
189    let mut valid = false;
190    let mut fails = vec![];
191    let mut hits = vec![];
192
193    match_node(child, move |child, op| match op {
194        UiNodeOp::Init => {
195            valid = WIDGET.parent_id().is_none();
196            if valid {
197                WIDGET.sub_var(&enabled);
198
199                if enabled.get() {
200                    let id = WIDGET.id();
201                    handles = [MOUSE_MOVE_EVENT.subscribe(id), MOUSE_HOVERED_EVENT.subscribe(id)].into();
202                } else {
203                    handles.clear();
204                }
205            } else {
206                tracing::error!("property `show_hit_test` is only valid in a window");
207            }
208        }
209        UiNodeOp::Deinit => {
210            handles.clear();
211        }
212        UiNodeOp::Event { update } => {
213            if let Some(args) = MOUSE_MOVE_EVENT.on(update) {
214                if valid && enabled.get() {
215                    let factor = WINDOW.vars().scale_factor().get();
216                    let pt = args.position.to_px(factor);
217
218                    let new_fails = Rc::new(RefCell::new(vec![]));
219                    let new_hits = Rc::new(RefCell::new(vec![]));
220
221                    let tree = WINDOW.info();
222                    let _ = tree
223                        .root()
224                        .spatial_iter(clmv!(new_fails, new_hits, |w| {
225                            let bounds = w.inner_bounds();
226                            let hit = bounds.contains(pt);
227                            if hit {
228                                new_hits.borrow_mut().push(bounds);
229                            } else {
230                                new_fails.borrow_mut().push(bounds);
231                            }
232                            hit
233                        }))
234                        .count();
235
236                    let new_fails = Rc::try_unwrap(new_fails).unwrap().into_inner();
237                    let new_hits = Rc::try_unwrap(new_hits).unwrap().into_inner();
238
239                    if fails != new_fails || hits != new_hits {
240                        fails = new_fails;
241                        hits = new_hits;
242
243                        WIDGET.render();
244                    }
245                }
246            } else if let Some(args) = MOUSE_HOVERED_EVENT.on(update)
247                && args.target.is_none()
248                && !fails.is_empty()
249                && !hits.is_empty()
250            {
251                fails.clear();
252                hits.clear();
253
254                WIDGET.render();
255            }
256        }
257        UiNodeOp::Update { .. } => {
258            if let Some(enabled) = enabled.get_new() {
259                if enabled && valid {
260                    let id = WIDGET.id();
261                    handles = [MOUSE_MOVE_EVENT.subscribe(id), MOUSE_HOVERED_EVENT.subscribe(id)].into();
262                } else {
263                    handles.clear();
264                }
265                WIDGET.render();
266            }
267        }
268        UiNodeOp::Render { frame } => {
269            child.render(frame);
270
271            if valid && enabled.get() {
272                let widths = PxSideOffsets::new_all_same(Px(1));
273                let fail_sides = BorderSides::solid(colors::RED);
274                let hits_sides = BorderSides::solid(web_colors::LIME_GREEN);
275
276                frame.with_hit_tests_disabled(|frame| {
277                    for fail in &fails {
278                        if !fail.size.is_empty() {
279                            frame.push_border(*fail, widths, fail_sides, PxCornerRadius::zero());
280                        }
281                    }
282
283                    for hit in &hits {
284                        if !hit.size.is_empty() {
285                            frame.push_border(*hit, widths, hits_sides, PxCornerRadius::zero());
286                        }
287                    }
288                });
289            }
290        }
291        _ => {}
292    })
293}
294
295/// Draw the directional query for closest sibling of the hovered focusable widget.
296///
297/// # Window Only
298///
299/// This property only works if set in a window, if set in another widget it will log an error and not render anything.
300#[property(CONTEXT, default(None))]
301pub fn show_directional_query(child: impl IntoUiNode, orientation: impl IntoVar<Option<Orientation2D>>) -> UiNode {
302    let orientation = orientation.into_var();
303    let mut valid = false;
304    let mut search_quads = vec![];
305    let mut _mouse_hovered_handle = None;
306
307    match_node(child, move |child, op| match op {
308        UiNodeOp::Init => {
309            valid = WIDGET.parent_id().is_none();
310            if valid {
311                WIDGET.sub_var(&orientation);
312                if orientation.get().is_some() {
313                    _mouse_hovered_handle = Some(MOUSE_HOVERED_EVENT.subscribe(WIDGET.id()));
314                }
315            } else {
316                tracing::error!("property `show_directional_query` is only valid in a window");
317            }
318        }
319        UiNodeOp::Deinit => {
320            _mouse_hovered_handle = None;
321        }
322        UiNodeOp::Event { update } => {
323            if !valid {
324                return;
325            }
326            if let Some(args) = MOUSE_HOVERED_EVENT.on(update)
327                && let Some(orientation) = orientation.get()
328            {
329                let mut none = true;
330                if let Some(target) = &args.target {
331                    let tree = WINDOW.info();
332                    for w_id in target.widgets_path().iter().rev() {
333                        if let Some(w) = tree.get(*w_id)
334                            && let Some(w) = w.into_focusable(true, true)
335                        {
336                            let sq: Vec<_> = orientation
337                                .search_bounds(w.info().center(), Px::MAX, tree.spatial_bounds().to_box2d())
338                                .map(|q| q.to_rect())
339                                .collect();
340
341                            if search_quads != sq {
342                                search_quads = sq;
343                                WIDGET.render();
344                            }
345
346                            none = false;
347                            break;
348                        }
349                    }
350                }
351
352                if none && !search_quads.is_empty() {
353                    search_quads.clear();
354                    WIDGET.render();
355                }
356            }
357        }
358        UiNodeOp::Update { .. } => {
359            if !valid {
360                return;
361            }
362            if let Some(ori) = orientation.get_new() {
363                search_quads.clear();
364
365                if ori.is_some() {
366                    _mouse_hovered_handle = Some(MOUSE_HOVERED_EVENT.subscribe(WIDGET.id()));
367                } else {
368                    _mouse_hovered_handle = None;
369                }
370
371                WIDGET.render();
372            }
373        }
374        UiNodeOp::Render { frame } => {
375            child.render(frame);
376
377            if valid && orientation.get().is_some() {
378                let widths = PxSideOffsets::new_all_same(Px(1));
379                let quad_sides = BorderSides::solid(colors::YELLOW);
380
381                frame.with_hit_tests_disabled(|frame| {
382                    for quad in &search_quads {
383                        if !quad.size.is_empty() {
384                            frame.push_border(*quad, widths, quad_sides, PxCornerRadius::zero());
385                        }
386                    }
387                });
388            }
389        }
390        _ => {}
391    })
392}
zng_wgt_inspector/debug.rs

zng_wgt_inspector/
debug.rs
