style.rs

  1use crate::{
  2    black, phi, point, rems, AbsoluteLength, BorrowAppContext, BorrowWindow, Bounds, ContentMask,
  3    Corners, CornersRefinement, CursorStyle, DefiniteLength, Edges, EdgesRefinement, Font,
  4    FontFeatures, FontStyle, FontWeight, Hsla, Length, Pixels, Point, PointRefinement, Rgba,
  5    SharedString, Size, SizeRefinement, Styled, TextRun, WindowContext,
  6};
  7use refineable::{Cascade, Refineable};
  8use smallvec::SmallVec;
  9pub use taffy::style::{
 10    AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent,
 11    Overflow, Position,
 12};
 13
 14pub type StyleCascade = Cascade<Style>;
 15
 16#[derive(Clone, Refineable, Debug)]
 17#[refineable(Debug)]
 18pub struct Style {
 19    /// What layout strategy should be used?
 20    pub display: Display,
 21
 22    /// Should the element be painted on screen?
 23    pub visibility: Visibility,
 24
 25    // Overflow properties
 26    /// How children overflowing their container should affect layout
 27    #[refineable]
 28    pub overflow: Point<Overflow>,
 29    /// How much space (in points) should be reserved for the scrollbars of `Overflow::Scroll` and `Overflow::Auto` nodes.
 30    pub scrollbar_width: f32,
 31
 32    // Position properties
 33    /// What should the `position` value of this struct use as a base offset?
 34    pub position: Position,
 35    /// How should the position of this element be tweaked relative to the layout defined?
 36    #[refineable]
 37    pub inset: Edges<Length>,
 38
 39    // Size properies
 40    /// Sets the initial size of the item
 41    #[refineable]
 42    pub size: Size<Length>,
 43    /// Controls the minimum size of the item
 44    #[refineable]
 45    pub min_size: Size<Length>,
 46    /// Controls the maximum size of the item
 47    #[refineable]
 48    pub max_size: Size<Length>,
 49    /// Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height.
 50    pub aspect_ratio: Option<f32>,
 51
 52    // Spacing Properties
 53    /// How large should the margin be on each side?
 54    #[refineable]
 55    pub margin: Edges<Length>,
 56    /// How large should the padding be on each side?
 57    #[refineable]
 58    pub padding: Edges<DefiniteLength>,
 59    /// How large should the border be on each side?
 60    #[refineable]
 61    pub border_widths: Edges<AbsoluteLength>,
 62
 63    // Alignment properties
 64    /// How this node's children aligned in the cross/block axis?
 65    pub align_items: Option<AlignItems>,
 66    /// How this node should be aligned in the cross/block axis. Falls back to the parents [`AlignItems`] if not set
 67    pub align_self: Option<AlignSelf>,
 68    /// How should content contained within this item be aligned in the cross/block axis
 69    pub align_content: Option<AlignContent>,
 70    /// How should contained within this item be aligned in the main/inline axis
 71    pub justify_content: Option<JustifyContent>,
 72    /// How large should the gaps between items in a flex container be?
 73    #[refineable]
 74    pub gap: Size<DefiniteLength>,
 75
 76    // Flexbox properies
 77    /// Which direction does the main axis flow in?
 78    pub flex_direction: FlexDirection,
 79    /// Should elements wrap, or stay in a single line?
 80    pub flex_wrap: FlexWrap,
 81    /// Sets the initial main axis size of the item
 82    pub flex_basis: Length,
 83    /// 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.
 84    pub flex_grow: f32,
 85    /// 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.
 86    pub flex_shrink: f32,
 87
 88    /// The fill color of this element
 89    pub background: Option<Fill>,
 90
 91    /// The border color of this element
 92    pub border_color: Option<Hsla>,
 93
 94    /// The radius of the corners of this element
 95    #[refineable]
 96    pub corner_radii: Corners<AbsoluteLength>,
 97
 98    /// Box Shadow of the element
 99    pub box_shadow: SmallVec<[BoxShadow; 2]>,
100
101    /// TEXT
102    pub text: TextStyleRefinement,
103
104    /// The mouse cursor style shown when the mouse pointer is over an element.
105    pub mouse_cursor: Option<CursorStyle>,
106
107    pub z_index: Option<u32>,
108}
109
110impl Styled for StyleRefinement {
111    fn style(&mut self) -> &mut StyleRefinement {
112        self
113    }
114}
115
116#[derive(Default, Clone, Copy, Debug, Eq, PartialEq)]
117pub enum Visibility {
118    #[default]
119    Visible,
120    Hidden,
121}
122
123#[derive(Clone, Debug)]
124pub struct BoxShadow {
125    pub color: Hsla,
126    pub offset: Point<Pixels>,
127    pub blur_radius: Pixels,
128    pub spread_radius: Pixels,
129}
130
131#[derive(Copy, Clone, Debug, Default, PartialEq, Eq)]
132pub enum WhiteSpace {
133    #[default]
134    Normal,
135    Nowrap,
136}
137
138#[derive(Refineable, Clone, Debug)]
139#[refineable(Debug)]
140pub struct TextStyle {
141    pub color: Hsla,
142    pub font_family: SharedString,
143    pub font_features: FontFeatures,
144    pub font_size: AbsoluteLength,
145    pub line_height: DefiniteLength,
146    pub font_weight: FontWeight,
147    pub font_style: FontStyle,
148    pub underline: Option<UnderlineStyle>,
149    pub white_space: WhiteSpace,
150}
151
152impl Default for TextStyle {
153    fn default() -> Self {
154        TextStyle {
155            color: black(),
156            font_family: "Helvetica".into(), // todo!("Get a font we know exists on the system")
157            font_features: FontFeatures::default(),
158            font_size: rems(1.).into(),
159            line_height: phi(),
160            font_weight: FontWeight::default(),
161            font_style: FontStyle::default(),
162            underline: None,
163            white_space: WhiteSpace::Normal,
164        }
165    }
166}
167
168impl TextStyle {
169    pub fn highlight(mut self, style: HighlightStyle) -> Self {
170        if let Some(weight) = style.font_weight {
171            self.font_weight = weight;
172        }
173        if let Some(style) = style.font_style {
174            self.font_style = style;
175        }
176
177        if let Some(color) = style.color {
178            self.color = self.color.blend(color);
179        }
180
181        if let Some(factor) = style.fade_out {
182            self.color.fade_out(factor);
183        }
184
185        if let Some(underline) = style.underline {
186            self.underline = Some(underline);
187        }
188
189        self
190    }
191
192    pub fn font(&self) -> Font {
193        Font {
194            family: self.font_family.clone(),
195            features: self.font_features.clone(),
196            weight: self.font_weight,
197            style: self.font_style,
198        }
199    }
200
201    pub fn line_height_in_pixels(&self, rem_size: Pixels) -> Pixels {
202        self.line_height.to_pixels(self.font_size, rem_size)
203    }
204
205    pub fn to_run(&self, len: usize) -> TextRun {
206        TextRun {
207            len,
208            font: Font {
209                family: self.font_family.clone(),
210                features: Default::default(),
211                weight: self.font_weight,
212                style: self.font_style,
213            },
214            color: self.color,
215            background_color: None,
216            underline: self.underline.clone(),
217        }
218    }
219}
220
221#[derive(Copy, Clone, Debug, Default, PartialEq)]
222pub struct HighlightStyle {
223    pub color: Option<Hsla>,
224    pub font_weight: Option<FontWeight>,
225    pub font_style: Option<FontStyle>,
226    pub underline: Option<UnderlineStyle>,
227    pub fade_out: Option<f32>,
228}
229
230impl Eq for HighlightStyle {}
231
232impl Style {
233    pub fn text_style(&self) -> Option<&TextStyleRefinement> {
234        if self.text.is_some() {
235            Some(&self.text)
236        } else {
237            None
238        }
239    }
240
241    pub fn overflow_mask(&self, bounds: Bounds<Pixels>) -> Option<ContentMask<Pixels>> {
242        match self.overflow {
243            Point {
244                x: Overflow::Visible,
245                y: Overflow::Visible,
246            } => None,
247            _ => {
248                let current_mask = bounds;
249                let min = current_mask.origin;
250                let max = current_mask.lower_right();
251                let bounds = match (
252                    self.overflow.x == Overflow::Visible,
253                    self.overflow.y == Overflow::Visible,
254                ) {
255                    // x and y both visible
256                    (true, true) => return None,
257                    // x visible, y hidden
258                    (true, false) => Bounds::from_corners(
259                        point(min.x, bounds.origin.y),
260                        point(max.x, bounds.lower_right().y),
261                    ),
262                    // x hidden, y visible
263                    (false, true) => Bounds::from_corners(
264                        point(bounds.origin.x, min.y),
265                        point(bounds.lower_right().x, max.y),
266                    ),
267                    // both hidden
268                    (false, false) => bounds,
269                };
270                Some(ContentMask { bounds })
271            }
272        }
273    }
274
275    pub fn apply_text_style<C, F, R>(&self, cx: &mut C, f: F) -> R
276    where
277        C: BorrowAppContext,
278        F: FnOnce(&mut C) -> R,
279    {
280        if self.text.is_some() {
281            cx.with_text_style(Some(self.text.clone()), f)
282        } else {
283            f(cx)
284        }
285    }
286
287    /// Apply overflow to content mask
288    pub fn apply_overflow<C, F, R>(&self, bounds: Bounds<Pixels>, cx: &mut C, f: F) -> R
289    where
290        C: BorrowWindow,
291        F: FnOnce(&mut C) -> R,
292    {
293        let current_mask = cx.content_mask();
294
295        let min = current_mask.bounds.origin;
296        let max = current_mask.bounds.lower_right();
297
298        let mask_bounds = match (
299            self.overflow.x == Overflow::Visible,
300            self.overflow.y == Overflow::Visible,
301        ) {
302            // x and y both visible
303            (true, true) => return f(cx),
304            // x visible, y hidden
305            (true, false) => Bounds::from_corners(
306                point(min.x, bounds.origin.y),
307                point(max.x, bounds.lower_right().y),
308            ),
309            // x hidden, y visible
310            (false, true) => Bounds::from_corners(
311                point(bounds.origin.x, min.y),
312                point(bounds.lower_right().x, max.y),
313            ),
314            // both hidden
315            (false, false) => bounds,
316        };
317        let mask = ContentMask {
318            bounds: mask_bounds,
319        };
320
321        cx.with_content_mask(Some(mask), f)
322    }
323
324    /// Paints the background of an element styled with this style.
325    pub fn paint(&self, bounds: Bounds<Pixels>, cx: &mut WindowContext) {
326        let rem_size = cx.rem_size();
327
328        cx.with_z_index(0, |cx| {
329            cx.paint_shadows(
330                bounds,
331                self.corner_radii.to_pixels(bounds.size, rem_size),
332                &self.box_shadow,
333            );
334        });
335
336        let background_color = self.background.as_ref().and_then(Fill::color);
337        if background_color.is_some() || self.is_border_visible() {
338            cx.with_z_index(1, |cx| {
339                cx.paint_quad(
340                    bounds,
341                    self.corner_radii.to_pixels(bounds.size, rem_size),
342                    background_color.unwrap_or_default(),
343                    self.border_widths.to_pixels(rem_size),
344                    self.border_color.unwrap_or_default(),
345                );
346            });
347        }
348    }
349
350    fn is_border_visible(&self) -> bool {
351        self.border_color
352            .map_or(false, |color| !color.is_transparent())
353            && self.border_widths.any(|length| !length.is_zero())
354    }
355}
356
357impl Default for Style {
358    fn default() -> Self {
359        Style {
360            display: Display::Block,
361            visibility: Visibility::Visible,
362            overflow: Point {
363                x: Overflow::Visible,
364                y: Overflow::Visible,
365            },
366            scrollbar_width: 0.0,
367            position: Position::Relative,
368            inset: Edges::auto(),
369            margin: Edges::<Length>::zero(),
370            padding: Edges::<DefiniteLength>::zero(),
371            border_widths: Edges::<AbsoluteLength>::zero(),
372            size: Size::auto(),
373            min_size: Size::auto(),
374            max_size: Size::auto(),
375            aspect_ratio: None,
376            gap: Size::zero(),
377            // Aligment
378            align_items: None,
379            align_self: None,
380            align_content: None,
381            justify_content: None,
382            // Flexbox
383            flex_direction: FlexDirection::Row,
384            flex_wrap: FlexWrap::NoWrap,
385            flex_grow: 0.0,
386            flex_shrink: 1.0,
387            flex_basis: Length::Auto,
388            background: None,
389            border_color: None,
390            corner_radii: Corners::default(),
391            box_shadow: Default::default(),
392            text: TextStyleRefinement::default(),
393            mouse_cursor: None,
394            z_index: None,
395        }
396    }
397}
398
399#[derive(Refineable, Copy, Clone, Default, Debug, PartialEq, Eq)]
400#[refineable(Debug)]
401pub struct UnderlineStyle {
402    pub thickness: Pixels,
403    pub color: Option<Hsla>,
404    pub wavy: bool,
405}
406
407#[derive(Clone, Debug)]
408pub enum Fill {
409    Color(Hsla),
410}
411
412impl Fill {
413    pub fn color(&self) -> Option<Hsla> {
414        match self {
415            Fill::Color(color) => Some(*color),
416        }
417    }
418}
419
420impl Default for Fill {
421    fn default() -> Self {
422        Self::Color(Hsla::default())
423    }
424}
425
426impl From<Hsla> for Fill {
427    fn from(color: Hsla) -> Self {
428        Self::Color(color)
429    }
430}
431
432impl From<TextStyle> for HighlightStyle {
433    fn from(other: TextStyle) -> Self {
434        Self::from(&other)
435    }
436}
437
438impl From<&TextStyle> for HighlightStyle {
439    fn from(other: &TextStyle) -> Self {
440        Self {
441            color: Some(other.color),
442            font_weight: Some(other.font_weight),
443            font_style: Some(other.font_style),
444            underline: other.underline.clone(),
445            fade_out: None,
446        }
447    }
448}
449
450impl HighlightStyle {
451    pub fn highlight(&mut self, other: HighlightStyle) {
452        match (self.color, other.color) {
453            (Some(self_color), Some(other_color)) => {
454                self.color = Some(Hsla::blend(other_color, self_color));
455            }
456            (None, Some(other_color)) => {
457                self.color = Some(other_color);
458            }
459            _ => {}
460        }
461
462        if other.font_weight.is_some() {
463            self.font_weight = other.font_weight;
464        }
465
466        if other.font_style.is_some() {
467            self.font_style = other.font_style;
468        }
469
470        if other.underline.is_some() {
471            self.underline = other.underline;
472        }
473
474        match (other.fade_out, self.fade_out) {
475            (Some(source_fade), None) => self.fade_out = Some(source_fade),
476            (Some(source_fade), Some(dest_fade)) => {
477                self.fade_out = Some((dest_fade * (1. + source_fade)).clamp(0., 1.));
478            }
479            _ => {}
480        }
481    }
482}
483
484impl From<Hsla> for HighlightStyle {
485    fn from(color: Hsla) -> Self {
486        Self {
487            color: Some(color),
488            ..Default::default()
489        }
490    }
491}
492
493impl From<Rgba> for HighlightStyle {
494    fn from(color: Rgba) -> Self {
495        Self {
496            color: Some(color.into()),
497            ..Default::default()
498        }
499    }
500}