lucasmerlin / hello_egui

A collection of useful crates for egui

Hello Egui!

This project contains a collection of egui tools I've created during development of the native app for https://hellopaint.io (still unreleased, stay tuned!).

The crates have varying levels of maturity, some are ready for use in production while others are highly experimental. If you're interested in using one of the experimental crates, open an issue, and I'll try to release it on crates.io.

Example app

An example using most of the crates is available here. Source code in fancy-example.

hello_egui, this crate

A collection of reexports for the other crates, if you want to use all or most of them. You can toggle individual features to only include the crates you need. By default, all crates are included. Only includes crates that have been released on crates.io.

Mature Crates

• egui_dnd

  • Drag & drop sorting library for egui
  • released on crates.io

• egui_inbox

  • Simple utility for sending messages to egui uis from other threads / async functions
  • released on crates.io

• egui_pull_to_refresh

  • Adds pull to refresh functionality to egui.
  • released on crates.io

• egui_suspense

  • A helper to display loading, error and retry uis when waiting for asynchronous data.
  • released on crates.io

• egui_virtual_list

  • Flexible virtual scroll widget for egui with support for dynamic heights and complex layouts
  • Compatible with egui_dnd (let me know if you need an example)
  • released on crates.io

• egui_infinite_scroll

  • Infinite scroll based on egui_virtual_list
  • released on crates.io

• egui_thumbhash

  • Easily use thumbhashes in egui.
  • For a showcase, check the gallery example.
  • released on crates.io

Experimental Crates

• egui_animation

  • Animation utilities for egui
  • Experimental, released on crates.io, used internally by egui_dnd

• egui_taffy

  • Adds flexbox layout to egui using taffy
  • Highly experimental, unreleased

• egui_webview

  • WebView widget for egui, based on wry
  • Experimental, unreleased
  • Warning: Currently uses some unsafe to get around Send / Sync limitations, so it probably has some safety issues.

• hello_egui_utils

  • Collection of utilities used by the other crates

hello_egui's Issues

Exposing `InfiniteScroll`s `VirtualList`

Hi,

Would it be possible for InfiniteScroll to expose its VirtualList? I want to flip scroll_position_sync_on_resize.

Thanks!

Drag between two different dnd regions

Is it possible to drag an item between two separate dnd ui's ?

Dragging in and out of nested items

I have an interface very similar to the nested example and would like to be able to drag items between layers. I'm imagining creating a dnd widget over an iterator that returns a flattened version of the tree, but there would need to be a way to indicate which elements fall inside a nested a container.

Are there any existing ideas or plans to add this functionality? I might take a swing at it but would have to familiarize myself with the crate internals.

If the dnd(..).show function chooses to not add a element, the result is a weird gap between list items

I implemented a simple filter search which just doesn't add elements if they don't match and the result is a strange gap between elements.

It seems to increase if the gap represents more elements.

Using drag 'n drop with `egui::selectable_value` or the like

I would like to make a list of egui::selectable_value()s reorderable. See my app, Glyphana.

On the left panel there is a list of categories, one of which (and maybe later several) can be selected but which I also want to be reordeable using drag 'n drop.

Think of the list of favorite folders in macOS Finder or Dolphin on KDE. You can click to select a folder but you can also drag 'n drop to reorder your favorites.

I added support for this in the dnd branch of Glyphana.
But I can only reorder categories, I can't select one any more. I.e. hovering immediately causes the drag 'n drop cursor to appear.

Instead drag 'n drop should only happen when the user presses the mouse button and starts dragging (i.e. some time passed so this is not confused with accidentally moving the mouse while clicking).

How to get the item index in show_vec?

How to get the item index in show_vec?

Weird snap animation on drop when using indices as an Id

When indices (enumerate) is used as ID for a list with duplicate items, there is a weird snapping animation when dropping an item on a different position.

Here is a modified update_on_drop example to illustrate the issue.

use eframe::egui;
use egui::CentralPanel;
use egui_dnd::{dnd, DragDropItem};
use egui::Id;

