reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

chore: improve tab component

Browse Source
This commit is contained in:
reya
2025-02-05 14:05:32 +07:00
parent 72e42bf22a
commit a941e844b9
8 changed files with 487 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
crates/ui/src/dock_area/dock.rs
View File

@@ -6,9 +6,10 @@ use crate::{
AxisExt as _, StyledExt,
};
use gpui::{
div, prelude::FluentBuilder as _, px, App, AppContext, Axis, Context, Element, Entity,
div, prelude::FluentBuilder as _, px, AnyView, App, AppContext, Axis, Context, Element, Entity,
InteractiveElement as _, IntoElement, MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels,
Point, Render, StatefulInteractiveElement, Style, Styled as _, WeakEntity, Window,
Point, Render, StatefulInteractiveElement, Style, StyleRefinement, Styled as _, WeakEntity,
Window,
};
use serde::{Deserialize, Serialize};
use std::sync::Arc;
@@ -355,6 +356,8 @@ impl Render for Dock {
return div();
}
let cache_style = StyleRefinement::default().v_flex().size_full();
div()
.relative()
.overflow_hidden()
@@ -369,8 +372,10 @@ impl Render for Dock {
})
.map(|this| match &self.panel {
DockItem::Split { view, .. } => this.child(view.clone()),
DockItem::Tabs { view, .. } => this.child(view.clone()),
DockItem::Panel { view, .. } => this.child(view.clone().view()),
DockItem::Tabs { view, .. } => {
this.child(AnyView::from(view.clone()).cached(cache_style))
}
DockItem::Panel { view, .. } => this.child(view.clone().view().cached(cache_style)),
})
.child(self.render_resize_handle(window, cx))
.child(DockElement {

39
crates/ui/src/dock_area/panel.rs
View File

@@ -51,6 +51,27 @@ pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable {
true
}
/// Return false to hide panel, true to show panel, default is `true`.
///
/// This method called in Panel render, we should make sure it is fast.
fn visible(&self, _cx: &App) -> bool {
true
}
/// Set active state of the panel.
///
/// This method will be called when the panel is active or inactive.
///
/// The last_active_panel and current_active_panel will be touched when the panel is active.
fn set_active(&self, _active: bool, _cx: &mut App) {}
/// Set zoomed state of the panel.
///
/// This method will be called when the panel is zoomed or unzoomed.
///
/// Only current Panel will touch this method.
fn set_zoomed(&self, _zoomed: bool, _cx: &mut App) {}
/// The addition popup menu of the panel, default is `None`.
fn popup_menu(&self, this: PopupMenu, _cx: &App) -> PopupMenu {
this
@@ -68,6 +89,9 @@ pub trait PanelView: 'static + Send + Sync {
fn title(&self, cx: &App) -> AnyElement;
fn closable(&self, cx: &App) -> bool;
fn zoomable(&self, cx: &App) -> bool;
fn visible(&self, cx: &App) -> bool;
fn set_active(&self, active: bool, cx: &mut App);
fn set_zoomed(&self, zoomed: bool, cx: &mut App);
fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu;
fn toolbar_buttons(&self, window: &Window, cx: &App) -> Vec<Button>;
fn view(&self) -> AnyView;
@@ -95,6 +119,21 @@ impl<T: Panel> PanelView for Entity<T> {
self.read(cx).zoomable(cx)
}
fn visible(&self, cx: &App) -> bool {
self.read(cx).visible(cx)
}
fn set_active(&self, active: bool, cx: &mut App) {
self.update(cx, |this, cx| {
this.set_active(active, cx);
})
}
fn set_zoomed(&self, zoomed: bool, cx: &mut App) {
self.update(cx, |this, cx| {
this.set_zoomed(zoomed, cx);
})
}
fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu {
self.read(cx).popup_menu(menu, cx)
}

1
crates/ui/src/dock_area/stack_panel.rs
View File

@@ -177,6 +177,7 @@ impl StackPanel {
fn new_resizable_panel(panel: Arc<dyn PanelView>, size: Option<Pixels>) -> ResizablePanel {
resizable_panel()
.content_view(panel.view())
.content_visible(move |cx| panel.visible(cx))
.when_some(size, |this, size| this.size(size))
}

319
crates/ui/src/dock_area/tab_panel.rs
View File

@@ -9,22 +9,24 @@ use crate::{
popup_menu::{PopupMenu, PopupMenuExt},
tab::{tab_bar::TabBar, Tab},
theme::{scale::ColorScaleStep, ActiveTheme},
v_flex, AxisExt, IconName, Placement, Selectable, Sizable,
v_flex, AxisExt, IconName, Placement, Selectable, Sizable, StyledExt,
};
use gpui::{
div, img, prelude::FluentBuilder, px, rems, App, AppContext, Context, Corner, DefiniteLength,
DismissEvent, DragMoveEvent, Empty, Entity, EventEmitter, FocusHandle, Focusable,
InteractiveElement as _, IntoElement, ObjectFit, ParentElement, Pixels, Render, ScrollHandle,
SharedString, StatefulInteractiveElement, Styled, StyledImage, WeakEntity, Window,
SharedString, StatefulInteractiveElement, StyleRefinement, Styled, StyledImage, WeakEntity,
Window,
};
use std::sync::Arc;
#[derive(Clone, Copy)]
#[derive(Clone)]
struct TabState {
closable: bool,
zoomable: bool,
draggable: bool,
droppable: bool,
active_panel: Option<Arc<dyn PanelView>>,
}
#[derive(Clone)]
@@ -84,7 +86,7 @@ impl Panel for TabPanel {
}
fn title(&self, cx: &App) -> gpui::AnyElement {
self.active_panel()
self.active_panel(cx)
.map(|panel| panel.title(cx))
.unwrap_or("Empty Tab".into_any_element())
}
@@ -94,19 +96,23 @@ impl Panel for TabPanel {
return false;
}
self.active_panel()
self.active_panel(cx)
.map(|panel| panel.closable(cx))
.unwrap_or(true)
}
fn zoomable(&self, cx: &App) -> bool {
self.active_panel()
self.active_panel(cx)
.map(|panel| panel.zoomable(cx))
.unwrap_or(false)
}
fn visible(&self, cx: &App) -> bool {
self.visible_panels(cx).next().is_some()
}
fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu {
if let Some(panel) = self.active_panel() {
if let Some(panel) = self.active_panel(cx) {
panel.popup_menu(menu, cx)
} else {
menu
@@ -114,7 +120,7 @@ impl Panel for TabPanel {
}
fn toolbar_buttons(&self, window: &Window, cx: &App) -> Vec<Button> {
if let Some(panel) = self.active_panel() {
if let Some(panel) = self.active_panel(cx) {
panel.toolbar_buttons(window, cx)
} else {
vec![]
@@ -147,15 +153,48 @@ impl TabPanel {
self.stack_panel = Some(view);
}
/// Return current active_panel View
pub fn active_panel(&self) -> Option<Arc<dyn PanelView>> {
self.panels.get(self.active_ix).cloned()
/// Return current active_panel view
pub fn active_panel(&self, cx: &App) -> Option<Arc<dyn PanelView>> {
let panel = self.panels.get(self.active_ix);
if let Some(panel) = panel {
if panel.visible(cx) {
Some(panel.clone())
} else {
// Return the first visible panel
self.visible_panels(cx).next()
}
} else {
None
}
}
fn set_active_ix(&mut self, ix: usize, window: &mut Window, cx: &mut Context<Self>) {
if ix == self.active_ix {
return;
}
let last_active_ix = self.active_ix;
self.active_ix = ix;
self.tab_bar_scroll_handle.scroll_to_item(ix);
self.focus_active_panel(window, cx);
// Sync the active state to all panels
cx.spawn(|view, cx| async move {
_ = cx.update(|cx| {
_ = view.update(cx, |view, cx| {
if let Some(last_active) = view.panels.get(last_active_ix) {
last_active.set_active(false, cx);
}
if let Some(active) = view.panels.get(view.active_ix) {
active.set_active(true, cx);
}
});
});
})
.detach();
cx.emit(PanelEvent::LayoutChanged);
cx.notify();
}
@@ -332,6 +371,17 @@ impl TabPanel {
self.panels.len() <= 1
}
/// Return all visible panels
fn visible_panels<'a>(&'a self, cx: &'a App) -> impl Iterator<Item = Arc<dyn PanelView>> + 'a {
self.panels.iter().filter_map(|panel| {
if panel.visible(cx) {
Some(panel.clone())
} else {
None
}
})
}
/// Return true if the tab panel is draggable.
///
/// E.g. if the parent and self only have one panel, it is not draggable.
@@ -348,7 +398,7 @@ impl TabPanel {
fn render_toolbar(
&self,
state: TabState,
state: &TabState,
window: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
@@ -382,15 +432,20 @@ impl TabPanel {
.icon(IconName::Ellipsis)
.xsmall()
.ghost()
.popup_menu(move |this, _window, cx| {
build_popup_menu(this, cx)
.when(state.zoomable, |this| {
let name = if is_zoomed { "Zoom Out" } else { "Zoom In" };
this.separator().menu(name, Box::new(ToggleZoom))
})
.when(state.closable, |this| {
this.separator().menu("Close", Box::new(ClosePanel))
})
.popup_menu({
let zoomable = state.zoomable;
let closable = state.closable;
move |this, _window, cx| {
build_popup_menu(this, cx)
.when(zoomable, |this| {
let name = if is_zoomed { "Zoom Out" } else { "Zoom In" };
this.separator().menu(name, Box::new(ToggleZoom))
})
.when(closable, |this| {
this.separator().menu("Close", Box::new(ClosePanel))
})
}
})
.anchor(Corner::TopRight),
)
@@ -481,7 +536,7 @@ impl TabPanel {
fn render_title_bar(
&self,
state: TabState,
state: &TabState,
window: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
@@ -499,6 +554,10 @@ impl TabPanel {
if self.panels.len() == 1 && panel_style == PanelStyle::Default {
let panel = self.panels.first().unwrap();
if !panel.visible(cx) {
return div().into_any_element();
}
return h_flex()
.justify_between()
.items_center()
@@ -601,47 +660,55 @@ impl TabPanel {
)
},
)
.children(self.panels.iter().enumerate().map(|(ix, panel)| {
let mut active = ix == self.active_ix;
.children(self.panels.iter().enumerate().filter_map(|(ix, panel)| {
let mut active = state.active_panel.as_ref() == Some(panel);
let disabled = self.is_collapsed;
if !panel.visible(cx) {
return None;
}
// Always not show active tab style, if the panel is collapsed
if self.is_collapsed {
active = false;
}
Tab::new(("tab", ix), panel.title(cx), panel.panel_facepile(cx))
.py_2()
.selected(active)
.disabled(disabled)
.when(!disabled, |this| {
this.on_click(cx.listener(move |view, _, window, cx| {
view.set_active_ix(ix, window, cx);
}))
.when(state.draggable, |this| {
this.on_drag(
DragPanel::new(panel.clone(), view.clone()),
|drag, _, _, cx| {
cx.stop_propagation();
cx.new(|_| drag.clone())
},
)
})
.when(state.droppable, |this| {
this.drag_over::<DragPanel>(|this, _, _, cx| {
this.rounded_l_none()
.border_l_2()
.border_r_0()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
Some(
Tab::new(("tab", ix), panel.title(cx), panel.panel_facepile(cx))
.py_2()
.selected(active)
.disabled(disabled)
.when(!disabled, |this| {
this.on_click(cx.listener(move |view, _, window, cx| {
view.set_active_ix(ix, window, cx);
}))
.when(state.draggable, |this| {
this.on_drag(
DragPanel::new(panel.clone(), view.clone()),
|drag, _, _, cx| {
cx.stop_propagation();
cx.new(|_| drag.clone())
},
)
})
.on_drop(cx.listener(
move |this, drag: &DragPanel, window, cx| {
this.will_split_placement = None;
this.on_drop(drag, Some(ix), true, window, cx)
},
))
})
})
.when(state.droppable, |this| {
this.drag_over::<DragPanel>(|this, _, _, cx| {
this.rounded_l_none()
.border_l_2()
.border_r_0()
.border_color(
cx.theme().base.step(cx, ColorScaleStep::FIVE),
)
})
.on_drop(cx.listener(
move |this, drag: &DragPanel, window, cx| {
this.will_split_placement = None;
this.on_drop(drag, Some(ix), true, window, cx)
},
))
})
}),
)
}))
.child(
// empty space to allow move to last tab right
@@ -686,7 +753,7 @@ impl TabPanel {
fn render_active_panel(
&self,
state: TabState,
state: &TabState,
_window: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
@@ -694,73 +761,68 @@ impl TabPanel {
return Empty {}.into_any_element();
}
self.active_panel()
.map(|panel| {
v_flex()
.id("tab-content")
.group("")
let Some(active_panel) = state.active_panel.as_ref() else {
return Empty {}.into_any_element();
};
v_flex()
.id("tab-content")
.group("")
.overflow_hidden()
.flex_1()
.p_1()
.child(
div()
.size_full()
.rounded_lg()
.shadow_sm()
.when(cx.theme().appearance.is_dark(), |this| this.shadow_lg())
.bg(cx.theme().background)
.overflow_hidden()
.flex_1()
.p_1()
.child(
active_panel
.view()
.cached(StyleRefinement::default().v_flex().size_full()),
),
)
.when(state.droppable, |this| {
this.on_drag_move(cx.listener(Self::on_panel_drag_move))
.child(
div()
.size_full()
.rounded_lg()
.shadow_sm()
.when(cx.theme().appearance.is_dark(), |this| this.shadow_lg())
.bg(cx.theme().background)
.overflow_hidden()
.child(panel.view()),
)
.when(state.droppable, |this| {
this.on_drag_move(cx.listener(Self::on_panel_drag_move))
.invisible()
.absolute()
.p_1()
.child(
div()
.invisible()
.absolute()
.p_1()
.child(
div()
.rounded_lg()
.border_1()
.border_color(
cx.theme().accent.step(cx, ColorScaleStep::FOUR),
)
.bg(cx
.theme()
.accent
.step_alpha(cx, ColorScaleStep::THREE))
.size_full(),
)
.map(|this| match self.will_split_placement {
Some(placement) => {
let size = DefiniteLength::Fraction(0.35);
match placement {
Placement::Left => {
this.left_0().top_0().bottom_0().w(size)
}
Placement::Right => {
this.right_0().top_0().bottom_0().w(size)
}
Placement::Top => {
this.top_0().left_0().right_0().h(size)
}
Placement::Bottom => {
this.bottom_0().left_0().right_0().h(size)
}
}
}
None => this.top_0().left_0().size_full(),
})
.group_drag_over::<DragPanel>("", |this| this.visible())
.on_drop(cx.listener(|this, drag: &DragPanel, window, cx| {
this.on_drop(drag, None, true, window, cx)
})),
.rounded_lg()
.border_1()
.border_color(cx.theme().accent.step(cx, ColorScaleStep::FOUR))
.bg(cx.theme().accent.step_alpha(cx, ColorScaleStep::THREE))
.size_full(),
)
})
.into_any_element()
.map(|this| match self.will_split_placement {
Some(placement) => {
let size = DefiniteLength::Fraction(0.35);
match placement {
Placement::Left => this.left_0().top_0().bottom_0().w(size),
Placement::Right => {
this.right_0().top_0().bottom_0().w(size)
}
Placement::Top => this.top_0().left_0().right_0().h(size),
Placement::Bottom => {
this.bottom_0().left_0().right_0().h(size)
}
}
}
None => this.top_0().left_0().size_full(),
})
.group_drag_over::<DragPanel>("", |this| this.visible())
.on_drop(cx.listener(|this, drag: &DragPanel, window, cx| {
this.on_drop(drag, None, true, window, cx)
})),
)
})
.unwrap_or(Empty {}.into_any_element())
.into_any_element()
}
/// Calculate the split direction based on the current mouse position
@@ -958,7 +1020,7 @@ impl TabPanel {
}
fn focus_active_panel(&self, window: &mut Window, cx: &mut Context<Self>) {
if let Some(active_panel) = self.active_panel() {
if let Some(active_panel) = self.active_panel(cx) {
active_panel.focus_handle(cx).focus(window);
}
}
@@ -980,6 +1042,18 @@ impl TabPanel {
}
self.is_zoomed = !self.is_zoomed;
cx.spawn(|view, cx| {
let is_zoomed = self.is_zoomed;
async move {
_ = cx.update(|cx| {
_ = view.update(cx, |view, cx| {
view.set_zoomed(is_zoomed, cx);
});
});
}
})
.detach();
}
fn on_action_close_panel(
@@ -988,7 +1062,7 @@ impl TabPanel {
window: &mut Window,
cx: &mut Context<Self>,
) {
if let Some(panel) = self.active_panel() {
if let Some(panel) = self.active_panel(cx) {
self.remove_panel(panel, window, cx);
}
}
@@ -996,7 +1070,7 @@ impl TabPanel {
impl Focusable for TabPanel {
fn focus_handle(&self, cx: &App) -> gpui::FocusHandle {
if let Some(active_panel) = self.active_panel() {
if let Some(active_panel) = self.active_panel(cx) {
active_panel.focus_handle(cx)
} else {
self.focus_handle.clone()
@@ -1011,12 +1085,13 @@ impl EventEmitter<PanelEvent> for TabPanel {}
impl Render for TabPanel {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl gpui::IntoElement {
let focus_handle = self.focus_handle(cx);
let active_panel = self.active_panel(cx);
let mut state = TabState {
closable: self.closable(cx),
draggable: self.draggable(cx),
droppable: self.droppable(cx),
zoomable: self.zoomable(cx),
active_panel,
};
if !state.draggable {
@@ -1030,7 +1105,7 @@ impl Render for TabPanel {
.on_action(cx.listener(Self::on_action_close_panel))
.size_full()
.overflow_hidden()
.child(self.render_title_bar(state, window, cx))
.child(self.render_active_panel(state, window, cx))
.child(self.render_title_bar(&state, window, cx))
.child(self.render_active_panel(&state, window, cx))
}
}

9
crates/ui/src/input/input.rs
View File

@@ -1524,6 +1524,15 @@ impl EntityInputHandler for TextInput {
bounds.origin + end_origin.unwrap_or_default(),
))
}
fn character_index_for_point(
&mut self,
_point: gpui::Point<Pixels>,
_window: &mut Window,
_cx: &mut Context<Self>,
) -> Option<usize> {
None
}
}
impl Focusable for TextInput {

29
crates/ui/src/resizable/panel.rs
View File

@@ -304,6 +304,7 @@ impl Render for ResizablePanelGroup {
}
type ContentBuilder = Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyElement>>;
type ContentVisible = Rc<Box<dyn Fn(&App) -> bool>>;
pub struct ResizablePanel {
group: Option<WeakEntity<ResizablePanelGroup>>,
@@ -316,6 +317,7 @@ pub struct ResizablePanel {
axis: Axis,
content_builder: ContentBuilder,
content_view: Option<AnyView>,
content_visible: ContentVisible,
/// The bounds of the resizable panel, when render the bounds will be updated.
bounds: Bounds<Pixels>,
resize_handle: Option<AnyElement>,
@@ -331,6 +333,7 @@ impl ResizablePanel {
axis: Axis::Horizontal,
content_builder: None,
content_view: None,
content_visible: Rc::new(Box::new(|_| true)),
bounds: Bounds::default(),
resize_handle: None,
}
@@ -344,6 +347,14 @@ impl ResizablePanel {
self
}
pub(crate) fn content_visible<F>(mut self, content_visible: F) -> Self
where
F: Fn(&App) -> bool + 'static,
{
self.content_visible = Rc::new(Box::new(content_visible));
self
}
pub fn content_view(mut self, content: AnyView) -> Self {
self.content_view = Some(content);
self
@@ -364,16 +375,14 @@ impl ResizablePanel {
) {
let new_size = bounds.size.along(self.axis);
self.bounds = bounds;
self.size_ratio = None;
self.size = Some(new_size);
let panel_view = cx.entity().clone();
let entity_id = cx.entity_id();
if let Some(group) = self.group.as_ref() {
_ = group.update(cx, |view, _| {
if let Some(ix) = view
.panels
.iter()
.position(|v| v.entity_id() == panel_view.entity_id())
{
if let Some(ix) = view.panels.iter().position(|v| v.entity_id() == entity_id) {
view.sizes[ix] = new_size;
}
});
@@ -386,6 +395,14 @@ impl FluentBuilder for ResizablePanel {}
impl Render for ResizablePanel {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
if !(self.content_visible)(cx) {
// To keep size as initial size, to make sure the size will not be changed.
self.initial_size = self.size;
self.size = None;
return div();
}
let view = cx.entity().clone();
let total_size = self
.group

360
crates/ui/src/scroll/scrollbar.rs
View File

@@ -589,198 +589,206 @@ impl Element for Scrollbar {
let is_visible = self.state.get().is_scrollbar_visible();
let is_hover_to_show = cx.theme().scrollbar_show.is_hover();
for state in prepaint.states.iter() {
let axis = state.axis;
let radius = state.radius;
let bounds = state.bounds;
let thumb_bounds = state.thumb_bounds;
let scroll_area_size = state.scroll_size;
let container_size = state.container_size;
let thumb_size = state.thumb_size;
let margin_end = state.margin_end;
let is_vertical = axis.is_vertical();
window.with_content_mask(
Some(ContentMask {
bounds: hitbox_bounds,
}),
|window| {
for state in prepaint.states.iter() {
let axis = state.axis;
let radius = state.radius;
let bounds = state.bounds;
let thumb_bounds = state.thumb_bounds;
let scroll_area_size = state.scroll_size;
let container_size = state.container_size;
let thumb_size = state.thumb_size;
let margin_end = state.margin_end;
let is_vertical = axis.is_vertical();
window.set_cursor_style(CursorStyle::default(), &state.bar_hitbox);
window.set_cursor_style(CursorStyle::default(), &state.bar_hitbox);
window.paint_layer(hitbox_bounds, |cx| {
cx.paint_quad(fill(state.bounds, state.bg));
window.paint_layer(hitbox_bounds, |cx| {
cx.paint_quad(fill(state.bounds, state.bg));
cx.paint_quad(PaintQuad {
bounds,
corner_radii: (0.).into(),
background: gpui::transparent_black().into(),
border_widths: if is_vertical {
Edges {
top: px(0.),
right: px(0.),
bottom: px(0.),
left: BORDER_WIDTH,
}
} else {
Edges {
top: BORDER_WIDTH,
right: px(0.),
bottom: px(0.),
left: px(0.),
}
},
border_color: state.border,
});
cx.paint_quad(fill(state.thumb_fill_bounds, state.thumb_bg).corner_radii(radius));
});
window.on_mouse_event({
let state = self.state.clone();
let view_id = self.view_id;
let scroll_handle = self.scroll_handle.clone();
move |event: &ScrollWheelEvent, phase, _, cx| {
if phase.bubble()
&& hitbox_bounds.contains(&event.position)
&& scroll_handle.offset() != state.get().last_scroll_offset
{
state.set(
state
.get()
.with_last_scroll(scroll_handle.offset(), Some(Instant::now())),
);
cx.notify(view_id);
}
}
});
let safe_range = (-scroll_area_size + container_size)..px(0.);
if is_hover_to_show || is_visible {
window.on_mouse_event({
let state = self.state.clone();
let view_id = self.view_id;
let scroll_handle = self.scroll_handle.clone();
move |event: &MouseDownEvent, phase, _, cx| {
if phase.bubble() && bounds.contains(&event.position) {
cx.stop_propagation();
if thumb_bounds.contains(&event.position) {
// click on the thumb bar, set the drag position
let pos = event.position - thumb_bounds.origin;
state.set(state.get().with_drag_pos(axis, pos));
cx.notify(view_id);
cx.paint_quad(PaintQuad {
bounds,
corner_radii: (0.).into(),
background: gpui::transparent_black().into(),
border_widths: if is_vertical {
Edges {
top: px(0.),
right: px(0.),
bottom: px(0.),
left: BORDER_WIDTH,
}
} else {
// click on the scrollbar, jump to the position
// Set the thumb bar center to the click position
let offset = scroll_handle.offset();
let percentage = if is_vertical {
(event.position.y - thumb_size / 2. - bounds.origin.y)
Edges {
top: BORDER_WIDTH,
right: px(0.),
bottom: px(0.),
left: px(0.),
}
},
border_color: state.border,
});
cx.paint_quad(
fill(state.thumb_fill_bounds, state.thumb_bg).corner_radii(radius),
);
});
window.on_mouse_event({
let state = self.state.clone();
let view_id = self.view_id;
let scroll_handle = self.scroll_handle.clone();
move |event: &ScrollWheelEvent, phase, _, cx| {
if phase.bubble()
&& hitbox_bounds.contains(&event.position)
&& scroll_handle.offset() != state.get().last_scroll_offset
{
state.set(state.get().with_last_scroll(
scroll_handle.offset(),
Some(Instant::now()),
));
cx.notify(view_id);
}
}
});
let safe_range = (-scroll_area_size + container_size)..px(0.);
if is_hover_to_show || is_visible {
window.on_mouse_event({
let state = self.state.clone();
let view_id = self.view_id;
let scroll_handle = self.scroll_handle.clone();
move |event: &MouseDownEvent, phase, _, cx| {
if phase.bubble() && bounds.contains(&event.position) {
cx.stop_propagation();
if thumb_bounds.contains(&event.position) {
// click on the thumb bar, set the drag position
let pos = event.position - thumb_bounds.origin;
state.set(state.get().with_drag_pos(axis, pos));
cx.notify(view_id);
} else {
// click on the scrollbar, jump to the position
// Set the thumb bar center to the click position
let offset = scroll_handle.offset();
let percentage = if is_vertical {
(event.position.y - thumb_size / 2. - bounds.origin.y)
/ (bounds.size.height - thumb_size)
} else {
(event.position.x - thumb_size / 2. - bounds.origin.x)
/ (bounds.size.width - thumb_size)
}
.min(1.);
if is_vertical {
scroll_handle.set_offset(point(
offset.x,
(-scroll_area_size * percentage)
.clamp(safe_range.start, safe_range.end),
));
} else {
scroll_handle.set_offset(point(
(-scroll_area_size * percentage)
.clamp(safe_range.start, safe_range.end),
offset.y,
));
}
}
}
}
});
}
window.on_mouse_event({
let scroll_handle = self.scroll_handle.clone();
let state = self.state.clone();
let view_id = self.view_id;
move |event: &MouseMoveEvent, _, _, cx| {
// Update hovered state for scrollbar
if bounds.contains(&event.position) {
if state.get().hovered_axis != Some(axis) {
state.set(state.get().with_hovered(Some(axis)));
cx.notify(view_id);
}
} else if state.get().hovered_axis == Some(axis)
&& state.get().hovered_axis.is_some()
{
state.set(state.get().with_hovered(None));
cx.notify(view_id);
}
// Update hovered state for scrollbar thumb
if thumb_bounds.contains(&event.position) {
if state.get().hovered_on_thumb != Some(axis) {
state.set(state.get().with_hovered_on_thumb(Some(axis)));
cx.notify(view_id);
}
} else if state.get().hovered_on_thumb == Some(axis) {
state.set(state.get().with_hovered_on_thumb(None));
cx.notify(view_id);
}
// Move thumb position on dragging
if state.get().dragged_axis == Some(axis) && event.dragging() {
// drag_pos is the position of the mouse down event
// We need to keep the thumb bar still at the origin down position
let drag_pos = state.get().drag_pos;
let percentage = (if is_vertical {
(event.position.y - drag_pos.y - bounds.origin.y)
/ (bounds.size.height - thumb_size)
} else {
(event.position.x - thumb_size / 2. - bounds.origin.x)
/ (bounds.size.width - thumb_size)
}
.min(1.);
(event.position.x - drag_pos.x - bounds.origin.x)
/ (bounds.size.width - thumb_size - margin_end)
})
.clamp(0., 1.);
if is_vertical {
scroll_handle.set_offset(point(
offset.x,
(-scroll_area_size * percentage)
let offset = if is_vertical {
point(
scroll_handle.offset().x,
(-(scroll_area_size - container_size) * percentage)
.clamp(safe_range.start, safe_range.end),
));
)
} else {
scroll_handle.set_offset(point(
(-scroll_area_size * percentage)
point(
(-(scroll_area_size - container_size) * percentage)
.clamp(safe_range.start, safe_range.end),
offset.y,
));
scroll_handle.offset().y,
)
};
if (scroll_handle.offset().y - offset.y).abs() > px(1.)
|| (scroll_handle.offset().x - offset.x).abs() > px(1.)
{
scroll_handle.set_offset(offset);
cx.notify(view_id);
}
}
}
}
});
}
});
window.on_mouse_event({
let scroll_handle = self.scroll_handle.clone();
let state = self.state.clone();
let view_id = self.view_id;
window.on_mouse_event({
let view_id = self.view_id;
let state = self.state.clone();
move |event: &MouseMoveEvent, _, _, cx| {
// Update hovered state for scrollbar
if bounds.contains(&event.position) {
if state.get().hovered_axis != Some(axis) {
state.set(state.get().with_hovered(Some(axis)));
cx.notify(view_id);
move |_event: &MouseUpEvent, phase, _, cx| {
if phase.bubble() {
state.set(state.get().with_unset_drag_pos());
cx.notify(view_id);
}
}
} else if state.get().hovered_axis == Some(axis)
&& state.get().hovered_axis.is_some()
{
state.set(state.get().with_hovered(None));
cx.notify(view_id);
}
// Update hovered state for scrollbar thumb
if thumb_bounds.contains(&event.position) {
if state.get().hovered_on_thumb != Some(axis) {
state.set(state.get().with_hovered_on_thumb(Some(axis)));
cx.notify(view_id);
}
} else if state.get().hovered_on_thumb == Some(axis) {
state.set(state.get().with_hovered_on_thumb(None));
cx.notify(view_id);
}
// Move thumb position on dragging
if state.get().dragged_axis == Some(axis) && event.dragging() {
// drag_pos is the position of the mouse down event
// We need to keep the thumb bar still at the origin down position
let drag_pos = state.get().drag_pos;
let percentage = (if is_vertical {
(event.position.y - drag_pos.y - bounds.origin.y)
/ (bounds.size.height - thumb_size)
} else {
(event.position.x - drag_pos.x - bounds.origin.x)
/ (bounds.size.width - thumb_size - margin_end)
})
.clamp(0., 1.);
let offset = if is_vertical {
point(
scroll_handle.offset().x,
(-(scroll_area_size - container_size) * percentage)
.clamp(safe_range.start, safe_range.end),
)
} else {
point(
(-(scroll_area_size - container_size) * percentage)
.clamp(safe_range.start, safe_range.end),
scroll_handle.offset().y,
)
};
if (scroll_handle.offset().y - offset.y).abs() > px(1.)
|| (scroll_handle.offset().x - offset.x).abs() > px(1.)
{
scroll_handle.set_offset(offset);
cx.notify(view_id);
}
}
});
}
});
window.on_mouse_event({
let view_id = self.view_id;
let state = self.state.clone();
move |_event: &MouseUpEvent, phase, _, cx| {
if phase.bubble() {
state.set(state.get().with_unset_drag_pos());
cx.notify(view_id);
}
}
});
}
},
);
}
}