zed/crates/gpui2/src/style.rs

492 lines
15 KiB
Rust
Raw Normal View History

2023-09-22 22:31:26 +00:00
use crate::{
2023-10-17 06:52:26 +00:00
black, phi, point, rems, AbsoluteLength, BorrowAppContext, BorrowWindow, Bounds, ContentMask,
2023-11-03 17:30:15 +00:00
Corners, CornersRefinement, CursorStyle, DefiniteLength, Edges, EdgesRefinement, Font,
2023-11-15 10:07:32 +00:00
FontFeatures, FontStyle, FontWeight, Hsla, Length, Pixels, Point, PointRefinement, Rgba,
SharedString, Size, SizeRefinement, Styled, TextRun, ViewContext,
2023-09-19 19:19:22 +00:00
};
2023-10-13 16:01:15 +00:00
use refineable::{Cascade, Refineable};
2023-10-05 15:00:37 +00:00
use smallvec::SmallVec;
2023-09-19 19:19:22 +00:00
pub use taffy::style::{
AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent,
Overflow, Position,
};
2023-10-13 16:01:15 +00:00
pub type StyleCascade = Cascade<Style>;
2023-09-19 19:19:22 +00:00
#[derive(Clone, Refineable, Debug)]
#[refineable(Debug)]
2023-09-19 19:19:22 +00:00
pub struct Style {
/// What layout strategy should be used?
pub display: Display,
/// Should the element be painted on screen?
pub visibility: Visibility,
2023-09-19 19:19:22 +00:00
// Overflow properties
/// How children overflowing their container should affect layout
#[refineable]
pub overflow: Point<Overflow>,
/// How much space (in points) should be reserved for the scrollbars of `Overflow::Scroll` and `Overflow::Auto` nodes.
pub scrollbar_width: f32,
// Position properties
/// What should the `position` value of this struct use as a base offset?
pub position: Position,
/// How should the position of this element be tweaked relative to the layout defined?
#[refineable]
pub inset: Edges<Length>,
// Size properies
/// Sets the initial size of the item
#[refineable]
pub size: Size<Length>,
/// Controls the minimum size of the item
#[refineable]
pub min_size: Size<Length>,
/// Controls the maximum size of the item
#[refineable]
pub max_size: Size<Length>,
/// Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height.
pub aspect_ratio: Option<f32>,
// Spacing Properties
/// How large should the margin be on each side?
#[refineable]
pub margin: Edges<Length>,
/// How large should the padding be on each side?
#[refineable]
pub padding: Edges<DefiniteLength>,
/// How large should the border be on each side?
#[refineable]
pub border_widths: Edges<AbsoluteLength>,
// Alignment properties
/// How this node's children aligned in the cross/block axis?
pub align_items: Option<AlignItems>,
/// How this node should be aligned in the cross/block axis. Falls back to the parents [`AlignItems`] if not set
pub align_self: Option<AlignSelf>,
/// How should content contained within this item be aligned in the cross/block axis
pub align_content: Option<AlignContent>,
/// How should contained within this item be aligned in the main/inline axis
pub justify_content: Option<JustifyContent>,
/// How large should the gaps between items in a flex container be?
#[refineable]
pub gap: Size<DefiniteLength>,
// Flexbox properies
/// Which direction does the main axis flow in?
pub flex_direction: FlexDirection,
/// Should elements wrap, or stay in a single line?
pub flex_wrap: FlexWrap,
/// Sets the initial main axis size of the item
pub flex_basis: Length,
/// The relative rate at which this item grows when it is expanding to fill space, 0.0 is the default value, and this value must be positive.
pub flex_grow: f32,
/// The relative rate at which this item shrinks when it is contracting to fit into space, 1.0 is the default value, and this value must be positive.
pub flex_shrink: f32,
/// The fill color of this element
2023-10-18 07:39:23 +00:00
pub background: Option<Fill>,
2023-09-19 19:19:22 +00:00
/// The border color of this element
pub border_color: Option<Hsla>,
/// The radius of the corners of this element
#[refineable]
2023-09-22 22:31:26 +00:00
pub corner_radii: Corners<AbsoluteLength>,
2023-09-19 19:19:22 +00:00
2023-10-05 13:30:47 +00:00
/// Box Shadow of the element
2023-10-05 15:00:37 +00:00
pub box_shadow: SmallVec<[BoxShadow; 2]>,
2023-10-05 13:30:47 +00:00
2023-09-27 23:17:30 +00:00
/// TEXT
pub text: TextStyleRefinement,
2023-10-09 17:19:32 +00:00
2023-11-03 17:30:15 +00:00
/// The mouse cursor style shown when the mouse pointer is over an element.
pub mouse_cursor: Option<CursorStyle>,
2023-10-09 17:19:32 +00:00
pub z_index: Option<u32>,
2023-09-19 19:19:22 +00:00
}
2023-10-17 20:16:48 +00:00
impl Styled for StyleRefinement {
fn style(&mut self) -> &mut StyleRefinement {
self
}
}
#[derive(Default, Clone, Copy, Debug, Eq, PartialEq)]
pub enum Visibility {
#[default]
Visible,
Hidden,
}
2023-10-05 13:30:47 +00:00
#[derive(Clone, Debug)]
pub struct BoxShadow {
pub color: Hsla,
pub offset: Point<Pixels>,
pub blur_radius: Pixels,
pub spread_radius: Pixels,
}
2023-09-19 19:19:22 +00:00
#[derive(Refineable, Clone, Debug)]
#[refineable(Debug)]
2023-09-19 19:19:22 +00:00
pub struct TextStyle {
pub color: Hsla,
pub font_family: SharedString,
2023-09-27 23:17:30 +00:00
pub font_features: FontFeatures,
2023-11-07 11:25:33 +00:00
pub font_size: AbsoluteLength,
2023-09-28 05:05:39 +00:00
pub line_height: DefiniteLength,
2023-09-19 19:19:22 +00:00
pub font_weight: FontWeight,
pub font_style: FontStyle,
pub underline: Option<UnderlineStyle>,
}
2023-09-20 20:32:55 +00:00
impl Default for TextStyle {
fn default() -> Self {
TextStyle {
2023-10-17 06:52:26 +00:00
color: black(),
font_family: "Helvetica".into(), // todo!("Get a font we know exists on the system")
2023-09-27 23:17:30 +00:00
font_features: FontFeatures::default(),
2023-11-07 11:25:33 +00:00
font_size: rems(1.).into(),
2023-09-28 05:05:39 +00:00
line_height: phi(),
2023-09-20 20:32:55 +00:00
font_weight: FontWeight::default(),
font_style: FontStyle::default(),
underline: None,
}
}
}
2023-09-19 19:19:22 +00:00
impl TextStyle {
pub fn highlight(mut self, style: HighlightStyle) -> Self {
2023-09-19 19:19:22 +00:00
if let Some(weight) = style.font_weight {
self.font_weight = weight;
}
if let Some(style) = style.font_style {
self.font_style = style;
}
if let Some(color) = style.color {
self.color = self.color.blend(color);
}
if let Some(factor) = style.fade_out {
self.color.fade_out(factor);
}
if let Some(underline) = style.underline {
self.underline = Some(underline);
}
self
2023-09-19 19:19:22 +00:00
}
2023-11-03 04:56:04 +00:00
pub fn font(&self) -> Font {
Font {
family: self.font_family.clone(),
features: self.font_features.clone(),
weight: self.font_weight,
style: self.font_style,
}
}
2023-11-07 18:12:16 +00:00
pub fn line_height_in_pixels(&self, rem_size: Pixels) -> Pixels {
self.line_height.to_pixels(self.font_size, rem_size)
}
pub fn to_run(&self, len: usize) -> TextRun {
TextRun {
len,
2023-09-27 23:17:30 +00:00
font: Font {
family: self.font_family.clone(),
features: Default::default(),
weight: self.font_weight,
style: self.font_style,
},
2023-09-19 19:19:22 +00:00
color: self.color,
background_color: None,
2023-09-19 19:19:22 +00:00
underline: self.underline.clone(),
}
}
}
2023-10-22 17:56:25 +00:00
#[derive(Copy, Clone, Debug, Default, PartialEq)]
2023-09-19 19:19:22 +00:00
pub struct HighlightStyle {
pub color: Option<Hsla>,
pub font_weight: Option<FontWeight>,
pub font_style: Option<FontStyle>,
pub underline: Option<UnderlineStyle>,
pub fade_out: Option<f32>,
}
impl Eq for HighlightStyle {}
impl Style {
2023-11-14 04:40:02 +00:00
pub fn text_style(&self) -> Option<&TextStyleRefinement> {
2023-09-27 23:17:30 +00:00
if self.text.is_some() {
Some(&self.text)
} else {
None
2023-09-19 19:19:22 +00:00
}
}
2023-11-14 04:40:02 +00:00
pub fn overflow_mask(&self, bounds: Bounds<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 bounds = match (
self.overflow.x == Overflow::Visible,
self.overflow.y == Overflow::Visible,
) {
// x and y both visible
(true, true) => return None,
// 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,
};
Some(ContentMask { bounds })
}
}
}
2023-10-04 02:04:17 +00:00
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() {
2023-11-14 04:40:02 +00:00
cx.with_text_style(Some(self.text.clone()), f)
2023-10-04 02:04:17 +00:00
} 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();
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
2023-10-04 16:38:08 +00:00
(false, false) => bounds,
2023-10-04 02:04:17 +00:00
};
let mask = ContentMask {
bounds: mask_bounds,
};
2023-11-14 04:40:02 +00:00
cx.with_content_mask(Some(mask), f)
2023-10-04 02:04:17 +00:00
}
2023-09-19 19:19:22 +00:00
/// Paints the background of an element styled with this style.
2023-10-06 03:02:26 +00:00
pub fn paint<V: 'static>(&self, bounds: Bounds<Pixels>, cx: &mut ViewContext<V>) {
2023-09-19 19:19:22 +00:00
let rem_size = cx.rem_size();
2023-10-09 16:50:42 +00:00
cx.with_z_index(0, |cx| {
2023-10-09 16:50:42 +00:00
cx.paint_shadows(
bounds,
self.corner_radii.to_pixels(bounds.size, rem_size),
&self.box_shadow,
);
});
2023-10-05 13:30:47 +00:00
2023-10-18 07:39:23 +00:00
let background_color = self.background.as_ref().and_then(Fill::color);
2023-10-02 19:16:10 +00:00
if background_color.is_some() || self.is_border_visible() {
cx.with_z_index(1, |cx| {
2023-10-09 16:50:42 +00:00
cx.paint_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(),
2023-10-05 20:42:11 +00:00
);
});
2023-09-19 19:19:22 +00:00
}
}
2023-10-02 19:16:10 +00:00
fn is_border_visible(&self) -> bool {
self.border_color
.map_or(false, |color| !color.is_transparent())
&& self.border_widths.any(|length| !length.is_zero())
}
2023-09-19 19:19:22 +00:00
}
impl Default for Style {
fn default() -> Self {
Style {
display: Display::Block,
visibility: Visibility::Visible,
2023-09-19 19:19:22 +00:00
overflow: Point {
x: Overflow::Visible,
y: Overflow::Visible,
},
scrollbar_width: 0.0,
position: Position::Relative,
inset: Edges::auto(),
margin: Edges::<Length>::zero(),
padding: Edges::<DefiniteLength>::zero(),
border_widths: Edges::<AbsoluteLength>::zero(),
size: Size::auto(),
min_size: Size::auto(),
max_size: Size::auto(),
aspect_ratio: None,
gap: Size::zero(),
// Aligment
align_items: None,
align_self: None,
align_content: None,
justify_content: None,
// Flexbox
flex_direction: FlexDirection::Row,
flex_wrap: FlexWrap::NoWrap,
flex_grow: 0.0,
flex_shrink: 1.0,
flex_basis: Length::Auto,
2023-10-18 07:39:23 +00:00
background: None,
2023-09-19 19:19:22 +00:00
border_color: None,
2023-09-22 22:31:26 +00:00
corner_radii: Corners::default(),
2023-10-05 15:00:37 +00:00
box_shadow: Default::default(),
2023-09-27 23:17:30 +00:00
text: TextStyleRefinement::default(),
2023-11-03 17:30:15 +00:00
mouse_cursor: None,
2023-10-09 17:19:32 +00:00
z_index: None,
2023-09-19 19:19:22 +00:00
}
}
}
2023-10-22 17:56:25 +00:00
#[derive(Refineable, Copy, Clone, Default, Debug, PartialEq, Eq)]
#[refineable(Debug)]
2023-09-19 19:19:22 +00:00
pub struct UnderlineStyle {
pub thickness: Pixels,
pub color: Option<Hsla>,
2023-10-06 13:34:37 +00:00
pub wavy: bool,
2023-09-19 19:19:22 +00:00
}
#[derive(Clone, Debug)]
pub enum Fill {
Color(Hsla),
}
impl Fill {
pub fn color(&self) -> Option<Hsla> {
match self {
Fill::Color(color) => Some(*color),
}
}
}
impl Default for Fill {
fn default() -> Self {
Self::Color(Hsla::default())
}
}
impl From<Hsla> for Fill {
fn from(color: Hsla) -> Self {
Self::Color(color)
}
}
impl From<TextStyle> for HighlightStyle {
fn from(other: TextStyle) -> Self {
Self::from(&other)
}
}
impl From<&TextStyle> for HighlightStyle {
fn from(other: &TextStyle) -> Self {
Self {
color: Some(other.color),
font_weight: Some(other.font_weight),
font_style: Some(other.font_style),
underline: other.underline.clone(),
fade_out: None,
}
}
}
impl HighlightStyle {
pub fn highlight(&mut self, other: HighlightStyle) {
match (self.color, other.color) {
(Some(self_color), Some(other_color)) => {
self.color = Some(Hsla::blend(other_color, self_color));
}
(None, Some(other_color)) => {
self.color = Some(other_color);
}
_ => {}
}
if other.font_weight.is_some() {
self.font_weight = other.font_weight;
}
if other.font_style.is_some() {
self.font_style = other.font_style;
}
if other.underline.is_some() {
self.underline = other.underline;
}
match (other.fade_out, self.fade_out) {
(Some(source_fade), None) => self.fade_out = Some(source_fade),
(Some(source_fade), Some(dest_fade)) => {
self.fade_out = Some((dest_fade * (1. + source_fade)).clamp(0., 1.));
}
_ => {}
}
}
}
impl From<Hsla> for HighlightStyle {
fn from(color: Hsla) -> Self {
Self {
color: Some(color),
..Default::default()
}
}
}
impl From<Rgba> for HighlightStyle {
fn from(color: Rgba) -> Self {
Self {
color: Some(color.into()),
..Default::default()
}
}
}