struct DragWrapper<T>(usize, T);
impl<T> DragDropItem for DragWrapper<T> {
    fn id(&self) -> Id {
        Id::new(self.0)
    }
}

pub fn main() -> eframe::Result<()> {
    let mut items = vec!["alfred", "bernhard", "christian", "christian", "christian"];

    eframe::run_simple_native(
        "DnD Simple Example",
        Default::default(),
        move |ctx, _frame| {
            CentralPanel::default().show(ctx, |ui| {
                ui.label("Drag and drop the items below");
                ui.style_mut().animation_time = 0.5;

                let response =
                    dnd(ui, "dnd_example").show(items.iter().enumerate().map(|(i,e)| DragWrapper(i,e)), |ui, item, handle, state| {
                        handle.ui(ui, |ui| {
                            if state.dragged {
                                ui.label("dragging");
                            } else {
                                ui.label("drag");
                            }
                        });
                        ui.label(*item.1);
                    });

                if response.is_drag_finished() {
                    response.update_vec(&mut items);
                }

                ui.label("Another label");
            });
        },
    )
}

Unlike this example, in my actual app, there is no sane way to pre-index the Vec, like what is done in sort_words example. I only get &mut Vec<T> and I can't ensure that T is unique in any way.

egui_dnd: Significant animation jitter

376242b seems to have introduced some rather significant jitter, espectially when dragging near the top of a scroll area.

simplescreenrecorder-2023-08-31_00.03.31.mp4

Here's the example script using cargo-script-mvs:

#!/usr/bin/env cargo-eval

//! ```cargo
//! [dependencies]
//! eframe = "0.22.0"
//! #egui_dnd = { git = "https://github.com/lucasmerlin/egui_dnd.git", rev = "e9043021e101fb42fc6ce70e508da857cb7ee263" } # good
//! egui_dnd = { git = "https://github.com/lucasmerlin/egui_dnd.git", rev = "376242b3cc6bed14a93880edb5d5aa46f2fc3b9a" } # bad
//!
//! [profile.dev]
//! opt-level = 3
//! ```

use eframe::egui::{Button, CentralPanel, Frame, ScrollArea};
use eframe::NativeOptions;
use std::hash::{Hash, Hasher};

struct ItemType {
    number: u32,
}

impl Hash for ItemType {
    fn hash<H: Hasher>(&self, state: &mut H) {
        self.number.hash(state);
    }
}

fn main() -> eframe::Result<()> {
    let mut items: Vec<_> = (0..100).map(|number| ItemType { number }).collect();

    eframe::run_simple_native(
        "dnd scroll demo",
        NativeOptions::default(),
        move |ctx, _| {
            CentralPanel::default().show(ctx, |ui| {
                ui.label("some stuff above");
                ui.label("some stuff above");
                ui.label("some stuff above");
                ui.label("some stuff above");
                ui.with_layout(ui.layout().with_cross_justify(true), |ui| {
                    ScrollArea::vertical().show(ui, |ui| {
                        let res = egui_dnd::dnd(ui, ui.id()).show(
                            items.iter_mut().enumerate(),
                            |ui, (_index, item), handle, state| {
                                let mut frame = Frame::none();
                                if state.dragged {
                                    frame.fill = ui.visuals().extreme_bg_color
                                } else if state.index % 2 == 1 {
                                    frame.fill = ui.visuals().faint_bg_color
                                }
                                frame.show(ui, |ui| {
                                    ui.horizontal(|ui| {
                                        handle.ui(ui, |ui| {
                                            ui.label(" ☰ ");
                                        });

                                        for i in 0..(item.number % 3) + 10 {
                                            ui.add_enabled(
                                                false,
                                                Button::new(format!("button {i}")),
                                            );
                                        }
                                    });
                                });
                            },
                        );

                        if res.final_update().is_some() {
                            res.update_vec(&mut items);
                        }
                    })
                })
            });
        },
    )
}