Class SfDiagramOverviewComponent

Represents an overview component for navigating a large and complex diagram. It helps to see overview SfDiagramComponent including the view outside of view port which helps the end-user with navigation. End-users can pan the diagram using overview component by panning, resizing, drawing and tapping the focus rect in Overview component.

Inheritance

System.Object

SfBaseComponent

SfDiagramOverviewComponent

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

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

Namespace: Syncfusion.Blazor.Diagram.Overview

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDiagramOverviewComponent : SfBaseComponent

Examples

<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 value that enables the interactions (zoom, pan, draw and tap) in overview component to view diagram. For example, when zoom enabled - user can zoom the diagram by resizing the rect in overview component.

Declaration

public DiagramOverviewConstraints Constraints { get; set; }

Property Value

Type	Description
DiagramOverviewConstraints	DiagramOverviewConstraints flags enum that specifies which interactions of the SfDiagramOverviewComponent are enabled. The default value is Default

Examples

<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 overview component.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	The height of the SfDiagramOverviewComponent. The default value is 100%.

Examples

<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 the rendering its overall view.

Declaration

public string SourceID { get; set; }

Property Value

Type	Description
System.String	The String value represents the unique ID of the source diagram. The default value is null.

Examples

<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 overview component.

Declaration

public string Width { get; set; }

Property Value

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

Examples

<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);
   }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

InvokeOverviewEvents(Object)

Declaration

public void InvokeOverviewEvents(object obj)

Parameters

Type	Name	Description
System.Object	obj

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering, otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

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".