Merge pull request #302 from Demonthos/master

tui bugfixes and text modifier elements

packages/tui/Cargo.toml

@@ -2,7 +2,7 @@
 name = "dioxus-tui"
 version = "0.2.1"
 authors = ["Jonathan Kelley, @dementhos"]
-edition = "2018"
+edition = "2021"
 description = "TUI-based renderer for Dioxus"
 repository = "https://github.com/DioxusLabs/dioxus/"
 homepage = "https://dioxuslabs.com"
@@ -19,9 +19,6 @@ dioxus-html = { path = "../html", version = "^0.2.0" }
 tui = "0.17.0"
 crossterm = "0.23.0"
 anyhow = "1.0.42"
-thiserror = "1.0.24"
-ctrlc = "3.2.1"
-bumpalo = { version = "3.8.0", features = ["boxed"] }
 tokio = { version = "1.15.0", features = ["full"] }
 futures = "0.3.19"
 stretch2 = "0.4.1"

packages/tui/src/attributes.rs

@@ -388,6 +388,15 @@ pub enum UnitSystem {
     Point(f32),
 }
 
+impl Into<Dimension> for UnitSystem {
+    fn into(self) -> Dimension {
+        match self {
+            Self::Percent(v) => Dimension::Percent(v),
+            Self::Point(v) => Dimension::Points(v),
+        }
+    }
+}
+
 fn parse_value(value: &str) -> Option<UnitSystem> {
     if value.ends_with("px") {
         if let Ok(px) = value.trim_end_matches("px").parse::<f32>() {
@@ -505,11 +514,16 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
             }
         }
         "border-bottom-style" => {
+            if style.style.border.bottom == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.bottom = v;
+            }
             style.tui_modifier.borders.bottom.style = parse_border_style(value)
         }
         "border-bottom-width" => {
             if let Some(v) = parse_value(value) {
                 style.tui_modifier.borders.bottom.width = v;
+                style.style.border.bottom = v.into();
             }
         }
         "border-collapse" => {}
@@ -547,10 +561,17 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
                 style.tui_modifier.borders.left.color = Some(c);
             }
         }
-        "border-left-style" => style.tui_modifier.borders.left.style = parse_border_style(value),
+        "border-left-style" => {
+            if style.style.border.start == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.start = v;
+            }
+            style.tui_modifier.borders.left.style = parse_border_style(value)
+        }
         "border-left-width" => {
             if let Some(v) = parse_value(value) {
                 style.tui_modifier.borders.left.width = v;
+                style.style.border.start = v.into();
             }
         }
         "border-radius" => {
@@ -581,7 +602,11 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
                 style.tui_modifier.borders.right.color = Some(c);
             }
         }
-        "border-right-style" => style.tui_modifier.borders.right.style = parse_border_style(value),
+        "border-right-style" => {
+            let v = Dimension::Points(1.0);
+            style.style.border.end = v;
+            style.tui_modifier.borders.right.style = parse_border_style(value)
+        }
         "border-right-width" => {
             if let Some(v) = parse_value(value) {
                 style.tui_modifier.borders.right.width = v;
@@ -590,6 +615,22 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
         "border-spacing" => {}
         "border-style" => {
             let values: Vec<_> = value.split(' ').collect();
+            if style.style.border.top == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.top = v;
+            }
+            if style.style.border.bottom == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.bottom = v;
+            }
+            if style.style.border.start == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.start = v;
+            }
+            if style.style.border.end == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.end = v;
+            }
             if values.len() == 1 {
                 let border_style = parse_border_style(values[0]);
                 style
@@ -623,9 +664,16 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
                 style.tui_modifier.borders.right.radius = v;
             }
         }
-        "border-top-style" => style.tui_modifier.borders.top.style = parse_border_style(value),
+        "border-top-style" => {
+            if style.style.border.top == Dimension::default() {
+                let v = Dimension::Points(1.0);
+                style.style.border.top = v;
+            }
+            style.tui_modifier.borders.top.style = parse_border_style(value)
+        }
         "border-top-width" => {
             if let Some(v) = parse_value(value) {
+                style.style.border.top = v.into();
                 style.tui_modifier.borders.top.width = v;
             }
         }
