Class SfDiagramComponent

Renders the diagram. It contains all the properties of the diagram to be rendered.

Inheritance

System.Object

SfBaseComponent

SfDiagramComponent

Implements

IDiagramObject

System.ICloneable

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

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

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDiagramComponent : SfBaseComponent, IDiagramObject, ICloneable

Constructors

SfDiagramComponent()

Declaration

public SfDiagramComponent()

Properties

BridgeDirection

Defines the direction of the bridge that is inserted when the connector segments are intersected.

Declaration

public Direction BridgeDirection { get; set; }

Property Value

Type	Description
Direction

BridgeDirectionChanged

Specifies the callback to trigger when the bridge direction changes.

Declaration

public EventCallback<Direction> BridgeDirectionChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<Direction>

ChildContent

Sets the child content of the diagram component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment

Click

Triggers when a node, connector or diagram is clicked.

Declaration

public EventCallback<ClickEventArgs> Click { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ClickEventArgs>

CollectionChanged

Triggers when the node/connector is added or removed from the diagram.

Declaration

public EventCallback<CollectionChangedEventArgs> CollectionChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<CollectionChangedEventArgs>

CollectionChanging

Triggers before the node/connector is add or remove from the diagram.

Declaration

public EventCallback<CollectionChangingEventArgs> CollectionChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<CollectionChangingEventArgs>

CommandManager

Defines a set of custom commands and binds them with a set of desired key gestures.

Declaration

public CommandManager CommandManager { get; set; }

Property Value

Type	Description
CommandManager

ConnectionChanged

Triggers when the connector’s source or target point is connected or disconnected from the source or target.

Declaration

public EventCallback<ConnectionChangedEventArgs> ConnectionChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ConnectionChangedEventArgs>

ConnectionChanging

Triggers before the connector’s source or target point is connect or disconnect from the source or target.

Declaration

public EventCallback<ConnectionChangingEventArgs> ConnectionChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ConnectionChangingEventArgs>

ConnectorCreating

Helps to assign the default properties of the connector.

Declaration

public EventCallback<IDiagramObject> ConnectorCreating { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

Connectors

Defines a collection of connector objects, used to create links between two points, nodes or ports to represent the relationships between them.

Declaration

public DiagramObjectCollection<Connector> Connectors { get; set; }

Property Value

Type	Description
DiagramObjectCollection<Connector>

ConnectorsChanged

Specifies the callback to trigger when the connector changes.

Declaration

public EventCallback<DiagramObjectCollection<Connector>> ConnectorsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Connector>>

Constraints

Enables/disables certain behaviors of the diagram.

Declaration

public DiagramConstraints Constraints { get; set; }

Property Value

Type	Description
DiagramConstraints

ConstraintsChanged

Specifies the callback to trigger when the constraint changes.

Declaration

public EventCallback<DiagramConstraints> ConstraintsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramConstraints>

ContextMenuSettings

Represents a shortcut menu

Declaration

public ContextMenuSettings ContextMenuSettings { get; set; }

Property Value

Type	Description
ContextMenuSettings

Created

Triggers when Diagram component is rendered.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

Remarks

The Created event notifies to perform the actions after the control is rendered in a page.

Examples

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
Created="OnCreated">
</SfDiagramComponent>
@code
{
SfDiagramComponent Diagram;
private void OnCreated(object args)
{
Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[2] });
}
}

DataLoaded

Triggers when the diagram layout is rendered completely.

Declaration

public EventCallback<object> DataLoaded { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

DataSourceSettings

Configures the data source that is to be bound with the diagram.

Declaration

public DataSourceSettings DataSourceSettings { get; set; }

Property Value

Type	Description
DataSourceSettings

DiagramTemplates

Represents the template of the diagram element.

Declaration

public DiagramTemplates DiagramTemplates { get; set; }

Property Value

Type	Description
DiagramTemplates

DragDrop

Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area.

Declaration

public EventCallback<DropEventArgs> DragDrop { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DropEventArgs>

Dragging

Triggers when an element drags over another diagram element.

Declaration

public EventCallback<DraggingEventArgs> Dragging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DraggingEventArgs>

DragLeave

Triggers when a symbol is dragged outside of the diagram.

Declaration

public EventCallback<DragLeaveEventArgs> DragLeave { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DragLeaveEventArgs>

DragStart

Triggers when a symbol is dragged into the diagram from the symbol palette

Declaration

public EventCallback<DragStartEventArgs> DragStart { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DragStartEventArgs>

DrawingObject

Defines the object to be drawn using a drawing tool.

Declaration

public IDiagramObject DrawingObject { get; set; }

Property Value

Type	Description
IDiagramObject

DrawingObjectChanged

Specifies the callback to trigger when the drawing object changes.

Declaration

public EventCallback<IDiagramObject> DrawingObjectChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

FixedUserHandleClick

Triggers when a Fixed User Handle item is clicked.

Declaration

public EventCallback<FixedUserHandleClickEventArgs> FixedUserHandleClick { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<FixedUserHandleClickEventArgs>

GetCustomCursor

This method allows users to create their own cursor.

Declaration

public Func<DiagramElementAction, bool, string, string> GetCustomCursor { get; set; }

Property Value

Type	Description
System.Func<DiagramElementAction, System.Boolean, System.String, System.String>

GetCustomTool

This method allows users to customize the tool.

Declaration

public Func<DiagramElementAction, string, InteractionControllerBase> GetCustomTool { get; set; }

Property Value

Type	Description
System.Func<DiagramElementAction, System.String, InteractionControllerBase>

Height

Defines the height of the diagram.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String

HeightChanged

Specifies the callback to trigger when the height changes.

Declaration

public EventCallback<string> HeightChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>

HistoryChanged

Triggers when a change is reverted or restored(undo/redo).

Declaration

public EventCallback<HistoryChangedEventArgs> HistoryChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<HistoryChangedEventArgs>

HistoryManager

Notifies when a change is reverted or restored.

Declaration

public DiagramHistoryManager HistoryManager { get; set; }

Property Value

Type	Description
DiagramHistoryManager

InteractionController

Defines the precedence of the interactive tools.

Declaration

public DiagramInteractions InteractionController { get; set; }

Property Value

Type	Description
DiagramInteractions

InteractionControllerChanged

Specifies the callback to trigger when the tool changes.

Declaration

public EventCallback<DiagramInteractions> InteractionControllerChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramInteractions>

KeyDown

Triggers when a user presses a key.

Declaration

public EventCallback<KeyEventArgs> KeyDown { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>

KeyUp

Triggers when a user releases a key.

Declaration

public EventCallback<KeyEventArgs> KeyUp { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>

Layout

Layout is used to auto-arrange the nodes in the Diagram area.

Declaration

public Layout Layout { get; set; }

Property Value

Type	Description
Layout

MouseEnter

Triggers when the mouse enters a node/connector.

Declaration

public EventCallback<DiagramElementMouseEventArgs> MouseEnter { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

MouseHover

Triggers when the mouse pointer rests on the node/connector.

Declaration

public EventCallback<DiagramElementMouseEventArgs> MouseHover { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

MouseLeave

Triggers when the mouse leaves a node/connector.

Declaration

public EventCallback<DiagramElementMouseEventArgs> MouseLeave { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

NodeCreating

Helps to assign the default properties of nodes.

Declaration

public EventCallback<IDiagramObject> NodeCreating { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

Nodes

Defines a collection of node objects, used to visualize the geometrical information.

Declaration

public DiagramObjectCollection<Node> Nodes { get; set; }

Property Value

Type	Description
DiagramObjectCollection<Node>

NodesChanged

Specifies the callback to trigger when the node changes.

Declaration

public EventCallback<DiagramObjectCollection<Node>> NodesChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Node>>

PageSettings

Page settings enable you to customize the appearance, width, and height of the Diagram page.

Declaration

public PageSettings PageSettings { get; set; }

Property Value

Type	Description
PageSettings

PositionChanged

Triggers when the node's/connector's position is changed.

Declaration

public EventCallback<PositionChangedEventArgs> PositionChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PositionChangedEventArgs>

PositionChanging

Triggers while dragging the elements in the diagram.

Declaration

public EventCallback<PositionChangingEventArgs> PositionChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PositionChangingEventArgs>

PropertyChanged

Triggers when the node or connector property changes.

Declaration

public EventCallback<PropertyChangedEventArgs> PropertyChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PropertyChangedEventArgs>

RotationChanged

Triggers when the diagram elements are rotated.

Declaration

public EventCallback<RotationChangedEventArgs> RotationChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<RotationChangedEventArgs>

RotationChanging

Triggers before the diagram elements are rotate.

Declaration

public EventCallback<RotationChangingEventArgs> RotationChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<RotationChangingEventArgs>

ScrollChanged

Triggers when the scrollbar is updated.

Declaration

public EventCallback<ScrollChangedEventArgs> ScrollChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ScrollChangedEventArgs>

ScrollSettings

Defines the current zoom value, zoom factor, scroll status, and view port size of the diagram.

Declaration

public ScrollSettings ScrollSettings { get; set; }

Property Value

Type	Description
ScrollSettings

SegmentCollectionChange

Triggers when the connector’s segment collection is updated.

Declaration

public EventCallback<SegmentCollectionChangeEventArgs> SegmentCollectionChange { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SegmentCollectionChangeEventArgs>

SelectionChanged

Triggers when the selection is changed in the diagram.

Declaration

public EventCallback<SelectionChangedEventArgs> SelectionChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SelectionChangedEventArgs>

SelectionChanging

Triggers before the selection is change in the diagram.

Declaration

public EventCallback<SelectionChangingEventArgs> SelectionChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SelectionChangingEventArgs>

SelectionSettings

Defines the collection of selected items, the size and position of the selector.

Declaration

public DiagramSelectionSettings SelectionSettings { get; set; }

Property Value

Type	Description
DiagramSelectionSettings

SetNodeTemplate

Customizes the node template.

Declaration

public Func<IDiagramObject, CommonElement> SetNodeTemplate { get; set; }

Property Value

Type	Description
System.Func<IDiagramObject, CommonElement>

SizeChanged

Triggers when a node is resized.

Declaration

public EventCallback<SizeChangedEventArgs> SizeChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangedEventArgs>

SizeChanging

Triggers before a node is resize.

Declaration

public EventCallback<SizeChangingEventArgs> SizeChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangingEventArgs>

SnapSettings

Defines the grid lines and specifies how and when objects must be snapped.

Declaration

public SnapSettings SnapSettings { get; set; }

Property Value

Type	Description
SnapSettings

SourcePointChanged

Triggers when the connector’s source point is changed.

Declaration

public EventCallback<EndPointChangedEventArgs> SourcePointChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

SourcePointChanging

Triggers while dragging the connector’s source end in the diagram.

Declaration

public EventCallback<EndPointChangingEventArgs> SourcePointChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

TargetPointChanged

Triggers when the connector’s target point is changed.

Declaration

public EventCallback<EndPointChangedEventArgs> TargetPointChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

TargetPointChanging

Triggers while dragging the connector’s target end in the diagram.

Declaration

public EventCallback<EndPointChangingEventArgs> TargetPointChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

TextChanged

Triggers when the node’s/connector's label is changed in the diagram.

Declaration

public EventCallback<TextChangeEventArgs> TextChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs>

Width

Defines the width of the diagram.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String

WidthChanged

Specifies the callback to trigger when the width changes.

Declaration

public EventCallback<string> WidthChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>

Methods

AddChild(NodeGroup, NodeBase)

This method is used for adding child to the selected group node.

Declaration

public Task AddChild(NodeGroup group, NodeBase child)

Parameters

Type	Name	Description
NodeGroup	group	NodeGroup
NodeBase	child	NodeBase

Returns

Type	Description
System.Threading.Tasks.Task

AddDiagramElements(DiagramObjectCollection<NodeBase>)

It is used for adding nodes collection to the diagram.

Declaration

public Task AddDiagramElements(DiagramObjectCollection<NodeBase> items)

Parameters

Type	Name	Description
DiagramObjectCollection<NodeBase>	items	DiagramObjectCollection

Returns

Type	Description
System.Threading.Tasks.Task	Task

AddHistoryEntry(HistoryEntryBase)

Declaration

public void AddHistoryEntry(HistoryEntryBase entry)

Parameters

Type	Name	Description
HistoryEntryBase	entry

BeginUpdate()

This method locks the diagram to prevent its visual updates until the EndUpdate() method is called.

Declaration

public void BeginUpdate()

BringForward()

Visually moves the selected Node, Connector and Group over the nearest overlapping Node or connector or group.

Declaration

public void BringForward()

Examples

 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void BringForward() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });     
    diagram.BringForward(); 
} 
} 

BringIntoCenter(DiagramRect)

Bring the specified bounds into center of the view port of the diagram.

Declaration

public void BringIntoCenter(DiagramRect bound)

Parameters

Type	Name	Description
DiagramRect	bound	Specified size of the element that should also be brought into center of the viewport.

Examples

<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings @bind-Orientation="@pageOrientation" @bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
        SfDiagramComponent diagram;

       DiagramObjectCollection<Node> nodes;     
       DiagramObjectCollection<Connector> connectors;
       Create a node with out of the view port to check bring into view and bring center functionalities
       protected override void OnInitialized()
       {
           nodes = new DiagramObjectCollection<Node>(){
           new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
           new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
       };
       }
       Brings the specified bounds into the center of the view port of the diagram
       private void BringIntoCenter()
       {
       DiagramRect bound = new DiagramRect(950,800,500,500);
       diagram.BringIntoCenter(bound);
       }
       }

BringIntoView(DiagramRect)

Bring the specified bounds into the view port of the diagram.

Declaration

public void BringIntoView(DiagramRect bounds)

Parameters

Type	Name	Description
DiagramRect	bounds	Specified size of the element that should also be brought into view.

Examples

<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings @bind-Orientation="@pageOrientation" @bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
        SfDiagramComponent diagram;

       DiagramObjectCollection<Node> nodes;     
       DiagramObjectCollection<Connector> connectors;
       Create a node with out of the view port to check bring into view and bring center functionalities
       protected override void OnInitialized()
       {
           nodes = new DiagramObjectCollection<Node>(){
           new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
           new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
       };
       }
       Brings the specified bounds into the view port of the diagram
       private void BringIntoView()
       {
       DiagramRect bounds = new DiagramRect(950,800,500,500);
       diagram.BringIntoView(bounds);
       }
       }

BringToFront()

Visually brings the selected Node, connector and group to the front over all other overlapped Nodes, Connectors and Groups.

Declaration

public void BringToFront()

Examples

 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100,     OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2);
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3);             
} 
private void BringToFront() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });     
    diagram.BringToFront(); 
} 
} 

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

Clear()

Clear all nodes, connectors and groups in the diagram

Declaration

public void Clear()

ClearHistory()

This method is used to clear the history.

Declaration

public void ClearHistory()

ClearSelection()

It allows the user to clear the selected nodes/connectors in the diagram.

Declaration

public void ClearSelection()

Clone()

This method helps to clone the diagram.

Declaration

public virtual object Clone()

Returns

Type	Description
System.Object	Diagram

Copy()

It copies the selected nodes/connectors to the clipboard.

Declaration

public void Copy()

Cut()

It removes the selected nodes/connectors and moves them to the clipboard.

Declaration

public void Cut()

DoLayout()

It allows the user to refresh the layout at runtime.

Declaration

public Task DoLayout()

Returns

Type	Description
System.Threading.Tasks.Task	Task

Drag(IDiagramObject, Double, Double)

It drags the given object by the specified pixels.

Declaration

public void Drag(IDiagramObject obj, double tx, double ty)

Parameters

Type	Name	Description
IDiagramObject	obj	IDiagramObject
System.Double	tx	double
System.Double	ty	double

EndGroupAction()

It closes the grouping of actions that will be undone/restored as a whole.

Declaration

public void EndGroupAction()

EndUpdate()

This method unlocks the diagram after a call to the BeginUpdate(Boolean) method and causes an immediate visual update.

