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 new node onto the existing connector and create the connection between new node and existing nodes by using SelectionChange and onDrop event. To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints to the nodes.
When we drag the node and drop, onDrop event gets triggered and node selectionChange event gets triggered for state. In that state store the target Id set for oldsource id and dropped node id is set for connector target id. The source id, target id and allow drop constraint are assigned for the if any node is drag and dropped. Please refer to below code example for how to perform 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!
