Clickable node about blazor.diagrams HOT 4 CLOSED

Hi @rad765,

since the diagram component layers a div layer above an svg layer, where interaction with the svg layer is necessary for moving nodes, it is not possible to make nodes clickable by applying an onclick callback on the node component. However, it is possible by making the nodes' content clickable:

<RectangleNode Context="node">
    <div @onclick="(_) => { clicked = node; }" style="pointer-events: all;">Node content</div>
</RectangleNode>

Note the pointer-events: all;, which is required, because the node contents are in a div that generally doesn't receive any pointer events.
When you want nodes to be movable AND clickable, I recommend adding a margin to the node content.

<RectangleNode Context="node">
    <div @onclick="(_) => { clicked = node; }" style="pointer-events: all; margin: 1em; background: darkgray;">Node content (movable. To move, grab the node outside the text area)</div>
</RectangleNode>

from blazor.diagrams.

Thank you. I don't realy want the nodes and links to be both clickable an movable, I rather think of two modes for the diagram, (1: "edit" mode where one can create new nodes and move around and draw links, and 2: a non Edit mode where the nodes are clickable.), I will play around with your suggestion, and see if it works.

That brings me to another question, what about JSON serializaion and deserialization of Nodes and Links so that the diagram can be saved and reloaded?

from blazor.diagrams.

I'm afraid there's no (de-)serialization feature in the library. You can use the events to listen to changes in the diagram. If you need a more first-class support for this I'm happy to look at a pull request, if you'd like to implement it.

from blazor.diagrams.

:-) I will take a look on it, to see if I'm able to do it. Thanks

from blazor.diagrams.