Class DiagramUserHandle
Represents a customizable handle that can be used to perform custom actions.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramUserHandle : SfDiagramBase
Remarks
The user handles are icons that are placed around the selected node or connector to run the frequently used commands, and that icons can be the path, image, SVG content, or HTMLTemplate.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection" SelectedItems="@SelectedModel">
</SfDiagram>
@code{
// Defines diagram's nodes collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }
// Defines diagram's SelectedItems
public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; }
ObservableCollection<DiagramUserHandle> UserHandles { get; set; }
protected override void OnInitialized()
{
//Creating the user handle for cloning the objects
DiagramUserHandle CloneHandle = new DiagramUserHandle()
{
//Name of the user handle
Name = "clone",
//Set pathdata for userhandle
PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
};
//Add user handle to the user handle collection
UserHandles = new ObservableCollection<DiagramUserHandle>()
{
CloneHandle
};
SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems()
{
//Enable user handle for selected items...
Constraints = SelectorConstraints.UserHandle,
UserHandles = this.UserHandles
};
NodeCollection = new ObservableCollection<DiagramNode>();
DiagramNode DiagramNode = new DiagramNode()
{
Id = "node1",
OffsetX = 100,
OffsetY = 100,
Width = 100,
Height = 100,
Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
};
NodeCollection.Add(DiagramNode);
}
}
Constructors
DiagramUserHandle()
Represents a customizable handle that can be used to perform custom actions.
Declaration
public DiagramUserHandle()
Properties
BackgroundColor
Defines the background color of the user handles. By default, it will be black.
Declaration
public string BackgroundColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
BorderColor
Defines the border color of the user handles.
Declaration
public string BorderColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
BorderWidth
Defines the border width of the user handles.
Declaration
public double BorderWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Content
Defines the shape information of the user handle. This property is specific to the content.
Declaration
public string Content { get; set; }
Property Value
Type | Description |
---|---|
System.String |
DisableConnectors
Defines the visibility of the user handles to the Connectors.
Declaration
public bool DisableConnectors { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Remarks
By default, this property will be false. If set true, the user handles prevent rendering for the connectors.
DisableNodes
Defines the visibility of the user handles to the Nodes.
Declaration
public bool DisableNodes { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Remarks
By default, this property will be false. If set true, the user handles prevent rendering for the nodes.
Displacement
This property allows the user to dislocate the user handle from its original position by the given value. By default, it will be 10.
Declaration
public double Displacement { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
HorizontalAlignment
Defines the horizontal alignment of the user handle.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Remarks
The list of following options is used to defining the HorizontalAlignment of the user handle, |
1. Stretch - Stretches the diagram element throughout the selector. |
2. Left - Aligns the diagram element at the left of the selector. |
3. Right - Aligns the diagram element at the right of the selector. |
4. Center - Aligns the diagram element at the center of the selector. |
5. Auto - Aligns the diagram element based on the characteristics of the selector. |
By default, the HorizontalAlignment of the user handle will be center. |
Margin
Specifies the space around the user handles. By default, it will be 0 from all sides.
Declaration
public DiagramUserHandleMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
DiagramUserHandleMargin |
Examples
//set margin for the user handle
Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
Name
Returns the unique name of the user handle.
Declaration
public string Name { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
user handle Name needs to be unique to use. When creating a handle, the user should not provide the same Name to other handles.
Offset
Gets or sets the position for the user handle.
Declaration
public Nullable<double> Offset { get; set; }
Property Value
Type | Description |
---|---|
System.Nullable<System.Double> |
Remarks
Offset values range from 0 to 1. |
1. 0 represents the top left corner of the node. |
2. 0.5 represents half of the width or height. |
3. 1 represents the bottom right corner of the node. |
By default, the offset value is set to 0. |
PathColor
Defines the path color of the user handle. By default, it will be white.
Declaration
public string PathColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
PathData
Defines the shape information of the user handle. This property is specific to the Path of the user handle.
Declaration
public string PathData { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Examples
DiagramUserHandle cloneHandle = new DiagramUserHandle()
{
//Set pathdata to userhandle
PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
}
Side
Gets or sets the side of the user handle based on the given offset.
Declaration
public Side Side { get; set; }
Property Value
Type | Description |
---|---|
Side |
Remarks
Users can customize the side property of the user handle. This property has the following options |
1. Top - Aligns the user handles at the top of an object. |
2. Bottom - Aligns the user handles at the bottom of an object. |
3. Left - Aligns the user handles at the left of an object |
4. Right - Aligns the user handles at the right of an object |
By default, the side property will be Top. |
Size
Gets or sets the size of the user handle. By default, it will be 25.
Declaration
public double Size { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Source
Defines the shape information of the user handle. This property is specific to the image source of the user handle.
Declaration
public string Source { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Examples
DiagramUserHandle CloneHandle = new DiagramUserHandle()
{
//Set image source to userhandle
Source = './download.png',
},
VerticalAlignment
Defines the vertical alignment of the user handle.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Remarks
The list of following options is used to defining the Horizontal Alignment of the user handle |
1. Stretch - Stretches the diagram element throughout the selector. |
2. Left - Aligns the diagram element at the left of the selector. |
3. Right - Aligns the diagram element at the right of the selector. |
4. Center - Aligns the diagram element at the center of the selector. |
5. Auto - Aligns the diagram element based on the characteristics of the selector. |
By default, the VerticalAlignment of the user handle will be center. |
Visible
Specifies the visibility of the user handle. By default, it will be true.
Declaration
public bool Visible { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |