How to get bounding client rect of element?

[dima634]

I'm currently working on implementing the dragging of graph nodes. The nodes are positioned using the top/left CSS properties. To track the position during dragging, I have an event handler on the parent element that updates the node position using the element_coordinates from MouseData. The issue I'm encountering is that when the cursor moves over other nodes, the element_coordinates are not relative to the parent, causing the nodes to jump.

In JavaScript, I would typically check if the event target is my parent element, so that the mousemove event would be ignored or bubbled up to the parent when dragging over other nodes. Another approach is to compute the node position based on client_coordinates, but this would require access to the getBoundingClientRect API.

As far as I understand, both of these approaches are not currently possible in Dioxus. Does anyone have an idea on how to approach this? The question is specifically about desktop.

Here is the code:

#[derive(Clone)]
pub struct NodeData {
    pub id: usize,
    pub name: String,
    pub x: f64,
    pub y: f64,
}

impl PartialEq for NodeData {
    #[inline]
    fn eq(&self, other: &Self) -> bool {
        self.id == other.id
    }
}

#[derive(PartialEq, Clone, Props)]
pub struct GraphProps {
    nodes: Vec<NodeData>,
}

#[allow(non_snake_case)]
#[component]
pub fn Graph(props: GraphProps) -> Element {
    let mut nodes = use_signal(|| props.nodes);
    let mut dragging_node_idx = use_signal(|| None);

    let on_dragging = move |node_id| {
        println!("Dragging node: {}", node_id);
        let idx = nodes().iter().position(|node| node.id == node_id);
        dragging_node_idx.set(idx);
    };

    let stop_dragging = move |_| {
        println!("Stop dragging node: {:?}", dragging_node_idx());
        dragging_node_idx.set(None);
    };

    let on_mouse_move = move |event: MouseEvent| {
        if let Some(idx) = dragging_node_idx() {
            let coords = event.element_coordinates();
            let x = coords.x;
            let y = coords.y;

            println!("x = {}, y = {}", x, y);

            let old_node = nodes()[idx].clone();
            let new_node = NodeData { x, y, ..old_node };
            nodes.write()[idx] = new_node;
        }
    };

    rsx!(
        div {
            class: "graph",
            onmouseleave: stop_dragging,
            onmouseup: stop_dragging,
            onmousemove: on_mouse_move,
            
            for node in nodes() {
                Node { 
                    key: "{node.id}", 
                    id: node.id, 
                    name: node.name, 
                    x: node.x, 
                    y: node.y,
                    dragging: on_dragging,
                }
            }
        }
    )
}

#[derive(PartialEq, Clone, Props)]
struct NodeProps {
    id: usize,
    name: String,
    x: f64,
    y: f64,
    dragging: EventHandler<usize>,
}

#[allow(non_snake_case)]
#[component]
fn Node(props: NodeProps) -> Element {
    let position_style = format!("left: {}px; top: {}px;", props.x, props.y);

    rsx!(
        div {
            class: "node",
            style: position_style,

            onmousedown: move |_| props.dragging.call(props.id),

            Text { ramp: TextRamp::Body, { props.name } }
        }
    )
}

[ealmloff]

You can get the rendered position of an element with the onmounted event. Here is an example

I am working on a project with graph UI that might be useful as a reference here

[dima634]

Thank you!

[ealmloff]

We have had a bunch of similar questions to this in the past and I'm trying to improve the docs for onmounted and related functions to make this more discoverable.

If you have a minute, I'm curious what/where you searched before landing here?

[dima634]

I searched for issues/discussions here on GitHub and read Dioxus' guide here. Apparently, I should have paid more attention to the examples.