1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

use crate::def_attribute;

def_attribute!(
    /// Attach a canvas reference created from the `use_canvas` or
    /// `use_canvas_with_deps` hooks to enable drawing to an element.
    ///
    /// This attribute allows you to bind a canvas context to a Freya element,
    /// giving you the ability to perform custom rendering operations.
    ///
    /// ### Example
    ///
    /// ```rust, no_run
    /// # use freya::prelude::*;
    /// fn app() -> Element {
    ///     let (reference, size) = use_node_signal();
    ///     let platform = use_platform();
    ///
    ///     let canvas = use_canvas(move || {
    ///         platform.invalidate_drawing_area(size.peek().area);
    ///         platform.request_animation_frame();
    ///         move |ctx| {
    ///             // Custom drawing code here,
    ///             // you will need to add skia as a dependency and look into how to use a skia canvas
    ///         }
    ///     });
    ///
    ///     rsx!(
    ///         rect {
    ///             background: "white",
    ///             width: "300",
    ///             height: "200",
    ///             canvas_reference: canvas.attribute(),
    ///             reference,
    ///         }
    ///     )
    /// }
    /// ```
    canvas_reference,

    /// Attach a reference to an element to track its layout and metadata.
    ///
    /// This attribute is used in conjunction with hooks like `use_node`, `use_node_signal`,
    /// or other node reference hooks to observe and respond to changes in an element's layout.
    ///
    /// ### Example
    ///
    /// ```rust, no_run
    /// # use freya::prelude::*;
    /// fn app() -> Element {
    ///     // Basic usage with use_node
    ///     let (reference, layout) = use_node();
    ///
    ///     // Alternative usage with use_node_signal for reactive access
    ///     // let (reference, layout_signal) = use_node_signal();
    ///
    ///     rsx!(
    ///         rect {
    ///             width: "100%",
    ///             height: "100%",
    ///             reference,
    ///             label {
    ///                 "Width: {layout.area.width()}, Height: {layout.area.height()}"
    ///             }
    ///         }
    ///     )
    /// }
    /// ```
    reference,

    /// This attribute is typically used with text components or custom editors that need to
    /// control cursor placement and selection programmatically. It's obtained from hooks like
    /// `use_editable` that manage text editing functionality.
    cursor_reference,
);