feat: add Stack widget (#61)

noviga · Nov 4, 2023 · b892f48 · b892f48
1 parent 801e88f
commit b892f48
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 3 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "lerni"
-version = "0.0.2"
+version = "0.0.3"
 edition = "2021"
 license = "MIT"
 description = "Lerni content framework"
@@ -50,6 +50,10 @@ crate-type = ["cdylib"]
 name = "rows_cols"
 crate-type = ["cdylib"]
 
+[[example]]
+name = "stack"
+crate-type = ["cdylib"]
+
 [[example]]
 name = "svg"
 crate-type = ["cdylib"]

diff --git a/dist/index.html b/dist/index.html
@@ -42,6 +42,10 @@ <h1>Lerni Examples</h1>
             <a href="/svg/">SVG</a>
             (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/svg.rs" target="_blank">source</a>)
         </li>
+        <li>
+            <a href="/stack/">Stack</a>
+            (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/stack.rs" target="_blank">source</a>)
+        </li>
     </ul>
 </div>
 </body>

diff --git a/dist/stack/index.html b/dist/stack/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" class="has-background-light">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Lerni "Stack" Example</title>
+    <link rel="stylesheet" href="/css/bulma.min.css" />
+    <link rel="stylesheet" href="/css/fas.min.css" />
+    <link rel="preload" href="/stack/stack_bg.wasm" as="fetch" type="application/wasm" crossorigin="" />
+    <link rel="modulepreload" href="/stack/stack.js" />
+</head>
+<body>
+    <script type="module">import init from '/stack/stack.js';init('/stack/stack_bg.wasm');</script>
+</body>
+</html>
diff --git a/examples/stack.rs b/examples/stack.rs
@@ -0,0 +1,19 @@
+use leptos::*;
+use lerni::*;
+
+#[component]
+pub fn StackExample() -> impl IntoView {
+    view! {
+        <Slide>
+            <Stack count=2>
+                <SvgFile width=128 height=64 scale=2.0 src=include_str!("logo.svg") />
+                <Label font_size=96 valign=VAlign::Top>"Hello,"</Label>
+            </Stack>
+        </Slide>
+    }
+}
+
+#[wasm_bindgen(start)]
+pub fn main() {
+    lerni::start(StackExample);
+}
diff --git a/examples/svg.rs b/examples/svg.rs
@@ -4,7 +4,7 @@ use lerni::*;
 #[component]
 pub fn SvgExample() -> impl IntoView {
     view! {
-        <Slide background_image="/img/lerni-bg.svg".into()>
+        <Slide background_image="/img/lerni-bg.svg">
             <Grid cols=3 rows=3 border_width=4 padding=20>
                 <SvgFile width=128 height=64 src=include_str!("logo.svg") />
                 <Svg width=128 height=64 scale=3.0>{include!("logo.svg-rs")}</Svg>

diff --git a/scripts/examples.sh b/scripts/examples.sh
@@ -15,6 +15,7 @@ grid \
 hello_world \
 pointer \
 rows_cols \
+stack \
 svg \
 text \
 "

diff --git a/src/widgets.rs b/src/widgets.rs
@@ -7,6 +7,7 @@ mod label;
 mod row;
 mod slide;
 mod slideshow;
+mod stack;
 mod svg;
 mod text;
 
@@ -17,6 +18,7 @@ pub use label::Label;
 pub use row::Row;
 pub use slide::Slide;
 pub use slideshow::SlideShow;
+pub use stack::Stack;
 pub use svg::{Svg, SvgFile};
 pub use text::Text;
 

diff --git a/src/widgets/slide.rs b/src/widgets/slide.rs
@@ -17,7 +17,7 @@ pub fn Slide(
     #[prop(default = WIDTH)] width: i32,
     #[prop(default = HEIGHT)] height: i32,
     #[prop(optional)] background_color: Color,
-    #[prop(optional)] background_image: String,
+    #[prop(optional, into)] background_image: String,
     #[prop(optional)] pointer: MaybeSignal<bool>,
     #[prop(optional)] blur: MaybeSignal<bool>,
     #[prop(default = 15)] blur_radius: i32,

diff --git a/src/widgets/stack.rs b/src/widgets/stack.rs
@@ -0,0 +1,24 @@
+use leptos::*;
+
+use crate::{use_frame, use_frames, Frame};
+
+/// Stack of widgets.
+#[component]
+pub fn Stack(count: usize, children: Children) -> impl IntoView {
+    let f = use_frame();
+    {
+        let frames = use_frames();
+        let mut frames = frames.borrow_mut();
+        for _ in 0..count {
+            let frame = Frame {
+                x: f.x,
+                y: f.y,
+                width: f.width,
+                height: f.height,
+            };
+            frames.push(frame);
+        }
+    }
+
+    children().nodes.into_iter().take(count).collect_view()
+}