Offset Widgets Popping In And Out While Scrolling

[ddkasa]

I am working on a timeline widget and have an issue with disappearing/popping widgets if they have an offset set while scrolling off the original region/viewport. I am wondering if this is an intended behaviour or if I will have to change my approach to this functionality in order to prevent popping? Expected behaviour for me would be that the widgets stay in view without disappearing.

From my limited exploration of the textual source code I am thinking that this might be a compositor issue where the viewport logic doesn't properly validate the widgets location with the offset included.

I have added a MRE and video to demonstrate the issue, so please let me know if this needs more information.

Video

offset_bug.webm

Working Example

main.py

from __future__ import annotations

from dataclasses import dataclass

from textual import on
from textual.app import App, ComposeResult
from textual.containers import ScrollableContainer
from textual.events import MouseDown, MouseEvent, MouseMove, MouseUp, Resize
from textual.geometry import Offset
from textual.message import Message
from textual.widget import Widget
from textual.widgets import Label


class Adjustable(Widget):
    @dataclass
    class Resize(Message):
        adjustable: Adjustable
        delta: int

    def __init__(self, id: str) -> None:
        super().__init__(id=id)
        self.clicked: Offset | None = None
        self.styles.width = 10

    def compose(self) -> ComposeResult:
        yield Label("Test Content")

    async def on_mouse_down(self, event: MouseDown) -> None:
        if self.app.mouse_captured is None:
            self.capture_mouse()
        await self.is_focused(event)

    async def on_mouse_up(self, event: MouseUp) -> None:
        if self.app.mouse_captured:
            self.capture_mouse(False)
        await self.is_unfocused()

    async def is_focused(self, event: MouseEvent) -> None:
        self.clicked = event.offset
        self.moving = 2 < event.offset.x < (self.size.width - 2)

    async def is_unfocused(self) -> None:
        self.clicked = None

    async def on_mouse_move(self, event: MouseMove) -> None:
        if self.clicked is not None and event.button != 0:
            if hasattr(self, "moving") and self.moving:
                await self._move(event)
            else:
                await self._resize(event)

    async def _resize(self, event: MouseMove) -> None:
        delta = event.delta_x
        if self.clicked and self.clicked.x < 2:
            self.offset += Offset(delta, 0)
            delta *= -1
        self.styles.width = self.styles.width.value + delta

        self.refresh()
        self.post_message(Adjustable.Resize(self, delta))

    async def _move(self, event: MouseMove) -> None:
        if event.delta:
            self.offset = self.offset + Offset(event.delta.x)


class Timeline(Widget):
    def __init__(self) -> None:
        super().__init__()
        self.styles.width = 5760
        self.adjustables = (
            Adjustable(id="adj-1"),
            Adjustable(id="adj-2"),
            Adjustable(id="adj-3"),
        )

    def compose(self) -> ComposeResult:
        yield from self.adjustables

    @on(Adjustable.Resize)
    def _resize_compensation(self, message: Adjustable.Resize) -> None:
        offset = Offset(message.delta)
        for i in range(1, len(self.adjustables) + 1):
            adj = self.adjustables[-i]
            if adj.id == message.adjustable.id:
                break
            with adj.prevent(Adjustable.Resize, Resize):
                adj.offset = adj.offset - offset


class BugReportApp(App):
    CSS = """
    Adjustable {
        background: $panel;
        align-vertical: middle;
        height: 100%;
        min-width: 6;
        border: outer $secondary;
    }
    ScrollableContainer {
        height: auto;
        Timeline {
            background: $panel-darken-1;
            width: 100%;
            height: 100%;
            layout: horizontal;
            height: 13;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with ScrollableContainer():
            yield Timeline()


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

Gist

Textual Diagnostics

Versions

Name	Value
Textual	0.86.1
Rich	13.9.4

Python

Name	Value
Version	3.12.7
Implementation	CPython
Compiler	GCC 14.2.1 20240912 (Red Hat 14.2.1-3)
Executable	/home/dk/dev/toggl-tui/.venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.11.7-200.fc40.x86_64
Version	#1 SMP PREEMPT_DYNAMIC Fri Nov 8 19:21:57 UTC 2024

Terminal

Name	Value
Terminal Application	Kitty
TERM	xterm-kitty
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=274, height=54
legacy_windows	False
min_width	1
max_width	274
is_terminal	True
encoding	utf-8
max_height	54
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[willmcgugan]

An MRE should ideally be a bit more minimal than that. But I can reproduce it.

It's a clever widget. Kudos.

[ddkasa]

An MRE should ideally be a bit more minimal than that. But I can reproduce it.

In hindsight I definitely could have trimmed the example a bit more. I have edited to be shorter if that helps.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[willmcgugan]

Please try v0.86.2

And keep us posted with your progress. That's an interesting widget!

[ddkasa]

Please try v0.86.2

Working as intended. Thank you for the quick fix!