linebender / druid-widget-nursery

A place where Druid widgets come to mature before moving to the Druid repo.

druid-widget-nursery

This repo contains (or, at the time of writing, will contain) widgets that work with druid. The repo follows a policy of optimistic merging, and the idea is that having a lower barrier to merging PRs hopefully leads to a nice contributor experience, which then encourages more people to become regular collaborators for the whole druid family of crates.

We don't insist that all widgets always build when updating to a newer version of druid, and so as you'll see the CI is allowed to fail. Fixing these build failures will often be a good opportunity for a first contribution, and people will always be willing to help out with this work either here or on zulip.

So, in summary, the default assumption for PRs to this repo will be to merge, but this policy includes future PRs that might change or reverse stuff in previous PRs. For more information I recommend reading the optimistic merging article linked here and above, which offers an interesting approach to managing open source projects irrespective of its use here.

Note that for CI we use cargo clippy --all-targets --all-features

Using this library

Add the following to your Cargo.toml. You will need to get the current druid rev from this repository's Cargo.toml.

druid-widget-nursery = { git = "https://github.com/linebender/druid-widget-nursery" }

[patch.'https://github.com/linebender/druid'.druid]
git = "https://github.com/linebender/druid"
rev = "<copy the current druid rev from this repository's Cargo.toml>"

The rev in your Cargo.toml should match the rev under [dependencies.druid] in this repo's Cargo.toml. This ensures that your app depends on the same version of druid as this library - otherwise you may end up with problems with multiple versions of druid installed. For more on the override syntax above, see Cargo's patch documentation.

Once you have druid-widget-nursery installed, you can import the various widgets as usual with use druid_widget_nursery::YourWidgetNameHere. For specific examples of using the various widgets, check out the examples directory.

Widgets

If you add a new widget, please add its name and a short summary here.

• A tree widget

  

• A Navigator widget that can display different child widgets/views.

• Dropdown : a basic dropdown widget using the recently added sub-windows

• Dropdown Select : a basic widget for selecting one item out of a dropdown list

  

• List Select : a basic widget to select one item out of a list

• Animator : a helper for running multiple animations with different curves/timing/dependencies

• Animated : a helper for simple transitions.

• PartialWidget : a widget that shows a widget if its data is present

  

• MultiRadio : a Radio that represents multiple values through an inner widget

• MultiCheckbox : a Checkbox that represents multiple values through an inner widget

• Switcher : a widget which displays the first widget for which the associated Prism returns Some()

• LazySwitcher : a widget like Switcher but the inner widget are created lazily on demand.

• TooltipController : a convenient way to pop up text tooltips on mouse hover

• OnMonitor : a helper widget for keeping subwindows from going outside the monitor bounds

• Splits : Multiple resizable splits

• ListFilter : a widget which filters a list for its inner widget.

• TitleBar : a widget that is treated as a window's titlebar. (Only on windows)

• An advanced version of the slider which also allows keyboard input.

  

• material_icons::Icon : A helper for drawing material icons.

ProgressBar Improvements

• Building on the existing progress bar in druid.
• Making styling options more configurable, using theme values as defaults, with options in the widget to override.
• Removed constraint on widget width, the widget will now expand to fit its container.
• Future Idea: Add optional configuration for text that would go over the progress bar.
• Future Idea: Draw the entire rounded rectangle for the progress bar and then truncate it, so gradients don't size to the current progress, but always to what would be a full progress bar. At least as an option.
• TODO: Should width and height be completely configurable, both sized to expand into their container?
• TODO: review theme values more generally, concerned that they might not be getting used consistently.

Widget Requests

If you need a certain widget, and you think it might be useful to others, feel free to make a PR adding it to this list.

• A really good, general widget for laying out collections of items.
  • There are different approaches we could use (flexbox or grid from the HTML world).
  • This might be multiple widgets serving different use cases in the end.