Declaration

public Task EndUpdate()

Returns

Type	Description
System.Threading.Tasks.Task	Task

ExportAsync(DiagramExportFormat, DiagramExportSettings)

Exports the diagram to base64 string. Exported string can be returned.

Declaration

public Task<string[]> ExportAsync(DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)

Parameters

Type	Name	Description
DiagramExportFormat	fileFormat	Specifies the export type for the rendered diagram.
DiagramExportSettings	exportSettings	Specifies the configutation settings to export the diagram

Returns

Type	Description
System.Threading.Tasks.Task<System.String[]>	The exported diagram as base64 string of the specified file type

Examples

  DiagramExportSettings export = new DiagramExportSettings();
  export.Region = DiagramPrintExportRegion.PageSettings;
  export.PageWidth = 816;
  export.PageHeight = 1054;
  export.Orientation = PageOrientation.Landscape;
  export.FitToPage = true;
  export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
  export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
  //To export the diagram
   string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export);

ExportAsync(String, DiagramExportFormat, DiagramExportSettings)

Exports the rendered diagram to various file types. It supports jpeg, png, svg ,bmp and pdf file types. Exported file will get download at client machine.

Declaration

public Task ExportAsync(string fileName, DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)

Parameters

Type	Name	Description
System.String	fileName	Specifies the filename without extension.
DiagramExportFormat	fileFormat	Specifies the export type for the rendered diagram
DiagramExportSettings	exportSettings	Specifies the configutation settings to export the diagram

