add canvas widget (#785)

Author: jrmoulton

examples/widget-gallery/src/canvas.rs

@@ -0,0 +1,28 @@
+use floem::{kurbo::Rect, prelude::*};
+use palette::css;
+
+use crate::form::{form, form_item};
+
+pub fn canvas_view() -> impl IntoView {
+    let rounded = RwSignal::new(true);
+
+    form((form_item(
+        "Simple Canvas:",
+        h_stack((
+            canvas(move |cx, size| {
+                cx.fill(
+                    &Rect::ZERO
+                        .with_size(size)
+                        .to_rounded_rect(if rounded.get() { 8. } else { 0. }),
+                    css::PURPLE,
+                    0.,
+                );
+            })
+            .style(|s| s.size(100, 300)),
+            button("toggle")
+                .action(move || rounded.update(|s| *s = !*s))
+                .style(|s| s.height(30)),
+        ))
+        .style(|s| s.gap(10).items_center()),
+    ),))
+}

examples/widget-gallery/src/main.rs

@@ -1,5 +1,6 @@
 pub mod animation;
 pub mod buttons;
+pub mod canvas;
 pub mod checkbox;
 pub mod clipboard;
 pub mod context_menu;
@@ -32,6 +33,7 @@ fn app_view() -> impl IntoView {
         "Checkbox",
         "Radio",
         "Input",
+        "Canvas",
         "List",
         "Menu",
         "RichText",
@@ -52,6 +54,7 @@ fn app_view() -> impl IntoView {
             "Checkbox" => checkbox::checkbox_view().into_any(),
             "Radio" => radio_buttons::radio_buttons_view().into_any(),
             "Input" => inputs::text_input_view().into_any(),
+            "Canvas" => canvas::canvas_view().into_any(),
             "List" => lists::virt_list_view().into_any(),
             "Menu" => context_menu::menu_view().into_any(),
             "RichText" => rich_text::rich_text_view().into_any(),

reactive/src/effect.rs

@@ -280,3 +280,79 @@ where
         mem::take(&mut *self.observers.borrow_mut())
     }
 }
+
+pub struct SignalTracker {
+    id: Id,
+    on_change: Rc<dyn Fn()>,
+}
+
+impl Drop for SignalTracker {
+    fn drop(&mut self) {
+        self.id.dispose();
+    }
+}
+
+pub fn create_tracker(on_change: impl Fn() + 'static) -> SignalTracker {
+    let id = Id::next();
+
+    SignalTracker {
+        id,
+        on_change: Rc::new(on_change),
+    }
+}
+
+impl SignalTracker {
+    pub fn track<T: 'static>(&self, f: impl FnOnce() -> T) -> T {
+        // Clear any previous tracking by disposing the old effect
+        self.id.dispose();
+
+        let prev_effect = RUNTIME.with(|runtime| runtime.current_effect.borrow_mut().take());
+
+        let tracking_effect = Rc::new(TrackingEffect {
+            id: self.id,
+            observers: RefCell::new(HashSet::default()),
+            on_change: self.on_change.clone(),
+        });
+
+        RUNTIME.with(|runtime| {
+            *runtime.current_effect.borrow_mut() = Some(tracking_effect.clone());
+        });
+
+        let effect_scope = Scope(self.id, PhantomData);
+        let result = with_scope(effect_scope, || {
+            effect_scope.track();
+            f()
+        });
+
+        RUNTIME.with(|runtime| {
+            *runtime.current_effect.borrow_mut() = prev_effect;
+        });
+
+        result
+    }
+}
+
+struct TrackingEffect {
+    id: Id,
+    observers: RefCell<HashSet<Id>>,
+    on_change: Rc<dyn Fn()>,
+}
+
+impl EffectTrait for TrackingEffect {
+    fn id(&self) -> Id {
+        self.id
+    }
+
+    fn run(&self) -> bool {
+        (self.on_change)();
+        true
+    }
+
+    fn add_observer(&self, id: Id) {
+        self.observers.borrow_mut().insert(id);
+    }
+
+    fn clear_observers(&self) -> HashSet<Id> {
+        mem::take(&mut *self.observers.borrow_mut())
+    }
+}

