Experimental composable widgets for styling

src/lib.rs

@@ -10,6 +10,7 @@ mod widget;
 pub use app::App;
 pub use app_main::AppLauncher;
 pub use view::button::button;
+pub use view::style::{background, padding};
 pub use view::View;
 pub use widget::align::VertAlignment;
 pub use widget::Widget;

src/main.rs

@@ -1,7 +1,14 @@
-use xilem::{button, App, AppLauncher, View};
+use piet_scene::Color;
+use xilem::{background, button, padding, App, AppLauncher, View};
 
-fn app_logic(_data: &mut ()) -> impl View<()> {
-    button("click me", |_| println!("clicked"))
+fn app_logic(data: &mut f64) -> impl View<f64> {
+    background(
+        Color::RED,
+        padding(
+            *data,
+            button(format!("Padding {data}px"), |data| *data += 1.),
+        ),
+    )
 }
 
 fn main() {
@@ -15,6 +22,6 @@ fn main() {
     window_handle.show();
     app.run(None);
     */
-    let app = App::new((), app_logic);
+    let app = App::new(10., app_logic);
     AppLauncher::new(app).run()
 }

src/view.rs

@@ -20,6 +20,7 @@ pub mod button;
 // pub mod list;
 // pub mod memoize;
 // pub mod scroll_view;
+pub mod style;
 pub mod text;
 // pub mod use_state;
 // pub mod vstack;

src/view/style.rs

@@ -0,0 +1,150 @@
+use piet_scene::Color;
+
+use crate::{
+    id::Id,
+    widget::{
+        compose_style::{background::BackgroundWidget, padding::PaddingWidget},
+        Pod,
+    },
+    View,
+};
+
+pub fn padding<V: View<T, A>, T, A>(width: f64, view: V) -> impl View<T, A>
+where
+    V::Element: 'static,
+{
+    PaddingView::new(width, view)
+}
+
+pub struct PaddingView<V> {
+    width: f64,
+    view: V,
+}
+
+impl<T, A, V: View<T, A>> View<T, A> for PaddingView<V>
+where
+    V::Element: 'static,
+{
+    type State = (Id, V::State);
+
+    type Element = PaddingWidget;
+
+    fn build(&self, cx: &mut crate::view::Cx) -> (crate::id::Id, Self::State, Self::Element) {
+        let (id, (child_id, state, element)) = cx.with_new_id(|cx| self.view.build(cx));
+        let element = PaddingWidget::new(Pod::new(element), self.width);
+        (id, (child_id, state), element)
+    }
+
+    fn rebuild(
+        &self,
+        cx: &mut crate::view::Cx,
+        prev: &Self,
+        id: &mut crate::id::Id,
+        (child_id, state): &mut Self::State,
+        element: &mut Self::Element,
+    ) -> bool {
+        let mut changed = prev.width != self.width;
+        if changed {
+            element.set_width(self.width);
+        }
+        cx.with_id(*id, |cx| {
+            let child_element = element.widget.downcast_mut().unwrap();
+            let child_changed = self
+                .view
+                .rebuild(cx, &prev.view, child_id, state, child_element);
+            if child_changed {
+                changed = true;
+                element.widget.request_update();
+            }
+        });
+        changed
+    }
+
+    fn event(
+        &self,
+        id_path: &[crate::id::Id],
+        (child_id, state): &mut Self::State,
+        event: Box<dyn std::any::Any>,
+        app_state: &mut T,
+    ) -> crate::event::EventResult<A> {
+        let (left, right) = id_path.split_at(1);
+        assert!(left[0] == *child_id);
+        self.view.event(right, state, event, app_state)
+    }
+}
+
+impl<V> PaddingView<V> {
+    fn new(width: f64, view: V) -> Self {
+        PaddingView { width, view }
+    }
+}
+
+pub fn background<V: View<T, A>, T, A>(color: Color, view: V) -> impl View<T, A>
+where
+    V::Element: 'static,
+{
+    BackgroundView::new(color, view)
+}
+
+pub struct BackgroundView<V> {
+    color: Color,
+    view: V,
+}
+
+impl<T, A, V: View<T, A>> View<T, A> for BackgroundView<V>
+where
+    V::Element: 'static,
+{
+    type State = (Id, V::State);
+
+    type Element = BackgroundWidget;
+
+    fn build(&self, cx: &mut crate::view::Cx) -> (crate::id::Id, Self::State, Self::Element) {
+        let (id, (child_id, state, element)) = cx.with_new_id(|cx| self.view.build(cx));
+        let element = BackgroundWidget::new(Pod::new(element), self.color);
+        (id, (child_id, state), element)
+    }
+
+    fn rebuild(
+        &self,
+        cx: &mut crate::view::Cx,
+        prev: &Self,
+        id: &mut crate::id::Id,
+        (child_id, state): &mut Self::State,
+        element: &mut Self::Element,
+    ) -> bool {
+        let mut changed = prev.color != self.color;
+        if changed {
+            element.set_color(self.color);
+        }
+        cx.with_id(*id, |cx| {
+            let child_element = element.widget.downcast_mut().unwrap();
+            let child_changed = self
+                .view
+                .rebuild(cx, &prev.view, child_id, state, child_element);
+            if child_changed {
+                changed = true;
+                element.widget.request_update();
+            }
+        });
+        changed
+    }
+
+    fn event(
+        &self,
+        id_path: &[crate::id::Id],
+        (child_id, state): &mut Self::State,
+        event: Box<dyn std::any::Any>,
+        app_state: &mut T,
+    ) -> crate::event::EventResult<A> {
+        let (left, right) = id_path.split_at(1);
+        assert!(left[0] == *child_id);
+        self.view.event(right, state, event, app_state)
+    }
+}
+
+impl<V> BackgroundView<V> {
+    fn new(color: Color, view: V) -> Self {
+        BackgroundView { color, view }
+    }
+}

src/widget.rs

@@ -21,6 +21,7 @@ mod core;
 pub mod piet_scene_helpers;
 mod raw_event;
 //pub mod scroll_view;
+pub mod compose_style;
 pub mod text;
 //pub mod vstack;
 

src/widget/compose_style.rs

@@ -0,0 +1,2 @@
+pub mod background;
+pub mod padding;

src/widget/compose_style/background.rs

@@ -0,0 +1,64 @@
+use glazier::kurbo::Affine;
+use piet_scene::{Color, Fill};
+
+use crate::{id::Id, widget::Pod, View, Widget};
+
+pub struct BackgroundWidget {
+    pub(crate) widget: Pod,
+    color: Color,
+}
+
+impl BackgroundWidget {
+    pub fn new(widget: Pod, color: Color) -> Self {
+        Self { widget, color }
+    }
+    pub(crate) fn set_color(&mut self, color: Color) {
+        self.color = color;
+    }
+}
+
+impl Widget for BackgroundWidget {
+    fn event(&mut self, cx: &mut crate::widget::EventCx, event: &crate::widget::RawEvent) {
+        self.widget.event(cx, event)
+    }
+
+    fn lifecycle(
+        &mut self,
+        cx: &mut crate::widget::contexts::LifeCycleCx,
+        event: &crate::widget::LifeCycle,
+    ) {
+        self.widget.lifecycle(cx, event)
+    }
+
+    fn update(&mut self, cx: &mut crate::widget::UpdateCx) {
+        self.widget.update(cx)
+    }
+
+    fn measure(
+        &mut self,
+        cx: &mut crate::widget::LayoutCx,
+    ) -> (glazier::kurbo::Size, glazier::kurbo::Size) {
+        self.widget.measure(cx)
+    }
+
+    fn layout(
+        &mut self,
+        cx: &mut crate::widget::LayoutCx,
+        proposed_size: glazier::kurbo::Size,
+    ) -> glazier::kurbo::Size {
+        self.widget.layout(cx, proposed_size)
+    }
+
+    fn paint(&mut self, cx: &mut crate::widget::PaintCx, builder: &mut piet_scene::SceneBuilder) {
+        self.widget.paint(cx);
+        let fragment = self.widget.fragment();
+        builder.fill(
+            Fill::NonZero,
+            Affine::IDENTITY,
+            self.color,
+            None,
+            &cx.size().to_rect(),
+        );
+        builder.append(fragment, None)
+    }
+}