Allow resizing fonts at runtime
This commit is contained in:
parent
fe3542a28d
commit
88fdd127ea
9 changed files with 156 additions and 57 deletions
|
@ -3,10 +3,12 @@ use std::sync::Arc;
|
|||
use crate::{
|
||||
layout,
|
||||
layout::{LayoutOptions, Region},
|
||||
math::vec2,
|
||||
mesher::Vertex,
|
||||
style,
|
||||
types::GuiInput,
|
||||
types::{Color, GuiCmd, GuiInput, PaintCmd},
|
||||
widgets::*,
|
||||
Frame, RawInput, Texture,
|
||||
FontSizes, Fonts, Frame, RawInput, Texture,
|
||||
};
|
||||
|
||||
#[derive(Clone, Copy, Default)]
|
||||
|
@ -37,6 +39,12 @@ fn show_style(style: &mut style::Style, gui: &mut Region) {
|
|||
gui.add(Slider::new(&mut style.line_width, 0.0, 10.0).text("line_width"));
|
||||
}
|
||||
|
||||
fn show_font_sizes(font_sizes: &mut FontSizes, gui: &mut Region) {
|
||||
for (text_style, mut size) in font_sizes {
|
||||
gui.add(Slider::new(&mut size, 4.0, 40.0).text(format!("{:?}", text_style)));
|
||||
}
|
||||
}
|
||||
|
||||
/// Encapsulates input, layout and painting for ease of use.
|
||||
pub struct Emigui {
|
||||
pub last_input: RawInput,
|
||||
|
@ -103,6 +111,39 @@ impl Emigui {
|
|||
show_style(&mut self.style, gui);
|
||||
});
|
||||
|
||||
region.foldable("Fonts", |gui| {
|
||||
let texture = self.texture();
|
||||
gui.add(label(format!(
|
||||
"Font texture size: {} x {}",
|
||||
texture.width, texture.height
|
||||
)));
|
||||
let size = vec2(texture.width as f32, texture.height as f32);
|
||||
let rect = gui.reserve_space(size, None).rect;
|
||||
let top_left = Vertex {
|
||||
pos: rect.min(),
|
||||
uv: (0, 0),
|
||||
color: Color::WHITE,
|
||||
};
|
||||
let bottom_right = Vertex {
|
||||
pos: rect.max(),
|
||||
uv: (texture.width as u16 - 1, texture.height as u16 - 1),
|
||||
color: Color::WHITE,
|
||||
};
|
||||
let mut frame = Frame::default();
|
||||
frame.add_rect(top_left, bottom_right);
|
||||
gui.add_graphic(GuiCmd::PaintCommands(vec![PaintCmd::Frame(frame)]));
|
||||
|
||||
let old_font_sizes = self.data.fonts.sizes();
|
||||
let mut new_font_sizes = old_font_sizes.clone();
|
||||
show_font_sizes(&mut new_font_sizes, gui);
|
||||
if *old_font_sizes != new_font_sizes {
|
||||
let mut new_data = (*self.data).clone();
|
||||
let fonts = Fonts::from_sizes(new_font_sizes);
|
||||
new_data.fonts = Arc::new(fonts);
|
||||
self.data = Arc::new(new_data);
|
||||
}
|
||||
});
|
||||
|
||||
region.foldable("Stats", |gui| {
|
||||
gui.add(label(format!("num_vertices: {}", self.stats.num_vertices)));
|
||||
gui.add(label(format!(
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
use std::{
|
||||
collections::BTreeMap,
|
||||
collections::{hash_map::DefaultHasher, BTreeMap},
|
||||
hash::{Hash, Hasher},
|
||||
sync::{Arc, Mutex},
|
||||
};
|
||||
|
||||
|
@ -9,7 +10,7 @@ use crate::{
|
|||
};
|
||||
|
||||
/// TODO: rename
|
||||
#[derive(Copy, Clone, Debug, Eq, Ord, PartialEq, PartialOrd, Serialize)]
|
||||
#[derive(Copy, Clone, Debug, Eq, Hash, Ord, PartialEq, PartialOrd, Serialize)]
|
||||
pub enum TextStyle {
|
||||
Body,
|
||||
Button,
|
||||
|
@ -17,14 +18,43 @@ pub enum TextStyle {
|
|||
// Monospace,
|
||||
}
|
||||
|
||||
pub type FontSizes = BTreeMap<TextStyle, f32>;
|
||||
|
||||
pub struct Fonts {
|
||||
sizes: FontSizes,
|
||||
fonts: BTreeMap<TextStyle, Font>,
|
||||
texture: Texture,
|
||||
}
|
||||
|
||||
impl Fonts {
|
||||
pub fn new() -> Fonts {
|
||||
let mut atlas = TextureAtlas::new(128, 8); // TODO: better default?
|
||||
let mut sizes = FontSizes::new();
|
||||
sizes.insert(TextStyle::Body, 20.0);
|
||||
sizes.insert(TextStyle::Button, 20.0);
|
||||
sizes.insert(TextStyle::Heading, 30.0);
|
||||
Fonts::from_sizes(sizes)
|
||||
}
|
||||
|
||||
pub fn from_sizes(sizes: FontSizes) -> Fonts {
|
||||
let mut fonts = Fonts {
|
||||
sizes: Default::default(),
|
||||
fonts: Default::default(),
|
||||
texture: Default::default(),
|
||||
};
|
||||
fonts.set_sizes(sizes);
|
||||
fonts
|
||||
}
|
||||
|
||||
pub fn sizes(&self) -> &FontSizes {
|
||||
&self.sizes
|
||||
}
|
||||
|
||||
pub fn set_sizes(&mut self, sizes: FontSizes) {
|
||||
if self.sizes == sizes {
|
||||
return;
|
||||
}
|
||||
|
||||
let mut atlas = TextureAtlas::new(512, 8); // TODO: better default?
|
||||
|
||||
// Make one white pixel for use for various stuff:
|
||||
let pos = atlas.allocate((1, 1));
|
||||
|
@ -32,25 +62,20 @@ impl Fonts {
|
|||
|
||||
let atlas = Arc::new(Mutex::new(atlas));
|
||||
|
||||
// TODO: figure out a way to make the wasm smaller despite including a font.
|
||||
// TODO: figure out a way to make the wasm smaller despite including a font. Zip it?
|
||||
// let typeface_data = include_bytes!("../fonts/ProggyClean.ttf"); // Use 13 for this. NOTHING ELSE.
|
||||
// let typeface_data = include_bytes!("../fonts/DejaVuSans.ttf");
|
||||
let typeface_data = include_bytes!("../fonts/Roboto-Regular.ttf");
|
||||
self.sizes = sizes.clone();
|
||||
self.fonts = sizes
|
||||
.into_iter()
|
||||
.map(|(text_style, size)| (text_style, Font::new(atlas.clone(), typeface_data, size)))
|
||||
.collect();
|
||||
self.texture = atlas.lock().unwrap().texture().clone();
|
||||
|
||||
let mut fonts = BTreeMap::new();
|
||||
fonts.insert(
|
||||
TextStyle::Body,
|
||||
Font::new(atlas.clone(), typeface_data, 20.0),
|
||||
);
|
||||
fonts.insert(TextStyle::Button, fonts[&TextStyle::Body].clone());
|
||||
fonts.insert(
|
||||
TextStyle::Heading,
|
||||
Font::new(atlas.clone(), typeface_data, 30.0),
|
||||
);
|
||||
|
||||
let texture = atlas.lock().unwrap().clone().texture().clone();
|
||||
|
||||
Fonts { fonts, texture }
|
||||
let mut hasher = DefaultHasher::new();
|
||||
self.texture.pixels.hash(&mut hasher);
|
||||
self.texture.id = hasher.finish();
|
||||
}
|
||||
|
||||
pub fn texture(&self) -> &Texture {
|
||||
|
|
|
@ -428,10 +428,10 @@ impl Region {
|
|||
|
||||
/// Temporarily split split a vertical layout into several columns.
|
||||
///
|
||||
/// gui.columns(2, |columns| {
|
||||
/// columns[0].add(label("First column"));
|
||||
/// columns[1].add(label("Second column"));
|
||||
/// });
|
||||
/// region.columns(2, |columns| {
|
||||
/// columns[0].add(emigui::widgets::label("First column"));
|
||||
/// columns[1].add(emigui::widgets::label("Second column"));
|
||||
/// });
|
||||
pub fn columns<F, R>(&mut self, num_columns: usize, add_contents: F) -> R
|
||||
where
|
||||
F: FnOnce(&mut [Region]) -> R,
|
||||
|
|
|
@ -19,7 +19,7 @@ pub mod widgets;
|
|||
|
||||
pub use crate::{
|
||||
emigui::Emigui,
|
||||
fonts::TextStyle,
|
||||
fonts::{FontSizes, Fonts, TextStyle},
|
||||
layout::{Align, LayoutOptions, Region},
|
||||
mesher::{Frame, Vertex},
|
||||
style::Style,
|
||||
|
|
|
@ -8,7 +8,7 @@ use crate::{
|
|||
types::{Color, PaintCmd},
|
||||
};
|
||||
|
||||
#[derive(Clone, Copy, Debug, Default)]
|
||||
#[derive(Clone, Copy, Debug, Default, Serialize)]
|
||||
pub struct Vertex {
|
||||
/// Pixel coordinates
|
||||
pub pos: Vec2,
|
||||
|
@ -18,7 +18,7 @@ pub struct Vertex {
|
|||
pub color: Color,
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Default)]
|
||||
#[derive(Clone, Debug, Default, Serialize)]
|
||||
pub struct Frame {
|
||||
/// Draw as triangles (i.e. the length is a multiple of three)
|
||||
pub indices: Vec<u32>,
|
||||
|
@ -33,6 +33,14 @@ pub enum PathType {
|
|||
use self::PathType::*;
|
||||
|
||||
impl Frame {
|
||||
pub fn append(&mut self, frame: &Frame) {
|
||||
let index_offset = self.vertices.len() as u32;
|
||||
for index in &frame.indices {
|
||||
self.indices.push(index_offset + index);
|
||||
}
|
||||
self.vertices.extend(frame.vertices.iter());
|
||||
}
|
||||
|
||||
fn triangle(&mut self, a: u32, b: u32, c: u32) {
|
||||
self.indices.push(a);
|
||||
self.indices.push(b);
|
||||
|
@ -224,6 +232,9 @@ impl Frame {
|
|||
);
|
||||
}
|
||||
}
|
||||
PaintCmd::Frame(cmd_frame) => {
|
||||
frame.append(cmd_frame);
|
||||
}
|
||||
PaintCmd::Line {
|
||||
points,
|
||||
color,
|
||||
|
|
|
@ -53,9 +53,15 @@ impl TextureAtlas {
|
|||
}
|
||||
|
||||
pub fn texture_mut(&mut self) -> &mut Texture {
|
||||
self.texture.id += 1;
|
||||
&mut self.texture
|
||||
}
|
||||
|
||||
pub fn clear(&mut self) {
|
||||
self.cursor = (0, 0);
|
||||
self.row_height = 0;
|
||||
}
|
||||
|
||||
/// Returns the coordinates of where the rect ended up.
|
||||
pub fn allocate(&mut self, (w, h): (usize, usize)) -> (usize, usize) {
|
||||
assert!(w <= self.texture.width);
|
||||
|
@ -79,7 +85,7 @@ impl TextureAtlas {
|
|||
|
||||
let pos = self.cursor;
|
||||
self.cursor.0 += w;
|
||||
self.texture.id += 1; // TODO: hash this ?
|
||||
self.texture.id += 1;
|
||||
(pos.0 as usize, pos.1 as usize)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
use crate::{
|
||||
fonts::TextStyle,
|
||||
math::{Rect, Vec2},
|
||||
mesher::Frame,
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
@ -152,6 +153,7 @@ pub enum PaintCmd {
|
|||
outline: Option<Outline>,
|
||||
radius: f32,
|
||||
},
|
||||
Frame(Frame),
|
||||
Line {
|
||||
points: Vec<Vec2>,
|
||||
color: Color,
|
||||
|
|
|
@ -30,12 +30,10 @@ pub struct State {
|
|||
|
||||
impl State {
|
||||
fn new(canvas_id: &str) -> Result<State, JsValue> {
|
||||
let emigui = Emigui::new();
|
||||
let webgl_painter = webgl::Painter::new(canvas_id, emigui.texture())?;
|
||||
Ok(State {
|
||||
app: Default::default(),
|
||||
emigui,
|
||||
webgl_painter,
|
||||
emigui: Emigui::new(),
|
||||
webgl_painter: webgl::Painter::new(canvas_id)?,
|
||||
everything_ms: 0.0,
|
||||
})
|
||||
}
|
||||
|
@ -58,7 +56,7 @@ impl State {
|
|||
region.add(label(format!("Everything: {:.1} ms", self.everything_ms)));
|
||||
|
||||
let frame = self.emigui.paint();
|
||||
let result = self.webgl_painter.paint(&frame);
|
||||
let result = self.webgl_painter.paint(&frame, self.emigui.texture());
|
||||
|
||||
self.everything_ms = now_ms() - everything_start;
|
||||
|
||||
|
|
|
@ -18,6 +18,7 @@ pub struct Painter {
|
|||
tc_buffer: WebGlBuffer,
|
||||
color_buffer: WebGlBuffer,
|
||||
tex_size: (u16, u16),
|
||||
current_texture_id: Option<u64>,
|
||||
}
|
||||
|
||||
impl Painter {
|
||||
|
@ -32,7 +33,7 @@ impl Painter {
|
|||
)
|
||||
}
|
||||
|
||||
pub fn new(canvas_id: &str, texture: &Texture) -> Result<Painter, JsValue> {
|
||||
pub fn new(canvas_id: &str) -> Result<Painter, JsValue> {
|
||||
let document = web_sys::window().unwrap().document().unwrap();
|
||||
let canvas = document.get_element_by_id(canvas_id).unwrap();
|
||||
let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::<web_sys::HtmlCanvasElement>()?;
|
||||
|
@ -46,27 +47,6 @@ impl Painter {
|
|||
|
||||
let gl_texture = gl.create_texture().unwrap();
|
||||
gl.bind_texture(Gl::TEXTURE_2D, Some(&gl_texture));
|
||||
|
||||
// TODO: remove once https://github.com/rustwasm/wasm-bindgen/issues/1005 is fixed.
|
||||
let mut pixels: Vec<_> = texture.pixels.iter().cloned().collect();
|
||||
|
||||
let level = 0;
|
||||
let internal_format = Gl::ALPHA;
|
||||
let border = 0;
|
||||
let src_format = Gl::ALPHA;
|
||||
let src_type = Gl::UNSIGNED_BYTE;
|
||||
gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
|
||||
Gl::TEXTURE_2D,
|
||||
level,
|
||||
internal_format as i32,
|
||||
texture.width as i32,
|
||||
texture.height as i32,
|
||||
border,
|
||||
src_format,
|
||||
src_type,
|
||||
Some(&mut pixels),
|
||||
)
|
||||
.unwrap();
|
||||
gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_S, Gl::CLAMP_TO_EDGE as i32);
|
||||
gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_T, Gl::CLAMP_TO_EDGE as i32);
|
||||
// gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32);
|
||||
|
@ -125,11 +105,47 @@ impl Painter {
|
|||
pos_buffer,
|
||||
tc_buffer,
|
||||
color_buffer,
|
||||
tex_size: (texture.width as u16, texture.height as u16),
|
||||
tex_size: (0, 0),
|
||||
current_texture_id: None,
|
||||
})
|
||||
}
|
||||
|
||||
pub fn paint(&self, frame: &Frame) -> Result<(), JsValue> {
|
||||
fn upload_texture(&mut self, texture: &Texture) {
|
||||
if self.current_texture_id == Some(texture.id) {
|
||||
return; // No change
|
||||
}
|
||||
|
||||
let gl = &self.gl;
|
||||
gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture));
|
||||
|
||||
// TODO: remove once https://github.com/rustwasm/wasm-bindgen/issues/1005 is fixed.
|
||||
let mut pixels: Vec<_> = texture.pixels.iter().cloned().collect();
|
||||
|
||||
let level = 0;
|
||||
let internal_format = Gl::ALPHA;
|
||||
let border = 0;
|
||||
let src_format = Gl::ALPHA;
|
||||
let src_type = Gl::UNSIGNED_BYTE;
|
||||
gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
|
||||
Gl::TEXTURE_2D,
|
||||
level,
|
||||
internal_format as i32,
|
||||
texture.width as i32,
|
||||
texture.height as i32,
|
||||
border,
|
||||
src_format,
|
||||
src_type,
|
||||
Some(&mut pixels),
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
self.tex_size = (texture.width as u16, texture.height as u16);
|
||||
self.current_texture_id = Some(texture.id);
|
||||
}
|
||||
|
||||
pub fn paint(&mut self, frame: &Frame, texture: &Texture) -> Result<(), JsValue> {
|
||||
self.upload_texture(texture);
|
||||
|
||||
let gl = &self.gl;
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
|
Loading…
Reference in a new issue