add animated layout preview on tile drag-and-drop

src/behavior.rs

@@ -3,7 +3,7 @@ use egui::{
     vec2,
 };
 
-use super::{ResizeState, SimplificationOptions, Tile, TileId, Tiles, UiResponse};
+use super::{PreviewOptions, ResizeState, SimplificationOptions, Tile, TileId, Tiles, UiResponse};
 
 /// The kind of edit that triggered the call to [`Behavior::on_edit`].
 #[derive(Clone, Debug, PartialEq, Eq)]
@@ -260,6 +260,19 @@ pub trait Behavior<Pane> {
         32.0
     }
 
+    /// Whether to show a live animated preview of the full layout during
+    /// drag-and-drop, or just a simple highlighted drop zone.
+    ///
+    /// Default: `true`.
+    fn live_drag_preview(&self) -> bool {
+        true
+    }
+
+    /// Options controlling the animated drag preview (smoothing speed, etc).
+    fn preview_options(&self) -> PreviewOptions {
+        PreviewOptions::default()
+    }
+
     /// Show we preview panes that are being dragged,
     /// i.e. show their ui in the region where they will end up?
     fn preview_dragged_panes(&self) -> bool {

src/container/grid.rs

@@ -270,18 +270,20 @@ impl Grid {
             );
         }
 
