gpui: Add a standard text example (#30747)

This is a dumb first pass at a standard text example. We'll use this to
start digging in to some text/scale rendering issues.

There will be a ton of follow-up features to this, but starting simple.

Release Notes:

- N/A

crates/gpui/Cargo.toml

@@ -257,6 +257,10 @@ path = "examples/image/image.rs"
 name = "input"
 path = "examples/input.rs"
 
+[[example]]
+name = "on_window_close_quit"
+path = "examples/on_window_close_quit.rs"
+
 [[example]]
 name = "opacity"
 path = "examples/opacity.rs"
@@ -277,6 +281,10 @@ path = "examples/shadow.rs"
 name = "svg"
 path = "examples/svg/svg.rs"
 
+[[example]]
+name = "text"
+path = "examples/text.rs"
+
 [[example]]
 name = "text_wrapper"
 path = "examples/text_wrapper.rs"
@@ -288,7 +296,3 @@ path = "examples/uniform_list.rs"
 [[example]]
 name = "window_shadow"
 path = "examples/window_shadow.rs"
-
-[[example]]
-name = "on_window_close_quit"
-path = "examples/on_window_close_quit.rs"

crates/gpui/examples/text.rs

@@ -0,0 +1,333 @@
+use std::{
+    ops::{Deref, DerefMut},
+    sync::Arc,
+};
+
+use gpui::{
+    AbsoluteLength, App, Application, Context, DefiniteLength, ElementId, Global, Hsla, Menu,
+    SharedString, TextStyle, TitlebarOptions, Window, WindowBounds, WindowOptions, bounds,
+    colors::DefaultColors, div, point, prelude::*, px, relative, rgb, size,
+};
+use std::iter;
+
+#[derive(Clone, Debug)]
+pub struct TextContext {
+    font_size: f32,
+    line_height: f32,
+    type_scale: f32,
+}
+
+impl Default for TextContext {
+    fn default() -> Self {
+        TextContext {
+            font_size: 16.0,
+            line_height: 1.3,
+            type_scale: 1.33,
+        }
+    }
+}
+
+impl TextContext {
+    pub fn get_global(cx: &App) -> &Arc<TextContext> {
+        &cx.global::<GlobalTextContext>().0
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct GlobalTextContext(pub Arc<TextContext>);
+
+impl Deref for GlobalTextContext {
+    type Target = Arc<TextContext>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl DerefMut for GlobalTextContext {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.0
+    }
+}
+
+impl Global for GlobalTextContext {}
+
+pub trait ActiveTextContext {
+    fn text_context(&self) -> &Arc<TextContext>;
+}
+
+impl ActiveTextContext for App {
+    fn text_context(&self) -> &Arc<TextContext> {
+        &self.global::<GlobalTextContext>().0
+    }
+}
+
+#[derive(Clone, PartialEq)]
+pub struct SpecimenTheme {
+    pub bg: Hsla,
+    pub fg: Hsla,
+}
+
+impl Default for SpecimenTheme {
+    fn default() -> Self {
+        Self {
+            bg: gpui::white(),
+            fg: gpui::black(),
+        }
+    }
+}
+
+impl SpecimenTheme {
+    pub fn invert(&self) -> Self {
+        Self {
+            bg: self.fg,
+            fg: self.bg,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, IntoElement)]
+struct Specimen {
+    id: ElementId,
+    scale: f32,
+    text_style: Option<TextStyle>,
+    string: SharedString,
+    invert: bool,
+}
+
+impl Specimen {
+    pub fn new(id: usize) -> Self {
+        let string = SharedString::new_static("The quick brown fox jumps over the lazy dog");
+        let id_string = format!("specimen-{}", id);
+        let id = ElementId::Name(id_string.into());
+        Self {
+            id,
+            scale: 1.0,
+            text_style: None,
+            string,
+            invert: false,
+        }
+    }
+
+    pub fn invert(mut self) -> Self {
+        self.invert = !self.invert;
+        self
+    }
+
+    pub fn scale(mut self, scale: f32) -> Self {
+        self.scale = scale;
+        self
+    }
+}
+
+impl RenderOnce for Specimen {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let rem_size = window.rem_size();
+        let scale = self.scale;
+        let global_style = cx.text_context();
+
+        let style_override = self.text_style;
+
+        let mut font_size = global_style.font_size;
+        let mut line_height = global_style.line_height;
+
+        if let Some(style_override) = style_override {
+            font_size = style_override.font_size.to_pixels(rem_size).0;
+            line_height = match style_override.line_height {
+                DefiniteLength::Absolute(absolute_len) => match absolute_len {
+                    AbsoluteLength::Rems(absolute_len) => absolute_len.to_pixels(rem_size).0,
+                    AbsoluteLength::Pixels(absolute_len) => absolute_len.0,
+                },
+                DefiniteLength::Fraction(value) => value,
+            };
+        }
+
+        let mut theme = SpecimenTheme::default();
+
+        if self.invert {
+            theme = theme.invert();
+        }
+
+        div()
+            .id(self.id)
+            .bg(theme.bg)
+            .text_color(theme.fg)
+            .text_size(px(font_size * scale))
+            .line_height(relative(line_height))
+            .p(px(10.0))
+            .child(self.string.clone())
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, IntoElement)]
+struct CharacterGrid {
+    scale: f32,
+    invert: bool,
+    text_style: Option<TextStyle>,
+}
+
+impl CharacterGrid {
+    pub fn new() -> Self {
+        Self {
+            scale: 1.0,
+            invert: false,
+            text_style: None,
+        }
+    }
+
+    pub fn scale(mut self, scale: f32) -> Self {
+        self.scale = scale;
+        self
+    }
+}
+
+impl RenderOnce for CharacterGrid {
+    fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
+        let mut theme = SpecimenTheme::default();
+
+        if self.invert {
+            theme = theme.invert();
+        }
+
+        let characters = vec![
+            "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "A", "B", "C", "D", "E", "F", "G",
+            "H", "I", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
+            "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "p", "q",
+            "r", "s", "t", "u", "v", "w", "x", "y", "z", "ẞ", "ſ", "ß", "ð", "Þ", "þ", "α", "β",
+            "Γ", "γ", "Δ", "δ", "η", "θ", "ι", "κ", "Λ", "λ", "μ", "ν", "ξ", "π", "τ", "υ", "φ",
+            "χ", "ψ", "∂", "а", "в", "Ж", "ж", "З", "з", "К", "к", "л", "м", "Н", "н", "Р", "р",
+            "У", "у", "ф", "ч", "ь", "ы", "Э", "э", "Я", "я", "ij", "öẋ", ".,", "⣝⣑", "~", "*",
+            "_", "^", "`", "'", "(", "{", "«", "#", "&", "@", "$", "¢", "%", "|", "?", "¶", "µ",
+            "❮", "<=", "!=", "==", "--", "++", "=>", "->",
+        ];
+
+        let columns = 11;
+        let rows = characters.len().div_ceil(columns);
+
+        let grid_rows = (0..rows).map(|row_idx| {
+            let start_idx = row_idx * columns;
+            let end_idx = (start_idx + columns).min(characters.len());
+
+            div()
+                .w_full()
+                .flex()
+                .flex_row()
+                .children((start_idx..end_idx).map(|i| {
+                    div()
+                        .text_center()
+                        .size(px(62.))
+                        .bg(theme.bg)
+                        .text_color(theme.fg)
+                        .text_size(px(24.0))
+                        .line_height(relative(1.0))
+                        .child(characters[i])
+                }))
+                .when(end_idx - start_idx < columns, |d| {
+                    d.children(
+                        iter::repeat_with(|| div().flex_1()).take(columns - (end_idx - start_idx)),
+                    )
+                })
+        });
+
+        div().p_4().gap_2().flex().flex_col().children(grid_rows)
+    }
+}
+
+struct TextExample {
+    next_id: usize,
+}
+
+impl TextExample {
+    fn next_id(&mut self) -> usize {
+        self.next_id += 1;
+        self.next_id
+    }
+}
+
+impl Render for TextExample {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let tcx = cx.text_context();
+        let colors = cx.default_colors().clone();
+
+        let type_scale = tcx.type_scale;
+
+        let step_down_2 = 1.0 / (type_scale * type_scale);
+        let step_down_1 = 1.0 / type_scale;
+        let base = 1.0;
+        let step_up_1 = base * type_scale;
+        let step_up_2 = step_up_1 * type_scale;
+        let step_up_3 = step_up_2 * type_scale;
+        let step_up_4 = step_up_3 * type_scale;
+        let step_up_5 = step_up_4 * type_scale;
+        let step_up_6 = step_up_5 * type_scale;
+
+        div()
+            .size_full()
+            .child(
+                div()
+                    .id("text-example")
+                    .overflow_y_scroll()
+                    .overflow_x_hidden()
+                    .bg(rgb(0xffffff))
+                    .size_full()
+                    .child(div().child(CharacterGrid::new().scale(base)))
+                    .child(
+                        div()
+                            .child(Specimen::new(self.next_id()).scale(step_down_2))
+                            .child(Specimen::new(self.next_id()).scale(step_down_2).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_down_1))
+                            .child(Specimen::new(self.next_id()).scale(step_down_1).invert())
+                            .child(Specimen::new(self.next_id()).scale(base))
+                            .child(Specimen::new(self.next_id()).scale(base).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_1))
+                            .child(Specimen::new(self.next_id()).scale(step_up_1).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_2))
+                            .child(Specimen::new(self.next_id()).scale(step_up_2).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_3))
+                            .child(Specimen::new(self.next_id()).scale(step_up_3).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_4))
+                            .child(Specimen::new(self.next_id()).scale(step_up_4).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_5))
+                            .child(Specimen::new(self.next_id()).scale(step_up_5).invert())
+                            .child(Specimen::new(self.next_id()).scale(step_up_6))
+                            .child(Specimen::new(self.next_id()).scale(step_up_6).invert()),
+                    ),
+            )
+            .child(div().w(px(240.)).h_full().bg(colors.container))
+    }
+}
+
+fn main() {
+    Application::new().run(|cx: &mut App| {
+        cx.set_menus(vec![Menu {
+            name: "GPUI Typography".into(),
+            items: vec![],
+        }]);
+
+        cx.init_colors();
+        cx.set_global(GlobalTextContext(Arc::new(TextContext::default())));
+
+        let window = cx
+            .open_window(
+                WindowOptions {
+                    titlebar: Some(TitlebarOptions {
+                        title: Some("GPUI Typography".into()),
+                        ..Default::default()
+                    }),
+                    window_bounds: Some(WindowBounds::Windowed(bounds(
+                        point(px(0.0), px(0.0)),
+                        size(px(920.), px(720.)),
+                    ))),
+                    ..Default::default()
+                },
+                |_window, cx| cx.new(|_cx| TextExample { next_id: 0 }),
+            )
+            .unwrap();
+
+        window
+            .update(cx, |_view, _window, cx| {
+                cx.activate(true);
+            })
+            .unwrap();
+    });
+}

