From a05e3a7fab5f160d52a60e93b1cc9a484a52ec4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20K=C3=A5re=20Alsaker?= <john.kare.alsaker@gmail.com>
Date: Tue, 14 Nov 2023 17:37:22 +0100
Subject: [PATCH 1/2] Add `ViewData` for internal view owned state

---
 src/view.rs                          | 32 +++++++++++--
 src/views/clip.rs                    | 21 ++++++---
 src/views/container.rs               | 17 +++++--
 src/views/container_box.rs           | 17 +++++--
 src/views/drag_resize_window_area.rs | 17 +++++--
 src/views/drag_window_area.rs        | 14 ++++--
 src/views/dyn_container.rs           | 16 ++++---
 src/views/empty.rs                   | 19 ++++++--
 src/views/img.rs                     | 23 ++++++---
 src/views/label.rs                   | 20 ++++----
 src/views/list.rs                    | 16 ++++---
 src/views/rich_text.rs               | 18 ++++---
 src/views/scroll.rs                  | 70 +++++++++++++++-------------
 src/views/stack.rs                   | 29 +++++++-----
 src/views/static_list.rs             | 18 +++++--
 src/views/svg.rs                     | 21 ++++++---
 src/views/tab.rs                     | 16 ++++---
 src/views/text_input.rs              | 34 ++++++++------
 src/views/virtual_list.rs            | 20 ++++----
 src/widgets/slider.rs                | 20 ++++----
 src/widgets/toggle_button.rs         | 22 +++++----
 21 files changed, 309 insertions(+), 171 deletions(-)

diff --git a/src/view.rs b/src/view.rs
index 674b052c..77e4c51c 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -97,7 +97,8 @@ use crate::{
 };
 
 pub trait View {
-    fn id(&self) -> Id;
+    fn view_data(&self) -> &ViewData;
+    fn view_data_mut(&mut self) -> &mut ViewData;
 
     /// This method walks over children and must be implemented if the view has any children.
     /// It should return children back to front and should stop if `_for_each` returns `true`.
@@ -115,6 +116,10 @@ pub trait View {
     ) {
     }
 
+    fn id(&self) -> Id {
+        self.view_data().id()
+    }
+
     fn view_style(&self) -> Option<Style> {
         None
     }
@@ -235,6 +240,19 @@ pub trait View {
     }
 }
 
