-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2cd2b31
commit f9991b3
Showing
4 changed files
with
224 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,3 +8,4 @@ pub mod placement; | |
| pub mod relative; | ||
| pub mod scroll; | ||
| pub mod table; | ||
| pub mod transform; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| use std::ops::Deref; | ||
|
|
||
| use convert_case::{Case, Casing}; | ||
| use floating_ui_leptos::{ | ||
| use_floating, MiddlewareVec, Shift, ShiftOptions, UseFloatingOptions, UseFloatingReturn, | ||
| }; | ||
| use leptos::{html::Div, *}; | ||
| use wasm_bindgen::JsCast; | ||
|
|
||
| #[derive(Copy, Clone, Debug, PartialEq)] | ||
| enum Node { | ||
| None, | ||
| Reference, | ||
| Floating, | ||
| Body, | ||
| Html, | ||
| OffsetParent, | ||
| OffsetParent3d, | ||
| OffsetParentInverse, | ||
| OffsetParentReference, | ||
| Virtual, | ||
| Inline, | ||
| } | ||
|
|
||
| const ALL_NODES: [Node; 11] = [ | ||
| Node::None, | ||
| Node::Reference, | ||
| Node::Floating, | ||
| Node::Body, | ||
| Node::Html, | ||
| Node::OffsetParent, | ||
| Node::OffsetParent3d, | ||
| Node::OffsetParentInverse, | ||
| Node::OffsetParentReference, | ||
| Node::Virtual, | ||
| Node::Inline, | ||
| ]; | ||
|
|
||
| #[component] | ||
| pub fn Transform() -> impl IntoView { | ||
| let reference_ref = create_node_ref::<Div>(); | ||
| let floating_ref = create_node_ref::<Div>(); | ||
| let offset_parent_ref = create_node_ref::<Div>(); | ||
|
|
||
| let (node, set_node) = create_signal(Node::None); | ||
|
|
||
| let middleware: MiddlewareVec = vec![Box::new(Shift::new( | ||
| ShiftOptions::default().cross_axis(true), | ||
| ))]; | ||
|
|
||
| let UseFloatingReturn { | ||
| x, | ||
| y, | ||
| strategy, | ||
| update, | ||
| .. | ||
| } = use_floating( | ||
| reference_ref, | ||
| floating_ref, | ||
| UseFloatingOptions::default() | ||
| .middleware(middleware.into()) | ||
| .while_elements_mounted_auto_update(), | ||
| ); | ||
|
|
||
| create_effect(move |_| { | ||
| let element = match node() { | ||
| Node::Html => document() | ||
| .document_element() | ||
| .map(|element| element.unchecked_into::<web_sys::HtmlElement>()), | ||
| Node::Body => document().body(), | ||
| Node::OffsetParent | ||
| | Node::OffsetParent3d | ||
| | Node::OffsetParentInverse | ||
| | Node::OffsetParentReference | ||
| | Node::Virtual | ||
| | Node::Inline => offset_parent_ref | ||
| .get() | ||
| .map(|offset_parent| offset_parent.deref().clone().into()), | ||
| _ => None, | ||
| }; | ||
|
|
||
| if let Some(element) = element { | ||
| let transform = match node() { | ||
| Node::OffsetParent3d => "scale3d(0.5, 0.2, 0.7) translate3d(2rem, -2rem, 0)", | ||
| Node::OffsetParentInverse | Node::Virtual => "scale(0.5)", | ||
| _ => "scale(0.5) translate(2rem, -2rem)", | ||
| }; | ||
|
|
||
| element | ||
| .style() | ||
| .set_property("transform", transform) | ||
| .expect("Style should be updated."); | ||
|
|
||
| if node() == Node::Virtual { | ||
| let _virtual_context = document().get_element_by_id("virtual-context"); | ||
| // TODO: change reference ref to virtual element | ||
| } | ||
| } | ||
|
|
||
| update(); | ||
| }); | ||
|
|
||
| on_cleanup(move || { | ||
| let element = match node() { | ||
| Node::Html => document() | ||
| .document_element() | ||
| .map(|element| element.unchecked_into::<web_sys::HtmlElement>()), | ||
| Node::Body => document().body(), | ||
| Node::OffsetParent | ||
| | Node::OffsetParent3d | ||
| | Node::OffsetParentInverse | ||
| | Node::OffsetParentReference | ||
| | Node::Virtual | ||
| | Node::Inline => offset_parent_ref | ||
| .get() | ||
| .map(|offset_parent| offset_parent.deref().clone().into()), | ||
| _ => None, | ||
| }; | ||
|
|
||
| if let Some(element) = element { | ||
| element | ||
| .style() | ||
| .remove_property("transform") | ||
| .expect("Style should be updated."); | ||
| } | ||
| }); | ||
|
|
||
| view! { | ||
| <h1>Transform</h1> | ||
| <p> | ||
| The floating element should be positioned correctly on the bottom when a certain node has been transformed. | ||
| </p> | ||
| <div | ||
| _ref=offset_parent_ref | ||
| class="container" | ||
| style:overflow="hidden" | ||
| style:position=move || match node() { | ||
| Node::OffsetParent => "relative", | ||
| _ => "" | ||
| } | ||
| > | ||
| <span style:position=move || match node() { | ||
| Node::Inline => "relative", | ||
| _ => "" | ||
| }> | ||
| <Show when=move || node() == Node::Virtual> | ||
| <div | ||
| id="virtual-context" | ||
| style:width="50px" | ||
| style:height="50px" | ||
| style:background="black" | ||
| /> | ||
| </Show> | ||
| <div | ||
| _ref=reference_ref | ||
| class="reference" | ||
| style:transform=move || match node() { | ||
| Node::Reference | Node::OffsetParentReference => "scale(1.25) translate(2rem, -2rem)", | ||
| _ => "" | ||
| } | ||
| > | ||
| Reference | ||
| </div> | ||
| <div | ||
| _ref=floating_ref | ||
| class="floating" | ||
| style:position=move || format!("{:?}", strategy()).to_lowercase() | ||
| style:top=move || format!("{}px", y()) | ||
| style:left=move || format!("{}px", x()) | ||
| style:transform=move || match node() { | ||
| Node::Floating => "scale(1.25)", | ||
| _ => "" | ||
| } | ||
| style:transform-origin="top" | ||
| > | ||
| Floating | ||
| </div> | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="controls"> | ||
| <For | ||
| each=|| ALL_NODES | ||
| key=|local_node| format!("{:?}", local_node) | ||
| children=move |local_node| view! { | ||
| <button | ||
| data-testid=move || format!("transform-{}", match local_node { | ||
| Node::None => "null".into(), | ||
| Node::OffsetParent3d => "offsetParent-3d".into(), | ||
| Node::OffsetParentInverse => "offsetParent-inverse".into(), | ||
| Node::OffsetParentReference => "offsetParent-reference".into(), | ||
| _ => format!("{:?}", local_node).to_case(Case::Camel) | ||
| }) | ||
| style:background-color=move || match node() == local_node { | ||
| true => "black", | ||
| false => "" | ||
| } | ||
| on:click=move |_| set_node(local_node) | ||
| > | ||
| {format!("{:?}", local_node).to_case(Case::Camel)} | ||
| </button> | ||
| } | ||
| /> | ||
| </div> | ||
| } | ||
| } |