Router with transitions

[wackazong]

I made a pretty generic router that supports CSS transitions. Would be lovely to get some feedback on it. It does rely on a delay to start the CSS transition, if anybody has a better idea please teach me (search for "hacky" in the code below).

I would be happy to release this as a crate or in any other way if people are interested.

use crate::TRANSITION_TIME;
use dioxus::prelude::*;
use gloo_timers::future::sleep;
use std::{fmt::Debug, marker::PhantomData, time::Duration};

#[derive(Debug, Clone, PartialEq)]
struct TransitionMatrix {
    scale_x: f64,
    scale_y: f64,
    translate_x: f64,
    translate_y: f64,
}

impl Default for TransitionMatrix {
    fn default() -> Self {
        Self {
            scale_x: 1.0,
            scale_y: 1.0,
            translate_x: Default::default(),
            translate_y: Default::default(),
        }
    }
}

#[derive(Debug, Default, Clone, PartialEq)]
pub enum TransitionType {
    #[default]
    None,
    Fade,
    SwipeLeft,
    SwipeRight,
    FadeAndZoomTo(TransitionMatrix),
    FadeAndUnzoomFrom,
}

#[derive(Debug, Default, Clone, PartialEq)]
pub enum TransitionState {
    #[default]
    Default,
    Preparing,
    Running,
}

#[component]
pub fn TransitionLink<T: Clone + PartialEq + 'static + Debug + Routable>(
    class: Option<String>,
    active_class: Option<String>,
    children: Element,
    new_tab: Option<bool>,
    onclick: Option<EventHandler<MouseEvent>>,
    onclick_only: Option<bool>,
    rel: Option<String>,
    to: T,
    transition: Option<TransitionType>,
) -> Element {
    let signal = try_consume_context::<Signal<Transition<T>>>();
    rsx!(Link {
        class,
        active_class,
        children,
        new_tab: new_tab.unwrap_or_default(),
        onclick: move |event| {
            if let Some(mut signal) = signal {
                signal.write().transition = transition.clone().unwrap_or(TransitionType::None);
            }
            if let Some(handler) = onclick {
                handler.call(event)
            }
        },
        onclick_only: onclick_only.unwrap_or_default(),
        rel,
        to,
    })
}

#[component]
pub fn Transition<T: Clone + PartialEq + 'static + Debug + Routable>(
    level: usize,
    outlet: Element,
    class: Option<String>,
    _t: Option<PhantomData<T>>,
) -> Element {
    let mut transition = use_context_provider(|| Signal::new(Transition::<T>::default()));

    let route = &use_route::<T>();

    if transition.peek().current.is_none() {
        transition.write().current = Some(route.clone());
    }

    // auto-trigger the next steps after some time
    if transition.peek().state == TransitionState::Preparing {
        spawn(async move {
            // change the state after the browser recognized the changes
            // the delay is a bit hacky, look for another solution
            sleep(Duration::from_millis(5)).await;
            transition.write().state = TransitionState::Running;
        });
        let route = route.clone();
        spawn(async move {
            // after transition ended, go back to normal
            sleep(Duration::from_millis(TRANSITION_TIME as u64)).await;
            transition.write().current = Some(route);
            transition.write().state = TransitionState::Default;
        });
    }

    // check if we have to start a new transition
    if transition.read().state == TransitionState::Default
        && Some(route) != transition.peek().current.as_ref()
    {
        // start a transition
        if transition.peek().transition == TransitionType::None {
            transition.write().current = Some(route.clone());
        } else {
            transition.write().state = TransitionState::Preparing;

            // store the matrix values to have them for the zoomback
            let transition_type = transition.peek().transition.clone();
            if let TransitionType::FadeAndZoomTo(matrix) = transition_type {
                transition.write().matrix = matrix
            }
        }
    }

    rsx! (
        div {
            class: "grid grid-cols-[1fr] grid-rows-[1fr]",
            class: class.unwrap_or_default(),
            div {
                class: "col-start-1 row-start-1",
                style: transition.peek().style_next(),
                {outlet}
            }
            div {
                class: "col-start-1 row-start-1",
                style: transition.peek().style_current(),
                {transition.peek().current.clone().map(|i|i.render(level))}
            }
        }
    )
}

pub struct Transition<T: Clone + PartialEq> {
    pub current: Option<T>,
    transition: TransitionType,
    matrix: TransitionMatrix,
    pub state: TransitionState,
}

impl<T: Clone + PartialEq> Default for Transition<T> {
    fn default() -> Self {
        Self {
            current: None,
            transition: Default::default(),
            state: Default::default(),
            matrix: Default::default(),
        }
    }
}

impl<T: Debug + Clone + PartialEq> Transition<T> {
    fn style_next(&self) -> Option<String> {
        match self.state {
            TransitionState::Preparing => Some(self.style_next_preparing()),
            TransitionState::Running => Some(self.style_next_running()),
            _ => None,
        }
    }

    fn style_current(&self) -> Option<String> {
        match self.state {
            TransitionState::Preparing => Some(self.style_current_preparing()),
            TransitionState::Running => Some(self.style_current_running()),
            _ => None,
        }
    }

    fn style_next_preparing(&self) -> String {
        match self.transition {
            TransitionType::Fade => {
                "transition: none; transform: none; opacity: 0; z-index: 5".to_string()
            }
            TransitionType::SwipeLeft => {
                "transition: none; transform: translateX(100%); opacity: 1; z-index: 5".to_string()
            }
            TransitionType::SwipeRight => {
                "transition: none; transform: translateX(-100%); opacity: 1; z-index: 5".to_string()
            }

            TransitionType::FadeAndZoomTo { .. } => {
                "transition: none; transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; z-index: 5"
                    .to_string()
            }
            TransitionType::FadeAndUnzoomFrom => {
                "transition: none; transform: none; opacity: 0; z-index: 5".to_string()
            }
            TransitionType::None => String::default(),
        }
    }

