From 9801e30e131f5ff4e2b9667177cd716b9861930e Mon Sep 17 00:00:00 2001
From: "S. Yakupov" <syakupov@users.noreply.github.com>
Date: Wed, 2 Aug 2023 11:43:04 +0300
Subject: [PATCH] feat: tune NG `Label` and `Button` (#48)

---
 examples/ng_blur.rs        |  4 ++-
 examples/ng_buttons.rs     | 20 +++++++-------
 examples/ng_grid.rs        | 56 ++++++++++++++++++--------------------
 examples/ng_hello_world.rs |  4 +--
 examples/ng_pointer.rs     |  4 ++-
 examples/ng_rows_cols.rs   | 16 +++++------
 src/ng/button.rs           | 42 ++++++++++++++--------------
 src/ng/column.rs           | 33 +++++++++++++++++-----
 src/ng/grid.rs             | 30 ++++++++++++++------
 src/ng/label.rs            | 12 +++-----
 src/ng/row.rs              | 33 +++++++++++++++++-----
 src/ng/slide.rs            | 18 ++++++++++--
 src/ng/slideshow.rs        |  1 +
 src/ng/svg.rs              |  6 +---
 14 files changed, 168 insertions(+), 111 deletions(-)

diff --git a/examples/ng_blur.rs b/examples/ng_blur.rs
index 5eb57bf..1f0fe06 100644
--- a/examples/ng_blur.rs
+++ b/examples/ng_blur.rs
@@ -8,7 +8,9 @@ pub fn Blur(cx: Scope) -> impl IntoView {
 
     view! { cx,
         <Slide blur=blur.into() background_color=Color::MistyRose>
-            <Button text=|_| "Blur ON/OFF" on_click=on_click/>
+            <Button on_click=on_click>
+                "Blur " {move || if blur.get() { "ON" } else { "OFF" }}
+            </Button>
         </Slide>
     }
 }
diff --git a/examples/ng_buttons.rs b/examples/ng_buttons.rs
index 9debfba..1130f03 100644
--- a/examples/ng_buttons.rs
+++ b/examples/ng_buttons.rs
@@ -12,18 +12,18 @@ pub fn Buttons(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Grid cols=3 rows=3>
-                <Button text=|_| "Alice" on_click=on_click/>
-                <Button text=|_| "Bob" width=300 height=300 radius=150 on_click=on_click/>
-                <Button text=|_| "Charlie" font_size=72 text_color=Color::DarkCyan on_click=on_click/>
-                <Button text=move |_| view! { cx,
+                <Button on_click=on_click>"Alice"</Button>
+                <Button width=300 height=300 radius=150 on_click=on_click>"Bob"</Button>
+                <Button font_size=72 text_color=Color::DarkCyan on_click=on_click>"Charlie"</Button>
+                <Button on_click=on_click>
                     <tspan font-size="96" fill="red" alignment-baseline="central">"Da"</tspan>
                     <tspan font-size="80" alignment-baseline="central">"ve"</tspan>
-                } on_click=on_click/>
-                <Label text=move |_| counter.get()/>
-                <Button text=|_| "Eve" text_bold=true align=Align::Right on_click=on_click/>
-                <Button text=|_| "Ferdie" align=Align::Right valign=VAlign::Bottom on_click=on_click/>
-                <Button text=|_| "George" color=Color::Honeydew border_color=Color::ForestGreen on_click=on_click/>
-                <Button text=|_| "Harry" align=Align::Fill valign=VAlign::Fill on_click=on_click/>
+                </Button>
+                <Label>{counter}</Label>
+                <Button text_bold=true align=Align::Right on_click=on_click>"Eve"</Button>
+                <Button align=Align::Right valign=VAlign::Bottom on_click=on_click>"Ferdie"</Button>
+                <Button color=Color::Honeydew border_color=Color::ForestGreen on_click=on_click>"George"</Button>
+                <Button align=Align::Fill valign=VAlign::Fill on_click=on_click>"Harry"</Button>
             </Grid>
         </Slide>
     }
diff --git a/examples/ng_grid.rs b/examples/ng_grid.rs
index 311fe31..234db4e 100644
--- a/examples/ng_grid.rs
+++ b/examples/ng_grid.rs
@@ -6,45 +6,41 @@ pub fn GridExample(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Grid cols=3 rows=3 border_width=4 padding=20>
-                <Label text=move |_| {
-                    view! { cx,
-                        <>
-                            <tspan>"00"</tspan>
-                            <tspan font-size=96>"1"</tspan>
-                        </>
-                    }
-                }/>
-                <Label text=|_| "2"/>
-                <Label text=move |_| {
-                    view! { cx,
-                        <tspan>"00"</tspan>
-                        <tspan fill="red">"3"</tspan>
-                    }
-                }/>
-                <Label text=|_| "4" font_size=96 color=Color::Blue/>
+                <Label>
+                    <tspan>"00"</tspan>
+                    <tspan font-size=96>"1"</tspan>
+                </Label>
+                <Label>2</Label>
+                <Label>
+                    <tspan>"00"</tspan>
+                    <tspan fill="red">"3"</tspan>
+                </Label>
+                <Label font_size=96 color=Color::Blue>"4"</Label>
                 <Button
-                    text=|_| "5"
                     align=Align::Fill
                     valign=VAlign::Fill
                     on_click=move |_| log!("5: Clicked")
-                />
-                <Label text=|_| "6" align=Align::Right/>
-                <Label text=|_| "7" align=Align::Left/>
-                <Label text=|_| "8"/>
+                >
+                    "5"
+                </Button>
+                <Label align=Align::Right>"6"</Label>
+                <Label align=Align::Left>"7"</Label>
+                <Label>8</Label>
                 <Grid cols=4 rows=2 border_width=4 spacing=20>
-                    <Label text=|_| "9" valign=VAlign::Top/>
-                    <Label text=|_| "10" valign=VAlign::Bottom/>
-                    <Label text=|_| "11"/>
+                    <Label valign=VAlign::Top>"9"</Label>
+                    <Label valign=VAlign::Bottom>"10"</Label>
+                    <Label>11</Label>
                     <Button
-                        text=|_| "12"
                         align=Align::Fill
                         valign=VAlign::Fill
                         on_click=move |_| log!("12: Clicked")
-                    />
-                    <Label text=|_| "13"/>
-                    <Label text=|_| "14" align=Align::Left valign=VAlign::Top/>
-                    <Label text=|_| "15"/>
-                    <Label text=|_| "16" align=Align::Right valign=VAlign::Bottom/>
+                    >
+                        "12"
+                    </Button>
+                    <Label>"13"</Label>
+                    <Label align=Align::Left valign=VAlign::Top>"14"</Label>
+                    <Label>"15"</Label>
+                    <Label align=Align::Right valign=VAlign::Bottom>"16"</Label>
                 </Grid>
             </Grid>
         </Slide>
diff --git a/examples/ng_hello_world.rs b/examples/ng_hello_world.rs
index c308821..9818e1e 100644
--- a/examples/ng_hello_world.rs
+++ b/examples/ng_hello_world.rs
@@ -6,10 +6,10 @@ pub fn HelloWorld(cx: Scope) -> impl IntoView {
     view! { cx,
         <SlideShow>
             <Slide background_color=Color::MistyRose>
-                <Label text=|_| "Hello →"/>
+                <Label>"Hello →"</Label>
             </Slide>
             <Slide background_color=Color::PaleGreen>
-                <Label text=|_| "← World!"/>
+                <Label>"← World!"</Label>
             </Slide>
         </SlideShow>
     }
diff --git a/examples/ng_pointer.rs b/examples/ng_pointer.rs
index b4abe7b..a913656 100644
--- a/examples/ng_pointer.rs
+++ b/examples/ng_pointer.rs
@@ -8,7 +8,9 @@ pub fn Pointer(cx: Scope) -> impl IntoView {
 
     view! { cx,
         <Slide pointer=pointer.into()>
-            <Button text=|_| "Pointer ON/OFF" on_click=on_click/>
+            <Button on_click=on_click>
+                "Pointer " {move || if pointer.get() { "ON" } else { "OFF" }}
+            </Button>
         </Slide>
     }
 }
diff --git a/examples/ng_rows_cols.rs b/examples/ng_rows_cols.rs
index 252f880..13889bc 100644
--- a/examples/ng_rows_cols.rs
+++ b/examples/ng_rows_cols.rs
@@ -6,16 +6,16 @@ pub fn RowsCols(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Row border_width=4 stretch=vec![1, 1, 4, 1, 1] padding=20>
-                <Label text=|_| "1"/>
-                <Button text=|_| "2" align=Align::Fill valign=VAlign::Fill on_click=|_| ()/>
-                <Label text=|_| "3" bold=true/>
+                <Label>"1"</Label>
+                <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>"2"</Button>
+                <Label bold=true>"3"</Label>
                 <Column border_width=4 stretch=vec![1, 2, 3, 4] spacing=20>
-                    <Label text=|_| "4"/>
-                    <Label text=|_| "5"/>
-                    <Button text=|_| "6" align=Align::Fill valign=VAlign::Fill on_click=|_| ()/>
-                    <Label text=|_| "7"/>
+                    <Label>"4"</Label>
+                    <Label>"5"</Label>
+                    <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>"6"</Button>
+                    <Label>"7"</Label>
                 </Column>
-                <Label text=|_| "8"/>
+                <Label>"8"</Label>
             </Row>
         </Slide>
     }
diff --git a/src/ng/button.rs b/src/ng/button.rs
index c4b6115..e76bf85 100644
--- a/src/ng/button.rs
+++ b/src/ng/button.rs
@@ -7,9 +7,8 @@ const WIDTH: i32 = 400;
 const HEIGHT: i32 = 150;
 
 #[component]
-pub fn Button<F, IV, CB>(
+pub fn Button<CB>(
     cx: Scope,
-    text: F,
     on_click: CB,
     #[prop(optional)] text_bold: bool,
     #[prop(default = WIDTH)] width: i32,
@@ -23,10 +22,9 @@ pub fn Button<F, IV, CB>(
     #[prop(default = Color::RoyalBlue)] border_color: Color,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
+    children: Children,
 ) -> impl IntoView
 where
-    F: Fn(Scope) -> IV + 'static,
-    IV: IntoView,
     CB: FnMut(MouseEvent) + 'static,
 {
     let f = use_frame(cx);
@@ -67,22 +65,24 @@ where
     let on_mouseup = move |_| set_border.set(border_width);
 
     view! { cx,
-            <rect
-                on:click=on_click
-                on:mousedown=on_mousedown
-                on:mouseup=on_mouseup
-                on:mouseleave=on_mouseup
-                x=x
-                y=y
-                width=width
-                height=height
-                rx=radius
-                ry=radius
-                fill=color
-                stroke=border_color
-                stroke-width=move || border.get()
-                style="cursor: pointer;"
-            />
-            <Label text=text bold=text_bold color=text_color font=font font_size=font_size/>
+        <rect
+            on:click=on_click
+            on:mousedown=on_mousedown
+            on:mouseup=on_mouseup
+            on:mouseleave=on_mouseup
+            x=x
+            y=y
+            width=width
+            height=height
+            rx=radius
+            ry=radius
+            fill=color
+            stroke=border_color
+            stroke-width=move || border.get()
+            style="cursor: pointer;"
+        ></rect>
+        <Label bold=text_bold color=text_color font=font font_size=font_size>
+            {children(cx)}
+        </Label>
     }
 }
diff --git a/src/ng/column.rs b/src/ng/column.rs
index b6785c6..8a04d78 100644
--- a/src/ng/column.rs
+++ b/src/ng/column.rs
@@ -67,11 +67,30 @@ pub fn Column(
         }
     }
 
-    children(cx).nodes.into_iter().take(rows).enumerate().map(|(i, child)| {
-        let Frame {x, y, width, height } = cells[i];
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(rows)
+        .enumerate()
+        .map(|(i, child)| {
+            let Frame {
+                x,
+                y,
+                width,
+                height,
+            } = cells[i];
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }
diff --git a/src/ng/grid.rs b/src/ng/grid.rs
index c94d4bc..1d22035 100644
--- a/src/ng/grid.rs
+++ b/src/ng/grid.rs
@@ -41,12 +41,26 @@ pub fn Grid(
         }
     }
 
-    children(cx).nodes.into_iter().take(max).enumerate().map(|(i, child)| {
-        let x = f.x + border_width / 2 + (width + spacing)  * (i as i32 % cols);
-        let y = f.y + border_width / 2 + (height + spacing) * (i as i32 / cols);
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(max)
+        .enumerate()
+        .map(|(i, child)| {
+            let x = f.x + border_width / 2 + (width + spacing) * (i as i32 % cols);
+            let y = f.y + border_width / 2 + (height + spacing) * (i as i32 / cols);
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }
diff --git a/src/ng/label.rs b/src/ng/label.rs
index a7e0b3c..21e7c45 100644
--- a/src/ng/label.rs
+++ b/src/ng/label.rs
@@ -3,20 +3,16 @@ use leptos::*;
 use crate::ng::{use_frame, Align, Color, VAlign};
 
 #[component]
-pub fn Label<F, IV>(
+pub fn Label(
     cx: Scope,
-    text: F,
     #[prop(optional)] bold: bool,
     #[prop(optional)] font: String,
     #[prop(default = 48)] font_size: i32,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
     #[prop(default = Color::Black)] color: Color,
-) -> impl IntoView
-where
-    F: Fn(Scope) -> IV + 'static,
-    IV: IntoView,
-{
+    children: Children,
+) -> impl IntoView {
     let f = use_frame(cx);
 
     let (x, anchor) = match align {
@@ -43,7 +39,7 @@ where
             pointer-events="none"
             style="user-select: none; -webkit-user-select: none;"
         >
-            {move || text(cx)}
+            {children(cx)}
         </text>
     }
 }
diff --git a/src/ng/row.rs b/src/ng/row.rs
index 975e60a..5fcec08 100644
--- a/src/ng/row.rs
+++ b/src/ng/row.rs
@@ -67,11 +67,30 @@ pub fn Row(
         }
     }
 
-    children(cx).nodes.into_iter().take(cols).enumerate().map(|(i, child)| {
-        let Frame {x, y, width, height } = cells[i];
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(cols)
+        .enumerate()
+        .map(|(i, child)| {
+            let Frame {
+                x,
+                y,
+                width,
+                height,
+            } = cells[i];
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }
diff --git a/src/ng/slide.rs b/src/ng/slide.rs
index a2d54b2..7548817 100644
--- a/src/ng/slide.rs
+++ b/src/ng/slide.rs
@@ -81,9 +81,14 @@ pub fn Slide(
         <div
             class="container pl-4 mt-4 pr-4"
             style:max-width=move || {
-                if metadata.is_none() { format!("{}px", slide_width.get()) } else { "100%".to_string() }
+                if metadata.is_none() {
+                    format!("{}px", slide_width.get())
+                } else {
+                    "100%".to_string()
+                }
             }
         >
+
             <div class="box">
                 <figure class="image is-16by9" style=blur_style>
                     <svg
@@ -95,8 +100,15 @@ pub fn Slide(
                         class="has-ratio"
                         style=bg_style
                     >
-                        <rect width="100%" height="100%" rx="10" ry="10" fill=background_color/>
+                        <rect
+                            width="100%"
+                            height="100%"
+                            rx="10"
+                            ry="10"
+                            fill=background_color
+                        ></rect>
                         {children(cx)}
+
                         <Pointer position=pointer_position visible=pointer_visible/>
                     </svg>
                 </figure>
@@ -119,6 +131,6 @@ where
             fill="orange"
             opacity=move || if visible() { 0.75 } else { 0.0 }
             pointer-events="none"
-        />
+        ></circle>
     }
 }
diff --git a/src/ng/slideshow.rs b/src/ng/slideshow.rs
index 300910f..15c9ce8 100644
--- a/src/ng/slideshow.rs
+++ b/src/ng/slideshow.rs
@@ -62,6 +62,7 @@ pub fn SlideShow(
                 if width > 0 { format!("{}px", width) } else { "100%".to_string() }
             }
         >
+
             <Pagination page=page count=count/>
             {children}
         </div>
diff --git a/src/ng/svg.rs b/src/ng/svg.rs
index 4958f8c..8259ff1 100644
--- a/src/ng/svg.rs
+++ b/src/ng/svg.rs
@@ -51,9 +51,5 @@ pub fn Svg(
         y += height;
     }
 
-    view! { cx,
-        <g transform=format!("translate({x} {y}) scale({sx} {sy})")>
-        {children(cx)}
-        </g>
-    }
+    view! { cx, <g transform=format!("translate({x} {y}) scale({sx} {sy})")>{children(cx)}</g> }
 }