Returns

Type	Description
System.Threading.Tasks.Task

Remarks

Diagram supports jepg, png and svg file types.

Examples

  DiagramExportSettings export = new DiagramExportSettings();
  export.Region = DiagramPrintExportRegion.PageSettings;
  export.PageWidth = 816;
  export.PageHeight = 1054;
  export.Orientation = PageOrientation.Landscape;
  export.FitToPage = true;
  export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
  export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
  //To export the diagram
  await diagram.ExportAsync("diagram", format, print);

FitToPage(FitOptions)

Fit the diagram pages based on FitOptions

Declaration

public void FitToPage(FitOptions options = null)

Parameters

Type	Name	Description
FitOptions	options	Specifies the configuration settings to fit the diagram

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
</SfDiagramComponent>
@code
{
   SfDiagramComponent Diagram;
   FitOptions Options = new FitOptions(){
   Mode = FitMode.Both,
   Region = DiagramRegion.PageSetting,

   Diagram.FitToPage(Options);
}

GetObject(String)

This method returns the object based on the given id.

Declaration

public IDiagramObject GetObject(string name)

Parameters

Type	Name	Description
System.String	name	String

Returns

Type	Description
IDiagramObject	IDiagramObject

GetPageBounds(Nullable<Double>, Nullable<Double>)

Represents a method used to get the bounds of the page.

Declaration

public DiagramRect GetPageBounds(Nullable<double> originX = null, Nullable<double> originY = null)

Parameters

Type	Name	Description
System.Nullable<System.Double>	originX
System.Nullable<System.Double>	originY

Returns

Type	Description
DiagramRect

Group()

Group the selected nodes and connectors in the diagram.

Declaration

public void Group()

LoadDiagram(String)

Converts the given string into a Diagram Control.

Declaration

public Task LoadDiagram(string data)

Parameters

Type	Name	Description
System.String	data	string

Returns

Type	Description
System.Threading.Tasks.Task	Diagram

Nudge(Direction, Nullable<Int32>)

Repositions the selected object by the specified delta in the given direction.

Declaration

public void Nudge(Direction direction, Nullable<int> nudgeDelta = null)

Parameters

Type	Name	Description
Direction	direction	Nudge command moves the selected elements towards the specified Direction.
System.Nullable<System.Int32>	nudgeDelta	The amount in delta by which to reposition the selected objects.

Remarks

The nudge commands move the selected elements towards up, down, left, or right by 1 pixel, by default.

Examples

private void Nudge()
 {
   //Repositions the selected objects by 50 towards down direction.
   diagram.Nudge(NudgeDirection.Down, 50);
 }

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()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

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

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

OnPropertyChanged(String, Object, Object, IDiagramObject)

Allows the user to update all the properties.

Declaration

public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject parent)

