Skip to content

add animated layout preview on tile drag-and-drop - #118

Draft
stmio wants to merge 10 commits into
rerun-io:mainfrom
tensaur:layout-preview
Draft

add animated layout preview on tile drag-and-drop#118
stmio wants to merge 10 commits into
rerun-io:mainfrom
tensaur:layout-preview

Conversation

@stmio

@stmio stmio commented Mar 13, 2026

Copy link
Copy Markdown

This PR adds an animated layout preview during the drag-and-drop of tiles. All tiles smoothly animate to show where they would end up if dropped at the current position. This replaces the current highlighted drop-zone with a full layout preview.

The new behaviour is optional based on the new live_drag_preview() in the Behaviour trait. Each frame, the tree speculatively applies the pending move and calculates the layout before restoring the state.

Potentially useful details:

  • Uses previous frame's insertion point (1-frame lag) to avoid feedback loops between drop zones and animation
  • MoveJournal tracks tile ID remapping
  • Resize handles are disabled during preview animation
  • Tab bars update to reflect the preview state
  • Dragged tile is hidden from its original position during preview

This is possibly not the best way to implement this feature, and there are certainly some edge cases I have missed or was unable to fix (see attached video below). I would appreciate some advice/code review from someone who has more experience with egui and would be more than happy to fix these edge cases :)

Screen.Recording.2026-03-13.at.13.15.49.mov

@stmio

stmio commented Mar 13, 2026

Copy link
Copy Markdown
Author

I'm fairly sure I've managed to fix the edge case with grid layouts. Here's a new video:

Screen.Recording.2026-03-13.at.19.53.22.mov

@emilk emilk left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, so cool

I haven't looked to closely at the code yet, but his is really promising! My main consern would be code complexity, so anything we can do to keep the new code simple and modular would be greatly appreciated

Comment thread src/tree.rs Outdated
Comment thread src/tree.rs Outdated
Comment thread src/tree.rs Outdated
Comment thread src/behavior.rs Outdated
Comment thread src/tree.rs Outdated
Comment thread src/tree.rs Outdated
@stmio

stmio commented Mar 26, 2026

Copy link
Copy Markdown
Author

Hi @emilk! Thanks very much for the review, I will clean up these small issues now

@stmio
stmio requested a review from emilk March 26, 2026 12:58
@stmio

stmio commented Mar 26, 2026

Copy link
Copy Markdown
Author

I think that should do it. Let me know if you spot anything else :)

@emilk

emilk commented Mar 27, 2026

Copy link
Copy Markdown
Member

I'm trying this out with rerun, but I'm hitting some weird things (tabs disappearing on drag) that makes me hesitant to merge this PR without taking a deep dive into it, which I unfortunately don't have time for today. At the same time, I need to publish a new egui_tiles today. So: we'll have to punt on this cool PR until the next release. Hope you understand!

@stmio

stmio commented Mar 27, 2026

Copy link
Copy Markdown
Author

@emilk Yep, of course, completely understand. I will try it out in rerun myself early next week and see if I can reproduce.

Let me know if you find any other issues when you get around to a proper code review :)

@emilk

emilk commented Jul 27, 2026

Copy link
Copy Markdown
Member

Please enable the flag to allow maintainers to push commits to the PR

(I had to do this instead right now: #139)

@stmio

stmio commented Jul 27, 2026

Copy link
Copy Markdown
Author

Thanks for fixing those issues, and apologies for not doing it myself... this slipped off my radar with a combination of uni exams and my internship starting! Excited to see this in egui

It doesn't seem like I can enable maintainer access as the fork I created is under an organisation. I have instead invited you to collaborate on the fork, please let me know if that works :)

@emilk
emilk marked this pull request as draft August 18, 2026 10:22
@emilk

emilk commented Aug 18, 2026

Copy link
Copy Markdown
Member

I suspect there is a much simpler way to accomplish this effect, by holding two trees (the pre-edit tree, as self, and a temporary preview-tree, which is the animation target). I tried something like that in my PR (#139) but I don't have time to work on this further. If you do, please use my PR as a base

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants