oxframe-components 0.20.4

Ready-made blocks for explainer videos: titles, lists, diagrams, code
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

//! A code block, a caption, and a list of focus steps.

use std::cell::Cell;
use std::rc::Rc;

use oxframe_2d::{BaseProps, Code, Muted, Node, NodeBuilder, NodeId, Normal, Txt};
use oxframe_core::{Seconds, Tween, all};

use crate::host;

/// Code with a caption. `enter` shows the code. Each `next` focuses one step
/// and sets the caption.
pub struct CodeExplainer {
    root: Node,
    code: Code,
    caption: Txt,
    steps: Rc<Vec<(usize, usize, String)>>,
    cursor: Rc<Cell<usize>>,
}

impl CodeExplainer {
    /// The source is shown as Rust. Add steps with [`step`](CodeExplainerBuilder::step).
    #[allow(clippy::new_ret_no_self)]
    pub fn new(code: impl Into<String>) -> CodeExplainerBuilder {
        CodeExplainerBuilder {
            base: BaseProps::default(),
            code: code.into(),
            steps: Vec::new(),
        }
    }

    /// Fades the block in.
    pub fn enter(&self) -> Tween<f64> {
        self.root.fade_in()
    }

    /// Focuses the next step and shows its caption.
    pub fn next(&self) -> impl std::future::Future<Output = ()> + 'static {
        let n = self.steps.len();
        let i = self.cursor.get();
        let (first, last, text) = if n == 0 {
            (0, 0, String::new())
        } else {
            let step = &self.steps[i.min(n - 1)];
            if i < n {
                self.cursor.set(i + 1);
            }
            (step.0, step.1, step.2.clone())
        };
        self.caption.text().set(text);
        let focus = self.code.focus_lines(first, last, Normal.seconds());
        let fade = if i == 0 {
            self.caption.fade_in()
        } else {
            self.caption.opacity().to(1.0, Normal)
        };
        async move {
            all((focus, fade)).await;
        }
    }

    /// Fades the block out.
    pub fn exit(&self) -> Tween<f64> {
        self.root.fade_out()
    }

    /// How many steps were declared.
    pub fn len(&self) -> usize {
        self.steps.len()
    }
    /// No steps were declared.
    pub fn is_empty(&self) -> bool {
        self.steps.is_empty()
    }
}

/// Builder for [`CodeExplainer`].
#[must_use = "a builder does nothing until it is passed to `add`"]
pub struct CodeExplainerBuilder {
    base: BaseProps,
    code: String,
    steps: Vec<(usize, usize, String)>,
}

impl CodeExplainerBuilder {
    /// A focus range (1-based, inclusive) and the caption `next` shows with it.
    pub fn step(mut self, first: usize, last: usize, caption: impl Into<String>) -> Self {
        self.steps.push((first, last, caption.into()));
        self
    }
}

impl NodeBuilder for CodeExplainerBuilder {
    type Handle = CodeExplainer;
    fn base(&mut self) -> &mut BaseProps {
        &mut self.base
    }
    fn build(self, _: &oxframe_2d::SceneGraph, parent: NodeId) -> CodeExplainer {
        let root = host::root(parent, self.base);
        let code = root.add(
            Code::new()
                .code(self.code)
                .language("rust")
                .font_size(26.0)
                .y(-24.0)
                .name("code"),
        );
        let (_, h) = code.size();
        let caption = root.add(
            Txt::new()
                .text(" ")
                .caption()
                .fill(Muted)
                .y(h / 2.0 + 36.0)
                .opacity(0.0)
                .name("caption"),
        );
        CodeExplainer {
            root: root.node(),
            code,
            caption,
            steps: Rc::new(self.steps),
            cursor: Rc::new(Cell::new(0)),
        }
    }
}