reactive/src/lib.rs

@@ -21,7 +21,10 @@ mod write;
 pub use base::{create_base_signal, BaseSignal};
 pub use context::{provide_context, use_context};
 pub use derived::{create_derived_rw_signal, DerivedRwSignal};
-pub use effect::{batch, create_effect, create_stateful_updater, create_updater, untrack};
+pub use effect::{
+    batch, create_effect, create_stateful_updater, create_tracker, create_updater, untrack,
+    SignalTracker,
+};
 pub use memo::{create_memo, Memo};
 pub use read::{ReadSignalValue, SignalGet, SignalRead, SignalTrack, SignalWith};
 pub use scope::{as_child_of_current_scope, with_scope, Scope};

src/lib.rs

@@ -238,6 +238,7 @@ pub mod prelude {
     pub use crate::unit::{DurationUnitExt, UnitExt};
     pub use crate::view_tuple::ViewTuple;
     pub use crate::views::*;
+    pub use crate::Renderer;
     pub use crate::{IntoView, View};
     pub use floem_reactive::{
         create_rw_signal, create_signal, RwSignal, SignalGet, SignalTrack, SignalUpdate, SignalWith,

src/views/canvas.rs

@@ -0,0 +1,83 @@
+#![deny(missing_docs)]
+
+use floem_reactive::{create_tracker, SignalTracker};
+use peniko::kurbo::Size;
+
+use crate::{context::PaintCx, id::ViewId, view::View};
+
+/// A canvas view
+#[allow(clippy::type_complexity)]
+pub struct Canvas {
+    id: ViewId,
+    paint_fn: Box<dyn Fn(&mut PaintCx, Size)>,
+    size: Size,
+    tracker: Option<SignalTracker>,
+}
+
+/// Creates a new Canvas view that can be used for custom painting
+///
+/// A [`Canvas`] provides a low-level interface for custom drawing operations. The supplied
+/// paint function will be called whenever the view needs to be rendered, and any signals accessed
+/// within the paint function will automatically trigger repaints when they change.
+///
+///
+/// # Example
+/// ```rust
+/// use floem::prelude::*;
+/// use palette::css;
+/// use peniko::kurbo::Rect;
+/// canvas(move |cx, size| {
+///     cx.fill(
+///         &Rect::ZERO
+///             .with_size(size)
+///             .to_rounded_rect(8.),
+///         css::PURPLE,
+///         0.,
+///     );
+/// })
+/// .style(|s| s.size(100, 300));
+/// ```
+pub fn canvas(paint: impl Fn(&mut PaintCx, Size) + 'static) -> Canvas {
+    let id = ViewId::new();
+
+    Canvas {
+        id,
+        paint_fn: Box::new(paint),
+        size: Default::default(),
+        tracker: None,
+    }
+}
+
+impl View for Canvas {
+    fn id(&self) -> ViewId {
+        self.id
+    }
+
+    fn debug_name(&self) -> std::borrow::Cow<'static, str> {
+        "Canvas".into()
+    }
+
+    fn compute_layout(
+        &mut self,
+        _cx: &mut crate::context::ComputeLayoutCx,
+    ) -> Option<peniko::kurbo::Rect> {
+        self.size = self.id.get_size().unwrap_or_default();
+        None
+    }
+
+    fn paint(&mut self, cx: &mut PaintCx) {
+        let id = self.id;
+        let paint = &self.paint_fn;
+
+        if self.tracker.is_none() {
+            self.tracker = Some(create_tracker(move || {
+                id.request_paint();
+            }));
+        }
+
+        let tracker = self.tracker.as_ref().unwrap();
+        tracker.track(|| {
+            paint(cx, self.size);
+        });
+    }
+}

src/views/mod.rs

@@ -124,6 +124,9 @@ pub use text_input::*;
 mod empty;
 pub use empty::*;
 
+mod canvas;
+pub use canvas::*;
+
 mod drag_window_area;
 pub use drag_window_area::*;