Navigating the diagram to access nodes (directional)

[nabeelfarooqui98]

Hi

What I'm building

I'm trying to build a tool for creating 'flows'. Where each node represents an action such as sending an email or calling an API. Each of my nodes as 2 ports. 1 at the top and 1 at the bottom. My plan is to allow the user to create these flows and connect the nodes top to bottom.

The Problem

The problem I have is that when the user has connected the nodes, and clicks save, I want to read the diagram and convert it into my internal database model. For that I start my iterating the Diagram.Nodes list and each Node has PortLinks. However, from the port link I cant navigate to the 2 connected Nodes.

The Port Link (Base Link Model) has the following Source and Destination properties, which seems like the exact thing I want but those are actually 'Anchors' and I can't navigate to the actual source Node and/or the destination Node.

Am I missing something? Would really appreciate some help.

Thanks

[qallpat]

We have a very similar use case (creating flows). Our approach is a little different to yours.

We take the approach of maintaining the model (which is persisted to the database) first, then drawing the diagram from the model.

So as we add nodes, connectors, we are setting properties on the model. When the model changes, we redraw the diagram using the model class.

In our model, amongst other properties we have a collection of nodes and a collection of connectors. The nodes each have ID and DrawingID properties (reason explained below) whereas the connectors have NodeIDFrom, NodeIDTo, DrawingNodeIDFrom, DrawingNodeIDTo properties.

When we draw the diagram we first draw all Nodes. In doing so, the node is assigned an ID property by the diagram.AddNode method which will then be different to the one in the model, we copy this back to our model's DrawingID property.

We then iterate all connectors on the model, setting DrawingIDFrom, DrawingIDTo properties.

Finally we draw all connectors using the DrawingIDFrom, DrawingIDTo properties.

When it comes to connecting the nodes there are nodes, ports and anchors:

Example:

       public void DrawConnector(Blazor.Diagrams.BlazorDiagram context, DiagramTransition transition)
       {
           // Find the nodes - already drawn on the diagram
           NodeModel? nodeFrom = context.Nodes.FirstOrDefault(n => n.Id.ToLower() == $"{transition.DrawingIdFrom}".ToLower());
           if (nodeFrom is null) return;

           NodeModel? nodeTo = context.Nodes.FirstOrDefault(n => n.Id.ToLower() == $"{transition.DrawingIdTo}".ToLower());
           if (nodeTo is null) return;

           // Get the from node exit port, and to node entry port
           PortModel portFrom = nodeFrom.Ports[1];
           PortModel portTo = nodeTo.Ports[0];

           // Create anchors on the ports
           SinglePortAnchor anchorFrom = new SinglePortAnchor(portFrom);
           SinglePortAnchor anchorTo = new SinglePortAnchor(portTo);

           // Create a link between the anchors
           LinkModel linkModel = context.Links.Add(new LinkModel(anchorFrom, anchorTo));

           linkModel.TargetMarker = LinkMarker.Arrow;
           linkModel.AddLabel(transition.Label);
           linkModel.Color = "black"; 
       }

Note DiagramTransition transition is from our model

ports[0] is always the entry port at the top of the node
ports[1] is always the exit port at the bottom of the node