Parameters

Type	Name	Description
System.String	propertyName	string
System.Object	newVal	object
System.Object	oldVal	object
IDiagramObject	parent	IDiagramObject

Pan(Double, Double, DiagramPoint)

It is used to pan the diagram control to the horizontal and vertical offsets.

Declaration

public void Pan(double horizontalOffset, double verticalOffset, DiagramPoint focusedPoint = null)

Parameters

Type	Name	Description
System.Double	horizontalOffset	double
System.Double	verticalOffset	double
DiagramPoint	focusedPoint	Point

Paste()

Adds the given objects/ objects in the diagram clipboard to the diagram control.

Declaration

public void Paste()

PrintAsync(DiagramPrintSettings)

Prints the diagram pages based on DiagramPrintSettings.

Declaration

public Task PrintAsync(DiagramPrintSettings printSettings)

Parameters

Type	Name	Description
DiagramPrintSettings	printSettings	Specifies the configuration settings to print the diagram.

Returns

Type	Description
System.Threading.Tasks.Task	The System.Threading.Tasks.Task that completes when the diagram is sent to browser print preview window for printing.

Examples

 DiagramPrintSettings print = new DiagramPrintSettings();
 print.PageWidth = 816;
 print.PageHeight = 1054;
 print.Region = DiagramPrintExportRegion.PageSettings;
 print.FitToPage = true;
 print.Orientation = PageOrientation.Landscape;
 print.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
 await diagram.PrintAsync(print);

Redo()

It is used to restore the last undo action.

Declaration

public void Redo()

RefreshDataSource()

This method will refresh the layout based on the changes in the data source.

Declaration

public Task RefreshDataSource()

Returns

Type	Description
System.Threading.Tasks.Task	RefreshDataSource

RemoveChild(NodeGroup, NodeBase)

It is used to remove the child from the selected group node.

Declaration

public void RemoveChild(NodeGroup group, NodeBase child)

Parameters

Type	Name	Description
NodeGroup	group	NodeGroup
NodeBase	child	NodeBase

ResetZoom()

Clears all the panning operations and removes all the panning relations of diagram control. Restores the panning position to origin of the diagram control by zoom level of One.

Declaration

public void ResetZoom()

Examples

<SfDiagramComponent @ref = "diagram" Width="600px" Height="600px" Nodes="nodes">
<SnapSettings Constraints = "@SnapConstraints.ShowLines" ></ SnapSettings >
</ SfDiagramComponent >
@code{
   protected override void OnInitialized()
   {
       Node node = new Node()
       {
           ID = "node6",
           Width = 50,
           Height = 50,
           OffsetX = 150,
           OffsetY = 100,
       };
       Node node2 = new Node()
       {
           ID = "node7",
           Width = 50,
           Height = 50,
           OffsetX = 150,
           OffsetY = 170
      };
       nodes.Add(node);
       nodes.Add(node2);
   }
   public void ZoomIn()
   {
       diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 });
   }
   public void ZoomOut()
   {
       diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 });
   }
   private void ResetZoom()
   {
       diagram.ResetZoom();
   }
}

Rotate(IDiagramObject, Double, DiagramPoint)

Rotates the given nodes/connectors at the given angle.

Declaration

public bool Rotate(IDiagramObject obj, double angle, DiagramPoint pivot = null)

Parameters

Type	Name	Description
IDiagramObject	obj	IDiagramObject
System.Double	angle	double
DiagramPoint	pivot	Point

Returns

Type	Description
System.Boolean

SaveDiagram()

Serializes the diagram control as a string.

Declaration

public string SaveDiagram()

Returns

Type	Description
System.String	jsonData

Scale(IDiagramObject, Double, Double, DiagramPoint)

Scales the given objects by the given ratio.

Declaration

public bool Scale(IDiagramObject obj, double sx, double sy, DiagramPoint pivot)

Parameters

Type	Name	Description
IDiagramObject	obj	IDiagramObject
System.Double	sx	double
System.Double	sy	double
DiagramPoint	pivot	Point

