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
