Animate Port Connectors to Show Flow Direction

[Stuart]

Can you please tell me if it's possible to customise the appearance of port connectors to show a direction of flow for a process diagram, similar to this: https://gojs.net/latest/samples/processFlow.html

[Aravind Ravi]

Hi Stuart, 

 

We do not have an animation support for the flow of connection. We do not have any plans to implement this feature.  

 

Regards 

Aravind Ravi 

[Stuart]

Thanks for the response Aravind.

For a diagram that is generated dynamically (based on some config that would be stored in database), is it possible to bind a value to the connector colour, to allow the connection colour to change in realtime as the application in running?

[Aravind Ravi]

Hi Stuart, 

 

In the diagram, by using the ConnectorDefault property we can able to set the color for the connector. At time of every connector gets render, the connector default method gets triggered. In the connector default method, set the color for the connector. In that you can bind a color value to the connector stroke color property. Please refer to the below code snippet 

 

<SfDiagram ID="diagram" Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue"> 

</SfDiagram> 

 

  DiagramConnector ConnectorDefaults = new DiagramConnector() 

    { 

        Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, 

//Instead that you can bind the color value to the connector stroke color 

        Style = new ConnectorShapeStyle() { StrokeColor = "Red"} 

    }; 

 

Yes, in the diagram at runtime we can able to change the stroke color of the connector.  After select the connector, by using the diagram’s selectedItems property we can able to get the selected connector. By using the connector we can able to change the color for connector through strokeColor property. Please refer to below code snippet 

 

public void ChangeColor() 

    { 

        DiagramConnector connector = diagram.SelectedItems.Connectors[0]; 

        connector.Style.StrokeColor = "blue"; 

        this.StateHasChanged(); 

    } 

 

For more information about how to customize the connector’s appearance, please refer to below UG documentation link 

 

UG Link: https://blazor.syncfusion.com/documentation/diagram/connectors/customization/#appearance 

 

Regards 

Aravind Ravi