-        self.resize_columns(&tree.tiles, behavior, ui, tile_id);
-        self.resize_rows(&tree.tiles, behavior, ui, tile_id);
+        if !tree.is_previewing() {
+            self.resize_columns(tree, behavior, ui, tile_id);
+            self.resize_rows(tree, behavior, ui, tile_id);
+        }
     }
 
     fn resize_columns<Pane>(
         &mut self,
-        tiles: &Tiles<Pane>,
+        tree: &Tree<Pane>,
         behavior: &mut dyn Behavior<Pane>,
         ui: &egui::Ui,
         parent_id: TileId,
     ) {
-        let parent_rect = tiles.rect_or_die(parent_id);
+        let parent_rect = tree.display_rect_or_die(parent_id);
         for (i, (left, right)) in self.col_ranges.iter().copied().tuple_windows().enumerate() {
             let resize_id = ui.id().with((parent_id, "resize_col", i));
 
@@ -320,12 +322,12 @@ impl Grid {
 
     fn resize_rows<Pane>(
         &mut self,
-        tiles: &Tiles<Pane>,
+        tree: &Tree<Pane>,
         behavior: &mut dyn Behavior<Pane>,
         ui: &egui::Ui,
         parent_id: TileId,
     ) {
-        let parent_rect = tiles.rect_or_die(parent_id);
+        let parent_rect = tree.display_rect_or_die(parent_id);
         for (i, (top, bottom)) in self.row_ranges.iter().copied().tuple_windows().enumerate() {
             let resize_id = ui.id().with((parent_id, "resize_row", i));
 

src/container/linear.rs

@@ -254,12 +254,16 @@ impl Linear {
         // ------------------------
         // resizing:
 
-        let parent_rect = tree.tiles.rect_or_die(parent_id);
+        if tree.is_previewing() {
+            return;
+        }
+
+        let parent_rect = tree.display_rect_or_die(parent_id);
         for (i, (left, right)) in visible_children.iter().copied().tuple_windows().enumerate() {
             let resize_id = ui.id().with((parent_id, "resize", i));
 
-            let left_rect = tree.tiles.rect_or_die(left);
-            let right_rect = tree.tiles.rect_or_die(right);
+            let left_rect = tree.display_rect_or_die(left);
+            let right_rect = tree.display_rect_or_die(right);
             let x = egui::lerp(left_rect.right()..=right_rect.left(), 0.5);
 
             let mut resize_state = ResizeState::Idle;
@@ -320,12 +324,16 @@ impl Linear {
         // ------------------------
         // resizing:
 
-        let parent_rect = tree.tiles.rect_or_die(parent_id);
+        if tree.is_previewing() {
+            return;
+        }
+
+        let parent_rect = tree.display_rect_or_die(parent_id);
         for (i, (top, bottom)) in visible_children.iter().copied().tuple_windows().enumerate() {
             let resize_id = ui.id().with((parent_id, "resize", i));
 
-            let top_rect = tree.tiles.rect_or_die(top);
-            let bottom_rect = tree.tiles.rect_or_die(bottom);
+            let top_rect = tree.display_rect_or_die(top);
+            let bottom_rect = tree.display_rect_or_die(bottom);
             let y = egui::lerp(top_rect.bottom()..=bottom_rect.top(), 0.5);
 
             let mut resize_state = ResizeState::Idle;

src/container/tabs.rs

@@ -282,14 +282,22 @@ impl Tabs {
 
                         ui.spacing_mut().item_spacing.x = 0.0; // Tabs have spacing built-in
 
-                        for (i, &child_id) in self.children.iter().enumerate() {
+                        let tab_children = drop_context
+                            .dragged_tile_id
+                            .and_then(|_| tree.preview_tab_children(tile_id).cloned())
+                            .unwrap_or_else(|| self.children.clone());
+
+                        for (i, &child_id) in tab_children.iter().enumerate() {
                             if !tree.is_visible(child_id) {
                                 continue;
                             }
 
                             let is_being_dragged = is_being_dragged(ui.ctx(), tree.id, child_id);
 
-                            let selected = self.is_active(child_id);
+                            let selected = drop_context
+                                .dragged_tile_id
+                                .and_then(|_| tree.is_preview_active_tab(tile_id, child_id))
+                                .unwrap_or_else(|| self.is_active(child_id));
                             let id = child_id.egui_id(tree.id);
                             let tab_state = TabState {
                                 active: selected,
@@ -335,11 +343,19 @@ impl Tabs {
         // -----------
         // Drop zones:
 
+        let drop_children = drop_context
+            .dragged_tile_id
+            .and_then(|_| tree.preview_tab_children(tile_id).cloned())
+            .unwrap_or_else(|| self.children.clone());
+
         let preview_thickness = 6.0;
         let after_rect = |rect: Rect| {
             let dragged_size = if let Some(dragged_index) = dragged_index {
-                // We actually know the size of this thing
-                button_rects[&self.children[dragged_index]].size()
+                drop_children
+                    .get(dragged_index)
+                    .and_then(|id| button_rects.get(id))
+                    .map(|r| r.size())
+                    .unwrap_or_else(|| rect.size())
             } else {
                 rect.size() // guess that the size is the same as the last button
             };
@@ -350,7 +366,7 @@ impl Tabs {
         };
         super::linear::drop_zones(
             preview_thickness,
-            &self.children,
+            &drop_children,
             dragged_index,
             super::LinearDir::Horizontal,
             |tile_id| button_rects.get(&tile_id).copied(),

src/lib.rs

@@ -126,7 +126,7 @@ pub use behavior::{Behavior, EditAction, TabState};
 pub use container::{Container, ContainerKind, Grid, GridLayout, Linear, LinearDir, Shares, Tabs};
 pub use tile::{Tile, TileId};
 pub use tiles::Tiles;
-pub use tree::Tree;
+pub use tree::{PreviewOptions, Tree};
 
 // ----------------------------------------------------------------------------
 
@@ -255,7 +255,7 @@ impl ContainerInsertion {
 }
 
 /// Where in the tree to insert a tile.
-#[derive(Clone, Copy, Debug)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
 struct InsertionPoint {
     pub parent_id: TileId,
 
@@ -298,7 +298,11 @@ fn cover_tile_if_dragged<Pane>(
     tile_id: TileId,
 ) {
     if is_being_dragged(ui.ctx(), tree.id, tile_id) {
-        if let Some(child_rect) = tree.tiles.rect(tile_id) {
+        if tree.is_previewing() {
+            return;
+        }
+
+        if let Some(child_rect) = tree.display_rect(tile_id) {
             let overlay_color = behavior.dragged_overlay_color(ui.visuals());
             ui.painter().rect_filled(child_rect, 0.0, overlay_color);
         }
@@ -378,3 +382,24 @@ impl DropContext {
         }
     }
 }
+
+pub(crate) struct MoveJournal {
+    /// Tiles displaced by wrapping operations (`original_id`, `displaced_to_id`).
+    displaced_tiles: Vec<(TileId, TileId)>,
+}
+
+impl MoveJournal {
+    fn new() -> Self {
+        Self {
+            displaced_tiles: Vec::new(),
+        }
+    }
+
+    fn record_displaced_tile(&mut self, original_id: TileId, displaced_to_id: TileId) {
+        self.displaced_tiles.push((original_id, displaced_to_id));
+    }
+
+    pub(crate) fn displaced_tiles(&self) -> &[(TileId, TileId)] {
+        &self.displaced_tiles
+    }
+}

src/tiles.rs

@@ -1,5 +1,7 @@
 use egui::{Pos2, Rect};
 
+use crate::MoveJournal;
+
 use super::{
     Behavior, Container, ContainerInsertion, ContainerKind, GcAction, Grid, InsertionPoint, Linear,
     LinearDir, SimplificationOptions, SimplifyAction, Tabs, Tile, TileId,
@@ -261,7 +263,20 @@ impl<Pane> Tiles<Pane> {
         self.parent_of(tile_id).is_none()
     }
 
-    pub(super) fn insert_at(&mut self, insertion_point: InsertionPoint, inserted_id: TileId) {
+    pub(super) fn next_tile_id(&self) -> u64 {
+        self.next_tile_id
+    }
+
+    pub(super) fn set_next_tile_id(&mut self, id: u64) {
+        self.next_tile_id = id;
+    }
+
+    pub(super) fn insert_at(
+        &mut self,
+        insertion_point: InsertionPoint,
+        inserted_id: TileId,
+        journal: &mut MoveJournal,
+    ) {
         let InsertionPoint {
             parent_id,
             insertion,
@@ -281,6 +296,7 @@ impl<Pane> Tiles<Pane> {
                     self.tiles.insert(parent_id, parent_tile);
                 } else {
                     let new_tile_id = self.insert_new(parent_tile);
+                    journal.record_displaced_tile(parent_id, new_tile_id);
                     let mut tabs = Tabs::new(vec![new_tile_id]);
                     tabs.children.insert(index.min(1), inserted_id);
                     tabs.set_active(inserted_id);
@@ -291,15 +307,17 @@ impl<Pane> Tiles<Pane> {
             ContainerInsertion::Horizontal(index) => {
                 if let Tile::Container(Container::Linear(Linear {
                     dir: LinearDir::Horizontal,
-                    children,
+                    ref mut children,
                     ..
-                })) = &mut parent_tile
+                })) = parent_tile
                 {
                     let index = index.min(children.len());
                     children.insert(index, inserted_id);
                     self.tiles.insert(parent_id, parent_tile);
                 } else {
                     let new_tile_id = self.insert_new(parent_tile);
+                    journal.record_displaced_tile(parent_id, new_tile_id);
+
                     let mut linear = Linear::new(LinearDir::Horizontal, vec![new_tile_id]);
                     linear.children.insert(index.min(1), inserted_id);
                     self.tiles
@@ -309,15 +327,17 @@ impl<Pane> Tiles<Pane> {
             ContainerInsertion::Vertical(index) => {
                 if let Tile::Container(Container::Linear(Linear {
                     dir: LinearDir::Vertical,
-                    children,
+                    ref mut children,
                     ..
-                })) = &mut parent_tile
+                })) = parent_tile
                 {
                     let index = index.min(children.len());
                     children.insert(index, inserted_id);
                     self.tiles.insert(parent_id, parent_tile);
                 } else {
                     let new_tile_id = self.insert_new(parent_tile);
+                    journal.record_displaced_tile(parent_id, new_tile_id);
+
                     let mut linear = Linear::new(LinearDir::Vertical, vec![new_tile_id]);
                     linear.children.insert(index.min(1), inserted_id);
                     self.tiles
@@ -330,6 +350,8 @@ impl<Pane> Tiles<Pane> {
                     self.tiles.insert(parent_id, parent_tile);
                 } else {
                     let new_tile_id = self.insert_new(parent_tile);
+                    journal.record_displaced_tile(parent_id, new_tile_id);
+
                     let grid = Grid::new(vec![new_tile_id, inserted_id]);
                     self.tiles
                         .insert(parent_id, Tile::Container(Container::Grid(grid)));