Add SVG example (#390)

sycamore-rs · Mar 18, 2022 · 48bdd72 · 48bdd72
1 parent d46a1ce
commit 48bdd72
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 1 deletion.
diff --git a/Cargo.toml b/Cargo.toml
@@ -21,6 +21,7 @@ members = [
   "examples/higher-order-components",
   "examples/motion",
   "examples/ssr",
+  "examples/svg",
   "examples/timer",
   "examples/todomvc",
   "examples/transitions",

diff --git a/examples/README.md b/examples/README.md
@@ -35,6 +35,7 @@ Now open up `localhost:8080` in your browser to see "Hello World!".
 | [js-framework-benchmark](js-framework-benchmark)   | Implementation of [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) |
 | [motion](motion)                                   | Demonstration for using animation frames and tweened signals                                   |
 | [ssr](ssr)                                         | Demonstration of server-side-rendering                                                         |
+| [svg](svg)                                         | Creating SVGs with the `view!` macro                                                           |
 | [timer](timer)                                     | Demonstration of using futures to auto-increment a counter                                     |
 | [todomvc](todomvc)                                 | Fully compliant implementation of [TodoMVC](https://todomvc.com/) spec                         |
 | [transitions](transitions)                         | Suspense + async transitions                                                                   |

diff --git a/examples/svg/Cargo.toml b/examples/svg/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "svg"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+sycamore = { path = "../../packages/sycamore" }
diff --git a/examples/svg/index.html b/examples/svg/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>SVG | Sycamore</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body></body>
+</html>
diff --git a/examples/svg/src/main.rs b/examples/svg/src/main.rs
@@ -0,0 +1,29 @@
+use std::time::Duration;
+
+use sycamore::motion::ScopeMotionExt;
+use sycamore::{easing, prelude::*};
+
+#[component]
+fn App<G: Html>(ctx: Scope) -> View<G> {
+    let rotate = ctx.create_tweened_signal(0f64, Duration::from_millis(800), easing::quad_inout);
+
+    view! { ctx,
+        button(disabled=rotate.is_tweening(), on:click=|_| rotate.set(*rotate.get() + 0.5)) { "Half rotate..." }
+        button(disabled=rotate.is_tweening(), on:click=|_| rotate.set(*rotate.get() + 1.0)) { "Rotate!" }
+        button(disabled=rotate.is_tweening(), on:click=|_| rotate.set(*rotate.get() + 2.0)) { "Rotate twice!!" }
+        button(disabled=rotate.is_tweening(), on:click=|_| rotate.set(*rotate.get() + 3.0)) { "Rotate thrice!!!" }
+        svg(height="210", width="500", xmlns="http://www.w3.org/2000/svg") {
+            rect(
+                x="100", y="100",
+                width="100", height="100",
+                fill="red", transform=format!("rotate({}, 150, 150)", (*rotate.get() * 360.0) as u32)
+            )
+        }
+    }
+}
+
+fn main() {
+    sycamore::render(|ctx| {
+        view! { ctx, App() }
+    });
+}
diff --git a/packages/sycamore/src/html/mod.rs b/packages/sycamore/src/html/mod.rs
@@ -192,7 +192,8 @@ define_elements! {
     wbr {},
 }
 
-// A list of valid SVG elements. Some elements are commented out because they conflict with the HTML elements.
+// A list of valid SVG elements. Some elements are commented out because they conflict with the HTML
+// elements.
 define_elements! {
     Some("http://www.w3.org/2000/svg"),
     svg {},

diff --git a/packages/sycamore/src/motion.rs b/packages/sycamore/src/motion.rs
@@ -173,6 +173,7 @@ struct TweenedInner<'a, T: Lerp + Clone + 'a> {
     /// context to be able to spawn the raf callback.
     ctx: Scope<'a>,
     value: RcSignal<T>,
+    is_tweening: RcSignal<bool>,
     raf_state: Option<RafState<'a>>,
     transition_duration_ms: f32,
     easing_fn: Rc<dyn Fn(f32) -> f32>,
@@ -192,6 +193,7 @@ impl<'a, T: Lerp + Clone + 'a> Tweened<'a, T> {
         Self(Rc::new(RefCell::new(TweenedInner {
             ctx,
             value,
+            is_tweening: create_rc_signal(false),
             raf_state: None,
             transition_duration_ms: transition_duration.as_millis() as f32,
             easing_fn: Rc::new(easing_fn),
@@ -212,6 +214,7 @@ impl<'a, T: Lerp + Clone + 'a> Tweened<'a, T> {
 
         let start_time = Date::now();
         let signal = self.0.borrow().value.clone();
+        let is_tweening = self.0.borrow().is_tweening.clone();
         let transition_duration_ms = self.0.borrow().transition_duration_ms;
 
         // If previous raf is still running, call stop() to cancel it.
@@ -232,10 +235,12 @@ impl<'a, T: Lerp + Clone + 'a> Tweened<'a, T> {
                 true
             } else {
                 signal.set(new_value.clone());
+                is_tweening.set(false);
                 false
             }
         });
         start();
+        self.0.borrow().is_tweening.set(true);
         self.0.borrow_mut().raf_state = Some((running, start, stop));
     }
 
@@ -253,6 +258,12 @@ impl<'a, T: Lerp + Clone + 'a> Tweened<'a, T> {
     pub fn signal(&self) -> RcSignal<T> {
         self.0.borrow().value.clone()
     }
+
+    /// Returns `true` if the value is currently being tweened/interpolated. This value is reactive
+    /// and can be tracked.
+    pub fn is_tweening(&self) -> bool {
+        *self.0.borrow().is_tweening.get()
+    }
 }
 
 impl<'a, T: Lerp + Clone + 'static> Clone for Tweened<'a, T> {
@@ -266,6 +277,7 @@ impl<'a, T: Lerp + Clone + 'static> Clone for TweenedInner<'a, T> {
         Self {
             ctx: self.ctx,
             value: self.value.clone(),
+            is_tweening: self.is_tweening.clone(),
             raf_state: self.raf_state.clone(),
             transition_duration_ms: self.transition_duration_ms,
             easing_fn: Rc::clone(&self.easing_fn),