zng_wgt/
interactivity_props.rs

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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
use std::sync::Arc;

use task::parking_lot::Mutex;
use zng_app::{static_id, widget::info};

use crate::prelude::*;

context_var! {
    static IS_ENABLED_VAR: bool = true;
}

/// Defines if default interaction is allowed in the widget and its descendants.
///
/// This property sets the interactivity of the widget to [`ENABLED`] or [`DISABLED`], to probe the enabled state in `when` clauses
/// use [`is_enabled`] or [`is_disabled`]. To probe the a widget's info state use [`WidgetInfo::interactivity`] value.
///
/// # Interactivity
///
/// Every widget has an interactivity state, it defines two tiers of disabled, the normal disabled blocks the default actions
/// of the widget, but still allows some interactions, such as a different cursor on hover or event an error tooltip on click, the
/// second tier blocks all interaction with the widget. This property controls the normal disabled, to fully block interaction use
/// the [`interactive`] property.
///
/// # Disabled Visual
///
/// Widgets that are interactive should visually indicate when the normal interactions are disabled, you can use the [`is_disabled`]
/// state property in a when block to implement the visually disabled appearance of a widget.
///
/// The visual cue for the disabled state is usually a reduced contrast from content and background by graying-out the text and applying a
/// grayscale filter for images. Also consider adding disabled interactions, such as a different cursor or a tooltip that explains why the button
/// is disabled.
///
/// [`ENABLED`]: zng_app::widget::info::Interactivity::ENABLED
/// [`DISABLED`]: zng_app::widget::info::Interactivity::DISABLED
/// [`WidgetInfo::interactivity`]: zng_app::widget::info::WidgetInfo::interactivity
/// [`interactive`]: fn@interactive
/// [`is_enabled`]: fn@is_enabled
/// [`is_disabled`]: fn@is_disabled
#[property(CONTEXT, default(true))]
pub fn enabled(child: impl UiNode, enabled: impl IntoVar<bool>) -> impl UiNode {
    let enabled = enabled.into_var();

    let child = match_node(
        child,
        clmv!(enabled, |_, op| match op {
            UiNodeOp::Init => {
                WIDGET.sub_var_info(&enabled);
            }
            UiNodeOp::Info { info } => {
                if !enabled.get() {
                    info.push_interactivity(Interactivity::DISABLED);
                }
            }
            _ => {}
        }),
    );

    with_context_var(child, IS_ENABLED_VAR, merge_var!(IS_ENABLED_VAR, enabled, |&a, &b| a && b))
}

/// Defines if any interaction is allowed in the widget and its descendants.
///
/// This property sets the interactivity of the widget to [`BLOCKED`] when `false`, widgets with blocked interactivity do not
/// receive any interaction event and behave like a background visual. To probe the widget's info state use [`WidgetInfo::interactivity`] value.
///
/// This property *enables* and *disables* interaction with the widget and its descendants without causing
/// a visual change like [`enabled`], it also blocks "disabled" interactions such as a different cursor or tooltip for disabled buttons.
///
/// Note that this affects the widget where it is set and descendants, to disable interaction only in the widgets
/// inside `child` use the [`node::interactive_node`].
///
/// [`enabled`]: fn@enabled
/// [`BLOCKED`]: Interactivity::BLOCKED
/// [`WidgetInfo::interactivity`]: zng_app::widget::info::WidgetInfo::interactivity
/// [`node::interactive_node`]: crate::node::interactive_node
#[property(CONTEXT, default(true))]
pub fn interactive(child: impl UiNode, interactive: impl IntoVar<bool>) -> impl UiNode {
    let interactive = interactive.into_var();

    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_info(&interactive);
        }
        UiNodeOp::Info { info } => {
            if !interactive.get() {
                info.push_interactivity(Interactivity::BLOCKED);
            }
        }
        _ => {}
    })
}

