freya_elements/attributes/
reference_attributes.rs

1use crate::def_attribute;
2
3def_attribute!(
4    /// Attach a canvas reference created from the `use_canvas` or
5    /// `use_canvas_with_deps` hooks to enable drawing to an element.
6    ///
7    /// This attribute allows you to bind a canvas context to a Freya element,
8    /// giving you the ability to perform custom rendering operations.
9    ///
10    /// ### Example
11    ///
12    /// ```rust, no_run
13    /// # use freya::prelude::*;
14    /// fn app() -> Element {
15    ///     let (reference, size) = use_node_signal();
16    ///     let platform = use_platform();
17    ///
18    ///     let canvas = use_canvas(move || {
19    ///         platform.invalidate_drawing_area(size.peek().area);
20    ///         platform.request_animation_frame();
21    ///         move |ctx| {
22    ///             // Custom drawing code here,
23    ///             // you will need to add skia as a dependency and look into how to use a skia canvas
24    ///         }
25    ///     });
26    ///
27    ///     rsx!(
28    ///         rect {
29    ///             background: "white",
30    ///             width: "300",
31    ///             height: "200",
32    ///             canvas_reference: canvas.attribute(),
33    ///             reference,
34    ///         }
35    ///     )
36    /// }
37    /// ```
38    canvas_reference,
39
40    /// Attach a reference to an element to track its layout and metadata.
41    ///
42    /// This attribute is used in conjunction with hooks like `use_node`, `use_node_signal`,
43    /// or other node reference hooks to observe and respond to changes in an element's layout.
44    ///
45    /// ### Example
46    ///
47    /// ```rust, no_run
48    /// # use freya::prelude::*;
49    /// fn app() -> Element {
50    ///     // Basic usage with use_node
51    ///     let (reference, layout) = use_node();
52    ///
53    ///     // Alternative usage with use_node_signal for reactive access
54    ///     // let (reference, layout_signal) = use_node_signal();
55    ///
56    ///     rsx!(
57    ///         rect {
58    ///             width: "100%",
59    ///             height: "100%",
60    ///             reference,
61    ///             label {
62    ///                 "Width: {layout.area.width()}, Height: {layout.area.height()}"
63    ///             }
64    ///         }
65    ///     )
66    /// }
67    /// ```
68    reference,
69
70    /// This attribute is typically used with text components or custom editors that need to
71    /// control cursor placement and selection programmatically. It's obtained from hooks like
72    /// `use_editable` that manage text editing functionality.
73    cursor_reference,
74);
freya_elements/attributes/reference_attributes.rs

freya_elements/attributes/
reference_attributes.rs
