zng_wgt_inspector/
debug.rs

Help
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 UiNode, mode: impl IntoVar<InspectMode>) -> impl 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 UiNode, mode: impl IntoVar<InspectMode>) -> impl 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 UiNode, mode: impl IntoVar<InspectMode>) -> impl 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 UiNode,
132    mut render: impl FnMut(usize, WidgetInfo, &mut FrameBuilder) + Send + 'static,
133    mode: impl IntoVar<InspectMode>,
134) -> impl 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 UiNode, enabled: impl IntoVar<bool>) -> impl 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                if args.target.is_none() && !fails.is_empty() && !hits.is_empty() {
248                    fails.clear();
249                    hits.clear();
250
251                    WIDGET.render();
252                }
253            }
254        }
255        UiNodeOp::Update { .. } => {
256            if let Some(enabled) = enabled.get_new() {
257                if enabled && valid {
258                    let id = WIDGET.id();
259                    handles = [MOUSE_MOVE_EVENT.subscribe(id), MOUSE_HOVERED_EVENT.subscribe(id)].into();
260                } else {
261                    handles.clear();
262                }
263                WIDGET.render();
264            }
265        }
266        UiNodeOp::Render { frame } => {
267            child.render(frame);
268
269            if valid && enabled.get() {
270                let widths = PxSideOffsets::new_all_same(Px(1));
271                let fail_sides = BorderSides::solid(colors::RED);
272                let hits_sides = BorderSides::solid(web_colors::LIME_GREEN);
273
274                frame.with_hit_tests_disabled(|frame| {
275                    for fail in &fails {
276                        if !fail.size.is_empty() {
277                            frame.push_border(*fail, widths, fail_sides, PxCornerRadius::zero());
278                        }
279                    }
280
281                    for hit in &hits {
282                        if !hit.size.is_empty() {
283                            frame.push_border(*hit, widths, hits_sides, PxCornerRadius::zero());
284                        }
285                    }
286                });
287            }
288        }
289        _ => {}
290    })
291}
292
293/// Draw the directional query for closest sibling of the hovered focusable widget.
294///
295/// # Window Only
296///
297/// This property only works if set in a window, if set in another widget it will log an error and not render anything.
298#[property(CONTEXT, default(None))]
299pub fn show_directional_query(child: impl UiNode, orientation: impl IntoVar<Option<Orientation2D>>) -> impl UiNode {
300    let orientation = orientation.into_var();
301    let mut valid = false;
302    let mut search_quads = vec![];
303    let mut _mouse_hovered_handle = None;
304
305    match_node(child, move |child, op| match op {
306        UiNodeOp::Init => {
307            valid = WIDGET.parent_id().is_none();
308            if valid {
309                WIDGET.sub_var(&orientation);
310                if orientation.get().is_some() {
311                    _mouse_hovered_handle = Some(MOUSE_HOVERED_EVENT.subscribe(WIDGET.id()));
312                }
313            } else {
314                tracing::error!("property `show_directional_query` is only valid in a window");
315            }
316        }
317        UiNodeOp::Deinit => {
318            _mouse_hovered_handle = None;
319        }
320        UiNodeOp::Event { update } => {
321            if !valid {
322                return;
323            }
324            if let Some(args) = MOUSE_HOVERED_EVENT.on(update) {
325                if let Some(orientation) = orientation.get() {
326                    let mut none = true;
327                    if let Some(target) = &args.target {
328                        let tree = WINDOW.info();
329                        for w_id in target.widgets_path().iter().rev() {
330                            if let Some(w) = tree.get(*w_id) {
331                                if let Some(w) = w.into_focusable(true, true) {
332                                    let sq: Vec<_> = orientation
333                                        .search_bounds(w.info().center(), Px::MAX, tree.spatial_bounds().to_box2d())
334                                        .map(|q| q.to_rect())
335                                        .collect();
336
337                                    if search_quads != sq {
338                                        search_quads = sq;
339                                        WIDGET.render();
340                                    }
341
342                                    none = false;
343                                    break;
344                                }
345                            }
346                        }
347                    }
348
349                    if none && !search_quads.is_empty() {
350                        search_quads.clear();
351                        WIDGET.render();
352                    }
353                }
354            }
355        }
356        UiNodeOp::Update { .. } => {
357            if !valid {
358                return;
359            }
360            if let Some(ori) = orientation.get_new() {
361                search_quads.clear();
362
363                if ori.is_some() {
364                    _mouse_hovered_handle = Some(MOUSE_HOVERED_EVENT.subscribe(WIDGET.id()));
365                } else {
366                    _mouse_hovered_handle = None;
367                }
368
369                WIDGET.render();
370            }
371        }
372        UiNodeOp::Render { frame } => {
373            child.render(frame);
374
375            if valid && orientation.get().is_some() {
376                let widths = PxSideOffsets::new_all_same(Px(1));
377                let quad_sides = BorderSides::solid(colors::YELLOW);
378
379                frame.with_hit_tests_disabled(|frame| {
380                    for quad in &search_quads {
381                        if !quad.size.is_empty() {
382                            frame.push_border(*quad, widths, quad_sides, PxCornerRadius::zero());
383                        }
384                    }
385                });
386            }
387        }
388        _ => {}
389    })
390}
zng_wgt_inspector/debug.rs

zng_wgt_inspector/
debug.rs
