djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Code editor demo: nice syntax highlighting with customizable theme

Browse source
This commit is contained in:
Emil Ernerfeldt 2021-10-01 21:29:33 +02:00
parent 96557a4fa6
commit f0868c2f07
5 changed files with 202 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Cargo.lock generated
View file

@ -865,6 +865,7 @@ dependencies = [
"criterion",
"egui",
"ehttp",
"enum-map",
"epi",
"image",
"serde",
@ -929,6 +930,27 @@ dependencies = [
"serde",
]
[[package]]
name = "enum-map"
version = "1.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e893a7ba6116821058dec84a6fb14fb2a97cd8ce5fd0f85d5a4e760ecd7329d9"
dependencies = [
"enum-map-derive",
"serde",
]
[[package]]
name = "enum-map-derive"
version = "0.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "84278eae0af6e34ff6c1db44c11634a694aafac559ff3080e4db4e4ac35907aa"
dependencies = [
"proc-macro2",
"quote",
"syn",
]
[[package]]
name = "env_logger"
version = "0.8.4"

2
egui/src/containers/frame.rs
View file

@ -23,7 +23,7 @@ impl Frame {
/// For when you want to group a few widgets together within a frame.
pub fn group(style: &Style) -> Self {
Self {
margin: Vec2::new(8.0, 6.0),
margin: Vec2::splat(6.0), // symmetric looks best in corners when nesting
corner_radius: style.visuals.widgets.noninteractive.corner_radius,
stroke: style.visuals.widgets.noninteractive.bg_stroke,
..Default::default()

10
egui/src/widgets/mod.rs
View file

@ -81,12 +81,16 @@ where
/// Show a button to reset a value to its default.
/// The button is only enabled if the value does not already have its original value.
pub fn reset_button<T: Default + PartialEq>(ui: &mut Ui, value: &mut T) {
let def = T::default();
reset_button_with(ui, value, T::default());
}
/// Show a button to reset a value to its default.
/// The button is only enabled if the value does not already have its original value.
pub fn reset_button_with<T: PartialEq>(ui: &mut Ui, value: &mut T, reset_value: T) {
if ui
.add(Button::new("Reset").enabled(*value != def))
.add(Button::new("Reset").enabled(*value != reset_value))
.clicked()
{
*value = def;
*value = reset_value;
}
}

2
egui_demo_lib/Cargo.toml
View file

@ -25,6 +25,8 @@ all-features = true
[dependencies]
egui = { version = "0.14.0", path = "../egui", default-features = false }
epi = { version = "0.14.0", path = "../epi" }
enum-map = { version = "1", features = ["serde"] }
unicode_names2 = { version = "0.4.0", default-features = false }
# feature "http":

237
egui_demo_lib/src/apps/demo/code_editor.rs
View file

@ -1,10 +1,128 @@
use egui::text::LayoutJob;
#[derive(Clone, Copy, PartialEq)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
#[derive(enum_map::Enum)]
enum TokenType {
Comment,
Keyword,
Literal,
StringLiteral,
Punctuation,
Whitespace,
}
#[derive(Clone, Copy, PartialEq)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
#[cfg_attr(feature = "serde", serde(default))]
struct CodeTheme {
dark_mode: bool,
formats: enum_map::EnumMap<TokenType, egui::TextFormat>,
}
impl Default for CodeTheme {
fn default() -> Self {
Self::dark(egui::TextStyle::Monospace)
}
}
impl CodeTheme {
fn dark(text_style: egui::TextStyle) -> Self {
use egui::{Color32, TextFormat};
Self {
dark_mode: true,
formats: enum_map::enum_map![
TokenType::Comment => TextFormat::simple(text_style, Color32::from_gray(120)),
TokenType::Keyword => TextFormat::simple(text_style, Color32::from_rgb(255, 100, 100)),
TokenType::Literal => TextFormat::simple(text_style, Color32::from_rgb(178, 108, 210)),
TokenType::StringLiteral => TextFormat::simple(text_style, Color32::from_rgb(109, 147, 226)),
TokenType::Punctuation => TextFormat::simple(text_style, Color32::LIGHT_GRAY),
TokenType::Whitespace => TextFormat::simple(text_style, Color32::TRANSPARENT),
],
}
}
fn light(text_style: egui::TextStyle) -> Self {
use egui::{Color32, TextFormat};
Self {
dark_mode: false,
formats: enum_map::enum_map![
TokenType::Comment => TextFormat::simple(text_style, Color32::GRAY),
TokenType::Keyword => TextFormat::simple(text_style, Color32::from_rgb(235, 0, 0)),
TokenType::Literal => TextFormat::simple(text_style, Color32::from_rgb(153, 134, 255)),
TokenType::StringLiteral => TextFormat::simple(text_style, Color32::from_rgb(37, 203, 105)),
TokenType::Punctuation => TextFormat::simple(text_style, Color32::DARK_GRAY),
TokenType::Whitespace => TextFormat::simple(text_style, Color32::TRANSPARENT),
],
}
}
}
impl CodeTheme {
fn ui(&mut self, ui: &mut egui::Ui, reset_value: CodeTheme) {
ui.horizontal_top(|ui| {
let mut selected_tt: TokenType = *ui.memory().data.get_or(TokenType::Comment);
ui.vertical(|ui| {
egui::widgets::global_dark_light_mode_buttons(ui);
// ui.separator(); // TODO: fix forever-expand
ui.add_space(14.0);
ui.scope(|ui| {
for (tt, tt_name) in [
(TokenType::Comment, "// comment"),
(TokenType::Keyword, "keyword"),
(TokenType::Literal, "literal"),
(TokenType::StringLiteral, "\"string literal\""),
(TokenType::Punctuation, "punctuation ;"),
// (TokenType::Whitespace, "whitespace"),
] {
let format = &mut self.formats[tt];
ui.style_mut().override_text_style = Some(format.style);
ui.visuals_mut().override_text_color = Some(format.color);
ui.radio_value(&mut selected_tt, tt, tt_name);
}
});
ui.add_space(14.0);
if ui
.add(egui::Button::new("Reset theme").enabled(*self != reset_value))
.clicked()
{
*self = reset_value;
}
});
ui.add_space(16.0);
// ui.separator(); // TODO: fix forever-expand
ui.memory().data.insert(selected_tt);
egui::Frame::group(ui.style())
.margin(egui::Vec2::splat(2.0))
.show(ui, |ui| {
// ui.group(|ui| {
ui.style_mut().override_text_style = Some(egui::TextStyle::Small);
ui.spacing_mut().slider_width = 128.0; // Controls color picker size
egui::widgets::color_picker::color_picker_color32(
ui,
&mut self.formats[selected_tt].color,
egui::color_picker::Alpha::Opaque,
);
});
});
}
}
// ----------------------------------------------------------------------------
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
#[cfg_attr(feature = "serde", serde(default))]
pub struct CodeEditor {
code: String,
theme_dark: CodeTheme,
theme_light: CodeTheme,
language: String,
code: String,
#[cfg_attr(feature = "serde", serde(skip))]
highlighter: MemoizedSyntaxHighlighter,
}
@ -12,13 +130,15 @@ pub struct CodeEditor {
impl Default for CodeEditor {
fn default() -> Self {
Self {
theme_dark: CodeTheme::dark(egui::TextStyle::Monospace),
theme_light: CodeTheme::light(egui::TextStyle::Monospace),
language: "rs".into(),
code: "// A very simple example\n\
fn main() {\n\
\tprintln!(\"Hello world!\");\n\
}\n\
"
.into(),
language: "rs".into(),
highlighter: Default::default(),
}
}
@ -33,6 +153,7 @@ impl super::Demo for CodeEditor {
use super::View;
egui::Window::new(self.name())
.open(open)
.default_height(500.0)
.show(ctx, |ui| self.ui(ui));
}
}
@ -40,8 +161,10 @@ impl super::Demo for CodeEditor {
impl super::View for CodeEditor {
fn ui(&mut self, ui: &mut egui::Ui) {
let Self {
code,
theme_dark,
theme_light,
language,
code,
highlighter,
} = self;
@ -63,16 +186,36 @@ impl super::View for CodeEditor {
ui.label(".");
});
} else {
ui.horizontal_wrapped(|ui|{
ui.horizontal_wrapped(|ui| {
ui.spacing_mut().item_spacing.x = 0.0;
ui.label("Compile the demo with the 'syntax_highlighting' feature to enable much nicer syntax highlighting using ");
ui.label("Compile the demo with the ");
ui.code("syntax_highlighting");
ui.label(" feature to enable more accurate syntax highlighting using ");
ui.hyperlink_to("syntect", "https://github.com/trishume/syntect");
ui.label(".");
});
}
ui.collapsing("Theme", |ui| {
ui.group(|ui| {
if ui.visuals().dark_mode {
let reset_value = CodeTheme::dark(egui::TextStyle::Monospace);
theme_dark.ui(ui, reset_value);
} else {
let reset_value = CodeTheme::light(egui::TextStyle::Monospace);
theme_light.ui(ui, reset_value);
}
});
});
let theme = if ui.visuals().dark_mode {
theme_dark
} else {
theme_light
};
let mut layouter = |ui: &egui::Ui, string: &str, wrap_width: f32| {
let mut layout_job = highlighter.highlight(ui.visuals().dark_mode, string, language);
let mut layout_job = highlighter.highlight(theme, string, language);
layout_job.wrap_width = wrap_width;
ui.fonts().layout_job(layout_job)
};
@ -82,6 +225,7 @@ impl super::View for CodeEditor {
egui::TextEdit::multiline(code)
.text_style(egui::TextStyle::Monospace) // for cursor height
.code_editor()
.desired_rows(10)
.lock_focus(true)
.desired_width(f32::INFINITY)
.layouter(&mut layouter),
@ -92,9 +236,11 @@ impl super::View for CodeEditor {
// ----------------------------------------------------------------------------
use egui::text::LayoutJob;
#[derive(Default)]
struct MemoizedSyntaxHighlighter {
is_dark_mode: bool,
theme: CodeTheme,
code: String,
language: String,
output: LayoutJob,
@ -102,24 +248,19 @@ struct MemoizedSyntaxHighlighter {
}
impl MemoizedSyntaxHighlighter {
fn highlight(&mut self, is_dark_mode: bool, code: &str, language: &str) -> LayoutJob {
if (
self.is_dark_mode,
self.code.as_str(),
self.language.as_str(),
) != (is_dark_mode, code, language)
{
self.is_dark_mode = is_dark_mode;
fn highlight(&mut self, theme: &CodeTheme, code: &str, language: &str) -> LayoutJob {
if (&self.theme, self.code.as_str(), self.language.as_str()) != (theme, code, language) {
self.theme = *theme;
self.code = code.to_owned();
self.language = language.to_owned();
self.output = self
.highligher
.highlight(is_dark_mode, code, language)
.highlight(theme, code, language)
.unwrap_or_else(|| {
LayoutJob::simple(
code.into(),
egui::TextStyle::Monospace,
if is_dark_mode {
if theme.dark_mode {
egui::Color32::LIGHT_GRAY
} else {
egui::Color32::DARK_GRAY
@ -152,7 +293,7 @@ impl Default for Highligher {
#[cfg(feature = "syntect")]
impl Highligher {
fn highlight(&self, is_dark_mode: bool, text: &str, language: &str) -> Option<LayoutJob> {
fn highlight(&self, theme: &CodeTheme, text: &str, language: &str) -> Option<LayoutJob> {
use syntect::easy::HighlightLines;
use syntect::highlighting::FontStyle;
use syntect::util::LinesWithEndings;
@ -162,7 +303,7 @@ impl Highligher {
.find_syntax_by_name(language)
.or_else(|| self.ps.find_syntax_by_extension(language))?;
let theme = if is_dark_mode {
let theme = if theme.dark_mode {
"base16-mocha.dark"
} else {
"base16-ocean.light"
@ -224,54 +365,15 @@ struct Highligher {}
#[cfg(not(feature = "syntect"))]
impl Highligher {
#[allow(clippy::unused_self, clippy::unnecessary_wraps)]
fn highlight(&self, is_dark_mode: bool, mut text: &str, _language: &str) -> Option<LayoutJob> {
fn highlight(&self, theme: &CodeTheme, mut text: &str, _language: &str) -> Option<LayoutJob> {
// Extremely simple syntax highlighter for when we compile without syntect
use egui::text::TextFormat;
use egui::Color32;
let monospace = egui::TextStyle::Monospace;
let comment_format = TextFormat::simple(monospace, Color32::GRAY);
let quoted_string_format = TextFormat::simple(
monospace,
if is_dark_mode {
Color32::KHAKI
} else {
Color32::BROWN
},
);
let keyword_format = TextFormat::simple(
monospace,
if is_dark_mode {
Color32::LIGHT_RED
} else {
Color32::DARK_RED
},
);
let literal_format = TextFormat::simple(
monospace,
if is_dark_mode {
Color32::LIGHT_GREEN
} else {
Color32::DARK_GREEN
},
);
let whitespace_format = TextFormat::simple(monospace, Color32::WHITE);
let punctuation_format = TextFormat::simple(
monospace,
if is_dark_mode {
Color32::LIGHT_GRAY
} else {
Color32::DARK_GRAY
},
);
let mut job = LayoutJob::default();
while !text.is_empty() {
if text.starts_with("//") {
let end = text.find('\n').unwrap_or_else(|| text.len());
job.append(&text[..end], 0.0, comment_format);
job.append(&text[..end], 0.0, theme.formats[TokenType::Comment]);
text = &text[end..];
} else if text.starts_with('"') {
let end = text[1..]
@ -279,7 +381,7 @@ impl Highligher {
.map(|i| i + 2)
.or_else(|| text.find('\n'))
.unwrap_or_else(|| text.len());
job.append(&text[..end], 0.0, quoted_string_format);
job.append(&text[..end], 0.0, theme.formats[TokenType::StringLiteral]);
text = &text[end..];
} else if text.starts_with(|c: char| c.is_ascii_alphanumeric()) {
let end = text[1..]
@ -287,24 +389,25 @@ impl Highligher {
.map(|i| i + 1)
.unwrap_or_else(|| text.len());
let word = &text[..end];
if is_keyword(word) {
job.append(word, 0.0, keyword_format);
let tt = if is_keyword(word) {
TokenType::Keyword
} else {
job.append(word, 0.0, literal_format);
TokenType::Literal
};
job.append(word, 0.0, theme.formats[tt]);
text = &text[end..];
} else if text.starts_with(|c: char| c.is_ascii_whitespace()) {
let end = text[1..]
.find(|c: char| !c.is_ascii_whitespace())
.map(|i| i + 1)
.unwrap_or_else(|| text.len());
job.append(&text[..end], 0.0, whitespace_format);
job.append(&text[..end], 0.0, theme.formats[TokenType::Whitespace]);
text = &text[end..];
} else {
let mut it = text.char_indices();
it.next();
let end = it.next().map_or(text.len(), |(idx, _chr)| idx);
job.append(&text[..end], 0.0, punctuation_format);
job.append(&text[..end], 0.0, theme.formats[TokenType::Punctuation]);
text = &text[end..];
}
}