Access SVG DOM Points from NodeRef HtmlElement<Svg>

[steckes]

I wanted to interactively change the datapoints of an svg.
With the points attribute I need to construct a new string everytime with my updated points.
In the DOM there is an SVGPoint / SVGPointList that can be accessed directly to update the numbers.
Is this somewhere accessible in leptos or is there a better way than using strings?

[gbj]

Generally there's a web-sys struct/function that matches every DOM API/class/type/function, including SvgPoint and SvgPointList. Make sure you add a web-sys dependency with the SvgPoint and SvgPointList features enabled.

Generally you can get access to the underlying web-sys DOM node for anything in your view using a NodeRef.

[steckes]

Thanks for your help!
Is the dyn_ref() from JsCast the right way to do it?
Just for reference the full access is working like that.

use wasm_bindgen::JsCast;
use web_sys::SvgPolylineElement;

let polyline = create_node_ref::<leptos::svg::Polyline>(cx);

let callback = move |event: ev::MouseEvent| {
    let polyline_ref = polyline.get().unwrap();
    let polyline = polyline_ref.dyn_ref::<SvgPolylineElement>().unwrap();
    let point = polyline.points().get(0).unwrap();
    point.set_x(20.0);
    point.set_y(140.0);
};

 view! { cx,
        <svg
        on:click=callback
        height="200"
        width="500">
            <polyline
            _ref=polyline_ref
            points="20,20 40,25 60,40 80,120 120,140 200,180"
                style="fill:none;stroke:black;stroke-width:3" />
        </svg>
}

[gbj]

Yeah looks great to me. I guess we don't maybe we don't provide fully-typed SVG/MathML elements in NodeRef (is that true?) but that typecast is the way to go.

[steckes]

I think so. I still don't know how to create new points, as the SvgPoint has no constructor function and only private members, but I can't wait to port my plotting tool from c++ to leptos :)

[gbj]

FWIW: Looking at SVGPoint on MDN I see a giant deprecation warning telling you to use DOMPoint instead. Looking at DOMPoint in the web-sys docs I see an initialization function.

[steckes]

Ooops good to know :) I will probably better do it with a canvas, but there I can use your help with the web_sys casting as well, thank you very much!