swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement new mutations with native core (#630)

Browse Source 
* work on seperating tree struture from realdom

* intial update to new mutations

* handle height

* update to taffy 0.2

* add as_varient functions to OwnedAttributeValue

* make get node parent mut optionally return a parent

* work on upward pass

* add more code for parrellel passes

* make resolve passes public

* more work on parallel passes

* fix deadlock and add more tests

* move height into the tree instead of the realdom

* make passes exicute in parallel instead of executing invidual passes in parellel

* fix some warnings

* add up dependant test

* clean up examples

* work on intigrating state with passes

* update to new mutations

* work on implementing macro

* make the macro compile

* more progress on macro

* mark cloned nodes as dirty

* update persistant_iterator utility

* fix mask generation

* update tui with new mutations

* more progress updating tui

* some basic tui examples working

* don't push template nodes onto the stack

* update hover example

* update benchmark

* update more examples

* fix root node layout

* ignore out of bounds renders

* update color picker example

* update all events example

* update remaining examples

* update tests

* tests passing

* move persistant iterator test

* update examples

* fix gaps in layout

* fix formatting

* fix memory leak
This commit is contained in:
Demonthos authored and GitHub committed 2022-12-06 15:38:04 -08:00
1 parent b9aad5e8f4
commit 67a6fa9eb8
38 files changed
+3405 -2417
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/tui/examples/tui_all_events.rs
+25 -25
View File
@@ -1,6 +1,6 @@
use dioxus::prelude::*;
use dioxus_html::on::{FocusData, KeyboardData, MouseData, WheelData};
use std::sync::Arc;
use dioxus_html::{FocusData, KeyboardData, MouseData, WheelData};
use std::rc::Rc;
fn main() {
dioxus_tui::launch(app);
@@ -8,20 +8,20 @@ fn main() {
#[derive(Debug)]
enum Event {
MouseMove(Arc<MouseData>),
MouseClick(Arc<MouseData>),
MouseDoubleClick(Arc<MouseData>),
MouseDown(Arc<MouseData>),
MouseUp(Arc<MouseData>),
MouseMove(Rc<MouseData>),
MouseClick(Rc<MouseData>),
MouseDoubleClick(Rc<MouseData>),
MouseDown(Rc<MouseData>),
MouseUp(Rc<MouseData>),
Wheel(Arc<WheelData>),
Wheel(Rc<WheelData>),
KeyDown(Arc<KeyboardData>),
KeyUp(Arc<KeyboardData>),
KeyPress(Arc<KeyboardData>),
KeyDown(Rc<KeyboardData>),
KeyUp(Rc<KeyboardData>),
KeyPress(Rc<KeyboardData>),
FocusIn(Arc<FocusData>),
FocusOut(Arc<FocusData>),
FocusIn(Rc<FocusData>),
FocusOut(Rc<FocusData>),
}
const MAX_EVENTS: usize = 8;
@@ -37,7 +37,7 @@ fn app(cx: Scope) -> Element {
// todo: remove
let mut trimmed = format!("{event:?}");
trimmed.truncate(200);
cx.render(rsx!(p { "{trimmed}" }))
rsx!(p { "{trimmed}" })
});
let log_event = move |event: Event| {
@@ -57,20 +57,20 @@ fn app(cx: Scope) -> Element {
align_items: "center",
background_color: "hsl(248, 53%, 58%)",
onmousemove: move |event| log_event(Event::MouseMove(event.data)),
onclick: move |event| log_event(Event::MouseClick(event.data)),
ondblclick: move |event| log_event(Event::MouseDoubleClick(event.data)),
onmousedown: move |event| log_event(Event::MouseDown(event.data)),
onmouseup: move |event| log_event(Event::MouseUp(event.data)),
onmousemove: move |event| log_event(Event::MouseMove(event.inner().clone())),
onclick: move |event| log_event(Event::MouseClick(event.inner().clone())),
ondblclick: move |event| log_event(Event::MouseDoubleClick(event.inner().clone())),
onmousedown: move |event| log_event(Event::MouseDown(event.inner().clone())),
onmouseup: move |event| log_event(Event::MouseUp(event.inner().clone())),
onwheel: move |event| log_event(Event::Wheel(event.data)),
onwheel: move |event| log_event(Event::Wheel(event.inner().clone())),
onkeydown: move |event| log_event(Event::KeyDown(event.data)),
onkeyup: move |event| log_event(Event::KeyUp(event.data)),
onkeypress: move |event| log_event(Event::KeyPress(event.data)),
onkeydown: move |event| log_event(Event::KeyDown(event.inner().clone())),
onkeyup: move |event| log_event(Event::KeyUp(event.inner().clone())),
onkeypress: move |event| log_event(Event::KeyPress(event.inner().clone())),
onfocusin: move |event| log_event(Event::FocusIn(event.data)),
onfocusout: move |event| log_event(Event::FocusOut(event.data)),
onfocusin: move |event| log_event(Event::FocusIn(event.inner().clone())),
onfocusout: move |event| log_event(Event::FocusOut(event.inner().clone())),
"Hover, click, type or scroll to see the info down below"
},
packages/tui/examples/tui_buttons.rs
+7 -7
View File
@@ -28,7 +28,7 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
background_color: "{color}",
tabindex: "{cx.props.layer}",
onkeydown: |e| {
if let Code::Space = e.data.code() {
if let Code::Space = e.inner().code() {
toggle.modify(|f| !f);
}
},
@@ -60,7 +60,7 @@ fn app(cx: Scope) -> Element {
height: "100%",
(1..8).map(|y|
cx.render(rsx!{
rsx!{
div{
display: "flex",
flex_direction: "row",
@@ -68,26 +68,26 @@ fn app(cx: Scope) -> Element {
height: "100%",
(1..8).map(|x|{
if (x + y) % 2 == 0{
cx.render(rsx!{
rsx!{
div{
width: "100%",
height: "100%",
background_color: "rgb(100, 100, 100)",
}
})
}
}
else{
let layer = (x + y) % 3;
cx.render(rsx!{
rsx!{
Button{
color_offset: x * y,
layer: layer as u16,
}
})
}
}
})
}
})
}
)
}
})
packages/tui/examples/tui_color_test.rs
+4 -4
View File
@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
(0..=steps).map(|x|
{
let hue = x as f32*360.0/steps as f32;
cx.render(rsx! {
rsx! {
div{
width: "100%",
height: "100%",
@@ -25,7 +25,7 @@ fn app(cx: Scope) -> Element {
(0..=steps).map(|y|
{
let alpha = y as f32*100.0/steps as f32;
cx.render(rsx! {
rsx! {
div {
left: "{x}px",
top: "{y}px",
@@ -33,11 +33,11 @@ fn app(cx: Scope) -> Element {
height: "100%",
background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
}
})
}
}
)
}
})
}
}
)
}
packages/tui/examples/tui_colorpicker.rs
+10 -8
View File
@@ -1,4 +1,4 @@
use dioxus::core_macro::rsx_without_templates;
use dioxus::core::RenderReturn;
use dioxus::prelude::*;
use dioxus_tui::query::Query;
use dioxus_tui::Size;
@@ -10,18 +10,20 @@ fn main() {
fn app(cx: Scope) -> Element {
let hue = use_state(&cx, || 0.0);
let brightness = use_state(&cx, || 0.0);
let tui_query: Query = cx.consume_context().unwrap();
let tui_query: &Query = cx.consume_context().unwrap();
// disable templates so that every node has an id and can be queried
cx.render(rsx_without_templates! {
cx.render(rsx! {
div{
width: "100%",
background_color: "hsl({hue}, 70%, {brightness}%)",
onmousemove: move |evt| {
let node = tui_query.get(cx.root_node().mounted_id());
let Size{width, height} = node.size().unwrap();
let pos = evt.data.element_coordinates();
hue.set((pos.x as f32/width as f32)*255.0);
brightness.set((pos.y as f32/height as f32)*100.0);
if let RenderReturn::Sync(Ok(node))=cx.root_node(){
let node = tui_query.get(node.root_ids[0].get());
let Size{width, height} = node.size().unwrap();
let pos = evt.inner().element_coordinates();
hue.set((pos.x as f32/width as f32)*255.0);
brightness.set((pos.y as f32/height as f32)*100.0);
}
},
"hsl({hue}, 70%, {brightness}%)",
}
packages/tui/examples/tui_hover.rs
+18 -18
View File
@@ -1,7 +1,7 @@
use std::{convert::TryInto, sync::Arc};
use dioxus::{events::MouseData, prelude::*};
use dioxus_core::UiEvent;
use dioxus_core::Event;
use std::rc::Rc;
use std::{convert::TryInto, sync::Arc};
fn main() {
dioxus_tui::launch(app);
@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
"#".to_string() + &c.iter().map(|c| format!("{c:02X?}")).collect::<String>()
}
fn get_brightness(m: Arc<MouseData>) -> i32 {
fn get_brightness(m: &Rc<MouseData>) -> i32 {
let b: i32 = m.held_buttons().len().try_into().unwrap();
127 * b
}
@@ -32,8 +32,8 @@ fn app(cx: Scope) -> Element {
let buttons = use_state(&cx, || "".to_string());
let modifiers = use_state(&cx, || "".to_string());
let update_data = move |event: UiEvent<MouseData>| {
let mouse_data = event.data;
let update_data = move |event: Event<MouseData>| {
let mouse_data = event.inner();
page_coordinates.set(format!("{:?}", mouse_data.page_coordinates()));
element_coordinates.set(format!("{:?}", mouse_data.element_coordinates()));
@@ -62,9 +62,9 @@ fn app(cx: Scope) -> Element {
justify_content: "center",
align_items: "center",
background_color: "{q1_color_str}",
onmouseenter: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
onmousedown: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
onmouseup: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
onmouseenter: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
onmousedown: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
onmouseup: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta().strip_units().y) as i32, 0, 0]),
onmouseleave: move |_| q1_color.set([200; 3]),
onmousemove: update_data,
@@ -76,9 +76,9 @@ fn app(cx: Scope) -> Element {
justify_content: "center",
align_items: "center",
background_color: "{q2_color_str}",
onmouseenter: move |m| q2_color.set([get_brightness(m.data); 3]),
onmousedown: move |m| q2_color.set([get_brightness(m.data); 3]),
onmouseup: move |m| q2_color.set([get_brightness(m.data); 3]),
onmouseenter: move |m| q2_color.set([get_brightness(m.inner()); 3]),
onmousedown: move |m| q2_color.set([get_brightness(m.inner()); 3]),
onmouseup: move |m| q2_color.set([get_brightness(m.inner()); 3]),
onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta().strip_units().y) as i32;3]),
onmouseleave: move |_| q2_color.set([200; 3]),
onmousemove: update_data,
@@ -96,9 +96,9 @@ fn app(cx: Scope) -> Element {
justify_content: "center",
align_items: "center",
background_color: "{q3_color_str}",
onmouseenter: move |m| q3_color.set([0, get_brightness(m.data), 0]),
onmousedown: move |m| q3_color.set([0, get_brightness(m.data), 0]),
onmouseup: move |m| q3_color.set([0, get_brightness(m.data), 0]),
onmouseenter: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
onmousedown: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
onmouseup: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta().strip_units().y) as i32, 0]),
onmouseleave: move |_| q3_color.set([200; 3]),
onmousemove: update_data,
@@ -110,9 +110,9 @@ fn app(cx: Scope) -> Element {
justify_content: "center",
align_items: "center",
background_color: "{q4_color_str}",
onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta().strip_units().y) as i32]),
onmouseleave: move |_| q4_color.set([200; 3]),
onmousemove: update_data,
packages/tui/examples/tui_margin.rs
+6 -6
View File
@@ -11,13 +11,13 @@ fn app(cx: Scope) -> Element {
height: "100%",
flex_direction: "column",
background_color: "black",
// margin_right: "10px",
margin_right: "10px",
div {
width: "70%",
height: "70%",
background_color: "green",
// margin_left: "4px",
margin_left: "4px",
div {
width: "100%",
@@ -34,10 +34,10 @@ fn app(cx: Scope) -> Element {
align_items: "center",
flex_direction: "column",
// padding_top: "2px",
// padding_bottom: "2px",
// padding_left: "4px",
// padding_right: "4px",
padding_top: "2px",
padding_bottom: "2px",
padding_left: "4px",
padding_right: "4px",
"[A]"
"[A]"
packages/tui/examples/tui_text.rs
+1 -1
View File
@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
width: "100%",
height: "100%",
flex_direction: "column",
onwheel: move |evt| alpha.set((**alpha + evt.data.delta().strip_units().y as i64).min(100).max(0)),
onwheel: move |evt| alpha.set((**alpha + evt.inner().delta().strip_units().y as i64).min(100).max(0)),
p {
background_color: "black",