    fn style_current_preparing(&self) -> String {
        match self.transition {
            TransitionType::Fade => {
                "transition: none; transform: none; opacity: 1; z-index: 0".to_string()
            }
            TransitionType::SwipeLeft => {
                "transition: none; transform: translateX(0%); opacity: 1; z-index: 0".to_string()
            }
            TransitionType::SwipeRight => {
                "transition: none; transform: translateX(0%); opacity: 1; z-index: 0".to_string()
            }

            TransitionType::FadeAndZoomTo { .. } => format!(
                "transition: none; transform: matrix({}, 0, 0, {}, {}, {}); opacity: 0; z-index: 0",
                self.matrix.scale_x,
                self.matrix.scale_y,
                self.matrix.translate_x,
                self.matrix.translate_y,
            ),
            TransitionType::FadeAndUnzoomFrom => {
                "transition: none; transform: none; opacity: 1; z-index: 0".to_string()
            }
            TransitionType::None => String::default(),
        }
    }

    fn style_next_running(&self) -> String {
        match self.transition {
            TransitionType::Fade => format!(
                "transition: opacity {}ms ease; transform: none; opacity: 1; z-index: 5",
                TRANSITION_TIME,
            ),
            TransitionType::SwipeLeft => format!(
                "transition: transform {}ms ease; transform: translateX(0%); opacity: 1; z-index: 5",
                TRANSITION_TIME,
            ),
            TransitionType::SwipeRight => format!(
                "transition: transform {}ms ease; transform: translateX(0%); opacity: 1; z-index: 5",
                TRANSITION_TIME,
            ),
            TransitionType::FadeAndZoomTo { .. } => format!(
                "transition: transform {}ms ease, opacity {}ms ease; transform: none; opacity: 1; z-index: 5",
                TRANSITION_TIME,
                TRANSITION_TIME,
            ),
            TransitionType::FadeAndUnzoomFrom => format!(
                "transition: transform {}ms ease, opacity {}ms ease; transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; z-index: 5",
                TRANSITION_TIME,
                TRANSITION_TIME,
            ),
            TransitionType::None => String::default(),
        }
    }

    fn style_current_running(&self) -> String {
        match self.transition {
            TransitionType::Fade => format!(
                "transition: opacity {}ms ease; transform: none; opacity: 0; z-index: 0",
                TRANSITION_TIME,
            ),
            TransitionType::SwipeLeft => format!(
                "transition: transform {}ms ease; transform: translateX(-100%); opacity: 1; z-index: 0",
                TRANSITION_TIME,
            ),
            TransitionType::SwipeRight => format!(
                "transition: transform {}ms ease; transform: translateX(100%); opacity: 1; z-index: 0",
                TRANSITION_TIME,
            ),
            TransitionType::FadeAndZoomTo { .. } => format!(
                "transition: transform {}ms ease, opacity {}ms ease; transform: none; opacity: 0; z-index: 0",
                TRANSITION_TIME,
                TRANSITION_TIME,
            ),
            TransitionType::FadeAndUnzoomFrom => format!(
                "transition: transform {}ms ease, opacity {}ms ease; transform: matrix({}, 0, 0, {}, {}, {}); opacity: 0; z-index: 0",
                TRANSITION_TIME,
                TRANSITION_TIME,
                self.matrix.scale_x,
                self.matrix.scale_y,
                self.matrix.translate_x,
                self.matrix.translate_y,
            ),
            TransitionType::None => String::default(),
        }
    }
}

struct ExternalTransitionNavigationFailure(String);

struct TransitionNavigator(Navigator);

pub fn use_transition_navigator() -> TransitionNavigator {
    let navigator = use_navigator();
    TransitionNavigator(navigator)
}

impl TransitionNavigator {
    pub fn can_go_back(&self) -> bool {
        self.0.can_go_back()
    }

    pub fn can_go_forward(&self) -> bool {
        self.0.can_go_forward()
    }

    pub fn go_back<T: Clone + PartialEq + 'static>(&self, transition: Option<TransitionType>) {
        let signal = try_consume_context::<Signal<Transition<T>>>();
        if let Some(mut signal) = signal {
            signal.write().transition = transition.unwrap_or(TransitionType::None)
        }
        self.0.go_back();
    }

    pub fn go_forward<T: Clone + PartialEq + 'static>(&self, transition: Option<TransitionType>) {
        let signal = try_consume_context::<Signal<Transition<T>>>();
        if let Some(mut signal) = signal {
            signal.write().transition = transition.unwrap_or(TransitionType::None)
        }
        self.0.go_forward();
    }

    pub fn push<T: Clone + PartialEq + 'static>(
        &self,
        target: impl Into<IntoRoutable>,
        transition: Option<TransitionType>,
    ) -> Option<ExternalTransitionNavigationFailure> {
        let signal = try_consume_context::<Signal<Transition<T>>>();
        if let Some(mut signal) = signal {
            signal.write().transition = transition.unwrap_or(TransitionType::None)
        }
        self.0
            .push(target)
            .map(|i| ExternalTransitionNavigationFailure(i.0))
    }

    pub fn replace<T: Clone + PartialEq + 'static>(
        &self,
        target: impl Into<IntoRoutable>,
        transition: Option<TransitionType>,
    ) -> Option<ExternalTransitionNavigationFailure> {
        let signal = try_consume_context::<Signal<Transition<T>>>();
        if let Some(mut signal) = signal {
            signal.write().transition = transition.unwrap_or(TransitionType::None)
        }
        self.0
            .replace(target)
            .map(|i| ExternalTransitionNavigationFailure(i.0))
    }
}