From d6a9f6e2469bbdc814bb74ab4d607216958bda40 Mon Sep 17 00:00:00 2001 From: Igor Loskutov Date: Fri, 20 Jan 2023 16:24:43 +0700 Subject: [PATCH 1/7] Clean up a removed example from examples/README.md code removed in https://github.com/DioxusLabs/dioxus/commit/c4a18bc24d8722dda6c7c432a18f11671046718a --- examples/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/examples/README.md b/examples/README.md index 2533722ed..b8ad09cab 100644 --- a/examples/README.md +++ b/examples/README.md @@ -18,8 +18,6 @@ cargo run --example hello_world [custom_assets](./custom_assets.rs) - Include images -[custom_element](./custom_element.rs) - Render webcomponents - [custom_html](./custom_html.rs) - Customize wrapper HTML [eval](./eval.rs) - Evaluate JS expressions @@ -175,4 +173,4 @@ Missing examples - Custom elements - Component Children: Pass children into child components - Render To string: Render a mounted virtualdom to a string -- Testing and Debugging \ No newline at end of file +- Testing and Debugging From 2113827ed93fa4e3dced8092f46510a10d1ab534 Mon Sep 17 00:00:00 2001 From: Igor Loskutov Date: Fri, 20 Jan 2023 16:31:26 +0700 Subject: [PATCH 2/7] Remove tui_* examples from README --- examples/README.md | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/examples/README.md b/examples/README.md index b8ad09cab..3963d186d 100644 --- a/examples/README.md +++ b/examples/README.md @@ -130,36 +130,6 @@ cargo run --example hello_world [todomvc](./todomvc.rs) - Todo task list example -## Terminal UI - -[tui_all_events](../packages/tui/examples/tui_all_events.rs) - All of the terminal events - -[tui_border](../packages/tui/examples/tui_border.rs) - Different styles of borders and corners - -[tui_buttons](../packages/tui/examples/tui_buttons.rs) - A grid of buttons that work demonstrate the focus system - -[tui_color_test](../packages/tui/examples/tui_color_test.rs) - Grid of colors to demonstrate compatablility with different terminal color rendering modes - -[tui_colorpicker](../packages/tui/examples/tui_colorpicker.rs) - A colorpicker - -[tui_components](../packages/tui/examples/tui_components.rs) - Simple component example - -[tui_flex](../packages/tui/examples/tui_flex.rs) - Flexbox support - -[tui_hover](../packages/tui/examples/tui_hover.rs) - Detect hover and mouse events - -[tui_list](../packages/tui/examples/tui_list.rs) - Renders a list of items - -[tui_margin](../packages/tui/examples/tui_margin.rs) - Margins around flexboxes - -[tui_quadrants](../packages/tui/examples/tui_quadrants.rs) - Four quadrants - -[tui_readme](../packages/tui/examples/tui_readme.rs) - The readme example - -[tui_task](../packages/tui/examples/tui_task.rs) - Background tasks - -[tui_text](../packages/tui/examples/tui_text.rs) - Simple text example - # TODO Missing Features - Fine-grained reactivity From 8e3f2bcbe532c38d3abc9fb96c803c9c6288f8ab Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 20 Jan 2023 07:46:29 -0600 Subject: [PATCH 3/7] create stable docs workflow --- .github/workflows/docs stable.yml | 37 +++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 .github/workflows/docs stable.yml diff --git a/.github/workflows/docs stable.yml b/.github/workflows/docs stable.yml new file mode 100644 index 000000000..895e7e8d0 --- /dev/null +++ b/.github/workflows/docs stable.yml @@ -0,0 +1,37 @@ +name: docs stable + +on: + workflow_dispatch: + +jobs: + build-deploy: + runs-on: ubuntu-latest + environment: docs + steps: + + # NOTE: Comment out when https://github.com/rust-lang/mdBook/pull/1306 is merged and released + # - name: Setup mdBook + # uses: peaceiris/actions-mdbook@v1 + # with: + # mdbook-version: "0.4.10" + + # NOTE: Delete when the previous one is enabled + - name: Setup mdBook + run: | + cargo install mdbook --git https://github.com/Demonthos/mdBook.git --branch master + - uses: actions/checkout@v3 + + - name: Build + run: cd docs && + cd guide && mdbook build -d ../nightly/guide && cd .. && + cd router && mdbook build -d ../nightly/router && cd .. + + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@v4.4.1 + with: + branch: gh-pages # The branch the action should deploy to. + folder: docs/nightly # The folder the action should deploy. + target-folder: docs + repository-name: dioxuslabs/docsite + clean: false + token: ${{ secrets.DEPLOY_KEY }} # let's pretend I don't need it for now From dc768fee2f98b91c4ca173c3e4ef263ad4cfc2ff Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 20 Jan 2023 13:31:21 -0600 Subject: [PATCH 4/7] fix replacing a dynamic text node in native core --- packages/native-core/src/real_dom.rs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/native-core/src/real_dom.rs b/packages/native-core/src/real_dom.rs index 1aa75c2d8..735421673 100644 --- a/packages/native-core/src/real_dom.rs +++ b/packages/native-core/src/real_dom.rs @@ -195,8 +195,7 @@ impl, V: FromAnyValue> RealDom { text: value.to_string(), }); let node_id = self.create_node(node); - let node = self.tree.get_mut(node_id).unwrap(); - node.node_data.element_id = Some(id); + self.set_element_id(node_id, id); self.stack.push(node_id); mark_dirty(node_id, NodeMask::new().with_text(), &mut nodes_updated); } From 8030ae5581119994138cf9937b815c4cb62b82ac Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 20 Jan 2023 17:09:19 -0600 Subject: [PATCH 5/7] make text editing utilites agnostic over the text storage --- packages/native-core/src/utils/cursor.rs | 239 ++++++++++++++++------- packages/tui/src/widgets/number.rs | 8 +- packages/tui/src/widgets/password.rs | 8 +- packages/tui/src/widgets/textbox.rs | 8 +- 4 files changed, 177 insertions(+), 86 deletions(-) diff --git a/packages/native-core/src/utils/cursor.rs b/packages/native-core/src/utils/cursor.rs index c042d4cbf..69aab539d 100644 --- a/packages/native-core/src/utils/cursor.rs +++ b/packages/native-core/src/utils/cursor.rs @@ -1,87 +1,160 @@ -use std::cmp::Ordering; +use std::{cmp::Ordering, ops::Range}; use dioxus_html::input_data::keyboard_types::{Code, Key, Modifiers}; +/// This contains the information about the text that is used by the cursor to handle navigation. +pub trait Text { + /// Returns the line at the given index. + fn line(&self, number: usize) -> Option<&Self>; + /// Returns the length of the text in characters. + fn length(&self) -> usize; + /// Returns the number of lines in the text. + fn line_count(&self) -> usize; + /// Returns the character at the given character index. + fn character(&self, idx: usize) -> Option; + /// Returns the length of the text before the given line in characters. + fn len_before_line(&self, line: usize) -> usize; +} + +impl Text for str { + fn line(&self, number: usize) -> Option<&str> { + self.lines().nth(number) + } + + fn length(&self) -> usize { + self.chars().count() + } + + fn line_count(&self) -> usize { + self.lines().count() + } + + fn character(&self, idx: usize) -> Option { + self.chars().nth(idx) + } + + fn len_before_line(&self, line: usize) -> usize { + self.lines() + .take(line) + .map(|l| l.chars().count()) + .sum::() + } +} + +/// This contains the information about the text that is used by the cursor to handle editing text. +pub trait TextEditable: AsRef { + /// Inserts a character at the given character index. + fn insert_character(&mut self, idx: usize, text: char); + /// Deletes the given character range. + fn delete_range(&mut self, range: Range); +} + +impl TextEditable for String { + fn insert_character(&mut self, idx: usize, text: char) { + self.insert(idx, text); + } + + fn delete_range(&mut self, range: Range) { + self.replace_range(range, ""); + } +} + +/// A cursor position #[derive(Debug, Clone, PartialEq, Eq)] pub struct Pos { + /// The virtual column of the cursor. This can be more than the line length. To get the realized column, use [`Pos::col()`]. pub col: usize, + /// The row of the cursor. pub row: usize, } impl Pos { + /// Creates a new cursor position. pub fn new(col: usize, row: usize) -> Self { Self { row, col } } - pub fn up(&mut self, rope: &str) { - self.move_row(-1, rope); + /// Moves the position up by one line. + pub fn up(&mut self, text: &(impl Text + ?Sized)) { + self.move_row(-1, text); } - pub fn down(&mut self, rope: &str) { - self.move_row(1, rope); + /// Moves the position down by one line. + pub fn down(&mut self, text: &(impl Text + ?Sized)) { + self.move_row(1, text); } - pub fn right(&mut self, rope: &str) { - self.move_col(1, rope); + /// Moves the position right by one character. + pub fn right(&mut self, text: &(impl Text + ?Sized)) { + self.move_col(1, text); } - pub fn left(&mut self, rope: &str) { - self.move_col(-1, rope); + /// Moves the position left by one character. + pub fn left(&mut self, text: &(impl Text + ?Sized)) { + self.move_col(-1, text); } - pub fn move_row(&mut self, change: i32, rope: &str) { + /// Move the position's row by the given amount. (positive is down, negative is up) + pub fn move_row(&mut self, change: i32, text: &(impl Text + ?Sized)) { let new = self.row as i32 + change; - if new >= 0 && new < rope.lines().count() as i32 { + if new >= 0 && new < text.line_count() as i32 { self.row = new as usize; } } - pub fn move_col(&mut self, change: i32, rope: &str) { - self.realize_col(rope); - let idx = self.idx(rope) as i32; - if idx + change >= 0 && idx + change <= rope.len() as i32 { - let len_line = self.len_line(rope) as i32; + /// Move the position's column by the given amount. (positive is right, negative is left) + pub fn move_col(&mut self, change: i32, text: &(impl Text + ?Sized)) { + self.realize_col(text); + let idx = self.idx(text) as i32; + if idx + change >= 0 && idx + change <= text.length() as i32 { + let len_line = self.len_line(text) as i32; let new_col = self.col as i32 + change; let diff = new_col - len_line; if diff > 0 { - self.down(rope); + self.down(text); self.col = 0; - self.move_col(diff - 1, rope); + self.move_col(diff - 1, text); } else if new_col < 0 { - self.up(rope); - self.col = self.len_line(rope); - self.move_col(new_col + 1, rope); + self.up(text); + self.col = self.len_line(text); + self.move_col(new_col + 1, text); } else { self.col = new_col as usize; } } } - pub fn col(&self, rope: &str) -> usize { - self.col.min(self.len_line(rope)) + /// Get the realized column of the position. This is the column, but capped at the line length. + pub fn col(&self, text: &(impl Text + ?Sized)) -> usize { + self.col.min(self.len_line(text)) } + /// Get the row of the position. pub fn row(&self) -> usize { self.row } - fn len_line(&self, rope: &str) -> usize { - let line = rope.lines().nth(self.row).unwrap_or_default(); - let len = line.len(); - if len > 0 && line.chars().nth(len - 1) == Some('\n') { - len - 1 + fn len_line(&self, text: &(impl Text + ?Sized)) -> usize { + if let Some(line) = text.line(self.row) { + let len = line.length(); + if len > 0 && line.character(len - 1) == Some('\n') { + len - 1 + } else { + len + } } else { - len + 0 } } - pub fn idx(&self, rope: &str) -> usize { - rope.lines().take(self.row).map(|l| l.len()).sum::() + self.col(rope) + /// Get the character index of the position. + pub fn idx(&self, text: &(impl Text + ?Sized)) -> usize { + text.len_before_line(self.row) + self.col(text) } - // the column can be more than the line length, cap it - pub fn realize_col(&mut self, rope: &str) { - self.col = self.col(rope); + /// If the column is more than the line length, cap it to the line length. + pub fn realize_col(&mut self, text: &(impl Text + ?Sized)) { + self.col = self.col(text); } } @@ -97,13 +170,17 @@ impl PartialOrd for Pos { } } +/// A cursor is a selection of text. It has a start and end position of the selection. #[derive(Debug, Clone, PartialEq, Eq)] pub struct Cursor { + /// The start position of the selection. The start position is the origin of the selection, not necessarily the first position. pub start: Pos, + /// The end position of the selection. If the end position is None, the cursor is a caret. pub end: Option, } impl Cursor { + /// Create a new cursor with the given start position. pub fn from_start(pos: Pos) -> Self { Self { start: pos, @@ -111,6 +188,7 @@ impl Cursor { } } + /// Create a new cursor with the given start and end position. pub fn new(start: Pos, end: Pos) -> Self { Self { start, @@ -118,7 +196,8 @@ impl Cursor { } } - fn move_cursor(&mut self, f: impl FnOnce(&mut Pos), shift: bool) { + /// Move the cursor position. If shift is true, the end position will be moved instead of the start position. + pub fn move_cursor(&mut self, f: impl FnOnce(&mut Pos), shift: bool) { if shift { self.with_end(f); } else { @@ -127,7 +206,7 @@ impl Cursor { } } - fn delete_selection(&mut self, text: &mut String) -> [i32; 2] { + fn delete_selection(&mut self, text: &mut impl TextEditable) -> [i32; 2] { let first = self.first(); let last = self.last(); let dr = first.row as i32 - last.row as i32; @@ -136,7 +215,7 @@ impl Cursor { } else { first.col as i32 - last.col as i32 }; - text.replace_range(first.idx(text)..last.idx(text), ""); + text.delete_range(first.idx(text.as_ref())..last.idx(text.as_ref())); if let Some(end) = self.end.take() { if self.start > end { self.start = end; @@ -145,20 +224,24 @@ impl Cursor { [dc, dr] } - pub fn handle_input( + /// Handle moving the cursor with the given key. + pub fn handle_input( &mut self, data: &dioxus_html::KeyboardData, - text: &mut String, - max_width: usize, + text: &mut impl TextEditable, + max_text_length: usize, ) { use Code::*; match data.code() { ArrowUp => { - self.move_cursor(|c| c.up(text), data.modifiers().contains(Modifiers::SHIFT)); + self.move_cursor( + |c| c.up(text.as_ref()), + data.modifiers().contains(Modifiers::SHIFT), + ); } ArrowDown => { self.move_cursor( - |c| c.down(text), + |c| c.down(text.as_ref()), data.modifiers().contains(Modifiers::SHIFT), ); } @@ -167,22 +250,22 @@ impl Cursor { self.move_cursor( |c| { let mut change = 1; - let idx = c.idx(text); - let length = text.len(); + let idx = c.idx(text.as_ref()); + let length = text.as_ref().length(); while idx + change < length { - let chr = text.chars().nth(idx + change).unwrap(); + let chr = text.as_ref().character(idx + change).unwrap(); if chr.is_whitespace() { break; } change += 1; } - c.move_col(change as i32, text); + c.move_col(change as i32, text.as_ref()); }, data.modifiers().contains(Modifiers::SHIFT), ); } else { self.move_cursor( - |c| c.right(text), + |c| c.right(text.as_ref()), data.modifiers().contains(Modifiers::SHIFT), ); } @@ -192,28 +275,28 @@ impl Cursor { self.move_cursor( |c| { let mut change = -1; - let idx = c.idx(text) as i32; + let idx = c.idx(text.as_ref()) as i32; while idx + change > 0 { - let chr = text.chars().nth((idx + change) as usize).unwrap(); + let chr = text.as_ref().character((idx + change) as usize).unwrap(); if chr == ' ' { break; } change -= 1; } - c.move_col(change, text); + c.move_col(change, text.as_ref()); }, data.modifiers().contains(Modifiers::SHIFT), ); } else { self.move_cursor( - |c| c.left(text), + |c| c.left(text.as_ref()), data.modifiers().contains(Modifiers::SHIFT), ); } } End => { self.move_cursor( - |c| c.col = c.len_line(text), + |c| c.col = c.len_line(text.as_ref()), data.modifiers().contains(Modifiers::SHIFT), ); } @@ -221,64 +304,70 @@ impl Cursor { self.move_cursor(|c| c.col = 0, data.modifiers().contains(Modifiers::SHIFT)); } Backspace => { - self.start.realize_col(text); - let mut start_idx = self.start.idx(text); + self.start.realize_col(text.as_ref()); + let mut start_idx = self.start.idx(text.as_ref()); if self.end.is_some() { self.delete_selection(text); } else if start_idx > 0 { - self.start.left(text); - text.replace_range(start_idx - 1..start_idx, ""); + self.start.left(text.as_ref()); + text.delete_range(start_idx - 1..start_idx); if data.modifiers().contains(Modifiers::CONTROL) { - start_idx = self.start.idx(text); + start_idx = self.start.idx(text.as_ref()); while start_idx > 0 && text - .chars() - .nth(start_idx - 1) + .as_ref() + .character(start_idx - 1) .filter(|c| *c != ' ') .is_some() { - self.start.left(text); - text.replace_range(start_idx - 1..start_idx, ""); - start_idx = self.start.idx(text); + self.start.left(text.as_ref()); + text.delete_range(start_idx - 1..start_idx); + start_idx = self.start.idx(text.as_ref()); } } } } Enter => { - if text.len() + 1 - self.selection_len(text) <= max_width { - text.insert(self.start.idx(text), '\n'); + if text.as_ref().length() + 1 - self.selection_len(text.as_ref()) <= max_text_length + { + text.insert_character(self.start.idx(text.as_ref()), '\n'); self.start.col = 0; - self.start.down(text); + self.start.down(text.as_ref()); } } Tab => { - if text.len() + 1 - self.selection_len(text) <= max_width { - self.start.realize_col(text); + if text.as_ref().length() + 1 - self.selection_len(text.as_ref()) <= max_text_length + { + self.start.realize_col(text.as_ref()); self.delete_selection(text); - text.insert(self.start.idx(text), '\t'); - self.start.right(text); + text.insert_character(self.start.idx(text.as_ref()), '\t'); + self.start.right(text.as_ref()); } } _ => { - self.start.realize_col(text); + self.start.realize_col(text.as_ref()); if let Key::Character(character) = data.key() { - if text.len() + 1 - self.selection_len(text) <= max_width { + if text.as_ref().length() + 1 - self.selection_len(text.as_ref()) + <= max_text_length + { self.delete_selection(text); let character = character.chars().next().unwrap(); - text.insert(self.start.idx(text), character); - self.start.right(text); + text.insert_character(self.start.idx(text.as_ref()), character); + self.start.right(text.as_ref()); } } } } } + /// Modify the end selection position pub fn with_end(&mut self, f: impl FnOnce(&mut Pos)) { let mut new = self.end.take().unwrap_or_else(|| self.start.clone()); f(&mut new); self.end.replace(new); } + /// Returns first position of the selection (this could be the start or the end depending on the position) pub fn first(&self) -> &Pos { if let Some(e) = &self.end { e.min(&self.start) @@ -287,6 +376,7 @@ impl Cursor { } } + /// Returns last position of the selection (this could be the start or the end depending on the position) pub fn last(&self) -> &Pos { if let Some(e) = &self.end { e.max(&self.start) @@ -295,7 +385,8 @@ impl Cursor { } } - pub fn selection_len(&self, text: &str) -> usize { + /// Returns the length of the selection + pub fn selection_len(&self, text: &(impl Text + ?Sized)) -> usize { self.last().idx(text) - self.first().idx(text) } } diff --git a/packages/tui/src/widgets/number.rs b/packages/tui/src/widgets/number.rs index 2df1f512b..f34618f60 100644 --- a/packages/tui/src/widgets/number.rs +++ b/packages/tui/src/widgets/number.rs @@ -40,8 +40,8 @@ pub(crate) fn NumbericInput<'a>(cx: Scope<'a, NumbericInputProps>) -> Element<'a let dragging = use_state(cx, || false); let text = text_ref.read().clone(); - let start_highlight = cursor.read().first().idx(&text); - let end_highlight = cursor.read().last().idx(&text); + let start_highlight = cursor.read().first().idx(&*text); + let end_highlight = cursor.read().last().idx(&*text); let (text_before_first_cursor, text_after_first_cursor) = text.split_at(start_highlight); let (text_highlighted, text_after_second_cursor) = text_after_first_cursor.split_at(end_highlight - start_highlight); @@ -113,7 +113,7 @@ pub(crate) fn NumbericInput<'a>(cx: Scope<'a, NumbericInputProps>) -> Element<'a }; if is_text{ let mut text = text_ref.write(); - cursor.write().handle_input(&k, &mut text, max_len); + cursor.write().handle_input(&k, &mut *text, max_len); update(text.clone()); let node = tui_query.get(get_root_id(cx).unwrap()); @@ -165,7 +165,7 @@ pub(crate) fn NumbericInput<'a>(cx: Scope<'a, NumbericInputProps>) -> Element<'a } new.row = 0; - new.realize_col(&text_ref.read()); + new.realize_col(text_ref.read().as_str()); cursor.set(Cursor::from_start(new)); dragging.set(true); let node = tui_query_clone.get(get_root_id(cx).unwrap()); diff --git a/packages/tui/src/widgets/password.rs b/packages/tui/src/widgets/password.rs index f82d0a346..6574ab4f9 100644 --- a/packages/tui/src/widgets/password.rs +++ b/packages/tui/src/widgets/password.rs @@ -40,8 +40,8 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> { let dragging = use_state(cx, || false); let text = text_ref.read().clone(); - let start_highlight = cursor.read().first().idx(&text); - let end_highlight = cursor.read().last().idx(&text); + let start_highlight = cursor.read().first().idx(&*text); + let end_highlight = cursor.read().last().idx(&*text); let (text_before_first_cursor, text_after_first_cursor) = text.split_at(start_highlight); let (text_highlighted, text_after_second_cursor) = text_after_first_cursor.split_at(end_highlight - start_highlight); @@ -88,7 +88,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> { return; } let mut text = text_ref.write(); - cursor.write().handle_input(&k, &mut text, max_len); + cursor.write().handle_input(&k, &mut *text, max_len); if let Some(input_handler) = &cx.props.raw_oninput { input_handler.call(FormData { value: text.clone(), @@ -147,7 +147,7 @@ pub(crate) fn Password<'a>(cx: Scope<'a, PasswordProps>) -> Element<'a> { // textboxs are only one line tall new.row = 0; - new.realize_col(&text_ref.read()); + new.realize_col(text_ref.read().as_str()); cursor.set(Cursor::from_start(new)); dragging.set(true); let node = tui_query_clone.get(get_root_id(cx).unwrap()); diff --git a/packages/tui/src/widgets/textbox.rs b/packages/tui/src/widgets/textbox.rs index 4a58725bc..5e3cc693a 100644 --- a/packages/tui/src/widgets/textbox.rs +++ b/packages/tui/src/widgets/textbox.rs @@ -40,8 +40,8 @@ pub(crate) fn TextBox<'a>(cx: Scope<'a, TextBoxProps>) -> Element<'a> { let dragging = use_state(cx, || false); let text = text_ref.read().clone(); - let start_highlight = cursor.read().first().idx(&text); - let end_highlight = cursor.read().last().idx(&text); + let start_highlight = cursor.read().first().idx(&*text); + let end_highlight = cursor.read().last().idx(&*text); let (text_before_first_cursor, text_after_first_cursor) = text.split_at(start_highlight); let (text_highlighted, text_after_second_cursor) = text_after_first_cursor.split_at(end_highlight - start_highlight); @@ -90,7 +90,7 @@ pub(crate) fn TextBox<'a>(cx: Scope<'a, TextBoxProps>) -> Element<'a> { return; } let mut text = text_ref.write(); - cursor.write().handle_input(&k, &mut text, max_len); + cursor.write().handle_input(&k, &mut *text, max_len); if let Some(input_handler) = &cx.props.raw_oninput{ input_handler.call(FormData{ value: text.clone(), @@ -138,7 +138,7 @@ pub(crate) fn TextBox<'a>(cx: Scope<'a, TextBoxProps>) -> Element<'a> { // textboxs are only one line tall new.row = 0; - new.realize_col(&text_ref.read()); + new.realize_col(text_ref.read().as_str()); cursor.set(Cursor::from_start(new)); dragging.set(true); let node = tui_query_clone.get(get_root_id(cx).unwrap()); From d019ada3dae5fe95653f99ce13bd5b8466c433fa Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 20 Jan 2023 17:16:47 -0600 Subject: [PATCH 6/7] make delete selection public --- packages/native-core/src/utils/cursor.rs | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/native-core/src/utils/cursor.rs b/packages/native-core/src/utils/cursor.rs index 69aab539d..eaded383e 100644 --- a/packages/native-core/src/utils/cursor.rs +++ b/packages/native-core/src/utils/cursor.rs @@ -206,22 +206,16 @@ impl Cursor { } } - fn delete_selection(&mut self, text: &mut impl TextEditable) -> [i32; 2] { + /// Delete the currently selected text and update the cursor position. + pub fn delete_selection(&mut self, text: &mut impl TextEditable) { let first = self.first(); let last = self.last(); - let dr = first.row as i32 - last.row as i32; - let dc = if dr != 0 { - -(last.col as i32) - } else { - first.col as i32 - last.col as i32 - }; text.delete_range(first.idx(text.as_ref())..last.idx(text.as_ref())); if let Some(end) = self.end.take() { if self.start > end { self.start = end; } } - [dc, dr] } /// Handle moving the cursor with the given key. From 20751327f35e52931d5be3e1c9359bb7b55a2efc Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Fri, 20 Jan 2023 17:36:41 -0600 Subject: [PATCH 7/7] apply medium width when the border style is not none to comply with browser behavior --- packages/native-core/src/layout_attributes.rs | 117 +++++++++++++++--- packages/tui/src/layout.rs | 17 ++- 2 files changed, 115 insertions(+), 19 deletions(-) diff --git a/packages/native-core/src/layout_attributes.rs b/packages/native-core/src/layout_attributes.rs index d149a11ac..77926eb96 100644 --- a/packages/native-core/src/layout_attributes.rs +++ b/packages/native-core/src/layout_attributes.rs @@ -29,6 +29,7 @@ - [ ] pub aspect_ratio: Number, ----> parsing is done, but taffy doesnt support it */ +use lightningcss::properties::border::LineStyle; use lightningcss::properties::{align, display, flex, position, size}; use lightningcss::{ properties::{align::GapValue, border::BorderSideWidth, Property, PropertyId}, @@ -45,8 +46,43 @@ use taffy::{ style::{FlexDirection, PositionType}, }; +#[derive(Default)] +pub struct LayoutConfigeration { + /// the default border widths to use + pub border_widths: BorderWidths, +} + +pub struct BorderWidths { + /// the default border width to use for thin borders + pub thin: f32, + /// the default border width to use for medium borders + pub medium: f32, + /// the default border width to use for thick borders + pub thick: f32, +} + +impl Default for BorderWidths { + fn default() -> Self { + Self { + thin: 1.0, + medium: 3.0, + thick: 5.0, + } + } +} + /// applies the entire html namespace defined in dioxus-html pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) { + apply_layout_attributes_cfg(name, value, style, &LayoutConfigeration::default()) +} + +/// applies the entire html namespace defined in dioxus-html with the specified configeration +pub fn apply_layout_attributes_cfg( + name: &str, + value: &str, + style: &mut Style, + config: &LayoutConfigeration, +) { if let Ok(property) = Property::parse_string(PropertyId::from(name), value, ParserOptions::default()) { @@ -84,41 +120,85 @@ pub fn apply_layout_attributes(name: &str, value: &str, style: &mut Style) { style.position.right = convert_length_percentage_or_auto(inset.right); } Property::BorderTopWidth(width) => { - style.border.top = convert_border_side_width(width); + style.border.top = convert_border_side_width(width, &config.border_widths); } Property::BorderBottomWidth(width) => { - style.border.bottom = convert_border_side_width(width); + style.border.bottom = convert_border_side_width(width, &config.border_widths); } Property::BorderLeftWidth(width) => { - style.border.left = convert_border_side_width(width); + style.border.left = convert_border_side_width(width, &config.border_widths); } Property::BorderRightWidth(width) => { - style.border.right = convert_border_side_width(width); + style.border.right = convert_border_side_width(width, &config.border_widths); } Property::BorderWidth(width) => { - style.border.top = convert_border_side_width(width.top); - style.border.bottom = convert_border_side_width(width.bottom); - style.border.left = convert_border_side_width(width.left); - style.border.right = convert_border_side_width(width.right); + style.border.top = convert_border_side_width(width.top, &config.border_widths); + style.border.bottom = + convert_border_side_width(width.bottom, &config.border_widths); + style.border.left = convert_border_side_width(width.left, &config.border_widths); + style.border.right = convert_border_side_width(width.right, &config.border_widths); } Property::Border(border) => { - let width = convert_border_side_width(border.width); + let width = convert_border_side_width(border.width, &config.border_widths); style.border.top = width; style.border.bottom = width; style.border.left = width; style.border.right = width; } Property::BorderTop(top) => { - style.border.top = convert_border_side_width(top.width); + style.border.top = convert_border_side_width(top.width, &config.border_widths); } Property::BorderBottom(bottom) => { - style.border.bottom = convert_border_side_width(bottom.width); + style.border.bottom = + convert_border_side_width(bottom.width, &config.border_widths); } Property::BorderLeft(left) => { - style.border.left = convert_border_side_width(left.width); + style.border.left = convert_border_side_width(left.width, &config.border_widths); } Property::BorderRight(right) => { - style.border.right = convert_border_side_width(right.width); + style.border.right = convert_border_side_width(right.width, &config.border_widths); + } + Property::BorderTopStyle(line_style) => { + if line_style != LineStyle::None { + style.border.top = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + } + Property::BorderBottomStyle(line_style) => { + if line_style != LineStyle::None { + style.border.bottom = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + } + Property::BorderLeftStyle(line_style) => { + if line_style != LineStyle::None { + style.border.left = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + } + Property::BorderRightStyle(line_style) => { + if line_style != LineStyle::None { + style.border.right = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + } + Property::BorderStyle(styles) => { + if styles.top != LineStyle::None { + style.border.top = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + if styles.bottom != LineStyle::None { + style.border.bottom = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + if styles.left != LineStyle::None { + style.border.left = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } + if styles.right != LineStyle::None { + style.border.right = + convert_border_side_width(BorderSideWidth::Medium, &config.border_widths); + } } Property::FlexDirection(flex_direction, _) => { use FlexDirection::*; @@ -330,12 +410,15 @@ fn convert_length_percentage_or_auto( } } -fn convert_border_side_width(border_side_width: BorderSideWidth) -> Dimension { +fn convert_border_side_width( + border_side_width: BorderSideWidth, + border_width_config: &BorderWidths, +) -> Dimension { match border_side_width { BorderSideWidth::Length(Length::Value(value)) => convert_length_value(value), - BorderSideWidth::Thick => Dimension::Points(5.0), - BorderSideWidth::Medium => Dimension::Points(3.0), - BorderSideWidth::Thin => Dimension::Points(1.0), + BorderSideWidth::Thick => Dimension::Points(border_width_config.thick), + BorderSideWidth::Medium => Dimension::Points(border_width_config.medium), + BorderSideWidth::Thin => Dimension::Points(border_width_config.thin), _ => todo!(), } } diff --git a/packages/tui/src/layout.rs b/packages/tui/src/layout.rs index ba50b59a6..0dafbfa3b 100644 --- a/packages/tui/src/layout.rs +++ b/packages/tui/src/layout.rs @@ -1,6 +1,8 @@ use std::sync::{Arc, Mutex}; -use dioxus_native_core::layout_attributes::apply_layout_attributes; +use dioxus_native_core::layout_attributes::{ + apply_layout_attributes_cfg, BorderWidths, LayoutConfigeration, +}; use dioxus_native_core::node::OwnedAttributeView; use dioxus_native_core::node_ref::{AttributeMask, NodeMask, NodeView}; use dioxus_native_core::state::ChildDepState; @@ -94,7 +96,18 @@ impl ChildDepState for TaffyLayout { .binary_search(&attribute.name.as_ref()) .is_ok()); if let Some(text) = value.as_text() { - apply_layout_attributes(&attribute.name, text, &mut style); + apply_layout_attributes_cfg( + &attribute.name, + text, + &mut style, + &LayoutConfigeration { + border_widths: BorderWidths { + thin: 1.0, + medium: 1.0, + thick: 1.0, + }, + }, + ); } } }