@@ -633,6 +681,10 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
             let values: Vec<_> = value.split(' ').collect();
             if values.len() == 1 {
                 if let Some(w) = parse_value(values[0]) {
+                    style.style.border.top = w.into();
+                    style.style.border.bottom = w.into();
+                    style.style.border.start = w.into();
+                    style.style.border.end = w.into();
                     style
                         .tui_modifier
                         .borders
@@ -641,11 +693,19 @@ fn apply_border(name: &str, value: &str, style: &mut StyleModifer) {
                         .for_each(|b| b.width = w);
                 }
             } else {
-                for (v, b) in values
+                let border_widths = [
+                    &mut style.style.border.top,
+                    &mut style.style.border.bottom,
+                    &mut style.style.border.start,
+                    &mut style.style.border.end,
+                ];
+                for ((v, b), width) in values
                     .into_iter()
                     .zip(style.tui_modifier.borders.slice().iter_mut())
+                    .zip(border_widths)
                 {
                     if let Some(w) = parse_value(v) {
+                        *width = w.into();
                         b.width = w;
                     }
                 }

packages/tui/src/hooks.rs

@@ -460,26 +460,7 @@ impl RinkInputHandler {
 // translate crossterm events into dioxus events
 fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> {
     let (name, data): (&str, EventData) = match evt {
-        TermEvent::Key(k) => {
+        TermEvent::Key(k) => ("keydown", translate_key_event(k)?),
-            let key = translate_key_code(k.code)?;
-            (
-                "keydown",
-                // from https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
-                EventData::Keyboard(KeyboardData {
-                    char_code: key.raw_code(),
-                    key: format!("{key:?}"),
-                    key_code: key,
-                    alt_key: k.modifiers.contains(KeyModifiers::ALT),
-                    ctrl_key: k.modifiers.contains(KeyModifiers::CONTROL),
-                    meta_key: false,
-                    shift_key: k.modifiers.contains(KeyModifiers::SHIFT),
-                    locale: Default::default(),
-                    location: 0x00,
-                    repeat: Default::default(),
-                    which: Default::default(),
-                }),
-            )
-        }
         TermEvent::Mouse(m) => {
             let (x, y) = (m.column.into(), m.row.into());
             let alt = m.modifiers.contains(KeyModifiers::ALT);
@@ -542,69 +523,145 @@ fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> {
     Some((name, data))
 }
 
-fn translate_key_code(c: TermKeyCode) -> Option<KeyCode> {
+fn translate_key_event(event: crossterm::event::KeyEvent) -> Option<EventData> {
-    match c {
+    let (code, key_str);
-        TermKeyCode::Backspace => Some(KeyCode::Backspace),
+    if let TermKeyCode::Char(c) = event.code {
-        TermKeyCode::Enter => Some(KeyCode::Enter),
+        code = match c {
-        TermKeyCode::Left => Some(KeyCode::LeftArrow),
+            'A'..='Z' | 'a'..='z' => match c.to_ascii_uppercase() {
-        TermKeyCode::Right => Some(KeyCode::RightArrow),
+                'A' => KeyCode::A,
-        TermKeyCode::Up => Some(KeyCode::UpArrow),
+                'B' => KeyCode::B,
-        TermKeyCode::Down => Some(KeyCode::DownArrow),
+                'C' => KeyCode::C,
-        TermKeyCode::Home => Some(KeyCode::Home),
+                'D' => KeyCode::D,
-        TermKeyCode::End => Some(KeyCode::End),
+                'E' => KeyCode::E,
-        TermKeyCode::PageUp => Some(KeyCode::PageUp),
+                'F' => KeyCode::F,
-        TermKeyCode::PageDown => Some(KeyCode::PageDown),
+                'G' => KeyCode::G,
-        TermKeyCode::Tab => Some(KeyCode::Tab),
+                'H' => KeyCode::H,
-        TermKeyCode::BackTab => None,
+                'I' => KeyCode::I,
-        TermKeyCode::Delete => Some(KeyCode::Delete),
+                'J' => KeyCode::J,
-        TermKeyCode::Insert => Some(KeyCode::Insert),
+                'K' => KeyCode::K,
-        TermKeyCode::F(fn_num) => match fn_num {
+                'L' => KeyCode::L,
-            1 => Some(KeyCode::F1),
+                'M' => KeyCode::M,
-            2 => Some(KeyCode::F2),
+                'N' => KeyCode::N,
-            3 => Some(KeyCode::F3),
+                'O' => KeyCode::O,
-            4 => Some(KeyCode::F4),
+                'P' => KeyCode::P,
-            5 => Some(KeyCode::F5),
+                'Q' => KeyCode::Q,
-            6 => Some(KeyCode::F6),
+                'R' => KeyCode::R,
-            7 => Some(KeyCode::F7),
+                'S' => KeyCode::S,
-            8 => Some(KeyCode::F8),
+                'T' => KeyCode::T,
-            9 => Some(KeyCode::F9),
+                'U' => KeyCode::U,
-            10 => Some(KeyCode::F10),
+                'V' => KeyCode::V,
-            11 => Some(KeyCode::F11),
+                'W' => KeyCode::W,
-            12 => Some(KeyCode::F12),
+                'X' => KeyCode::X,
-            _ => None,
+                'Y' => KeyCode::Y,
-        },
+                'Z' => KeyCode::Z,
-        TermKeyCode::Char(c) => match c.to_uppercase().next().unwrap() {
+                _ => return None,
-            'A' => Some(KeyCode::A),
+            },
-            'B' => Some(KeyCode::B),
+            ' ' => KeyCode::Space,
-            'C' => Some(KeyCode::C),
+            '[' => KeyCode::OpenBracket,
-            'D' => Some(KeyCode::D),
+            '{' => KeyCode::OpenBracket,
-            'E' => Some(KeyCode::E),
+            ']' => KeyCode::CloseBraket,
-            'F' => Some(KeyCode::F),
+            '}' => KeyCode::CloseBraket,
-            'G' => Some(KeyCode::G),
+            ';' => KeyCode::Semicolon,
-            'H' => Some(KeyCode::H),
+            ':' => KeyCode::Semicolon,
-            'I' => Some(KeyCode::I),
+            ',' => KeyCode::Comma,
-            'J' => Some(KeyCode::J),
+            '<' => KeyCode::Comma,
-            'K' => Some(KeyCode::K),
+            '.' => KeyCode::Period,
-            'L' => Some(KeyCode::L),
+            '>' => KeyCode::Period,
-            'M' => Some(KeyCode::M),
+            '1' => KeyCode::Num1,
-            'N' => Some(KeyCode::N),
+            '2' => KeyCode::Num2,
-            'O' => Some(KeyCode::O),
+            '3' => KeyCode::Num3,
-            'P' => Some(KeyCode::P),
+            '4' => KeyCode::Num4,
-            'Q' => Some(KeyCode::Q),
+            '5' => KeyCode::Num5,
-            'R' => Some(KeyCode::R),
+            '6' => KeyCode::Num6,
-            'S' => Some(KeyCode::S),
+            '7' => KeyCode::Num7,
-            'T' => Some(KeyCode::T),
+            '8' => KeyCode::Num8,
-            'U' => Some(KeyCode::U),
+            '9' => KeyCode::Num9,
-            'V' => Some(KeyCode::V),
+            '0' => KeyCode::Num0,
-            'W' => Some(KeyCode::W),
+            '!' => KeyCode::Num1,
-            'X' => Some(KeyCode::X),
+            '@' => KeyCode::Num2,
-            'Y' => Some(KeyCode::Y),
+            '#' => KeyCode::Num3,
-            'Z' => Some(KeyCode::Z),
+            '$' => KeyCode::Num4,
-            _ => None,
+            '%' => KeyCode::Num5,
-        },
+            '^' => KeyCode::Num6,
-        TermKeyCode::Null => None,
+            '&' => KeyCode::Num7,
-        TermKeyCode::Esc => Some(KeyCode::Escape),
+            '*' => KeyCode::Num8,
-    }
+            '(' => KeyCode::Num9,
+            ')' => KeyCode::Num0,
+            // numpad charicter are ambiguous to tui
+            // '*' => KeyCode::Multiply,
+            // '/' => KeyCode::Divide,
+            // '-' => KeyCode::Subtract,
+            // '+' => KeyCode::Add,
+            '+' => KeyCode::EqualSign,
+            '-' => KeyCode::Dash,
+            '_' => KeyCode::Dash,
+            '\'' => KeyCode::SingleQuote,
+            '"' => KeyCode::SingleQuote,
+            '\\' => KeyCode::BackSlash,
+            '|' => KeyCode::BackSlash,
+            '/' => KeyCode::ForwardSlash,
+            '?' => KeyCode::ForwardSlash,
+            '=' => KeyCode::EqualSign,
+            '`' => KeyCode::GraveAccent,
+            '~' => KeyCode::GraveAccent,
+            _ => return None,
+        };
+        key_str = c.to_string();
+    } else {
+        code = match event.code {
+            TermKeyCode::Esc => KeyCode::Escape,
+            TermKeyCode::Backspace => KeyCode::Backspace,
+            TermKeyCode::Enter => KeyCode::Enter,
+            TermKeyCode::Left => KeyCode::LeftArrow,
+            TermKeyCode::Right => KeyCode::RightArrow,
+            TermKeyCode::Up => KeyCode::UpArrow,
+            TermKeyCode::Down => KeyCode::DownArrow,
+            TermKeyCode::Home => KeyCode::Home,
+            TermKeyCode::End => KeyCode::End,
+            TermKeyCode::PageUp => KeyCode::PageUp,
+            TermKeyCode::PageDown => KeyCode::PageDown,
+            TermKeyCode::Tab => KeyCode::Tab,
+            TermKeyCode::Delete => KeyCode::Delete,
+            TermKeyCode::Insert => KeyCode::Insert,
+            TermKeyCode::F(fn_num) => match fn_num {
+                1 => KeyCode::F1,
+                2 => KeyCode::F2,
+                3 => KeyCode::F3,
+                4 => KeyCode::F4,
+                5 => KeyCode::F5,
+                6 => KeyCode::F6,
+                7 => KeyCode::F7,
+                8 => KeyCode::F8,
+                9 => KeyCode::F9,
+                10 => KeyCode::F10,
+                11 => KeyCode::F11,
+                12 => KeyCode::F12,
+                _ => return None,
+            },
+            TermKeyCode::BackTab => return None,
+            TermKeyCode::Null => return None,
+            _ => return None,
+        };
+        key_str = if let KeyCode::BackSlash = code {
+            "\\".to_string()
+        } else {
+            format!("{code:?}")
+        }
+    };
+    // from https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
+    Some(EventData::Keyboard(KeyboardData {
+        char_code: code.raw_code(),
+        key: key_str.to_string(),
+        key_code: code,
+        alt_key: event.modifiers.contains(KeyModifiers::ALT),
+        ctrl_key: event.modifiers.contains(KeyModifiers::CONTROL),
+        meta_key: false,
+        shift_key: event.modifiers.contains(KeyModifiers::SHIFT),
+        locale: Default::default(),
+        location: 0x00,
+        repeat: Default::default(),
+        which: Default::default(),
+    }))
 }
 
 fn clone_mouse_data(m: &MouseData) -> MouseData {

packages/tui/src/layout.rs

@@ -55,6 +55,25 @@ pub fn collect_layout<'a>(
                 tui_modifier: TuiModifier::default(),
             };
 
+            // handle text modifier elements
+            if el.namespace.is_none() {
+                match el.tag {
+                    "b" => apply_attributes("font-weight", "bold", &mut modifier),
+                    "strong" => apply_attributes("font-weight", "bold", &mut modifier),
+                    "u" => apply_attributes("text-decoration", "underline", &mut modifier),
+                    "ins" => apply_attributes("text-decoration", "underline", &mut modifier),
+                    "del" => apply_attributes("text-decoration", "line-through", &mut modifier),
+                    "i" => apply_attributes("font-style", "italic", &mut modifier),
+                    "em" => apply_attributes("font-style", "italic", &mut modifier),
+                    "mark" => apply_attributes(
+                        "background-color",
+                        "rgba(241, 231, 64, 50%)",
+                        &mut modifier,
+                    ),
+                    _ => (),
+                }
+            }
+
             for &Attribute { name, value, .. } in el.attributes {
                 apply_attributes(name, value, &mut modifier);
             }

packages/tui/src/lib.rs

@@ -172,7 +172,7 @@ pub fn render_vdom(
                             match evt.as_ref().unwrap() {
                                 InputEvent::UserInput(event) => match event {
                                     TermEvent::Key(key) => {
-                                        if matches!(key.code, KeyCode::Char('c'))
+                                        if matches!(key.code, KeyCode::Char('C' | 'c'))
                                             && key.modifiers.contains(KeyModifiers::CONTROL)
                                         {
                                             break;