/// If the widget is enabled for interaction.
///
/// This property is used only for probing the state. You can set the state using
/// the [`enabled`] property.
///
/// [`enabled`]: fn@enabled
/// [`WidgetInfo::allow_interaction`]: crate::widget_info::WidgetInfo::allow_interaction
#[property(EVENT)]
pub fn is_enabled(child: impl UiNode, state: impl IntoVar<bool>) -> impl UiNode {
    event_state(child, state, true, info::INTERACTIVITY_CHANGED_EVENT, move |args| {
        if let Some((_, new)) = args.vis_enabled_change(WIDGET.id()) {
            Some(new.is_vis_enabled())
        } else {
            None
        }
    })
}
/// If the widget is disabled for interaction.
///
/// This property is used only for probing the state. You can set the state using
/// the [`enabled`] property.
///
/// [`enabled`]: fn@enabled
#[property(EVENT)]
pub fn is_disabled(child: impl UiNode, state: impl IntoVar<bool>) -> impl UiNode {
    event_state(child, state, false, info::INTERACTIVITY_CHANGED_EVENT, move |args| {
        if let Some((_, new)) = args.vis_enabled_change(WIDGET.id()) {
            Some(!new.is_vis_enabled())
        } else {
            None
        }
    })
}

event_property! {
    /// Widget interactivity changed.
    ///
    /// Note that there are multiple specific events for interactivity changes, [`on_enable`], [`on_disable`], [`on_block`] and [`on_unblock`]
    /// are some of then.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree, this is because the interactivity *changed*
    /// from `None`, this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// [`on_enable`]: fn@on_enable
    /// [`on_disable`]: fn@on_disable
    /// [`on_block`]: fn@on_block
    /// [`on_unblock`]: fn@on_unblock
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn interactivity_changed {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
    }

    /// Widget was enabled or disabled.
    ///
    /// Note that this event tracks the actual enabled status of the widget, not the visually enabled status,
    /// see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree, this is because the interactivity *changed*
    /// from `None`, this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_interactivity_changed`] for a more general interactivity event.
    ///
    /// [`on_interactivity_changed`]: fn@on_interactivity_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn enabled_changed {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.enabled_change(WIDGET.id()).is_some(),
    }

    /// Widget changed to enabled or disabled visuals.
    ///
    /// Note that this event tracks the visual enabled status of the widget, not the actual status, the widget may
    /// still be blocked, see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree, this is because the interactivity *changed*
    /// from `None`, this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_interactivity_changed`] for a more general interactivity event.
    ///
    /// [`on_interactivity_changed`]: fn@on_interactivity_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn vis_enabled_changed {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.vis_enabled_change(WIDGET.id()).is_some(),
    }

    /// Widget interactions where blocked or unblocked.
    ///
    /// Note that blocked widgets may still be visually enabled, see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree, this is because the interactivity *changed*
    /// from `None`, this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_interactivity_changed`] for a more general interactivity event.
    ///
    /// [`on_interactivity_changed`]: fn@on_interactivity_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn blocked_changed {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.blocked_change(WIDGET.id()).is_some(),
    }

    /// Widget normal interactions now enabled.
    ///
    /// Note that this event tracks the actual enabled status of the widget, not the visually enabled status,
    /// see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts enabled,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_enabled_changed`] for a more general event.
    ///
    /// [`on_enabled_changed`]: fn@on_enabled_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn enable {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_enable(WIDGET.id()),
    }

    /// Widget normal interactions now disabled.
    ///
    /// Note that this event tracks the actual enabled status of the widget, not the visually enabled status,
    /// see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts disabled,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_enabled_changed`] for a more general event.
    ///
    /// [`on_enabled_changed`]: fn@on_enabled_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn disable {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_disable(WIDGET.id()),
    }

    /// Widget now looks enabled.
    ///
    /// Note that this event tracks the visual enabled status of the widget, not the actual status, the widget may
    /// still be blocked, see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts visually enabled,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_vis_enabled_changed`] for a more general event.
    ///
    /// [`on_vis_enabled_changed`]: fn@on_vis_enabled_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn vis_enable {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_vis_enable(WIDGET.id()),
    }

    /// Widget now looks disabled.
    ///
    /// Note that this event tracks the visual enabled status of the widget, not the actual status, the widget may
    /// still be blocked, see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts visually disabled,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_vis_enabled_changed`] for a more general event.
    ///
    /// [`on_vis_enabled_changed`]: fn@on_vis_enabled_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn vis_disable {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_vis_disable(WIDGET.id()),
    }

    /// Widget interactions now blocked.
    ///
    /// Note that blocked widgets may still be visually enabled, see [`Interactivity`] for more details.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts blocked,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_blocked_changed`] for a more general event.
    ///
    /// [`on_blocked_changed`]: fn@on_blocked_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn block {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_block(WIDGET.id()),
    }

    /// Widget interactions now unblocked.
    ///
    /// Note that the widget may still be disabled.
    ///
    /// Note that an event is received when the widget first initializes in the widget info tree if it starts unblocked,
    /// this initial event can be detected using the [`is_new`] method in the args.
    ///
    /// See [`on_blocked_changed`] for a more general event.
    ///
    /// [`on_blocked_changed`]: fn@on_blocked_changed
    /// [`Interactivity`]: zng_app::widget::info::Interactivity
    /// [`is_new`]: info::InteractivityChangedArgs::is_new
    pub fn unblock {
        event: info::INTERACTIVITY_CHANGED_EVENT,
        args: info::InteractivityChangedArgs,
        filter: |a| a.is_unblock(WIDGET.id()),
    }
}

