refactor: add a custom ui layout module to enable future text-wrap/composed ui #427
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9b67dae to
61e6c1b
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the UI rendering system by introducing a new layout tree module that replaces the previous widget-based approach. The changes include:
- A new custom layout system with flex-box-like capabilities for managing UI element positioning and sizing
- Conversion from ratatui's table widgets to a custom span-based rendering approach
- Updates to lifetime annotations for better memory management
Reviewed Changes
Copilot reviewed 208 out of 208 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/ui/layout/mod.rs |
New layout tree implementation with flexbox-style layout capabilities |
src/ui/layout/node.rs |
Node structure with layout options (fit/flex sizing, gap, direction) |
src/ui/layout/vec2.rs |
2D vector operations for layout calculations |
src/ui/layout/direction.rs |
Direction enum for horizontal/vertical layouts |
src/ui.rs |
Refactored to use new layout system with span-based rendering |
src/ui/menu.rs |
Converted from table widget to layout tree approach |
src/screen/mod.rs |
Refactored rendering to use new layout system with improved line handling |
src/items.rs |
Updated to clone data and return owned strings for compatibility with new layout system |
src/app.rs |
Minor formatting change (added blank line) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This is another attempt at introducing a ui that is more easy to work
with.
It is now composable via functions, and simplifies the UI code to just:
```rust
layout.clear();
layout.stacked(OPTS, |layout| {
screen::layout_screen(
layout,
frame.area().as_size(),
state.screens.last().unwrap(),
);
layout.vertical(OPTS.align_end(), |layout| {
menu::layout_menu(layout, state);
layout_command_log(layout, state);
layout_prompt(layout, state);
});
});
layout.compute([frame.area().width, frame.area().height]);
for span in layout.iter() {
let area = Rect {
x: span.pos[0],
y: span.pos[1],
width: span.size[0],
height: span.size[1],
};
frame.render_widget(span.data, area);
}
```
- Implementing wrapping of text is now closer.
- The tui_prompt dependency should be easier to get rid of now.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is another attempt at introducing a ui that is more easy to work with.
It is now composable via functions, and simplifies the UI code to just:
screen-module needs fixing.- [ ] Spans do wrap to new lines, breaking the editor (it assumes 1 item = 1 line)- [ ] Spans are truncated if too long, we should word/char-wrap instead. Perhaps feeding every single char to "layout" could work.app.layout_tree. Since it is only used once per frame and cleared after.