feature: Sortable ListView (and draggable ListItems)

[kratsg]

sortablelist.mp4

code

from __future__ import annotations

from textual.widget import Widget
from textual.containers import Vertical
from textual.widgets import ListView, ListItem, Label, Static
from textual.message import Message
from textual._types import MessageTarget
from textual import events

class DraggableListItem(ListItem, can_focus=False):
    """
    A draggable list item.
    """
    mouse_down = False
    is_dragging = False
    x = 0
    y = 0

    class DragMessage(Message):
        """Sent for any drag-related events."""
        def __init__(self, sender: MessageTarget, mouse_event):
            self.mouse_event = mouse_event
            super().__init__(sender)
            print(self.handler_name)

    class DragStart(DragMessage):
        """Sent when the mouse starts dragging."""

    class DragMove(DragMessage):
        """Sent when the mouse is dragging."""

    class DragStop(DragMessage):
        """Sent when the mouse stops dragging."""

    def __init__(self, label: str):
        super().__init__(Label(f"[orange]{label}[/orange]"))
        self.value = label

    def on_mouse_down(self, event: events.MouseDown) -> None:
        """When a mouse left-button is pressed."""
        if event.button != 1:
            return
        self.mouse_down = True
        self.capture_mouse(capture=True)

    def on_mouse_up(self, event: events.MouseUp) -> None:
        """When a mouse left-button is released."""
        if event.button != 1:
            return
        self.mouse_down = False
        if self.is_dragging:
            self.emit_no_wait(self.DragStop(self, event))
            self.is_dragging = False
        self.capture_mouse(capture=False)

    def on_mouse_move(self, event: events.MouseMove) -> None:
        """When the mouse moves."""
        if self.mouse_down and (event.delta_x != 0 or event.delta_y != 0):
            if not self.is_dragging:
                self.emit_no_wait(self.DragStart(self, event))
                self.is_dragging = True
            else:
                self.emit_no_wait(self.DragMove(self, event))

class DraggableListView(Widget):
    """Displays a sortable ListView."""

    DEFAULT_CSS = """

    DraggableListView {
        border: round blue;
        height: 100%;
        background: $panel;
        content-align: center middle;
        padding: 0 3;
    }
    """

    def compose(self) -> ComposeResult:
        """The composition contains a details pane to dump some debugging information."""
        yield ListView(*[DraggableListItem(f"hello {index}") for index in range(10)])
        yield Vertical(Static('details', id='details'))

    def on_draggable_list_item_drag_start(self, message: DraggableListItem.DragStart) -> None:
        """When a user starts dragging a list item."""
        self.query_one('#details').update('drag start')
        list_view = self.query_one('ListView')
        list_view.index = list_view.children.index(message.sender)

    def on_draggable_list_item_drag_move(self, message: DraggableListItem.DragMove) -> None:
        """While a user is dragging a list item."""
        list_view = self.query_one('ListView')
        index_sender = list_view.children.index(message.sender)
        new_index = list_view._clamp_index(index_sender + message.mouse_event.y)

        self.query_one('#details').update(f'inserting into {new_index} from {index_sender}')
        list_view.children._remove(message.sender)
        list_view.children._insert(new_index, message.sender)
        list_view.index = new_index

        # Request a refresh.
        list_view.refresh()

    def on_draggable_list_item_drag_stop(self, message: DraggableListItem.DragStop) -> None:
        """When a user stops dragging a list item."""
        self.query_one('#details').update(f"""{message.sender.value}
mouse_event: {message.mouse_event.x}, {message.mouse_event.y}
sender:      {message.sender.region.x}, {message.sender.region.y}
        """)
        for child in self.query_one('ListView').children:
            print(child.value, child.region.y)


from textual.app import App, ComposeResult

class MyApp(App):
    """Demonstrating draggable functionality."""
    def compose(self) -> ComposeResult:
        """Composition of app."""
        yield DraggableListView(id="draganddrop")

    def on_mount(self):
        """When app is ready."""
        self.query_one("#draganddrop").focus()

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

To be added by @willmcgugan

Things to understand

• how to handle edge case of dragging up above the terminal where the mouse release event isn't captured?
• how to make anything with text not selectable [Mac keeps trying to select/highlight text when I try to drag-and-drop]

[davep]

Nice idea. I guess the the other thing to think about with this is how you handle it for keyboard-only.

[kratsg]

Something like this?

    BINDINGS = [ 
        Binding("enter", "select_cursor", "Select", show=False),
        Binding("up", "cursor_up", "Cursor Up", show=False),
        Binding("down", "cursor_down", "Cursor Down", show=False),
        Binding("shift+up", "move_up", "Move Selection Up", show=True),
        Binding("shift+down", "move_down", "Move Selection Down", show=True),
    ]

    def move_highlighted_child(self, distance: int) -> None:
        """Move highlighted child up or down the list by a defined distance."""
        child = list_view.highlighted_child
        if child is None:
            return

        list_view = self.query_one('ListView')
        new_index = list_view._clamp_index(list_view.index + distance)

        list_view.children._remove(child)
        list_view.children._insert(new_index, child)
        list_view.index = new_index

        # Request a refresh.
        list_view.refresh()

    def action_move_up(self) -> None:
        """Move highlighted child up the list by 1."""
        self.move_child(-1)

    def action_move_down(self) -> None:
        """Move highlighted child down the list by 1."""
        self.move_child(1)

[jspv]

This is great! l have a perfect use-case for this.

[kratsg]

One caveat is that this assumes list items are height=1 (although you can change out the math to translate between index and size of object being dragged to figure out the proper positioning for larger objects).