/// Only allow interaction inside the widget, descendants and ancestors.
///
/// When a widget is in modal mode, only it, descendants and ancestors are interactive. If [`modal_includes`]
/// is set on the widget the ancestors and descendants of each include are also allowed.
///
/// Only one widget can be the modal at a time, if multiple widgets set `modal = true` only the last one by traversal order is actually modal.
///
/// This property also sets the accessibility modal flag.
///
/// [`modal_includes`]: fn@modal_includes
#[property(CONTEXT, default(false))]
pub fn modal(child: impl UiNode, enabled: impl IntoVar<bool>) -> impl UiNode {
    static_id! {
        static ref MODAL_WIDGETS: StateId<Arc<Mutex<ModalWidgetsData>>>;
    }
    #[derive(Default)]
    struct ModalWidgetsData {
        widgets: IdSet<WidgetId>,
        registrar: Option<WidgetId>,

        last_in_tree: Option<WidgetInfo>,
    }
    let enabled = enabled.into_var();

    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_info(&enabled);
            WINDOW.init_state_default(*MODAL_WIDGETS); // insert window state
        }
        UiNodeOp::Deinit => {
            let mws = WINDOW.req_state(*MODAL_WIDGETS);

            // maybe unregister.
            let mut mws = mws.lock();
            let widget_id = WIDGET.id();
            if mws.widgets.remove(&widget_id) {
                if mws.registrar == Some(widget_id) {
                    // change the existing modal that will re-register on info rebuild.
                    mws.registrar = mws.widgets.iter().next().copied();
                    if let Some(id) = mws.registrar {
                        // ensure that the next registrar is not reused.
                        UPDATES.update_info(id);
                    }
                }

                if mws.last_in_tree.as_ref().map(WidgetInfo::id) == Some(widget_id) {
                    // will re-compute next time the filter is used.
                    mws.last_in_tree = None;
                }
            }
        }
        UiNodeOp::Info { info } => {
            let mws = WINDOW.req_state(*MODAL_WIDGETS);

            if enabled.get() {
                if let Some(mut a) = info.access() {
                    a.flag_modal();
                }

                let insert_filter = {
                    let mut mws = mws.lock();
                    let widget_id = WIDGET.id();
                    if mws.widgets.insert(widget_id) {
                        mws.last_in_tree = None;
                        let r = mws.registrar.is_none();
                        if r {
                            mws.registrar = Some(widget_id);
                        }
                        r
                    } else {
                        mws.registrar == Some(widget_id)
                    }
                };
                if insert_filter {
                    // just registered and we are the first, insert the filter:

                    info.push_interactivity_filter(clmv!(mws, |a| {
                        let mut mws = mws.lock();

                        // caches the top-most modal.
                        if mws.last_in_tree.is_none() {
                            match mws.widgets.len() {
                                0 => unreachable!(),
                                1 => {
                                    // only one modal
                                    mws.last_in_tree = a.info.tree().get(*mws.widgets.iter().next().unwrap());
                                    assert!(mws.last_in_tree.is_some());
                                }
                                _ => {
                                    // multiple modals, find the *top* one.
                                    let mut found = 0;
                                    for info in a.info.root().self_and_descendants() {
                                        if mws.widgets.contains(&info.id()) {
                                            mws.last_in_tree = Some(info);
                                            found += 1;
                                            if found == mws.widgets.len() {
                                                break;
                                            }
                                        }
                                    }
                                }
                            };
                        }

                        // filter, only allows inside self inclusive, and ancestors.
                        // modal_includes checks if the id is modal or one of the includes.

                        let modal = mws.last_in_tree.as_ref().unwrap();

                        if a.info
                            .self_and_ancestors()
                            .any(|w| modal.modal_includes(w.id()) || w.modal_included(modal.id()))
                        {
                            // widget ancestor is modal, modal include or includes itself in modal
                            return Interactivity::ENABLED;
                        }
                        if a.info
                            .self_and_descendants()
                            .any(|w| modal.modal_includes(w.id()) || w.modal_included(modal.id()))
                        {
                            // widget or descendant is modal, modal include or includes itself in modal
                            return Interactivity::ENABLED;
                        }
                        Interactivity::BLOCKED
                    }));
                }
            } else {
                // maybe unregister.
                let mut mws = mws.lock();
                let widget_id = WIDGET.id();
                if mws.widgets.remove(&widget_id) && mws.last_in_tree.as_ref().map(|w| w.id()) == Some(widget_id) {
                    mws.last_in_tree = None;
                }
            }
        }
        _ => {}
    })
}

