Class SfDiagramOverviewComponent

Represents an overview component that provides navigation capabilities for large and complex diagrams in SfDiagramComponent. This component displays a miniature view of the entire diagram, including areas outside the current viewport, enabling users to navigate efficiently through pan, zoom, resize, and focus rectangle interactions.

Inheritance

System.Object

SfBaseComponent

SfDiagramOverviewComponent

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Diagram.Overview

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDiagramOverviewComponent : SfBaseComponent

Remarks

Key features include:

• Real-time synchronization with the source diagram
• Interactive focus rectangle for viewport navigation
• Pan and zoom capabilities through mouse interactions

Requires a valid SourceID referencing an existing SfDiagramComponent instance.

Examples

This example demonstrates how to create a diagram overview component linked to a main diagram with interactive navigation capabilities.

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" ID="diagram" @bind-Nodes="nodes" @bind-Connectors="connectors">
</SfDiagramComponent>
<SfDiagramOverviewComponent Width="400" Height="300" SourceID="diagram" Constraints="DiagramOverviewConstraints.Zoom">
</SfDiagramOverviewComponent>
@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes;
    DiagramObjectCollection<Connector> connectors;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        connectors = new DiagramObjectCollection<Connector>();
        Node node1 = new Node()
        {
            ID = "node1",
            Height = 100,
            Width = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        Node node2 = new Node()
        {
            ID = "node2",
            Height = 100,
            Width = 100,
            OffsetX = 300,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        nodes.Add(node1);
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
            ID = "connector1",
            SourceID = "node1",
            TargetID = "node2",
            Type = ConnectorSegmentType.Straight,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeWidth = 2
            }
        };
        connectors.Add(connector1);
    }
}

Constructors

SfDiagramOverviewComponent()

Initializes a new instance of the SfDiagramOverviewComponent class.

Declaration

public SfDiagramOverviewComponent()

Properties

Constraints

Gets or sets the interaction constraints that control user interactions (zoom, pan, draw, and tap) within the SfDiagramOverviewComponent for viewing the diagram.

Declaration

public DiagramOverviewConstraints Constraints { get; set; }

Property Value

Type	Description
DiagramOverviewConstraints	A DiagramOverviewConstraints flags enumeration that specifies which interactions are enabled in the SfDiagramOverviewComponent. The default value is Default.

Remarks

This property determines which user interactions are permitted within the overview pane.

Multiple interaction types can be combined using the bitwise OR operator (|), such as DiagramOverviewConstraints.Zoom | DiagramOverviewConstraints.Pan.

Examples

This example demonstrates how to enable specific interactions in the diagram overview component.

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" ID="diagram" 
                    @bind-Nodes="nodes" @bind-Connectors="connectors">
</SfDiagramComponent>
<SfDiagramOverviewComponent Width="400" Height="300" SourceID="diagram" 
                            Constraints="DiagramOverviewConstraints.Zoom | DiagramOverviewConstraints.Pan">
</SfDiagramOverviewComponent>
@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes;
    DiagramObjectCollection<Connector> connectors;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        connectors = new DiagramObjectCollection<Connector>();
        Node node1 = new Node()
        {
            ID = "node1",
            Height = 100,
            Width = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        Node node2 = new Node()
        {
            ID = "node2",
            Height = 100,
            Width = 100,
            OffsetX = 300,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        nodes.Add(node1);
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
            ID = "connector1",
            SourceID = "node1",
            TargetID = "node2",
            Type = ConnectorSegmentType.Straight,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeWidth = 2
            }
        };
        connectors.Add(connector1);
    }
}

Height

Gets or sets the height of the SfDiagramOverviewComponent.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A System.String representing the height dimension of the overview component. The default value is "100%".

Remarks

This property defines the vertical dimension of the overview pane.

Examples

This example demonstrates setting a fixed height for the overview component.

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" ID="diagram" @bind-Nodes="nodes"
                   @bind-Connectors="connectors">
</SfDiagramComponent>
<SfDiagramOverviewComponent Width="400" Height="300" SourceID="diagram"></SfDiagramOverviewComponent>
@code {
    SfDiagramComponent diagram; 
    DiagramObjectCollection<Node> nodes; 
    DiagramObjectCollection<Connector> connectors;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        connectors = new DiagramObjectCollection<Connector>();
        Node node1 = new Node()
        {
            ID = "node1",
            Height = 100,
            Width = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        Node node2 = new Node()
        {
            ID = "node2",
            Height = 100,
            Width = 100,
            OffsetX = 300,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        nodes.Add(node1); 
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
            ID = "connector1",
            SourceID = "node1",
            TargetID = "node2",
            Type = ConnectorSegmentType.Straight,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeWidth = 2
            }
        };
        connectors.Add(connector1);
    }
}

SourceID

Gets or sets the diagram reference ID for linking the SfDiagramOverviewComponent to its source diagram for rendering the overall view.

Declaration

public string SourceID { get; set; }

Property Value

Type	Description
System.String	A System.String representing the unique identifier of the source diagram component. The default value is null.

Remarks

The SourceID must match the ID property of an existing SfDiagramComponent in the same page for the overview to function correctly.

When null or empty, the overview component will not display any diagram content.

Examples

The following example demonstrates how to connect a diagram overview to its source diagram using the SourceID property.

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" ID="diagram" 
                    @bind-Nodes="nodes" @bind-Connectors="connectors">
</SfDiagramComponent>
<SfDiagramOverviewComponent Width="400" Height="300" SourceID="diagram">
</SfDiagramOverviewComponent>
@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes;
    DiagramObjectCollection<Connector> connectors;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        connectors = new DiagramObjectCollection<Connector>();
        Node node1 = new Node()
        {
            ID = "node1",
            Height = 100,
            Width = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        Node node2 = new Node()
        {
            ID = "node2",
            Height = 100,
            Width = 100,
            OffsetX = 300,
            OffsetY = 100,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeColor = "white",
                StrokeWidth = 1
            }
        };
        nodes.Add(node1);
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
            ID = "connector1",
            SourceID = "node1",
            TargetID = "node2",
            Type = ConnectorSegmentType.Straight,
            Style = new ShapeStyle()
            {
                Fill = "#6BA5D7",
                StrokeWidth = 2
            }
        };
        connectors.Add(connector1);
    }
}

Width

Gets or sets the width of the SfDiagramOverviewComponent.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A System.String representing the width of the SfDiagramOverviewComponent. The default value is "100%".

Remarks

This property defines the horizontal dimension of the overview pane.

Examples

The following example demonstrates how to bind a diagram to the overview and set custom width and height values:

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" ID="diagram"
                    @bind-Nodes="nodes" @bind-Connectors="connectors">
</SfDiagramComponent>
<SfDiagramOverviewComponent Width="400" Height="300" SourceID="diagram" />
@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes = new();
    DiagramObjectCollection<Connector> connectors = new();
    protected override void OnInitialized()
    {
        Node node1 = new Node
        {
            ID = "node1", Height = 100, Width = 100, OffsetX = 100, OffsetY = 100,
            Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white", StrokeWidth = 1 }
        };
        Node node2 = new Node
        {
            ID = "node2", Height = 100, Width = 100, OffsetX = 300, OffsetY = 100,
            Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white", StrokeWidth = 1 }
        };
        nodes.Add(node1);
        nodes.Add(node2);
        Connector connector1 = new Connector
        {
            ID = "connector1", SourceID = "node1", TargetID = "node2",
            Type = ConnectorSegmentType.Straight,
            Style = new ShapeStyle { Fill = "#6BA5D7", StrokeWidth = 2 }
        };
        connectors.Add(connector1);
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

InvokeOverviewEvents(Object)

Invokes the overview events for handling mouse and touch interactions within the SfDiagramOverviewComponent.

Declaration

public void InvokeOverviewEvents(object obj)

Parameters

Type	Name	Description
System.Object	obj	An System.Object containing the event data as JSON that will be deserialized into Syncfusion.Blazor.Diagram.Overview.OverviewMouseEventArgs.

Remarks

This method serves as the JavaScript-invokable entry point for processing mouse and touch events from the client-side overview component.

The method supports six event types: mousedown, touchstart (handled by Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.MouseDown(Syncfusion.Blazor.Diagram.Overview.OverviewMouseEventArgs)), mouseup, touchend, mouseleave (handled by Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.MouseUp(Syncfusion.Blazor.Diagram.Overview.OverviewMouseEventArgs)), and mousemove, touchmove (handled by Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.MouseMove(Syncfusion.Blazor.Diagram.Overview.OverviewMouseEventArgs)).

OnAfterRenderAsync(Boolean)

Asynchronously executes logic after the SfDiagramOverviewComponent has been rendered to the DOM.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A System.Boolean value that is true if this is the first time the component is being rendered; otherwise, false for subsequent renders.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation that completes when all post-render initialization and setup operations have finished successfully.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

Called after each render. On first render (firstRender is true), it initializes JavaScript interop and links the overview to the source diagram.

OnInitializedAsync()

This method is invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when any changes in component state occur.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	="Task".