Split container with resizeable sections

[TomJGooding]

This is an idea that has been knocking around my head for a while.

I've attempted to create a proof of concept below. The new SplitContainer (name TBD!) would allow resizing sections with a draggable separator. This could also potentially also be nested inside another SplitContainer!

Perhaps this would be better as an external package, but just posting this idea to see if there is any interest?

from textual import events
from textual.app import App, ComposeResult
from textual.geometry import Offset, Size
from textual.widget import Widget
from textual.widgets import Rule, Static


class SplitContainerSeparator(Rule):
    pass


class SplitContainer(Widget, inherit_bindings=False):
    _separator_grabbed: bool = False
    _offset_before_dragged: Offset | None = None
    _size_before_dragged: Size | None = None

    DEFAULT_CSS = """
    SplitContainer {
        width: 1fr;
        height: 1fr;
        layout: horizontal;
        overflow: hidden hidden;
    }
    """

    def __init__(
        self,
        before: Widget,
        after: Widget,
    ) -> None:
        super().__init__()
        self.before = before
        self.after = after

        self.before.styles.width = "1fr"
        self.after.styles.width = "1fr"

    def compose(self) -> ComposeResult:
        yield self.before
        yield SplitContainerSeparator("vertical")
        yield self.after

    def on_mouse_down(self, event: events.MouseDown) -> None:
        widget, _ = self.screen.get_widget_at(event.screen_x, event.screen_y)
        if isinstance(widget, SplitContainerSeparator):
            self._separator_grabbed = True
            self._offset_before_dragged = event.screen_offset
            self._size_before_dragged = self.before.size

    def on_mouse_move(self, event: events.MouseMove) -> None:
        if not self._separator_grabbed:
            return
        assert self._size_before_dragged is not None
        dragged_offset = event.screen_offset - self._offset_before_dragged
        new_dragged_width = self._size_before_dragged.width + dragged_offset.x
        self.before.styles.width = new_dragged_width

    def on_mouse_up(self) -> None:
        self._separator_grabbed = False
        self._offset_before_dragged = None
        self._size_before_dragged = None


class SplitContainerApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    SplitContainer {
        width: 80;
        height: 24;
        background: $panel;
    }
    """

    def compose(self) -> ComposeResult:
        yield SplitContainer(
            before=Static("This is some content to the left."),
            after=Static("This is some content to the right."),
        )


if __name__ == "__main__":
    app = SplitContainerApp()
    app.run()

[Lauszus]

@TomJGooding thanks for posting this.

I modified the separator slightly to set the margin to 0 and change the line style when it is dragged:

class SplitContainerSeparator(Rule):
    def __init__(self, *args: Any, **kwargs: Any) -> None:
        super().__init__(*args, **kwargs)
        self.line_style = "hidden"
        self.styles.margin = 0
        self._grabbed = False

    def on_mouse_down(self, event: events.MouseDown) -> None:
        self._grabbed = True

    def on_mouse_up(self, event: events.MouseUp) -> None:
        self._grabbed = False

    def on_leave(self, event: events.Leave) -> None:
        if not self._grabbed:
            self.line_style = "hidden"

    def on_enter(self, event: events.Enter) -> None:
        self.line_style = "thick"

I also slightly simplified the container by just inheriting from Horizontal:

class SplitContainer(Horizontal):

Then you can remove the DEFAULT_CSS class variable.

[RyannDaGreat]

Nice! Needs a bit of polish (for example, how does it handle multiple splits at once?) But it's good progress!

[Lauszus]

Should be fairly easy. Just change it to take list of widgets and then store a reference to the "before" widget on the separator :)