How to Connect Visio while Dropping Node in Existing Blazor Diagram?
The connectors in Blazor Diagram are used to create a link between two points, ports, or nodes to represent the relationship between them. To connect the connector between two nodes, the connector must have a sourceID and targetID.
We can be able to split the connector between two nodes when dropping a new node onto the existing connector and create the connection between the new node and existing nodes by using the `SelectionChange` and `onDrop` events. To perform the drag and drop of nodes in the diagram, enable the `AllowDrop` constraints for the nodes.
When we drag the node and drop it, the `onDrop` event gets triggered, and the node `SelectionChange` event gets triggered for state. In that state, store the target ID, set the old source ID, and the dropped node ID is set for the connector target ID. The source ID, target ID, and allow drop constraint are assigned if any node is dragged and dropped. Please refer to the code example below for how to perform the above action.
public void SelectionChange(IBlazorSelectionChangeEventArgs args)
{
if (args.State == EventState.Changed && !string.IsNullOrEmpty(targetConnectorId) && !string.IsNullOrEmpty(droppedNodeId))
{
DiagramConnector conn = diagram.GetConnector(targetConnectorId);
DiagramNode node = diagram.GetNode(droppedNodeId);
string oldsourceId = conn.TargetID;
conn.TargetID = droppedNodeId;
DiagramConnector connector = new DiagramConnector()
{
Id = "connector" + diagram.Connectors.Count.ToString(),
SourceID = droppedNodeId,
Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop,
TargetID = oldsourceId,
};
diagram.Connectors.Add(connector);
DiagramNodeAnnotation annotation = new DiagramNodeAnnotation()
{
Content = "Node" + diagram.Nodes.Count.ToString(),
};
node.Annotations.Add(annotation);
targetConnectorId = "";
droppedNodeId = "";
}
By using onDrop when we drag the node and mouse hover on another node highlighter shows. After the node gets dropped ondrop event gets trigger. In that event get the dropped node from element arguments and reset the values and target connector id node id has been assigned for dropped node. Please refer to the code example and sample below
public void OnDrop(IBlazorDropEventArgs args)
{
if(args.Target.Connector != null)
{
targetConnectorId = args.Target.Connector.Id;
droppedNodeId = args.Element.Node.Id;
}
}
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NodeDropSample693376373.zip
Conclusion
I hope you enjoyed learning how to connect visio while dropping node in existing Blazor Diagram.
You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
