feat: add NG Svg

noviga · Aug 2, 2023 · 4d85ce2 · 4d85ce2
1 parent f714faa
commit 4d85ce2
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 20 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -71,6 +71,10 @@ <h2>⚠️ Work in progress!</h2>
             <a href="/ng_blur/">Blur</a>
             (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_blur.rs" target="_blank">source</a>)
         </li>
+        <li>
+            <a href="/ng_svg/">SVG</a>
+            (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_svg.rs" target="_blank">source</a>)
+        </li>
     </ul>
 </div>
 </body>

diff --git a/examples/logo-ng.svg-rs b/examples/logo-ng.svg-rs
@@ -0,0 +1 @@
+view! { cx, <g stroke-width=".265"><path d="M9.822 58.779q-3.129 0-4.511-2.183Q4 54.486 4 51.283q0-3.493 1.31-8.296t3.42-10.115q2.183-5.312 4.73-10.334 2.547-5.094 5.094-9.242t4.657-6.623Q25.396 4.2 26.632 4.2q.801 0 1.31.946.51.873.801 2.183.291 1.237.291 2.256 0 1.965-1.018 5.167-.947 3.13-2.766 7.06-1.746 3.856-4.22 7.859-2.402 3.93-5.313 7.568-2.838 3.639-6.04 6.258-.437 1.965-.728 3.857-.218 1.82-.218 3.493 0 2.838.8 4.221t2.402 1.383q1.965 0 3.856-1.747 1.965-1.746 3.64-4.366 1.746-2.693 2.983-5.53l1.091.581q-2.91 6.186-6.331 9.825-3.42 3.566-7.35 3.566zm.51-17.757q2.547-2.547 4.948-5.822 2.402-3.347 4.44-6.913 2.11-3.566 3.71-6.914t2.475-5.967q.873-2.693.873-4.148 0-.728-.218-.946-.145-.219-.291-.219-.582 0-2.038 1.893-1.382 1.819-3.274 4.948T17.1 24.066t-3.784 8.369q-1.747 4.366-2.984 8.587z"/><path d="M28.816 59.799q-4.439 0-6.695-2.475-2.183-2.401-2.183-5.967 0-3.275 1.6-6.914 1.674-3.638 4.367-6.84 2.765-3.202 6.04-5.167 3.275-2.038 6.477-2.038 1.674 0 3.056.873 1.456.874 1.456 3.566 0 2.766-1.674 5.24-1.6 2.401-4.294 4.293-2.62 1.892-5.821 3.13-3.13 1.164-6.259 1.455-.145.728-.218 1.383t-.073 1.237q0 1.091.218 2.183.291 1.092.946 2.038.655.873 1.747 1.382 1.164.51 2.838.51 3.13 0 6.186-1.747 3.056-1.82 5.676-4.73t4.439-6.404l.873.655q-1.965 4.366-5.021 7.568-2.984 3.202-6.55 4.949-3.493 1.82-7.131 1.82zM25.25 47.573q1.965-.655 4.44-1.892 2.473-1.31 4.73-3.057 2.328-1.746 3.783-3.856 1.529-2.11 1.529-4.44 0-.8-.292-1.237t-1.237-.436q-1.746 0-3.711 1.382-1.965 1.31-3.784 3.494t-3.275 4.803-2.183 5.24z"/><path d="M57.776 58.488q-2.474 0-3.93-1.31-1.382-1.31-1.382-3.42 0-2.183 1.019-4.585t1.964-4.73q1.02-2.401 1.02-4.293 0-2.329-1.383-3.42-1.31-1.165-2.693-2.11-1.674 4.293-3.493 8.15t-2.984 5.821l-.655-1.237q1.02-1.892 2.62-5.53 1.674-3.639 3.275-8.297-.728-.727-.728-1.746 0-2.183 1.237-3.566t1.82-1.383q.8 0 .873.728.145.655.145 1.019t-.436 1.455q-.364 1.02-.364 1.238 0 1.018 1.092 1.892 1.164.8 2.62 1.892 1.455 1.019 2.546 2.547 1.165 1.455 1.165 3.784 0 2.183-.946 4.439-.874 2.256-1.82 4.294-.873 2.037-.873 3.566 0 1.31.655 1.746t1.528.437q1.747 0 3.566-1.092 1.892-1.091 3.639-2.765t3.129-3.493q1.383-1.892 2.038-3.493l.946.727q-1.383 3.057-3.784 6.04-2.402 2.912-5.386 4.804-2.91 1.892-6.04 1.892z"/><path d="M94.017 58.05q-2.547 0-3.856-1.31-1.237-1.31-1.237-3.348 0-1.529.509-3.202.582-1.674 1.092-3.42.509-1.82.509-3.494 0-2.037-.873-2.765-.8-.8-2.038-.8-2.256 0-4.585 1.891-2.329 1.82-4.512 4.73-2.183 2.839-4.075 5.895t-3.348 5.458q-1.164 0-2.183-.437-1.091-.363-1.674-1.164 0-.364.801-2.256.728-1.892 1.747-4.657t1.819-5.677.8-5.312q.437-.51 1.383-1.019t1.965-.51q1.965 0 1.965 1.893 0 1.164-.655 3.93-.655 2.692-1.674 5.676 1.965-2.984 4.366-5.894 2.475-2.984 5.24-4.949t5.53-1.965q2.839 0 4.076 2.038 1.31 2.037 1.31 4.512 0 2.256-.728 4.22-.727 1.893-1.528 3.712-.728 1.747-.728 3.566 0 1.528.582 2.183.655.582 1.601.582 1.82 0 3.64-1.674 1.818-1.746 3.492-4.366 1.747-2.62 3.057-5.312l.8.946q-1.528 3.566-3.42 6.331t-4.148 4.367-5.021 1.6z"/><path fill="red" d="M52.177 50.828q-.305 0-.552-.152-.23-.153-.23-.477 0-.4.458-.685.476-.305.934-.305.285 0 .457.133t.171.457q0 .362-.4.705-.38.324-.838.324z" style="-inkscape-stroke:none;font-variation-settings:normal" transform="translate(-80.924 -169.01) scale(3.8201)"/><path d="M109.665 58.488q-2.839 0-4.221-1.819-1.383-1.746-1.383-4.294 0-1.673.582-4.22.655-2.548 1.674-5.313 1.019-2.838 2.329-5.312 1.382-2.474 2.91-4.003 1.529-1.6 2.984-1.6.655 0 1.092.436.51.364.51 1.164 0 .874-1.165 2.838-1.092 1.965-2.62 4.512t-2.692 5.386q-1.092 2.765-1.092 5.312 0 2.62.873 3.493t2.693.873q2.474 0 5.24-2.474 2.838-2.474 5.967-8.66l.655.727q-2.11 6.259-6.113 9.606-3.93 3.348-8.223 3.348z"/><path fill="red" d="M31.54 50.828q-.305 0-.552-.152-.23-.153-.23-.477 0-.4.458-.685.476-.305.934-.305.285 0 .457.133t.171.457q0 .362-.4.705-.38.324-.838.324z" transform="translate(-80.924 -169.01) scale(3.8201)"/></g> }
diff --git a/examples/ng_svg.rs b/examples/ng_svg.rs
@@ -1,30 +1,30 @@
-use lerni::{
-    properties::{Align, VAlign},
-    widgets::*,
-};
-use wasm_bindgen::prelude::wasm_bindgen;
-use yew::prelude::*;
+use leptos::*;
+use lerni::ng::*;
 
-#[function_component]
-pub fn SvgExample() -> Html {
-    html! {
-        <Slide background_image="/img/lerni-bg.svg">
+#[component]
+pub fn SvgExample(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <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.svg-rs") }</Svg>
-                <Svg width=128 height=64 scale=3.0>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 scale=2.0 align={ Align::Left } valign={ VAlign::Top }>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 align={ Align::Fill }>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 flip_x=true>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 scale=2.0>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 valign={ VAlign::Bottom }>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 flip_y=true>{ include!("logo.svg-rs") }</Svg>
-                <Svg width=128 height=64 flip_x=true flip_y=true scale=2.0 align={ Align::Right } valign={ VAlign::Bottom }>{ include!("logo.svg-rs") }</Svg>
+                <Svg width=128 height=64>{include!("logo-ng.svg-rs")}</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>
+                <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>
+                <Svg width=128 height=64 flip_y=true>{include!("logo-ng.svg-rs")}</Svg>
+                <Svg width=128 height=64 flip_x=true flip_y=true scale=2.0 align=Align::Right valign=VAlign::Bottom>
+                    {include!("logo-ng.svg-rs")}
+                </Svg>
             </Grid>
         </Slide>
     }
 }
 
 #[wasm_bindgen(start)]
 pub fn main() {
-    lerni::start::<SvgExample>();
+    lerni::ng::start(SvgExample);
 }
diff --git a/src/ng.rs b/src/ng.rs
@@ -32,6 +32,9 @@ pub use slide::Slide;
 mod slideshow;
 pub use slideshow::SlideShow;
 
+mod svg;
+pub use svg::Svg;
+
 use leptos::*;
 
 /// Additional information provided to all slides.

diff --git a/src/ng/svg.rs b/src/ng/svg.rs
@@ -0,0 +1,59 @@
+use leptos::*;
+
+use crate::ng::{use_frame, Align, VAlign};
+
+/// SVG widget.
+#[component]
+pub fn Svg(
+    cx: Scope,
+    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,
+    children: Children,
+) -> impl IntoView {
+    let f = use_frame(cx);
+
+    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;
+        sx.min(sy)
+    } else {
+        scale
+    };
+
+    let width = (scale * width as f32).round() as i32;
+    let height = (scale * height as f32).round() as i32;
+
+    let mut x = match 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 {
+        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 flip_x {
+        sx = -sx;
+        x += width;
+    }
+    if flip_y {
+        sy = -sy;
+        y += height;
+    }
+
+    view! { cx,
+        <g transform=format!("translate({x} {y}) scale({sx} {sy})")>
+        {children(cx)}
+        </g>
+    }
+}