Text tweaks
This commit is contained in:
parent
a52f27b8c8
commit
500312e878
6 changed files with 96 additions and 27 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
11
src/app.rs
11
src/app.rs
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
|
77
src/style.rs
77
src/style.rs
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue