Text tweaks

This commit is contained in:
Emil Ernerfeldt 2018-12-27 18:19:06 +01:00
parent a52f27b8c8
commit 500312e878
6 changed files with 96 additions and 27 deletions

View file

@ -61,9 +61,10 @@ function paint_command(canvas, cmd) {
}
return;
case "text":
ctx.font = cmd.font;
ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.font = cmd.font_size + "px " + cmd.font_name;
ctx.textAlign = cmd.text_align;
ctx.textBaseline = "top";
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return;
}

View file

@ -14,6 +14,11 @@ interface Color {
a: number;
}
interface Outline {
color: Color;
width: number;
}
interface Clear {
kind: "clear";
fill_color: Color;
@ -21,28 +26,23 @@ interface Clear {
interface Line {
kind: "line";
color: Color;
points: Vec2[];
color: Color;
width: number;
}
interface Outline {
width: number;
color: Color;
}
interface Circle {
kind: "circle";
center: Vec2;
fill_color: Color | null;
kind: "circle";
outline: Outline | null;
radius: number;
}
interface Rect {
kind: "rect";
corner_radius: number;
fill_color: Color | null;
kind: "rect";
outline: Outline | null;
pos: Vec2;
size: Vec2;
@ -51,7 +51,8 @@ interface Rect {
interface Text {
kind: "text";
fill_color: Color | null;
font: string;
font_name: string; // e.g. "Palatino"
font_size: number, // Height in pixels, e.g. 12
pos: Vec2;
stroke_color: Color | null;
text: string;
@ -129,9 +130,10 @@ function paint_command(canvas, cmd: PaintCmd) {
return;
case "text":
ctx.font = cmd.font;
ctx.fillStyle = styleFromColor(cmd.fill_color);
ctx.font = `${cmd.font_size}px ${cmd.font_name}`;
ctx.textAlign = cmd.text_align;
ctx.textBaseline = "top";
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return;
}

View file

@ -100,3 +100,14 @@ impl GuiSettings for crate::layout::LayoutOptions {
gui.slider_f32("slider_height", &mut self.slider_height, 0.0, 60.0);
}
}
impl GuiSettings for crate::style::Style {
fn show_gui(&mut self, gui: &mut Layout) {
if gui.button("Reset Style").clicked {
*self = Default::default();
}
gui.checkbox("debug_rects", &mut self.debug_rects);
gui.slider_f32("line_width", &mut self.line_width, 0.0, 10.0);
gui.slider_f32("font_size", &mut self.font_size, 5.0, 32.0);
}
}

View file

@ -52,6 +52,11 @@ pub fn show_gui(raw_input_json: &str) -> String {
use crate::app::GuiSettings;
APP.lock().unwrap().show_gui(&mut emgui.layout);
emgui.layout.label("Style:");
let mut style = emgui.style.clone();
style.show_gui(&mut emgui.layout);
emgui.style = style;
let commands = emgui.paint();
serde_json::to_string(&commands).unwrap()
}

View file

@ -1,14 +1,40 @@
use crate::{math::*, types::*};
#[derive(Clone, Copy, Debug)]
#[derive(Clone, Debug)]
pub struct Style {
/// For stuff like checkmarks in check boxes
/// Show rectangles around each widget
pub debug_rects: bool,
/// For stuff like check marks in check boxes.
pub line_width: f32,
pub font_name: String,
/// Height in pixels of most text.
pub font_size: f32,
}
impl Default for Style {
fn default() -> Style {
Style { line_width: 2.0 }
Style {
debug_rects: false,
line_width: 2.0,
font_name: "Palatino".to_string(),
font_size: 12.0,
}
}
}
fn debug_rect(rect: Rect) -> PaintCmd {
PaintCmd::Rect {
corner_radius: 0.0,
fill_color: None,
outline: Some(Outline {
color: srgba(255, 255, 255, 255),
width: 1.0,
}),
pos: rect.pos,
size: rect.size,
}
}
@ -38,14 +64,19 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
// TODO: clip-rect of text
out_commands.push(PaintCmd::Text {
fill_color: srgba(255, 255, 255, 187),
font: "14px Palatino".to_string(),
font_name: style.font_name.clone(),
font_size: style.font_size,
pos: Vec2 {
x: rect.center().x,
y: rect.center().y + 6.0,
y: rect.center().y - 6.0,
},
text,
text_align: TextAlign::Center,
});
if style.debug_rects {
out_commands.push(debug_rect(rect));
}
}
GuiCmd::Checkbox {
checked,
@ -97,14 +128,19 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
out_commands.push(PaintCmd::Text {
fill_color: stroke_color,
font: "14px Palatino".to_string(),
font_name: style.font_name.clone(),
font_size: style.font_size,
pos: Vec2 {
x: box_rect.max().x + 4.0,
y: rect.center().y + 5.0,
y: rect.center().y - 4.0,
},
text,
text_align: TextAlign::Start,
});
if style.debug_rects {
out_commands.push(debug_rect(rect));
}
}
GuiCmd::RadioButton {
checked,
@ -148,14 +184,19 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
out_commands.push(PaintCmd::Text {
fill_color: stroke_color,
font: "14px Palatino".to_string(),
font_name: style.font_name.clone(),
font_size: style.font_size,
pos: Vec2 {
x: rect.min().x + 2.0 * circle_radius + 4.0,
y: rect.center().y + 14.0 / 2.0,
y: rect.center().y - 4.0,
},
text,
text_align: TextAlign::Start,
});
if style.debug_rects {
out_commands.push(debug_rect(rect));
}
}
GuiCmd::Slider {
interact,
@ -203,28 +244,34 @@ fn translate_cmd(out_commands: &mut Vec<PaintCmd>, style: &Style, cmd: GuiCmd) {
out_commands.push(PaintCmd::Text {
fill_color: srgba(255, 255, 255, 187),
font: "14px Palatino".to_string(),
font_name: style.font_name.clone(),
font_size: style.font_size,
pos: vec2(
rect.min().x,
lerp(rect.min().y, rect.max().y, 1.0 / 3.0) + 6.0,
lerp(rect.min().y, rect.max().y, 1.0 / 3.0) - 5.0,
),
text: format!("{}: {:.3}", label, value),
text_align: TextAlign::Start,
});
if style.debug_rects {
out_commands.push(debug_rect(rect));
}
}
GuiCmd::Text {
pos,
text,
text_align,
style,
style: text_style,
} => {
let fill_color = match style {
let fill_color = match text_style {
TextStyle::Label => srgba(255, 255, 255, 187),
};
out_commands.push(PaintCmd::Text {
fill_color,
font: "14px Palatino".to_string(),
pos: pos + vec2(0.0, 7.0), // TODO: FIXME
font_name: style.font_name.clone(),
font_size: style.font_size,
pos: pos + vec2(0.0, style.font_size / 2.0 - 5.0), // TODO
text,
text_align,
});

View file

@ -158,7 +158,10 @@ pub enum PaintCmd {
},
Text {
fill_color: Color,
font: String,
/// Name, e.g. Palatino
font_name: String,
/// Height in pixels, e.g. 12
font_size: f32,
pos: Vec2,
text: String,
text_align: TextAlign,