Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move application of content mask and z-index into Interactivity::paint

Browse source 
This allows the content mask to correctly apply to bounds used in event handlers,
which prevents content under opaque borders from being hovered in overflow hidden
containers.

Co-Authored-By: Antonio <antonio@zed.dev>
Co-Authored-By: Max Brunsfeld <max@zed.dev>
This commit is contained in:
Nathan Sobo 2023-12-20 11:43:45 -07:00
parent fffb30ac6d
commit 15f16f08d9
4 changed files with 643 additions and 604 deletions
Download patch file Download diff file Expand all files Collapse all files

101
crates/gpui2/src/elements/div.rs
View file

@ -826,18 +826,12 @@ impl Element for Div {
content_size,
&mut element_state.interactive_state,
cx,
|style, scroll_offset, cx| {
style.paint(bounds, cx, |cx| {
cx.with_text_style(style.text_style().cloned(), |cx| {
cx.with_content_mask(style.overflow_mask(bounds), |cx| {
|_style, scroll_offset, cx| {
cx.with_element_offset(scroll_offset, |cx| {
for child in &mut self.children {
child.paint(cx);
}
})
})
})
})
},
);
}
@ -965,7 +959,7 @@ impl Interactivity {
content_size: Size<Pixels>,
element_state: &mut InteractiveElementState,
cx: &mut WindowContext,
f: impl FnOnce(Style, Point<Pixels>, &mut WindowContext),
f: impl FnOnce(&Style, Point<Pixels>, &mut WindowContext),
) {
let style = self.compute_style(Some(bounds), element_state, cx);
@ -975,9 +969,14 @@ impl Interactivity {
let z_index = style.z_index.unwrap_or(0);
cx.with_z_index(z_index, |cx| {
style.paint(bounds, cx, |cx| {
cx.with_text_style(style.text_style().cloned(), |cx| {
cx.with_content_mask(style.overflow_mask(bounds, cx.rem_size()), |cx| {
#[cfg(debug_assertions)]
if self.element_id.is_some()
&& (style.debug || style.debug_below || cx.has_global::<crate::DebugBelow>())
&& (style.debug
|| style.debug_below
|| cx.has_global::<crate::DebugBelow>())
&& bounds.contains(&cx.mouse_position())
{
const FONT_SIZE: crate::Pixels = crate::Pixels(10.);
@ -1020,19 +1019,23 @@ impl Interactivity {
});
let hovered = bounds.contains(&cx.mouse_position());
cx.on_mouse_event(move |event: &MouseMoveEvent, phase, cx| {
cx.on_mouse_event(
move |event: &MouseMoveEvent, phase, cx| {
if phase == DispatchPhase::Capture {
if bounds.contains(&event.position) != hovered {
cx.notify();
}
}
});
},
);
cx.on_mouse_event({
let location = self.location.clone().unwrap();
let text_bounds = text_bounds.clone();
move |e: &crate::MouseDownEvent, phase, cx| {
if text_bounds.contains(&e.position) && phase.capture() {
if text_bounds.contains(&e.position)
&& phase.capture()
{
cx.stop_propagation();
let Ok(dir) = std::env::current_dir() else {
return;
@ -1061,7 +1064,10 @@ impl Interactivity {
cx.paint_quad(crate::outline(
crate::Bounds {
origin: bounds.origin
+ crate::point(crate::px(0.), FONT_SIZE - px(2.)),
+ crate::point(
crate::px(0.),
FONT_SIZE - px(2.),
),
size: crate::Size {
width: text_bounds.size.width,
height: crate::px(1.),
@ -1087,10 +1093,9 @@ impl Interactivity {
}
if self.block_mouse
|| style
.background
.as_ref()
.is_some_and(|fill| fill.color().is_some_and(|color| !color.is_transparent()))
|| style.background.as_ref().is_some_and(|fill| {
fill.color().is_some_and(|color| !color.is_transparent())
})
{
cx.add_opaque_layer(bounds)
}
@ -1197,15 +1202,15 @@ impl Interactivity {
move |event: &MouseUpEvent, phase, cx| {
if let Some(drag) = &cx.active_drag {
if phase == DispatchPhase::Bubble
&& interactive_bounds.drag_target_contains(&event.position, cx)
&& interactive_bounds
.drag_target_contains(&event.position, cx)
{
let drag_state_type = drag.value.as_ref().type_id();
for (drop_state_type, listener) in &drop_listeners {
if *drop_state_type == drag_state_type {
let drag = cx
.active_drag
.take()
.expect("checked for type drag state type above");
let drag = cx.active_drag.take().expect(
"checked for type drag state type above",
);
listener(drag.value.as_ref(), cx);
cx.notify();
@ -1256,8 +1261,11 @@ impl Interactivity {
&& (event.position - mouse_down.position).magnitude()
> DRAG_THRESHOLD
{
if let Some((drag_value, drag_listener)) = drag_listener.take() {
*clicked_state.borrow_mut() = ElementClickedState::default();
if let Some((drag_value, drag_listener)) =
drag_listener.take()
{
*clicked_state.borrow_mut() =
ElementClickedState::default();
let cursor_offset = event.position - bounds.origin;
let drag = (drag_listener)(drag_value.as_ref(), cx);
cx.active_drag = Some(AnyDrag {
@ -1282,7 +1290,8 @@ impl Interactivity {
// so that it happens even if another event handler stops
// propagation.
DispatchPhase::Capture => {
let mut pending_mouse_down = pending_mouse_down.borrow_mut();
let mut pending_mouse_down =
pending_mouse_down.borrow_mut();
if pending_mouse_down.is_some() {
captured_mouse_down = pending_mouse_down.take();
cx.notify();
@ -1291,7 +1300,9 @@ impl Interactivity {
// Fire click handlers during the bubble phase.
DispatchPhase::Bubble => {
if let Some(mouse_down) = captured_mouse_down.take() {
if interactive_bounds.visibly_contains(&event.position, cx) {
if interactive_bounds
.visibly_contains(&event.position, cx)
{
let mouse_click = ClickEvent {
down: mouse_down,
up: event.clone(),
@ -1321,7 +1332,8 @@ impl Interactivity {
if phase != DispatchPhase::Bubble {
return;
}
let is_hovered = interactive_bounds.visibly_contains(&event.position, cx)
let is_hovered = interactive_bounds
.visibly_contains(&event.position, cx)
&& !cx.has_active_drag()
&& has_mouse_down.borrow().is_none();
let mut was_hovered = was_hovered.borrow_mut();
@ -1347,7 +1359,8 @@ impl Interactivity {
let interactive_bounds = interactive_bounds.clone();
cx.on_mouse_event(move |event: &MouseMoveEvent, phase, cx| {
let is_hovered = interactive_bounds.visibly_contains(&event.position, cx)
let is_hovered = interactive_bounds
.visibly_contains(&event.position, cx)
&& pending_mouse_down.borrow().is_none();
if !is_hovered {
active_tooltip.borrow_mut().take();
@ -1366,13 +1379,15 @@ impl Interactivity {
move |mut cx| async move {
cx.background_executor().timer(TOOLTIP_DELAY).await;
cx.update(|_, cx| {
active_tooltip.borrow_mut().replace(ActiveTooltip {
active_tooltip.borrow_mut().replace(
ActiveTooltip {
tooltip: Some(AnyTooltip {
view: tooltip_builder(cx),
cursor_offset: cx.mouse_position(),
}),
_task: None,
});
},
);
cx.notify();
})
.ok();
@ -1426,9 +1441,11 @@ impl Interactivity {
if phase == DispatchPhase::Bubble && !cx.default_prevented() {
let group = active_group_bounds
.map_or(false, |bounds| bounds.contains(&down.position));
let element = interactive_bounds.visibly_contains(&down.position, cx);
let element =
interactive_bounds.visibly_contains(&down.position, cx);
if group || element {
*clicked_state.borrow_mut() = ElementClickedState { group, element };
*clicked_state.borrow_mut() =
ElementClickedState { group, element };
cx.notify();
}
}
@ -1458,13 +1475,13 @@ impl Interactivity {
let delta = event.delta.pixel_delta(line_height);
if overflow.x == Overflow::Scroll {
scroll_offset.x =
(scroll_offset.x + delta.x).clamp(-scroll_max.width, px(0.));
scroll_offset.x = (scroll_offset.x + delta.x)
.clamp(-scroll_max.width, px(0.));
}
if overflow.y == Overflow::Scroll {
scroll_offset.y =
(scroll_offset.y + delta.y).clamp(-scroll_max.height, px(0.));
scroll_offset.y = (scroll_offset.y + delta.y)
.clamp(-scroll_max.height, px(0.));
}
if *scroll_offset != old_scroll_offset {
@ -1507,14 +1524,7 @@ impl Interactivity {
cx.on_action(action_type, listener)
}
cx.with_z_index(style.z_index.unwrap_or(0), |cx| {
if style.background.as_ref().is_some_and(|fill| {
fill.color().is_some_and(|color| !color.is_transparent())
}) {
cx.add_opaque_layer(bounds)
}
f(style, scroll_offset.unwrap_or_default(), cx)
})
f(&style, scroll_offset.unwrap_or_default(), cx)
},
);
@ -1522,6 +1532,9 @@ impl Interactivity {
GroupBounds::pop(group, cx);
}
});
});
});
});
}
pub fn compute_style(

8
crates/gpui2/src/elements/uniform_list.rs
View file

@ -200,7 +200,6 @@ impl Element for UniformList {
bounds.lower_right() - point(border.right + padding.right, border.bottom),
);
style.paint(bounds, cx, |cx| {
if self.item_count > 0 {
let content_height =
item_height * self.item_count + padding.top + padding.bottom;
@ -222,9 +221,9 @@ impl Element for UniformList {
let first_visible_element_ix =
(-(scroll_offset.y + padding.top) / item_height).floor() as usize;
let last_visible_element_ix =
((-scroll_offset.y + padded_bounds.size.height) / item_height).ceil()
as usize;
let last_visible_element_ix = ((-scroll_offset.y + padded_bounds.size.height)
/ item_height)
.ceil() as usize;
let visible_range = first_visible_element_ix
..cmp::min(last_visible_element_ix, self.item_count);
@ -247,7 +246,6 @@ impl Element for UniformList {
});
});
}
});
},
)
}

131
crates/gpui2/src/style.rs
View file

@ -258,16 +258,30 @@ impl Style {
}
}
pub fn overflow_mask(&self, bounds: Bounds<Pixels>) -> Option<ContentMask<Pixels>> {
pub fn overflow_mask(
&self,
bounds: Bounds<Pixels>,
rem_size: Pixels,
) -> Option<ContentMask<Pixels>> {
match self.overflow {
Point {
x: Overflow::Visible,
y: Overflow::Visible,
} => None,
_ => {
let current_mask = bounds;
let min = current_mask.origin;
let max = current_mask.lower_right();
let mut min = bounds.origin;
let mut max = bounds.lower_right();
if self
.border_color
.map_or(false, |color| !color.is_transparent())
{
min.x += self.border_widths.left.to_pixels(rem_size);
max.x -= self.border_widths.right.to_pixels(rem_size);
min.y += self.border_widths.top.to_pixels(rem_size);
max.y -= self.border_widths.bottom.to_pixels(rem_size);
}
let bounds = match (
self.overflow.x == Overflow::Visible,
self.overflow.y == Overflow::Visible,
@ -285,61 +299,62 @@ impl Style {
point(bounds.lower_right().x, max.y),
),
// both hidden
(false, false) => bounds,
(false, false) => Bounds::from_corners(min, max),
};
Some(ContentMask { bounds })
}
}
}
pub fn apply_text_style<C, F, R>(&self, cx: &mut C, f: F) -> R
where
C: BorrowAppContext,
F: FnOnce(&mut C) -> R,
{
if self.text.is_some() {
cx.with_text_style(Some(self.text.clone()), f)
} else {
f(cx)
}
}
// pub fn apply_text_style<C, F, R>(&self, cx: &mut C, f: F) -> R
// where
// C: BorrowAppContext,
// F: FnOnce(&mut C) -> R,
// {
// if self.text.is_some() {
// cx.with_text_style(Some(self.text.clone()), f)
// } else {
// f(cx)
// }
// }
/// Apply overflow to content mask
pub fn apply_overflow<C, F, R>(&self, bounds: Bounds<Pixels>, cx: &mut C, f: F) -> R
where
C: BorrowWindow,
F: FnOnce(&mut C) -> R,
{
let current_mask = cx.content_mask();
// /// Apply overflow to content mask
// pub fn apply_overflow<C, F, R>(&self, bounds: Bounds<Pixels>, cx: &mut C, f: F) -> R
// where
// C: BorrowWindow,
// F: FnOnce(&mut C) -> R,
// {
// let current_mask = cx.content_mask();
let min = current_mask.bounds.origin;
let max = current_mask.bounds.lower_right();
// let min = current_mask.bounds.origin;
// let max = current_mask.bounds.lower_right();
let mask_bounds = match (
self.overflow.x == Overflow::Visible,
self.overflow.y == Overflow::Visible,
) {
// x and y both visible
(true, true) => return f(cx),
// x visible, y hidden
(true, false) => Bounds::from_corners(
point(min.x, bounds.origin.y),
point(max.x, bounds.lower_right().y),
),
// x hidden, y visible
(false, true) => Bounds::from_corners(
point(bounds.origin.x, min.y),
point(bounds.lower_right().x, max.y),
),
// both hidden
(false, false) => bounds,
};
let mask = ContentMask {
bounds: mask_bounds,
};
// let mask_bounds = match (
// self.overflow.x == Overflow::Visible,
// self.overflow.y == Overflow::Visible,
// ) {
// // x and y both visible
// (true, true) => return f(cx),
// // x visible, y hidden
// (true, false) => Bounds::from_corners(
// point(min.x, bounds.origin.y),
// point(max.x, bounds.lower_right().y),
// ),
// // x hidden, y visible
// (false, true) => Bounds::from_corners(
// point(bounds.origin.x, min.y),
// point(bounds.lower_right().x, max.y),
// ),
// // both hidden
// (false, false) => bounds,
// };
// let mask = ContentMask {
// bounds: mask_bounds,
// };
cx.with_content_mask(Some(mask), f)
}
// cx.with_content_mask(Some(mask), f)
// }
/// Paints the background of an element styled with this style.
pub fn paint(
@ -369,14 +384,14 @@ impl Style {
});
let background_color = self.background.as_ref().and_then(Fill::color);
if background_color.is_some() || self.is_border_visible() {
if background_color.is_some() {
cx.with_z_index(1, |cx| {
cx.paint_quad(quad(
bounds,
self.corner_radii.to_pixels(bounds.size, rem_size),
background_color.unwrap_or_default(),
self.border_widths.to_pixels(rem_size),
self.border_color.unwrap_or_default(),
Edges::default(),
Hsla::transparent_black(),
));
});
}
@ -385,6 +400,18 @@ impl Style {
continuation(cx);
});
if self.is_border_visible() {
cx.with_z_index(3, |cx| {
cx.paint_quad(quad(
bounds,
self.corner_radii.to_pixels(bounds.size, rem_size),
Hsla::transparent_black(),
self.border_widths.to_pixels(rem_size),
self.border_color.unwrap_or_default(),
));
});
}
#[cfg(debug_assertions)]
if self.debug_below {
cx.remove_global::<DebugBelow>();

1
crates/workspace2/src/dock.rs
View file

@ -537,6 +537,7 @@ impl Render for Dock {
div()
.flex()
.border_color(cx.theme().colors().border)
.overflow_hidden()
.map(|this| match self.position().axis() {
Axis::Horizontal => this.w(px(size)).h_full().flex_row(),
Axis::Vertical => this.h(px(size)).w_full().flex_col(),