lerni 0.0.6

Lerni content framework
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

use leptos::prelude::*;

use crate::{Align, Frame, VAlign, use_frame};

struct SvgProperties {
    width: i32,
    height: i32,
    align: Align,
    valign: VAlign,
    scale: f32,
    flip_x: bool,
    flip_y: bool,
}

/// SVG widget.
#[component]
pub fn Svg(
    width: i32,
    height: i32,
    #[prop(default = Align::Center)] align: Align,
    #[prop(default = VAlign::Middle)] valign: VAlign,
    #[prop(default = 1.0)] scale: f32,
    #[prop(optional)] flip_x: bool,
    #[prop(optional)] flip_y: bool,
    #[prop(default = true.into(), into)] visible: Signal<bool>,
    #[prop(default = "all .3s".to_string(), into)] transition: String,
    children: Children,
) -> impl IntoView {
    let f = use_frame();
    let props = SvgProperties {
        width,
        height,
        align,
        valign,
        scale,
        flip_x,
        flip_y,
    };
    let transform = calc_transform(&f, &props);

    view! {
        <g
            transform=transform
            style:opacity=move || if visible.get() { "1" } else { "0" }
            style:visibility=move || { if visible.get() { "visible" } else { "hidden" } }
            style:transition=transition
        >
            {children()}
        </g>
    }
}

/// SVG-from-file widget.
#[component]
pub fn SvgFile(
    width: i32,
    height: i32,
    #[prop(default = Align::Center)] align: Align,
    #[prop(default = VAlign::Middle)] valign: VAlign,
    #[prop(default = 1.0)] scale: f32,
    #[prop(optional)] flip_x: bool,
    #[prop(optional)] flip_y: bool,
    #[prop(default = true.into(), into)] visible: Signal<bool>,
    #[prop(default = "all .3s".to_string(), into)] transition: String,
    src: &'static str,
) -> impl IntoView {
    let f = use_frame();
    let props = SvgProperties {
        width,
        height,
        align,
        valign,
        scale,
        flip_x,
        flip_y,
    };
    let transform = calc_transform(&f, &props);

    view! {
        <g
            transform=transform
            inner_html=src
            style:opacity=move || if visible.get() { "1" } else { "0" }
            style:visibility=move || { if visible.get() { "visible" } else { "hidden" } }
            style:transition=transition
        ></g>
    }
}

fn calc_transform(f: &Frame, props: &SvgProperties) -> String {
    let scale = if matches!(props.align, Align::Fill) || matches!(props.valign, VAlign::Fill) {
        let sx = f.width as f32 / props.width as f32;
        let sy = f.height as f32 / props.height as f32;
        sx.min(sy)
    } else {
        props.scale
    };

    let width = (scale * props.width as f32).round() as i32;
    let height = (scale * props.height as f32).round() as i32;

    let mut x = match props.align {
        Align::Left => f.x,
        Align::Center | Align::Fill => f.x + (f.width - width) / 2,
        Align::Right => f.x + f.width - width,
    };
    let mut y = match props.valign {
        VAlign::Top => f.y,
        VAlign::Middle | VAlign::Fill => f.y + (f.height - height) / 2,
        VAlign::Bottom => f.y + f.height - height,
    };

    let mut sx = scale;
    let mut sy = scale;

    if props.flip_x {
        sx = -sx;
        x += width;
    }
    if props.flip_y {
        sy = -sy;
        y += height;
    }
    format!("translate({x} {y}) scale({sx} {sy})")
}