feat: add flip and angle fields to Label (#92)

examples/hello_world.rs

@@ -8,10 +8,10 @@ pub fn HelloWorld() -> impl IntoView {
     view! {
         <SlideShow>
             <Slide background_color=Color::MistyRose>
-                <Label>"Hello →"</Label>
+                <Label angle=10>"Hello →"</Label>
             </Slide>
             <Slide background_color=Color::PaleGreen>
-                <Label>"← World!"</Label>
+                <Label angle=-10>"← World!"</Label>
             </Slide>
             <Counter/>
         </SlideShow>

src/properties.rs

@@ -2,6 +2,8 @@
 
 mod align;
 mod color;
+mod flip;
 
 pub use align::{Align, VAlign};
 pub use color::Color;
+pub use flip::Flip;

src/properties/flip.rs

@@ -0,0 +1,11 @@
+/// Flip is an enum that represents the flip state of an object.
+#[derive(Clone, Default, PartialEq)]
+pub enum Flip {
+    /// No flip.
+    #[default]
+    None,
+    /// Horizontal flip.
+    Horizontal,
+    /// Vertical flip.
+    Vertical,
+}

src/widgets/label.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 
-use crate::{use_frame, Align, Color, Size, VAlign};
+use crate::{use_frame, Align, Color, Flip, Size, VAlign};
 
 #[component]
 pub fn Label(
@@ -13,6 +13,8 @@ pub fn Label(
     #[prop(default = Color::Transparent.into(), into)] background_color: MaybeSignal<Color>,
     #[prop(default = true.into(), into)] visible: MaybeSignal<bool>,
     #[prop(default = "all .3s".to_string(), into)] transition: String,
+    #[prop(optional)] angle: i32,
+    #[prop(optional)] flip: Flip,
     children: Children,
 ) -> impl IntoView {
     let f = use_frame();
@@ -28,6 +30,13 @@ pub fn Label(
         VAlign::Bottom => (f.y + f.height, "text-top"),
     };
 
+    let mut transform = format!("rotate({angle} {x} {y})");
+    if flip == Flip::Horizontal {
+        transform.push_str(" scale(-1 1)");
+    } else if flip == Flip::Vertical {
+        transform.push_str(" scale(1 -1)");
+    }
+
     view! {
         <g
             style:opacity=move || if visible.get() { 1 } else { 0 }
@@ -46,8 +55,9 @@ pub fn Label(
             <text
                 class:has-text-weight-bold=bold
                 style:font-family=font
-                x=x
-                y=y
+                x=if flip == Flip::Horizontal { -x } else { x }
+                y=if flip == Flip::Vertical { -y } else { y }
+                transform=transform
                 font-size=move || font_size.into_pixels(f.height)
                 text-anchor=anchor
                 fill=color