How to Connect Visio while Dropping Node in Existing Blazor Diagram?
Connectors in Blazor Diagram are used to create links between two points, ports, or nodes to represent relationships. To connect a connector between two nodes, it must have a sourceID and targetID.
You can split a connector between two nodes by dropping a new node onto the existing connector and create connections between the new node and existing nodes using the `SelectionChange` and `onDrop` events. To enable drag and drop functionality for nodes in the diagram, set the `AllowDrop` constraints for the nodes.
When you drag and drop a node, the `onDrop` event is triggered, followed by the `SelectionChange` event which handles the state changes. During this process, the target ID is stored, the old source ID is preserved, and the dropped node ID is assigned as the connector's target ID. When a node is dragged and dropped, the source ID, target ID, and AllowDrop constraint are appropriately assigned. Please refer to the code example below to understand how to implement this functionality.
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 = "";
}
When using the `onDrop` event, a highlighter appears when you drag a node and hover over another node. After the node is dropped, `onDrop` event is triggered. In this event handler, the dropped node is retrieved from the element arguments, values are reset, and the target connector ID is assigned to the 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:
We hope you enjoyed learning how to connect nodes by dropping a new node onto an existing connector in Blazor Diagram.
You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, to understand how to create and manipulate data.
For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.
If you have any questions 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!
