NOTE

Syncfusion recommends using Blazor Diagram Component which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future.

Appearance in Blazor Diagram Component

15 Dec 20228 minutes to read

Appearance

  • The shape of a port can be changed by using the Shape property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property.

  • The appearance of the ports can be customized by using the StrokeColor, StrokeWidth, and Fill properties.

  • Customize the port size by using the Width and Height properties of port.

  • The ports Visibility property allows you to define when the port should be visible.

The following code explains how to change the appearance of the port.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{

    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
    protected override void OnInitialized()
    {
        // A node is created and stored in nodes array.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            // Initialize port collection
            Ports = new ObservableCollection<DiagramPort>()
            {
                new DiagramPort()
                {
                    Id = "port1",
                    Offset = new NodePortOffset() { X = 0, Y = 0.5 },
                    Visibility = PortVisibility.Visible,
                    //Set the style for the port
                    Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2},
                    // Sets the shape of the port as Circle
                    Width= 12,
                    Height=12,
                    Shape= PortShapes.Circle
                }
            },
        };
        NodeCollection.Add(node1);
    }
}

Appearance

Visibility

The visibility of the ports depends upon the properties of Connect, Hidden, Hover, and Visible. By default, PortVisibility is set to Hidden.

Property Definition
Hover Port is visible when mousehover the DiagramElement.
Hidden Port is not visible for the DiagramElement.
Connect Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect.
Visible Port is always visible for the DiagramElement.
Default By default, PortVisibility is set to Hidden. So, the port is not visible for the DiagramElement.

Types of port shapes

We have provided some basic built-in PortShapes for the port. Find the shapes as follows.

  • Circle
  • Custom
  • Square
  • X

Custom shape

We have provided custom shape support for port. you can able to add the custom path data instead of build-in shapes. Find the code example that explains how to change the custom shape for port.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{

    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };

    protected override void OnInitialized()
    {
        // A node is created and stored in nodes array.
        DiagramNode node1 = new DiagramNode()
        {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            // Initialize port collection
            Ports = new ObservableCollection<DiagramPort>()
            {
                new DiagramPort()
                {
                    Id = "port1",
                    Offset = new NodePortOffset() { X = 0.5, Y = 0.5 },
                    Visibility = PortVisibility.Visible,
                    //Set the style for the port
                    Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"},
                    // Sets the shape of the port as Circle
                    Width= 12,
                    Height=12,
                    Shape= PortShapes.Custom,
                    PathData="M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z"
                }
            },
        };
        NodeCollection.Add(node1);
    }
}

Port Drag

Constraints

The constraints property allows you to enable or disable certain behaviors of ports. For more information about port constraints, refer to Port Constraints. You can verify the Constraints to learn how to enable or disable the port constraints.

The PortConstraints may have multiple behaviors listed as follows:

Constraints Usages
None Disables all behaviors of Port.
Drag Defines whether port to be dragged at boundaries of node.
Draw Enables or disables to draw a connector.
InConnect Enables or disables connecting to the incoming Connector.
OutConnect Enables or disables connecting the outgoing Connector.

Custom properties

The AddInfo property of the port allows you to maintain additional information to the port.

See also