appy 0.1.6

Declarative UI framework with native rendering
Documentation 
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

use crate::hooks::{use_animation_frame, use_state, HookRef};
use crate::rc_with_clone;
use std::ops::Deref;

#[derive(Clone)]
pub struct SpringConf {
    stiffness: f32,
    damping: f32,
    epsilon: f32,
}

impl SpringConf {
    pub const DEFAULT: SpringConf = SpringConf::new(170.0, 26.0);
    pub const STIFF: SpringConf = SpringConf::new(210.0, 20.0);

    pub const fn new(stiffness: f32, damping: f32) -> Self {
        Self {
            stiffness,
            damping,
            epsilon: 0.001,
        }
    }
}

#[derive(Clone)]
struct SpringData {
    current: f32,
    velocity: f32,
    target: f32,
}

impl SpringData {
    fn tick(&self, conf: &SpringConf, delta: f32) -> Self {
        fn dampened_hooke_force(
            displacement: f32,
            velocity: f32,
            stiffness: f32,
            damping: f32,
        ) -> f32 {
            let hooke_force = -1.0 * (stiffness * displacement);
            hooke_force - (damping * velocity)
        }

        let mut spring: SpringData = self.clone();
        let displacement = spring.current - spring.target;
        let force =
            dampened_hooke_force(displacement, spring.velocity, conf.stiffness, conf.damping);

        spring.velocity += force * delta;
        spring.current += spring.velocity * delta;

        spring
    }
}

#[derive(Clone)]
pub struct SpringRef {
    hook_ref: HookRef<SpringData>,
}

impl Deref for SpringRef {
    type Target = f32;

    fn deref(&self) -> &Self::Target {
        &(&*self.hook_ref).current
    }
}

impl SpringRef {
    pub fn target(&self, v: f32) {
        let mut d = (*self.hook_ref).clone();
        d.target = v;
        self.hook_ref.set(d);
    }

    pub fn set(&self, v: f32) {
        let mut d = (*self.hook_ref).clone();
        d.current = v;
        d.target = v;
        d.velocity = 0.0;
        self.hook_ref.set(d);
    }
}

/// Animate value with spring physics.
///
/// You can think of `use_spring` as being similar to `use_state<f32>`. I.e.,
/// a numeric state that is being tracked for a function component. The
/// reference returned by this function also has a set method, similar
/// to `set_state`.
///
/// However, the reference also has a `target` method,
/// which will not set the state immediately, but rather set an internal
/// target, and then the value will smoothly change frame by frame towards
/// that target. For example:
/// ```
/// use appy::{*, types::*, components::*, hooks::*};
///
/// #[main_window]
/// pub fn app()->Elements {
///	   let x=use_spring(||0.0,SpringConf::DEFAULT);
///
///	    apx! {
///         // This will have the effect of animating smoothly.
///	        <blk right=10 bottom=10 height=90 width=150>
///		        <interaction on_click=rc_with_clone!([x],move||x.target(100.0))/>
///	        </blk>
///
///         // This will "hard" set the value, similar to set_state.
///	        <blk right=10 bottom=110 height=90 width=150>
///		        <interaction on_click=rc_with_clone!([x],move||x.set(100.0))/>
///	        </blk>
///
///	        <blk right=50>
///		        <blk left=pct(*x) width=50 height=50 top=50>
///			        <bg color=0xff0000/>
///		        </blk>
///	        </blk>
///     }
/// }
/// ```
pub fn use_spring<F>(ctor: F, conf: SpringConf) -> SpringRef
where
    F: Fn() -> f32,
{
    let h = use_state(|| {
        let initial_value = ctor();
        SpringData {
            current: initial_value,
            target: initial_value,
            velocity: 0.0,
        }
    });

    if ((*h).current - (*h).target).abs() > conf.epsilon || (*h).velocity.abs() > conf.epsilon {
        use_animation_frame(rc_with_clone!([h], move |delta| {
            //println!("delta: {:?}",delta);
            h.set((*h).tick(&conf, delta));
        }));
    }

    SpringRef { hook_ref: h }
}