use std::{ hash::{Hash, Hasher}, iter, mem, ops::Range, }; use crate::{ black, phi, point, quad, rems, AbsoluteLength, Bounds, ContentMask, Corners, CornersRefinement, CursorStyle, DefiniteLength, Edges, EdgesRefinement, Font, FontFeatures, FontStyle, FontWeight, Hsla, Length, Pixels, Point, PointRefinement, Rgba, SharedString, Size, SizeRefinement, Styled, TextRun, WindowContext, }; use collections::HashSet; use refineable::Refineable; use smallvec::SmallVec; pub use taffy::style::{ AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent, Overflow, Position, }; /// Use this struct for interfacing with the 'debug_below' styling from your own elements. /// If a parent element has this style set on it, then this struct will be set as a global in /// GPUI. #[cfg(debug_assertions)] pub struct DebugBelow; #[cfg(debug_assertions)] impl crate::Global for DebugBelow {} /// The CSS styling that can be applied to an element via the `Styled` trait #[derive(Clone, Refineable, Debug)] #[refineable(Debug)] pub struct Style { /// What layout strategy should be used? pub display: Display, /// Should the element be painted on screen? pub visibility: Visibility, // Overflow properties /// How children overflowing their container should affect layout #[refineable] pub overflow: Point, /// 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, // Size properties /// Sets the initial size of the item #[refineable] pub size: Size, /// Controls the minimum size of the item #[refineable] pub min_size: Size, /// Controls the maximum size of the item #[refineable] pub max_size: Size, /// Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height. pub aspect_ratio: Option, // Spacing Properties /// How large should the margin be on each side? #[refineable] pub margin: Edges, /// How large should the padding be on each side? #[refineable] pub padding: Edges, /// How large should the border be on each side? #[refineable] pub border_widths: Edges, // Alignment properties /// How this node's children aligned in the cross/block axis? pub align_items: Option, /// How this node should be aligned in the cross/block axis. Falls back to the parents [`AlignItems`] if not set pub align_self: Option, /// How should content contained within this item be aligned in the cross/block axis pub align_content: Option, /// How should contained within this item be aligned in the main/inline axis pub justify_content: Option, /// How large should the gaps between items in a flex container be? #[refineable] pub gap: Size, // Flexbox properties /// 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 pub background: Option, /// The border color of this element pub border_color: Option, /// The radius of the corners of this element #[refineable] pub corner_radii: Corners, /// Box Shadow of the element pub box_shadow: SmallVec<[BoxShadow; 2]>, /// The text style of this element pub text: TextStyleRefinement, /// The mouse cursor style shown when the mouse pointer is over an element. pub mouse_cursor: Option, /// Whether to draw a red debugging outline around this element #[cfg(debug_assertions)] pub debug: bool, /// Whether to draw a red debugging outline around this element and all of its conforming children #[cfg(debug_assertions)] pub debug_below: bool, } impl Styled for StyleRefinement { fn style(&mut self) -> &mut StyleRefinement { self } } /// The value of the visibility property, similar to the CSS property `visibility` #[derive(Default, Clone, Copy, Debug, Eq, PartialEq)] pub enum Visibility { /// The element should be drawn as normal. #[default] Visible, /// The element should not be drawn, but should still take up space in the layout. Hidden, } /// The possible values of the box-shadow property #[derive(Clone, Debug)] pub struct BoxShadow { /// What color should the shadow have? pub color: Hsla, /// How should it be offset from its element? pub offset: Point, /// How much should the shadow be blurred? pub blur_radius: Pixels, /// How much should the shadow spread? pub spread_radius: Pixels, } /// How to handle whitespace in text #[derive(Copy, Clone, Debug, Default, PartialEq, Eq)] pub enum WhiteSpace { /// Normal line wrapping when text overflows the width of the element #[default] Normal, /// No line wrapping, text will overflow the width of the element Nowrap, } /// The properties that can be used to style text in GPUI #[derive(Refineable, Clone, Debug, PartialEq)] #[refineable(Debug)] pub struct TextStyle { /// The color of the text pub color: Hsla, /// The font family to use pub font_family: SharedString, /// The font features to use pub font_features: FontFeatures, /// The font size to use, in pixels or rems. pub font_size: AbsoluteLength, /// The line height to use, in pixels or fractions pub line_height: DefiniteLength, /// The font weight, e.g. bold pub font_weight: FontWeight, /// The font style, e.g. italic pub font_style: FontStyle, /// The background color of the text pub background_color: Option, /// The underline style of the text pub underline: Option, /// The strikethrough style of the text pub strikethrough: Option, /// How to handle whitespace in the text pub white_space: WhiteSpace, } impl Default for TextStyle { fn default() -> Self { TextStyle { color: black(), // todo(linux) make this configurable or choose better default font_family: if cfg!(target_os = "linux") { "FreeMono".into() } else { "Helvetica".into() }, font_features: FontFeatures::default(), font_size: rems(1.).into(), line_height: phi(), font_weight: FontWeight::default(), font_style: FontStyle::default(), background_color: None, underline: None, strikethrough: None, white_space: WhiteSpace::Normal, } } } impl TextStyle { /// Create a new text style with the given highlighting applied. pub fn highlight(mut self, style: impl Into) -> Self { let style = style.into(); 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(background_color) = style.background_color { self.background_color = Some(background_color); } if let Some(underline) = style.underline { self.underline = Some(underline); } if let Some(strikethrough) = style.strikethrough { self.strikethrough = Some(strikethrough); } self } /// Get the font configured for this text style. pub fn font(&self) -> Font { Font { family: self.font_family.clone(), features: self.font_features.clone(), weight: self.font_weight, style: self.font_style, } } /// Returns the rounded line height in pixels. pub fn line_height_in_pixels(&self, rem_size: Pixels) -> Pixels { self.line_height.to_pixels(self.font_size, rem_size).round() } /// Convert this text style into a [`TextRun`], for the given length of the text. pub fn to_run(&self, len: usize) -> TextRun { TextRun { len, font: Font { family: self.font_family.clone(), features: Default::default(), weight: self.font_weight, style: self.font_style, }, color: self.color, background_color: self.background_color, underline: self.underline, strikethrough: self.strikethrough, } } } /// A highlight style to apply, similar to a `TextStyle` except /// for a single font, uniformly sized and spaced text. #[derive(Copy, Clone, Debug, Default, PartialEq)] pub struct HighlightStyle { /// The color of the text pub color: Option, /// The font weight, e.g. bold pub font_weight: Option, /// The font style, e.g. italic pub font_style: Option, /// The background color of the text pub background_color: Option, /// The underline style of the text pub underline: Option, /// The underline style of the text pub strikethrough: Option, /// Similar to the CSS `opacity` property, this will cause the text to be less vibrant. pub fade_out: Option, } impl Eq for HighlightStyle {} impl Hash for HighlightStyle { fn hash(&self, state: &mut H) { self.color.hash(state); self.font_weight.hash(state); self.font_style.hash(state); self.background_color.hash(state); self.underline.hash(state); self.strikethrough.hash(state); state.write_u32(u32::from_be_bytes( self.fade_out.map(|f| f.to_be_bytes()).unwrap_or_default(), )); } } impl Style { /// Returns true if the style is visible and the background is opaque. pub fn has_opaque_background(&self) -> bool { self.background .as_ref() .is_some_and(|fill| fill.color().is_some_and(|color| !color.is_transparent())) } /// Get the text style in this element style. pub fn text_style(&self) -> Option<&TextStyleRefinement> { if self.text.is_some() { Some(&self.text) } else { None } } /// Get the content mask for this element style, based on the given bounds. /// If the element does not hide its overflow, this will return `None`. pub fn overflow_mask( &self, bounds: Bounds, rem_size: Pixels, ) -> Option> { match self.overflow { Point { x: Overflow::Visible, y: Overflow::Visible, } => None, _ => { 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, ) { // 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::from_corners(min, max), }; Some(ContentMask { bounds }) } } } /// Paints the background of an element styled with this style. pub fn paint( &self, bounds: Bounds, cx: &mut WindowContext, continuation: impl FnOnce(&mut WindowContext), ) { #[cfg(debug_assertions)] if self.debug_below { cx.set_global(DebugBelow) } #[cfg(debug_assertions)] if self.debug || cx.has_global::() { cx.paint_quad(crate::outline(bounds, crate::red())); } let rem_size = cx.rem_size(); cx.paint_shadows( bounds, self.corner_radii.to_pixels(bounds.size, rem_size), &self.box_shadow, ); let background_color = self.background.as_ref().and_then(Fill::color); if background_color.map_or(false, |color| !color.is_transparent()) { let mut border_color = background_color.unwrap_or_default(); border_color.a = 0.; cx.paint_quad(quad( bounds, self.corner_radii.to_pixels(bounds.size, rem_size), background_color.unwrap_or_default(), Edges::default(), border_color, )); } continuation(cx); if self.is_border_visible() { let corner_radii = self.corner_radii.to_pixels(bounds.size, rem_size); let border_widths = self.border_widths.to_pixels(rem_size); let max_border_width = border_widths.max(); let max_corner_radius = corner_radii.max(); let top_bounds = Bounds::from_corners( bounds.origin, bounds.upper_right() + point(Pixels::ZERO, max_border_width.max(max_corner_radius)), ); let bottom_bounds = Bounds::from_corners( bounds.lower_left() - point(Pixels::ZERO, max_border_width.max(max_corner_radius)), bounds.lower_right(), ); let left_bounds = Bounds::from_corners( top_bounds.lower_left(), bottom_bounds.origin + point(max_border_width, Pixels::ZERO), ); let right_bounds = Bounds::from_corners( top_bounds.lower_right() - point(max_border_width, Pixels::ZERO), bottom_bounds.upper_right(), ); let mut background = self.border_color.unwrap_or_default(); background.a = 0.; let quad = quad( bounds, corner_radii, background, border_widths, self.border_color.unwrap_or_default(), ); cx.with_content_mask(Some(ContentMask { bounds: top_bounds }), |cx| { cx.paint_quad(quad.clone()); }); cx.with_content_mask( Some(ContentMask { bounds: right_bounds, }), |cx| { cx.paint_quad(quad.clone()); }, ); cx.with_content_mask( Some(ContentMask { bounds: bottom_bounds, }), |cx| { cx.paint_quad(quad.clone()); }, ); cx.with_content_mask( Some(ContentMask { bounds: left_bounds, }), |cx| { cx.paint_quad(quad); }, ); } #[cfg(debug_assertions)] if self.debug_below { cx.remove_global::(); } } fn is_border_visible(&self) -> bool { self.border_color .map_or(false, |color| !color.is_transparent()) && self.border_widths.any(|length| !length.is_zero()) } } impl Default for Style { fn default() -> Self { Style { display: Display::Block, visibility: Visibility::Visible, overflow: Point { x: Overflow::Visible, y: Overflow::Visible, }, scrollbar_width: 0.0, position: Position::Relative, inset: Edges::auto(), margin: Edges::::zero(), padding: Edges::::zero(), border_widths: Edges::::zero(), size: Size::auto(), min_size: Size::auto(), max_size: Size::auto(), aspect_ratio: None, gap: Size::default(), // Alignment 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, background: None, border_color: None, corner_radii: Corners::default(), box_shadow: Default::default(), text: TextStyleRefinement::default(), mouse_cursor: None, #[cfg(debug_assertions)] debug: false, #[cfg(debug_assertions)] debug_below: false, } } } /// The properties that can be applied to an underline. #[derive(Refineable, Copy, Clone, Default, Debug, PartialEq, Eq, Hash)] #[refineable(Debug)] pub struct UnderlineStyle { /// The thickness of the underline. pub thickness: Pixels, /// The color of the underline. pub color: Option, /// Whether the underline should be wavy, like in a spell checker. pub wavy: bool, } /// The properties that can be applied to a strikethrough. #[derive(Refineable, Copy, Clone, Default, Debug, PartialEq, Eq, Hash)] #[refineable(Debug)] pub struct StrikethroughStyle { /// The thickness of the strikethrough. pub thickness: Pixels, /// The color of the strikethrough. pub color: Option, } /// The kinds of fill that can be applied to a shape. #[derive(Clone, Debug)] pub enum Fill { /// A solid color fill. Color(Hsla), } impl Fill { /// Unwrap this fill into a solid color, if it is one. pub fn color(&self) -> Option { match self { Fill::Color(color) => Some(*color), } } } impl Default for Fill { fn default() -> Self { Self::Color(Hsla::default()) } } impl From for Fill { fn from(color: Hsla) -> Self { Self::Color(color) } } impl From for Fill { fn from(color: Rgba) -> Self { Self::Color(color.into()) } } impl From 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), background_color: other.background_color, underline: other.underline, strikethrough: other.strikethrough, fade_out: None, } } } impl HighlightStyle { /// Create a highlight style with just a color pub fn color(color: Hsla) -> Self { Self { color: Some(color), ..Default::default() } } /// Blend this highlight style with another. /// Non-continuous properties, like font_weight and font_style, are overwritten. 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.background_color.is_some() { self.background_color = other.background_color; } if other.underline.is_some() { self.underline = other.underline; } if other.strikethrough.is_some() { self.strikethrough = other.strikethrough; } 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 for HighlightStyle { fn from(color: Hsla) -> Self { Self { color: Some(color), ..Default::default() } } } impl From for HighlightStyle { fn from(font_weight: FontWeight) -> Self { Self { font_weight: Some(font_weight), ..Default::default() } } } impl From for HighlightStyle { fn from(font_style: FontStyle) -> Self { Self { font_style: Some(font_style), ..Default::default() } } } impl From for HighlightStyle { fn from(color: Rgba) -> Self { Self { color: Some(color.into()), ..Default::default() } } } /// Combine and merge the highlights and ranges in the two iterators. pub fn combine_highlights( a: impl IntoIterator, HighlightStyle)>, b: impl IntoIterator, HighlightStyle)>, ) -> impl Iterator, HighlightStyle)> { let mut endpoints = Vec::new(); let mut highlights = Vec::new(); for (range, highlight) in a.into_iter().chain(b) { if !range.is_empty() { let highlight_id = highlights.len(); endpoints.push((range.start, highlight_id, true)); endpoints.push((range.end, highlight_id, false)); highlights.push(highlight); } } endpoints.sort_unstable_by_key(|(position, _, _)| *position); let mut endpoints = endpoints.into_iter().peekable(); let mut active_styles = HashSet::default(); let mut ix = 0; iter::from_fn(move || { while let Some((endpoint_ix, highlight_id, is_start)) = endpoints.peek() { let prev_index = mem::replace(&mut ix, *endpoint_ix); if ix > prev_index && !active_styles.is_empty() { let mut current_style = HighlightStyle::default(); for highlight_id in &active_styles { current_style.highlight(highlights[*highlight_id]); } return Some((prev_index..ix, current_style)); } if *is_start { active_styles.insert(*highlight_id); } else { active_styles.remove(highlight_id); } endpoints.next(); } None }) } #[cfg(test)] mod tests { use crate::{blue, green, red, yellow}; use super::*; #[test] fn test_combine_highlights() { assert_eq!( combine_highlights( [ (0..5, green().into()), (4..10, FontWeight::BOLD.into()), (15..20, yellow().into()), ], [ (2..6, FontStyle::Italic.into()), (1..3, blue().into()), (21..23, red().into()), ] ) .collect::>(), [ ( 0..1, HighlightStyle { color: Some(green()), ..Default::default() } ), ( 1..2, HighlightStyle { color: Some(green()), ..Default::default() } ), ( 2..3, HighlightStyle { color: Some(green()), font_style: Some(FontStyle::Italic), ..Default::default() } ), ( 3..4, HighlightStyle { color: Some(green()), font_style: Some(FontStyle::Italic), ..Default::default() } ), ( 4..5, HighlightStyle { color: Some(green()), font_weight: Some(FontWeight::BOLD), font_style: Some(FontStyle::Italic), ..Default::default() } ), ( 5..6, HighlightStyle { font_weight: Some(FontWeight::BOLD), font_style: Some(FontStyle::Italic), ..Default::default() } ), ( 6..10, HighlightStyle { font_weight: Some(FontWeight::BOLD), ..Default::default() } ), ( 15..20, HighlightStyle { color: Some(yellow()), ..Default::default() } ), ( 21..23, HighlightStyle { color: Some(red()), ..Default::default() } ) ] ); } }