• A widget that works like druid::widget::Scroll but also supports zooming its content.
• A color picker

Links to widget crates

Maybe you have made your own collection of widgets that aren't general enough to go into druid proper, but will still be useful to other druid users. Submit a PR to add them here!

• druid-graphs: An alpha quality library for drawing graphs as widgets, taking inspiration from matplotlib. Currently only supports a few graph types, collaboration welcome! Works well with druid-lens-compose.
• druid_table : A table/datagrid widget (also has some interpolation/visualisation stuff currently). Uses druid_bindings
• druid-enums: A widget for viewing enums, which displays different widgets depending on the variant of its data.

druid-widget-nursery's Issues

FlexTable example does not work

Hi, FlexTable example doesn't work
And why have these widgets not moved to druid repo? are they not complete?

the trait bound `Align<_>: druid::widget::widget::Widget<_>` is not satisfied
the following other types implement trait `druid::widget::widget::Widget<T>`:
  <AdvancedSlider as druid::widget::widget::Widget<f64>>
  <Box<(dyn PrismWidget<T> + 'static)> as druid::widget::widget::Widget<T>>
  <Box<(dyn druid::widget::widget::Widget<T> + 'static)> as druid::widget::widget::Widget<T>>
  <Canvas<T> as druid::widget::widget::Widget<T>>
  <CanvasWrap<W, T, F> as druid::widget::widget::Widget<T>>
  <ComputedWidget<T, U> as druid::widget::widget::Widget<T>>
  <DisablePrismWrap<W, U, P> as druid::widget::widget::Widget<T>>
  <DynamicSizedBox<T> as druid::widget::widget::Widget<T>>

the trait bound `Label<_>: druid::widget::widget::Widget<_>` is not satisfied
the following other types implement trait `druid::widget::widget::Widget<T>`:
  <AdvancedSlider as druid::widget::widget::Widget<f64>>
  <Box<(dyn PrismWidget<T> + 'static)> as druid::widget::widget::Widget<T>>
  <Box<(dyn druid::widget::widget::Widget<T> + 'static)> as druid::widget::widget::Widget<T>>
  <Canvas<T> as druid::widget::widget::Widget<T>>
  <CanvasWrap<W, T, F> as druid::widget::widget::Widget<T>>
  <ComputedWidget<T, U> as druid::widget::widget::Widget<T>>
  <DisablePrismWrap<W, U, P> as druid::widget::widget::Widget<T>>
  <DynamicSizedBox<T> as druid::widget::widget::Widget<T>>

Usage of enum_switcher widgets results in warning spam

The repro from #88 applies almost exactly, it just didn't work as a reproducer for this issue because I hadn't enabled log printing. I've now updated the same repo to show this issue: https://github.com/jplatte/druid-enum-switcher-bug

Warnings look like this:

2022-01-10T17:47:50.088952Z  WARN event: druid::core: WidgetId(3) received an event (MouseMove(MouseEvent { pos: (254.9296875, 126.9453125), window_pos: (254.9296875, 126.9453125), buttons: MouseButtons(00000), mods: Modifiers(NUM_LOCK), count: 0, focus: false, button: None, wheel_delta: Vec2 { x: 0.0, y: 0.0 } })) without having been laid out. This likely indicates a missed call to set_origin.

and occur for every mouse movement within the window / Switcher (haven't tried whether it happens outside of the switcher if it doesn't occupy the whole window).

DropdownSelect weird behavior

I've added a DropdownSelect to my app with the following code:

                    DropdownSelect::new(vec![
                        ("Light", Theme::Light),
                        ("Dark", Theme::Dark)
                    ]).lens(State::preferences.then(Preferences::theme))

Where State is the application main state, Preferences is an inner struct in State, Theme is an enum with 2 variants (Light and Dark).

Strangely this code works and gives a DropdownSelect where I can select a different item and also updates however when I click on the dropdown itself (to close it, leaving it unchanged) the entire application shuts down like if it crashed but nothing appears in console apart from an exit code of 0. Additionally I can confirm that somehow the widget caused the main rendering/event loop to exit and the main function actually returned...

Is this expected behavior? If it is expected, is there any way to remove this behavior?

Dropdown: wrong window position

Testing on Debian bullseye, the position of the dropdown popup window is wrong. The following
patch makes it better:

diff --git a/src/dropdown.rs b/src/dropdown.rs
index 357a80e..dbd692a 100644
--- a/src/dropdown.rs
+++ b/src/dropdown.rs
@@ -33,7 +33,7 @@ impl<T: Data> Dropdown<T> {
 
     fn show_dropdown(&mut self, data: &mut T, env: &Env, ctx: &mut EventCtx) {
         let widget = (self.drop)(data, env);
-        let origin = ctx.to_screen(Point::new(0., ctx.size().height));
+        let origin = ctx.to_window(Point::new(0., ctx.size().height));
         self.window = Some(
             ctx.new_sub_window(
                 WindowConfig::default()

Horizontal position is now correct, but the windows has still the wrong vertical position (off by about the size of the window decorations).

ListSelect::on_select provides previous selection to callback

When running the select example the application is supposed to print the selected city to the console, but it's printing the previously selected city instead. For example, after initially launching, if the user mouse clicks the "to Sydney" list item ("to Tokyo" is selected initially) the application prints "Selected Destination: Tokyo".

This appears to be because the selected state is set true on MouseDown, but the ListItem isn't updated until MouseUp.

It seems like the list's on_select shouldn't fire until MouseUp has been received, but it also needs to propagate events through the list items first. The list may also need to make sure it received both the MouseDown and MouseUp events because you wouldn't want the selection to fire if the mouse was dragged over the list then released.

Add a datetime picker widget

As requested here : linebender/druid#1727

This requires a bit of design first as date/time picker are infamously known to have bad UX (especially in webapps, but still).

One other pain point, is that we must conform to the locale (date format if we want an optional textbox, am/pm vs 24h...).

Convert uses of the `log` crate to using `tracing`.

AutoFocus breaks focus_next for some widgets

Adding an AutoFocus controller to a TextBox prevents tab from focusing the next element.
I think this is due to ctx.register_for_focus() being called by both the controller and again by the Textbox.

Repository update causes select widget to stop showing subwindow

Upon updating the directory I have noticed that when I click the select button the tooltip (subwindow) does no longer show. I have tried rolling back to the previous release and everything works fine @derekdreery

Selector Widget error

the trait bound `Destination: druid::data::Data` is not satisfied
  --> src\main.rs:45:46
   |
45 |           Scroll::new(ListSelect::build_widget(vec![
   |  ______________________________________________^
46 | |             ("to Sydney", Destination::Sydney),
47 | |             ("to Petaluma", Destination::Petaluma),
48 | |             ("to Tokyo", Destination::Tokyo),
49 | |             ("to Paris", Destination::Paris),
50 | |         ]))
   | |_________^ the trait `druid::data::Data` is not implemented for `Destination`

Add a Flex wrap widget

I'm developing a naive wrapping flex widget similar to the one in the web standard. I don't think it's too ambitious, yet it would be very useful (I have a "list of tags" element) I feel it's something missing in the default widget library.

I will probably mirror the API for the default flex widget adding the extra necessary axis.

Would this be welcome in this repository?

TreeNodeWidget layout doesn't honor inner widget height (at least on X11)

Cargo.toml dependencies

I am trying out Druid for the first time today. As per the README I have tried using the below in Cargo.toml but I am getting the below error.

[dependencies]
druid = "0.7.0"
druid-widget-nursery = { git = "https://github.com/linebender/druid-widget-nursery" }

[patch.'https://github.com/linebender/druid'.druid]
git = "https://github.com/linebender/druid"
rev = "fc05e965c85fced8720c655685e02478e0530e94"

error: failed to resolve patches for `https://github.com/linebender/druid`

Caused by:
  patch for `druid` in `https://github.com/linebender/druid` points to the same source, but patches must point to different sources

I managed to get a demo working using the below, does this do the same thing?

[dependencies]
druid = { git = "https://github.com/linebender/druid", rev = "fc05e965c85fced8720c655685e02478e0530e94" }
druid-widget-nursery = { git = "https://github.com/linebender/druid-widget-nursery" }

New button

Would it be possible to add a new button widget that adds more customizability, as far as display goes. In other words, being able to specify hover color, active color, and so on. I don't know if things like that are possible with the current button widget.

[feature request] include `druid-enum` in `druid-widget-nursery`

Now we have a derive crate (for Prism), we could include the widget generator for enums in druid-enum. This would make it more discoverable, as there isn't really a solution for displaying enums in druid or druid-widget-nursery at present (is this claim correct?).

TreeNode

TreeNode should not require Debug trait, why does it?

Impossible to use data in future_maker of FutureWidget because of conflicting lifetime requirements

Hi, it seems that it's not possible to use the data in the future_maker, I cannot even print the data to the console. Any Ideas?

use std::time::Duration;

use druid::widget::{Flex, Label, Spinner};
use druid::{AppLauncher, Widget, WidgetExt, WindowDesc};
use druid_widget_nursery::{AsyncDelegate, FutureWidget};
use tokio::time;

fn main() {
    let window = WindowDesc::new(build_root_widget());
    AsyncDelegate::new(AppLauncher::with_window(window))
        .log_to_console()
        .launch(String::new())
        .unwrap();
}

fn build_root_widget() -> impl Widget<String> {
    FutureWidget::new(
        |data: &String, _env| async {
            println!("{}", data);
            time::sleep(Duration::from_millis(5000)).await;
            2021
        },
        Flex::column()
            .with_child(Spinner::new())
            .with_spacer(10.0)
            .with_child(Label::new("Loading ...")),
        |value, _data, _env| {
            // data is mut and value is owned
            Label::new(format!("Your number is {}", value)).boxed()
        },
    )
    .center()
}

The full error is:

error[E0495]: cannot infer an appropriate lifetime due to conflicting requirements
  --> examples/async.rs:32:37
   |
32 |           |data: &String, _env| async {
   |  _____________________________________^
33 | |             println!("{}", data);
34 | |             time::sleep(Duration::from_millis(5000)).await;
35 | |             2021
36 | |         },
   | |_________^
   |
note: first, the lifetime cannot outlive the anonymous lifetime #1 defined on the body at 32:9...
  --> examples/async.rs:32:9
   |
32 | /         |data: &String, _env| async {
33 | |             println!("{}", data);
34 | |             time::sleep(Duration::from_millis(5000)).await;
35 | |             2021
36 | |         },
   | |_________^
note: ...so that the types are compatible
  --> examples/async.rs:32:37
   |
32 |           |data: &String, _env| async {
   |  _____________________________________^
33 | |             println!("{}", data);
34 | |             time::sleep(Duration::from_millis(5000)).await;
35 | |             2021
36 | |         },
   | |_________^
   = note: expected `(&&std::string::String,)`
              found `(&&std::string::String,)`
   = note: but, the lifetime must be valid for the static lifetime...
note: ...so that the type `impl Future` will meet its required lifetime bounds
  --> examples/async.rs:31:5
   |
31 |     FutureWidget::new(
   |     ^^^^^^^^^^^^^^^^^

`qu::ick` errors in two examples

The json_viewer and material_icons examples won't run because of these errors:

error: cannot find derive macro `Parser` in this scope
   --> examples/json_viewer.rs:201:1
    |
201 | #[qu::ick]
    | ^^^^^^^^^^
    |

error: cannot find attribute `clap` in this scope

error[E0433]: failed to resolve: could not find `Parser` in `ick_use`

Add example for navigator widget.

Feedback on Canvas - Managing children

I've been blindly trying to make use of the Canvas widget, and I've been having issues trying to figure out why it seems that draw calls were not completing. The problem seems to be rooted here.

This highlights a gap in this module with respect to controlling the children within the Canvas. While there is some advantage to Canvas right now, this is a serious deficit to its usability. I think Canvas needs an API to allow the Canvas to move around and resize its children.

[Tree] Support dynamic changes

I tried to iterate over the tree example to add children insertion. Here's my progress so far (changes are outlined by // ADDITION:): https://gist.github.com/lisael/35aa7a13d4bb583f924acb832b9ef30a

At the moment:

1. when I click on [Add child] the data is updated, but the tree widget is not updated. If I close and open the parent node, the new node is displayed.
2. Clicking on [Add] to validate the new node don't have any effect, whatsoever (I suspect that this is the same issue as the first one, only new nodes are added on branch open and the update is not called on existing widgets)

Any thougths ? (cc @tirix)

[Meta] Add a 'Widget request' label in the issue tracker

Pros:

• A link in the 'README.md' to labeled issues would always be up-to-date
• Opening an issue is easier than creating a merge request (as currently suggested in the readme)
• People tend to open issues on the druid issue tracker for such requests. We can gently tell them to open an issue here and close the issue. It's better than keeping the issue open forever without any feedback or closing abruptly.
• Keep track of the advancement of design and implementation
  • less frustrating for the requester than a static list that never moves
  • a potential user / requester may give early feedback
  • avoid potential duplication of effort and encourage collaboration
• keep track of refused requests (too specific, too vague...)
  • "too specific" is quite subjective. If more users react to the closed issue, we may reconsider
• good entry point for new contributors

Cons:

• A bit of grooming is required, mostly to add the label and to clarify the demand, but I doubt there would be more than a couple of request per month (except maybe when druid hits HN front page)

Let me start: #65

TreeNode is completely broken

Attempting to implement the trait results in:

error[E0277]: the trait bound `Span: druid::data::Data` is not satisfied

Deriving Data has absolutely no effect!

ListSelectController::change_index should Eq instead of Data::same()

Just saw that ListSelectController::change_index() use Data::same() to compare values:

    fn change_index(&self, data: &mut T, next_else_previous: bool) {
        if let Some(mut index) = self.variants.iter().position(|variant| variant.same(data)) { 

IMHO this should use Eq to compare variants. This muse be exact - not best effort.

Add a license to the project

I guess it should be Apache-2.0 to match with druid.

enum_switcher widgets seems to be broken

I have two different problems with enum_switcher::Switcher and enum_switcher::LazySwitcher.

The former crashes my app

thread 'main' panicked at 'WidgetId(26): event method called before receiving WidgetAdded.', /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/core.rs:642:13
stack backtrace:
   0: rust_begin_unwind
             at /rustc/936f2600b6c903b04387f74ed5cbce88bb06d243/library/std/src/panicking.rs:498:5
   1: core::panicking::panic_fmt
             at /rustc/936f2600b6c903b04387f74ed5cbce88bb06d243/library/core/src/panicking.rs:107:14
   2: druid::core::WidgetPod<T,W>::event
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/core.rs:642:13
   3: <druid_widget_nursery::prism::PrismWrap<W,P,U> as druid::widget::widget::Widget<T>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-widget-nursery-63e9f3f67c4f288a/1d14641/src/prism.rs:199:13
   4: druid_widget_nursery::prism::<impl druid::widget::widget::Widget<T> for alloc::boxed::Box<dyn druid_widget_nursery::prism::PrismWidget<T>>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-widget-nursery-63e9f3f67c4f288a/1d14641/src/prism.rs:28:9
   5: <druid_widget_nursery::enum_switcher::Switcher<T> as druid::widget::widget::Widget<T>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-widget-nursery-63e9f3f67c4f288a/1d14641/src/enum_switcher.rs:162:17
   6: <druid_widget_nursery::on_cmd::OnCmd<CT,WT> as druid::widget::controller::Controller<WT,W>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-widget-nursery-63e9f3f67c4f288a/1d14641/src/on_cmd.rs:37:9
   7: <druid::widget::controller::ControllerHost<W,C> as druid::widget::widget::Widget<T>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/widget/controller.rs:112:9
   8: <alloc::boxed::Box<dyn druid::widget::widget::Widget<T>> as druid::widget::widget::Widget<T>>::event
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/widget/widget.rs:264:9
   9: druid::core::WidgetPod<T,W>::event
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/core.rs:856:21
  10: druid::window::Window<T>::event
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/window.rs:290:17
  11: druid::win_handler::InnerAppState<T>::dispatch_cmd
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/win_handler.rs:405:24
  12: druid::win_handler::AppState<T>::handle_cmd
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/win_handler.rs:701:17
  13: druid::win_handler::AppState<T>::process_ext_events
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/win_handler.rs:636:30
  14: druid::win_handler::AppState<T>::idle
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/win_handler.rs:608:17
  15: <druid::win_handler::DruidHandler<T> as druid_shell::window::WinHandler>::idle
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/win_handler.rs:988:9
  16: druid_shell::backend::gtk::window::run_idle::{{closure}}
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/window.rs:1320:40
  17: druid_shell::backend::gtk::window::WindowState::with_handler_and_dont_check_the_other_borrows
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/window.rs:833:31
  18: druid_shell::backend::gtk::window::WindowState::with_handler
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/window.rs:821:19
  19: druid_shell::backend::gtk::window::run_idle
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/window.rs:1314:18
  20: druid_shell::backend::gtk::window::IdleHandle::add_idle_token::{{closure}}
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/window.rs:1304:45
  21: glib::source::trampoline
             at /home/jplatte/.cargo/registry/src/github.com-1ecc6299db9ec823/glib-0.14.8/src/source.rs:90:5
  22: g_main_context_dispatch
  23: <unknown>
  24: g_main_context_iteration
  25: g_application_run
  26: <O as gio::application::ApplicationExtManual>::run_with_args
             at /home/jplatte/.cargo/registry/src/github.com-1ecc6299db9ec823/gio-0.14.8/src/application.rs:30:13
  27: <O as gio::application::ApplicationExtManual>::run
             at /home/jplatte/.cargo/registry/src/github.com-1ecc6299db9ec823/gio-0.14.8/src/application.rs:23:9
  28: druid_shell::backend::gtk::application::Application::run
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/backend/gtk/application.rs:63:9
  29: druid_shell::application::Application::run
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid-shell/src/application.rs:150:9
  30: druid::app::AppLauncher<T>::launch
             at /home/jplatte/.cargo/git/checkouts/druid-9eefc89f93194362/9cfc466/druid/src/app.rs:267:9
  31: jmc::main
             at ./src/main.rs:37:5
  32: core::ops::function::FnOnce::call_once
             at /rustc/936f2600b6c903b04387f74ed5cbce88bb06d243/library/core/src/ops/function.rs:227:5

The latter results in the following warning being emitted with every cursor movement on top of the window:

2021-11-23T23:34:40.558988Z WARN event: druid::core: WidgetId(1) received an event (MouseMove(MouseEvent { pos: (213.65602526338137, 150.31669453069023), window_pos: (213.65602526338137, 150.31669453069023), buttons: MouseButtons(00000), mods: Modifiers(NUM_LOCK), count: 0, focus: false, button: None, wheel_delta: Vec2 { x: 0.0, y: 0.0 } })) without having been laid out. This likely indicates a missed call to set_origin.

This is an open source project but I don't want it to be visible on my profile yet. I can give access to anyone who is interested in reproducing the issue, or share the code some other way.