gpui/
style.rs

1use std::{
2    hash::{Hash, Hasher},
3    iter, mem,
4    ops::Range,
5};
6
7use smallvec::SmallVec;
8
9use crate::{
10    AbsoluteLength, App, Background, BackgroundTag, BlendMode, BorderStyle, Bounds, ContentMask,
11    Corners, CornersRefinement, CursorStyle, DefiniteLength, DevicePixels, Edges, EdgesRefinement,
12    Font, FontFallbacks, FontFeatures, FontStyle, FontWeight, GridLocation, Hsla, Length, Pixels,
13    Point, PointRefinement, Radians, Rgba, SharedString, Size, SizeRefinement, Styled, TextRun,
14    TransformationMatrix, Window, black, phi, point, quad, rems, size,
15};
16use collections::HashSet;
17use refineable::Refineable;
18use schemars::JsonSchema;
19use serde::{Deserialize, Serialize};
20
21/// Use this struct for interfacing with the 'debug_below' styling from your own elements.
22/// If a parent element has this style set on it, then this struct will be set as a global in
23/// GPUI.
24#[cfg(debug_assertions)]
25pub struct DebugBelow;
26
27#[cfg(debug_assertions)]
28impl crate::Global for DebugBelow {}
29
30/// How to fit the image into the bounds of the element.
31pub enum ObjectFit {
32    /// The image will be stretched to fill the bounds of the element.
33    Fill,
34    /// The image will be scaled to fit within the bounds of the element.
35    Contain,
36    /// The image will be scaled to cover the bounds of the element.
37    Cover,
38    /// The image will be scaled down to fit within the bounds of the element.
39    ScaleDown,
40    /// The image will maintain its original size.
41    None,
42}
43
44impl ObjectFit {
45    /// Get the bounds of the image within the given bounds.
46    pub fn get_bounds(
47        &self,
48        bounds: Bounds<Pixels>,
49        image_size: Size<DevicePixels>,
50    ) -> Bounds<Pixels> {
51        let image_size = image_size.map(|dimension| Pixels::from(u32::from(dimension)));
52        let image_ratio = image_size.width / image_size.height;
53        let bounds_ratio = bounds.size.width / bounds.size.height;
54
55        match self {
56            ObjectFit::Fill => bounds,
57            ObjectFit::Contain => {
58                let new_size = if bounds_ratio > image_ratio {
59                    size(
60                        image_size.width * (bounds.size.height / image_size.height),
61                        bounds.size.height,
62                    )
63                } else {
64                    size(
65                        bounds.size.width,
66                        image_size.height * (bounds.size.width / image_size.width),
67                    )
68                };
69
70                Bounds {
71                    origin: point(
72                        bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
73                        bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
74                    ),
75                    size: new_size,
76                }
77            }
78            ObjectFit::ScaleDown => {
79                // Check if the image is larger than the bounds in either dimension.
80                if image_size.width > bounds.size.width || image_size.height > bounds.size.height {
81                    // If the image is larger, use the same logic as Contain to scale it down.
82                    let new_size = if bounds_ratio > image_ratio {
83                        size(
84                            image_size.width * (bounds.size.height / image_size.height),
85                            bounds.size.height,
86                        )
87                    } else {
88                        size(
89                            bounds.size.width,
90                            image_size.height * (bounds.size.width / image_size.width),
91                        )
92                    };
93
94                    Bounds {
95                        origin: point(
96                            bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
97                            bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
98                        ),
99                        size: new_size,
100                    }
101                } else {
102                    // If the image is smaller than or equal to the container, display it at its original size,
103                    // centered within the container.
104                    let original_size = size(image_size.width, image_size.height);
105                    Bounds {
106                        origin: point(
107                            bounds.origin.x + (bounds.size.width - original_size.width) / 2.0,
108                            bounds.origin.y + (bounds.size.height - original_size.height) / 2.0,
109                        ),
110                        size: original_size,
111                    }
112                }
113            }
114            ObjectFit::Cover => {
115                let new_size = if bounds_ratio > image_ratio {
116                    size(
117                        bounds.size.width,
118                        image_size.height * (bounds.size.width / image_size.width),
119                    )
120                } else {
121                    size(
122                        image_size.width * (bounds.size.height / image_size.height),
123                        bounds.size.height,
124                    )
125                };
126
127                Bounds {
128                    origin: point(
129                        bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
130                        bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
131                    ),
132                    size: new_size,
133                }
134            }
135            ObjectFit::None => Bounds {
136                origin: bounds.origin,
137                size: image_size,
138            },
139        }
140    }
141}
142
143/// The CSS styling that can be applied to an element via the `Styled` trait
144#[derive(Clone, Refineable, Debug)]
145#[refineable(Debug, PartialEq, Serialize, Deserialize, JsonSchema)]
146pub struct Style {
147    /// What layout strategy should be used?
148    pub display: Display,
149
150    /// Should the element be painted on screen?
151    pub visibility: Visibility,
152
153    // Overflow properties
154    /// How children overflowing their container should affect layout
155    #[refineable]
156    pub overflow: Point<Overflow>,
157    /// How much space (in points) should be reserved for the scrollbars of `Overflow::Scroll` and `Overflow::Auto` nodes.
158    pub scrollbar_width: AbsoluteLength,
159    /// Whether both x and y axis should be scrollable at the same time.
160    pub allow_concurrent_scroll: bool,
161    /// Whether scrolling should be restricted to the axis indicated by the mouse wheel.
162    ///
163    /// This means that:
164    /// - The mouse wheel alone will only ever scroll the Y axis.
165    /// - Holding `Shift` and using the mouse wheel will scroll the X axis.
166    ///
167    /// ## Motivation
168    ///
169    /// On the web when scrolling with the mouse wheel, scrolling up and down will always scroll the Y axis, even when
170    /// the mouse is over a horizontally-scrollable element.
171    ///
172    /// The only way to scroll horizontally is to hold down `Shift` while scrolling, which then changes the scroll axis
173    /// to the X axis.
174    ///
175    /// Currently, GPUI operates differently from the web in that it will scroll an element in either the X or Y axis
176    /// when scrolling with just the mouse wheel. This causes problems when scrolling in a vertical list that contains
177    /// horizontally-scrollable elements, as when you get to the horizontally-scrollable elements the scroll will be
178    /// hijacked.
179    ///
180    /// Ideally we would match the web's behavior and not have a need for this, but right now we're adding this opt-in
181    /// style property to limit the potential blast radius.
182    pub restrict_scroll_to_axis: bool,
183
184    // Position properties
185    /// What should the `position` value of this struct use as a base offset?
186    pub position: Position,
187    /// How should the position of this element be tweaked relative to the layout defined?
188    #[refineable]
189    pub inset: Edges<Length>,
190
191    // Size properties
192    /// Sets the initial size of the item
193    #[refineable]
194    pub size: Size<Length>,
195    /// Controls the minimum size of the item
196    #[refineable]
197    pub min_size: Size<Length>,
198    /// Controls the maximum size of the item
199    #[refineable]
200    pub max_size: Size<Length>,
201    /// Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height.
202    pub aspect_ratio: Option<f32>,
203
204    // Spacing Properties
205    /// How large should the margin be on each side?
206    #[refineable]
207    pub margin: Edges<Length>,
208    /// How large should the padding be on each side?
209    #[refineable]
210    pub padding: Edges<DefiniteLength>,
211    /// How large should the border be on each side?
212    #[refineable]
213    pub border_widths: Edges<AbsoluteLength>,
214
215    // Alignment properties
216    /// How this node's children aligned in the cross/block axis?
217    pub align_items: Option<AlignItems>,
218    /// How this node should be aligned in the cross/block axis. Falls back to the parents [`AlignItems`] if not set
219    pub align_self: Option<AlignSelf>,
220    /// How should content contained within this item be aligned in the cross/block axis
221    pub align_content: Option<AlignContent>,
222    /// How should contained within this item be aligned in the main/inline axis
223    pub justify_content: Option<JustifyContent>,
224    /// How large should the gaps between items in a flex container be?
225    #[refineable]
226    pub gap: Size<DefiniteLength>,
227
228    // Flexbox properties
229    /// Which direction does the main axis flow in?
230    pub flex_direction: FlexDirection,
231    /// Should elements wrap, or stay in a single line?
232    pub flex_wrap: FlexWrap,
233    /// Sets the initial main axis size of the item
234    pub flex_basis: Length,
235    /// 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.
236    pub flex_grow: f32,
237    /// 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.
238    pub flex_shrink: f32,
239
240    /// The fill color of this element
241    pub background: Option<Fill>,
242
243    /// The border color of this element
244    pub border_color: Option<Hsla>,
245
246    /// The border style of this element
247    pub border_style: BorderStyle,
248
249    /// The radius of the corners of this element
250    #[refineable]
251    pub corner_radii: Corners<AbsoluteLength>,
252
253    /// Whether to use continuous (squircle) corner rounding instead of circular.
254    pub continuous_corners: bool,
255
256    /// The blend mode to apply when rendering this element's background.
257    pub blend_mode: Option<BlendMode>,
258
259    /// Box shadow of the element
260    pub box_shadow: SmallVec<[BoxShadow; 1]>,
261
262    /// The text style of this element
263    pub text: TextStyleRefinement,
264
265    /// The mouse cursor style shown when the mouse pointer is over an element.
266    pub mouse_cursor: Option<CursorStyle>,
267
268    /// The opacity of this element
269    pub opacity: Option<f32>,
270
271    /// Rotation in radians (clockwise).
272    pub rotate: Option<f32>,
273
274    /// Scale factor (x, y). Defaults to (1.0, 1.0) when not set.
275    pub scale: Option<Point<f32>>,
276
277    /// Transform origin as fraction of element size (0.0-1.0). Defaults to center (0.5, 0.5).
278    pub transform_origin: Option<Point<f32>>,
279
280    /// The grid columns of this element
281    /// Equivalent to the Tailwind `grid-cols-<number>`
282    pub grid_cols: Option<u16>,
283
284    /// The row span of this element
285    /// Equivalent to the Tailwind `grid-rows-<number>`
286    pub grid_rows: Option<u16>,
287
288    /// The grid location of this element
289    pub grid_location: Option<GridLocation>,
290
291    /// Whether to draw a red debugging outline around this element
292    #[cfg(debug_assertions)]
293    pub debug: bool,
294
295    /// Whether to draw a red debugging outline around this element and all of its conforming children
296    #[cfg(debug_assertions)]
297    pub debug_below: bool,
298}
299
300impl Styled for StyleRefinement {
301    fn style(&mut self) -> &mut StyleRefinement {
302        self
303    }
304}
305
306impl StyleRefinement {
307    /// The grid location of this element
308    pub fn grid_location_mut(&mut self) -> &mut GridLocation {
309        self.grid_location.get_or_insert_default()
310    }
311}
312
313/// The value of the visibility property, similar to the CSS property `visibility`
314#[derive(Default, Clone, Copy, Debug, Eq, PartialEq, Serialize, Deserialize, JsonSchema)]
315pub enum Visibility {
316    /// The element should be drawn as normal.
317    #[default]
318    Visible,
319    /// The element should not be drawn, but should still take up space in the layout.
320    Hidden,
321}
322
323/// The possible values of the box-shadow property
324#[derive(Clone, Debug, PartialEq, Serialize, Deserialize, JsonSchema)]
325pub struct BoxShadow {
326    /// What color should the shadow have?
327    pub color: Hsla,
328    /// How should it be offset from its element?
329    pub offset: Point<Pixels>,
330    /// How much should the shadow be blurred?
331    pub blur_radius: Pixels,
332    /// How much should the shadow spread?
333    pub spread_radius: Pixels,
334    /// Should the shadow render inside the element bounds?
335    pub inset: bool,
336}
337
338/// How to handle whitespace in text
339#[derive(Copy, Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize, JsonSchema)]
340pub enum WhiteSpace {
341    /// Normal line wrapping when text overflows the width of the element
342    #[default]
343    Normal,
344    /// No line wrapping, text will overflow the width of the element
345    Nowrap,
346}
347
348/// How to truncate text that overflows the width of the element
349#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize, JsonSchema)]
350pub enum TextOverflow {
351    /// Truncate the text when it doesn't fit, and represent this truncation by displaying the
352    /// provided string.
353    Truncate(SharedString),
354}
355
356/// How to align text within the element
357#[derive(Copy, Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize, JsonSchema)]
358pub enum TextAlign {
359    /// Align the text to the left of the element
360    #[default]
361    Left,
362
363    /// Center the text within the element
364    Center,
365
366    /// Align the text to the right of the element
367    Right,
368}
369
370/// A shadow effect applied to text, rendered by painting glyphs twice.
371#[derive(Clone, Debug, PartialEq, Serialize, Deserialize, JsonSchema)]
372pub struct TextShadow {
373    /// The color of the text shadow
374    pub color: Hsla,
375    /// How far the shadow is offset from the text
376    pub offset: Point<Pixels>,
377    /// The blur radius of the shadow (approximated via opacity reduction)
378    pub blur_radius: Pixels,
379}
380
381/// The properties that can be used to style text in GPUI
382#[derive(Refineable, Clone, Debug, PartialEq)]
383#[refineable(Debug, PartialEq, Serialize, Deserialize, JsonSchema)]
384pub struct TextStyle {
385    /// The color of the text
386    pub color: Hsla,
387
388    /// The font family to use
389    pub font_family: SharedString,
390
391    /// The font features to use
392    pub font_features: FontFeatures,
393
394    /// The fallback fonts to use
395    pub font_fallbacks: Option<FontFallbacks>,
396
397    /// The font size to use, in pixels or rems.
398    pub font_size: AbsoluteLength,
399
400    /// The line height to use, in pixels or fractions
401    pub line_height: DefiniteLength,
402
403    /// The font weight, e.g. bold
404    pub font_weight: FontWeight,
405
406    /// The font style, e.g. italic
407    pub font_style: FontStyle,
408
409    /// The background color of the text
410    pub background_color: Option<Hsla>,
411
412    /// The underline style of the text
413    pub underline: Option<UnderlineStyle>,
414
415    /// The strikethrough style of the text
416    pub strikethrough: Option<StrikethroughStyle>,
417
418    /// How to handle whitespace in the text
419    pub white_space: WhiteSpace,
420
421    /// The text should be truncated if it overflows the width of the element
422    pub text_overflow: Option<TextOverflow>,
423
424    /// How the text should be aligned within the element
425    pub text_align: TextAlign,
426
427    /// Additional spacing between characters (letter-spacing/tracking)
428    pub letter_spacing: Option<Pixels>,
429
430    /// The number of lines to display before truncating the text
431    pub line_clamp: Option<usize>,
432
433    /// A shadow effect rendered behind the text
434    pub text_shadow: Option<TextShadow>,
435}
436
437impl Default for TextStyle {
438    fn default() -> Self {
439        TextStyle {
440            color: black(),
441            // todo(linux) make this configurable or choose better default
442            font_family: if cfg!(any(target_os = "linux", target_os = "freebsd")) {
443                "FreeMono".into()
444            } else if cfg!(target_os = "windows") {
445                "Segoe UI".into()
446            } else {
447                "Helvetica".into()
448            },
449            font_features: FontFeatures::default(),
450            font_fallbacks: None,
451            font_size: rems(1.).into(),
452            line_height: phi(),
453            font_weight: FontWeight::default(),
454            font_style: FontStyle::default(),
455            background_color: None,
456            underline: None,
457            strikethrough: None,
458            white_space: WhiteSpace::Normal,
459            text_overflow: None,
460            text_align: TextAlign::default(),
461            letter_spacing: None,
462            line_clamp: None,
463            text_shadow: None,
464        }
465    }
466}
467
468impl TextStyle {
469    /// Create a new text style with the given highlighting applied.
470    pub fn highlight(mut self, style: impl Into<HighlightStyle>) -> Self {
471        let style = style.into();
472        if let Some(weight) = style.font_weight {
473            self.font_weight = weight;
474        }
475        if let Some(style) = style.font_style {
476            self.font_style = style;
477        }
478
479        if let Some(color) = style.color {
480            self.color = self.color.blend(color);
481        }
482
483        if let Some(factor) = style.fade_out {
484            self.color.fade_out(factor);
485        }
486
487        if let Some(background_color) = style.background_color {
488            self.background_color = Some(background_color);
489        }
490
491        if let Some(underline) = style.underline {
492            self.underline = Some(underline);
493        }
494
495        if let Some(strikethrough) = style.strikethrough {
496            self.strikethrough = Some(strikethrough);
497        }
498
499        self
500    }
501
502    /// Get the font configured for this text style.
503    pub fn font(&self) -> Font {
504        Font {
505            family: self.font_family.clone(),
506            features: self.font_features.clone(),
507            fallbacks: self.font_fallbacks.clone(),
508            weight: self.font_weight,
509            style: self.font_style,
510        }
511    }
512
513    /// Returns the rounded line height in pixels.
514    pub fn line_height_in_pixels(&self, rem_size: Pixels) -> Pixels {
515        self.line_height.to_pixels(self.font_size, rem_size).round()
516    }
517
518    /// Convert this text style into a [`TextRun`], for the given length of the text.
519    pub fn to_run(&self, len: usize) -> TextRun {
520        TextRun {
521            len,
522            font: Font {
523                family: self.font_family.clone(),
524                features: self.font_features.clone(),
525                fallbacks: self.font_fallbacks.clone(),
526                weight: self.font_weight,
527                style: self.font_style,
528            },
529            color: self.color,
530            background_color: self.background_color,
531            underline: self.underline,
532            strikethrough: self.strikethrough,
533        }
534    }
535}
536
537/// A highlight style to apply, similar to a `TextStyle` except
538/// for a single font, uniformly sized and spaced text.
539#[derive(Copy, Clone, Debug, Default, PartialEq)]
540pub struct HighlightStyle {
541    /// The color of the text
542    pub color: Option<Hsla>,
543
544    /// The font weight, e.g. bold
545    pub font_weight: Option<FontWeight>,
546
547    /// The font style, e.g. italic
548    pub font_style: Option<FontStyle>,
549
550    /// The background color of the text
551    pub background_color: Option<Hsla>,
552
553    /// The underline style of the text
554    pub underline: Option<UnderlineStyle>,
555
556    /// The underline style of the text
557    pub strikethrough: Option<StrikethroughStyle>,
558
559    /// Similar to the CSS `opacity` property, this will cause the text to be less vibrant.
560    pub fade_out: Option<f32>,
561}
562
563impl Eq for HighlightStyle {}
564
565impl Hash for HighlightStyle {
566    fn hash<H: Hasher>(&self, state: &mut H) {
567        self.color.hash(state);
568        self.font_weight.hash(state);
569        self.font_style.hash(state);
570        self.background_color.hash(state);
571        self.underline.hash(state);
572        self.strikethrough.hash(state);
573        state.write_u32(u32::from_be_bytes(
574            self.fade_out.map(|f| f.to_be_bytes()).unwrap_or_default(),
575        ));
576    }
577}
578
579impl Style {
580    /// Returns true if the style is visible and the background is opaque.
581    pub fn has_opaque_background(&self) -> bool {
582        self.background
583            .as_ref()
584            .is_some_and(|fill| fill.color().is_some_and(|color| !color.is_transparent()))
585    }
586
587    /// Get the text style in this element style.
588    pub fn text_style(&self) -> Option<&TextStyleRefinement> {
589        if self.text.is_some() {
590            Some(&self.text)
591        } else {
592            None
593        }
594    }
595
596    /// Get the content mask for this element style, based on the given bounds.
597    /// If the element does not hide its overflow, this will return `None`.
598    pub fn overflow_mask(
599        &self,
600        bounds: Bounds<Pixels>,
601        rem_size: Pixels,
602    ) -> Option<ContentMask<Pixels>> {
603        match self.overflow {
604            Point {
605                x: Overflow::Visible,
606                y: Overflow::Visible,
607            } => None,
608            _ => {
609                let mut min = bounds.origin;
610                let mut max = bounds.bottom_right();
611
612                if self
613                    .border_color
614                    .is_some_and(|color| !color.is_transparent())
615                {
616                    min.x += self.border_widths.left.to_pixels(rem_size);
617                    max.x -= self.border_widths.right.to_pixels(rem_size);
618                    min.y += self.border_widths.top.to_pixels(rem_size);
619                    max.y -= self.border_widths.bottom.to_pixels(rem_size);
620                }
621
622                let bounds = match (
623                    self.overflow.x == Overflow::Visible,
624                    self.overflow.y == Overflow::Visible,
625                ) {
626                    // x and y both visible
627                    (true, true) => return None,
628                    // x visible, y hidden
629                    (true, false) => Bounds::from_corners(
630                        point(min.x, bounds.origin.y),
631                        point(max.x, bounds.bottom_right().y),
632                    ),
633                    // x hidden, y visible
634                    (false, true) => Bounds::from_corners(
635                        point(bounds.origin.x, min.y),
636                        point(bounds.bottom_right().x, max.y),
637                    ),
638                    // both hidden
639                    (false, false) => Bounds::from_corners(min, max),
640                };
641
642                Some(ContentMask { bounds })
643            }
644        }
645    }
646
647    /// Paints the background of an element styled with this style.
648    pub fn paint(
649        &self,
650        bounds: Bounds<Pixels>,
651        window: &mut Window,
652        cx: &mut App,
653        continuation: impl FnOnce(&mut Window, &mut App),
654    ) {
655        #[cfg(debug_assertions)]
656        if self.debug_below {
657            cx.set_global(DebugBelow)
658        }
659
660        #[cfg(debug_assertions)]
661        if self.debug || cx.has_global::<DebugBelow>() {
662            window.paint_quad(crate::outline(bounds, crate::red(), BorderStyle::default()));
663        }
664
665        let rem_size = window.rem_size();
666        let corner_radii = self
667            .corner_radii
668            .to_pixels(rem_size)
669            .clamp_radii_for_quad_size(bounds.size);
670
671        let transform = self.compose_transform(bounds);
672
673        window.paint_shadows(bounds, corner_radii, &self.box_shadow);
674
675        let background_color = self.background.as_ref().and_then(Fill::color);
676        if background_color.is_some_and(|color| !color.is_transparent()) {
677            let mut border_color = match background_color {
678                Some(color) => match color.tag {
679                    BackgroundTag::Solid => color.solid,
680                    BackgroundTag::LinearGradient
681                    | BackgroundTag::RadialGradient
682                    | BackgroundTag::ConicGradient => color
683                        .colors
684                        .first()
685                        .map(|stop| stop.color)
686                        .unwrap_or_default(),
687                    BackgroundTag::PatternSlash => color.solid,
688                },
689                None => Hsla::default(),
690            };
691            border_color.a = 0.;
692            let mut bg_quad = quad(
693                bounds,
694                corner_radii,
695                background_color.unwrap_or_default(),
696                Edges::default(),
697                border_color,
698                self.border_style,
699            );
700            bg_quad.continuous_corners = self.continuous_corners;
701            bg_quad.transform = transform;
702            bg_quad.blend_mode = self.blend_mode.unwrap_or_default();
703            window.paint_quad(bg_quad);
704        }
705
706        continuation(window, cx);
707
708        if self.is_border_visible() {
709            let border_widths = self.border_widths.to_pixels(rem_size);
710            let max_border_width = border_widths.max();
711            let max_corner_radius = corner_radii.max();
712
713            let top_bounds = Bounds::from_corners(
714                bounds.origin,
715                bounds.top_right() + point(Pixels::ZERO, max_border_width.max(max_corner_radius)),
716            );
717            let bottom_bounds = Bounds::from_corners(
718                bounds.bottom_left() - point(Pixels::ZERO, max_border_width.max(max_corner_radius)),
719                bounds.bottom_right(),
720            );
721            let left_bounds = Bounds::from_corners(
722                top_bounds.bottom_left(),
723                bottom_bounds.origin + point(max_border_width, Pixels::ZERO),
724            );
725            let right_bounds = Bounds::from_corners(
726                top_bounds.bottom_right() - point(max_border_width, Pixels::ZERO),
727                bottom_bounds.top_right(),
728            );
729
730            let mut background = self.border_color.unwrap_or_default();
731            background.a = 0.;
732            let mut quad = quad(
733                bounds,
734                corner_radii,
735                background,
736                border_widths,
737                self.border_color.unwrap_or_default(),
738                self.border_style,
739            );
740            quad.continuous_corners = self.continuous_corners;
741            quad.transform = transform;
742
743            window.with_content_mask(Some(ContentMask { bounds: top_bounds }), |window| {
744                window.paint_quad(quad.clone());
745            });
746            window.with_content_mask(
747                Some(ContentMask {
748                    bounds: right_bounds,
749                }),
750                |window| {
751                    window.paint_quad(quad.clone());
752                },
753            );
754            window.with_content_mask(
755                Some(ContentMask {
756                    bounds: bottom_bounds,
757                }),
758                |window| {
759                    window.paint_quad(quad.clone());
760                },
761            );
762            window.with_content_mask(
763                Some(ContentMask {
764                    bounds: left_bounds,
765                }),
766                |window| {
767                    window.paint_quad(quad);
768                },
769            );
770        }
771
772        #[cfg(debug_assertions)]
773        if self.debug_below {
774            cx.remove_global::<DebugBelow>();
775        }
776    }
777
778    fn compose_transform(&self, bounds: Bounds<Pixels>) -> TransformationMatrix {
779        let has_transform = self.rotate.is_some() || self.scale.is_some();
780        if !has_transform {
781            return TransformationMatrix::unit();
782        }
783
784        let origin_frac = self.transform_origin.unwrap_or(Point { x: 0.5, y: 0.5 });
785        let cx = bounds.origin.x.0 + bounds.size.width.0 * origin_frac.x;
786        let cy = bounds.origin.y.0 + bounds.size.height.0 * origin_frac.y;
787
788        let mut t = TransformationMatrix::unit();
789
790        if let Some(scale) = self.scale {
791            t = t.scale(crate::Size {
792                width: scale.x,
793                height: scale.y,
794            });
795        }
796        if let Some(rotate) = self.rotate {
797            t = t.rotate(Radians(rotate));
798        }
799
800        let neg_origin = TransformationMatrix {
801            rotation_scale: [[1.0, 0.0], [0.0, 1.0]],
802            translation: [-cx, -cy],
803        };
804        let pos_origin = TransformationMatrix {
805            rotation_scale: [[1.0, 0.0], [0.0, 1.0]],
806            translation: [cx, cy],
807        };
808        pos_origin.compose(t.compose(neg_origin))
809    }
810
811    fn is_border_visible(&self) -> bool {
812        self.border_color
813            .is_some_and(|color| !color.is_transparent())
814            && self.border_widths.any(|length| !length.is_zero())
815    }
816}
817
818impl Default for Style {
819    fn default() -> Self {
820        Style {
821            display: Display::Block,
822            visibility: Visibility::Visible,
823            overflow: Point {
824                x: Overflow::Visible,
825                y: Overflow::Visible,
826            },
827            allow_concurrent_scroll: false,
828            restrict_scroll_to_axis: false,
829            scrollbar_width: AbsoluteLength::default(),
830            position: Position::Relative,
831            inset: Edges::auto(),
832            margin: Edges::<Length>::zero(),
833            padding: Edges::<DefiniteLength>::zero(),
834            border_widths: Edges::<AbsoluteLength>::zero(),
835            size: Size::auto(),
836            min_size: Size::auto(),
837            max_size: Size::auto(),
838            aspect_ratio: None,
839            gap: Size::default(),
840            // Alignment
841            align_items: None,
842            align_self: None,
843            align_content: None,
844            justify_content: None,
845            // Flexbox
846            flex_direction: FlexDirection::Row,
847            flex_wrap: FlexWrap::NoWrap,
848            flex_grow: 0.0,
849            flex_shrink: 1.0,
850            flex_basis: Length::Auto,
851            background: None,
852            border_color: None,
853            border_style: BorderStyle::default(),
854            corner_radii: Corners::default(),
855            continuous_corners: false,
856            blend_mode: None,
857            box_shadow: Default::default(),
858            text: TextStyleRefinement::default(),
859            mouse_cursor: None,
860            opacity: None,
861            rotate: None,
862            scale: None,
863            transform_origin: None,
864            grid_rows: None,
865            grid_cols: None,
866            grid_location: None,
867
868            #[cfg(debug_assertions)]
869            debug: false,
870            #[cfg(debug_assertions)]
871            debug_below: false,
872        }
873    }
874}
875
876/// The properties that can be applied to an underline.
877#[derive(
878    Refineable, Copy, Clone, Default, Debug, PartialEq, Eq, Hash, Serialize, Deserialize, JsonSchema,
879)]
880pub struct UnderlineStyle {
881    /// The thickness of the underline.
882    pub thickness: Pixels,
883
884    /// The color of the underline.
885    pub color: Option<Hsla>,
886
887    /// Whether the underline should be wavy, like in a spell checker.
888    pub wavy: bool,
889}
890
891/// The properties that can be applied to a strikethrough.
892#[derive(
893    Refineable, Copy, Clone, Default, Debug, PartialEq, Eq, Hash, Serialize, Deserialize, JsonSchema,
894)]
895pub struct StrikethroughStyle {
896    /// The thickness of the strikethrough.
897    pub thickness: Pixels,
898
899    /// The color of the strikethrough.
900    pub color: Option<Hsla>,
901}
902
903/// The kinds of fill that can be applied to a shape.
904#[derive(Clone, Debug, PartialEq, Serialize, Deserialize, JsonSchema)]
905pub enum Fill {
906    /// A solid color fill.
907    Color(Background),
908}
909
910impl Fill {
911    /// Unwrap this fill into a solid color, if it is one.
912    ///
913    /// If the fill is not a solid color, this method returns `None`.
914    pub fn color(&self) -> Option<Background> {
915        match self {
916            Fill::Color(color) => Some(*color),
917        }
918    }
919}
920
921impl Default for Fill {
922    fn default() -> Self {
923        Self::Color(Background::default())
924    }
925}
926
927impl From<Hsla> for Fill {
928    fn from(color: Hsla) -> Self {
929        Self::Color(color.into())
930    }
931}
932
933impl From<Rgba> for Fill {
934    fn from(color: Rgba) -> Self {
935        Self::Color(color.into())
936    }
937}
938
939impl From<Background> for Fill {
940    fn from(background: Background) -> Self {
941        Self::Color(background)
942    }
943}
944
945impl From<TextStyle> for HighlightStyle {
946    fn from(other: TextStyle) -> Self {
947        Self::from(&other)
948    }
949}
950
951impl From<&TextStyle> for HighlightStyle {
952    fn from(other: &TextStyle) -> Self {
953        Self {
954            color: Some(other.color),
955            font_weight: Some(other.font_weight),
956            font_style: Some(other.font_style),
957            background_color: other.background_color,
958            underline: other.underline,
959            strikethrough: other.strikethrough,
960            fade_out: None,
961        }
962    }
963}
964
965impl HighlightStyle {
966    /// Create a highlight style with just a color
967    pub fn color(color: Hsla) -> Self {
968        Self {
969            color: Some(color),
970            ..Default::default()
971        }
972    }
973    /// Blend this highlight style with another.
974    /// Non-continuous properties, like font_weight and font_style, are overwritten.
975    #[must_use]
976    pub fn highlight(self, other: HighlightStyle) -> Self {
977        Self {
978            color: other
979                .color
980                .map(|other_color| {
981                    if let Some(color) = self.color {
982                        color.blend(other_color)
983                    } else {
984                        other_color
985                    }
986                })
987                .or(self.color),
988            font_weight: other.font_weight.or(self.font_weight),
989            font_style: other.font_style.or(self.font_style),
990            background_color: other.background_color.or(self.background_color),
991            underline: other.underline.or(self.underline),
992            strikethrough: other.strikethrough.or(self.strikethrough),
993            fade_out: other
994                .fade_out
995                .map(|source_fade| {
996                    self.fade_out
997                        .map(|dest_fade| (dest_fade * (1. + source_fade)).clamp(0., 1.))
998                        .unwrap_or(source_fade)
999                })
1000                .or(self.fade_out),
1001        }
1002    }
1003}
1004
1005impl From<Hsla> for HighlightStyle {
1006    fn from(color: Hsla) -> Self {
1007        Self {
1008            color: Some(color),
1009            ..Default::default()
1010        }
1011    }
1012}
1013
1014impl From<FontWeight> for HighlightStyle {
1015    fn from(font_weight: FontWeight) -> Self {
1016        Self {
1017            font_weight: Some(font_weight),
1018            ..Default::default()
1019        }
1020    }
1021}
1022
1023impl From<FontStyle> for HighlightStyle {
1024    fn from(font_style: FontStyle) -> Self {
1025        Self {
1026            font_style: Some(font_style),
1027            ..Default::default()
1028        }
1029    }
1030}
1031
1032impl From<Rgba> for HighlightStyle {
1033    fn from(color: Rgba) -> Self {
1034        Self {
1035            color: Some(color.into()),
1036            ..Default::default()
1037        }
1038    }
1039}
1040
1041/// Combine and merge the highlights and ranges in the two iterators.
1042pub fn combine_highlights(
1043    a: impl IntoIterator<Item = (Range<usize>, HighlightStyle)>,
1044    b: impl IntoIterator<Item = (Range<usize>, HighlightStyle)>,
1045) -> impl Iterator<Item = (Range<usize>, HighlightStyle)> {
1046    let mut endpoints = Vec::new();
1047    let mut highlights = Vec::new();
1048    for (range, highlight) in a.into_iter().chain(b) {
1049        if !range.is_empty() {
1050            let highlight_id = highlights.len();
1051            endpoints.push((range.start, highlight_id, true));
1052            endpoints.push((range.end, highlight_id, false));
1053            highlights.push(highlight);
1054        }
1055    }
1056    endpoints.sort_unstable_by_key(|(position, _, _)| *position);
1057    let mut endpoints = endpoints.into_iter().peekable();
1058
1059    let mut active_styles = HashSet::default();
1060    let mut ix = 0;
1061    iter::from_fn(move || {
1062        while let Some((endpoint_ix, highlight_id, is_start)) = endpoints.peek() {
1063            let prev_index = mem::replace(&mut ix, *endpoint_ix);
1064            if ix > prev_index && !active_styles.is_empty() {
1065                let current_style = active_styles
1066                    .iter()
1067                    .fold(HighlightStyle::default(), |acc, highlight_id| {
1068                        acc.highlight(highlights[*highlight_id])
1069                    });
1070                return Some((prev_index..ix, current_style));
1071            }
1072
1073            if *is_start {
1074                active_styles.insert(*highlight_id);
1075            } else {
1076                active_styles.remove(highlight_id);
1077            }
1078            endpoints.next();
1079        }
1080        None
1081    })
1082}
1083
1084/// Used to control how child nodes are aligned.
1085/// For Flexbox it controls alignment in the cross axis
1086/// For Grid it controls alignment in the block axis
1087///
1088/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
1089#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, JsonSchema)]
1090// Copy of taffy::style type of the same name, to derive JsonSchema.
1091pub enum AlignItems {
1092    /// Items are packed toward the start of the axis
1093    Start,
1094    /// Items are packed toward the end of the axis
1095    End,
1096    /// Items are packed towards the flex-relative start of the axis.
1097    ///
1098    /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
1099    /// to End. In all other cases it is equivalent to Start.
1100    FlexStart,
1101    /// Items are packed towards the flex-relative end of the axis.
1102    ///
1103    /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
1104    /// to Start. In all other cases it is equivalent to End.
1105    FlexEnd,
1106    /// Items are packed along the center of the cross axis
1107    Center,
1108    /// Items are aligned such as their baselines align
1109    Baseline,
1110    /// Stretch to fill the container
1111    Stretch,
1112}
1113/// Used to control how child nodes are aligned.
1114/// Does not apply to Flexbox, and will be ignored if specified on a flex container
1115/// For Grid it controls alignment in the inline axis
1116///
1117/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
1118pub type JustifyItems = AlignItems;
1119/// Used to control how the specified nodes is aligned.
1120/// Overrides the parent Node's `AlignItems` property.
1121/// For Flexbox it controls alignment in the cross axis
1122/// For Grid it controls alignment in the block axis
1123///
1124/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
1125pub type AlignSelf = AlignItems;
1126/// Used to control how the specified nodes is aligned.
1127/// Overrides the parent Node's `JustifyItems` property.
1128/// Does not apply to Flexbox, and will be ignored if specified on a flex child
1129/// For Grid it controls alignment in the inline axis
1130///
1131/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
1132pub type JustifySelf = AlignItems;
1133
1134/// Sets the distribution of space between and around content items
1135/// For Flexbox it controls alignment in the cross axis
1136/// For Grid it controls alignment in the block axis
1137///
1138/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
1139#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, JsonSchema)]
1140// Copy of taffy::style type of the same name, to derive JsonSchema.
1141pub enum AlignContent {
1142    /// Items are packed toward the start of the axis
1143    Start,
1144    /// Items are packed toward the end of the axis
1145    End,
1146    /// Items are packed towards the flex-relative start of the axis.
1147    ///
1148    /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
1149    /// to End. In all other cases it is equivalent to Start.
1150    FlexStart,
1151    /// Items are packed towards the flex-relative end of the axis.
1152    ///
1153    /// For flex containers with flex_direction RowReverse or ColumnReverse this is equivalent
1154    /// to Start. In all other cases it is equivalent to End.
1155    FlexEnd,
1156    /// Items are centered around the middle of the axis
1157    Center,
1158    /// Items are stretched to fill the container
1159    Stretch,
1160    /// The first and last items are aligned flush with the edges of the container (no gap)
1161    /// The gap between items is distributed evenly.
1162    SpaceBetween,
1163    /// The gap between the first and last items is exactly THE SAME as the gap between items.
1164    /// The gaps are distributed evenly
1165    SpaceEvenly,
1166    /// The gap between the first and last items is exactly HALF the gap between items.
1167    /// The gaps are distributed evenly in proportion to these ratios.
1168    SpaceAround,
1169}
1170
1171/// Sets the distribution of space between and around content items
1172/// For Flexbox it controls alignment in the main axis
1173/// For Grid it controls alignment in the inline axis
1174///
1175/// [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
1176pub type JustifyContent = AlignContent;
1177
1178/// Sets the layout used for the children of this node
1179///
1180/// The default values depends on on which feature flags are enabled. The order of precedence is: Flex, Grid, Block, None.
1181#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, JsonSchema)]
1182// Copy of taffy::style type of the same name, to derive JsonSchema.
1183pub enum Display {
1184    /// The children will follow the block layout algorithm
1185    Block,
1186    /// The children will follow the flexbox layout algorithm
1187    #[default]
1188    Flex,
1189    /// The children will follow the CSS Grid layout algorithm
1190    Grid,
1191    /// The children will not be laid out, and will follow absolute positioning
1192    None,
1193}
1194
1195/// Controls whether flex items are forced onto one line or can wrap onto multiple lines.
1196///
1197/// Defaults to [`FlexWrap::NoWrap`]
1198///
1199/// [Specification](https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property)
1200#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, JsonSchema)]
1201// Copy of taffy::style type of the same name, to derive JsonSchema.
1202pub enum FlexWrap {
1203    /// Items will not wrap and stay on a single line
1204    #[default]
1205    NoWrap,
1206    /// Items will wrap according to this item's [`FlexDirection`]
1207    Wrap,
1208    /// Items will wrap in the opposite direction to this item's [`FlexDirection`]
1209    WrapReverse,
1210}
1211
1212/// The direction of the flexbox layout main axis.
1213///
1214/// There are always two perpendicular layout axes: main (or primary) and cross (or secondary).
1215/// Adding items will cause them to be positioned adjacent to each other along the main axis.
1216/// By varying this value throughout your tree, you can create complex axis-aligned layouts.
1217///
1218/// Items are always aligned relative to the cross axis, and justified relative to the main axis.
1219///
1220/// The default behavior is [`FlexDirection::Row`].
1221///
1222/// [Specification](https://www.w3.org/TR/css-flexbox-1/#flex-direction-property)
1223#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, JsonSchema)]
1224// Copy of taffy::style type of the same name, to derive JsonSchema.
1225pub enum FlexDirection {
1226    /// Defines +x as the main axis
1227    ///
1228    /// Items will be added from left to right in a row.
1229    #[default]
1230    Row,
1231    /// Defines +y as the main axis
1232    ///
1233    /// Items will be added from top to bottom in a column.
1234    Column,
1235    /// Defines -x as the main axis
1236    ///
1237    /// Items will be added from right to left in a row.
1238    RowReverse,
1239    /// Defines -y as the main axis
1240    ///
1241    /// Items will be added from bottom to top in a column.
1242    ColumnReverse,
1243}
1244
1245/// How children overflowing their container should affect layout
1246///
1247/// In CSS the primary effect of this property is to control whether contents of a parent container that overflow that container should
1248/// be displayed anyway, be clipped, or trigger the container to become a scroll container. However it also has secondary effects on layout,
1249/// the main ones being:
1250///
1251///   - The automatic minimum size Flexbox/CSS Grid items with non-`Visible` overflow is `0` rather than being content based
1252///   - `Overflow::Scroll` nodes have space in the layout reserved for a scrollbar (width controlled by the `scrollbar_width` property)
1253///
1254/// In Taffy, we only implement the layout related secondary effects as we are not concerned with drawing/painting. The amount of space reserved for
1255/// a scrollbar is controlled by the `scrollbar_width` property. If this is `0` then `Scroll` behaves identically to `Hidden`.
1256///
1257/// <https://developer.mozilla.org/en-US/docs/Web/CSS/overflow>
1258#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, JsonSchema)]
1259// Copy of taffy::style type of the same name, to derive JsonSchema.
1260pub enum Overflow {
1261    /// The automatic minimum size of this node as a flexbox/grid item should be based on the size of its content.
1262    /// Content that overflows this node *should* contribute to the scroll region of its parent.
1263    #[default]
1264    Visible,
1265    /// The automatic minimum size of this node as a flexbox/grid item should be based on the size of its content.
1266    /// Content that overflows this node should *not* contribute to the scroll region of its parent.
1267    Clip,
1268    /// The automatic minimum size of this node as a flexbox/grid item should be `0`.
1269    /// Content that overflows this node should *not* contribute to the scroll region of its parent.
1270    Hidden,
1271    /// The automatic minimum size of this node as a flexbox/grid item should be `0`. Additionally, space should be reserved
1272    /// for a scrollbar. The amount of space reserved is controlled by the `scrollbar_width` property.
1273    /// Content that overflows this node should *not* contribute to the scroll region of its parent.
1274    Scroll,
1275}
1276
1277/// The positioning strategy for this item.
1278///
1279/// This controls both how the origin is determined for the [`Style::position`] field,
1280/// and whether or not the item will be controlled by flexbox's layout algorithm.
1281///
1282/// WARNING: this enum follows the behavior of [CSS's `position` property](https://developer.mozilla.org/en-US/docs/Web/CSS/position),
1283/// which can be unintuitive.
1284///
1285/// [`Position::Relative`] is the default value, in contrast to the default behavior in CSS.
1286#[derive(Copy, Clone, PartialEq, Eq, Debug, Default, Serialize, Deserialize, JsonSchema)]
1287// Copy of taffy::style type of the same name, to derive JsonSchema.
1288pub enum Position {
1289    /// The offset is computed relative to the final position given by the layout algorithm.
1290    /// Offsets do not affect the position of any other items; they are effectively a correction factor applied at the end.
1291    #[default]
1292    Relative,
1293    /// The offset is computed relative to this item's closest positioned ancestor, if any.
1294    /// Otherwise, it is placed relative to the origin.
1295    /// No space is created for the item in the page layout, and its size will not be altered.
1296    ///
1297    /// WARNING: to opt-out of layouting entirely, you must use [`Display::None`] instead on your [`Style`] object.
1298    Absolute,
1299}
1300
1301impl From<AlignItems> for taffy::style::AlignItems {
1302    fn from(value: AlignItems) -> Self {
1303        match value {
1304            AlignItems::Start => Self::Start,
1305            AlignItems::End => Self::End,
1306            AlignItems::FlexStart => Self::FlexStart,
1307            AlignItems::FlexEnd => Self::FlexEnd,
1308            AlignItems::Center => Self::Center,
1309            AlignItems::Baseline => Self::Baseline,
1310            AlignItems::Stretch => Self::Stretch,
1311        }
1312    }
1313}
1314
1315impl From<AlignContent> for taffy::style::AlignContent {
1316    fn from(value: AlignContent) -> Self {
1317        match value {
1318            AlignContent::Start => Self::Start,
1319            AlignContent::End => Self::End,
1320            AlignContent::FlexStart => Self::FlexStart,
1321            AlignContent::FlexEnd => Self::FlexEnd,
1322            AlignContent::Center => Self::Center,
1323            AlignContent::Stretch => Self::Stretch,
1324            AlignContent::SpaceBetween => Self::SpaceBetween,
1325            AlignContent::SpaceEvenly => Self::SpaceEvenly,
1326            AlignContent::SpaceAround => Self::SpaceAround,
1327        }
1328    }
1329}
1330
1331impl From<Display> for taffy::style::Display {
1332    fn from(value: Display) -> Self {
1333        match value {
1334            Display::Block => Self::Block,
1335            Display::Flex => Self::Flex,
1336            Display::Grid => Self::Grid,
1337            Display::None => Self::None,
1338        }
1339    }
1340}
1341
1342impl From<FlexWrap> for taffy::style::FlexWrap {
1343    fn from(value: FlexWrap) -> Self {
1344        match value {
1345            FlexWrap::NoWrap => Self::NoWrap,
1346            FlexWrap::Wrap => Self::Wrap,
1347            FlexWrap::WrapReverse => Self::WrapReverse,
1348        }
1349    }
1350}
1351
1352impl From<FlexDirection> for taffy::style::FlexDirection {
1353    fn from(value: FlexDirection) -> Self {
1354        match value {
1355            FlexDirection::Row => Self::Row,
1356            FlexDirection::Column => Self::Column,
1357            FlexDirection::RowReverse => Self::RowReverse,
1358            FlexDirection::ColumnReverse => Self::ColumnReverse,
1359        }
1360    }
1361}
1362
1363impl From<Overflow> for taffy::style::Overflow {
1364    fn from(value: Overflow) -> Self {
1365        match value {
1366            Overflow::Visible => Self::Visible,
1367            Overflow::Clip => Self::Clip,
1368            Overflow::Hidden => Self::Hidden,
1369            Overflow::Scroll => Self::Scroll,
1370        }
1371    }
1372}
1373
1374impl From<Position> for taffy::style::Position {
1375    fn from(value: Position) -> Self {
1376        match value {
1377            Position::Relative => Self::Relative,
1378            Position::Absolute => Self::Absolute,
1379        }
1380    }
1381}
1382
1383#[cfg(test)]
1384mod tests {
1385    use crate::{blue, green, px, red, yellow};
1386
1387    use super::*;
1388
1389    use util_macros::perf;
1390
1391    #[perf]
1392    fn test_basic_highlight_style_combination() {
1393        let style_a = HighlightStyle::default();
1394        let style_b = HighlightStyle::default();
1395        let style_a = style_a.highlight(style_b);
1396        assert_eq!(
1397            style_a,
1398            HighlightStyle::default(),
1399            "Combining empty styles should not produce a non-empty style."
1400        );
1401
1402        let mut style_b = HighlightStyle {
1403            color: Some(red()),
1404            strikethrough: Some(StrikethroughStyle {
1405                thickness: px(2.),
1406                color: Some(blue()),
1407            }),
1408            fade_out: Some(0.),
1409            font_style: Some(FontStyle::Italic),
1410            font_weight: Some(FontWeight(300.)),
1411            background_color: Some(yellow()),
1412            underline: Some(UnderlineStyle {
1413                thickness: px(2.),
1414                color: Some(red()),
1415                wavy: true,
1416            }),
1417        };
1418        let expected_style = style_b;
1419
1420        let style_a = style_a.highlight(style_b);
1421        assert_eq!(
1422            style_a, expected_style,
1423            "Blending an empty style with another style should return the other style"
1424        );
1425
1426        let style_b = style_b.highlight(Default::default());
1427        assert_eq!(
1428            style_b, expected_style,
1429            "Blending a style with an empty style should not change the style."
1430        );
1431
1432        let mut style_c = expected_style;
1433
1434        let style_d = HighlightStyle {
1435            color: Some(blue().alpha(0.7)),
1436            strikethrough: Some(StrikethroughStyle {
1437                thickness: px(4.),
1438                color: Some(crate::red()),
1439            }),
1440            fade_out: Some(0.),
1441            font_style: Some(FontStyle::Oblique),
1442            font_weight: Some(FontWeight(800.)),
1443            background_color: Some(green()),
1444            underline: Some(UnderlineStyle {
1445                thickness: px(4.),
1446                color: None,
1447                wavy: false,
1448            }),
1449        };
1450
1451        let expected_style = HighlightStyle {
1452            color: Some(red().blend(blue().alpha(0.7))),
1453            strikethrough: Some(StrikethroughStyle {
1454                thickness: px(4.),
1455                color: Some(red()),
1456            }),
1457            // TODO this does not seem right
1458            fade_out: Some(0.),
1459            font_style: Some(FontStyle::Oblique),
1460            font_weight: Some(FontWeight(800.)),
1461            background_color: Some(green()),
1462            underline: Some(UnderlineStyle {
1463                thickness: px(4.),
1464                color: None,
1465                wavy: false,
1466            }),
1467        };
1468
1469        let style_c = style_c.highlight(style_d);
1470        assert_eq!(
1471            style_c, expected_style,
1472            "Blending styles should blend properties where possible and override all others"
1473        );
1474    }
1475
1476    #[perf]
1477    fn test_combine_highlights() {
1478        assert_eq!(
1479            combine_highlights(
1480                [
1481                    (0..5, green().into()),
1482                    (4..10, FontWeight::BOLD.into()),
1483                    (15..20, yellow().into()),
1484                ],
1485                [
1486                    (2..6, FontStyle::Italic.into()),
1487                    (1..3, blue().into()),
1488                    (21..23, red().into()),
1489                ]
1490            )
1491            .collect::<Vec<_>>(),
1492            [
1493                (
1494                    0..1,
1495                    HighlightStyle {
1496                        color: Some(green()),
1497                        ..Default::default()
1498                    }
1499                ),
1500                (
1501                    1..2,
1502                    HighlightStyle {
1503                        color: Some(blue()),
1504                        ..Default::default()
1505                    }
1506                ),
1507                (
1508                    2..3,
1509                    HighlightStyle {
1510                        color: Some(blue()),
1511                        font_style: Some(FontStyle::Italic),
1512                        ..Default::default()
1513                    }
1514                ),
1515                (
1516                    3..4,
1517                    HighlightStyle {
1518                        color: Some(green()),
1519                        font_style: Some(FontStyle::Italic),
1520                        ..Default::default()
1521                    }
1522                ),
1523                (
1524                    4..5,
1525                    HighlightStyle {
1526                        color: Some(green()),
1527                        font_weight: Some(FontWeight::BOLD),
1528                        font_style: Some(FontStyle::Italic),
1529                        ..Default::default()
1530                    }
1531                ),
1532                (
1533                    5..6,
1534                    HighlightStyle {
1535                        font_weight: Some(FontWeight::BOLD),
1536                        font_style: Some(FontStyle::Italic),
1537                        ..Default::default()
1538                    }
1539                ),
1540                (
1541                    6..10,
1542                    HighlightStyle {
1543                        font_weight: Some(FontWeight::BOLD),
1544                        ..Default::default()
1545                    }
1546                ),
1547                (
1548                    15..20,
1549                    HighlightStyle {
1550                        color: Some(yellow()),
1551                        ..Default::default()
1552                    }
1553                ),
1554                (
1555                    21..23,
1556                    HighlightStyle {
1557                        color: Some(red()),
1558                        ..Default::default()
1559                    }
1560                )
1561            ]
1562        );
1563    }
1564}
gpui/style.rs

gpui/
style.rs
