Lukas Wirth
ab1c37a4ef
`gpui_web` currently embeds IBM Plex Sans and Lilex into every browser application during platform construction. Applications such as Delta already provide their own fonts, so those binaries contain overlapping font bundles and register the same faces twice. This change starts the web platform with an empty font database, matching the ownership boundary used by native applications: the application selects and registers its fonts before opening a window. Delta already follows that sequence. GPUI's browser-capable examples now load the former eight-face bundle explicitly through shared example support, while the standalone `hello_web` example demonstrates registering a minimal application font directly. Testing performed: - `cargo check -p gpui --examples --target wasm32-unknown-unknown` - `cargo check -p gpui --examples` - `cargo check -p gpui_web --target wasm32-unknown-unknown` - `cargo check --manifest-path crates/gpui_web/examples/hello_web/Cargo.toml --target wasm32-unknown-unknown` - `./script/clippy -p gpui_web --target wasm32-unknown-unknown` - `cargo fmt -p gpui -p gpui_web --check` Release Notes: - N/A
416 lines
13 KiB
Rust
416 lines
13 KiB
Rust
#![cfg_attr(target_family = "wasm", no_main)]
|
||
|
||
#[path = "example_support/fonts.rs"]
|
||
mod example_support;
|
||
|
||
use std::{
|
||
borrow::Cow,
|
||
ops::{Deref, DerefMut},
|
||
sync::Arc,
|
||
};
|
||
|
||
use gpui::{
|
||
AbsoluteLength, App, Context, DefiniteLength, ElementId, Global, Hsla, Menu, SharedString,
|
||
TextStyle, TitlebarOptions, Window, WindowBounds, WindowOptions, bounds, colors::DefaultColors,
|
||
div, point, prelude::*, px, relative, rgb, size,
|
||
};
|
||
use gpui_platform::application;
|
||
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).into();
|
||
line_height = match style_override.line_height {
|
||
DefiniteLength::Absolute(absolute_len) => match absolute_len {
|
||
AbsoluteLength::Rems(absolute_len) => absolute_len.to_pixels(rem_size).into(),
|
||
AbsoluteLength::Pixels(absolute_len) => absolute_len.into(),
|
||
},
|
||
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)
|
||
}
|
||
}
|
||
|
||
#[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 = 20;
|
||
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,
|
||
font_family: SharedString,
|
||
}
|
||
|
||
impl TextExample {
|
||
fn next_id(&mut self) -> usize {
|
||
self.next_id += 1;
|
||
self.next_id
|
||
}
|
||
|
||
fn button(
|
||
text: &str,
|
||
cx: &mut Context<Self>,
|
||
on_click: impl Fn(&mut Self, &mut Context<Self>) + 'static,
|
||
) -> impl IntoElement {
|
||
div()
|
||
.id(text.to_string())
|
||
.flex_none()
|
||
.child(text.to_string())
|
||
.bg(gpui::black())
|
||
.text_color(gpui::white())
|
||
.active(|this| this.opacity(0.8))
|
||
.px_3()
|
||
.py_1()
|
||
.on_click(cx.listener(move |this, _, _, cx| on_click(this, cx)))
|
||
}
|
||
}
|
||
|
||
const FONT_FAMILIES: [&str; 5] = [
|
||
".ZedMono",
|
||
".SystemUIFont",
|
||
"Menlo",
|
||
"Monaco",
|
||
"Courier New",
|
||
];
|
||
|
||
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()
|
||
.font_family(self.font_family.clone())
|
||
.size_full()
|
||
.child(
|
||
div()
|
||
.bg(gpui::white())
|
||
.border_b_1()
|
||
.border_color(gpui::black())
|
||
.p_3()
|
||
.flex()
|
||
.child(Self::button(&self.font_family, cx, |this, cx| {
|
||
let new_family = FONT_FAMILIES
|
||
.iter()
|
||
.position(|f| *f == this.font_family.as_str())
|
||
.map(|idx| FONT_FAMILIES[(idx + 1) % FONT_FAMILIES.len()])
|
||
.unwrap_or(FONT_FAMILIES[0]);
|
||
|
||
this.font_family = SharedString::new(new_family);
|
||
cx.notify();
|
||
})),
|
||
)
|
||
.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 run_example() {
|
||
application().run(|cx: &mut App| {
|
||
if !example_support::load_fonts(cx) {
|
||
return;
|
||
}
|
||
cx.set_menus(vec![Menu {
|
||
name: "GPUI Typography".into(),
|
||
disabled: false,
|
||
items: vec![],
|
||
}]);
|
||
|
||
let fonts = [include_bytes!(
|
||
"../../../assets/fonts/lilex/Lilex-Regular.ttf"
|
||
)]
|
||
.iter()
|
||
.map(|b| Cow::Borrowed(&b[..]))
|
||
.collect();
|
||
|
||
_ = cx.text_system().add_fonts(fonts);
|
||
|
||
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,
|
||
font_family: ".ZedMono".into(),
|
||
})
|
||
},
|
||
)
|
||
.unwrap();
|
||
|
||
window
|
||
.update(cx, |_view, _window, cx| {
|
||
cx.activate(true);
|
||
})
|
||
.unwrap();
|
||
});
|
||
}
|
||
|
||
#[cfg(not(target_family = "wasm"))]
|
||
fn main() {
|
||
run_example();
|
||
}
|
||
|
||
#[cfg(target_family = "wasm")]
|
||
#[wasm_bindgen::prelude::wasm_bindgen(start)]
|
||
pub fn start() {
|
||
gpui_platform::web_init();
|
||
run_example();
|
||
}
|