feat(fe/modules): Added animation effects (Houdini)

ji-devs · Apr 12, 2024 · 45de4d4 · 45de4d4
1 parent abe6672
commit 45de4d4
Show file tree

Hide file tree

Showing 14 changed files with 1,214 additions and 225 deletions.
diff --git a/frontend/apps/crates/components/src/stickers/actions.rs b/frontend/apps/crates/components/src/stickers/actions.rs
@@ -117,9 +117,9 @@ impl<T: AsSticker> Stickers<T> {
             Some(clone!(_self => move |_| {
                 _self.call_change();
             })),
-            Some(clone!(_self => move || {
-                _self.deselect();
-            })),
+            // Some(clone!(_self => move || {
+            //     _self.deselect();
+            // })),
         )))));
     }
 
@@ -131,9 +131,9 @@ impl<T: AsSticker> Stickers<T> {
             Some(clone!(_self => move |_| {
                 _self.call_change();
             })),
-            Some(clone!(_self => move || {
-                _self.deselect();
-            })),
+            // Some(clone!(_self => move || {
+            //     _self.deselect();
+            // })),
         )))));
     }
 

diff --git a/frontend/apps/crates/components/src/stickers/dom.rs b/frontend/apps/crates/components/src/stickers/dom.rs
@@ -17,7 +17,9 @@ use futures_signals::{
     signal::{Mutable, ReadOnlyMutable, Signal, SignalExt},
     signal_vec::{SignalVec, SignalVecExt},
 };
-use shared::domain::module::body::{Transform, _groups::design::Sticker as RawSticker};
+use shared::domain::module::body::{
+    HoverAnimation, StickerHidden, Transform, _groups::design::Sticker as RawSticker,
+};
 use std::rc::Rc;
 use utils::{keyboard::KeyEvent, prelude::*};
 use web_sys::HtmlElement;
@@ -347,3 +349,53 @@ pub fn render_sticker_raw(
         }
     }
 }
+
+pub fn sticker_animation(
+    animation: Option<HoverAnimation>,
+    slot: impl FnOnce(DomBuilder<HtmlElement>) -> DomBuilder<HtmlElement>,
+) -> Dom {
+    html!("animations-hover", {
+        .apply(|dom| {
+            match &animation {
+                None => dom,
+                Some(effect) => dom.class(effect.as_str()),
+            }
+
+        })
+        .apply(|dom| {
+            slot(dom)
+        })
+    })
+}
+
+pub fn sticker_hidden(
+    hidden: &Option<StickerHidden>,
+    slot: impl FnOnce(DomBuilder<HtmlElement>) -> DomBuilder<HtmlElement>,
+) -> Dom {
+    html!("animations-hide", {
+        .apply(|dom| {
+            match &hidden {
+                None => dom,
+                Some(hidden) => {
+                    let visible = Mutable::new(hidden.is_on_click());
+                    let dom = dom
+                        .prop_signal("visible", visible.signal())
+                        .event(move |_: events::Click| {
+                            visible.replace_with(|visible| !*visible);
+                        });
+                    match hidden {
+                        StickerHidden::OnClick(effect) => {
+                            dom.prop("effect", effect.as_str())
+                        },
+                        StickerHidden::UntilClick(effect) => {
+                            dom.prop("effect", effect.as_str())
+                        },
+                    }
+                },
+            }
+        })
+        .apply(|dom| {
+            slot(dom)
+        })
+    })
+}
diff --git a/frontend/apps/crates/components/src/stickers/sprite/dom.rs b/frontend/apps/crates/components/src/stickers/sprite/dom.rs
@@ -17,7 +17,10 @@ use super::{
 };
 use futures_signals::signal::{Mutable, ReadOnlyMutable, SignalExt};
 
-use crate::transform::{dom::render_transform, state::ResizeLevel};
+use crate::{
+    stickers::dom::{sticker_animation, sticker_hidden},
+    transform::{dom::render_transform, state::ResizeLevel},
+};
 use shared::domain::module::body::_groups::design::Sprite as RawSprite;
 //For stickers, just let the transform affect it directly
 //that means it's not a child of the transform, they're independent
@@ -152,29 +155,33 @@ pub fn render_sticker_sprite_raw(sprite: &RawSprite, opts: Option<SpriteRawRende
             size.set(Some((width, height)));
             src.set(Some(url));
         }))
-        .child_signal(
-            src.signal_ref(clone!(size, flip_horizontal, flip_vertical => move |src| {
-                src.as_ref().map(|src| {
-                    html!("img", {
-                        .attr("src", src)
-                        // Prevent sprites from being selected if a student attempts to drag
-                        // a non-interactive sticker.
-                        .style("user-select", "none")
-                        .style("pointer-events", "none")
-                        .style("display", "block")
-                        .style("position", "relative")
-                        .style_signal("width", width_signal(size.signal_cloned()))
-                        .style_signal("height", height_signal(size.signal_cloned()))
-                        .style("transform", {
-                            let x = if flip_horizontal { -1 } else { 1 };
-                            let y = if flip_vertical { -1 } else { 1 };
-
-                            format!("scaleX({}) scaleY({})", x, y)
+        .child(sticker_hidden(&sprite.hidden, move |dom| {
+            dom.child(sticker_animation(sprite.hover_animation, move |dom| {
+                dom.child_signal(src.signal_ref(
+                    clone!(size, flip_horizontal, flip_vertical => move |src| {
+                        src.as_ref().map(|src| {
+                            html!("img", {
+                                .attr("src", src)
+                                // Prevent sprites from being selected if a student attempts to drag
+                                // a non-interactive sticker.
+                                .style("user-select", "none")
+                                .style("pointer-events", "none")
+                                .style("display", "block")
+                                .style("position", "relative")
+                                .style_signal("width", width_signal(size.signal_cloned()))
+                                .style_signal("height", height_signal(size.signal_cloned()))
+                                .style("transform", {
+                                    let x = if flip_horizontal { -1 } else { 1 };
+                                    let y = if flip_vertical { -1 } else { 1 };
+
+                                    format!("scaleX({}) scaleY({})", x, y)
+                                })
+                            })
                         })
-                    })
-                })
-            })),
-        )
+                    }),
+                ))
+            }))
+        }))
         .apply_if(mixin.is_some(), move |dom| dom.apply(mixin.unwrap_ji()))
         .into_dom()
 }
diff --git a/frontend/apps/crates/components/src/stickers/sprite/ext.rs b/frontend/apps/crates/components/src/stickers/sprite/ext.rs
@@ -13,6 +13,8 @@ impl SpriteExt for Sprite {
             effects: Vec::new(),
             flip_horizontal: false,
             flip_vertical: false,
+            hover_animation: None,
+            hidden: None,
         }
     }
 }