crates/gpui/src/app.rs

@@ -38,7 +38,9 @@ use crate::{
     PlatformDisplay, PlatformKeyboardLayout, Point, PromptBuilder, PromptHandle, PromptLevel,
     Render, RenderImage, RenderablePromptHandle, Reservation, ScreenCaptureSource, SharedString,
     SubscriberSet, Subscription, SvgRenderer, Task, TextSystem, Window, WindowAppearance,
-    WindowHandle, WindowId, WindowInvalidator, current_platform, hash, init_app_menus,
+    WindowHandle, WindowId, WindowInvalidator,
+    colors::{Colors, GlobalColors},
+    current_platform, hash, init_app_menus,
 };
 
 mod async_context;
@@ -1656,6 +1658,13 @@ impl App {
             _ = window.drop_image(image);
         }
     }
+
+    /// Initializes gpui's default colors for the application.
+    ///
+    /// These colors can be accessed through `cx.default_colors()`.
+    pub fn init_colors(&mut self) {
+        self.set_global(GlobalColors(Arc::new(Colors::default())));
+    }
 }
 
 impl AppContext for App {

crates/gpui/src/colors.rs

@@ -0,0 +1,122 @@
+use crate::{App, Global, Rgba, Window, WindowAppearance, rgb};
+use std::ops::Deref;
+use std::sync::Arc;
+
+/// The default set of colors for gpui.
+///
+/// These are used for styling base components, examples and more.
+#[derive(Clone, Debug)]
+pub struct Colors {
+    /// Text color
+    pub text: Rgba,
+    /// Selected text color
+    pub selected_text: Rgba,
+    /// Background color
+    pub background: Rgba,
+    /// Disabled color
+    pub disabled: Rgba,
+    /// Selected color
+    pub selected: Rgba,
+    /// Border color
+    pub border: Rgba,
+    /// Separator color
+    pub separator: Rgba,
+    /// Container color
+    pub container: Rgba,
+}
+
+impl Default for Colors {
+    fn default() -> Self {
+        Self::light()
+    }
+}
+
+impl Colors {
+    /// Returns the default colors for the given window appearance.
+    pub fn for_appearance(window: &Window) -> Self {
+        match window.appearance() {
+            WindowAppearance::Light | WindowAppearance::VibrantLight => Self::light(),
+            WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::dark(),
+        }
+    }
+
+    /// Returns the default dark colors.
+    pub fn dark() -> Self {
+        Self {
+            text: rgb(0xffffff),
+            selected_text: rgb(0xffffff),
+            disabled: rgb(0x565656),
+            selected: rgb(0x2457ca),
+            background: rgb(0x222222),
+            border: rgb(0x000000),
+            separator: rgb(0xd9d9d9),
+            container: rgb(0x262626),
+        }
+    }
+
+    /// Returns the default light colors.
+    pub fn light() -> Self {
+        Self {
+            text: rgb(0x252525),
+            selected_text: rgb(0xffffff),
+            background: rgb(0xffffff),
+            disabled: rgb(0xb0b0b0),
+            selected: rgb(0x2a63d9),
+            border: rgb(0xd9d9d9),
+            separator: rgb(0xe6e6e6),
+            container: rgb(0xf4f5f5),
+        }
+    }
+
+    /// Get [Colors] from the global state
+    pub fn get_global(cx: &App) -> &Arc<Colors> {
+        &cx.global::<GlobalColors>().0
+    }
+}
+
+/// Get [Colors] from the global state
+#[derive(Clone, Debug)]
+pub struct GlobalColors(pub Arc<Colors>);
+
+impl Deref for GlobalColors {
+    type Target = Arc<Colors>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl Global for GlobalColors {}
+
+/// Implement this trait to allow global [Color] access via `cx.default_colors()`.
+pub trait DefaultColors {
+    /// Returns the default [`gpui::Colors`]
+    fn default_colors(&self) -> &Arc<Colors>;
+}
+
+impl DefaultColors for App {
+    fn default_colors(&self) -> &Arc<Colors> {
+        &self.global::<GlobalColors>().0
+    }
+}
+
+/// The appearance of the base GPUI colors, used to style GPUI elements
+///
+/// Varies based on the system's current [`WindowAppearance`].
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+pub enum DefaultAppearance {
+    /// Use the set of colors for light appearances.
+    #[default]
+    Light,
+    /// Use the set of colors for dark appearances.
+    Dark,
+}
+
+impl From<WindowAppearance> for DefaultAppearance {
+    fn from(appearance: WindowAppearance) -> Self {
+        match appearance {
+            WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
+            WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
+        }
+    }
+}

crates/gpui/src/elements/common.rs

@@ -1,115 +0,0 @@
-use crate::{Hsla, Rgba, WindowAppearance, rgb};
-
-/// The appearance of the base GPUI colors, used to style GPUI elements
-///
-/// Varies based on the system's current [`WindowAppearance`].
-#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
-pub enum DefaultThemeAppearance {
-    /// Use the set of colors for light appearances.
-    #[default]
-    Light,
-    /// Use the set of colors for dark appearances.
-    Dark,
-}
-
-impl From<WindowAppearance> for DefaultThemeAppearance {
-    fn from(appearance: WindowAppearance) -> Self {
-        match appearance {
-            WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,
-            WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,
-        }
-    }
-}
-
-/// Returns the default colors for the given appearance.
-pub fn colors(appearance: DefaultThemeAppearance) -> DefaultColors {
-    match appearance {
-        DefaultThemeAppearance::Light => DefaultColors::light(),
-        DefaultThemeAppearance::Dark => DefaultColors::dark(),
-    }
-}
-
-/// A collection of colors.
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub struct DefaultColors {
-    text: Rgba,
-    selected_text: Rgba,
-    background: Rgba,
-    disabled: Rgba,
-    selected: Rgba,
-    border: Rgba,
-    separator: Rgba,
-    container: Rgba,
-}
-
-impl DefaultColors {
-    /// Returns the default dark colors.
-    pub fn dark() -> Self {
-        Self {
-            text: rgb(0xffffff),
-            selected_text: rgb(0xffffff),
-            disabled: rgb(0x565656),
-            selected: rgb(0x2457ca),
-            background: rgb(0x222222),
-            border: rgb(0x000000),
-            separator: rgb(0xd9d9d9),
-            container: rgb(0x262626),
-        }
-    }
-
-    /// Returns the default light colors.
-    pub fn light() -> Self {
-        Self {
-            text: rgb(0x252525),
-            selected_text: rgb(0xffffff),
-            background: rgb(0xffffff),
-            disabled: rgb(0xb0b0b0),
-            selected: rgb(0x2a63d9),
-            border: rgb(0xd9d9d9),
-            separator: rgb(0xe6e6e6),
-            container: rgb(0xf4f5f5),
-        }
-    }
-}
-
-/// A default GPUI color.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, strum::EnumIter)]
-pub enum DefaultColor {
-    /// Text color
-    Text,
-    /// Selected text color
-    SelectedText,
-    /// Background color
-    Background,
-    /// Disabled color
-    Disabled,
-    /// Selected color
-    Selected,
-    /// Border color
-    Border,
-    /// Separator color
-    Separator,
-    /// Container color
-    Container,
-}
-
-impl DefaultColor {
-    /// Returns the RGBA color for the given color type.
-    pub fn color(&self, colors: &DefaultColors) -> Rgba {
-        match self {
-            DefaultColor::Text => colors.text,
-            DefaultColor::SelectedText => colors.selected_text,
-            DefaultColor::Background => colors.background,
-            DefaultColor::Disabled => colors.disabled,
-            DefaultColor::Selected => colors.selected,
-            DefaultColor::Border => colors.border,
-            DefaultColor::Separator => colors.separator,
-            DefaultColor::Container => colors.container,
-        }
-    }
-
-    /// Returns the HSLA color for the given color type.
-    pub fn hsla(&self, colors: &DefaultColors) -> Hsla {
-        self.color(colors).into()
-    }
-}

crates/gpui/src/elements/mod.rs

@@ -1,7 +1,6 @@
 mod anchored;
 mod animation;
 mod canvas;
-mod common;
 mod deferred;
 mod div;
 mod image_cache;
@@ -15,7 +14,6 @@ mod uniform_list;
 pub use anchored::*;
 pub use animation::*;
 pub use canvas::*;
-pub use common::*;
 pub use deferred::*;
 pub use div::*;
 pub use image_cache::*;

crates/gpui/src/gpui.rs

@@ -73,6 +73,8 @@ mod asset_cache;
 mod assets;
 mod bounds_tree;
 mod color;
+/// The default colors used by GPUI.
+pub mod colors;
 mod element;
 mod elements;
 mod executor;