Connector validation and selection

[Alexander Kuhlmann]

Hello, 

in my diagram project I want to achieve two tings:

1) If I select a connector the connector should became dashed. I tried to use the  OnSelectionChanged event for this:

        private void OnSelectionChanged(SelectionChangedEventArgs args)
        {

            if (args.OldValue != null)
            {
                foreach (var item in args.OldValue)
                {
                    if (item is Connector connector && connector.Style != null)
                    {
                        Debug.WriteLine($"OLD: {connector.ID}");
                        connector.Style.StrokeDashArray = null;
                    }
                }
            }
            if (args.NewValue != null)
            {
                foreach (var item in args.NewValue)
                {
                    if (item is Connector connector && connector.Style != null)
                    {
                        Debug.WriteLine($"New: {connector.ID}");
                        connector.Style.StrokeDashArray = "2,2";
                    }
                }
            }
        }

 If I draw a connector, it directly became dashed, because it is selected after creation. If I deselect it it became a full line, but in the console there are two errors:

An unexpected error occurred: Object reference not set to an instance of an object.
An unexpected error occurred: Object reference not set to an instance of an object.

And after this I can select any connector but it does not turn dashed. In the VisualStudio Output I can see two different things:
The connector seem tho have a different ID during creation. This is just for the selection during the creation, after this the ID changed but then keeps the same.
After the error occurred the Selection event is still fired an I can see the IDS of the old an new selected connector, but the line did not change to dashed anymore.

2) The user should be able to draw connectors but only specific connectors are allowed. This validation depends on source and target port properties. I tried to use the ConnectorCreated event. But if the connector is not valid, I can not remove it from the collection because it is not added to it at this time of the process. So I tried the ConnectorsChanged event. But this events is not fired if I draw a new connector.

I would be happy to geht some help with this.

Best Regards,

Alex

[Ramya Subramani]

Hi Alexander Kuhlmann,

Thank you for your update. Please find the details for both issues below.

Issue 1: Dash array not working

The root cause of the issue is that null is being assigned to the StrokeDashArray property:

connector.Style.StrokeDaskArray = null;

Instead, please assign an empty string (""), which is also the default value for this property, as mentioned in the Syncfusion documentation.

Corrected Code

connector.Style.StrokeDashArray ="";

Update this will resolve the dash array issue.

Issue2 : Validation using CollectionChanging Event

You can validate the connector creation in the CollectionChanging event. CollectionChanging event Occurs before a element is added or removed from the diagram.

I have attached Ug link for your reference - Events in Syncfusion Blazor Diagram Component | Syncfusion

Attaching the code for your reference.

private void OnCollectionChanging(CollectionChangingEventArgs args)
{
    if (args.Element is Connector connector)
    {
        // Validate the connection based on source and target
        bool isValid = ValidateConnection(connector.SourcePortID, connector.TargetPortID);

 

        if (!isValid)
        {
            // Cancel the connector creation
            args.Cancel = true;
        }
    }
}

 

private bool ValidateConnection(string sourceId, string targetId)
{
    // If either source or target is not set yet returns true
    if (string.IsNullOrEmpty(sourceId) || string.IsNullOrEmpty(targetId))
    {
        return false;
    }

    return true;
}

If you have any queries or need assistance, please feel free to reach out. We're always happy to help!

Regards,
Ramya

[Alexander Kuhlmann]

Hi Ramya, 

thank you. 

Both solutions are doing well.

But if I try to change the Type of the connector I always get an "Object reference not set to an instance of an object."
I tried to set the type in the  OnCollectionChanging and the ConnectorCreated event, both with the error.

Are I am donig something wrong?
If there is the possibility to define the default type for every new connector in the diagram, this would be fine for me too.

Regards,
Alex

[Ramya Subramani]

Hi Alexander Kuhlmann,

Thank you for your update.

The root cause of the issue you encountered is that the OnCollectionChanging or ConnectorCreating event is triggered before the drawing connector is added to the diagram. Since the connector is not yet available in the collection at that moment, a null reference exception occurs.

To define the default type for the drawing connector, you can use either of the following solutions:

 

Solution 1: Set the connector type directly in the drawing object

 

