dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename ScrollableHandleElement to ScrollableMask.

Browse source
This commit is contained in:
Jason Lee 2024-07-06 22:31:22 +08:00
parent ac789b2379
commit 3c52d5f428
3 changed files with 39 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
crates/ui/Cargo.toml
View file

@ -1,7 +1,12 @@
[package] [package]
name = "ui" name = "ui"
description = "UI components for the GPUI"
version = "0.1.0" version = "0.1.0"
edition = "2021" edition = "2021"
publish = false
[lib]
doctest = false
[dependencies] [dependencies]
gpui = { git = "https://github.com/zed-industries/zed.git" } gpui = { git = "https://github.com/zed-industries/zed.git" }

57
crates/ui/src/scroll/scrollable.rs
View file

@ -1,45 +1,51 @@
use gpui::{ use gpui::{
px, relative, AnyView, Bounds, ContentMask, Corners, Edges, Element, Hitbox, Hsla, IntoElement, px, relative, AnyView, Bounds, ContentMask, Corners, Edges, Element, ElementId,
IsZero as _, PaintQuad, ScrollHandle, ScrollWheelEvent, Style, WindowContext, GlobalElementId, Hitbox, Hsla, IntoElement, IsZero as _, LayoutId, PaintQuad, Pixels, Point,
Position, ScrollHandle, ScrollWheelEvent, Style, WindowContext,
}; };
/// The scroll axis direction.
#[allow(dead_code)] #[allow(dead_code)]
#[derive(Debug, Clone, Copy, PartialEq, Eq)] #[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum ScrollAxis { pub enum ScrollAxis {
/// Horizontal scroll.
Horizontal, Horizontal,
/// Vertical scroll.
Vertical, Vertical,
} }
/// Make a scrollable element to cover the parent view with the mouse wheel event listening. /// Make a scrollable mask element to cover the parent view with the mouse wheel event listening.
/// ///
/// When the mouse wheel is scrolled, will move the `scroll_handle` to make parent view scrolling with the `axis` direction. /// When the mouse wheel is scrolled, will move the `scroll_handle` scrolling with the `axis` direction.
/// You can use this `scroll_handle` to control what you want to scroll.
/// This is only can handle once axis scrolling. /// This is only can handle once axis scrolling.
pub struct ScrollableHandleElement { pub struct ScrollableMask {
view: AnyView, view: AnyView,
axis: ScrollAxis, axis: ScrollAxis,
scroll_handle: ScrollHandle, scroll_handle: ScrollHandle,
debug: Option<Hsla>, debug: Option<Hsla>,
} }
impl ScrollableHandleElement { impl ScrollableMask {
/// Create a new scrollable mask element.
pub fn new(view: impl Into<AnyView>, axis: ScrollAxis, scroll_handle: &ScrollHandle) -> Self { pub fn new(view: impl Into<AnyView>, axis: ScrollAxis, scroll_handle: &ScrollHandle) -> Self {
Self { Self {
view: view.into(), view: view.into(),
debug: None,
axis,
scroll_handle: scroll_handle.clone(), scroll_handle: scroll_handle.clone(),
axis,
debug: None,
} }
} }
/// Enable the debug mode to show the scrollable handle bounds. /// Enable the debug border, to show the mask bounds.
#[allow(dead_code)] #[allow(dead_code)]
pub fn debug_yellow(mut self) -> Self { pub fn debug(mut self) -> Self {
self.debug = Some(gpui::yellow()); self.debug = Some(gpui::yellow());
self self
} }
} }
impl IntoElement for ScrollableHandleElement { impl IntoElement for ScrollableMask {
type Element = Self; type Element = Self;
fn into_element(self) -> Self::Element { fn into_element(self) -> Self::Element {
@ -47,22 +53,22 @@ impl IntoElement for ScrollableHandleElement {
} }
} }
impl Element for ScrollableHandleElement { impl Element for ScrollableMask {
type RequestLayoutState = (); type RequestLayoutState = ();
type PrepaintState = Hitbox; type PrepaintState = Hitbox;
fn id(&self) -> Option<gpui::ElementId> { fn id(&self) -> Option<ElementId> {
None None
} }
fn request_layout( fn request_layout(
&mut self, &mut self,
_: Option<&gpui::GlobalElementId>, _: Option<&GlobalElementId>,
cx: &mut WindowContext, cx: &mut WindowContext,
) -> (gpui::LayoutId, Self::RequestLayoutState) { ) -> (LayoutId, Self::RequestLayoutState) {
let mut style = Style::default(); let mut style = Style::default();
// Set the layout style relative to the table view to get same size. // Set the layout style relative to the table view to get same size.
style.position = gpui::Position::Absolute; style.position = Position::Absolute;
style.flex_grow = 1.0; style.flex_grow = 1.0;
style.flex_shrink = 1.0; style.flex_shrink = 1.0;
style.size.width = relative(1.).into(); style.size.width = relative(1.).into();
@ -73,14 +79,14 @@ impl Element for ScrollableHandleElement {
fn prepaint( fn prepaint(
&mut self, &mut self,
_: Option<&gpui::GlobalElementId>, _: Option<&GlobalElementId>,
bounds: gpui::Bounds<gpui::Pixels>, bounds: Bounds<Pixels>,
_: &mut Self::RequestLayoutState, _: &mut Self::RequestLayoutState,
cx: &mut WindowContext, cx: &mut WindowContext,
) -> Self::PrepaintState { ) -> Self::PrepaintState {
// Move y to bounds height to cover the table. // Move y to bounds height to cover the parent view.
let cover_bounds = Bounds { let cover_bounds = Bounds {
origin: gpui::Point { origin: Point {
x: bounds.origin.x, x: bounds.origin.x,
y: bounds.origin.y - bounds.size.height, y: bounds.origin.y - bounds.size.height,
}, },
@ -92,8 +98,8 @@ impl Element for ScrollableHandleElement {
fn paint( fn paint(
&mut self, &mut self,
_: Option<&gpui::GlobalElementId>, _: Option<&GlobalElementId>,
_: gpui::Bounds<gpui::Pixels>, _: Bounds<Pixels>,
_: &mut Self::RequestLayoutState, _: &mut Self::RequestLayoutState,
hitbox: &mut Self::PrepaintState, hitbox: &mut Self::PrepaintState,
cx: &mut WindowContext, cx: &mut WindowContext,
@ -115,9 +121,9 @@ impl Element for ScrollableHandleElement {
cx.on_mouse_event({ cx.on_mouse_event({
let mouse_position = cx.mouse_position(); let mouse_position = cx.mouse_position();
let scroll_handle = self.scroll_handle.clone(); let scroll_handle = self.scroll_handle.clone();
let old_offset = scroll_handle.offset();
let view_id = self.view.entity_id(); let view_id = self.view.entity_id();
let is_horizontal = self.axis == ScrollAxis::Horizontal; let is_horizontal = self.axis == ScrollAxis::Horizontal;
// let callback = self.on_scroll_offset_changed.as_mut();
move |event: &ScrollWheelEvent, _, cx| { move |event: &ScrollWheelEvent, _, cx| {
if bounds.contains(&mouse_position) { if bounds.contains(&mouse_position) {
@ -128,8 +134,6 @@ impl Element for ScrollableHandleElement {
let mut offset = scroll_handle.offset(); let mut offset = scroll_handle.offset();
offset.x += delta.x; offset.x += delta.x;
scroll_handle.set_offset(offset); scroll_handle.set_offset(offset);
cx.notify(view_id);
cx.stop_propagation();
} }
if !is_horizontal && !delta.y.is_zero() { if !is_horizontal && !delta.y.is_zero() {
@ -137,6 +141,9 @@ impl Element for ScrollableHandleElement {
let mut offset = scroll_handle.offset(); let mut offset = scroll_handle.offset();
offset.y += delta.y; offset.y += delta.y;
scroll_handle.set_offset(offset); scroll_handle.set_offset(offset);
}
if old_offset != scroll_handle.offset() {
cx.notify(view_id); cx.notify(view_id);
cx.stop_propagation(); cx.stop_propagation();
} }

4
crates/ui/src/table.rs
View file

@ -2,7 +2,7 @@ use std::{cell::Cell, rc::Rc, time::Duration};
use crate::{ use crate::{
h_flex, h_flex,
scroll::{ScrollAxis, ScrollableHandleElement}, scroll::{ScrollAxis, ScrollableMask},
scrollbar::Scrollbar, scrollbar::Scrollbar,
theme::{ActiveTheme, Colorize}, theme::{ActiveTheme, Colorize},
v_flex, v_flex,
@ -447,7 +447,7 @@ where
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().card) .bg(cx.theme().card)
.child(inner_table) .child(inner_table)
.child(ScrollableHandleElement::new( .child(ScrollableMask::new(
cx.view().clone(), cx.view().clone(),
ScrollAxis::Horizontal, ScrollAxis::Horizontal,
&horizontal_scroll_handle, &horizontal_scroll_handle,