/// Extra widgets that are allowed interaction by this widget when it is [`modal`].
///
/// Note that this is only needed for widgets that are not descendants nor ancestors of this widget, but
/// still need to be interactive when the modal is active.
///
/// See also [`modal_included`] if you prefer setting the modal widget id on the included widget.
///
/// This property calls [`insert_modal_include`] on the widget.
///
/// [`modal`]: fn@modal
/// [`insert_modal_include`]: WidgetInfoBuilderModalExt::insert_modal_include
/// [`modal_included`]: fn@modal_included
#[property(CONTEXT, default(IdSet::new()))]
pub fn modal_includes(child: impl UiNode, includes: impl IntoVar<IdSet<WidgetId>>) -> impl UiNode {
    let includes = includes.into_var();
    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_info(&includes);
        }
        UiNodeOp::Info { info } => includes.with(|w| {
            for id in w {
                info.insert_modal_include(*id);
            }
        }),
        _ => (),
    })
}

/// Include itself in the allow list of another widget that is [`modal`] or descendant of modal.
///
/// Note that this is only needed for widgets that are not descendants nor ancestors of the modal widget, but
/// still need to be interactive when the modal is active.
///
/// See also [`modal_includes`] if you prefer setting the included widget id on the modal widget.
///
/// This property calls [`set_modal_included`] on the widget.
///
/// [`modal`]: fn@modal
/// [`set_modal_included`]: WidgetInfoBuilderModalExt::set_modal_included
/// [`modal_includes`]: fn@modal_includes
#[property(CONTEXT)]
pub fn modal_included(child: impl UiNode, modal_or_descendant: impl IntoVar<WidgetId>) -> impl UiNode {
    let modal = modal_or_descendant.into_var();
    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_info(&modal);
        }
        UiNodeOp::Info { info } => {
            info.set_modal_included(modal.get());
        }
        _ => {}
    })
}

/// Widget info builder extensions for [`modal`] control.
///
/// [`modal`]: fn@modal
pub trait WidgetInfoBuilderModalExt {
    /// Include an extra widget in the modal filter of this widget.
    fn insert_modal_include(&mut self, include: WidgetId);
    /// Register a modal widget that must include this widget in its modal filter.
    fn set_modal_included(&mut self, modal: WidgetId);
}
impl WidgetInfoBuilderModalExt for WidgetInfoBuilder {
    fn insert_modal_include(&mut self, include: WidgetId) {
        self.with_meta(|mut m| m.entry(*MODAL_INCLUDES).or_default().insert(include));
    }

    fn set_modal_included(&mut self, modal: WidgetId) {
        self.set_meta(*MODAL_INCLUDED, modal);
    }
}

trait WidgetInfoModalExt {
    fn modal_includes(&self, id: WidgetId) -> bool;
    fn modal_included(&self, modal: WidgetId) -> bool;
}
impl WidgetInfoModalExt for WidgetInfo {
    fn modal_includes(&self, id: WidgetId) -> bool {
        self.id() == id || self.meta().get(*MODAL_INCLUDES).map(|i| i.contains(&id)).unwrap_or(false)
    }

    fn modal_included(&self, modal: WidgetId) -> bool {
        if let Some(id) = self.meta().get_clone(*MODAL_INCLUDED) {
            if id == modal {
                return true;
            }
            if let Some(id) = self.tree().get(id) {
                return id.ancestors().any(|w| w.id() == modal);
            }
        }
        false
    }
}

static_id! {
    static ref MODAL_INCLUDES: StateId<IdSet<WidgetId>>;
    static ref MODAL_INCLUDED: StateId<WidgetId>;
}