Class SfDiagramComponent
Renders the diagram. It contains all the properties of the diagram to be rendered.
Inherited Members
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
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
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 |