dioxus icon indicating copy to clipboard operation
dioxus copied to clipboard

Add the `onvisible` event handler to `Element`

Open ASR-ASU opened this issue 1 year ago • 1 comments

This PR add the capability to handle the visible events for a given Element:

#[component]
fn MyComponent() {
    rsx! {
        div {
            onvisible: move |evt| {
	        let data = evt.data();

                println!("bounding_client_rect={:?}", data.get_bounding_client_rect());
                println!("intersection_ratio={:?}", data.get_intersection_ratio());
                println!("intersection_rect={:?}", data.get_intersection_rect());
                println!("is_intersecting={:?}", data.is_intersecting());
                println!("root_bounds={:?}", data.get_root_bounds());
                println!("target={:?}", data.get_target());
                println!("time={:?}", data.get_time());
            }
        }
    }
}

For now, the IntersectionObserverEntry.target is not used/serialized. If it make sense to use it, how can we serialize it? Could we use the data-dioxus-id?

ASR-ASU avatar Sep 01 '24 10:09 ASR-ASU

ElementRef could do the trick.

ASR-ASU avatar Sep 02 '24 20:09 ASR-ASU

In the next version of Dioxus we're going to clean up our NodeRef implementation, so for now, I simply removed it from this PR. Once we add it in, all events should benefit from .target() working as expected. Otherwise, this looks good, and once checks pass, I'll merge it!

jkelleyrtp avatar Dec 02 '24 20:12 jkelleyrtp