Option to cache changes until OK or Cancel is clicked

[samcarey]

It seems to me that editable egui widgets generally change their underlying data immediately when you edit them.

I'm thinking of an application with an options dialog window where the various fields inside would:

1. Be initialized based on underlying application variables.
2. Be editable (with edits persisting from frame to frame) without affecting the underlying variables.
3. Automatically be applied to the underlying variables after clicking an "OK" button.
4. Be reset if the dialog window is closed or "Cancel" is clicked.

The goal here is basically to allow the user to draft a set of changes slowly and then apply them all at once.
Does egui have a convenient interface for accomplishing this?

[edko99]

A way you can do it is by having separate state for the editable fields of your options dialog. You would copy your "real" application state data into these fields before you display the dialog. When the user presses OK then you copy the data the other way.

[samcarey]

Here's what I ended up with. Let me know if there's a better way:

/// Stores a copy of the underlying data for editing, until the user chooses to apply it, cancel, or close the dialog.
#[derive(Default)]
struct DialogChangeBuffer<T> {
    draft_of_changes: Option<T>,
}

/// What should we do with the changes?
#[derive(Clone)]
enum FateOfChanges {
    Apply,
    Cancel,
    KeepDraft,
}

impl<T: Clone> DialogChangeBuffer<T> {
    fn reset(&mut self) {
        self.draft_of_changes = None;
    }

    fn buffer_changes(
        &mut self,
        dialog_open: &mut bool,
        underlying_data: &mut T,
        draft_changes: impl FnOnce(&mut FateOfChanges, &mut bool, &mut T) -> Option<FateOfChanges>,
    ) -> Option<FateOfChanges> {
        if !*dialog_open {
            return None;
        }

        // If this is the first time rendering the window, get a copy and store it in the buffer
        if self.draft_of_changes.is_none() {
            self.draft_of_changes = Some(underlying_data.clone());
        }

        let mut fate_of_changes = FateOfChanges::KeepDraft;
        if let Some(fate) = draft_changes(
            &mut fate_of_changes,
            dialog_open,
            self.draft_of_changes.as_mut().unwrap(),
        ) {
            // Track what the user chooses to do: cancel, apply, or keep draft (no action this frame)
            fate_of_changes = fate;
        }
        match fate_of_changes {
            FateOfChanges::Apply => {
                *underlying_data = self.draft_of_changes.as_ref().unwrap().clone();
                *dialog_open = false;
            }
            FateOfChanges::Cancel => {
                *dialog_open = false;
            }
            FateOfChanges::KeepDraft => {}
        }
        if !*dialog_open {
            self.reset();
        }
        Some(fate_of_changes)
    }
}

[samcarey]

Then here's an example of using it with bevy_egui to make a dialog options window. I made it so it can be nested to allow multiple objects to be buffered at once. It gets kinda convoluted but it works.

trait UiExt {
    fn cancel_ok_options(&mut self, fate_of_changes: &mut FateOfChanges);
}

impl UiExt for Ui {
    fn cancel_ok_options(&mut self, fate_of_changes: &mut FateOfChanges) {
        self.horizontal(|ui| {
            if ui.button("Cancel").clicked() {
                *fate_of_changes = FateOfChanges::Cancel;
            }
            ui.with_layout(egui::Layout::right_to_left(), |ui| {
                if ui.button("OK").clicked() {
                    *fate_of_changes = FateOfChanges::Apply;
                }
            });
        });
    }
}

struct ExampleWindowOpen(bool);

#[derive(Clone)]
struct ExampleData1 {
    data: bool,
}

#[derive(Clone)]
struct ExampleData2 {
    data: bool,
}

fn window(
    ctx: ResMut<EguiContext>,
    mut is_open: ResMut<ExampleWindowOpen>,
    mut example_data_1: ResMut<ExampleData1>,
    mut example_data_2: ResMut<ExampleData2>,
    mut example_data_1_buffer: Local<DialogChangeBuffer<ExampleData1>>,
    mut example_data_2_buffer: Local<DialogChangeBuffer<ExampleData2>>,
) {
    example_data_1_buffer.buffer_changes(
        &mut is_open.0,
        &mut example_data_1,
        |_, mut is_open, example_data_1| {
            example_data_2_buffer.buffer_changes(
                &mut is_open,
                &mut example_data_2,
                |mut fate_of_changes, mut is_open, example_data_2| {
                    egui::Window::new("Example Window")
                        .open(&mut is_open)
                        .show(ctx.ctx(), |ui| {
                            ui.checkbox(&mut example_data_1.data, "Example 1");
                            ui.checkbox(&mut example_data_2.data, "Example 2");
                            ui.cancel_ok_options(&mut fate_of_changes);
                        });
                    None
                },
            )
        },
    );
}