+pub struct ViewData {
+    pub(crate) id: Id,
+}
+
+impl ViewData {
+    pub fn new(id: Id) -> Self {
+        Self { id }
+    }
+    pub fn id(&self) -> Id {
+        self.id
+    }
+}
+
 /// Computes the layout of the view's children, if any.
 pub fn default_compute_layout<V: View + ?Sized>(view: &mut V, cx: &mut LayoutCx) -> Option<Rect> {
     let mut layout_rect: Option<Rect> = None;
@@ -585,8 +603,12 @@ pub(crate) fn view_debug_tree(root_view: &dyn View) {
 }
 
 impl View for Box<dyn View> {
-    fn id(&self) -> Id {
-        (**self).id()
+    fn view_data(&self) -> &ViewData {
+        (**self).view_data()
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        (**self).view_data_mut()
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -604,6 +626,10 @@ impl View for Box<dyn View> {
         (**self).for_each_child_rev_mut(for_each)
     }
 
+    fn id(&self) -> Id {
+        (**self).id()
+    }
+
     fn view_style(&self) -> Option<Style> {
         (**self).view_style()
     }
diff --git a/src/views/clip.rs b/src/views/clip.rs
index a8270353..1b0615fb 100644
--- a/src/views/clip.rs
+++ b/src/views/clip.rs
@@ -1,22 +1,29 @@
 use kurbo::Size;
 
-use crate::{id::Id, view::View};
+use crate::{
+    id::Id,
+    view::{View, ViewData},
+};
 
 pub struct Clip {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 }
 
 pub fn clip<V: View + 'static>(child: V) -> Clip {
     Clip {
-        id: Id::next(),
+        data: ViewData::new(Id::next()),
         child: Box::new(child),
     }
 }
 
 impl View for Clip {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -40,10 +47,10 @@ impl View for Clip {
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         cx.save();
-        let style = cx.get_builtin_style(self.id);
+        let style = cx.get_builtin_style(self.id());
         let border_radius = style.border_radius();
         let size = cx
-            .get_layout(self.id)
+            .get_layout(self.id())
             .map(|layout| Size::new(layout.size.width as f64, layout.size.height as f64))
             .unwrap_or_default();
 
diff --git a/src/views/container.rs b/src/views/container.rs
index 9215273f..fdc46614 100644
--- a/src/views/container.rs
+++ b/src/views/container.rs
@@ -1,8 +1,11 @@
-use crate::{id::Id, view::View};
+use crate::{
+    id::Id,
+    view::{View, ViewData},
+};
 
 /// A simple wrapper around another View. See [`container`]
 pub struct Container {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 }
 
@@ -12,14 +15,18 @@ pub struct Container {
 /// set of styles completely separate from the View that is being wrapped.
 pub fn container<V: View + 'static>(child: V) -> Container {
     Container {
-        id: Id::next(),
+        data: ViewData::new(Id::next()),
         child: Box::new(child),
     }
 }
 
 impl View for Container {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
diff --git a/src/views/container_box.rs b/src/views/container_box.rs
index b25734c4..fe554476 100644
--- a/src/views/container_box.rs
+++ b/src/views/container_box.rs
@@ -1,8 +1,11 @@
-use crate::{id::Id, view::View};
+use crate::{
+    id::Id,
+    view::{View, ViewData},
+};
 
 /// A wrapper around any type that implements View. See [`container_box`]
 pub struct ContainerBox {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 }
 
@@ -43,14 +46,18 @@ pub struct ContainerBox {
 /// ```
 pub fn container_box(child: impl View + 'static) -> ContainerBox {
     ContainerBox {
-        id: Id::next(),
+        data: ViewData::new(Id::next()),
         child: Box::new(child),
     }
 }
 
 impl View for ContainerBox {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
diff --git a/src/views/drag_resize_window_area.rs b/src/views/drag_resize_window_area.rs
index a62b1f5e..4ac296cc 100644
--- a/src/views/drag_resize_window_area.rs
+++ b/src/views/drag_resize_window_area.rs
@@ -1,13 +1,17 @@
 use winit::window::ResizeDirection;
 
 use crate::{
-    action::drag_resize_window, event::EventListener, id::Id, style::CursorStyle, view::View,
+    action::drag_resize_window,
+    event::EventListener,
+    id::Id,
+    style::CursorStyle,
+    view::{View, ViewData},
 };
 
 use super::Decorators;
 
 pub struct DragResizeWindowArea {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 }
 
@@ -17,7 +21,7 @@ pub fn drag_resize_window_area<V: View + 'static>(
 ) -> DragResizeWindowArea {
     let id = Id::next();
     DragResizeWindowArea {
-        id,
+        data: ViewData::new(id),
         child: Box::new(child),
     }
     .on_event_stop(EventListener::PointerDown, move |_| {
@@ -39,10 +43,13 @@ pub fn drag_resize_window_area<V: View + 'static>(
 }
 
 impl View for DragResizeWindowArea {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
     }
 
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
+    }
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
         for_each(&self.child);
     }
diff --git a/src/views/drag_window_area.rs b/src/views/drag_window_area.rs
index 0788bda8..76a037db 100644
--- a/src/views/drag_window_area.rs
+++ b/src/views/drag_window_area.rs
@@ -2,20 +2,20 @@ use crate::{
     action::{drag_window, toggle_window_maximized},
     event::EventListener,
     id::Id,
-    view::View,
+    view::{View, ViewData},
 };
 
 use super::Decorators;
 
 pub struct DragWindowArea {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 }
 
 pub fn drag_window_area<V: View + 'static>(child: V) -> DragWindowArea {
     let id = Id::next();
     DragWindowArea {
-        id,
+        data: ViewData::new(id),
         child: Box::new(child),
     }
     .on_event_stop(EventListener::PointerDown, |_| drag_window())
@@ -23,8 +23,12 @@ pub fn drag_window_area<V: View + 'static>(child: V) -> DragWindowArea {
 }
 
 impl View for DragWindowArea {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs
index c45917f9..9610d3e2 100644
--- a/src/views/dyn_container.rs
+++ b/src/views/dyn_container.rs
@@ -2,14 +2,14 @@ use floem_reactive::{as_child_of_current_scope, create_updater, Scope};
 
 use crate::{
     id::Id,
-    view::{view_children_set_parent_id, View},
+    view::{view_children_set_parent_id, View, ViewData},
 };
 
 type ChildFn<T> = dyn Fn(T) -> (Box<dyn View>, Scope);
 
 /// A container for a dynamically updating View. See [`dyn_container`]
 pub struct DynamicContainer<T: 'static> {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
     child_scope: Scope,
     child_fn: Box<ChildFn<T>>,
@@ -81,7 +81,7 @@ pub fn dyn_container<CF: Fn(T) -> Box<dyn View> + 'static, T: 'static>(
     let child_fn = Box::new(as_child_of_current_scope(child_fn));
     let (child, child_scope) = child_fn(initial);
     DynamicContainer {
-        id,
+        data: ViewData::new(id),
         child,
         child_scope,
         child_fn,
@@ -89,8 +89,12 @@ pub fn dyn_container<CF: Fn(T) -> Box<dyn View> + 'static, T: 'static>(
 }
 
 impl<T: 'static> View for DynamicContainer<T> {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -118,7 +122,7 @@ impl<T: 'static> View for DynamicContainer<T> {
             cx.app_state_mut().remove_view(&mut self.child);
             (self.child, self.child_scope) = (self.child_fn)(*val);
             old_child_scope.dispose();
-            self.child.id().set_parent(self.id);
+            self.child.id().set_parent(self.id());
             view_children_set_parent_id(&*self.child);
             cx.request_all(self.id());
         }
diff --git a/src/views/empty.rs b/src/views/empty.rs
index 6cd1d881..e16ee7e3 100644
--- a/src/views/empty.rs
+++ b/src/views/empty.rs
@@ -1,15 +1,24 @@
-use crate::{id::Id, view::View};
+use crate::{
+    id::Id,
+    view::{View, ViewData},
+};
 
 pub struct Empty {
-    id: Id,
+    data: ViewData,
 }
 
 pub fn empty() -> Empty {
-    Empty { id: Id::next() }
+    Empty {
+        data: ViewData::new(Id::next()),
+    }
 }
 
 impl View for Empty {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 }
diff --git a/src/views/img.rs b/src/views/img.rs
index 7ef173bc..9d9c4ed0 100644
--- a/src/views/img.rs
+++ b/src/views/img.rs
@@ -5,7 +5,12 @@ use floem_renderer::Renderer;
 use image::{DynamicImage, GenericImageView};
 use sha2::{Digest, Sha256};
 
-use crate::{id::Id, style::Style, unit::UnitExt, view::View};
+use crate::{
+    id::Id,
+    style::Style,
+    unit::UnitExt,
+    view::{View, ViewData},
+};
 
 use taffy::prelude::Node;
 
@@ -81,7 +86,7 @@ impl ImageStyle {
 }
 
 pub struct Img {
-    id: Id,
+    data: ViewData,
     //FIXME: store the pixel format(once its added to vger), for now we only store RGBA(RGB is converted to RGBA)
     img: Option<Rc<DynamicImage>>,
     img_hash: Option<Vec<u8>>,
@@ -99,7 +104,7 @@ pub(crate) fn img_dynamic(image: impl Fn() -> Option<Rc<DynamicImage>> + 'static
         id.update_state(image(), false);
     });
     Img {
-        id,
+        data: ViewData::new(id),
         img: None,
         img_hash: None,
         img_dimensions: None,
@@ -108,8 +113,12 @@ pub(crate) fn img_dynamic(image: impl Fn() -> Option<Rc<DynamicImage>> + 'static
 }
 
 impl View for Img {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
@@ -130,7 +139,7 @@ impl View for Img {
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
+        cx.layout_node(self.id(), true, |cx| {
             if self.content_node.is_none() {
                 self.content_node = Some(
                     cx.app_state_mut()
@@ -155,7 +164,7 @@ impl View for Img {
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         if let Some(img) = self.img.as_ref() {
-            let rect = cx.get_content_rect(self.id);
+            let rect = cx.get_content_rect(self.id());
             cx.draw_img(
                 floem_renderer::Img {
                     img,
diff --git a/src/views/label.rs b/src/views/label.rs
index c8d6564b..bbed39bb 100644
--- a/src/views/label.rs
+++ b/src/views/label.rs
@@ -8,7 +8,7 @@ use crate::{
     style::Style,
     style::{FontProps, LineHeight, TextColor, TextOverflow, TextOverflowProp},
     unit::PxPct,
-    view::View,
+    view::{View, ViewData},
 };
 use floem_reactive::create_updater;
 use floem_renderer::Renderer;
@@ -25,7 +25,7 @@ prop_extracter! {
 }
 
 pub struct Label {
-    id: Id,
+    data: ViewData,
     label: String,
     text_layout: Option<TextLayout>,
     text_node: Option<Node>,
@@ -39,7 +39,7 @@ pub struct Label {
 impl Label {
     fn new(id: Id, label: String) -> Self {
         Label {
-            id,
+            data: ViewData::new(id),
             label,
             text_layout: None,
             text_node: None,
@@ -109,8 +109,12 @@ impl Label {
 }
 
 impl View for Label {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
@@ -134,12 +138,12 @@ impl View for Label {
             self.available_text = None;
             self.available_width = None;
             self.available_text_layout = None;
-            cx.app_state_mut().request_layout(self.id);
+            cx.app_state_mut().request_layout(self.id());
         }
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
+        cx.layout_node(self.id(), true, |cx| {
             let (width, height) = if self.label.is_empty() {
                 (0.0, self.font.size().unwrap_or(14.0))
             } else {
@@ -183,7 +187,7 @@ impl View for Label {
         }
 
         let layout = cx.get_layout(self.id()).unwrap();
-        let style = cx.app_state_mut().get_builtin_style(self.id);
+        let style = cx.app_state_mut().get_builtin_style(self.id());
         let text_overflow = style.text_overflow();
         let padding_left = match style.padding_left() {
             PxPct::Px(padding) => padding as f32,
diff --git a/src/views/list.rs b/src/views/list.rs
index 51c8b15c..98d6c772 100644
--- a/src/views/list.rs
+++ b/src/views/list.rs
@@ -10,7 +10,7 @@ use smallvec::SmallVec;
 use crate::{
     context::{AppState, UpdateCx},
     id::Id,
-    view::{view_children_set_parent_id, View},
+    view::{view_children_set_parent_id, View, ViewData},
 };
 
 pub(crate) type FxIndexSet<T> = indexmap::IndexSet<T, BuildHasherDefault<FxHasher>>;
@@ -24,7 +24,7 @@ where
     V: View,
     T: 'static,
 {
-    id: Id,
+    data: ViewData,
     children: Vec<Option<(V, Scope)>>,
     view_fn: Box<dyn Fn(T) -> (V, Scope)>,
     phantom: PhantomData<T>,
@@ -70,7 +70,7 @@ where
     });
     let view_fn = Box::new(as_child_of_current_scope(view_fn));
     List {
-        id,
+        data: ViewData::new(id),
         children: Vec::new(),
         view_fn,
         phantom: PhantomData,
@@ -78,8 +78,12 @@ where
 }
 
 impl<V: View + 'static, T> View for List<V, T> {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -121,7 +125,7 @@ impl<V: View + 'static, T> View for List<V, T> {
     fn update(&mut self, cx: &mut UpdateCx, state: Box<dyn std::any::Any>) {
         if let Ok(diff) = state.downcast() {
             apply_diff(
-                self.id,
+                self.id(),
                 cx.app_state,
                 *diff,
                 &mut self.children,
diff --git a/src/views/rich_text.rs b/src/views/rich_text.rs
index 2f4f2dcb..f9f3bd26 100644
--- a/src/views/rich_text.rs
+++ b/src/views/rich_text.rs
@@ -10,11 +10,11 @@ use crate::{
     id::Id,
     style::{Style, TextOverflow},
     unit::PxPct,
-    view::View,
+    view::{View, ViewData},
 };
 
 pub struct RichText {
-    id: Id,
+    data: ViewData,
     text_layout: TextLayout,
     text_node: Option<Node>,
     text_overflow: TextOverflow,
@@ -29,7 +29,7 @@ pub fn rich_text(text_layout: impl Fn() -> TextLayout + 'static) -> RichText {
         id.update_state(new_text_layout, false);
     });
     RichText {
-        id,
+        data: ViewData::new(id),
         text_layout: text,
         text_node: None,
         text_overflow: TextOverflow::Wrap,
@@ -38,8 +38,12 @@ pub fn rich_text(text_layout: impl Fn() -> TextLayout + 'static) -> RichText {
 }
 
 impl View for RichText {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
@@ -67,7 +71,7 @@ impl View for RichText {
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
+        cx.layout_node(self.id(), true, |cx| {
             let size = self.text_layout.size();
             let width = size.width as f32;
             let height = size.height as f32;
@@ -90,7 +94,7 @@ impl View for RichText {
 
     fn compute_layout(&mut self, cx: &mut crate::context::LayoutCx) -> Option<Rect> {
         let layout = cx.get_layout(self.id()).unwrap();
-        let style = cx.app_state_mut().get_builtin_style(self.id);
+        let style = cx.app_state_mut().get_builtin_style(self.id());
         let padding_left = match style.padding_left() {
             PxPct::Px(padding) => padding as f32,
             PxPct::Pct(pct) => pct as f32 * layout.size.width,
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index 2ad4234a..1193033b 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -12,7 +12,7 @@ use crate::{
     style::{Background, BorderColor, BorderRadius, PositionProp, Style, StyleSelector},
     style_class,
     unit::Px,
-    view::View,
+    view::{View, ViewData},
     EventPropagation,
 };
 
@@ -64,7 +64,7 @@ prop_extracter! {
 const HANDLE_COLOR: Color = Color::rgba8(0, 0, 0, 120);
 
 pub struct Scroll {
-    id: Id,
+    data: ViewData,
     child: Box<dyn View>,
 
     /// the actual rect of the scroll view excluding padding and borders. The origin is relative to this view.
@@ -99,7 +99,7 @@ pub struct Scroll {
 
 pub fn scroll<V: View + 'static>(child: V) -> Scroll {
     Scroll {
-        id: Id::next(),
+        data: ViewData::new(Id::next()),
         child: Box::new(child),
         actual_rect: Rect::ZERO,
         child_size: Size::ZERO,
@@ -130,7 +130,7 @@ impl Scroll {
     }
 
     pub fn on_ensure_visible(self, to: impl Fn() -> Rect + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             let rect = to();
             id.update_state(ScrollState::EnsureVisible(rect), true);
@@ -140,7 +140,7 @@ impl Scroll {
     }
 
     pub fn on_scroll_delta(self, delta: impl Fn() -> Vec2 + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             let delta = delta();
             id.update_state(ScrollState::ScrollDelta(delta), false);
@@ -150,7 +150,7 @@ impl Scroll {
     }
 
     pub fn on_scroll_to(self, origin: impl Fn() -> Option<Point> + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             if let Some(origin) = origin() {
                 id.update_state(ScrollState::ScrollTo(origin), true);
@@ -161,7 +161,7 @@ impl Scroll {
     }
 
     pub fn scroll_to_view(self, view: impl Fn() -> Option<Id> + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             if let Some(view) = view() {
                 id.update_state(ScrollState::ScrollToView(view), true);
@@ -172,7 +172,7 @@ impl Scroll {
     }
 
     pub fn hide_bar(self, hide: impl Fn() -> bool + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             id.update_state(ScrollState::HiddenBar(hide()), false);
         });
@@ -180,7 +180,7 @@ impl Scroll {
     }
 
     pub fn propagate_pointer_wheel(self, value: impl Fn() -> bool + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             id.update_state(ScrollState::PropagatePointerWheel(value()), false);
         });
@@ -188,7 +188,7 @@ impl Scroll {
     }
 
     pub fn vertical_scroll_as_horizontal(self, value: impl Fn() -> bool + 'static) -> Self {
-        let id = self.id;
+        let id = self.id();
         create_effect(move |_| {
             id.update_state(ScrollState::VerticalScrollAsHorizontal(value()), false);
         });
@@ -266,11 +266,11 @@ impl Scroll {
         let new_child_size = self.child_size(app_state).unwrap_or_default();
         self.child_size = new_child_size;
 
-        self.actual_rect = app_state.get_content_rect(self.id);
+        self.actual_rect = app_state.get_content_rect(self.id());
 
         // Round to prevent loops due to floating point accuracy
         if (child_size * 128.0).round() != (new_child_size * 128.0).round() {
-            app_state.request_layout(self.id);
+            app_state.request_layout(self.id());
         }
     }
 
@@ -305,8 +305,8 @@ impl Scroll {
 
         if child_viewport != self.child_viewport {
             app_state.set_viewport(self.child.id(), child_viewport);
-            app_state.request_compute_layout_recursive(self.id);
-            app_state.request_paint(self.id);
+            app_state.request_compute_layout_recursive(self.id());
+            app_state.request_paint(self.id());
             self.child_viewport = child_viewport;
             if let Some(onscroll) = &self.onscroll {
                 onscroll(child_viewport);
@@ -318,7 +318,7 @@ impl Scroll {
     fn child_size(&self, app_state: &mut AppState) -> Option<Size> {
         app_state
             .view_states
-            .get(&self.id)
+            .get(&self.id())
             .map(|view| &view.children_nodes)
             .and_then(|nodes| nodes.get(1))
             .and_then(|node| app_state.taffy.layout(*node).ok())
@@ -564,29 +564,33 @@ impl Scroll {
         let hover = self.point_hits_vertical_bar(app_state, pos);
         if self.v_handle_hover != hover {
             self.v_handle_hover = hover;
-            app_state.request_paint(self.id);
+            app_state.request_paint(self.id());
         }
         let hover = self.point_hits_horizontal_bar(app_state, pos);
         if self.h_handle_hover != hover {
             self.h_handle_hover = hover;
-            app_state.request_paint(self.id);
+            app_state.request_paint(self.id());
         }
         let hover = self.point_within_vertical_bar(app_state, pos);
         if self.v_track_hover != hover {
             self.v_track_hover = hover;
-            app_state.request_paint(self.id);
+            app_state.request_paint(self.id());
         }
         let hover = self.point_within_horizontal_bar(app_state, pos);
         if self.h_track_hover != hover {
             self.h_track_hover = hover;
-            app_state.request_paint(self.id);
+            app_state.request_paint(self.id());
         }
     }
 }
 
 impl View for Scroll {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -632,7 +636,7 @@ impl View for Scroll {
                         // TODO: How to deal with nested viewports / scrolls?
                         let rect = rect.with_origin(
                             rect.origin()
-                                - cx.app_state.get_layout_rect(self.id).origin().to_vec2()
+                                - cx.app_state.get_layout_rect(self.id()).origin().to_vec2()
                                 - self.actual_rect.origin().to_vec2()
                                 + self.computed_child_viewport.origin().to_vec2(),
                         );
@@ -677,7 +681,7 @@ impl View for Scroll {
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
+        cx.layout_node(self.id(), true, |cx| {
             let child_id = self.child.id();
             let child_view = cx.app_state_mut().view_state(child_id);
             child_view.combined_style = child_view
@@ -742,9 +746,9 @@ impl View for Scroll {
                                 event.pos.y,
                                 scroll_offset,
                             );
-                            cx.update_active(self.id);
+                            cx.update_active(self.id());
                             // Force a repaint.
-                            cx.request_paint(self.id);
+                            cx.request_paint(self.id());
                             return EventPropagation::Stop;
                         }
                         self.click_vertical_bar_area(cx.app_state, event.pos);
@@ -754,7 +758,7 @@ impl View for Scroll {
                             event.pos.y,
                             scroll_offset,
                         );
-                        cx.update_active(self.id);
+                        cx.update_active(self.id());
                         return EventPropagation::Stop;
                     } else if self.point_within_horizontal_bar(cx.app_state, pos) {
                         if self.point_hits_horizontal_bar(cx.app_state, pos) {
@@ -763,9 +767,9 @@ impl View for Scroll {
                                 event.pos.x,
                                 scroll_offset,
                             );
-                            cx.update_active(self.id);
+                            cx.update_active(self.id());
                             // Force a repaint.
-                            cx.request_paint(self.id);
+                            cx.request_paint(self.id());
                             return EventPropagation::Stop;
                         }
                         self.click_horizontal_bar_area(cx.app_state, event.pos);
@@ -775,7 +779,7 @@ impl View for Scroll {
                             event.pos.x,
                             scroll_offset,
                         );
-                        cx.update_active(self.id);
+                        cx.update_active(self.id());
                         return EventPropagation::Stop;
                     }
                 }
@@ -784,7 +788,7 @@ impl View for Scroll {
                 if self.are_bars_held() {
                     self.held = BarHeldState::None;
                     // Force a repaint.
-                    cx.request_paint(self.id);
+                    cx.request_paint(self.id());
                 }
             }
             Event::PointerMove(event) => {
@@ -826,7 +830,7 @@ impl View for Scroll {
                 self.h_handle_hover = false;
                 self.v_track_hover = false;
                 self.h_track_hover = false;
-                cx.request_paint(self.id);
+                cx.request_paint(self.id());
             }
             _ => {}
         }
@@ -840,7 +844,7 @@ impl View for Scroll {
 
         if let Event::PointerWheel(pointer_event) = &event {
             if let Some(listener) = event.listener() {
-                if let Some(action) = cx.get_event_listener(self.id, &listener) {
+                if let Some(action) = cx.get_event_listener(self.id(), &listener) {
                     if (*action)(&event).is_processed() {
                         return EventPropagation::Stop;
                     }
@@ -869,7 +873,7 @@ impl View for Scroll {
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         cx.save();
-        let style = cx.get_computed_style(self.id);
+        let style = cx.get_computed_style(self.id());
         let radius = match style.get(BorderRadius) {
             crate::unit::PxPct::Px(px) => px,
             crate::unit::PxPct::Pct(pct) => self.actual_rect.size().min_side() * (pct / 100.),
diff --git a/src/views/stack.rs b/src/views/stack.rs
index 87ff40a3..7a8727c7 100644
--- a/src/views/stack.rs
+++ b/src/views/stack.rs
@@ -1,17 +1,22 @@
 use taffy::style::FlexDirection;
 
-use crate::{context::UpdateCx, id::Id, style::Style, view::View, view_tuple::ViewTuple};
+use crate::{
+    context::UpdateCx,
+    id::Id,
+    style::Style,
+    view::{View, ViewData},
+    view_tuple::ViewTuple,
+};
 
 pub struct Stack {
-    id: Id,
+    data: ViewData,
     children: Vec<Box<dyn View>>,
     direction: Option<FlexDirection>,
 }
 
 pub fn stack<VT: ViewTuple + 'static>(children: VT) -> Stack {
-    let id = Id::next();
     Stack {
-        id,
+        data: ViewData::new(Id::next()),
         children: children.into_views(),
         direction: None,
     }
@@ -19,9 +24,8 @@ pub fn stack<VT: ViewTuple + 'static>(children: VT) -> Stack {
 
 /// A stack which defaults to `FlexDirection::Row`.
 pub fn h_stack<VT: ViewTuple + 'static>(children: VT) -> Stack {
-    let id = Id::next();
     Stack {
-        id,
+        data: ViewData::new(Id::next()),
         children: children.into_views(),
         direction: Some(FlexDirection::Row),
     }
@@ -29,17 +33,20 @@ pub fn h_stack<VT: ViewTuple + 'static>(children: VT) -> Stack {
 
 /// A stack which defaults to `FlexDirection::Column`.
 pub fn v_stack<VT: ViewTuple + 'static>(children: VT) -> Stack {
-    let id = Id::next();
     Stack {
-        id,
+        data: ViewData::new(Id::next()),
         children: children.into_views(),
         direction: Some(FlexDirection::Column),
     }
 }
 
 impl View for Stack {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn view_style(&self) -> Option<crate::style::Style> {
@@ -85,7 +92,7 @@ impl View for Stack {
     fn update(&mut self, cx: &mut UpdateCx, state: Box<dyn std::any::Any>) {
         if let Ok(state) = state.downcast() {
             self.children = *state;
-            cx.request_all(self.id);
+            cx.request_all(self.id());
         }
     }
 }
diff --git a/src/views/static_list.rs b/src/views/static_list.rs
index 91766496..850a2b52 100644
--- a/src/views/static_list.rs
+++ b/src/views/static_list.rs
@@ -1,8 +1,12 @@
-use crate::{id::Id, style::Style, view::View};
+use crate::{
+    id::Id,
+    style::Style,
+    view::{View, ViewData},
+};
 use taffy::style::FlexDirection;
 
 pub struct StaticList {
-    id: Id,
+    data: ViewData,
     children: Vec<Box<dyn View>>,
 }
 
@@ -11,7 +15,7 @@ where
     V: View + 'static,
 {
     StaticList {
-        id: Id::next(),
+        data: ViewData::new(Id::next()),
         children: iterator
             .into_iter()
             .map(|v| -> Box<dyn View> { Box::new(v) })
@@ -20,8 +24,12 @@ where
 }
 
 impl View for StaticList {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
diff --git a/src/views/svg.rs b/src/views/svg.rs
index 7ede3f96..40390fd4 100644
--- a/src/views/svg.rs
+++ b/src/views/svg.rs
@@ -7,10 +7,13 @@ use floem_renderer::{
 use kurbo::Size;
 use sha2::{Digest, Sha256};
 
-use crate::{id::Id, view::View};
+use crate::{
+    id::Id,
+    view::{View, ViewData},
+};
 
 pub struct Svg {
-    id: Id,
+    data: ViewData,
     svg_tree: Option<Tree>,
     svg_hash: Option<Vec<u8>>,
 }
@@ -22,15 +25,19 @@ pub fn svg(svg_str: impl Fn() -> String + 'static) -> Svg {
         id.update_state(new_svg_str, false);
     });
     Svg {
-        id,
+        data: ViewData::new(id),
         svg_tree: None,
         svg_hash: None,
     }
 }
 
 impl View for Svg {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
@@ -54,9 +61,9 @@ impl View for Svg {
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         if let Some(tree) = self.svg_tree.as_ref() {
             let hash = self.svg_hash.as_ref().unwrap();
-            let layout = cx.get_layout(self.id).unwrap();
+            let layout = cx.get_layout(self.id()).unwrap();
             let rect = Size::new(layout.size.width as f64, layout.size.height as f64).to_rect();
-            let color = cx.app_state.get_builtin_style(self.id).color();
+            let color = cx.app_state.get_builtin_style(self.id()).color();
             cx.draw_svg(floem_renderer::Svg { tree, hash }, rect, color);
         }
     }
diff --git a/src/views/tab.rs b/src/views/tab.rs
index 0a1b9fd9..b21f4d88 100644
--- a/src/views/tab.rs
+++ b/src/views/tab.rs
@@ -8,7 +8,7 @@ use crate::{
     context::{StyleCx, UpdateCx},
     id::Id,
     style::DisplayProp,
-    view::View,
+    view::{View, ViewData},
 };
 
 use super::{apply_diff, diff, Diff, DiffOpAdd, FxIndexSet, HashRun};
@@ -23,7 +23,7 @@ where
     V: View,
     T: 'static,
 {
-    id: Id,
+    data: ViewData,
     active: usize,
     children: Vec<Option<(V, Scope)>>,
     view_fn: Box<dyn Fn(T) -> (V, Scope)>,
@@ -83,7 +83,7 @@ where
     let view_fn = Box::new(as_child_of_current_scope(view_fn));
 
     Tab {
-        id,
+        data: ViewData::new(id),
         active: 0,
         children: Vec::new(),
         view_fn,
@@ -92,8 +92,12 @@ where
 }
 
 impl<V: View + 'static, T> View for Tab<V, T> {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -137,7 +141,7 @@ impl<V: View + 'static, T> View for Tab<V, T> {
             match *state {
                 TabState::Diff(diff) => {
                     apply_diff(
-                        self.id,
+                        self.id(),
                         cx.app_state,
                         *diff,
                         &mut self.children,
diff --git a/src/views/text_input.rs b/src/views/text_input.rs
index 6e4e309f..b7b88135 100644
--- a/src/views/text_input.rs
+++ b/src/views/text_input.rs
@@ -4,6 +4,7 @@ use crate::reactive::{create_effect, RwSignal};
 use crate::style::{CursorStyle, TextColor};
 use crate::style::{FontProps, PaddingLeft};
 use crate::unit::PxPct;
+use crate::view::ViewData;
 use crate::{prop_extracter, EventPropagation};
 use clipboard::{ClipboardContext, ClipboardProvider};
 use taffy::prelude::{Layout, Node};
@@ -48,7 +49,7 @@ enum InputKind {
 
 /// Text Input View
 pub struct TextInput {
-    id: Id,
+    data: ViewData,
     buffer: RwSignal<String>,
     // Where are we in the main buffer
     cursor_glyph_idx: usize,
@@ -103,7 +104,7 @@ pub fn text_input(buffer: RwSignal<String>) -> TextInput {
     }
 
     TextInput {
-        id,
+        data: ViewData::new(id),
         cursor_glyph_idx: 0,
         buffer,
         text_buf: None,
@@ -714,8 +715,12 @@ fn replace_range(buff: &mut String, del_range: Range<usize>, replacement: Option
 }
 
 impl View for TextInput {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
@@ -744,7 +749,7 @@ impl View for TextInput {
                 } else {
                     // Already focused - move cursor to click pos
                     let layout = cx.get_layout(self.id()).unwrap();
-                    let style = cx.app_state.get_builtin_style(self.id);
+                    let style = cx.app_state.get_builtin_style(self.id());
 
                     let padding_left = match style.padding_left() {
                         PxPct::Px(padding) => padding as f32,
@@ -780,7 +785,7 @@ impl View for TextInput {
         };
 
         if is_handled {
-            cx.app_state.request_layout(self.id);
+            cx.app_state.request_layout(self.id());
             self.last_cursor_action_on = Instant::now();
         }
 
@@ -790,7 +795,7 @@ impl View for TextInput {
     fn style(&mut self, cx: &mut crate::context::StyleCx<'_>) {
         if self.font.read(cx) || self.text_buf.is_none() {
             self.update_text_layout();
-            cx.app_state_mut().request_layout(self.id);
+            cx.app_state_mut().request_layout(self.id());
         }
         if self.style.read(cx) {
             cx.app_state_mut().request_paint(self.id());
@@ -798,8 +803,8 @@ impl View for TextInput {
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
-            self.is_focused = cx.app_state().is_focused(&self.id);
+        cx.layout_node(self.id(), true, |cx| {
+            self.is_focused = cx.app_state().is_focused(&self.id());
 
             if self.text_node.is_none() {
                 self.text_node = Some(
@@ -827,7 +832,8 @@ impl View for TextInput {
     }
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
-        if !cx.app_state.is_focused(&self.id) && self.buffer.with_untracked(|buff| buff.is_empty())
+        if !cx.app_state.is_focused(&self.id())
+            && self.buffer.with_untracked(|buff| buff.is_empty())
         {
             return;
         }
@@ -839,7 +845,7 @@ impl View for TextInput {
         let node_width = node_layout.size.width as f64;
         let cursor_color = cx
             .app_state
-            .get_computed_style(self.id)
+            .get_computed_style(self.id())
             .builtin()
             .cursor_color();
 
@@ -876,7 +882,7 @@ impl View for TextInput {
             cx.draw_text(self.text_buf.as_ref().unwrap(), text_start_point);
         }
 
-        let is_cursor_visible = cx.app_state.is_focused(&self.id)
+        let is_cursor_visible = cx.app_state.is_focused(&self.id())
             && (self.last_cursor_action_on.elapsed().as_millis()
                 / CURSOR_BLINK_INTERVAL_MS as u128)
                 % 2
@@ -887,14 +893,14 @@ impl View for TextInput {
             cx.fill(&cursor_rect, cursor_color.unwrap_or(Color::BLACK), 0.0);
         }
 
-        let style = cx.app_state.get_computed_style(self.id);
+        let style = cx.app_state.get_computed_style(self.id());
 
         let padding_left = match style.get(PaddingLeft) {
             PxPct::Px(padding) => padding as f32,
             PxPct::Pct(pct) => pct as f32 * node_layout.size.width,
         };
 
-        if cx.app_state.is_focused(&self.id) {
+        if cx.app_state.is_focused(&self.id()) {
             let selection_rect = self.get_selection_rect(&node_layout, padding_left as f64);
             cx.fill(
                 &selection_rect,
diff --git a/src/views/virtual_list.rs b/src/views/virtual_list.rs
index 81e433cf..bc92250b 100644
--- a/src/views/virtual_list.rs
+++ b/src/views/virtual_list.rs
@@ -8,7 +8,7 @@ use taffy::{prelude::Node, style::Dimension};
 use crate::{
     context::LayoutCx,
     id::Id,
-    view::{self, View},
+    view::{self, View, ViewData},
 };
 
 use super::{apply_diff, diff, Diff, DiffOpAdd, FxIndexSet, HashRun};
@@ -44,7 +44,7 @@ pub struct VirtualList<V: View, T>
 where
     T: 'static,
 {
-    id: Id,
+    data: ViewData,
     direction: VirtualListDirection,
     children: Vec<Option<(V, Scope)>>,
     viewport: Rect,
@@ -186,7 +186,7 @@ where
     let view_fn = Box::new(as_child_of_current_scope(view_fn));
 
     VirtualList {
-        id,
+        data: ViewData::new(id),
         direction,
         children: Vec::new(),
         viewport: Rect::ZERO,
@@ -201,8 +201,12 @@ where
 }
 
 impl<V: View + 'static, T> View for VirtualList<V, T> {
-    fn id(&self) -> Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn for_each_child<'a>(&'a self, for_each: &mut dyn FnMut(&'a dyn View) -> bool) {
@@ -252,7 +256,7 @@ impl<V: View + 'static, T> View for VirtualList<V, T> {
             self.before_size = state.before_size;
             self.after_size = state.after_size;
             apply_diff(
-                self.id,
+                self.id(),
                 cx.app_state,
                 state.diff,
                 &mut self.children,
@@ -263,7 +267,7 @@ impl<V: View + 'static, T> View for VirtualList<V, T> {
     }
 
     fn layout(&mut self, cx: &mut crate::context::LayoutCx) -> taffy::prelude::Node {
-        cx.layout_node(self.id, true, |cx| {
+        cx.layout_node(self.id(), true, |cx| {
             let mut nodes = self
                 .children
                 .iter_mut()
@@ -330,7 +334,7 @@ impl<V: View + 'static, T> View for VirtualList<V, T> {
     fn compute_layout(&mut self, cx: &mut LayoutCx) -> Option<Rect> {
         let viewport = cx.viewport.unwrap_or_default();
         if self.viewport != viewport {
-            let layout = cx.app_state().get_layout(self.id).unwrap();
+            let layout = cx.app_state().get_layout(self.id()).unwrap();
             let _size = Size::new(layout.size.width as f64, layout.size.height as f64);
 
             self.viewport = viewport;
diff --git a/src/widgets/slider.rs b/src/widgets/slider.rs
index 35b3d0c2..182055ef 100644
--- a/src/widgets/slider.rs
+++ b/src/widgets/slider.rs
@@ -7,13 +7,12 @@ use peniko::Color;
 use winit::keyboard::{Key, NamedKey};
 
 use crate::{
-    id,
     prop,
     prop_extracter,
     style::{Background, BorderRadius, Foreground},
     style_class,
     unit::PxPct,
-    view::View,
+    view::{View, ViewData},
     views::Decorators,
     EventPropagation,
     // EventPropagation,
@@ -45,7 +44,7 @@ prop_extracter! {
 
 /// A slider
 pub struct Slider {
-    id: id::Id,
+    data: ViewData,
     onchangepx: Option<Box<dyn Fn(f32)>>,
     onchangepct: Option<Box<dyn Fn(f32)>>,
     held: bool,
@@ -84,9 +83,8 @@ pub fn slider(state: impl Fn() -> f32 + 'static) -> Slider {
         let state = state();
         id.update_state(state, false);
     });
-
     Slider {
-        id,
+        data: ViewData::new(id),
         onchangepx: None,
         onchangepct: None,
         held: false,
@@ -105,8 +103,12 @@ pub fn slider(state: impl Fn() -> f32 + 'static) -> Slider {
 }
 
 impl View for Slider {
-    fn id(&self) -> crate::id::Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn update(&mut self, cx: &mut crate::context::UpdateCx, state: Box<dyn std::any::Any>) {
@@ -124,7 +126,7 @@ impl View for Slider {
     ) -> EventPropagation {
         match event {
             crate::event::Event::PointerDown(event) => {
-                cx.update_active(self.id);
+                cx.update_active(self.id());
                 cx.app_state_mut().request_layout(self.id());
                 self.held = true;
                 self.position = event.pos.x as f32;
@@ -176,7 +178,7 @@ impl View for Slider {
         paint |= self.accent_bar_style.read_style(cx, &accent_bar_style);
         paint |= self.style.read(cx);
         if paint {
-            cx.app_state_mut().request_paint(self.id);
+            cx.app_state_mut().request_paint(self.data.id());
         }
     }
 
diff --git a/src/widgets/toggle_button.rs b/src/widgets/toggle_button.rs
index a51d1800..a21ba0e5 100644
--- a/src/widgets/toggle_button.rs
+++ b/src/widgets/toggle_button.rs
@@ -6,11 +6,11 @@ use kurbo::{Point, Size};
 use winit::keyboard::{Key, NamedKey};
 
 use crate::{
-    id, prop, prop_extracter,
+    prop, prop_extracter,
     style::{self, Foreground},
     style_class,
     unit::PxPct,
-    view::View,
+    view::{View, ViewData},
     views::Decorators,
     EventPropagation,
 };
@@ -49,7 +49,7 @@ enum ToggleState {
 
 /// A toggle button
 pub struct ToggleButton {
-    id: id::Id,
+    data: ViewData,
     state: bool,
     ontoggle: Option<Box<dyn Fn(bool)>>,
     position: f32,
@@ -85,7 +85,7 @@ pub fn toggle_button(state: impl Fn() -> bool + 'static) -> ToggleButton {
     });
 
     ToggleButton {
-        id,
+        data: ViewData::new(id),
         state: false,
         ontoggle: None,
         position: 0.0,
@@ -99,8 +99,12 @@ pub fn toggle_button(state: impl Fn() -> bool + 'static) -> ToggleButton {
 }
 
 impl View for ToggleButton {
-    fn id(&self) -> crate::id::Id {
-        self.id
+    fn view_data(&self) -> &ViewData {
+        &self.data
+    }
+
+    fn view_data_mut(&mut self) -> &mut ViewData {
+        &mut self.data
     }
 
     fn update(&mut self, cx: &mut crate::context::UpdateCx, state: Box<dyn std::any::Any>) {
@@ -121,7 +125,7 @@ impl View for ToggleButton {
     ) -> EventPropagation {
         match event {
             crate::event::Event::PointerDown(_event) => {
-                cx.update_active(self.id);
+                cx.update_active(self.id());
                 self.held = ToggleState::Held;
             }
             crate::event::Event::PointerUp(_event) => {
@@ -222,12 +226,12 @@ impl View for ToggleButton {
 
     fn style(&mut self, cx: &mut crate::context::StyleCx<'_>) {
         if self.style.read(cx) {
-            cx.app_state_mut().request_paint(self.id);
+            cx.app_state_mut().request_paint(self.id());
         }
     }
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
-        let layout = cx.get_layout(self.id).unwrap();
+        let layout = cx.get_layout(self.id()).unwrap();
         let size = Size::new(layout.size.width as f64, layout.size.height as f64);
         let circle_point = Point::new(self.position as f64, size.to_rect().center().y);
         let circle = crate::kurbo::Circle::new(circle_point, self.radius as f64);

From b12f9c1ff1a9c15991fc0ba607b9d6e2b4ce9b50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20K=C3=A5re=20Alsaker?= <john.kare.alsaker@gmail.com>
Date: Tue, 14 Nov 2023 18:08:29 +0100
Subject: [PATCH 2/2] Move `style` to `ViewData`

---
 src/context.rs         | 21 ++++++++++++++-------
 src/view.rs            | 27 +++++++++++++++++++++++++--
 src/views/decorator.rs | 13 +++++++------
 src/window_handle.rs   | 22 +++++++++++++---------
 4 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/context.rs b/src/context.rs
index 4a454bfd..3c11c8b2 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -31,7 +31,7 @@ use crate::{
         StyleClassRef, StyleProp, StyleSelector, StyleSelectors, ZIndex,
     },
     unit::PxPct,
-    view::{paint_bg, paint_border, paint_outline, View},
+    view::{paint_bg, paint_border, paint_outline, View, ViewData},
 };
 
 /// Control whether an event will continue propagating or whether it should stop.
@@ -107,7 +107,6 @@ pub struct ViewState {
     pub(crate) view_style_props: ViewStyleProps,
     pub(crate) animation: Option<Animation>,
     pub(crate) base_style: Option<Style>,
-    pub(crate) style: Style,
     pub(crate) class: Option<StyleClassRef>,
     pub(crate) dragging_style: Option<Style>,
     pub(crate) combined_style: Style,
@@ -134,7 +133,6 @@ impl ViewState {
             has_style_selectors: StyleSelectors::default(),
             animation: None,
             base_style: None,
-            style: Style::new(),
             class: None,
             combined_style: Style::new(),
             taffy_style: taffy::style::Style::DEFAULT,
@@ -151,8 +149,10 @@ impl ViewState {
     }
 
     /// Returns `true` if a new frame is requested.
+    #[allow(clippy::too_many_arguments)]
     pub(crate) fn compute_style(
         &mut self,
+        view_data: &mut ViewData,
         view_style: Option<Style>,
         interact_state: InteractionState,
         screen_size_bp: ScreenSizeBp,
@@ -173,7 +173,7 @@ impl ViewState {
         }
         computed_style = computed_style
             .apply_classes_from_context(classes, context)
-            .apply(self.style.clone());
+            .apply(view_data.style.clone());
 
         'anim: {
             if let Some(animation) = self.animation.as_mut() {
@@ -424,6 +424,7 @@ impl AppState {
     pub(crate) fn compute_style(
         &mut self,
         id: Id,
+        view_data: &mut ViewData,
         view_style: Option<Style>,
         view_class: Option<StyleClassRef>,
         classes: &[StyleClassRef],
@@ -433,6 +434,7 @@ impl AppState {
         let screen_size_bp = self.screen_size_bp;
         let view_state = self.view_state(id);
         view_state.compute_style(
+            view_data,
             view_style,
             interact_state,
             screen_size_bp,
@@ -1206,9 +1208,14 @@ impl<'a> StyleCx<'a> {
             });
         }
 
-        let mut new_frame =
-            self.app_state
-                .compute_style(id, view_style, view_class, classes, &self.current);
+        let mut new_frame = self.app_state.compute_style(
+            id,
+            view.view_data_mut(),
+            view_style,
+            view_class,
+            classes,
+            &self.current,
+        );
 
         let style = self.app_state_mut().get_computed_style(id).clone();
         self.direct = style;
diff --git a/src/view.rs b/src/view.rs
index 77e4c51c..6a6804fe 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -91,7 +91,7 @@ use taffy::prelude::Node;
 use crate::{
     context::{AppState, EventCx, LayoutCx, PaintCx, StyleCx, UpdateCx, ViewStyleProps},
     event::Event,
-    id::Id,
+    id::{Id, ID_PATHS},
     style::{BoxShadowProp, Style, StyleClassRef},
     EventPropagation,
 };
@@ -242,17 +242,40 @@ pub trait View {
 
 pub struct ViewData {
     pub(crate) id: Id,
+    pub(crate) style: Style,
 }
 
 impl ViewData {
     pub fn new(id: Id) -> Self {
-        Self { id }
+        Self {
+            id,
+            style: Style::new(),
+        }
     }
     pub fn id(&self) -> Id {
         self.id
     }
 }
 
+pub(crate) fn update_data(id: Id, root: &mut dyn View, f: impl FnOnce(&mut ViewData)) {
+    pub(crate) fn update_inner(id_path: &[Id], view: &mut dyn View, f: impl FnOnce(&mut ViewData)) {
+        let id = id_path[0];
+        let id_path = &id_path[1..];
+        if id == view.id() {
+            if id_path.is_empty() {
+                f(view.view_data_mut());
+            } else if let Some(child) = view.child_mut(id_path[0]) {
+                update_inner(id_path, child, f);
+            }
+        }
+    }
+
+    let id_path = ID_PATHS.with(|paths| paths.borrow().get(&id).cloned());
+    if let Some(id_path) = id_path {
+        update_inner(id_path.dispatch(), root, f)
+    }
+}
+
 /// Computes the layout of the view's children, if any.
 pub fn default_compute_layout<V: View + ?Sized>(view: &mut V, cx: &mut LayoutCx) -> Option<Rect> {
     let mut layout_rect: Option<Rect> = None;
diff --git a/src/views/decorator.rs b/src/views/decorator.rs
index 9a21e11a..aad41a01 100644
--- a/src/views/decorator.rs
+++ b/src/views/decorator.rs
@@ -1,4 +1,4 @@
-use floem_reactive::create_effect;
+use floem_reactive::{create_effect, create_updater};
 use kurbo::{Point, Rect};
 
 use crate::{
@@ -34,12 +34,13 @@ pub trait Decorators: View + Sized {
     /// ```
     /// If you are returning from a function that produces a view, you may want
     /// to use `base_style` for the returned [`View`] instead.  
-    fn style(self, style: impl Fn(Style) -> Style + 'static) -> Self {
+    fn style(mut self, style: impl Fn(Style) -> Style + 'static) -> Self {
         let id = self.id();
-        create_effect(move |_| {
-            let style = style(Style::new());
-            id.update_style(style);
-        });
+        let style = create_updater(
+            move || style(Style::new()),
+            move |style| id.update_style(style),
+        );
+        self.view_data_mut().style = style;
         self
     }
 
diff --git a/src/window_handle.rs b/src/window_handle.rs
index e186cce5..e6f151af 100644
--- a/src/window_handle.rs
+++ b/src/window_handle.rs
@@ -39,7 +39,7 @@ use crate::{
         CENTRAL_UPDATE_MESSAGES, CURRENT_RUNNING_VIEW_HANDLE, DEFERRED_UPDATE_MESSAGES,
         UPDATE_MESSAGES,
     },
-    view::{view_children_set_parent_id, view_tab_navigation, View},
+    view::{update_data, view_children_set_parent_id, view_tab_navigation, View},
     widgets::{default_theme, Theme},
 };
 
@@ -774,24 +774,28 @@ impl WindowHandle {
                     }
                     UpdateMessage::BaseStyle { id, style } => {
                         let state = cx.app_state.view_state(id);
-                        let old_any_inherited = state.style.any_inherited();
+                        let old_any_inherited = state
+                            .base_style
+                            .as_ref()
+                            .map(|style| style.any_inherited())
+                            .unwrap_or(false);
+                        let new_any_inherited = style.any_inherited();
                         state.base_style = Some(style);
-                        if state.style.any_inherited() || old_any_inherited {
+                        if new_any_inherited || old_any_inherited {
                             cx.app_state.request_style_recursive(id);
                         } else {
                             cx.request_style(id);
                         }
                     }
-                    UpdateMessage::Style { id, style } => {
-                        let state = cx.app_state.view_state(id);
-                        let old_any_inherited = state.style.any_inherited();
-                        state.style = style;
-                        if state.style.any_inherited() || old_any_inherited {
+                    UpdateMessage::Style { id, style } => update_data(id, &mut self.view, |data| {
+                        let old_any_inherited = data.style.any_inherited();
+                        data.style = style;
+                        if data.style.any_inherited() || old_any_inherited {
                             cx.app_state.request_style_recursive(id);
                         } else {
                             cx.request_style(id);
                         }
-                    }
+                    }),
                     UpdateMessage::Class { id, class } => {
                         let state = cx.app_state.view_state(id);
                         state.class = Some(class);