From 9fe0a5f21c626bcf265c7a8f5ce2ecba4a7dda72 Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Tue, 16 Aug 2022 15:37:09 +0100 Subject: [PATCH] Add animation/transition delay support --- sandbox/darren/basic.css | 252 ++++++++++++++++++++++++++++ sandbox/darren/basic.py | 235 ++++++++++++++++++++++++++ sandbox/darren/just_a_box.py | 6 +- sandbox/will/basic.css | 54 +++--- src/textual/_animator.py | 11 +- src/textual/css/scalar_animation.py | 7 +- src/textual/css/styles.py | 6 +- src/textual/css/stylesheet.py | 3 +- tests/css/test_parse.py | 3 +- 9 files changed, 538 insertions(+), 39 deletions(-) create mode 100644 sandbox/darren/basic.css create mode 100644 sandbox/darren/basic.py diff --git a/sandbox/darren/basic.css b/sandbox/darren/basic.css new file mode 100644 index 000000000..b04a978cb --- /dev/null +++ b/sandbox/darren/basic.css @@ -0,0 +1,252 @@ +/* CSS file for basic.py */ + + + + * { + transition: color 300ms linear, background 300ms linear; +} + + +*:hover { + /* tint: 30% red; + /* outline: heavy red; */ +} + +App > Screen { + + background: $surface; + color: $text-surface; + layers: base sidebar; + + color: $text-background; + background: $background; + layout: vertical; + + overflow: hidden; + +} + +#tree-container { + overflow-y: auto; + height: 20; + margin: 1 2; + background: $panel; + padding: 1 2; +} + +DirectoryTree { + padding: 0 1; + height: auto; + +} + + + + +DataTable { + /*border:heavy red;*/ + /* tint: 10% green; */ + /* opacity: 50%; */ + padding: 1; + margin: 1 2; + height: 24; +} + +#sidebar { + color: $text-panel; + background: $panel; + dock: left; + width: 30; + margin-bottom: 1; + offset-x: -100%; + transition: offset 500ms in_out_cubic 2s; + layer: sidebar; +} + +#sidebar.-active { + offset-x: 0; +} + +#sidebar .title { + height: 1; + background: $primary-background-darken-1; + color: $text-primary-background-darken-1; + border-right: wide $background; + content-align: center middle; +} + +#sidebar .user { + height: 8; + background: $panel-darken-1; + color: $text-panel-darken-1; + border-right: wide $background; + content-align: center middle; +} + +#sidebar .content { + background: $panel-darken-2; + color: $text-surface; + border-right: wide $background; + content-align: center middle; +} + + + + +Tweet { + height:12; + width: 100%; + + + background: $panel; + color: $text-panel; + layout: vertical; + /* border: outer $primary; */ + padding: 1; + border: wide $panel; + overflow: auto; + /* scrollbar-gutter: stable; */ + align-horizontal: center; + box-sizing: border-box; +} + + +.scrollable { + overflow-x: auto; + overflow-y: scroll; + margin: 1 2; + height: 24; + align-horizontal: center; + layout: vertical; +} + +.code { + height: auto; + +} + + +TweetHeader { + height:1; + background: $accent; + color: $text-accent +} + +TweetBody { + width: 100%; + background: $panel; + color: $text-panel; + height: auto; + padding: 0 1 0 0; +} + +Tweet.scroll-horizontal TweetBody { + width: 350; +} + +.button { + background: $accent; + color: $text-accent; + width:20; + height: 3; + /* border-top: hidden $accent-darken-3; */ + border: tall $accent-darken-2; + /* border-left: tall $accent-darken-1; */ + + + /* padding: 1 0 0 0 ; */ + + transition: background 400ms in_out_cubic, color 400ms in_out_cubic; + +} + +.button:hover { + background: $accent-lighten-1; + color: $text-accent-lighten-1; + width: 20; + height: 3; + border: tall $accent-darken-1; + /* border-left: tall $accent-darken-3; */ + + + + +} + +#footer { + color: $text-accent; + background: $accent; + height: 1; + + content-align: center middle; + dock:bottom; +} + + +#sidebar .content { + layout: vertical +} + +OptionItem { + height: 3; + background: $panel; + border-right: wide $background; + border-left: blank; + content-align: center middle; +} + +OptionItem:hover { + height: 3; + color: $text-primary; + background: $primary-darken-1; + /* border-top: hkey $accent2-darken-3; + border-bottom: hkey $accent2-darken-3; */ + text-style: bold; + border-left: outer $secondary-darken-2; +} + +Error { + width: 100%; + height:3; + background: $error; + color: $text-error; + border-top: tall $error-darken-2; + border-bottom: tall $error-darken-2; + + padding: 0; + text-style: bold; + align-horizontal: center; +} + +Warning { + width: 100%; + height:3; + background: $warning; + color: $text-warning-fade-1; + border-top: tall $warning-darken-2; + border-bottom: tall $warning-darken-2; + + text-style: bold; + align-horizontal: center; +} + +Success { + width: 100%; + + height:auto; + box-sizing: border-box; + background: $success; + color: $text-success-fade-1; + + border-top: hkey $success-darken-2; + border-bottom: hkey $success-darken-2; + + text-style: bold ; + + align-horizontal: center; +} + + +.horizontal { + layout: horizontal +} diff --git a/sandbox/darren/basic.py b/sandbox/darren/basic.py new file mode 100644 index 000000000..061609238 --- /dev/null +++ b/sandbox/darren/basic.py @@ -0,0 +1,235 @@ +from rich.console import RenderableType + +from rich.syntax import Syntax +from rich.text import Text + +from textual.app import App, ComposeResult +from textual.reactive import Reactive +from textual.widget import Widget +from textual.widgets import Static, DataTable, DirectoryTree, Header, Footer +from textual.layout import Container + +CODE = ''' +from __future__ import annotations + +from typing import Iterable, TypeVar + +T = TypeVar("T") + + +def loop_first(values: Iterable[T]) -> Iterable[tuple[bool, T]]: + """Iterate and generate a tuple with a flag for first value.""" + iter_values = iter(values) + try: + value = next(iter_values) + except StopIteration: + return + yield True, value + for value in iter_values: + yield False, value + + +def loop_last(values: Iterable[T]) -> Iterable[tuple[bool, T]]: + """Iterate and generate a tuple with a flag for last value.""" + iter_values = iter(values) + try: + previous_value = next(iter_values) + except StopIteration: + return + for value in iter_values: + yield False, previous_value + previous_value = value + yield True, previous_value + + +def loop_first_last(values: Iterable[T]) -> Iterable[tuple[bool, bool, T]]: + """Iterate and generate a tuple with a flag for first and last value.""" + iter_values = iter(values) + try: + previous_value = next(iter_values) + except StopIteration: + return + first = True + for value in iter_values: + yield first, False, previous_value + first = False + previous_value = value + yield first, True, previous_value +''' + + +lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum.""" +lorem = ( + lorem_short + + """ In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """ +) + +lorem_short_text = Text.from_markup(lorem_short) +lorem_long_text = Text.from_markup(lorem * 2) + + +class TweetHeader(Widget): + def render(self) -> RenderableType: + return Text("Lorem Impsum", justify="center") + + +class TweetBody(Widget): + short_lorem = Reactive(False) + + def render(self) -> Text: + return lorem_short_text if self.short_lorem else lorem_long_text + + +class Tweet(Widget): + pass + + +class OptionItem(Widget): + def render(self) -> Text: + return Text("Option") + + +class Error(Widget): + def render(self) -> Text: + return Text("This is an error message", justify="center") + + +class Warning(Widget): + def render(self) -> Text: + return Text("This is a warning message", justify="center") + + +class Success(Widget): + def render(self) -> Text: + return Text("This is a success message", justify="center") + + +class BasicApp(App, css_path="basic.css"): + """A basic app demonstrating CSS""" + + def on_load(self): + """Bind keys here.""" + self.bind("s", "toggle_class('#sidebar', '-active')", description="Sidebar") + self.bind("d", "toggle_dark", description="Dark mode") + self.bind("q", "quit", description="Quit") + self.bind("f", "query_test", description="Query test") + + def compose(self): + yield Header() + + table = DataTable() + self.scroll_to_target = Tweet(TweetBody()) + + yield Container( + Tweet(TweetBody()), + Widget( + Static( + Syntax(CODE, "python", line_numbers=True, indent_guides=True), + classes="code", + ), + classes="scrollable", + ), + table, + Widget(DirectoryTree("~/code/textual"), id="tree-container"), + Error(), + Tweet(TweetBody(), classes="scrollbar-size-custom"), + Warning(), + Tweet(TweetBody(), classes="scroll-horizontal"), + Success(), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + Tweet(TweetBody(), classes="scroll-horizontal"), + ) + yield Widget( + Widget(classes="title"), + Widget(classes="user"), + OptionItem(), + OptionItem(), + OptionItem(), + Widget(classes="content"), + id="sidebar", + ) + yield Footer() + + table.add_column("Foo", width=20) + table.add_column("Bar", width=20) + table.add_column("Baz", width=20) + table.add_column("Foo", width=20) + table.add_column("Bar", width=20) + table.add_column("Baz", width=20) + table.zebra_stripes = True + for n in range(100): + table.add_row(*[f"Cell ([b]{n}[/b], {col})" for col in range(6)]) + + def on_mount(self): + self.sub_title = "Widget demo" + + async def on_key(self, event) -> None: + await self.dispatch_key(event) + + def action_toggle_dark(self): + self.dark = not self.dark + + def action_query_test(self): + query = self.query("Tweet") + self.log(query) + self.log(query.nodes) + self.log(query) + self.log(query.nodes) + + query.set_styles("outline: outer red;") + + query = query.exclude(".scroll-horizontal") + self.log(query) + self.log(query.nodes) + + # query = query.filter(".rubbish") + # self.log(query) + # self.log(query.first()) + + async def key_q(self): + await self.shutdown() + + def key_x(self): + self.panic(self.tree) + + def key_escape(self): + self.app.bell() + + def key_t(self): + # Pressing "t" toggles the content of the TweetBody widget, from a long "Lorem ipsum..." to a shorter one. + tweet_body = self.query("TweetBody").first() + tweet_body.short_lorem = not tweet_body.short_lorem + + def key_v(self): + self.get_child(id="content").scroll_to_widget(self.scroll_to_target) + + def key_space(self): + self.bell() + + +app = BasicApp() + +if __name__ == "__main__": + app.run() + + # from textual.geometry import Region + # from textual.color import Color + + # print(Region.intersection.cache_info()) + # print(Region.overlaps.cache_info()) + # print(Region.union.cache_info()) + # print(Region.split_vertical.cache_info()) + # print(Region.__contains__.cache_info()) + # from textual.css.scalar import Scalar + + # print(Scalar.resolve_dimension.cache_info()) + + # from rich.style import Style + # from rich.cells import cached_cell_len + + # print(Style._add.cache_info()) + + # print(cached_cell_len.cache_info()) diff --git a/sandbox/darren/just_a_box.py b/sandbox/darren/just_a_box.py index b9d0d44ca..d665f13eb 100644 --- a/sandbox/darren/just_a_box.py +++ b/sandbox/darren/just_a_box.py @@ -1,6 +1,7 @@ from __future__ import annotations from rich.console import RenderableType +from rich.panel import Panel from textual import events from textual.app import App, ComposeResult @@ -16,7 +17,7 @@ class Box(Widget, can_focus=True): super().__init__(*children, id=id, classes=classes) def render(self) -> RenderableType: - return "Box" + return Panel("Box") class JustABox(App): @@ -29,7 +30,8 @@ class JustABox(App): self.box.styles, "opacity", value=0.0, - duration=2.0, + duration=1.0, + delay=5.0, on_complete=self.box.remove, ) diff --git a/sandbox/will/basic.css b/sandbox/will/basic.css index ab50375b6..21c948fa8 100644 --- a/sandbox/will/basic.css +++ b/sandbox/will/basic.css @@ -4,18 +4,18 @@ * { transition: color 300ms linear, background 300ms linear; -} +} *:hover { - /* tint: 30% red; + /* tint: 30% red; /* outline: heavy red; */ } App > Screen { - + background: $surface; - color: $text-surface; + color: $text-surface; layers: base sidebar; color: $text-background; @@ -23,12 +23,12 @@ App > Screen { layout: vertical; overflow: hidden; - + } #tree-container { overflow-y: auto; - height: 20; + height: 20; margin: 1 2; background: $panel; padding: 1 2; @@ -37,7 +37,7 @@ App > Screen { DirectoryTree { padding: 0 1; height: auto; - + } @@ -48,8 +48,8 @@ DataTable { /* tint: 10% green; */ /* opacity: 50%; */ padding: 1; - margin: 1 2; - height: 24; + margin: 1 2; + height: 24; } #sidebar { @@ -59,8 +59,8 @@ DataTable { width: 30; margin-bottom: 1; offset-x: -100%; - - transition: offset 500ms in_out_cubic; + + transition: offset 500ms in_out_cubic 2s; layer: sidebar; } @@ -97,8 +97,8 @@ DataTable { Tweet { height:12; width: 100%; - - + + background: $panel; color: $text-panel; layout: vertical; @@ -121,9 +121,9 @@ Tweet { layout: vertical; } -.code { +.code { height: auto; - + } @@ -133,12 +133,12 @@ TweetHeader { color: $text-accent } -TweetBody { +TweetBody { width: 100%; background: $panel; color: $text-panel; - height: auto; - padding: 0 1 0 0; + height: auto; + padding: 0 1 0 0; } Tweet.scroll-horizontal TweetBody { @@ -158,7 +158,7 @@ Tweet.scroll-horizontal TweetBody { /* padding: 1 0 0 0 ; */ transition: background 400ms in_out_cubic, color 400ms in_out_cubic; - + } .button:hover { @@ -178,7 +178,7 @@ Tweet.scroll-horizontal TweetBody { color: $text-accent; background: $accent; height: 1; - + content-align: center middle; dock:bottom; } @@ -213,7 +213,7 @@ Error { color: $text-error; border-top: tall $error-darken-2; border-bottom: tall $error-darken-2; - + padding: 0; text-style: bold; align-horizontal: center; @@ -226,21 +226,21 @@ Warning { color: $text-warning-fade-1; border-top: tall $warning-darken-2; border-bottom: tall $warning-darken-2; - + text-style: bold; align-horizontal: center; } Success { width: 100%; - - height:auto; + + height:auto; box-sizing: border-box; background: $success; - color: $text-success-fade-1; - + color: $text-success-fade-1; + border-top: hkey $success-darken-2; - border-bottom: hkey $success-darken-2; + border-bottom: hkey $success-darken-2; text-style: bold ; diff --git a/src/textual/_animator.py b/src/textual/_animator.py index 4260ef758..3deb7df9e 100644 --- a/src/textual/_animator.py +++ b/src/textual/_animator.py @@ -11,6 +11,7 @@ from . import _clock from ._easing import DEFAULT_EASING, EASING from ._timer import Timer from ._types import MessageTarget +from .geometry import clamp if sys.version_info >= (3, 8): from typing import Protocol, runtime_checkable @@ -56,6 +57,7 @@ class SimpleAnimation(Animation): attribute: str start_time: float duration: float + delay: float start_value: float | Animatable end_value: float | Animatable final_value: object @@ -68,7 +70,7 @@ class SimpleAnimation(Animation): setattr(self.obj, self.attribute, self.final_value) return True - factor = min(1.0, (time - self.start_time) / self.duration) + factor = clamp((time - self.start_time - self.delay) / self.duration, 0.0, 1.0) eased_factor = self.easing(factor) if factor == 1.0: @@ -121,6 +123,7 @@ class BoundAnimator: final_value: object = ..., duration: float | None = None, speed: float | None = None, + delay: float = 0.0, easing: EasingFunction | str = DEFAULT_EASING, on_complete: Callable[[], None] | None = None, ) -> None: @@ -132,6 +135,7 @@ class BoundAnimator: final_value=final_value, duration=duration, speed=speed, + delay=delay, easing=easing_function, on_complete=on_complete, ) @@ -177,6 +181,7 @@ class Animator: final_value: object = ..., duration: float | None = None, speed: float | None = None, + delay: float = 0.0, easing: EasingFunction | str = DEFAULT_EASING, on_complete: Callable[[], None] | None = None, ) -> None: @@ -189,6 +194,7 @@ class Animator: final_value (Any, optional): The final value, or ellipsis if it is the same as ``value``. Defaults to .... duration (float | None, optional): The duration of the animation, or ``None`` to use speed. Defaults to ``None``. speed (float | None, optional): The speed of the animation. Defaults to None. + delay (float): How long to delay the beginning of the animation by in seconds. easing (EasingFunction | str, optional): An easing function. Defaults to DEFAULT_EASING. """ @@ -202,6 +208,7 @@ class Animator: if final_value is ...: final_value = value + start_time = self._get_time() animation_key = (id(obj), attribute) @@ -217,6 +224,7 @@ class Animator: duration=duration, speed=speed, easing=easing_function, + delay=delay, on_complete=on_complete, ) if animation is None: @@ -236,6 +244,7 @@ class Animator: attribute=attribute, start_time=start_time, duration=animation_duration, + delay=delay, start_value=start_value, end_value=value, final_value=final_value, diff --git a/src/textual/css/scalar_animation.py b/src/textual/css/scalar_animation.py index e3b9c4d69..4880ada1b 100644 --- a/src/textual/css/scalar_animation.py +++ b/src/textual/css/scalar_animation.py @@ -2,7 +2,7 @@ from __future__ import annotations from typing import TYPE_CHECKING, Callable -from ..geometry import Offset +from ..geometry import Offset, clamp from .._animator import Animation from .scalar import ScalarOffset from .._animator import EasingFunction @@ -24,6 +24,7 @@ class ScalarAnimation(Animation): duration: float | None, speed: float | None, easing: EasingFunction, + delay: float = 0.0, on_complete: Callable[[], None] | None = None, ): assert ( @@ -35,6 +36,7 @@ class ScalarAnimation(Animation): self.attribute = attribute self.final_value = value self.easing = easing + self.delay = delay self.on_complete = on_complete size = widget.outer_size @@ -51,8 +53,7 @@ class ScalarAnimation(Animation): self.duration = duration def __call__(self, time: float) -> bool: - - factor = min(1.0, (time - self.start_time) / self.duration) + factor = clamp((time - self.start_time - self.delay) / self.duration, 0.0, 1.0) eased_factor = self.easing(factor) if eased_factor >= 1: diff --git a/src/textual/css/styles.py b/src/textual/css/styles.py index 03478f946..0340e9bad 100644 --- a/src/textual/css/styles.py +++ b/src/textual/css/styles.py @@ -579,12 +579,9 @@ class Styles(StylesBase): duration: float | None, speed: float | None, easing: EasingFunction, + delay: float = 0.0, on_complete: Callable[[], None] = None, ) -> Animation | None: - from ..widget import Widget - - # node = self.node - # assert isinstance(self.node, Widget) if isinstance(value, ScalarOffset): return ScalarAnimation( self.node, @@ -595,6 +592,7 @@ class Styles(StylesBase): duration=duration, speed=speed, easing=easing, + delay=delay, on_complete=on_complete, ) return None diff --git a/src/textual/css/stylesheet.py b/src/textual/css/stylesheet.py index 06957892e..6d27371dc 100644 --- a/src/textual/css/stylesheet.py +++ b/src/textual/css/stylesheet.py @@ -407,13 +407,14 @@ class Stylesheet: if is_animatable(key) and new_render_value != old_render_value: transition = new_styles.get_transition(key) if transition is not None: - duration, easing, _delay = transition + duration, easing, delay = transition node.app.animator.animate( node.styles.base, key, new_render_value, final_value=new_value, duration=duration, + delay=delay, easing=easing, ) continue diff --git a/tests/css/test_parse.py b/tests/css/test_parse.py index 5b11472cf..7e3fe8d9e 100644 --- a/tests/css/test_parse.py +++ b/tests/css/test_parse.py @@ -1040,8 +1040,9 @@ class TestParseTransition: def test_various_duration_formats(self, duration, parsed_duration): easing = "in_out_cubic" transition_property = "offset" + delay = duration css = f"""#some-widget {{ - transition: {transition_property} {duration} {easing} {duration}; + transition: {transition_property} {duration} {easing} {delay}; }} """ stylesheet = Stylesheet()