tests passing, and tui updated

packages/tui/src/hooks.rs

@@ -5,7 +5,6 @@ use dioxus_core::*;
 use fxhash::{FxHashMap, FxHashSet};
 
 use dioxus_html::{on::*, KeyCode};
-use dioxus_native_core::real_dom::{Node, RealDom};
 use std::{
     any::Any,
     cell::RefCell,
@@ -17,6 +16,7 @@ use stretch2::{prelude::Layout, Stretch};
 
 use crate::layout::StretchLayout;
 use crate::style_attributes::StyleModifier;
+use crate::{Dom, Node};
 
 // a wrapper around the input state for easier access
 // todo: fix loop
@@ -166,7 +166,7 @@ impl InnerInputState {
         evts: &mut Vec<EventCore>,
         resolved_events: &mut Vec<UserEvent>,
         layout: &Stretch,
-        dom: &mut RealDom<StretchLayout, StyleModifier>,
+        dom: &mut Dom,
     ) {
         let previous_mouse = self
             .mouse
@@ -191,7 +191,7 @@ impl InnerInputState {
         previous_mouse: Option<(MouseData, Vec<u16>)>,
         resolved_events: &mut Vec<UserEvent>,
         layout: &Stretch,
-        dom: &mut RealDom<StretchLayout, StyleModifier>,
+        dom: &mut Dom,
     ) {
         struct Data<'b> {
             new_pos: (i32, i32),
@@ -215,8 +215,8 @@ impl InnerInputState {
             data: Arc<dyn Any + Send + Sync>,
             will_bubble: &mut FxHashSet<ElementId>,
             resolved_events: &mut Vec<UserEvent>,
-            node: &Node<StretchLayout, StyleModifier>,
-            dom: &RealDom<StretchLayout, StyleModifier>,
+            node: &Node,
+            dom: &Dom,
         ) {
             // only trigger event if the event was not triggered already by a child
             if will_bubble.insert(node.id) {
@@ -261,7 +261,7 @@ impl InnerInputState {
                 // mousemove
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mousemove") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let previously_contained = data
                         .old_pos
                         .filter(|pos| layout_contains_point(node_layout, *pos))
@@ -285,7 +285,7 @@ impl InnerInputState {
                 // mouseenter
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mouseenter") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let previously_contained = data
                         .old_pos
                         .filter(|pos| layout_contains_point(node_layout, *pos))
@@ -309,7 +309,7 @@ impl InnerInputState {
                 // mouseover
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mouseover") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let previously_contained = data
                         .old_pos
                         .filter(|pos| layout_contains_point(node_layout, *pos))
@@ -333,7 +333,7 @@ impl InnerInputState {
                 // mousedown
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mousedown") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let currently_contains = layout_contains_point(node_layout, data.new_pos);
 
                     if currently_contains && data.clicked {
@@ -353,7 +353,7 @@ impl InnerInputState {
                 // mouseup
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mouseup") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let currently_contains = layout_contains_point(node_layout, data.new_pos);
 
                     if currently_contains && data.released {
@@ -373,7 +373,7 @@ impl InnerInputState {
                 // click
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("click") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let currently_contains = layout_contains_point(node_layout, data.new_pos);
 
                     if currently_contains && data.released && data.mouse_data.button == 0 {
@@ -393,7 +393,7 @@ impl InnerInputState {
                 // contextmenu
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("contextmenu") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let currently_contains = layout_contains_point(node_layout, data.new_pos);
 
                     if currently_contains && data.released && data.mouse_data.button == 2 {
@@ -413,7 +413,7 @@ impl InnerInputState {
                 // wheel
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("wheel") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let currently_contains = layout_contains_point(node_layout, data.new_pos);
 
                     if let Some(w) = data.wheel_data {
@@ -435,7 +435,7 @@ impl InnerInputState {
                 // mouseleave
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mouseleave") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let previously_contained = data
                         .old_pos
                         .filter(|pos| layout_contains_point(node_layout, *pos))
@@ -459,7 +459,7 @@ impl InnerInputState {
                 // mouseout
                 let mut will_bubble = FxHashSet::default();
                 for node in dom.get_listening_sorted("mouseout") {
-                    let node_layout = layout.layout(node.up_state.node.unwrap()).unwrap();
+                    let node_layout = layout.layout(node.state.layout.node.unwrap()).unwrap();
                     let previously_contained = data
                         .old_pos
                         .filter(|pos| layout_contains_point(node_layout, *pos))
@@ -522,11 +522,7 @@ impl RinkInputHandler {
         )
     }
 
-    pub fn get_events(
-        &self,
-        layout: &Stretch,
-        dom: &mut RealDom<StretchLayout, StyleModifier>,
-    ) -> Vec<UserEvent> {
+    pub(crate) fn get_events(&self, layout: &Stretch, dom: &mut Dom) -> Vec<UserEvent> {
         let mut resolved_events = Vec::new();
 
         (*self.state).borrow_mut().update(

packages/tui/src/layout.rs

@@ -1,83 +1,90 @@
+use std::cell::RefCell;
+use std::rc::Rc;
+
 use dioxus_core::*;
 use dioxus_native_core::layout_attributes::apply_layout_attributes;
-use dioxus_native_core::real_dom::BubbledUpState;
+use dioxus_native_core::state::{AttributeMask, ChildDepState, NodeMask, NodeView};
 use stretch2::prelude::*;
 
-/// the size
 #[derive(Clone, PartialEq, Default, Debug)]
 pub struct StretchLayout {
     pub style: Style,
     pub node: Option<Node>,
 }
 
-impl BubbledUpState for StretchLayout {
-    type Ctx = Stretch;
+impl ChildDepState for StretchLayout {
+    type Ctx = Rc<RefCell<Stretch>>;
+    type DepState = Self;
+    // todo: update mask
+    const NODE_MASK: NodeMask = NodeMask::new(AttributeMask::All, false, false, true);
 
     /// Setup the layout
-    fn reduce<'a, I>(&mut self, children: I, vnode: &VNode, stretch: &mut Self::Ctx)
+    fn reduce<'a>(
+        &mut self,
+        node: NodeView,
+        children: impl Iterator<Item = &'a Self::DepState>,
+        ctx: &Self::Ctx,
+    ) -> bool
     where
-        I: Iterator<Item = &'a Self>,
-        Self: 'a,
+        Self::DepState: 'a,
     {
-        match vnode {
-            VNode::Text(t) => {
-                let char_len = t.text.chars().count();
+        let mut stretch = ctx.borrow_mut();
+        if let Some(text) = node.text() {
+            let char_len = text.chars().count();
 
-                let style = Style {
-                    size: Size {
-                        // characters are 1 point tall
-                        height: Dimension::Points(1.0),
+            let style = Style {
+                size: Size {
+                    // characters are 1 point tall
+                    height: Dimension::Points(1.0),
 
-                        // text is as long as it is declared
-                        width: Dimension::Points(char_len as f32),
-                    },
-                    ..Default::default()
-                };
+                    // text is as long as it is declared
+                    width: Dimension::Points(char_len as f32),
+                },
+                ..Default::default()
+            };
 
-                if let Some(n) = self.node {
-                    if self.style != style {
-                        stretch.set_style(n, style).unwrap();
-                    }
-                } else {
-                    self.node = Some(stretch.new_node(style, &[]).unwrap());
+            if let Some(n) = self.node {
+                if self.style != style {
+                    stretch.set_style(n, style).unwrap();
                 }
-
-                self.style = style;
+            } else {
+                self.node = Some(stretch.new_node(style, &[]).unwrap());
             }
-            VNode::Element(el) => {
-                // gather up all the styles from the attribute list
-                let mut style = Style::default();
 
-                for &Attribute { name, value, .. } in el.attributes {
-                    apply_layout_attributes(name, value, &mut style);
-                }
+            self.style = style;
+        } else {
+            // gather up all the styles from the attribute list
+            let mut style = Style::default();
 
-                // the root node fills the entire area
-                if el.id.get() == Some(ElementId(0)) {
-                    apply_layout_attributes("width", "100%", &mut style);
-                    apply_layout_attributes("height", "100%", &mut style);
-                }
-
-                // Set all direct nodes as our children
-                let mut child_layout = vec![];
-                for l in children {
-                    child_layout.push(l.node.unwrap());
-                }
-
-                if let Some(n) = self.node {
-                    if stretch.children(n).unwrap() != child_layout {
-                        stretch.set_children(n, &child_layout).unwrap();
-                    }
-                    if self.style != style {
-                        stretch.set_style(n, style).unwrap();
-                    }
-                } else {
-                    self.node = Some(stretch.new_node(style, &child_layout).unwrap());
-                }
-
-                self.style = style;
+            for &Attribute { name, value, .. } in node.attributes() {
+                apply_layout_attributes(name, value, &mut style);
             }
-            _ => (),
+
+            // the root node fills the entire area
+            if node.id() == ElementId(0) {
+                apply_layout_attributes("width", "100%", &mut style);
+                apply_layout_attributes("height", "100%", &mut style);
+            }
+
+            // Set all direct nodes as our children
+            let mut child_layout = vec![];
+            for l in children {
+                child_layout.push(l.node.unwrap());
+            }
+
+            if let Some(n) = self.node {
+                if stretch.children(n).unwrap() != child_layout {
+                    stretch.set_children(n, &child_layout).unwrap();
+                }
+                if self.style != style {
+                    stretch.set_style(n, style).unwrap();
+                }
+            } else {
+                self.node = Some(stretch.new_node(style, &child_layout).unwrap());
+            }
+
+            self.style = style;
         }
+        true
     }
 }

packages/tui/src/lib.rs

@@ -1,4 +1,5 @@
 use anyhow::Result;
+use anymap::AnyMap;
 use crossterm::{
     event::{DisableMouseCapture, EnableMouseCapture, Event as TermEvent, KeyCode, KeyModifiers},
     execute,
@@ -6,14 +7,14 @@ use crossterm::{
 };
 use dioxus_core::exports::futures_channel::mpsc::unbounded;
 use dioxus_core::*;
-use dioxus_native_core::{
-    dioxus_native_core_macro::State, real_dom::RealDom, real_dom_new_api::State,
-};
+use dioxus_native_core::{dioxus_native_core_macro::State, real_dom::RealDom, state::*};
 use futures::{
     channel::mpsc::{UnboundedReceiver, UnboundedSender},
     pin_mut, StreamExt,
 };
 use layout::StretchLayout;
+use std::cell::RefCell;
+use std::rc::Rc;
 use std::{io, time::Duration};
 use stretch2::{prelude::Size, Stretch};
 use style_attributes::StyleModifier;
@@ -31,8 +32,17 @@ pub use config::*;
 pub use hooks::*;
 pub use render::*;
 
+type Dom = RealDom<NodeState>;
+type Node = dioxus_native_core::real_dom::Node<NodeState>;
+
 #[derive(Debug, Clone, State, Default)]
-struct NodeState {}
+struct NodeState {
+    #[child_dep_state(StretchLayout, RefCell<Stretch>)]
+    layout: StretchLayout,
+    // depends on attributes, the C component of it's parent and a u8 context
+    #[parent_dep_state(StyleModifier)]
+    style: StyleModifier,
+}
 
 #[derive(Clone)]
 pub struct TuiContext {
@@ -75,13 +85,13 @@ pub fn launch_cfg(app: Component<()>, cfg: Config) {
     cx.provide_root_context(state);
     cx.provide_root_context(TuiContext { tx: event_tx_clone });
 
-    let mut rdom: RealDom<StretchLayout, StyleModifier> = RealDom::new();
+    let mut rdom: Dom = RealDom::new();
     let mutations = dom.rebuild();
     let to_update = rdom.apply_mutations(vec![mutations]);
-    let mut stretch = Stretch::new();
-    let _to_rerender = rdom
-        .update_state(&dom, to_update, &mut stretch, &mut ())
-        .unwrap();
+    let stretch = Rc::new(RefCell::new(Stretch::new()));
+    let mut any_map = AnyMap::new();
+    any_map.insert(stretch.clone());
+    let _to_rerender = rdom.update_state(&dom, to_update, any_map).unwrap();
 
     render_vdom(
         &mut dom,
@@ -100,8 +110,8 @@ fn render_vdom(
     mut event_reciever: UnboundedReceiver<InputEvent>,
     handler: RinkInputHandler,
     cfg: Config,
-    mut rdom: RealDom<StretchLayout, StyleModifier>,
-    mut stretch: Stretch,
+    mut rdom: Dom,
+    mut stretch: Rc<RefCell<Stretch>>,
     mut register_event: impl FnMut(crossterm::event::Event),
 ) -> Result<()> {
     tokio::runtime::Builder::new_current_thread()
@@ -119,7 +129,7 @@ fn render_vdom(
                 terminal.clear().unwrap();
             }
 
-            let mut to_rerender: fxhash::FxHashSet<usize> = vec![0].into_iter().collect();
+            let to_rerender: fxhash::FxHashSet<usize> = vec![0].into_iter().collect();
             let mut resized = true;
 
             loop {
@@ -136,15 +146,11 @@ fn render_vdom(
 
                 if !to_rerender.is_empty() || resized {
                     resized = false;
-                    fn resize(
-                        dims: Rect,
-                        stretch: &mut Stretch,
-                        rdom: &RealDom<StretchLayout, StyleModifier>,
-                    ) {
+                    fn resize(dims: Rect, stretch: &mut Stretch, rdom: &Dom) {
                         let width = dims.width;
                         let height = dims.height;
                         let root_id = rdom.root_id();
-                        let root_node = rdom[root_id].up_state.node.unwrap();
+                        let root_node = rdom[root_id].state.layout.node.unwrap();
 
                         stretch
                             .compute_layout(
@@ -159,9 +165,9 @@ fn render_vdom(
                     if let Some(terminal) = &mut terminal {
                         terminal.draw(|frame| {
                             // size is guaranteed to not change when rendering
-                            resize(frame.size(), &mut stretch, &rdom);
+                            resize(frame.size(), &mut stretch.borrow_mut(), &rdom);
                             let root = &rdom[rdom.root_id()];
-                            render::render_vnode(frame, &stretch, &rdom, &root, cfg);
+                            render::render_vnode(frame, &stretch.borrow(), &rdom, &root, cfg);
                         })?;
                     } else {
                         resize(
@@ -171,7 +177,7 @@ fn render_vdom(
                                 width: 300,
                                 height: 300,
                             },
-                            &mut stretch,
+                            &mut stretch.borrow_mut(),
                             &rdom,
                         );
                     }
@@ -212,7 +218,7 @@ fn render_vdom(
 
                 {
                     // resolve events before rendering
-                    let evts = handler.get_events(&stretch, &mut rdom);
+                    let evts = handler.get_events(&stretch.borrow(), &mut rdom);
                     for e in evts {
                         vdom.handle_message(SchedulerMsg::Event(e));
                     }
@@ -220,11 +226,9 @@ fn render_vdom(
                     // updates the dom's nodes
                     let to_update = rdom.apply_mutations(mutations);
                     // update the style and layout
-                    to_rerender.extend(
-                        rdom.update_state(vdom, to_update, &mut stretch, &mut ())
-                            .unwrap()
-                            .iter(),
-                    )
+                    let mut any_map = AnyMap::new();
+                    any_map.insert(stretch.clone());
+                    let _to_rerender = rdom.update_state(&vdom, to_update, any_map).unwrap();
                 }
             }
 

packages/tui/src/render.rs

@@ -1,8 +1,5 @@
 use crate::layout::StretchLayout;
-use dioxus_native_core::{
-    layout_attributes::UnitSystem,
-    real_dom::{Node, RealDom},
-};
+use dioxus_native_core::layout_attributes::UnitSystem;
 use std::io::Stdout;
 use stretch2::{
     geometry::Point,
@@ -15,16 +12,16 @@ use crate::{
     style::{RinkColor, RinkStyle},
     style_attributes::{BorderEdge, BorderStyle},
     widget::{RinkBuffer, RinkCell, RinkWidget, WidgetWithContext},
-    Config, StyleModifier,
+    Config, Dom, Node, StyleModifier,
 };
 
 const RADIUS_MULTIPLIER: [f32; 2] = [1.0, 0.5];
 
-pub fn render_vnode(
+pub(crate) fn render_vnode(
     frame: &mut tui::Frame<CrosstermBackend<Stdout>>,
     layout: &Stretch,
-    rdom: &RealDom<StretchLayout, StyleModifier>,
-    node: &Node<StretchLayout, StyleModifier>,
+    rdom: &Dom,
+    node: &Node,
     cfg: Config,
 ) {
     use dioxus_native_core::real_dom::NodeType;
@@ -33,7 +30,7 @@ pub fn render_vnode(
         return;
     }
 
-    let Layout { location, size, .. } = layout.layout(node.up_state.node.unwrap()).unwrap();
+    let Layout { location, size, .. } = layout.layout(node.state.layout.node.unwrap()).unwrap();
 
     let Point { x, y } = location;
     let Size { width, height } = size;
@@ -59,7 +56,7 @@ pub fn render_vnode(
 
             let label = Label {
                 text,
-                style: node.down_state.style,
+                style: node.state.style.style,
             };
             let area = Rect::new(*x as u16, *y as u16, *width as u16, *height as u16);
 
@@ -84,7 +81,7 @@ pub fn render_vnode(
     }
 }
 
-impl RinkWidget for &Node<StretchLayout, StyleModifier> {
+impl RinkWidget for &Node {
     fn render(self, area: Rect, mut buf: RinkBuffer<'_>) {
         use tui::symbols::line::*;
 
@@ -268,14 +265,14 @@ impl RinkWidget for &Node<StretchLayout, StyleModifier> {
         for x in area.left()..area.right() {
             for y in area.top()..area.bottom() {
                 let mut new_cell = RinkCell::default();
-                if let Some(c) = self.down_state.style.bg {
+                if let Some(c) = self.state.style.style.bg {
                     new_cell.bg = c;
                 }
                 buf.set(x, y, new_cell);
             }
         }
 
-        let borders = &self.down_state.modifier.borders;
+        let borders = &self.state.style.modifier.borders;
 
         let last_edge = &borders.left;
         let current_edge = &borders.top;
@@ -292,7 +289,7 @@ impl RinkWidget for &Node<StretchLayout, StyleModifier> {
                 (last_r * RADIUS_MULTIPLIER[0]) as u16,
                 (last_r * RADIUS_MULTIPLIER[1]) as u16,
             ];
-            let color = current_edge.color.or(self.down_state.style.fg);
+            let color = current_edge.color.or(self.state.style.style.fg);
             let mut new_cell = RinkCell::default();
             if let Some(c) = color {
                 new_cell.fg = c;
@@ -327,7 +324,7 @@ impl RinkWidget for &Node<StretchLayout, StyleModifier> {
                 (last_r * RADIUS_MULTIPLIER[0]) as u16,
                 (last_r * RADIUS_MULTIPLIER[1]) as u16,
             ];
-            let color = current_edge.color.or(self.down_state.style.fg);
+            let color = current_edge.color.or(self.state.style.style.fg);
             let mut new_cell = RinkCell::default();
             if let Some(c) = color {
                 new_cell.fg = c;
@@ -362,7 +359,7 @@ impl RinkWidget for &Node<StretchLayout, StyleModifier> {
                 (last_r * RADIUS_MULTIPLIER[0]) as u16,
                 (last_r * RADIUS_MULTIPLIER[1]) as u16,
             ];
-            let color = current_edge.color.or(self.down_state.style.fg);
+            let color = current_edge.color.or(self.state.style.style.fg);
             let mut new_cell = RinkCell::default();
             if let Some(c) = color {
                 new_cell.fg = c;
@@ -397,7 +394,7 @@ impl RinkWidget for &Node<StretchLayout, StyleModifier> {
                 (last_r * RADIUS_MULTIPLIER[0]) as u16,
                 (last_r * RADIUS_MULTIPLIER[1]) as u16,
             ];
-            let color = current_edge.color.or(self.down_state.style.fg);
+            let color = current_edge.color.or(self.state.style.style.fg);
             let mut new_cell = RinkCell::default();
             if let Some(c) = color {
                 new_cell.fg = c;

packages/tui/src/style_attributes.rs

@@ -32,7 +32,7 @@
 use dioxus_core::{Attribute, VNode};
 use dioxus_native_core::{
     layout_attributes::{parse_value, UnitSystem},
-    real_dom::PushedDownState,
+    state::{AttributeMask, NodeMask, NodeView, ParentDepState},
 };
 
 use crate::style::{RinkColor, RinkStyle};
@@ -43,18 +43,22 @@ pub struct StyleModifier {
     pub modifier: TuiModifier,
 }
 
-impl PushedDownState for StyleModifier {
+impl ParentDepState for StyleModifier {
     type Ctx = ();
+    type DepState = Self;
+    // todo: seperate each attribute into it's own class
+    const NODE_MASK: NodeMask = NodeMask::new(AttributeMask::All, true, true, false);
 
-    fn reduce(&mut self, parent: Option<&Self>, vnode: &VNode, _ctx: &mut Self::Ctx) {
+    fn reduce(&mut self, node: NodeView, parent: Option<&Self::DepState>, ctx: &Self::Ctx) -> bool {
         *self = StyleModifier::default();
         if parent.is_some() {
             self.style.fg = None;
         }
-        if let VNode::Element(el) = vnode {
-            // handle text modifier elements
-            if el.namespace.is_none() {
-                match el.tag {
+
+        // handle text modifier elements
+        if node.namespace().is_none() {
+            if let Some(tag) = node.tag() {
+                match tag {
                     "b" => apply_style_attributes("font-weight", "bold", self),
                     "strong" => apply_style_attributes("font-weight", "bold", self),
                     "u" => apply_style_attributes("text-decoration", "underline", self),
@@ -68,11 +72,11 @@ impl PushedDownState for StyleModifier {
                     _ => (),
                 }
             }
+        }
 
-            // gather up all the styles from the attribute list
-            for &Attribute { name, value, .. } in el.attributes {
-                apply_style_attributes(name, value, self);
-            }
+        // gather up all the styles from the attribute list
+        for &Attribute { name, value, .. } in node.attributes() {
+            apply_style_attributes(name, value, self);
         }
 
         // keep the text styling from the parent element
@@ -81,6 +85,7 @@ impl PushedDownState for StyleModifier {
             new_style.bg = self.style.bg;
             self.style = new_style;
         }
+        true
     }
 }