feat: improve NG Text widget (#58)

Makefile

@@ -1,4 +1,4 @@
-.PHONY: all clean doc doc-open examples examples-release fmt fmt-check linter prepare pre-commit serve test
+.PHONY: all clean doc doc-open examples examples-release fmt fmt-check fmt-leptos linter prepare pre-commit serve test
 
 all:
 	@echo ──────────── Build release ────────────────────
@@ -21,13 +21,17 @@ examples:
 	@./scripts/examples.sh
 
 examples-release:
-	@echo ──────────── Build release examples ───────────────────
+	@echo ──────────── Build release examples ───────────
 	@./scripts/examples.sh release
 
 fmt:
 	@echo ──────────── Format ───────────────────────────
 	@cargo fmt --all
 
+fmt-leptos:
+	@echo ──────────── Format Leptos ────────────────────
+	@find src -name "*.rs" -exec leptosfmt {} \;
+
 fmt-check:
 	@echo ──────────── Check format ─────────────────────
 	@cargo fmt --all -- --check

dist/index.html

@@ -67,6 +67,10 @@ <h2>⚠️ Work in progress!</h2>
             <a href="/ng_rows_cols/">Rows & Columns</a>
             (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_rows_cols.rs" target="_blank">source</a>)
         </li>
+        <li>
+            <a href="/ng_text/">Text</a>
+            (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_text.rs" target="_blank">source</a>)
+        </li>
         <li>
             <a href="/ng_blur/">Blur</a>
             (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_blur.rs" target="_blank">source</a>)

examples/ng_svg.rs

@@ -6,12 +6,12 @@ pub fn SvgExample() -> impl IntoView {
     view! {
         <Slide background_image="/img/lerni-bg.svg".into()>
             <Grid cols=3 rows=3 border_width=4 padding=20>
-                <Svg width=128 height=64>{include!("logo-ng.svg-rs")}</Svg>
+                <SvgFile width=128 height=64 src=include_str!("logo.svg") />
                 <Svg width=128 height=64 scale=3.0>{include!("logo-ng.svg-rs")}</Svg>
                 <Svg width=128 height=64 scale=2.0 align=Align::Left valign=VAlign::Top>
                     {include!("logo-ng.svg-rs")}
                 </Svg>
-                <Svg width=128 height=64 align=Align::Fill>{include!("logo-ng.svg-rs")}</Svg>
+                <SvgFile width=128 height=64 align=Align::Fill src=include_str!("logo.svg")/>
                 <Svg width=128 height=64 flip_x=true>{include!("logo-ng.svg-rs")}</Svg>
                 <Svg width=128 height=64 scale=2.0>{include!("logo-ng.svg-rs")}</Svg>
                 <Svg width=128 height=64 valign=VAlign::Bottom>{ include!("logo-ng.svg-rs")}</Svg>

examples/ng_text.rs

@@ -1,64 +1,34 @@
-use lerni::widgets::*;
-use wasm_bindgen::prelude::wasm_bindgen;
-use yew::prelude::*;
+use leptos::*;
+use lerni::ng::*;
 
-#[function_component]
-pub fn TextExample() -> Html {
-    let words_read1 = use_state(|| 0);
-    let read1 = use_state(|| "".to_string());
-    let onread1 = {
-        let words_read1 = words_read1.clone();
-        let read1 = read1.clone();
-        Callback::from(move |(words_read, letters, total)| {
-            words_read1.set(words_read);
-            read1.set(format!("{letters} / {total}"));
-        })
-    };
+#[component]
+pub fn TextExample() -> impl IntoView {
+    let (words_read1, _) = create_signal(0);
+    let (words_read2, _) = create_signal(0);
+    let (words_read3, _) = create_signal(0);
 
-    let words_read2 = use_state(|| 0);
-    let read2 = use_state(|| "".to_string());
-    let onread2 = {
-        let words_read2 = words_read2.clone();
-        let read2 = read2.clone();
-        Callback::from(move |(words_read, letters, total)| {
-            words_read2.set(words_read);
-            read2.set(format!("{letters} / {total}"));
-        })
-    };
-
-    let words_read3 = use_state(|| 0);
-    let read3 = use_state(|| "".to_string());
-    let onread3 = {
-        let words_read3 = words_read3.clone();
-        let read3 = read3.clone();
-        Callback::from(move |(words_read, letters, total)| {
-            words_read3.set(words_read);
-            read3.set(format!("{letters} / {total}"));
-        })
-    };
-
-    html! {
+    view! {
         <Slide>
-            <Row padding=30 border_width=4>
-                <Column stretch={ vec![5, 1] }>
-                    <Text lattice=true words_read={ *words_read1 } onread={ onread1 }>
+            <Row cols=2 padding=30 border_width=4>
+                <Column stretch={vec![5, 1]}>
+                    <Text lattice=true>
                         { "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }
                         { "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }
                     </Text>
-                    <Label text={ (*read1).clone() } />
+                    <Label>{words_read1}</Label>
                 </Column>
 
-                <Column stretch={ vec![5, 1, 5, 1] }>
-                    <Text font_size=48 bold=true font="serif" words_read={ *words_read2 } onread={ onread2 }>
+                <Column stretch={vec![5, 1, 5, 1]}>
+                    <Text font_size=48 bold=true font="serif">
                         { "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }
                         { "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }
                     </Text>
-                    <Label text={ (*read2).clone() } />
-                    <Text font_size=48 erase_top=0.3 words_read={ *words_read3 } onread={ onread3 }>
+                    <Label>{words_read2}</Label>
+                    <Text font_size=48 erase_top=0.3>
                         { "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }
                         { "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }
                     </Text>
-                    <Label text={ (*read3).clone() } />
+                    <Label>{words_read3}</Label>
                 </Column>
             </Row>
         </Slide>
@@ -67,5 +37,5 @@ pub fn TextExample() -> Html {
 
 #[wasm_bindgen(start)]
 pub fn main() {
-    lerni::start::<TextExample>();
+    lerni::ng::start(TextExample);
 }

src/ng.rs

@@ -33,7 +33,10 @@ mod slideshow;
 pub use slideshow::SlideShow;
 
 mod svg;
-pub use svg::Svg;
+pub use svg::{Svg, SvgFile};
+
+mod text;
+pub use text::Text;
 
 use leptos::*;
 

src/ng/slideshow.rs

@@ -111,11 +111,7 @@ fn Pagination(page: RwSignal<usize>, count: usize) -> impl IntoView {
 }
 
 #[component]
-fn PageButton(
-    index: usize,
-    prev: Option<usize>,
-    current: RwSignal<usize>,
-) -> impl IntoView {
+fn PageButton(index: usize, prev: Option<usize>, current: RwSignal<usize>) -> impl IntoView {
     view! {
         <>
             <li hidden=move || !matches!(prev, Some(p) if index != (p + 1))>

src/ng/svg.rs

@@ -1,6 +1,16 @@
 use leptos::*;
 
-use crate::ng::{use_frame, Align, VAlign};
+use crate::ng::{use_frame, Align, Frame, VAlign};
+
+struct SvgProperties {
+    width: i32,
+    height: i32,
+    align: Align,
+    valign: VAlign,
+    scale: f32,
+    flip_x: bool,
+    flip_y: bool,
+}
 
 /// SVG widget.
 #[component]
@@ -15,24 +25,65 @@ pub fn Svg(
     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>{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,
+    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);
 
-    let scale = if matches!(align, Align::Fill) || matches!(valign, VAlign::Fill) {
-        let sx = f.width as f32 / width as f32;
-        let sy = f.height as f32 / height as f32;
+    view! { <g transform=transform inner_html=src></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 {
-        scale
+        props.scale
     };
 
-    let width = (scale * width as f32).round() as i32;
-    let height = (scale * height as f32).round() as i32;
+    let width = (scale * props.width as f32).round() as i32;
+    let height = (scale * props.height as f32).round() as i32;
 
-    let mut x = match align {
+    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 valign {
+    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,
@@ -41,14 +92,13 @@ pub fn Svg(
     let mut sx = scale;
     let mut sy = scale;
 
-    if flip_x {
+    if props.flip_x {
         sx = -sx;
         x += width;
     }
-    if flip_y {
+    if props.flip_y {
         sy = -sy;
         y += height;
     }
-
-    view! { <g transform=format!("translate({x} {y}) scale({sx} {sy})")>{children()}</g> }
+    format!("translate({x} {y}) scale({sx} {sy})")
 }