feat(ui-gpui): Zed-style BlinkManager pattern for pulsing dot (epoch guard, 500ms timer)
This commit is contained in:
parent
84324f9ae3
commit
ba74e19ff2
2 changed files with 77 additions and 109 deletions
|
|
@ -10,7 +10,7 @@ use gpui::*;
|
|||
|
||||
use crate::state::{AgentStatus, Project, ProjectTab};
|
||||
use crate::theme;
|
||||
use crate::components::pulsing_dot::{PulsingDotElement, DotStatus};
|
||||
use crate::components::pulsing_dot::{PulsingDot, DotStatus};
|
||||
|
||||
// ── Accent Colors by Index ──────────────────────────────────────────
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ pub struct ProjectBox {
|
|||
pub agent_pane: Option<Entity<crate::components::agent_pane::AgentPane>>,
|
||||
/// Entity handle for the embedded terminal (Model tab)
|
||||
pub terminal_view: Option<Entity<crate::terminal::renderer::TerminalView>>,
|
||||
_status_dot_placeholder: (), // PulsingDotElement is created inline during render
|
||||
pub status_dot: Option<Entity<PulsingDot>>,
|
||||
}
|
||||
|
||||
impl ProjectBox {
|
||||
|
|
@ -81,13 +81,25 @@ impl ProjectBox {
|
|||
project,
|
||||
agent_pane: None,
|
||||
terminal_view: None,
|
||||
_status_dot_placeholder: (),
|
||||
status_dot: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Initialize sub-views. Must be called after the ProjectBox entity is created.
|
||||
pub fn init_subviews(&mut self, cx: &mut Context<Self>) {
|
||||
eprintln!("[ProjectBox] init_subviews for {}", self.project.name);
|
||||
|
||||
// Create pulsing status dot
|
||||
let dot_status = match self.project.agent.status {
|
||||
AgentStatus::Running => DotStatus::Running,
|
||||
AgentStatus::Idle => DotStatus::Idle,
|
||||
AgentStatus::Done => DotStatus::Done,
|
||||
AgentStatus::Error => DotStatus::Error,
|
||||
};
|
||||
let dot = cx.new(|_cx| PulsingDot::new(dot_status, 8.0));
|
||||
self.status_dot = Some(dot);
|
||||
// NOTE: start_blinking NOT called yet — testing if app stays alive without it
|
||||
|
||||
// Create agent pane with demo messages
|
||||
let agent_pane = cx.new(|_cx| {
|
||||
crate::components::agent_pane::AgentPane::with_demo_messages()
|
||||
|
|
@ -238,16 +250,8 @@ impl Render for ProjectBox {
|
|||
.rounded(px(2.0))
|
||||
.bg(accent),
|
||||
)
|
||||
// Animated status dot — custom Element, paints directly to GPU
|
||||
.child({
|
||||
let dot_status = match status {
|
||||
AgentStatus::Running => DotStatus::Running,
|
||||
AgentStatus::Idle => DotStatus::Idle,
|
||||
AgentStatus::Done => DotStatus::Done,
|
||||
AgentStatus::Error => DotStatus::Error,
|
||||
};
|
||||
PulsingDotElement::new(dot_status, 8.0)
|
||||
})
|
||||
// Animated status dot (Zed BlinkManager pattern)
|
||||
.children(self.status_dot.clone())
|
||||
// Project name
|
||||
.child(
|
||||
div()
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
//! PulsingDot — custom GPUI Element that paints a single animated quad.
|
||||
//! PulsingDot — Zed-style BlinkManager pattern.
|
||||
//!
|
||||
//! Instead of using the vdom (div().bg(color)), we implement Element directly
|
||||
//! and call window.paint_quad() in paint(). Combined with request_animation_frame(),
|
||||
//! GPUI only repaints THIS element's quad — not the full vdom tree.
|
||||
//! The GPU handles the color interpolation via the paint_quad shader.
|
||||
//! Uses cx.spawn() + background_executor().timer() + cx.notify() — exactly
|
||||
//! how Zed's BlinkManager achieves ~1% CPU cursor blink.
|
||||
//!
|
||||
//! Key: spawn must be called AFTER entity is registered (not inside cx.new()).
|
||||
//! The epoch counter cancels stale timers automatically.
|
||||
|
||||
use gpui::*;
|
||||
use std::time::Instant;
|
||||
use std::time::Duration;
|
||||
|
||||
use crate::theme;
|
||||
|
||||
|
|
@ -19,18 +20,20 @@ pub enum DotStatus {
|
|||
Error,
|
||||
}
|
||||
|
||||
pub struct PulsingDotElement {
|
||||
pub struct PulsingDot {
|
||||
status: DotStatus,
|
||||
size: Pixels,
|
||||
start_time: Instant,
|
||||
size: f32,
|
||||
visible: bool, // toggles each blink
|
||||
blink_epoch: usize, // cancels stale timers (Zed pattern)
|
||||
}
|
||||
|
||||
impl PulsingDotElement {
|
||||
impl PulsingDot {
|
||||
pub fn new(status: DotStatus, size: f32) -> Self {
|
||||
Self {
|
||||
status,
|
||||
size: px(size),
|
||||
start_time: Instant::now(),
|
||||
size,
|
||||
visible: true,
|
||||
blink_epoch: 0,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,98 +41,59 @@ impl PulsingDotElement {
|
|||
matches!(self.status, DotStatus::Running | DotStatus::Stalled)
|
||||
}
|
||||
|
||||
fn base_color(&self) -> Rgba {
|
||||
fn next_epoch(&mut self) -> usize {
|
||||
self.blink_epoch += 1;
|
||||
self.blink_epoch
|
||||
}
|
||||
|
||||
/// Start blinking. MUST be called after entity is registered (not in cx.new).
|
||||
/// This is the Zed BlinkManager pattern — recursive spawn with epoch guard.
|
||||
pub fn start_blinking(&mut self, cx: &mut Context<Self>) {
|
||||
if !self.should_pulse() {
|
||||
return;
|
||||
}
|
||||
let epoch = self.next_epoch();
|
||||
self.schedule_blink(epoch, cx);
|
||||
}
|
||||
|
||||
fn schedule_blink(&self, epoch: usize, cx: &mut Context<Self>) {
|
||||
cx.spawn(async move |this: WeakEntity<Self>, cx: &mut AsyncApp| {
|
||||
cx.background_executor().timer(Duration::from_millis(500)).await;
|
||||
this.update(cx, |dot, cx| {
|
||||
// Epoch guard: if epoch changed (pause/resume), this timer is stale
|
||||
if dot.blink_epoch == epoch {
|
||||
dot.visible = !dot.visible;
|
||||
cx.notify(); // marks ONLY this view dirty
|
||||
dot.schedule_blink(epoch, cx); // recursive schedule
|
||||
}
|
||||
}).ok();
|
||||
}).detach();
|
||||
}
|
||||
|
||||
fn color(&self) -> Rgba {
|
||||
match self.status {
|
||||
DotStatus::Running => theme::GREEN,
|
||||
DotStatus::Running => if self.visible { theme::GREEN } else { theme::SURFACE1 },
|
||||
DotStatus::Idle => theme::OVERLAY0,
|
||||
DotStatus::Stalled => theme::PEACH,
|
||||
DotStatus::Stalled => if self.visible { theme::PEACH } else { theme::SURFACE1 },
|
||||
DotStatus::Done => theme::BLUE,
|
||||
DotStatus::Error => theme::RED,
|
||||
}
|
||||
}
|
||||
|
||||
fn current_color(&self) -> Hsla {
|
||||
let base = self.base_color();
|
||||
if !self.should_pulse() {
|
||||
return base.into();
|
||||
}
|
||||
let elapsed = self.start_time.elapsed().as_secs_f32();
|
||||
let t = 0.5 - 0.5 * (elapsed * std::f32::consts::PI).sin();
|
||||
let bg = theme::SURFACE0;
|
||||
let color = Rgba {
|
||||
r: base.r + (bg.r - base.r) * t,
|
||||
g: base.g + (bg.g - base.g) * t,
|
||||
b: base.b + (bg.b - base.b) * t,
|
||||
a: 1.0,
|
||||
};
|
||||
color.into()
|
||||
}
|
||||
}
|
||||
|
||||
impl IntoElement for PulsingDotElement {
|
||||
type Element = Self;
|
||||
fn into_element(self) -> Self { self }
|
||||
}
|
||||
impl Render for PulsingDot {
|
||||
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
||||
let color = self.color();
|
||||
let r = (color.r * 255.0) as u32;
|
||||
let g = (color.g * 255.0) as u32;
|
||||
let b = (color.b * 255.0) as u32;
|
||||
let hex = rgba(r * 0x1000000 + g * 0x10000 + b * 0x100 + 0xFF);
|
||||
|
||||
impl Element for PulsingDotElement {
|
||||
type RequestLayoutState = ();
|
||||
type PrepaintState = ();
|
||||
|
||||
fn id(&self) -> Option<ElementId> { None }
|
||||
|
||||
fn source_location(&self) -> Option<&'static std::panic::Location<'static>> { None }
|
||||
|
||||
fn request_layout(
|
||||
&mut self,
|
||||
_id: Option<&GlobalElementId>,
|
||||
_inspector_id: Option<&InspectorElementId>,
|
||||
window: &mut Window,
|
||||
cx: &mut App,
|
||||
) -> (LayoutId, Self::RequestLayoutState) {
|
||||
let layout_id = window.request_layout(
|
||||
Style {
|
||||
size: Size { width: self.size.into(), height: self.size.into() },
|
||||
flex_shrink: 0.0,
|
||||
..Default::default()
|
||||
},
|
||||
[],
|
||||
cx,
|
||||
);
|
||||
(layout_id, ())
|
||||
}
|
||||
|
||||
fn prepaint(
|
||||
&mut self,
|
||||
_id: Option<&GlobalElementId>,
|
||||
_inspector_id: Option<&InspectorElementId>,
|
||||
_bounds: Bounds<Pixels>,
|
||||
_request_layout: &mut Self::RequestLayoutState,
|
||||
_window: &mut Window,
|
||||
_cx: &mut App,
|
||||
) -> Self::PrepaintState {
|
||||
()
|
||||
}
|
||||
|
||||
fn paint(
|
||||
&mut self,
|
||||
_id: Option<&GlobalElementId>,
|
||||
_inspector_id: Option<&InspectorElementId>,
|
||||
bounds: Bounds<Pixels>,
|
||||
_request_layout: &mut Self::RequestLayoutState,
|
||||
_prepaint: &mut Self::PrepaintState,
|
||||
window: &mut Window,
|
||||
_cx: &mut App,
|
||||
) {
|
||||
let color = self.current_color();
|
||||
let radius = self.size / 2.0;
|
||||
|
||||
// Paint a single rounded quad — this is the ONLY thing that gets drawn
|
||||
window.paint_quad(fill(bounds, color).corner_radii(radius));
|
||||
|
||||
// Schedule next animation frame — GPUI will call paint() again
|
||||
// But this time, ONLY this element gets repainted (not the full vdom)
|
||||
if self.should_pulse() {
|
||||
window.request_animation_frame();
|
||||
}
|
||||
div()
|
||||
.w(px(self.size))
|
||||
.h(px(self.size))
|
||||
.rounded(px(self.size / 2.0))
|
||||
.bg(hex)
|
||||
.flex_shrink_0()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue