fix native core, plasmo and dioxus-tui
This commit is contained in:
Evan Almloff committed
1 parent
87572d694f
commit
439e39bab4
37 files changed
+588
-266
No files matched your search
@@ -0,0 +1,103 @@
|
||||
use dioxus_native_core::{
|
||||
node::TextNode,
|
||||
prelude::*,
|
||||
real_dom::{NodeImmutable, NodeTypeMut},
|
||||
NodeId,
|
||||
};
|
||||
use plasmo::{render, Config, Driver, EventData};
|
||||
use std::rc::Rc;
|
||||
use std::sync::{Arc, RwLock};
|
||||
|
||||
#[derive(Default)]
|
||||
struct Counter {
|
||||
count: usize,
|
||||
counter_id: NodeId,
|
||||
button_id: NodeId,
|
||||
}
|
||||
|
||||
impl Counter {
|
||||
fn create(mut root: NodeMut) -> Self {
|
||||
let mut myself = Self::default();
|
||||
|
||||
let root_id = root.id();
|
||||
let rdom = root.real_dom_mut();
|
||||
|
||||
// create the counter
|
||||
let count = myself.count;
|
||||
myself.counter_id = rdom
|
||||
.create_node(NodeType::Text(TextNode::new(count.to_string())))
|
||||
.id();
|
||||
let mut button = rdom.create_node(NodeType::Element(ElementNode {
|
||||
tag: "div".to_string(),
|
||||
attributes: [
|
||||
("display".to_string().into(), "flex".to_string().into()),
|
||||
(
|
||||
("background-color", "style").into(),
|
||||
format!("rgb({}, {}, {})", count * 10, 0, 0,).into(),
|
||||
),
|
||||
(("width", "style").into(), "100%".to_string().into()),
|
||||
(("height", "style").into(), "100%".to_string().into()),
|
||||
(("flex-direction", "style").into(), "row".to_string().into()),
|
||||
(
|
||||
("justify-content", "style").into(),
|
||||
"center".to_string().into(),
|
||||
),
|
||||
(("align-items", "style").into(), "center".to_string().into()),
|
||||
]
|
||||
.into_iter()
|
||||
.collect(),
|
||||
..Default::default()
|
||||
}));
|
||||
button.add_event_listener("click");
|
||||
button.add_event_listener("wheel");
|
||||
button.add_child(myself.counter_id);
|
||||
myself.button_id = button.id();
|
||||
rdom.get_mut(root_id).unwrap().add_child(myself.button_id);
|
||||
|
||||
myself
|
||||
}
|
||||
}
|
||||
|
||||
impl Driver for Counter {
|
||||
fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
|
||||
// update the counter
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
let mut node = rdom.get_mut(self.button_id).unwrap();
|
||||
if let NodeTypeMut::Element(mut el) = node.node_type_mut() {
|
||||
el.set_attribute(
|
||||
("background-color", "style"),
|
||||
format!("rgb({}, {}, {})", self.count * 10, 0, 0,),
|
||||
);
|
||||
}
|
||||
let mut text = rdom.get_mut(self.counter_id).unwrap();
|
||||
let type_mut = text.node_type_mut();
|
||||
if let NodeTypeMut::Text(mut text) = type_mut {
|
||||
*text = self.count.to_string();
|
||||
}
|
||||
}
|
||||
|
||||
fn handle_event(
|
||||
&mut self,
|
||||
_: &Arc<RwLock<RealDom>>,
|
||||
_: NodeId,
|
||||
_: &str,
|
||||
_: Rc<EventData>,
|
||||
_: bool,
|
||||
) {
|
||||
// when a click or wheel event is fired, increment the counter
|
||||
self.count += 1;
|
||||
}
|
||||
|
||||
fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
|
||||
Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
render(Config::new(), |rdom, _, _| {
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
let root = rdom.root_id();
|
||||
Counter::create(rdom.get_mut(root).unwrap())
|
||||
})
|
||||
.unwrap();
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
@@ -0,0 +1,172 @@
|
||||
use dioxus_native_core::{
|
||||
node::TextNode,
|
||||
prelude::*,
|
||||
real_dom::{NodeImmutable, NodeTypeMut},
|
||||
NodeId,
|
||||
};
|
||||
use plasmo::{render, Config, Driver, EventData};
|
||||
use rustc_hash::FxHashSet;
|
||||
use std::rc::Rc;
|
||||
use std::sync::{Arc, RwLock};
|
||||
|
||||
const SIZE: usize = 20;
|
||||
|
||||
#[derive(Default, Clone, Copy)]
|
||||
struct Node {
|
||||
container_id: Option<NodeId>,
|
||||
text_id: Option<NodeId>,
|
||||
count: usize,
|
||||
}
|
||||
|
||||
struct Test {
|
||||
node_states: [[Node; SIZE]; SIZE],
|
||||
dirty: FxHashSet<(usize, usize)>,
|
||||
}
|
||||
|
||||
impl Default for Test {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
node_states: [[Node {
|
||||
container_id: None,
|
||||
text_id: None,
|
||||
count: 0,
|
||||
}; SIZE]; SIZE],
|
||||
dirty: FxHashSet::default(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Test {
|
||||
fn create(mut root: NodeMut) -> Self {
|
||||
let mut myself = Self::default();
|
||||
|
||||
// Set the root node to be a flexbox with a column direction.
|
||||
if let NodeTypeMut::Element(mut el) = root.node_type_mut() {
|
||||
el.set_attribute("display".to_string(), "flex".to_string());
|
||||
el.set_attribute(("flex-direction", "style"), "column".to_string());
|
||||
el.set_attribute(("width", "style"), "100%".to_string());
|
||||
el.set_attribute(("height", "style"), "100%".to_string());
|
||||
}
|
||||
|
||||
let root_id = root.id();
|
||||
let rdom = root.real_dom_mut();
|
||||
|
||||
// create the grid
|
||||
for (x, row) in myself.node_states.iter_mut().enumerate() {
|
||||
let row_node = rdom
|
||||
.create_node(NodeType::Element(ElementNode {
|
||||
tag: "div".to_string(),
|
||||
attributes: [
|
||||
("display".to_string().into(), "flex".to_string().into()),
|
||||
(("flex-direction", "style").into(), "row".to_string().into()),
|
||||
(("width", "style").into(), "100%".to_string().into()),
|
||||
(("height", "style").into(), "100%".to_string().into()),
|
||||
]
|
||||
.into_iter()
|
||||
.collect(),
|
||||
..Default::default()
|
||||
}))
|
||||
.id();
|
||||
for (y, node) in row.iter_mut().enumerate() {
|
||||
let count = node.count;
|
||||
let id = rdom
|
||||
.create_node(NodeType::Text(TextNode::new(count.to_string())))
|
||||
.id();
|
||||
let mut button = rdom.create_node(NodeType::Element(ElementNode {
|
||||
tag: "div".to_string(),
|
||||
attributes: [
|
||||
("display".to_string().into(), "flex".to_string().into()),
|
||||
(
|
||||
("background-color", "style").into(),
|
||||
format!("rgb({}, {}, {})", count * 10, 0, (x + y),).into(),
|
||||
),
|
||||
(("width", "style").into(), "100%".to_string().into()),
|
||||
(("height", "style").into(), "100%".to_string().into()),
|
||||
(("flex-direction", "style").into(), "row".to_string().into()),
|
||||
(
|
||||
("justify-content", "style").into(),
|
||||
"center".to_string().into(),
|
||||
),
|
||||
(("align-items", "style").into(), "center".to_string().into()),
|
||||
]
|
||||
.into_iter()
|
||||
.collect(),
|
||||
..Default::default()
|
||||
}));
|
||||
button.add_event_listener("click");
|
||||
button.add_event_listener("wheel");
|
||||
button.add_child(id);
|
||||
let button_id = button.id();
|
||||
rdom.get_mut(row_node).unwrap().add_child(button_id);
|
||||
node.container_id = Some(button_id);
|
||||
node.text_id = Some(id);
|
||||
}
|
||||
rdom.get_mut(root_id).unwrap().add_child(row_node);
|
||||
}
|
||||
myself
|
||||
}
|
||||
}
|
||||
|
||||
impl Driver for Test {
|
||||
fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
for (x, y) in self.dirty.drain() {
|
||||
let node = self.node_states[x][y];
|
||||
let node_id = node.container_id.unwrap();
|
||||
let mut container = rdom.get_mut(node_id).unwrap();
|
||||
if let NodeTypeMut::Element(mut el) = container.node_type_mut() {
|
||||
el.set_attribute(
|
||||
("background-color", "style"),
|
||||
format!("rgb({}, {}, {})", node.count * 10, 0, (x + y),),
|
||||
);
|
||||
}
|
||||
let text_id = node.text_id.unwrap();
|
||||
let mut text = rdom.get_mut(text_id).unwrap();
|
||||
let type_mut = text.node_type_mut();
|
||||
if let NodeTypeMut::Text(mut text) = type_mut {
|
||||
*text = node.count.to_string();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn handle_event(
|
||||
&mut self,
|
||||
rdom: &Arc<RwLock<RealDom>>,
|
||||
id: NodeId,
|
||||
_: &str,
|
||||
_: Rc<EventData>,
|
||||
_: bool,
|
||||
) {
|
||||
let rdom = rdom.read().unwrap();
|
||||
let node = rdom.get(id).unwrap();
|
||||
if let Some(parent) = node.parent() {
|
||||
let child_number = parent
|
||||
.child_ids()
|
||||
.iter()
|
||||
.position(|id| *id == node.id())
|
||||
.unwrap();
|
||||
if let Some(parents_parent) = parent.parent() {
|
||||
let parents_child_number = parents_parent
|
||||
.child_ids()
|
||||
.iter()
|
||||
.position(|id| *id == parent.id())
|
||||
.unwrap();
|
||||
self.node_states[parents_child_number][child_number].count += 1;
|
||||
self.dirty.insert((parents_child_number, child_number));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
|
||||
Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
render(Config::new(), |rdom, _, _| {
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
let root = rdom.root_id();
|
||||
Test::create(rdom.get_mut(root).unwrap())
|
||||
})
|
||||
.unwrap();
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
use dioxus_html::HasFormData;
|
||||
use dioxus_native_core::{
|
||||
prelude::*,
|
||||
real_dom::{NodeImmutable, NodeTypeMut},
|
||||
NodeId,
|
||||
};
|
||||
use plasmo::{render, Config, Driver, EventData};
|
||||
use std::rc::Rc;
|
||||
use std::sync::{Arc, RwLock};
|
||||
|
||||
#[derive(Default)]
|
||||
struct Counter {
|
||||
count: f64,
|
||||
button_id: NodeId,
|
||||
}
|
||||
|
||||
impl Counter {
|
||||
fn create(mut root: NodeMut) -> Self {
|
||||
let mut myself = Self::default();
|
||||
|
||||
let root_id = root.id();
|
||||
let rdom = root.real_dom_mut();
|
||||
|
||||
// create the counter
|
||||
let count = myself.count;
|
||||
let mut button = rdom.create_node(NodeType::Element(ElementNode {
|
||||
tag: "input".to_string(),
|
||||
attributes: [
|
||||
// supported types: button, checkbox, textbox, password, number, range
|
||||
("type".to_string().into(), "range".to_string().into()),
|
||||
("display".to_string().into(), "flex".to_string().into()),
|
||||
(("flex-direction", "style").into(), "row".to_string().into()),
|
||||
(
|
||||
("justify-content", "style").into(),
|
||||
"center".to_string().into(),
|
||||
),
|
||||
(("align-items", "style").into(), "center".to_string().into()),
|
||||
(
|
||||
"value".to_string().into(),
|
||||
format!("click me {count}").into(),
|
||||
),
|
||||
(("width", "style").into(), "50%".to_string().into()),
|
||||
(("height", "style").into(), "10%".to_string().into()),
|
||||
("min".to_string().into(), "20".to_string().into()),
|
||||
("max".to_string().into(), "80".to_string().into()),
|
||||
]
|
||||
.into_iter()
|
||||
.collect(),
|
||||
..Default::default()
|
||||
}));
|
||||
button.add_event_listener("input");
|
||||
myself.button_id = button.id();
|
||||
rdom.get_mut(root_id).unwrap().add_child(myself.button_id);
|
||||
|
||||
myself
|
||||
}
|
||||
}
|
||||
|
||||
impl Driver for Counter {
|
||||
fn update(&mut self, rdom: &Arc<RwLock<RealDom>>) {
|
||||
// update the counter
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
let mut node = rdom.get_mut(self.button_id).unwrap();
|
||||
if let NodeTypeMut::Element(mut el) = node.node_type_mut() {
|
||||
el.set_attribute(
|
||||
("background-color", "style"),
|
||||
format!("rgb({}, {}, {})", 255.0 - self.count * 2.0, 0, 0,),
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
fn handle_event(
|
||||
&mut self,
|
||||
_: &Arc<RwLock<RealDom>>,
|
||||
_: NodeId,
|
||||
event_type: &str,
|
||||
event: Rc<EventData>,
|
||||
_: bool,
|
||||
) {
|
||||
if event_type == "input" {
|
||||
// when the button is clicked, increment the counter
|
||||
if let EventData::Form(input_event) = &*event {
|
||||
if let Ok(value) = input_event.value().parse::<f64>() {
|
||||
self.count = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn poll_async(&mut self) -> std::pin::Pin<Box<dyn futures::Future<Output = ()> + '_>> {
|
||||
Box::pin(async move { tokio::time::sleep(std::time::Duration::from_millis(1000)).await })
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
render(Config::new(), |rdom, _, _| {
|
||||
let mut rdom = rdom.write().unwrap();
|
||||
let root = rdom.root_id();
|
||||
Counter::create(rdom.get_mut(root).unwrap())
|
||||
})
|
||||
.unwrap();
|
||||
}
|
||||
Reference in new issue
Block a user