Appearance for iced text box

.gitignore

@@ -1,2 +1,3 @@
 Cargo.lock
+sample/udhr*
 target

examples/editor-libcosmic/src/main.rs

@@ -1,13 +1,19 @@
 use cosmic::{
-    iced::widget::{
-        container,
-    },
     iced::{
         self,
+        Alignment,
         Application,
         Command,
         Element,
-        Theme
+        Theme,
+        widget::{
+            container,
+            column,
+            pick_list,
+            radio,
+            row,
+            text,
+        },
     },
     settings,
 };
@@ -18,6 +24,7 @@ use cosmic_text::{
 };
 use std::{
     env,
+    fmt,
     fs,
     sync::{Arc, Mutex},
 };
@@ -32,6 +39,37 @@ lazy_static::lazy_static! {
 //TODO: find out how to do this!
 static mut FONT_MATCHES: Option<FontMatches<'static>> = None;
 
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub struct FontMetrics {
+    pub font_size: i32,
+    pub line_height: i32,
+}
+
+impl fmt::Display for FontMetrics {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        //TODO: should line height also be shown?
+        write!(f, "{}", self.font_size)
+    }
+}
+
+impl FontMetrics {
+    pub const fn new(font_size: i32, line_height: i32) -> Self {
+        Self {
+            font_size,
+            line_height,
+        }
+    }
+}
+
+static FONT_SIZES: &'static [FontMetrics] = &[
+    FontMetrics::new(10, 14), // Caption
+    FontMetrics::new(14, 20), // Body
+    FontMetrics::new(20, 28), // Title 4
+    FontMetrics::new(24, 32), // Title 3
+    FontMetrics::new(28, 36), // Title 2
+    FontMetrics::new(32, 44), // Title 1
+];
+
 fn main() -> cosmic::iced::Result {
     env_logger::init();
 
@@ -73,12 +111,16 @@ fn main() -> cosmic::iced::Result {
 }
 
 pub struct Window {
+    theme: Theme,
     buffer: Arc<Mutex<TextBuffer<'static>>>,
 }
 
 #[allow(dead_code)]
 #[derive(Clone, Copy, Debug)]
-pub enum Message {}
+pub enum Message {
+    FontSize(FontMetrics),
+    ThemeChanged(&'static str),
+}
 
 impl Application for Window {
     type Executor = iced::executor::Default;
@@ -87,17 +129,6 @@ impl Application for Window {
     type Theme = Theme;
 
     fn new(_flags: ()) -> (Self, Command<Self::Message>) {
-        let font_sizes = [
-            (10, 14), // Caption
-            (14, 20), // Body
-            (20, 28), // Title 4
-            (24, 32), // Title 3
-            (28, 36), // Title 2
-            (32, 44), // Title 1
-        ];
-        let font_size_default = 1; // Body
-        let mut font_size_i = font_size_default;
-
         let text = if let Some(arg) = env::args().nth(1) {
             fs::read_to_string(&arg).expect("failed to open file")
         } else {
@@ -108,33 +139,82 @@ impl Application for Window {
             default_text.to_string()
         };
 
+        let font_size_i = 1; // Body
         let buffer = Arc::new(Mutex::new(TextBuffer::new(
             unsafe { FONT_MATCHES.as_ref().unwrap() },
             &text,
-            font_sizes[font_size_i].0,
-            font_sizes[font_size_i].1,
+            FONT_SIZES[font_size_i].font_size,
+            FONT_SIZES[font_size_i].line_height,
             0,
             0
         )));
 
         let window = Window {
+            theme: Theme::Dark,
             buffer,
         };
         (window, Command::none())
     }
 
+    fn theme(&self) -> Theme {
+        self.theme
+    }
+
     fn title(&self) -> String {
         let buffer = self.buffer.lock().unwrap();
         format!("COSMIC Text - iced - {}", buffer.font_matches().locale)
     }
 
     fn update(&mut self, message: Message) -> iced::Command<Self::Message> {
+        match message {
+            Message::FontSize(font_metrics) => {
+                let mut buffer = self.buffer.lock().unwrap();
+                buffer.set_font_metrics(font_metrics.font_size, font_metrics.line_height);
+            },
+            Message::ThemeChanged(theme) => match theme {
+                "Dark" => self.theme = Theme::Dark,
+                "Light" => self.theme = Theme::Light,
+                _ => (),
+            },
+        }
+
         Command::none()
     }
 
     fn view(&self) -> Element<Message> {
-        container(
+        static THEMES: &'static [&'static str] = &["Dark", "Light"];
+        let theme_picker = pick_list(
+            THEMES,
+            Some(match self.theme {
+                Theme::Dark => THEMES[0],
+                Theme::Light => THEMES[1],
+            }),
+            Message::ThemeChanged
+        );
+
+        let font_size_picker = {
+            let buffer = self.buffer.lock().unwrap();
+            pick_list(
+                FONT_SIZES,
+                Some(FontMetrics::new(buffer.font_size(), buffer.line_height())),
+                Message::FontSize
+            )
+        };
+
+        column![
+            row![
+                text("Theme:"),
+                theme_picker,
+                text("Font Size:"),
+                font_size_picker,
+            ]
+            .align_items(Alignment::Center)
+            .spacing(8)
+            ,
             text_box(self.buffer.clone())
-        ).padding(16).into()
+        ]
+        .spacing(8)
+        .padding(16)
+        .into()
     }
 }

examples/editor-libcosmic/src/text_box.rs

@@ -1,5 +1,5 @@
 use cosmic::iced_native::{
-    {Color, Element, Length, Point, Rectangle, Size, Shell},
+    {Color, Element, Length, Point, Rectangle, Size, Shell, Theme},
     clipboard::Clipboard,
     event::{
         Event,
@@ -17,10 +17,48 @@ use cosmic_text::{
     TextBuffer,
 };
 use std::{
+    cmp,
     sync::{Arc, Mutex},
     time::Instant,
 };
 
+pub struct Appearance {
+    background_color: Option<Color>,
+    text_color: Color,
+}
+
+impl Appearance {
+    fn text_color_u32(&self) -> u32 {
+        let channel = |f: f32, shift: i32| -> u32 {
+            (cmp::max(0, cmp::min(255, (f * 255.0) as i32)) << shift) as u32
+        };
+
+        channel(self.text_color.b, 0) |
+        channel(self.text_color.g, 8) |
+        channel(self.text_color.r, 16) |
+        channel(self.text_color.a, 24)
+    }
+}
+
+pub trait StyleSheet {
+    fn appearance(&self) -> Appearance;
+}
+
+impl StyleSheet for Theme {
+    fn appearance(&self) -> Appearance {
+        match self {
+            Theme::Dark => Appearance {
+                background_color: Some(Color::from_rgb8(0x34, 0x34, 0x34)),
+                text_color: Color::from_rgb8(0xFF, 0xFF, 0xFF),
+            },
+            Theme::Light => Appearance {
+                background_color: Some(Color::from_rgb8(0xFC, 0xFC, 0xFC)),
+                text_color: Color::from_rgb8(0x00, 0x00, 0x00),
+            },
+        }
+    }
+}
+
 pub struct TextBox<'a> {
     buffer: Arc<Mutex<TextBuffer<'a>>>,
 }
@@ -38,6 +76,7 @@ pub fn text_box<'a>(buffer: Arc<Mutex<TextBuffer<'a>>>) -> TextBox<'a> {
 impl<'a, Message, Renderer> Widget<Message, Renderer> for TextBox<'a>
 where
     Renderer: renderer::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         Length::Fill
@@ -66,12 +105,15 @@ where
         &self,
         _state: &widget::Tree,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
         _viewport: &Rectangle,
     ) {
+        let appearance = theme.appearance();
+        let text_color_u32 = appearance.text_color_u32();
+
         let buffer = self.buffer.lock().unwrap();
 
         let font_size = buffer.font_size();
@@ -79,15 +121,17 @@ where
 
         let instant = Instant::now();
 
-        renderer.fill_quad(
-            renderer::Quad {
-                bounds: layout.bounds(),
-                border_radius: 0.0,
-                border_width: 0.0,
-                border_color: Color::TRANSPARENT,
-            },
-            Color::from_rgb8(0x34, 0x34, 0x34),
-        );
+        if let Some(background_color) = appearance.background_color {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: layout.bounds(),
+                    border_radius: 0.0,
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                },
+                background_color
+            );
+        }
 
         let line_x = layout.bounds().x as i32;
         let mut line_y = layout.bounds().y as i32 + font_size;
@@ -151,7 +195,7 @@ where
                 }
             }
 
-            line.draw(0xFFFFFF, |x, y, data| {
+            line.draw(text_color_u32, |x, y, data| {
                 let a = (data >> 24) as u8;
                 if a > 0 {
                     let r = (data >> 16) as u8;
@@ -277,6 +321,7 @@ where
 impl<'a, Message, Renderer> From<TextBox<'a>> for Element<'a, Message, Renderer>
 where
     Renderer: renderer::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(text_box: TextBox<'a>) -> Self {
         Self::new(text_box)