Returns

Type	Description
System.Boolean	checkBoundaryConstraints

Select(ObservableCollection<IDiagramObject>, Nullable<Boolean>)

Selects the given collection of objects.

Declaration

public void Select(ObservableCollection<IDiagramObject> objects, Nullable<bool> multipleSelection)

Parameters

Type	Name	Description
System.Collections.ObjectModel.ObservableCollection<IDiagramObject>	objects	ObservableCollection
System.Nullable<System.Boolean>	multipleSelection	bool

SelectAll()

Select all the objects.

Declaration

public void SelectAll()

SendBackward()

Visually moves the selected Node, connector and group behind the underlying Node or Connector or Group.

Declaration

public void SendBackward()

Examples

 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code{ 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100,     OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void SendBackward() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });     
    diagram.SendBackward(); 
} 
} 

SendToBack()

Visually moves the selected Node, connector and group behind all the other overlapped Nodes, Connectors and Group.

Declaration

public void SendToBack()

Examples

 

<SfDiagramComponent @ref="diagram"  Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent> 
@code { 
SfDiagramComponent diagram; 
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); 
protected override void OnInitialized() 
{ 
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100}; 
    nodes.Add(node1); 
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 }; 
    nodes.Add(node2); 
    Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 }; 
    nodes.Add(node3); 
} 
private void SendToBack() 
{ 
    diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });     
    diagram.SendToBack(); 
} 
} 

SetAlign(AlignmentOptions, DiagramObjectCollection<NodeBase>, AlignmentMode)

Aligns the group of objects with reference to the first object in the group.

Declaration

public void SetAlign(AlignmentOptions alignmentOptions, DiagramObjectCollection<NodeBase> objects = null, AlignmentMode alignmentMode)

Parameters

Type	Name	Description
AlignmentOptions	alignmentOptions	AlignmentOptions
DiagramObjectCollection<NodeBase>	objects	DiagramObjectCollection
AlignmentMode	alignmentMode	AlignmentMode

SetDistribute(DistributeOptions, DiagramObjectCollection<NodeBase>)

It arranges the group of nodes/connectors at equal intervals within the group of nodes/connectors.

Declaration

public void SetDistribute(DistributeOptions option, DiagramObjectCollection<NodeBase> objects = null)

Parameters

Type	Name	Description
DistributeOptions	option	DistributeOptions
DiagramObjectCollection<NodeBase>	objects	DiagramObjectCollection

SetSameSize(SizingMode, DiagramObjectCollection<NodeBase>)

Scales the given objects to the size of the first object in the group.

Declaration

public void SetSameSize(SizingMode sizingType, DiagramObjectCollection<NodeBase> objects = null)

Parameters

Type	Name	Description
SizingMode	sizingType	SizingMode
DiagramObjectCollection<NodeBase>	objects	DiagramObjectCollection

ShouldRender()

This method returns a boolean to indicate if a component’s UI can be rendered.

Declaration

protected override bool ShouldRender()

Returns

Type	Description
System.Boolean	bool

StartGroupAction()

Starts the grouping of actions that will be undone/restored as a whole.

Declaration

public void StartGroupAction()

StartTextEdit(IDiagramObject, String)

Edits the annotation of the node/connector.

Declaration

public void StartTextEdit(IDiagramObject diagramObject, string id = null)

Parameters

Type	Name	Description
IDiagramObject	diagramObject	IDiagramObject
System.String	id	String

Undo()

Restores the last action that is performed.

Declaration

public void Undo()

Ungroup()

Ungroup the selected nodes and connectors in the diagram.

Declaration

public void Ungroup()

UnSelect(IDiagramObject)

Removes the given object from the selection list.

Declaration

public void UnSelect(IDiagramObject obj)

Parameters

Type	Name	Description
IDiagramObject	obj

Zoom(Double, DiagramPoint)

Allows the user to zoom in or zoom out.

Declaration

public void Zoom(double factor, DiagramPoint focusPoint)

Parameters

Type	Name	Description
System.Double	factor	double
DiagramPoint	focusPoint	Point

Implements

IDiagramObject

System.ICloneable