This ensures that the connector is created with the correct type before it is added to the diagram.

 

@using Syncfusion.Blazor.Diagram

 

<SfDiagramComponent Connectors="@_connectors" Height="600px" InteractionController="@_tool" DrawingObject="@_drawingObject" />

 

@code
{
    private DiagramInteractions _tool = DiagramInteractions.DrawOnce;

    // Drawing object used by the diagram.
    private Connector _drawingObject = new Connector()
    {
        ID = "connector1",
        Type = ConnectorSegmentType.Bezier,
    };

    // Defines diagram's connectors collection.
    private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
}

 

 

Solution 2: Set the connector type in the CollectionChanged event

 

The CollectionChanged event is triggered after an element is added or removed, so the connector will already exist in the diagram when this executes.

 

Ug link - Connector Events in Syncfusion Blazor Diagram Component | Syncfusion

 

private void OnCollectionChanged(CollectionChangedEventArgs args)

{

    if (args.Element is Connector)

    {

        Connector connector = args.Element as Connector;

        connector.Type = ConnectorSegmentType.Bezier;

    }

}

 

 

If you have any further questions or need assistance with implementing this behavior, please feel free to reach out. We are happy to support you.

Regards,
Ramya

[Alexander Kuhlmann]

HI Ramya, 

thank you again, the drawing object solution did it for my project.

I have another question, hopefully the last one.

When my project starts, it initialized with empty Nodes and Connectors collections.
During my loading process I add some nodes and connectors.
The nodes appear in the diagram, this is fine.
But the connectors have some strange behavior:

the connectors are from Port to Port.

in my example I add two Nodes and one connector.
from the connector I only see the End decorator located in the topleft of the diagram.

if i then drag one node the connector moved between the nodes but ignores the noeports:


if i trigger the RefreshDataSourceAsync() method of the diagram, the connector moved to the right position.

I tried to trigger this method after my loadingprocess but this leads to some errors.
the connector have the correct IDs for source, sourcePort, target and targetport, so this could not be the problem.

Any ideas?

[Ramya Subramani]

Hi Alexander Kuhlmann,

 

This issue occurs because the connector is rendered before the node. To resolve this, we recommend using the AddDiagramElementsAsync method to add elements dynamically. 

For your reference, I’ve attached a UG link:

UG link - How to Use Diagram Methods and Properties | Syncfusion 

 

If you have any queries or need assistance, please feel free to reach out. We're always happy to help!

Regards,
Ramya

[Alexander Kuhlmann]

Hi Ramya, 

thank you for the answer.
But this approach will not work for me. The complete app system is based on the two-way data binding of the node and connector observable collections. 

And if the user is loading a project, these collections are cleared completely and the new elements are added.
Is there a way to know when the nodes are all rendered? If yes I can do the loading in two steps: first the nodes and then the connectors.

Regards,

Alex

[Ramya Subramani]

Hi Alexander Kuhlmann,

You can achieve this behavior by using the CollectionChanged event in the Syncfusion Blazor Diagram component. This event is triggered whenever a node or connector is added or removed. Using this event, you can monitor the number of nodes added and then automatically create a connector once the required number of nodes is present.

For your reference, here is the documentation link:

Ug link - Node Events in Syncfusion Blazor Diagram Component | Syncfusion

Below is a code example demonstrating how to add a connector once two nodes have been added:

<SfDiagramComponent @ref="_diagram" Width="840px" Height="500px" Nodes="@_nodes" Connectors="@_connectors" CollectionChanged="@CollectionChanged"/>

@code{

int count = 0;

private void CollectionChanged(CollectionChangedEventArgs args)
{
    if (args.Element is Node)
    {
        count++;
        if (count == 2)
        {
            Connector connector = new Connector()
            {
                ID = "connector1",
                SourceID = "node1",
                SourcePortID = "n1_out",
                TargetID = "node2",
                TargetPortID = "n2_in",
                Type = ConnectorSegmentType.Straight,
                Style = new ShapeStyle() { StrokeColor = "#3CB371", StrokeWidth = 3 },
            };
            _connectors.Add(connector);

        }
    }

}

Regards,

Ramya